/* Peak - teal theme and grid background */
:root {
  color-scheme: dark;
  --bg: #0f1118;
  --bg-alt: #12141c;
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --teal: #2dd4bf;
  --teal-dim: rgba(45, 212, 191, 0.15);
  --accent: #fff;
  --border: #334155;
  --btn-bg: #fff;
  --btn-text: #0a0a0a;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --page-margin: 3.5rem;
  --nav-link: #ffffff;
  --nav-link-hover: #79ffea;
  --nav-active: #ffffff;
  --nav-dd-bg: rgba(15, 17, 24, 0.72);
  --nav-dd-border: rgba(255, 255, 255, 0.12);
  --nav-mobile-divider: rgba(255, 255, 255, 0.12);
  --nav-mobile-row: rgba(255, 255, 255, 0.08);
  /* ≤1280 drawer: vertical glass (never fully opaque) — stronger toward bottom for link legibility */
  --nav-drawer-grad-1: rgba(14, 16, 24, 0.52);
  --nav-drawer-grad-2: rgba(11, 13, 20, 0.68);
  --nav-drawer-grad-3: rgba(8, 10, 16, 0.8);
  --nav-toggle-bar: #ffffff;
  --header-border: rgba(255, 255, 255, 0.12);
  --header-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --glass-chrome-radius: clamp(0.62rem, 0.95vw, 0.78rem);
  /* Nav bar + index hero glass cards — same end-to-end span */
  --header-bar-width: min(1520px, calc(100vw - 2 * var(--page-margin)));
  --hero-tagline: #ffffff;
  --hero-line: #ffffff;
  --definition-trigger-fg: #ffffff;
  --government-kicker: #aafff0;
  --cta-title: #ffffff;
  --cta-line: #ffffff;
  --product-hero-bg-a: #0f1118;
  --product-hero-bg-b: #0f1118;
  --product-hero-bg-c: #101218;
  --product-hero-bg-d: #11141a;
  --product-hero-bg-e: #12161c;
  /* Cap promo-section SVG columns (assets use ~3665px intrinsic width — uncapped `auto` grid tracks steal the whole row) */
  --section-promo-graphic-max: min(452px, 100%);
  /* Deepfake: same art column cap as spiral/net so donut + orb read the same scale */
  --section-deepfake-graphic-max: var(--section-promo-graphic-max);
  /* Home promo CSAM + Deepfake h2 rules: floor + vw cap; low vw = line shrinks slowly with viewport (overhang keeps it past title) */
  --promo-title-rule-floor: clamp(11.6rem, 13.25vw, 24.5rem);
  --promo-title-rule-gutter: clamp(3.2rem, 6.15vw, 7.75rem);
  /* Index CSAM / Deepfake / Dashboards — one gutter between copy and art; symmetric inner padding (not hero copy inset). */
  --section-promo-column-gap: clamp(1.75rem, 3.25vw, 3rem);
  --section-promo-inner-pad-x: clamp(0.75rem, 2.25vw, 1.75rem);
  /* Spiral / net / deepfake copy horizontal nudge: 0 by default; strong desktop-only value in @media (min-width: 901px) */
  --section-promo-right-col-extra-x: 0;
  /* CSAM copy / donut / dashboards copy — nudge right on desktop two-column promos */
  --section-promo-left-col-extra-x: 0;
  /* Primary copy inset from inner column edge — matches index .hero-left; widens at ≥1729 via rule below */
  --page-text-inset-left: 2rem;
}

/* Index promos: two-column layout only — column nudges (901+; 0 below so stacked promos stay put) */
@media (min-width: 901px) {
  :root {
    --section-promo-right-col-extra-x: clamp(-3.75rem, -9vw, -1.85rem);
    --section-promo-left-col-extra-x: clamp(1.35rem, 4.25vw, 3.5rem);
  }
}

/* Mid-wide two-column promos: strong copy↔art translateX + modest gap can overlap (~1300–1680px). Ease nudges here; full offset returns ≥1681px. */
@media (min-width: 901px) and (max-width: 1680px) {
  :root {
    --section-promo-right-col-extra-x: clamp(-1.05rem, -2.1vw, -0.2rem);
    --section-promo-left-col-extra-x: clamp(0.15rem, 1.2vw, 1.1rem);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0 var(--page-margin);
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow-x: visible;
  position: relative;
}

/* Pairs: .theme-img--dark (default) + .theme-img--light — light assets live under assets/light/
   !important: section/nav rules (e.g. .section-csam-spiral-layer { display: block }) otherwise
   override display:none and both images show in dark mode. */
.theme-img--light {
  display: none !important;
}

html[data-theme='light'] .theme-img--light {
  display: block !important;
}

html[data-theme='light'] .theme-img--dark {
  display: none !important;
}

/* Header wrapper - same padding as body so bar can align left with content */
.header-wrap {
  position: fixed;
  top: 1.5rem;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0 var(--page-margin);
  pointer-events: none;
}
.header-wrap > .header {
  pointer-events: auto;
}

/* Shared nav / hero glass (dark default — same blur, border, shadow tokens as header). */
.glass-chrome {
  position: relative;
  background: transparent;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--header-border);
  box-shadow: var(--header-shadow);
  overflow: visible;
}

.glass-chrome::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
      90deg,
      transparent 0%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 100%
    );
  pointer-events: none;
  z-index: 0;
}

/* Header bar - narrower, centered */
.header {
  font-family: 'Azeret Mono', monospace;
  font-weight: 300;
  width: var(--header-bar-width);
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--glass-chrome-radius);
  transition: opacity 0.35s ease;
}
.header.header-faded {
  opacity: 0;
  pointer-events: none;
}

.nav {
  font-family: 'Azeret Mono', monospace;
  font-weight: 300;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(0.75rem, 2vw, 1.5rem);
  padding: 1.25rem 2.5rem;
  min-height: 3.5rem;
  box-sizing: border-box;
}

.nav-end {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 0.9vw, 0.55rem);
}

.nav-logo-row {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: clamp(0.65rem, 1.35vw, 1rem);
  flex-shrink: 0;
  min-width: 0;
}

.nav-logo {
  font-family: 'Azeret Mono', monospace;
  font-weight: 300;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  line-height: 1;
  flex-shrink: 0;
}
.nav-logo-img {
  display: block;
  height: 1.5rem;
  width: auto;
  object-fit: contain;
  transform: translateY(-1px);
}

.nav-logo-row .theme-toggle {
  flex-shrink: 0;
}

/* Header TAP LOGIN: mint .btn-hero pill — height synced with .theme-toggle track; type matches .nav-list a */
.nav-tap-login.btn-hero {
  margin-top: 0;
  margin-left: 0;
  white-space: nowrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 2.25rem;
  height: 2.25rem;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: 0.15em;
  padding: 0 1.125rem;
  gap: 0.35rem;
  border-radius: 9999px;
  color: #000;
  -webkit-text-fill-color: #000;
}

.nav-tap-login.btn-hero::before {
  border-radius: 9999px;
}

.nav-tap-login.btn-hero:hover {
  font-size: 1.15rem;
  font-weight: 450;
  color: #000;
  -webkit-text-fill-color: #000;
}

.nav-tap-login.btn-hero .btn-arrow {
  position: relative;
  z-index: 1;
  width: 1.2rem;
  height: 1.2rem;
}

.nav-tap-login.btn-hero .btn-arrow svg {
  width: 0.7rem;
  height: 0.7rem;
}

.nav-tap-login.btn-hero:hover .btn-arrow svg {
  width: 0.72rem;
  height: 0.72rem;
}

/* Header theme: pill track + sliding thumb (sun = light active, moon = dark active) */
.theme-toggle {
  --theme-toggle-h: 2.25rem;
  --theme-toggle-pad: 1px;
  --theme-toggle-thumb: calc(var(--theme-toggle-h) - 2 * var(--theme-toggle-pad) - 3px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.15s ease;
}

/* Light-only pages: keep pill for header parity; no theme switch (see script.js). */
.theme-toggle[data-theme-toggle-light-only] {
  pointer-events: none;
  cursor: default;
}

.theme-toggle:hover .theme-toggle__track {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(18, 22, 32, 0.72);
}

html[data-theme='light'] .theme-toggle:hover .theme-toggle__track {
  border-color: rgba(15, 23, 42, 0.2);
  background: rgba(252, 252, 254, 0.82);
}

.theme-toggle:active {
  transform: scale(0.98);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--nav-link-hover);
  outline-offset: 3px;
}

.theme-toggle__track {
  position: relative;
  display: block;
  width: calc(2 * var(--theme-toggle-thumb) + 2 * var(--theme-toggle-pad));
  height: var(--theme-toggle-h);
  padding: var(--theme-toggle-pad);
  border-radius: 9999px;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  background: rgba(18, 22, 32, 0.64);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.55),
    inset 0 -4px 12px rgba(0, 0, 0, 0.42),
    inset 0 0 18px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    background 0.28s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

html[data-theme='light'] .theme-toggle__track {
  background: rgba(252, 252, 254, 0.68);
  border: 1px solid rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  box-shadow:
    inset 0 2px 6px rgba(15, 23, 42, 0.08),
    inset 0 -2px 6px rgba(15, 23, 42, 0.08),
    inset 0 0 10px rgba(255, 255, 255, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* Sliding thumb — mint pill; active theme icon inside */
.theme-toggle__thumb {
  position: absolute;
  top: var(--theme-toggle-pad);
  left: var(--theme-toggle-pad);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--theme-toggle-thumb);
  height: var(--theme-toggle-thumb);
  border-radius: 50%;
  background: #aafff0;
  border: 1.5px solid #8ffffb;
  box-shadow:
    inset 0 2px 10px rgba(255, 255, 255, 0.5),
    inset 0 -2px 10px rgba(15, 23, 42, 0.08),
    inset 0 0 12px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(15, 23, 42, 0.05);
  color: #0a0a0a;
  transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme='light'] .theme-toggle__thumb {
  left: calc(100% - var(--theme-toggle-pad) - var(--theme-toggle-thumb));
}

/* Inactive theme icon in track end (opposite side from thumb) */
.theme-toggle__track-icon {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--theme-toggle-thumb);
  height: var(--theme-toggle-thumb);
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

html[data-theme='light'] .theme-toggle__track-icon {
  color: rgba(15, 23, 42, 0.45);
}

.theme-toggle__track-icon svg {
  width: 58%;
  height: 58%;
  stroke-width: 2.2;
  stroke-opacity: 1;
}

/* Dark: moon in thumb (left) → sun on track right */
.theme-toggle__track-icon--moon {
  left: var(--theme-toggle-pad);
  display: none;
}

.theme-toggle__track-icon--sun {
  right: var(--theme-toggle-pad);
  display: flex;
}

/* Light: sun in thumb (right) → moon on track left */
html[data-theme='light'] .theme-toggle__track-icon--moon {
  display: flex;
}

html[data-theme='light'] .theme-toggle__track-icon--sun {
  display: none;
}

.theme-toggle__thumb-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 58%;
  height: 58%;
  pointer-events: none;
}

.theme-toggle__thumb-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2.2;
  stroke-opacity: 1;
}

/* Dark: moon inside thumb */
.theme-toggle__thumb-icon--moon {
  display: flex;
}

.theme-toggle__thumb-icon--sun {
  display: none;
}

html[data-theme='light'] .theme-toggle__thumb-icon--moon {
  display: none;
}

html[data-theme='light'] .theme-toggle__thumb-icon--sun {
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__thumb,
  .theme-toggle__track {
    transition: none;
  }

  .nav-toggle span {
    transition: none;
  }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 0.5rem;
  margin: 0;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--nav-toggle-bar);
  border-radius: 1px;
  transform-origin: center;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--nav-link-hover);
  outline-offset: 3px;
  border-radius: 4px;
}

.nav-list {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Wide desktop: roomier; steps below tighten before logo / TAP LOGIN overlap */
  gap: clamp(1.2rem, 2vw + 0.55rem, 3.85rem);
}

.nav-list > li {
  display: flex;
  align-items: center;
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  height: 1.55em;
  font-family: 'Azeret Mono', monospace;
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0;
  color: var(--nav-link);
  text-decoration: none;
  line-height: 1;
  box-sizing: border-box;
  white-space: nowrap;
}

/* Same span as visible chevron but hidden – keeps all nav links identical for alignment */
.nav-chevron-invisible {
  visibility: hidden;
}

.nav-list a:hover {
  color: var(--nav-link-hover);
}

.nav-list a.nav-active {
  color: var(--nav-active);
}

.nav-dropdown-menu a.nav-active {
  color: var(--nav-link-hover);
}

.nav-dropdown {
  position: relative;
}

/* Invisible bridge so mouse can move from trigger to menu without losing hover */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 1.5rem;
  display: none;
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 1.5rem);
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0.55rem;
  background: var(--nav-dd-bg);
  border: 1px solid var(--nav-dd-border);
  border-radius: var(--glass-chrome-radius);
  min-width: 240px;
  z-index: 100;
  isolation: isolate;
}

/* Desktop only: hover flyout beat the mobile accordion’s display:none (same breakpoint family as ≤1280 hamburger) */
@media (min-width: 1281px) {
  .nav-dropdown:hover::after {
    display: block;
  }

  .nav-dropdown:hover .nav-dropdown-menu {
    display: block;
  }
}

.nav-dropdown-menu li + li {
  margin-top: 0.35rem;
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: calc(var(--glass-chrome-radius) - 0.14rem);
  color: var(--nav-link);
  text-decoration: none;
  white-space: nowrap;
  font-family: 'Azeret Mono', monospace;
}

.nav-dropdown-menu a:hover {
  color: var(--nav-link-hover);
}

.nav-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55em;
  font-weight: 200;
  line-height: 1;
  opacity: 0.9;
  transform: translateY(0.06em) rotate(90deg);
}


.nav-tight {
  letter-spacing: -0.03em;
  margin-left: -0.1em;
}

.nav-words-tight {
  word-spacing: -0.15em;
}

/* Nav: tighten link spacing as the window narrows (desktop bar only, ≥1281) */
@media (max-width: 1720px) {
  .nav-list {
    gap: clamp(1.1rem, 1.65vw + 0.5rem, 3.25rem);
  }
}

@media (max-width: 1520px) {
  .nav {
    column-gap: clamp(0.65rem, 1.35vw, 1.15rem);
    padding-left: clamp(1.25rem, 2.2vw, 2rem);
    padding-right: clamp(1.25rem, 2.2vw, 2rem);
  }

  .nav-list {
    gap: clamp(1rem, 1.35vw + 0.45rem, 2.65rem);
  }
}

@media (max-width: 1360px) {
  .nav-list {
    gap: clamp(0.9rem, 1.05vw + 0.38rem, 2rem);
  }
}

/* Nav: compress type slightly before hamburger breakpoint */
@media (max-width: 1180px) {
  .nav {
    padding: 1.1rem clamp(1rem, 2.5vw, 2.25rem);
  }

  .nav-list a {
    font-size: clamp(0.82rem, 0.72rem + 0.35vw, 1.05rem);
    letter-spacing: clamp(0.06em, 0.04em + 0.15vw, 0.12em);
  }

  .nav-tap-login.btn-hero {
    font-size: clamp(0.82rem, 0.72rem + 0.35vw, 1.05rem);
    font-weight: 400;
    letter-spacing: clamp(0.06em, 0.04em + 0.15vw, 0.12em);
  }

  .nav-tap-login.btn-hero:hover {
    font-size: clamp(0.82rem, 0.72rem + 0.35vw, 1.05rem);
    font-weight: 450;
    letter-spacing: clamp(0.06em, 0.04em + 0.15vw, 0.12em);
  }
}

/* Narrow / tablet: hamburger + stacked menu (avoids clipped / broken labels) */
@media (max-width: 1280px) {
  html.nav-menu-open {
    overflow: hidden;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-toggle[aria-expanded='true'] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle[aria-expanded='true'] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .nav-toggle[aria-expanded='true'] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    row-gap: 0;
  }

  .nav-logo-row {
    grid-column: auto;
    justify-self: auto;
    order: 1;
  }

  .nav-end {
    grid-column: auto;
    justify-self: auto;
    margin-left: auto;
    order: 2;
  }

  .nav-list {
    grid-column: auto;
    justify-self: auto;
    order: 3;
    display: none;
    flex-basis: 100%;
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 0.85rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--nav-mobile-divider);
  }

  /* Gradient + glass on the whole header bar when open (not only the <ul>, which read as a floating box) */
  .nav:has(.nav-list.is-open) {
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(
      180deg,
      var(--nav-drawer-grad-1) 0%,
      var(--nav-drawer-grad-2) 38%,
      var(--nav-drawer-grad-3) 100%
    );
    backdrop-filter: blur(20px) saturate(1.12);
    -webkit-backdrop-filter: blur(20px) saturate(1.12);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -1px 0 rgba(0, 0, 0, 0.14);
  }

  html[data-theme='light'] .nav:has(.nav-list.is-open) {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(15, 23, 42, 0.07);
  }

  .nav-list.is-open {
    display: flex;
    position: relative;
    z-index: 5;
    background: transparent;
    padding-bottom: 0.35rem;
  }

  .nav-list > li {
    width: 100%;
    border-bottom: 1px solid var(--nav-mobile-row);
  }

  .nav-list > li:last-child {
    border-bottom: none;
  }

  .nav-list a {
    width: 100%;
    min-height: clamp(3.1rem, 9vw, 4rem);
    height: auto;
    padding: 0.85rem 0.35rem;
    justify-content: space-between;
    font-family: 'Inter Tight', 'Inter', var(--font), system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(1.2rem, 4.35vw, 1.85rem);
    letter-spacing: 0.02em;
    line-height: 1.28;
    text-transform: none;
  }

  /* “What we aren’t”: row uses space-between — invisible chevron is a flex item, so “are” / n’t / chevron get max space between (≥1281 unchanged). */
  .nav-list a.nav-words-tight {
    justify-content: flex-start;
    word-spacing: normal;
    /* Parent .nav-list a uses letter-spacing; it adds a visible gap after “e” before the <span> for “n’t”. */
    letter-spacing: normal;
  }

  .nav-list a.nav-words-tight .nav-tight {
    margin-left: -0.14em;
  }

  .nav-list a.nav-words-tight .nav-chevron-invisible {
    margin-left: auto;
  }

  /* Hover flyouts don’t work reliably on touch */
  .nav-dropdown:hover .nav-dropdown-menu {
    display: none;
  }

  .nav-dropdown:hover::after {
    display: none;
  }

  /* Accordion submenus: hidden until parent row tapped; stack under trigger with indent (not flush right) */
  .nav-list.is-open .nav-dropdown {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .nav-list.is-open .nav-dropdown-menu {
    display: none;
    position: static;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    margin: 0.2rem 0 0.4rem 0;
    padding: 0.25rem 0 0.35rem 1rem;
    border: none;
    border-left: 1px solid var(--nav-mobile-divider);
    margin-left: 0.35rem;
    background: transparent;
    box-shadow: none;
    list-style: none;
  }

  .nav-list.is-open .nav-dropdown.is-sub-open .nav-dropdown-menu {
    display: block;
  }

  .nav-dropdown > a .nav-chevron {
    transition: transform 0.2s ease;
  }

  .nav-dropdown.is-sub-open > a .nav-chevron {
    transform: translateY(0.06em) rotate(270deg);
  }

  .nav-list.is-open .nav-dropdown-menu li + li {
    margin-top: 0.35rem;
  }

  .nav-list.is-open .nav-dropdown-menu a {
    min-height: 0;
    width: 100%;
    justify-content: flex-start;
    padding: 0.55rem 0.35rem 0.55rem 0;
    font-family: 'Inter Tight', 'Inter', var(--font), system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(1.12rem, 3.9vw, 1.58rem);
    letter-spacing: 0.018em;
    line-height: 1.32;
    text-transform: none;
  }
}

/*
 * Header — narrow landscape 800–904 only: match product (CSAM / deepfake) bar width `min(1520px, 100%)` + shorter nav row.
 * Non-product pages previously used wider `calc(100vw − …)` here; product always used `body:has(…) .header` — unify in this band.
 */
@media (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .header {
    width: min(1520px, 100%) !important;
  }

  .nav {
    padding-top: clamp(0.65rem, 1.45dvh, 0.88rem);
    padding-bottom: clamp(0.65rem, 1.45dvh, 0.88rem);
    min-height: clamp(2.62rem, 4dvh, 2.95rem);
  }
}

/* Hero */
.hero-grid-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.8s ease-out;
  background: var(--bg);
}

.hero-grid-bg.faded {
  opacity: 0;
  pointer-events: none;
}

/* Product hero (script.js): fade gradient/dots layer when the hero scrolls off-screen — mirrors `.hero-grid-bg.faded`. */
.product-hero__bg.faded {
  opacity: 0;
  pointer-events: none;
}

.hero-grid-bg waves-two {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.hero-graphic-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 2rem;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  pointer-events: none;
  align-items: flex-start;
  justify-items: center;
}

.hero-graphic-layer .hero-graphic {
  grid-column: 2;
  margin-top: 17rem;
  margin-left: -5rem;
  max-width: 720px;
  width: 100%;
  height: auto;
  opacity: 0.95;
  mix-blend-mode: screen;
  filter: brightness(0.95) contrast(0.95);
}

.hero-landing .hero-inner {
  position: relative;
  z-index: 1;
}

.hero-landing .hero-bottom {
  position: relative;
  z-index: 2;
}

.hero-landing {
  position: relative;
  min-height: 100vh;
  /* Full bleed past body padding (same math as .product-hero); wave + bg span viewport */
  width: calc(100% + 2 * var(--page-margin));
  max-width: none;
  margin-left: calc(-1 * var(--page-margin));
  margin-right: calc(-1 * var(--page-margin));
  box-sizing: border-box;
  /* Double horizontal padding: body gutter + in-hero gutter → aligns with other sections */
  padding: 3rem calc(var(--page-margin) * 2) 4rem;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 2rem;
  align-items: flex-start;
  flex: 0 0 auto;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  padding-top: 0.5rem;
}

/* Index only: tagline block sits inside .hero-inner so tablet portrait can grid one stack (rows 1–4). */
.hero-landing .hero-inner > .hero-bottom {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

.hero-left {
  text-align: left;
  margin-top: 8.75rem;
  padding-left: var(--page-text-inset-left);
}

.hero-trusted {
  font-family: 'Azeret Mono', monospace;
  font-size: calc(2rem - 2px);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 0.4rem;
}

/* Phone-only shorter line — swapped in @media (max-width: 440px); default hides abbr. */
.hero-trusted__abbr {
  display: none;
}

/* Home hero + CTA “Let’s make it happen” — same teal gradient as product I/O title */
.hero-title-teal,
.section-cta-title-gradient {
  background: linear-gradient(
    to bottom,
    #d3fff7 0%,
    #aafff0 38%,
    #79ffea 68%,
    #40e8d7 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Product I/O + API + No face + No hash headings: diagonal teal (top-left → bottom-right) */
.product-io__heading,
.page-api-split__title,
.page-product-duotone-heading {
  background-image: linear-gradient(
    to bottom right,
    #d3fff7 0%,
    #aafff0 28%,
    #79ffea 52%,
    #40e8d7 100%
  );
  background-size: 140% 140%;
  background-position: left top;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* CSAM product: flip gradient on every other section (API plug-in, No Hash) */
.page-section--api-split .page-api-split__title,
.page-section--duotone-noise .page-inner:not(.product-io) .page-product-duotone-heading {
  background-image: linear-gradient(
    to bottom left,
    #d3fff7 0%,
    #aafff0 28%,
    #79ffea 52%,
    #40e8d7 100%
  );
  background-position: right top;
}

/* Dark CSAM product page only: section H2s match hero .btn-hero mint pill (45deg), not diagonal text teal */
html:not([data-theme='light'])
  .page-main--product-hero:has(.product-hero--csam)
  .product-io__heading,
html:not([data-theme='light'])
  .page-main--product-hero:has(.product-hero--csam)
  .page-api-split__title,
html:not([data-theme='light'])
  .page-main--product-hero:has(.product-hero--csam)
  .page-product-duotone-heading {
  background-image: linear-gradient(
    45deg,
    #94e6e3 0%,
    #b0efed 25%,
    #ccf5f4 50%,
    #e5fafa 75%,
    #f6fafb 100%
  );
  background-size: 130% 130%;
  background-position: 18% 42%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Dark CSAM: alternate bands — flipped mint vs other section H2s (matches .btn-hero:hover 225deg) */
html:not([data-theme='light'])
  .page-main--product-hero:has(.product-hero--csam)
  .page-section--api-split
  .page-api-split__title,
html:not([data-theme='light'])
  .page-main--product-hero:has(.product-hero--csam)
  .page-section--duotone-noise
  .page-inner:not(.product-io)
  .page-product-duotone-heading {
  background-image: linear-gradient(
    225deg,
    #94e6e3 0%,
    #b0efed 25%,
    #ccf5f4 50%,
    #e5fafa 75%,
    #f6fafb 100%
  );
  background-position: 82% 58%;
}

.hero-title-teal {
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(2.75rem, 5.5vw, 3.85rem);
  font-weight: 500;
  margin: 0 0 1.5rem;
  line-height: 1.35;
}

/* Index home hero headline — −6px vs base .hero-title-teal (articles intro unchanged). */
.hero-landing .hero-title-teal {
  font-size: calc(clamp(2.75rem, 5.5vw, 3.85rem) - 6px);
  line-height: 1.45;
  margin-bottom: clamp(0.55rem, 1.15vh, 0.95rem);
}

.hero-landing .hero-trusted {
  font-size: calc(clamp(1.38rem, 3.1vw, 2rem) - 2px);
  margin-bottom: clamp(0.65rem, 1.15vh, 0.9rem);
  letter-spacing: 0.06em;
}

/* Index home hero — supporting lines above CTAs. */
.hero-landing .hero-deck-group {
  margin: clamp(1.8rem, 2.9vh, 2.5rem) 0 clamp(1rem, 1.75vh, 1.5rem);
  max-width: none;
}

.hero-landing .hero-deck {
  margin: 0;
  font-family: 'Inter Tight', var(--font);
  font-size: calc(clamp(1.08rem, 2.05vw, 1.42rem) + 4px);
  font-weight: 350;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--text);
}

.hero-landing .hero-deck + .hero-deck {
  margin-top: clamp(0.38rem, 0.85vw, 0.58rem);
  font-weight: 450;
}

.hero-landing .hero-buttons {
  margin-top: clamp(1.65rem, 2.5vh, 2.25rem);
}

/* Index home hero — bottom stack (light strip): gradient z0 → GIF in .hero-inner z1 → cards z2. */
.hero-landing .hero-glass-bottom {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 100%;
  margin: auto auto 0;
  padding-bottom: clamp(0.25rem, 0.85vh, 0.65rem);
}

.hero-landing .hero-glass-strip {
  display: none;
}

.hero-landing .hero-glass-cards {
  position: relative;
  z-index: 1;
  width: var(--header-bar-width);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: clamp(1rem, 2.75vh, 1.85rem);
  transform: translateY(-0.9rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(0.85rem, 1.65vw, 1.35rem);
  box-sizing: border-box;
}

.hero-landing .hero-glass-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  min-height: clamp(4.85rem, 10.25vh, 6.5rem);
  padding: clamp(1.05rem, 1.85vw, 1.5rem) clamp(1.15rem, 2vw, 1.65rem) clamp(0.85rem, 1.45vw, 1.25rem);
  border-radius: var(--glass-chrome-radius);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(22px) saturate(185%);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
  border: 1px solid rgba(255, 255, 255, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 4px 22px rgba(15, 23, 42, 0.06);
  isolation: isolate;
  box-sizing: border-box;
}

.hero-landing .hero-glass-card__heading {
  margin: 0;
  font-family: 'Azeret Mono', monospace;
  font-size: calc(clamp(0.88rem, 1.25vw, 1.02rem) + 3px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

html:not([data-theme='light']) .hero-landing .hero-glass-card__heading {
  color: #79ffea;
  -webkit-text-fill-color: #79ffea;
}

html[data-theme='light'] .hero-landing .hero-glass-card__heading {
  color: var(--government-kicker);
  -webkit-text-fill-color: var(--government-kicker);
}

.hero-landing .hero-glass-card__body {
  margin: clamp(1.05rem, 1.55vw, 1.35rem) 0 0;
  font-family: 'Inter Tight', var(--font);
  font-size: calc(clamp(0.9rem, 1.12vw, 1.02rem) + 5px);
  font-weight: 350;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--text);
}

/* Hero cards: .glass-chrome overrides base frosting (dark = header glass). */
.hero-landing .hero-glass-card.glass-chrome {
  isolation: auto !important;
  background: transparent !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  border: 1px solid var(--header-border) !important;
  border-radius: var(--glass-chrome-radius);
  box-shadow: var(--header-shadow) !important;
}

.hero-landing .hero-glass-card.glass-chrome .hero-glass-card__heading,
.hero-landing .hero-glass-card.glass-chrome .hero-glass-card__body {
  position: relative;
  z-index: 1;
}

/* Light header: card-like frost + soft vertical lift (aligned with hero glass cards). */
html[data-theme='light'] .header {
  isolation: auto !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.1) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(10px) saturate(138%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(138%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 4px 24px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme='light'] .header::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    112deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.08) 20%,
    transparent 48%
  );
  pointer-events: none;
  z-index: 0;
}

html[data-theme='light'] .header::after {
  content: none;
}

/* Light: hero background — brighter white at top, settling to page bg (grid unchanged). */
html[data-theme='light'] .hero-landing {
  background: linear-gradient(
    180deg,
    #fbfdff 0%,
    #f8fafc 14%,
    #f4f7fb 32%,
    var(--bg) 58%,
    var(--bg) 100%
  );
}

html[data-theme='light'] .hero-landing .hero-grid-bg {
  background: linear-gradient(
    180deg,
    #fbfdff 0%,
    #f8fafc 14%,
    #f4f7fb 32%,
    var(--bg) 58%,
    var(--bg) 100%
  );
}

/* Light: wave + strip blend — grid fades into full-width bottom sheen to next section. */
html[data-theme='light'] .hero-landing .hero-grid-bg::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(52vh, 30rem);
  background: linear-gradient(
    to top,
    rgba(240, 243, 248, 0.82) 0%,
    rgba(248, 252, 255, 0.4) 43%,
    rgba(240, 243, 248, 0.09) 73%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

html[data-theme='light'] .hero-landing > .hero-glass-strip {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: clamp(14rem, 36vh, 24rem);
  z-index: 0;
  border-radius: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(248, 252, 255, 0.3) 54%,
    rgba(240, 243, 248, 0.86) 100%
  );
  backdrop-filter: blur(10px) saturate(165%);
  -webkit-backdrop-filter: blur(10px) saturate(165%);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.48) 20%,
    #000 40%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.48) 20%,
    #000 40%,
    #000 100%
  );
}

html[data-theme='light'] .hero-landing > .hero-glass-strip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36%;
  background: linear-gradient(to top, rgba(240, 243, 248, 0.68) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* Index hero (light + dark): match card stack position — flush to government band, no extra hero bottom gap. */
main#main:not(.page-main) .hero-landing {
  padding-bottom: 0 !important;
}

main#main:not(.page-main) .home-first-viewport > .section-government-wrap {
  margin-top: 0;
}

html[data-theme='light'] .hero-landing > .hero-glass-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      118deg,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0.06) 23%,
      transparent 47%
    ),
    conic-gradient(
      from 200deg at 22% 30%,
      rgba(255, 170, 220, 0.15) 0deg,
      rgba(255, 200, 130, 0.12) 52deg,
      rgba(130, 205, 255, 0.15) 108deg,
      rgba(90, 230, 210, 0.16) 165deg,
      rgba(195, 150, 255, 0.13) 222deg,
      rgba(255, 170, 220, 0.15) 360deg
    );
  mix-blend-mode: soft-light;
  opacity: 0.78;
  pointer-events: none;
}

/* Light hero cards: individual frosted glass on top of the strip. */
html[data-theme='light'] .hero-landing .hero-glass-card.glass-chrome {
  isolation: auto !important;
  background: rgba(255, 255, 255, 0.26) !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  backdrop-filter: blur(12px) saturate(168%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(168%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22),
    0 4px 28px rgba(15, 23, 42, 0.035) !important;
}

html[data-theme='light'] .hero-landing .hero-glass-card.glass-chrome::before,
html[data-theme='light'] .hero-landing .hero-glass-card.glass-chrome::after {
  content: none;
}

@media (max-width: 767px) {
  .hero-landing .hero-glass-cards {
    grid-template-columns: 1fr;
    padding-top: clamp(0.85rem, 2.5vh, 1.45rem);
    transform: translateY(-0.75rem);
  }

  /* Index home — ≤767 (phablet + phone): hide hero glass cards and light strip. ≥768 unchanged. */
  main#main:not(.page-main) .hero-landing .hero-glass-bottom,
  main#main:not(.page-main) .hero-landing > .hero-glass-strip {
    display: none;
  }
}

/* Index hero: tablet portrait (768–1024 portrait band) uses .hero-title__portrait line splits; 800–904 landscape + other sizes use .hero-title__default (see narrow-landscape override after that band). */
.hero-title__portrait {
  display: none;
}

/* Home: desktop 2-col hero but <1728 wide + landscape — keep title to two lines (no orphan “material”) */
@media (max-width: 1727px) and (min-width: 1367px) and (orientation: landscape) {
  .hero-landing .hero-title-teal {
    font-size: calc(clamp(2.62rem, 4.65vw, 3.5rem) - 6px);
    margin-bottom: 1.1rem;
  }

  .hero-landing .hero-deck-group {
    margin-top: 2.38rem;
  }

  .hero-landing .hero-trusted {
    font-size: calc(clamp(1.42rem, 2.7vw, 1.84rem) - 2px);
  }

  .hero-landing .hero-left {
    margin-top: 8.35rem;
  }

  /* More space above tagline on laptop/desktop landscape only (≥1367); ≤1366 tablet/phone stacks unchanged. */
  .hero-landing .hero-bottom {
    margin-top: 10.35rem;
  }

  .hero-landing .hero-tagline {
    padding-top: 0.12rem;
  }

  .hero-landing .hero-deck {
    text-wrap: nowrap;
    white-space: nowrap;
  }

  .hero-landing .hero-graphic-layer .hero-graphic {
    margin-top: 14.95rem;
  }
}

/* Index hero — kicker + headline nudge up; deck lines nudge down (desktop only, ≥1367). */
@media (min-width: 1367px) {
  .hero-landing .hero-title-teal {
    line-height: 1.45;
  }

  .hero-landing .hero-inner {
    z-index: 1;
  }

  .hero-landing .hero-graphic-layer {
    z-index: 1;
  }

  .hero-landing .hero-left {
    position: relative;
    z-index: 2;
    margin-top: 7.75rem;
  }

  .hero-landing .hero-deck-group {
    margin-top: clamp(2.5rem, 3.8vh, 3.3rem);
    margin-bottom: 0;
  }

  .hero-landing .hero-buttons {
    margin-top: clamp(3.5rem, 4.9vh, 4.3rem);
    margin-bottom: 0;
  }

  .hero-landing .hero-buttons .btn-hero,
  .hero-landing .hero-buttons .definition-trigger {
    padding: 0.6rem 2.35rem;
  }

  .hero-landing .hero-graphic-layer .hero-graphic {
    margin-top: 12.95rem;
    margin-left: -2.85rem;
    transform: translate(1.15rem, -4.25rem);
  }

  .hero-landing {
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    padding-bottom: clamp(0.65rem, 1.35vh, 1.1rem);
  }

  .hero-landing .hero-glass-cards {
    /* Viewport-centered row — same width cap as header bar; auto margins keep cards centered while resizing. */
    width: min(var(--header-bar-width), 100%);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    transform: translateY(-1.75rem);
    align-items: stretch;
    justify-content: stretch;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-landing .hero-glass-card {
    height: 100%;
    min-height: clamp(10rem, 16.5vh, 12.35rem);
    padding: clamp(1.05rem, 1.6vw, 1.35rem) clamp(1.2rem, 1.75vw, 1.5rem) clamp(0.85rem, 1.35vw, 1.15rem);
    text-align: left;
  }

  .hero-landing .hero-glass-card__body {
    margin-top: clamp(0.95rem, 1.4vw, 1.2rem);
  }

  .hero-landing .hero-glass-card--trust {
    position: relative;
    z-index: 1;
  }
}

/* Home hero mid-width landscape (~1500px): nudge type down so title / trusted / tagline don’t wrap */
@media (max-width: 1590px) and (min-width: 1367px) and (orientation: landscape) {
  .hero-landing .hero-title-teal {
    font-size: calc(clamp(2.48rem, 4.35vw, 3.22rem) - 6px);
  }

  .hero-landing .hero-trusted {
    font-size: calc(clamp(1.34rem, 2.5vw, 1.72rem) - 2px);
  }

  .hero-landing .hero-tagline {
    font-size: clamp(1.72rem, 3.4vw, 2.32rem);
  }

  .section.section-dashboards .section-dashboards-title {
    font-size: clamp(1.68rem, 3.35vw, 2.28rem);
  }

  .section.section-dashboards .section-dashboards-subtitle {
    font-size: calc(clamp(1.1rem, 1.92vw, 1.5rem) - 1px);
  }
}

/* Home hero — ≤1430 landscape: smaller trusted line + main title (tighter than ≤1590 band) */
@media (max-width: 1430px) and (min-width: 1367px) and (orientation: landscape) {
  .hero-landing .hero-title-teal {
    font-size: calc(clamp(2.28rem, 3.95vw, 2.95rem) - 6px);
  }

  .hero-landing .hero-trusted {
    font-size: calc(clamp(1.2rem, 2.22vw, 1.58rem) - 2px);
  }
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.25rem;
  margin-top: 3rem;
}

.btn-hero {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.82rem;
  margin-top: 0;
  padding: 0.58rem 2.95rem;
  line-height: 1.2;
  background: linear-gradient(45deg, #94E6E3 0%, #B0EFED 25%, #CCF5F4 50%, #E5FAFA 75%, #F6FAFB 100%);
  color: var(--btn-text);
  font-family: 'Azeret Mono', monospace;
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 32px;
  border: 0.5px solid #0A0E17;
  transition: background 0.4s ease, color 0.2s, border-color 0.2s, font-weight 0.2s, font-size 0.2s;
  overflow: hidden;
}

.btn-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 32px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

.btn-hero:hover {
  background: linear-gradient(225deg, #94E6E3 0%, #B0EFED 25%, #CCF5F4 50%, #E5FAFA 75%, #F6FAFB 100%);
  color: var(--btn-text);
  border-color: #0A0E17;
  font-weight: 600;
  font-size: 1.84rem;
}

.btn-hero:hover::before {
  opacity: 0.35;
}


.btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  transition: transform 0.2s ease;
}

.btn-arrow svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transform: translateX(-0.02rem);
}

.btn-hero .btn-arrow {
  width: 1.76rem;
  height: 1.76rem;
}

.btn-hero .btn-arrow svg {
  width: 1.05rem;
  height: 1.05rem;
}

.btn-hero:hover .btn-arrow {
  background: #0a0a0a;
  border: 1px solid #0a0a0a;
  color: #fff;
  transform: scale(1.08);
}

.btn-hero:hover .btn-arrow svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke-width: 2.25;
}

/* Hero primary: same box + type + ring scale as .definition-trigger (“What is CSAM?”) */
.hero-buttons .btn-hero {
  justify-content: center;
  gap: 0.65rem;
  padding: 0.6rem 2rem;
  font-size: 1.4rem;
  border-radius: 28px;
  font-weight: 400;
}

.hero-buttons .btn-hero::before {
  border-radius: 28px;
}

.hero-buttons .btn-hero:hover {
  font-size: 1.45rem;
  font-weight: 400;
}

/* Dark ring so the circle reads on the light gradient (white ring was invisible) */
.hero-buttons .btn-hero .btn-arrow {
  position: relative;
  z-index: 1;
  width: 1.5rem;
  height: 1.5rem;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid currentColor;
}

.hero-buttons .btn-hero .btn-arrow svg {
  width: 1rem;
  height: 1rem;
}

.hero-buttons .btn-hero:hover .btn-arrow {
  background: #0a0a0a;
  border: 1px solid #0a0a0a;
  color: #fff;
  transform: translateX(0.11rem) scale(1.08);
}

.hero-buttons .btn-hero:hover .btn-arrow svg {
  width: 1.05rem;
  height: 1.05rem;
  stroke: currentColor;
  stroke-width: 2.1;
}

.hero-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  padding-top: 0;
  margin-top: 11.75rem;
}

.hero-bottom-left {
  padding-left: var(--page-text-inset-left);
}

/* Index hero + site-wide copy inset (≥1729px): same extra gutter as hero had on wide viewports */
@media (min-width: 1729px) {
  :root {
    --page-text-inset-left: calc(2rem + min(3rem, max(0px, (100vw - 1728px) * 0.25)));
  }
}

.hero-tagline {
  margin: 0;
  padding-top: 1rem;
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(1.85rem, 3.75vw, 2.5rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--hero-tagline);
}

.hero-tagline::before {
  content: '';
  display: block;
  width: 42%;
  height: 1px;
  background: var(--hero-line);
  margin-bottom: 0.75rem;
}

.definition-dropdown {
  position: relative;
  z-index: 3;
}

/* Index hero: CSAM panel above glass cards (.hero-glass-bottom is z-index 2; lift .hero-inner when open). */
.hero-landing .definition-dropdown {
  z-index: 5;
}

.hero-landing .definition-dropdown-panel {
  z-index: 10;
}

.hero-landing:has(.definition-dropdown-panel:not([hidden])) .hero-inner {
  z-index: 3;
}

.definition-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 2rem;
  line-height: 1.2;
  background: var(--bg);
  border: 1px solid var(--government-kicker);
  border-radius: 28px;
  color: var(--definition-trigger-fg);
  font-family: 'Azeret Mono', monospace;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.4s ease, font-size 0.2s, color 0.2s, border-color 0.2s;
}

.definition-trigger:hover {
  font-size: 1.45rem;
  color: var(--nav-link-hover);
  border-color: var(--government-kicker);
}

.definition-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--government-kicker);
  border-radius: 50%;
  color: var(--government-kicker);
  font-size: 1.1rem;
  font-weight: 100;
  transform: translateX(0.11rem);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s ease, font-weight 0.2s;
}

.definition-trigger-icon-inner {
  display: block;
  transform: translateY(0.03rem);
}

.definition-trigger:hover .definition-trigger-icon {
  background: #79ffea;
  border-color: var(--government-kicker);
  color: var(--government-kicker);
  font-weight: 400;
  transform: translateX(0.11rem) scale(1.08);
}

html:not([data-theme='light']) .definition-trigger:hover .definition-trigger-icon {
  color: #0a0a0a;
  -webkit-text-fill-color: #0a0a0a;
}

.definition-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  padding: 1rem;
  background: var(--nav-dd-bg);
  border: 1px solid var(--nav-dd-border);
  border-radius: var(--glass-chrome-radius);
  width: 440px;
  max-width: 90vw;
  box-shadow: var(--header-shadow);
  text-align: center;
  isolation: isolate;
}

.definition-title {
  font-family: 'Azeret Mono', monospace;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  color: var(--text);
}

.definition-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/*
 * Viewport policy
 * – 16" MacBook Pro: default logical width ≈ 1728px; Display “More Space” tops out at 2056px wide.
 * – Index hero ≥1729px: the single min-width:1729 rule below is intentional (hero-left padding).
 * – Existing 1728 / 1727 product rules: leave as-is unless explicitly changed.
 */
/* Home hero — responsive only (max-width: 1366px) */
@media (max-width: 1366px) {
  :root {
    --page-margin: 2rem;
    --section-promo-inner-pad-x: clamp(0.65rem, 2vw, 1.5rem);
  }

  .hero-landing {
    padding: 2.5rem calc(var(--page-margin) * 1.5) 3.5rem;
  }

  /* Match home .hero-landing @ ≤1366 (index main has no .page-main — band is 2.5 / 1.5× / 3.5) */
  .product-hero {
    padding: 2.5rem calc(var(--page-margin) * 1.5) 3.5rem;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .hero-right {
    display: none;
  }

  .hero-left {
    position: relative;
    z-index: 2;
    margin-top: clamp(4.5rem, 14vw, 7.5rem);
    padding-left: clamp(1.1rem, 3.5vw, 2.65rem);
    padding-right: clamp(0.15rem, 1.5vw, 0.75rem);
    max-width: 100%;
    box-sizing: border-box;
  }

  .product-hero__copy {
    margin-top: clamp(4.5rem, 14vw, 7.5rem);
  }

  .product-hero--csam .product-hero__copy {
    margin-top: calc(clamp(4.5rem, 14vw, 7.5rem) + 1.15rem);
  }

  .product-hero--csam .product-hero__visual-inner {
    transform: translate(
      clamp(-2rem, -5vw, -0.85rem),
      clamp(3.35rem, 8vh, 6.75rem)
    );
  }

  .hero-trusted {
    font-size: calc(clamp(1.16rem, 3.2vw, 1.88rem) - 2px);
    line-height: 1.28;
    max-width: 100%;
    margin: 0 0 clamp(1.05rem, 2.35vh, 1.85rem);
  }

  .hero-landing .hero-title-teal {
    font-size: calc(clamp(2.58rem, 5.55vw, 3.72rem) - 6px);
    line-height: 1.35;
    max-width: 100%;
    text-wrap: balance;
  }

  .hero-buttons {
    gap: 1.5rem;
    margin-top: 2.25rem;
  }

  .hero-buttons .btn-hero,
  .hero-buttons .definition-trigger {
    font-size: clamp(1.2rem, 2.4vw, 1.55rem);
    padding: 0.5rem 2.2rem;
    line-height: 1.2;
    gap: 0.65rem;
    border-radius: 28px;
  }

  .hero-buttons .btn-hero:hover,
  .hero-buttons .definition-trigger:hover {
    font-size: clamp(1.26rem, 2.5vw, 1.62rem);
  }

  .hero-graphic-layer {
    grid-template-columns: 1fr;
    max-width: 100%;
    padding: 0 clamp(0.35rem, 2vw, 1rem);
    align-items: flex-end;
  }

  .hero-graphic-layer .hero-graphic {
    grid-column: 1;
    margin-top: clamp(9rem, 32vw, 18rem);
    margin-left: clamp(-2rem, -5.5vw, -0.65rem);
    max-width: min(352px, 78vw);
    justify-self: end;
    transform: scale(1.1) translateX(-4%);
    transform-origin: 100% 50%;
  }

  .hero-bottom {
    grid-template-columns: 1fr;
    margin-top: clamp(4.95rem, 12.35vw, 9.35rem);
    gap: 1rem;
  }

  .hero-bottom-right {
    display: none;
  }

  .hero-bottom-left {
    position: relative;
    z-index: 2;
    padding-left: clamp(1.1rem, 3.5vw, 2.65rem);
    padding-right: clamp(0.15rem, 1.5vw, 0.75rem);
  }

  .hero-landing .hero-tagline {
    padding-top: clamp(1.4rem, 3.35vw, 2.55rem);
  }

  .hero-tagline::before {
    width: min(600px, calc(100% + clamp(0.15rem, 0.75vw, 0.45rem)));
    margin-top: clamp(0.38rem, 1.2vh, 0.92rem);
  }

}

/* Index hero — tablet portrait only (768–1024): row1 trusted; row2 title | GIF; row3 deck; row4 CTAs. */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .hero-landing .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, min(48vw, 24rem));
    grid-template-rows: auto auto auto auto;
    column-gap: clamp(0.75rem, 2.25vw, 1.35rem);
    row-gap: clamp(0.85rem, 2.25vw, 1.45rem);
    align-items: start;
  }

  .hero-landing .hero-left {
    display: contents;
  }

  .hero-landing .hero-trusted {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-top: clamp(4.5rem, 14vw, 7.5rem);
    margin-bottom: clamp(0.5rem, 1.35vw, 0.75rem);
    padding-left: clamp(1.1rem, 3.5vw, 2.65rem);
    padding-right: clamp(1.1rem, 3.5vw, 2.65rem);
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    font-size: calc(clamp(1.12rem, 3.15vw, 1.95rem) - 2px);
    line-height: 1.28;
  }

  .hero-landing .hero-deck-group {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: clamp(2.2rem, 5.35vw, 3.85rem) 0 0;
    padding-left: clamp(1.1rem, 3.5vw, 2.65rem);
    padding-right: clamp(1.1rem, 3.5vw, 2.65rem);
    max-width: none;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
  }

  .hero-landing .hero-deck-group .hero-deck {
    font-size: calc(clamp(1rem, 2.35vw, 1.28rem) + 4px);
    line-height: 1.42;
  }

  .hero-landing .hero-buttons {
    grid-column: 1 / -1;
    grid-row: 4;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(1rem, 2.65vw, 1.55rem);
    margin-top: clamp(1.85rem, 3.05vw, 2.45rem);
    padding-left: clamp(1.1rem, 3.5vw, 2.65rem);
    padding-right: clamp(1.1rem, 3.5vw, 2.65rem);
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    /* Paint-only: less upward nudge so row reads lower (portrait tablet band only). */
    transform: translateY(clamp(-0.55rem, -1.65vw, 0.08rem));
  }

  .hero-landing .hero-buttons .btn-hero,
  .hero-landing .hero-buttons .definition-dropdown {
    width: auto;
    max-width: none;
    flex: 0 1 auto;
    min-width: 0;
    box-sizing: border-box;
  }

  .hero-landing .hero-buttons .btn-hero,
  .hero-landing .hero-buttons .definition-trigger {
    font-size: clamp(1.255rem, 2.68vw, 1.655rem);
    padding: 0.58rem 2.08rem;
    line-height: 1.2;
    gap: 0.72rem;
    border-radius: 28px;
    max-width: min(21rem, 55vw);
    box-sizing: border-box;
  }

  .hero-landing .hero-buttons .btn-hero:hover,
  .hero-landing .hero-buttons .definition-trigger:hover {
    font-size: clamp(1.315rem, 2.78vw, 1.715rem);
  }

  .hero-landing .hero-buttons .definition-trigger {
    width: auto;
    min-width: 0;
    justify-content: center;
  }

  .hero-landing .hero-title-teal {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: clamp(0.08em, 0.55vw, 0.22em);
    margin-top: 0;
    margin-bottom: 0;
    padding-left: clamp(1.1rem, 3.5vw, 2.65rem);
    padding-right: clamp(0.5rem, 1.75vw, 1rem);
    min-width: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    line-height: 1.32;
    /* iPad Pro portrait only: title block a touch lower vs GIF row. */
    transform: translateY(clamp(0.32rem, 1.05vw, 1rem));
  }

  .hero-landing .hero-title__default {
    display: none;
  }

  .hero-landing .hero-title__portrait {
    display: contents;
  }

  .hero-landing .hero-title__p-line {
    display: block;
    line-height: inherit;
  }

  .hero-landing .hero-inner > .hero-graphic-layer {
    grid-column: 2;
    grid-row: 2 / span 2;
    position: relative;
    inset: auto;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: flex-start;
    align-self: start;
    pointer-events: none;
    overflow: visible;
  }

  .hero-landing .hero-graphic-layer .hero-graphic {
    grid-column: 1;
    justify-self: center;
    margin: 0;
    /* iPad Pro portrait only: modestly larger hero GIF. */
    max-width: min(334px, 42.25vw);
    width: 100%;
    height: auto;
    /* iPad Pro portrait only: nudge GIF further left + slightly down vs prior band. */
    transform: translate(clamp(-2.85rem, -8.25vw, -1.35rem), clamp(0.55rem, 1.65vw, 1.35rem)) scale(1.065);
    transform-origin: 50% 0%;
  }

  .hero-landing .hero-inner > .hero-bottom {
    grid-row: 5;
    /* iPad Pro portrait only: tagline block slightly higher under CTAs. */
    margin-top: clamp(1.1rem, 3.35vw, 2.55rem);
    transform: translateY(clamp(-1.22rem, -2.72vw, -0.26rem));
  }

  .hero-landing .hero-tagline {
    font-size: clamp(1.92rem, 3.88vw, 2.58rem);
  }

  /*
   * Index — tablet portrait (768–1024px wide, portrait): hero + government in normal flow, not a 100dvh flex split.
   * Covers common tablets in portrait (e.g. iPad mini 768×1024, up to this band’s max). Landscape uses other rules only.
   */
  main#main:not(.page-main) .home-first-viewport {
    display: block;
    min-height: unset;
  }

  main#main:not(.page-main) .home-first-viewport .hero-landing {
    flex: unset;
    min-height: unset;
  }

  main#main:not(.page-main) .home-first-viewport .section-government-wrap {
    flex: unset;
    min-height: unset;
  }

  /* Portrait tablets — index: modestly taller tunnel so the government band reads a bit deeper (landscape untouched). */
  main#main:not(.page-main) .home-first-viewport .section-government-tunnel {
    height: calc(100vw * (618 / 1922) * 1.15);
  }

  main#main:not(.page-main) .home-first-viewport .government-heading__line {
    font-size: clamp(0.98rem, 1.95vw, 1.28rem);
    letter-spacing: 0.14em;
  }

  main#main:not(.page-main) .home-first-viewport .government-text {
    font-size: clamp(1.05rem, 2.15vw, 1.42rem);
    line-height: 1.58;
  }

  main#main:not(.page-main) .home-first-viewport .government-text-wrap {
    top: 63%;
  }

  /*
   * CSAM + Deepfake — tablet portrait: between full 100dvh and content-only height so ~one section peeks.
   * What we aren’t: same min-height band as product heroes here so the viewport reads the same depth.
   */
  .page-main--product-hero .product-hero {
    min-height: clamp(26rem, 51dvh, 42rem);
  }

  html.page-what-we-are-not .what-not-hero {
    min-height: clamp(26rem, 51dvh, 42rem);
    max-height: none;
    overflow-x: visible;
    overflow-y: visible;
  }
}

/*
 * CSAM product — narrow portrait (phones): opt out of the ≤1366 band’s min-height: clamp(26rem, 51dvh, 42rem) on
 * `.page-main--product-hero .product-hero` (and the base 100dvh floor it replaced for that selector). That policy
 * targets tablet portrait “~one section peeks”; on stacked CSAM copy + art it leaves empty hero band / odd bleed.
 * Deepfake + iPad mini portrait (768+) unchanged.
 */
@media (max-width: 767px) and (orientation: portrait) {
  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero {
    min-height: auto;
  }
}

/* Home hero — ≤1024px (full band): stack CTAs; compact tagline block + longer rule above tagline */
@media (max-width: 1024px) {
  .hero-landing .hero-title-teal {
    font-size: calc(clamp(2.18rem, 4.68vw, 3.08rem) - 6px);
  }

  .hero-landing .hero-trusted {
    font-size: calc(clamp(1.04rem, 2.92vw, 1.73rem) - 2.5px);
  }

  .hero-landing .hero-buttons {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: clamp(0.75rem, 2.2vw, 1.15rem);
    width: 100%;
    max-width: min(19.25rem, 100%);
  }

  .hero-landing .hero-buttons .btn-hero,
  .hero-landing .hero-buttons .definition-dropdown {
    width: 100%;
    max-width: 100%;
  }

  .hero-landing .hero-buttons .definition-trigger {
    width: 100%;
    justify-content: center;
  }

  .hero-landing .hero-buttons .btn-hero,
  .hero-landing .hero-buttons .definition-trigger {
    font-size: calc(clamp(1.2rem, 2.4vw, 1.55rem) - 1px);
  }

  .hero-landing .hero-buttons .btn-hero:hover,
  .hero-landing .hero-buttons .definition-trigger:hover {
    font-size: calc(clamp(1.26rem, 2.5vw, 1.62rem) - 1px);
  }

  .hero-landing .hero-bottom {
    margin-top: clamp(2.65rem, 7.5vw, 4.85rem);
  }

  .hero-landing .hero-tagline {
    font-size: calc(clamp(1.34rem, 3.08vw, 1.78rem) + 1px);
    line-height: 1.4;
    padding-top: clamp(0.35rem, 1.15vw, 0.7rem);
  }

  /* Index — government stacked band padding (typography: ≤1200 / ≤1024 blocks later in file). */
  main#main:not(.page-main) .section-government-wrap .section-government {
    padding: clamp(2.5rem, 5vw, 3.25rem) 1.25rem;
  }
}

/*
 * Large tablet portrait (768–1024, e.g. iPad Pro 12.9″ 1024×1366): the generic ≤1024 block above stacks CTAs
 * into a ~19.25rem rail and forces “BOOK A CALL” / “What is CSAM” to wrap. Re-assert the tablet-portrait row
 * layout + nowrap after that pass. The same @media line also matches narrow landscape 800–904; `html { zoom }` for that band lives ~1851.
 */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .hero-landing .hero-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    max-width: none;
    width: auto;
  }

  .hero-landing .hero-buttons .btn-hero,
  .hero-landing .hero-buttons .definition-dropdown {
    width: auto;
    max-width: none;
    flex: 0 1 auto;
  }

  .hero-landing .hero-buttons .definition-trigger {
    width: auto;
  }

  .hero-landing .hero-buttons .btn-hero,
  .hero-landing .hero-buttons .definition-trigger {
    white-space: nowrap;
    max-width: none;
  }
}

/*
 * Index hero — iPad Air portrait only (768–833px wide, portrait): wider copy track + slightly smaller title
 * and GIF vs 768–1024 portrait defaults so “Instantly Protect” reads on one line and art matches iPad Pro
 * portrait balance. Placed after ≤1024 hero rules so these values win. ≥834px (e.g. iPad Pro portrait) unchanged.
 */
@media (max-width: 833px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .hero-landing .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, min(34vw, 16.5rem));
    column-gap: clamp(0.55rem, 1.65vw, 1.1rem);
  }

  .hero-landing .hero-title-teal {
    font-size: calc(clamp(2.12rem, 4.42vw, 2.92rem) - 6px);
    line-height: 1.35;
    padding-right: clamp(0.35rem, 1.2vw, 0.65rem);
  }

  .hero-landing .hero-graphic-layer .hero-graphic {
    max-width: min(282px, 34.25vw);
    transform: translate(clamp(-2.05rem, -6.25vw, -0.95rem), clamp(0.35rem, 1.2vw, 1rem)) scale(1);
    transform-origin: 50% 0%;
  }
}

/*
 * Index — narrow landscape 800–904 (after 768–833 / 802–904 title+GIF rules so these win). Two-line default title;
 * aggressive layout collapse + shorter art so CTAs/tagline sit higher — avoids transform-only gaps and scroll blowout;
 * government kicker + body +2px vs the ≤1024 index government stack.
 */
@media (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  main#main:not(.page-main) .hero-landing .hero-title__default {
    display: block;
  }

  main#main:not(.page-main) .hero-landing .hero-title__portrait {
    display: none;
  }

  main#main:not(.page-main) .hero-landing {
    overflow-x: clip;
    padding-top: clamp(0.5rem, 1.65dvh, 1.1rem);
    padding-bottom: clamp(0.45rem, 1.35dvh, 0.95rem);
    box-sizing: border-box;
  }

  main#main:not(.page-main) .hero-landing .hero-inner {
    row-gap: 0;
  }

  /* Micro nudge up (~0.22rem) for copy stack only — GIF transform block below unchanged. */
  main#main:not(.page-main) .hero-landing .hero-trusted {
    margin-top: clamp(4.38rem, 9.95vw, 6.88rem);
  }

  main#main:not(.page-main) .hero-landing .hero-title-teal {
    font-size: calc(clamp(1.82rem, 3.65vw, 2.45rem) - 6px);
    line-height: 1.35;
    margin-top: clamp(0.28rem, 0.85vw, 0.55rem);
    transform: translateY(calc(clamp(0.1rem, 0.42vw, 0.38rem) - 0.22rem));
    margin-bottom: clamp(-4.5rem, -21dvh, -1.85rem);
  }

  main#main:not(.page-main) .hero-landing .hero-graphic-layer .hero-graphic {
    max-width: min(196px, 25.5vw);
    transform: translate(clamp(-0.35rem, -1.35vw, 0.72rem), clamp(0.05rem, 0.55vw, 0.35rem)) scale(0.94);
    transform-origin: 50% 0%;
  }

  main#main:not(.page-main) .hero-landing .hero-deck-group {
    margin-top: clamp(-7.05rem, -34.35dvh, -3.08rem);
  }

  main#main:not(.page-main) .hero-landing .hero-buttons {
    margin-top: clamp(1.05rem, 2.15vw, 1.45rem);
    transform: none;
    gap: clamp(0.55rem, 1.65vw, 0.95rem);
  }

  main#main:not(.page-main) .hero-landing .hero-inner > .hero-bottom {
    margin-top: clamp(-14.48rem, -68.35dvh, -7.02rem);
    transform: translateY(calc(clamp(-2.65rem, -11dvh, -1.05rem) - 0.22rem));
  }

  main#main:not(.page-main) .hero-landing .hero-tagline {
    font-size: calc(clamp(1.18rem, 2.55vw, 1.62rem) + 1px);
    line-height: 1.28;
    padding-top: 0;
    margin-top: clamp(-1.55rem, -5.5dvh, -0.52rem);
  }

  /* Shorter than generic ≤1024 rule (`min(412px,…) + 14px` + `82%` max) which wins in cascade here — prior 572px cap read longer. */
}


/* Index hero GIF — ≤1024px except tablet portrait grid (that band uses rules above). */
@media (max-width: 1024px) and (not ((min-width: 768px) and (orientation: portrait))) and (not ((min-width: 800px) and (max-width: 904px) and (orientation: landscape))) {
  .hero-landing .hero-graphic-layer .hero-graphic {
    margin-top: clamp(10.35rem, 33.5vw, 19.25rem);
    max-width: min(336px, 76vw);
    transform: scale(1.06) translateX(-4%);
    transform-origin: 100% 50%;
  }
}

/*
 * Narrow landscape 800–904px: tablet portrait @media branches also match here (comma-OR on those queries).
 * Slight page zoom so portrait-geometry layouts fit vertically in short viewports (Chromium/WebKit `zoom`).
 */
@media (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  html {
    zoom: 0.88;
  }

  /*
   * CTA + footer use `100vw` + `margin: calc(50% - 50vw)` to break out of the centered column;
   * with `html { zoom }` that math no longer matches the painted viewport, so body background
   * shows as side gutters. Product mains already use % width + negative lateral margin; mirror
   * that where `body` has `--page-margin` padding. what-we-are-not zeroes body padding — use
   * plain full width, no negative margin.
   */
  html:not(.page-what-we-are-not) #main:not(.page-main--product-hero) .section-cta-wrap,
  html:not(.page-what-we-are-not) #main:not(.page-main--product-hero) .site-footer {
    width: calc(100% + 2 * var(--page-margin)) !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--page-margin)) !important;
    margin-right: calc(-1 * var(--page-margin)) !important;
  }

  html.page-what-we-are-not #main:not(.page-main--product-hero) .section-cta-wrap,
  html.page-what-we-are-not #main:not(.page-main--product-hero) .site-footer {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Sections */
.section {
  padding: 5rem var(--page-margin);
  max-width: 1600px;
  margin: 0 auto;
}

.section-dark {
  background: var(--bg-alt);
}

/* CSAM + Deepfake + Dashboards promo sections — same centered band width as header bar */
.section.section-csam,
.section.section-deepfake {
  padding-top: 9rem;
  padding-bottom: 5rem;
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
  width: 100%;
  max-width: min(1520px, 100%);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.section.section-dashboards {
  padding-top: calc(9rem + 0.35rem);
  padding-bottom: clamp(5.45rem, 9.15vw, 6.65rem);
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
  width: 100%;
  max-width: min(1520px, 100%);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Text column + graphic: never use plain `auto` for SVG column — intrinsic width is ~3665px and clips copy (overflow-x:hidden) */
.section-csam .section-csam-inner,
.section-dashboards .section-dashboards-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--section-promo-graphic-max));
  gap: var(--section-promo-column-gap);
  align-items: start;
  width: 100%;
  max-width: min(1600px, 100%);
  margin: 0 auto;
  padding-left: var(--section-promo-inner-pad-x);
  padding-right: var(--section-promo-inner-pad-x);
  box-sizing: border-box;
}

.section-deepfake .section-deepfake-inner {
  display: grid;
  grid-template-columns: minmax(0, var(--section-deepfake-graphic-max)) minmax(0, 1fr);
  gap: var(--section-promo-column-gap);
  /* Vertically center copy with donut so this band lines up with spiral / net mass in the rows above and below */
  align-items: center;
  width: 100%;
  max-width: min(1600px, 100%);
  margin: 0 auto;
  padding-left: var(--section-promo-inner-pad-x);
  padding-right: var(--section-promo-inner-pad-x);
  box-sizing: border-box;
}

.section-csam-content,
.section-dashboards-content {
  text-align: left;
  margin-left: 0;
  margin-top: clamp(1.15rem, 2.5vw, 2rem);
  padding-left: 0;
  padding-right: 0;
  min-width: 0;
  transform: translateX(var(--section-promo-left-col-extra-x));
}

/* Graphic left, text right — copy nudged right in column, then shifted left with spiral/net via --section-promo-right-col-extra-x */
.section-deepfake-content {
  text-align: left;
  margin-top: clamp(1.15rem, 2.5vw, 2rem);
  margin-left: auto;
  margin-right: 0;
  max-width: min(34rem, 100%);
  padding-left: clamp(1.15rem, 3.25vw, 2.75rem);
  padding-right: 0;
  min-width: 0;
  transform: translateX(var(--section-promo-right-col-extra-x));
}

/* Index promos below 1367px — placed after base .section.section-* / inner so overrides win */
@media (max-width: 1366px) {
  .section-csam-content,
  .section-dashboards-content {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .section-deepfake-content {
    justify-self: center;
    margin-left: 0;
    margin-right: 0;
    width: min(30rem, 100%);
    max-width: 100%;
    padding-left: clamp(0.65rem, 1.9vw, 1.65rem);
    padding-right: clamp(0.35rem, 1vw, 0.85rem);
    box-sizing: border-box;
  }

  .section.section-csam {
    padding-top: clamp(5.75rem, 11.5vh, 8.75rem);
  }

  .section.section-deepfake {
    padding-top: clamp(3.5rem, 7vh, 6rem);
  }

  .section.section-dashboards {
    padding-top: clamp(3.75rem, 7.35vh, 6.35rem);
    padding-bottom: clamp(4.5rem, 8.1vw, 6.1rem);
  }

  .section.section-csam,
  .section.section-dashboards,
  .section.section-deepfake {
    padding-left: clamp(1.85rem, 5.5vw, 3.5rem);
    padding-right: clamp(1.15rem, 3.35vw, 2.25rem);
  }

  .section-csam .section-csam-inner,
  .section-dashboards .section-dashboards-inner,
  .section-deepfake .section-deepfake-inner {
    margin-left: auto;
    margin-right: auto;
  }

  .section-csam-graphic-stack {
    margin-top: clamp(0.85rem, 1.85vh, 1.35rem);
    margin-left: clamp(-1.1rem, -3.25vw, -0.35rem);
  }

  .section-dashboards-graphic-stack {
    margin-top: clamp(1.3rem, 2.65vh, 1.85rem);
    margin-left: clamp(-1.1rem, -3.25vw, -0.35rem);
  }

  .section-deepfake-graphic-stack {
    margin-top: clamp(1.3rem, 2.65vh, 1.85rem);
    margin-left: clamp(-0.35rem, -1.1vw, 0.65rem);
  }

  .section-csam-graphic,
  .section-dashboards-graphic {
    justify-content: flex-start;
  }

  .section.section-deepfake .section-deepfake-graphic {
    margin-left: 0;
  }
}

@media (max-width: 1366px) and (max-width: 1280px) {
  .section-deepfake-graphic-stack {
    margin-left: clamp(-0.85rem, -2.65vw, -0.28rem);
  }
}

.section-csam-title,
.section-dashboards-title,
.section-deepfake-title {
  margin: 0;
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}

/* Shrink-wrapped titles so the rule can extend past the text without stretching the whole column */
.section-csam-title,
.section-deepfake-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
}

.section-csam-title::before,
.section-dashboards-title::before,
.section-deepfake-title::before {
  content: '';
  display: block;
  height: 1px;
  background: #fff;
  margin-bottom: 0.85rem;
}

/* Dashboards h2 is smaller; size the rule’s font so 18ch matches CSAM/Deepfake — all three lines share one width formula */
.section-dashboards-title::before {
  font-size: clamp(2rem, 4vw, 2.7rem);
}

.section-csam-title::before,
.section-dashboards-title::before,
.section-deepfake-title::before {
  --promo-title-rule-overhang: calc(18ch + 1.65rem);
  width: min(
    max(var(--promo-title-rule-floor), var(--promo-title-rule-overhang)),
    calc(100vw - var(--promo-title-rule-gutter))
  );
}

.section-dashboards-title {
  font-size: clamp(1.82rem, 3.65vw, 2.48rem);
  line-height: 1.3;
}

.section-csam-subtitle,
.section-dashboards-subtitle,
.section-deepfake-subtitle,
.page-api-split__lead {
  margin: 1rem 0 0;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(calc(1.35rem + 1px), calc(2.4vw + 1px), calc(1.8rem + 1px));
  font-weight: 350;
  line-height: 1.35;
  color: #79ffea;
}

/* Home promo h3s (index only): dark = 300; light uses weight below with kicker color */
.section-csam-subtitle,
.section-dashboards-subtitle,
.section-deepfake-subtitle {
  font-weight: 300;
}

/* Home CSAM / Deepfake / Dashboards promos — ≤1499: smaller kickers, promo art + orb, wider title rules */
@media (max-width: 1499px) {
  :root {
    --section-promo-graphic-max: min(408px, 100%);
    --promo-title-rule-floor: clamp(10.55rem, 16.25vw, 26rem);
    --promo-title-rule-gutter: clamp(2.8rem, 6.55vw, 7.25rem);
    --section-promo-column-gap: clamp(1.5rem, 2.9vw, 2.75rem);
    --section-promo-inner-pad-x: clamp(0.7rem, 2.1vw, 1.6rem);
  }

  .section-csam-title::before,
  .section-dashboards-title::before,
  .section-deepfake-title::before {
    --promo-title-rule-overhang: calc(18ch + 1.35rem);
  }

  .section-csam-title::before,
  .section-dashboards-title::before,
  .section-deepfake-title::before {
    height: 2px;
  }

  .section-csam-subtitle,
  .section-deepfake-subtitle {
    font-size: clamp(calc(1.18rem + 1px), calc(2.05vw + 1px), calc(1.62rem + 1px));
    line-height: 1.38;
  }

  .section-csam-graphic-stack {
    width: min(100%, var(--section-promo-graphic-max));
    transform: translate(0, 0.45rem);
    --csam-orb-size: 39.5%;
    --csam-glow-size: 25.5%;
  }

  .section-dashboards-graphic-stack {
    width: min(100%, var(--section-promo-graphic-max));
    transform: translate(0, 2.7rem);
    --net-orb-size: 39.5%;
    --net-glow-size: 25.5%;
  }

  .section-deepfake-graphic-stack {
    transform: translate(-1.1rem, 2.65rem);
    --donut-orb-size: 39.5%;
    --donut-glow-size: 25.5%;
  }
}

/* Index promos 901–1280 — smaller art caps; same inner padding + column gap on all three rows */
@media (max-width: 1280px) and (min-width: 901px) {
  :root {
    /* Spiral + net + donut: lower px cap + vw tuned so art tracks width through more of this band (smaller sooner vs 38–40vw caps) */
    --section-promo-graphic-max: min(332px, 31.5vw);
    /* Slightly wider gutter so spiral/net + copy nudges don’t collide (~1080px and similar). */
    --section-promo-column-gap: clamp(1.5rem, 3.05vw, 2.75rem);
    --section-promo-inner-pad-x: clamp(0.85rem, 2.5vw, 1.65rem);
  }

  /* Tie stack width to --section-promo-graphic-max so column + art shrink together */
  .section-csam-graphic-stack,
  .section-dashboards-graphic-stack {
    width: min(100%, var(--section-promo-graphic-max));
  }

  .section-deepfake-graphic-stack {
    transform: translate(-1.32rem, 2.65rem);
  }

  .section-csam .section-csam-inner,
  .section-dashboards .section-dashboards-inner,
  .section-deepfake .section-deepfake-inner {
    gap: var(--section-promo-column-gap);
    padding-left: var(--section-promo-inner-pad-x);
    padding-right: var(--section-promo-inner-pad-x);
    box-sizing: border-box;
  }

  /* Cap copy measure so long lines + translateX don’t run under spiral/net (CSAM + Dashboards only). */
  .section-csam-content,
  .section-dashboards-content {
    max-width: min(26.75rem, 100%);
    box-sizing: border-box;
  }

  .section-deepfake-content {
    width: min(30rem, 100%);
    max-width: 100%;
    justify-self: center;
    margin-left: 0;
    margin-right: 0;
    min-width: 0;
    box-sizing: border-box;
  }
}

/* Index promos 1281–1480 — CSAM/Dashboards copy a bit narrower + modest gap bump (still two-column; eases art overlap above 1280). */
@media (min-width: 1281px) and (max-width: 1480px) {
  :root {
    --section-promo-column-gap: clamp(1.85rem, 3.15vw, 3.1rem);
  }

  .section-csam-content,
  .section-dashboards-content {
    max-width: min(30.25rem, 100%);
    box-sizing: border-box;
  }
}

/* Index promos — tablet portrait only (after ≤1366 so this wins): CSAM higher; slightly tighter gaps between the three promos. */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  main#main:not(.page-main) .section.section-csam {
    padding-top: clamp(4.85rem, 10vh, 7.65rem);
  }

  main#main:not(.page-main) .section.section-deepfake {
    padding-top: clamp(1.85rem, 4.65vh, 4.05rem);
  }

  main#main:not(.page-main) .section.section-dashboards {
    padding-top: clamp(2.55rem, 5.5vh, 4.85rem);
    padding-bottom: clamp(3.75rem, 6.85vw, 5.25rem);
  }

  main#main:not(.page-main) .section.section-csam,
  main#main:not(.page-main) .section.section-deepfake {
    padding-bottom: clamp(3.25rem, 6.35vh, 3.95rem);
  }

  main#main:not(.page-main) .section.section-deepfake {
    padding-left: clamp(1.85rem, 5.5vw, 3.5rem);
    padding-right: clamp(1.15rem, 3.35vw, 2.25rem);
  }

  main#main:not(.page-main) .section-deepfake .section-deepfake-inner {
    padding-left: var(--section-promo-inner-pad-x);
    padding-right: var(--section-promo-inner-pad-x);
  }

  main#main:not(.page-main) .section.section-deepfake .section-deepfake-graphic {
    margin-left: 0;
  }

  main#main:not(.page-main) .section.section-deepfake .section-deepfake-content {
    margin-left: auto;
    margin-right: 0;
    padding-left: clamp(0.85rem, 2.75vw, 1.75rem);
    padding-right: 0;
    max-width: min(28rem, calc(100vw - 5.25rem));
    box-sizing: border-box;
  }

  main#main:not(.page-main) .section.section-deepfake .section-deepfake-body {
    max-width: min(24rem, 100%);
    box-sizing: border-box;
  }

  /* 901–1024 portrait: donut column nearer default translate, lighter negative margin. */
  main#main:not(.page-main) .section.section-deepfake .section-deepfake-graphic-stack {
    margin-left: 0;
    transform: translate(clamp(0.15rem, 1vw, 0.85rem), clamp(0.5rem, 1.5vw, 1rem));
  }
}

/* Index — deepfake donut stack: ≤900 portrait needs a different Y than 901+ two-column (portrait block above sets X). */
@media (max-width: 900px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  main#main:not(.page-main) .section.section-deepfake .section-deepfake-graphic-stack {
    transform: translate(0, 1.1rem);
    margin-left: 0;
  }
}

/* Index — promos ≤1024px: push all three sections right (section padding). */
@media (max-width: 1024px) {
  main#main:not(.page-main) .section.section-csam,
  main#main:not(.page-main) .section.section-dashboards,
  main#main:not(.page-main) .section.section-deepfake {
    padding-left: clamp(2.45rem, 5.65vw, 4.15rem);
    padding-right: clamp(0.65rem, 2.15vw, 1.85rem);
  }

  main#main:not(.page-main) .section.section-csam {
    padding-top: clamp(4.25rem, 8.35vh, 6.65rem);
    padding-bottom: clamp(2.52rem, 4.35vh, 3.48rem);
  }

  main#main:not(.page-main) .section.section-deepfake {
    padding-left: clamp(3.15rem, 5.55vw, 4.85rem);
    padding-top: clamp(1.62rem, 3.28vh, 3.05rem);
    padding-bottom: clamp(2.52rem, 4.35vh, 3.48rem);
  }

  main#main:not(.page-main) .section.section-dashboards {
    padding-top: clamp(2.05rem, 3.98vh, 3.78rem);
    padding-bottom: clamp(1.82rem, 3.55vw, 3.08rem);
  }

  main#main:not(.page-main) .section-csam .section-csam-inner,
  main#main:not(.page-main) .section-dashboards .section-dashboards-inner,
  main#main:not(.page-main) .section-deepfake .section-deepfake-inner {
    padding-left: clamp(1rem, 2.5vw, 1.85rem);
    padding-right: clamp(1rem, 2.5vw, 1.85rem);
  }

  main#main:not(.page-main) .section.section-deepfake .section-deepfake-graphic {
    margin-left: 0;
  }

  main#main:not(.page-main) .section.section-deepfake .section-deepfake-graphic-stack {
    margin-left: 0;
  }

  main#main:not(.page-main) .section.section-deepfake .section-deepfake-content {
    margin-left: auto;
    margin-right: 0;
    padding-left: clamp(0.85rem, 2.5vw, 1.65rem);
    padding-right: 0;
    max-width: min(27.25rem, calc(100vw - 5.05rem));
    width: 100%;
    box-sizing: border-box;
  }

  main#main:not(.page-main) .section.section-deepfake .section-deepfake-body {
    max-width: min(23.5rem, 100%);
    box-sizing: border-box;
  }
}

/*
 * Tablet portrait 768–900px (+ narrow landscape 800–904 via comma-OR): stacked index promos + hero line/tagline
 * spacing (CSAM, deepfake, what-we-are-not, index). Same rules as portrait when width is 800–904 and landscape.
 */
@media (max-width: 900px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  main#main:not(.page-main) .section.section-deepfake .section-deepfake-content {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    max-width: none;
    width: 100%;
    justify-self: stretch;
    text-align: left;
    box-sizing: border-box;
  }

  main#main:not(.page-main) .section.section-deepfake .section-deepfake-body {
    max-width: none;
  }

  main#main:not(.page-main) .section.section-csam .section-csam-graphic-stack,
  main#main:not(.page-main) .section.section-dashboards .section-dashboards-graphic-stack {
    margin-left: 0;
  }

  /*
   * Hero secondary lines + taglines — same rhythm as former width-only 804–900 band; portrait tablet only
   * (768–900 portrait). Width-only 804–900 landscape no longer uses these nudges.
   */
  .product-hero--csam:not(.product-hero--advertiser-portal) .product-hero__title-lede {
    margin-top: clamp(3.15rem, 7.85vw, 5.65rem);
  }

  .product-hero--csam:not(.product-hero--advertiser-portal) .product-hero__sub {
    margin-top: clamp(2.85rem, 6.75vw, 4.85rem);
  }

  .product-hero--deepfake .product-hero__deepfake-line:first-of-type {
    margin-top: clamp(2.85rem, 7vw, 4.75rem);
  }

  .product-hero--deepfake .product-hero__deepfake-line--semibold {
    margin-top: clamp(2.65rem, 6.5vw, 4.35rem);
  }

  .hero-landing .hero-bottom {
    margin-top: clamp(5.35rem, 11.5vw, 8.15rem);
  }

  .hero-landing .hero-tagline {
    padding-top: clamp(1.85rem, 4.35vw, 3.05rem);
  }
}

/* Promo copy: steeper type ramp ≤1280 (less vw / lower floor so size drops faster as the viewport narrows) */
@media (max-width: 1280px) {
  .section-csam-title,
  .section-deepfake-title {
    font-size: clamp(1.72rem, 3.35vw, 2.62rem);
  }

  .section-dashboards-title,
  .section.section-dashboards .section-dashboards-title {
    font-size: clamp(1.54rem, 3.02vw, 2.36rem);
  }

  .section-csam-subtitle,
  .section-deepfake-subtitle {
    /* Slower subtitle ramp than titles/body: higher vw + floor so type holds size longer when narrowing */
    font-size: clamp(calc(1.16rem + 1px), calc(2.18vw + 1px), calc(1.72rem + 1px));
  }

  .section-dashboards-subtitle,
  .section.section-dashboards .section-dashboards-subtitle {
    font-size: calc(clamp(1.12rem, 2.12vw, 1.6rem) - 1px);
  }

  .section-csam-body,
  .section-dashboards-body,
  .section-deepfake-body {
    font-size: clamp(0.96rem, 1.42vw, 1.2rem);
  }

  .section-dashboards-title::before {
    font-size: clamp(1.72rem, 3.35vw, 2.62rem);
  }
}

.section-dashboards-subtitle {
  font-size: calc(clamp(1.2rem, 2.1vw, 1.62rem) - 1px);
}

.section-csam-body,
.section-dashboards-body,
.section-deepfake-body,
.page-api-split__body {
  margin: 1.5rem 0 0;
  max-width: min(42rem, 100%);
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1.05rem, 1.65vw, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
}

.section-dashboards-body {
  max-width: min(38rem, 100%);
}

.btn-csam-started {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-top: 2rem;
  margin-left: -0.25rem;
  padding: 0.75rem 1.75rem;
  line-height: 1.2;
  background: var(--bg);
  border: 1px solid rgba(228, 228, 232, 0.72);
  border-radius: 28px;
  color: #fff;
  font-family: 'Azeret Mono', monospace;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: background 0.35s ease, color 0.25s ease, border-color 0.25s ease,
    font-weight 0.2s ease;
}

/* Subtle grain under label (painted below flex children) */
.btn-csam-started::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.42;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  mix-blend-mode: overlay;
  transition: opacity 0.25s ease;
}

.btn-csam-started:hover {
  background: #fff;
  color: #0a0a0a;
  border-color: rgba(10, 10, 10, 0.12);
  font-weight: 500;
}

/* Grain reads on white fill */
.btn-csam-started:hover::before {
  opacity: 0.32;
  mix-blend-mode: multiply;
}

.btn-csam-started .btn-csam-label,
.btn-csam-started .btn-arrow {
  position: relative;
  z-index: 1;
}

.btn-csam-started .btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  flex-shrink: 0;
  border: none;
  border-radius: 0;
  color: #fff;
  transition: color 0.2s ease;
}

.btn-csam-started .btn-arrow svg {
  width: 1.09rem;
  height: 1.09rem;
  flex-shrink: 0;
  display: block;
  transform: translate(-0.02rem, -0.13rem);
  stroke-width: 1.75;
  transition: stroke-width 0.2s ease, transform 0.2s ease;
}

.btn-csam-started:hover .btn-arrow {
  color: #0a0a0a;
}

.btn-csam-started:hover .btn-arrow svg {
  transform: translate(0.1rem, -0.13rem);
  stroke-width: 2.35;
}

/* Deepfake CTA: inverted — default = CSAM hover look, hover = CSAM default */
.btn-deepfake-started {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-top: 2rem;
  margin-left: -0.25rem;
  padding: 0.75rem 1.75rem;
  line-height: 1.2;
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.12);
  border-radius: 28px;
  color: #0a0a0a;
  font-family: 'Azeret Mono', monospace;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: background 0.35s ease, color 0.25s ease, border-color 0.25s ease,
    font-weight 0.2s ease;
}

.btn-deepfake-started::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  mix-blend-mode: multiply;
  transition: opacity 0.25s ease;
}

.btn-deepfake-started:hover {
  background: var(--bg);
  color: #fff;
  border-color: rgba(228, 228, 232, 0.72);
  font-weight: 500;
}

.btn-deepfake-started:hover::before {
  opacity: 0.42;
  mix-blend-mode: overlay;
}

.btn-deepfake-started .btn-deepfake-label,
.btn-deepfake-started .btn-arrow {
  position: relative;
  z-index: 1;
}

.btn-deepfake-started .btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  flex-shrink: 0;
  border: none;
  border-radius: 0;
  color: #0a0a0a;
  transition: color 0.2s ease;
}

.btn-deepfake-started .btn-arrow svg {
  width: 1.09rem;
  height: 1.09rem;
  flex-shrink: 0;
  display: block;
  transform: translate(-0.02rem, -0.095rem);
  stroke-width: 1.75;
  transition: stroke-width 0.2s ease, transform 0.2s ease;
}

.btn-deepfake-started:hover .btn-arrow {
  color: #fff;
}

.btn-deepfake-started:hover .btn-arrow svg {
  transform: translate(0.1rem, -0.095rem);
  stroke-width: 2.35;
}

.section-csam-graphic,
.section-dashboards-graphic {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
  transform: translateX(var(--section-promo-right-col-extra-x));
}

/* Donut column — stack transform handles art offset; desktop nudge right with left-column var */
.section-deepfake-graphic {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 0;
  min-width: 0;
  transform: translateX(var(--section-promo-left-col-extra-x));
}

/* Same bounding box as spiral art — orb % are always relative to this, not the grid cell */
.section-csam-graphic-stack {
  position: relative;
  width: min(100%, var(--section-promo-graphic-max));
  max-width: 100%;
  transform: translate(0, 0.5rem);
  --csam-orb-left: 48.9%;
  --csam-orb-top: 46%;
  --csam-orb-size: 43%;
  /* Teal layer slightly smaller than GIF so it doesn’t read oversized; still % of stack */
  --csam-glow-size: 27.5%;
}

.section-csam-graphic-stack .section-csam-spiral-layer {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Net + orb — same stack / % positioning rules as donut; glow uses CSAM-style transparency + centered highlight.
   Horizontal offset matches CSAM spiral (text|graphic): avoid extra negative X that pulled the net toward the copy */
.section-dashboards-graphic-stack {
  position: relative;
  width: min(100%, var(--section-promo-graphic-max));
  max-width: 100%;
  transform: translate(0, 2.95rem);
  --net-orb-left: 50%;
  --net-orb-top: 54%;
  --net-orb-size: 43%;
  --net-glow-size: 27.5%;
}

.section-dashboards-graphic-stack .section-dashboards-net-layer {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
}

/* Donut + orb — same stack width and orb % as spiral/net so all three promos match */
.section-deepfake-graphic-stack {
  position: relative;
  width: var(--section-deepfake-graphic-max);
  max-width: 100%;
  transform: translate(-1.3rem, 2.78rem);
  --donut-orb-left: 50%;
  --donut-orb-top: 48%;
  --donut-orb-size: 43%;
  --donut-glow-size: 27.5%;
}

.section-deepfake-graphic-stack .section-deepfake-donut-layer {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
}

/* Orb: % of .section-csam-graphic-stack (= spiral art box) so it scales with spiral on all viewports.
   Tuned on 16" MacBook Pro — keep left/top as % of this stack only (don’t position vs outer .section-csam-graphic). */
.section-csam-spiral-layer {
  position: relative;
  z-index: 0;
}

/* Translucent teal sphere — shared look (spiral, donut, net); position/size from parent stack vars */
.section-csam-graphic-stack .section-csam-orb-glow,
.section-deepfake-graphic-stack .section-deepfake-orb-glow,
.section-dashboards-graphic-stack .section-dashboards-orb-glow {
  position: absolute;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  /* Orb glow: site teal #79ffea family, slightly brighter (rgb(105,252,238) ~#69fcee); dark: softer outer bloom */
  background: radial-gradient(
    circle at 50% 12%,
    rgba(105, 252, 238, 0.6) 0%,
    rgba(105, 252, 238, 0.28) 32%,
    rgba(105, 252, 238, 0.11) 55%,
    rgba(105, 252, 238, 0.045) 72%,
    transparent 82%
  );
  box-shadow:
    0 0 8px rgba(105, 252, 238, 0.22),
    inset 0 10px 18px rgba(255, 255, 255, 0.14),
    inset 0 -6px 14px rgba(105, 252, 238, 0.12);
}

.section-csam-graphic-stack .section-csam-orb-glow {
  left: var(--csam-orb-left);
  top: var(--csam-orb-top);
  width: var(--csam-glow-size);
}

.section-deepfake-graphic-stack .section-deepfake-orb-glow {
  left: var(--donut-orb-left);
  top: var(--donut-orb-top);
  width: var(--donut-glow-size);
}

.section-dashboards-graphic-stack .section-dashboards-orb-glow {
  left: var(--net-orb-left);
  top: var(--net-orb-top);
  width: var(--net-glow-size);
}

.section-csam-graphic-stack .section-csam-orb-gif,
.section-deepfake-graphic-stack .section-deepfake-orb-gif,
.section-dashboards-graphic-stack .section-dashboards-orb-gif {
  position: absolute;
  transform: translate(-50%, -50%);
  height: auto;
  aspect-ratio: 1;
  max-width: none;
  min-width: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
  object-fit: cover;
}

.section-csam-graphic-stack .section-csam-orb-gif {
  left: var(--csam-orb-left);
  top: var(--csam-orb-top);
  width: var(--csam-orb-size);
}

.section-deepfake-graphic-stack .section-deepfake-orb-gif {
  left: var(--donut-orb-left);
  top: var(--donut-orb-top);
  width: var(--donut-orb-size);
  /* Flat 2D tilt — no 3D axis (avoids clipping) */
  transform: translate(-50%, -50%) rotate(145deg);
}

.section-dashboards-graphic-stack .section-dashboards-orb-gif {
  left: var(--net-orb-left);
  top: var(--net-orb-top);
  width: var(--net-orb-size);
  transform: translate(-50%, -50%) rotate(-90deg);
}

@media (max-width: 900px) {
  .section-csam .section-csam-inner,
  .section-deepfake .section-deepfake-inner,
  .section-dashboards .section-dashboards-inner {
    grid-template-columns: 1fr;
    align-items: start;
    width: 100%;
    max-width: 100%;
    padding-left: clamp(0.75rem, 3.5vw, 1.35rem);
    padding-right: clamp(0.75rem, 3.5vw, 1.35rem);
  }

  .section-csam-content,
  .section-dashboards-content,
  .section-deepfake-content {
    padding-left: 0;
    padding-right: 0;
  }

  .section-csam-content,
  .section-dashboards-content {
    transform: none;
  }

  .section-deepfake-content {
    margin-left: 0;
    max-width: none;
    transform: none;
  }

  .section-csam-graphic,
  .section-deepfake-graphic,
  .section-dashboards-graphic {
    justify-content: center;
    order: -1;
    transform: none;
  }

  .section-deepfake-graphic {
    margin-left: 0;
  }

  .section-csam-graphic-stack {
    width: min(254px, 78vw);
    transform: translate(0, 0.45rem);
  }

  .section-deepfake-graphic-stack {
    width: min(254px, 78vw);
    transform: translate(0, 1.15rem);
  }

  .section-dashboards-graphic-stack {
    width: min(254px, 78vw);
    transform: translate(0, 2.55rem);
  }
}

@media (max-width: 1366px) and (max-width: 900px) {
  .section-csam-content,
  .section-dashboards-content {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    transform: none;
  }

  .section-deepfake-content {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    max-width: none;
    transform: none;
  }

  .section-csam-graphic,
  .section-deepfake-graphic,
  .section-dashboards-graphic {
    justify-content: flex-start;
    transform: none;
  }

  .section-csam-graphic-stack,
  .section-dashboards-graphic-stack {
    margin-left: clamp(-0.85rem, -3.5vw, -0.2rem);
  }

  .section-deepfake-graphic-stack {
    margin-left: clamp(-0.55rem, -2.4vw, -0.15rem);
  }
}

/*
 * Index — narrow portrait tablet only (768–833px wide, portrait): iPad Air class (~820).
 * Excludes iPad Pro portrait (834px / 1024px) so those layouts stay unchanged.
 * Equal promo title rules (override ch-based min widths) + promo art: same section gutters as CSAM
 * (deepfake had extra padding-left at ≤1024) + center each stack in its row so spiral / donut / net share one vertical axis.
 * Also: slightly less space government → CSAM (this @media only — not iPad Pro portrait or other breakpoints).
 */
@media (max-width: 833px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  /* Full-width title row so % / flex don’t shrink rules differently per heading length */
  main#main:not(.page-main) .section.section-csam .section-csam-title,
  main#main:not(.page-main) .section.section-deepfake .section-deepfake-title,
  main#main:not(.page-main) .section.section-dashboards .section-dashboards-title {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* One fixed width for all three (not 18ch — ch differs per title). align-self avoids column-flex stretch overriding width. */
  main#main:not(.page-main) .section-csam-title::before,
  main#main:not(.page-main) .section-dashboards-title::before,
  main#main:not(.page-main) .section-deepfake-title::before {
    width: min(24rem, calc(100vw - 6rem));
    max-width: none;
    box-sizing: border-box;
    align-self: flex-start;
  }

  /* Undo deepfake-only wider left gutter so each promo’s inner + graphic row share the same horizontal center */
  main#main:not(.page-main) .section.section-csam,
  main#main:not(.page-main) .section.section-dashboards,
  main#main:not(.page-main) .section.section-deepfake {
    padding-left: clamp(2.45rem, 5.65vw, 4.15rem);
    padding-right: clamp(0.65rem, 2.15vw, 1.85rem);
  }

  /* Tighter government → CSAM gap on iPad Air–class portrait only (overrides index ≤1024 CSAM padding-top here only). */
  main#main:not(.page-main) .section.section-csam {
    padding-top: clamp(2.85rem, 6.25vh, 5.25rem);
  }

  /* CTA negative margin-top: keep enough room for the pill, slightly tighter gap to the CTA than prior clamp */
  main#main:not(.page-main) .section.section-dashboards {
    padding-bottom: clamp(3.65rem, 9.25vw, 5.35rem);
  }

  /* Center each stack in the row — same as each other because section + inner padding now match across the three */
  main#main:not(.page-main) .section.section-csam .section-csam-graphic,
  main#main:not(.page-main) .section.section-deepfake .section-deepfake-graphic,
  main#main:not(.page-main) .section.section-dashboards .section-dashboards-graphic {
    justify-content: center;
    width: 100%;
  }

  /* Same translateX on all three = shift left as a group; same Y = one vertical axis (still centered in row first via flex) */
  main#main:not(.page-main) .section.section-csam .section-csam-graphic-stack,
  main#main:not(.page-main) .section.section-dashboards .section-dashboards-graphic-stack,
  main#main:not(.page-main) .section.section-deepfake .section-deepfake-graphic-stack {
    margin-left: 0;
    margin-right: 0;
    transform: translate(clamp(-11.5rem, -32vw, -3.5rem), 0.85rem);
  }
}

/*
 * Index — dashboards promo only, narrow landscape 800–904: the shared band above uses a shallow Y on all three stacks
 * so spiral/donut align; the net needs more drop vs the title rule (like ≤900 portrait ~2.55rem) + extra section foot
 * so the pill isn’t clipped on short viewports.
 */
@media (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  main#main:not(.page-main) .section.section-dashboards .section-dashboards-graphic-stack {
    transform: translate(
      clamp(-11.5rem, -32vw, -3.5rem),
      clamp(2.2rem, 5.15vw, 3.35rem)
    );
  }

  main#main:not(.page-main) .section.section-dashboards .section-dashboards-content {
    margin-top: clamp(1.25rem, 3.35vw, 2.15rem);
  }

  main#main:not(.page-main) .section.section-dashboards {
    padding-bottom: clamp(5.45rem, 11.75vw, 8rem);
  }
}

/* Wide tablet landscape (e.g. iPad Pro 12.9" 1366×1024): avoid stacked-narrow hero + promo; fit vertical space.
   Use min-width: 1025px so 1024px-wide viewports (e.g. 1024×768) stay on the ≤1023 stacked band — min-width: 1024px
   matched exactly 1024 and forced this tall two-column hero, overflowing short landscape heights. */
@media (max-width: 1366px) and (orientation: landscape) and (min-width: 1025px) {
  .hero-landing {
    padding: clamp(3.35rem, 6.25vh, 4.85rem) clamp(1rem, 2.5vw, 1.75rem) clamp(1.75rem, 3.5vh, 2.5rem);
    min-height: 100vh;
    min-height: 100dvh;
  }

  .product-hero {
    padding: clamp(3.35rem, 6.25vh, 4.85rem) clamp(1rem, 2.5vw, 1.75rem) clamp(1.75rem, 3.5vh, 2.5rem);
    min-height: 100vh;
    min-height: 100dvh;
  }

  .what-not-hero {
    padding-top: clamp(3.35rem, 6.25vh, 4.85rem);
    padding-bottom: clamp(1.75rem, 3.5vh, 2.5rem);
    padding-left: 0;
    padding-right: 0;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1.48fr) minmax(0, 0.52fr);
    gap: clamp(1.1rem, 2.2vh, 1.85rem) clamp(0.75rem, 1.85vw, 1.65rem);
    align-items: start;
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  .hero-right {
    display: block;
  }

  .hero-left {
    position: relative;
    z-index: 2;
    margin-top: clamp(5.85rem, 14.5vh, 9.75rem);
    max-width: none;
    padding-left: clamp(1.85rem, 4.85vw, 4rem);
    padding-right: clamp(0.5rem, 1.35vw, 1rem);
    min-width: 0;
  }

  .product-hero__copy {
    margin-top: clamp(5.85rem, 14.5vh, 9.75rem);
  }

  .product-hero--csam .product-hero__copy {
    margin-top: calc(clamp(5.85rem, 14.5vh, 9.75rem) + 1rem);
  }

  .product-hero--deepfake .product-hero__copy--deepfake {
    margin-top: calc(clamp(5.85rem, 14.5vh, 9.75rem) + 0.65rem);
  }

  .product-hero--csam .product-hero__visual-inner {
    transform: translate(
      clamp(-2rem, -5vw, -0.85rem),
      clamp(2.85rem, 6.5vh, 5.75rem)
    );
  }

  .what-not-hero__copy {
    margin-top: clamp(4.5rem, 11vh, 7.1rem);
  }

  .hero-trusted {
    font-size: calc(clamp(1.14rem, 2.58vw, 1.92rem) - 3px);
    line-height: 1.28;
    max-width: 100%;
    margin: 0 0 clamp(1rem, 2.2vh, 1.75rem);
  }

  .hero-landing .hero-title-teal {
    font-size: calc(clamp(2.38rem, 4.2vw, 3.62rem) - 7px);
    line-height: 1.35;
    margin-bottom: clamp(0.85rem, 1.8vh, 1.25rem);
    max-width: 100%;
    text-wrap: balance;
  }

  .hero-buttons .btn-hero,
  .hero-buttons .definition-trigger {
    font-size: clamp(1.2rem, 2.4vw, 1.55rem);
    padding: 0.5rem 2.2rem;
    line-height: 1.2;
    gap: 0.65rem;
    border-radius: 28px;
  }

  .hero-buttons .btn-hero:hover,
  .hero-buttons .definition-trigger:hover {
    font-size: clamp(1.26rem, 2.5vw, 1.62rem);
  }

  .hero-buttons {
    margin-top: clamp(2.05rem, 4vh, 2.95rem);
    gap: clamp(1rem, 2vw, 1.5rem);
  }

  /* Index home hero — iPad Pro landscape (1025–1366) only */
  .hero-landing .hero-trusted {
    font-size: calc(clamp(1.14rem, 2.58vw, 1.92rem) - 4px);
    margin-bottom: clamp(1.45rem, 2.85vh, 2.15rem);
  }

  .hero-landing .hero-buttons {
    margin-top: calc(clamp(2.05rem, 4vh, 2.95rem) + 1rem);
  }

  .hero-landing .hero-glass-card__body {
    font-size: calc(clamp(0.9rem, 1.12vw, 1.02rem) + 4px);
  }

  .hero-landing .hero-title-teal {
    margin-top: -0.55rem;
  }

  .hero-landing .hero-glass-cards {
    transform: translateY(-3.15rem);
  }

  .hero-graphic-layer {
    grid-template-columns: minmax(0, 1.48fr) minmax(0, 0.52fr);
    align-items: flex-start;
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0 clamp(0.35rem, 1.35vw, 0.95rem);
    box-sizing: border-box;
  }

  .hero-landing .hero-graphic-layer .hero-graphic {
    grid-column: 2;
    margin-top: clamp(10rem, 36vh, 21rem);
    margin-left: clamp(-2.35rem, -4.75vw, -0.85rem);
    max-width: min(396px, 44vw);
    width: 100%;
    justify-self: center;
    transform: scale(1.12) translate(-5%, -0.85rem);
    transform-origin: 100% 45%;
  }

  .hero-bottom {
    margin-top: clamp(6.55rem, 12.85vh, 11.05rem);
    gap: clamp(0.85rem, 2vw, 1.35rem);
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    box-sizing: border-box;
  }

  .hero-bottom-left {
    position: relative;
    z-index: 2;
    padding-left: clamp(1.85rem, 4.85vw, 4rem);
    padding-right: clamp(0.35rem, 1.75vw, 1.15rem);
    min-width: 0;
  }

  .hero-landing .hero-tagline {
    padding-top: clamp(1.3rem, 3.25vh, 2.35rem);
  }

  .hero-landing .hero-tagline::before {
    margin-top: clamp(0.38rem, 1.22vh, 1.05rem);
  }

  .hero-bottom-right {
    display: none;
  }

  .section-csam .section-csam-inner,
  .section-dashboards .section-dashboards-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(378px, 36vw));
    width: 100%;
    max-width: min(1240px, 100%);
  }

  .section-deepfake .section-deepfake-inner {
    grid-template-columns: minmax(0, min(378px, 36vw)) minmax(0, 1fr);
    width: 100%;
    max-width: min(1240px, 100%);
  }

  .section-csam-graphic,
  .section-deepfake-graphic,
  .section-dashboards-graphic {
    order: unset;
    justify-content: flex-start;
  }

  .section.section-deepfake .section-deepfake-graphic {
    margin-left: 0;
  }

  .section-csam-graphic-stack {
    width: min(378px, 100%);
    transform: translate(-0.65rem, 0.5rem);
  }

  .section-deepfake-graphic-stack {
    width: min(378px, 100%);
    transform: translate(-1.2rem, 2.55rem);
  }

  .section-dashboards-graphic-stack {
    width: min(378px, 100%);
    transform: translate(-0.65rem, 1.8rem);
  }
}

/*
 * Landscape, 768–1024px wide (e.g. 1024×768): sits under the 1025–1366 landscape band above (wide tablet uses min-width: 1025px).
 * Add overrides here when this width in landscape needs different spacing than wider tablets.
 */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
  .hero-landing .hero-left {
    margin-top: clamp(4.05rem, 11.35vw, 6.65rem);
    /* Match left edge of centered .hero-glass-cards row — cards unchanged (margin auto). */
    padding-left: calc((100% - min(var(--header-bar-width), 100%)) / 2);
    padding-right: clamp(0.15rem, 1.5vw, 0.75rem);
  }

  .hero-landing .hero-trusted {
    font-size: calc(clamp(1.04rem, 2.92vw, 1.73rem) - 5.5px);
    margin-bottom: clamp(0.68rem, 1.25vh, 0.98rem);
  }

  .hero-landing .hero-title-teal {
    font-size: calc(clamp(2.18rem, 4.68vw, 3.08rem) - 7px);
    margin-top: clamp(0.32rem, 0.65vh, 0.55rem);
    margin-bottom: clamp(0.42rem, 0.85vh, 0.68rem);
  }

  .hero-landing .hero-deck-group {
    margin-top: clamp(1.55rem, 2.55vh, 2.1rem);
    margin-bottom: clamp(0.7rem, 1.25vh, 1.05rem);
  }

  .hero-landing .hero-deck-group .hero-deck {
    font-size: calc(clamp(1.08rem, 2.05vw, 1.42rem) + 3px);
  }

  .hero-landing .hero-buttons {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    max-width: min(19.25rem, 100%);
    margin-top: clamp(3.45rem, 5.65vh, 4.15rem);
    gap: clamp(0.75rem, 2.2vw, 1.15rem);
  }

  .hero-landing .hero-buttons .btn-hero,
  .hero-landing .hero-buttons .definition-dropdown {
    width: 100%;
    max-width: 100%;
  }

  .hero-landing .hero-buttons .btn-hero,
  .hero-landing .hero-buttons .definition-trigger {
    font-size: calc(clamp(1.2rem, 2.4vw, 1.55rem) - 2px);
  }

  .hero-landing .hero-buttons .btn-hero:hover,
  .hero-landing .hero-buttons .definition-trigger:hover {
    font-size: calc(clamp(1.26rem, 2.5vw, 1.62rem) - 2px);
  }

  .hero-landing .hero-buttons .definition-trigger {
    width: 100%;
    justify-content: center;
  }

  .hero-landing .hero-graphic-layer .hero-graphic {
    margin-top: clamp(9.05rem, 28.85vw, 15.65rem);
    max-width: min(288px, 62vw);
    transform: scale(0.96) translate(1.15%, 0.8rem);
    transform-origin: 100% 50%;
  }

  .hero-landing .hero-glass-card__heading {
    font-size: clamp(0.88rem, 1.25vw, 1.02rem);
  }

  .hero-landing .hero-glass-card__body {
    font-size: calc(clamp(0.9rem, 1.12vw, 1.02rem) - 1px);
    margin-top: clamp(0.72rem, 1.05vw, 0.92rem);
  }

  .hero-landing .hero-glass-cards {
    transform: translateY(-1.3rem);
  }
}

/* Index — iPad Pro portrait (834–1024, e.g. 12.9″ 1024×1366): card headings, card width, GIF, headline line-height. */
@media (max-width: 1024px) and (min-width: 834px) and (orientation: portrait) {
  .hero-landing .hero-glass-card__heading {
    font-size: calc(clamp(0.88rem, 1.25vw, 1.02rem) + 0px);
  }

  .hero-landing .hero-glass-card__body {
    font-size: calc(clamp(0.9rem, 1.12vw, 1.02rem) + 4px);
    margin-top: clamp(0.78rem, 1.18vw, 1.02rem);
  }

  .hero-landing .hero-title-teal {
    line-height: 1.5;
    transform: translateY(clamp(-0.3rem, 0.35vw, 0.3rem));
  }

  .hero-landing .hero-deck-group {
    margin-top: clamp(-0.35rem, 2.05vw, 0.95rem);
  }

  .hero-landing .hero-buttons {
    margin-top: clamp(1.15rem, 2.45vw, 1.85rem);
    margin-bottom: clamp(0.95rem, 2.45vw, 1.75rem);
    padding-top: clamp(0.7rem, 1.45vw, 1.05rem);
    padding-bottom: clamp(0.7rem, 1.45vw, 1.05rem);
    transform: translateY(clamp(-1.05rem, -2.55vw, -0.45rem));
  }

  .hero-landing .hero-glass-bottom {
    margin-top: clamp(-0.2rem, -0.95vw, 0.32rem);
    padding-bottom: clamp(0.7rem, 1.95vh, 1.25rem);
  }

  .hero-landing .hero-glass-cards {
    width: calc(100% + 1.25rem);
    max-width: calc(100vw - 2.25rem);
    margin-left: -0.625rem;
    margin-right: -0.625rem;
    transform: translateY(calc(-0.9rem - 0.2rem));
    padding-top: clamp(1.35rem, 3.25vh, 2.05rem);
    padding-bottom: clamp(0.95rem, 2.45vh, 1.5rem);
  }

  .hero-landing .hero-graphic-layer .hero-graphic {
    max-width: min(308px, 39.5vw);
    transform: translate(clamp(-1.75rem, -6.35vw, -0.25rem), clamp(-0.35rem, 0.35vw, 0.3rem)) scale(1);
    transform-origin: 50% 0%;
  }
}

/* Index — iPad Air portrait (768–833): card type, hero type/GIF, TAP matches Pro portrait band. */
@media (max-width: 833px) and (min-width: 768px) and (orientation: portrait) {
  .hero-landing .hero-trusted {
    font-size: calc(clamp(1.04rem, 2.92vw, 1.73rem) - 3.5px);
  }

  .hero-landing .hero-title-teal {
    font-size: calc(clamp(2.12rem, 4.42vw, 2.92rem) - 3px);
    line-height: 1.5;
    transform: translateY(clamp(-0.45rem, 0.15vw, 0.15rem));
  }

  .hero-landing .hero-deck-group {
    margin-top: clamp(-0.55rem, 1.65vw, 0.65rem);
  }

  .hero-landing .hero-deck-group .hero-deck {
    font-size: calc(clamp(1rem, 2.35vw, 1.28rem) + 2px);
  }

  .hero-landing .hero-buttons {
    margin-top: clamp(1.35rem, 2.55vw, 2rem);
    margin-bottom: clamp(0.85rem, 2.15vw, 1.55rem);
    padding-top: clamp(0.85rem, 1.65vw, 1.2rem);
    padding-bottom: clamp(0.55rem, 1.25vw, 0.9rem);
    transform: translateY(clamp(-1.35rem, -2.85vw, -0.65rem));
  }

  .hero-landing .hero-glass-card__heading {
    font-size: calc(clamp(0.88rem, 1.25vw, 1.02rem) - 3px);
  }

  .hero-landing .hero-glass-card__body {
    font-size: calc(clamp(0.9rem, 1.12vw, 1.02rem) - 1px);
    margin-top: clamp(0.52rem, 0.95vw, 0.78rem);
  }

  .hero-landing .hero-glass-bottom {
    padding-bottom: clamp(0.65rem, 1.75vh, 1.1rem);
  }

  .hero-landing .hero-glass-cards {
    width: calc(100% + 1rem);
    max-width: calc(100vw - 2.35rem);
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding-top: clamp(0.85rem, 2.35vh, 1.45rem);
    padding-bottom: clamp(0.95rem, 2.35vh, 1.45rem);
  }

  .hero-landing .hero-graphic-layer .hero-graphic {
    max-width: min(268px, 32vw);
    transform: translate(clamp(-1.05rem, -4.45vw, 0.05rem), clamp(-0.9rem, -0.05vw, -0.35rem)) scale(0.96);
    transform-origin: 50% 0%;
  }
}

@media (max-width: 1366px) and (orientation: landscape) and (min-width: 1025px) and (max-width: 1280px) {
  .section-deepfake-graphic-stack {
    transform: translate(-1.38rem, 2.55rem);
  }

  .section.section-deepfake .section-deepfake-graphic {
    margin-left: 0;
  }
}

/* Below 1281 landscape: wide-tablet promo block above used ~378px tracks — follow :root caps so art shrinks with the same ramp as portrait */
@media (max-width: 1280px) and (min-width: 901px) and (orientation: landscape) {
  .section-csam .section-csam-inner,
  .section-dashboards .section-dashboards-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--section-promo-graphic-max));
  }

  .section-deepfake .section-deepfake-inner {
    grid-template-columns: minmax(0, var(--section-deepfake-graphic-max)) minmax(0, 1fr);
  }

  .section-csam-graphic-stack,
  .section-dashboards-graphic-stack {
    width: min(100%, var(--section-promo-graphic-max));
  }

  .section-deepfake-graphic-stack {
    width: min(100%, var(--section-deepfake-graphic-max));
  }
}

/* Deepfake donut — two-column promos (901+): sit right and slightly higher so art lines up with copy; overrides earlier stack transforms */
@media (min-width: 901px) {
  .section-deepfake-graphic {
    justify-content: flex-end;
  }

  .section-deepfake-graphic-stack,
  main#main:not(.page-main) .section.section-deepfake .section-deepfake-graphic-stack {
    transform: translate(clamp(0.25rem, 1.2vw, 1.15rem), clamp(0.55rem, 1.55vw, 1.1rem));
    margin-left: 0;
    margin-top: 0;
  }
}

/* Government assurance section - full-bleed, no border */
.section-government-wrap {
  position: relative;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden;
  border: none;
}

.section-government-tunnel {
  position: relative;
  z-index: 0;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  height: calc(100vw * (618 / 1922));
  pointer-events: none;
  display: block;
}

.government-tunnel-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  display: block;
  opacity: 0.35;
}

/* Section overlays tunnel – must override .section’s max-width and margin so it fills the wrap */
.section-government {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 4rem 1.5rem;
  box-sizing: border-box;
  max-width: none !important;
  margin: 0 !important;
  width: 100%;
  border: none;
}

/* Separate boxes so each can be positioned individually */
.government-heading-wrap {
  position: absolute;
  left: 50%;
  top: 32%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  padding: 0 1.5rem;
  box-sizing: border-box;
  text-align: center;
}

.government-text-wrap {
  position: absolute;
  left: 50%;
  top: 65%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(72rem, 96vw);
  width: 100%;
  padding: 0 clamp(1rem, 2vw, 1.5rem);
  box-sizing: border-box;
  text-align: center;
}

.government-heading {
  margin: 0;
  color: var(--government-kicker);
  line-height: 1.08;
}

.government-heading__line {
  display: block;
  font-family: 'Azeret Mono', monospace;
  font-size: clamp(1.05rem, 0.55rem + 1.35vw, 1.72rem);
  font-weight: 300;
  letter-spacing: clamp(0.12em, 0.04em + 0.22vw, 0.17em);
  text-transform: uppercase;
  line-height: 1.08;
}

.government-heading__name {
  display: block;
  margin-top: 0.44em;
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(1.75rem, 0.95rem + 2.65vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: none;
  line-height: 1.05;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.government-text {
  font-family: 'Open Sans', var(--font);
  font-weight: 350;
  font-size: clamp(1rem, 0.6rem + 1.55vw, 2rem);
  line-height: 1.58;
  color: #fff;
  margin: 0 0 clamp(1.95rem, 3.35vw, 2.55rem);
  padding: 0.22em 0;
}

.government-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.65rem, 1.45vw, 1rem);
  width: 100%;
}

.government-actions .btn-csam-started,
.government-actions .btn-deepfake-started {
  margin-top: 0;
  min-width: clamp(9.25rem, 28vw, 12.75rem);
  padding: clamp(0.58rem, 1.85vw, 0.75rem) clamp(1.25rem, 4.5vw, 2.15rem);
  font-size: clamp(0.8125rem, 2.1vw, 1rem);
  gap: clamp(0.35rem, 1vw, 0.5rem);
  border-radius: clamp(1.25rem, 4.5vw, 28px);
  justify-content: center;
}

/* TAP band — center CTA matches home hero BOOK A CALL gradient pill */
.government-actions .btn-hero {
  margin-top: 0;
  justify-content: center;
  min-width: clamp(9.25rem, 28vw, 12.75rem);
  gap: clamp(0.35rem, 1vw, 0.65rem);
  padding: clamp(0.52rem, 1.85vw, 0.6rem) clamp(1.25rem, 4.5vw, 2rem);
  font-size: clamp(0.8125rem, 2.1vw, 1rem);
  font-weight: 400;
  border-radius: clamp(1.25rem, 4.5vw, 28px);
}

.government-actions .btn-hero::before {
  border-radius: inherit;
}

.government-actions .btn-hero:hover {
  font-size: clamp(0.84rem, 2.15vw, 1.03rem);
  font-weight: 500;
}

.government-actions .btn-hero .btn-arrow {
  position: relative;
  z-index: 1;
  width: clamp(1.05rem, 2.85vw, 1.5rem);
  height: clamp(1.05rem, 2.85vw, 1.5rem);
}

.government-actions .btn-csam-started .btn-arrow svg,
.government-actions .btn-deepfake-started .btn-arrow svg {
  width: clamp(0.9rem, 2.5vw, 1.09rem);
  height: clamp(0.9rem, 2.5vw, 1.09rem);
}

.government-actions .btn-hero .btn-arrow svg {
  width: clamp(0.72rem, 2.1vw, 1.05rem);
  height: clamp(0.72rem, 2.1vw, 1.05rem);
}

@media (max-width: 1366px) {
  .government-heading-wrap {
    top: 30%;
  }

  .government-text-wrap {
    top: 68%;
  }

  main#main:not(.page-main) .home-first-viewport .government-heading__line {
    font-size: clamp(0.9rem, 0.5rem + 1.15vw, 1.38rem);
    letter-spacing: clamp(0.12em, 0.04em + 0.18vw, 0.16em);
  }

  main#main:not(.page-main) .home-first-viewport .government-heading__name {
    font-size: clamp(1.55rem, 0.85rem + 2.15vw, 2.35rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-text {
    font-size: clamp(0.92rem, 0.55rem + 1.25vw, 1.42rem);
    line-height: 1.55;
    margin-bottom: clamp(1.15rem, 2.2vw, 1.85rem);
  }
}

/* Index — iPad Pro landscape (1025–1366): TAP title ↔ lede; lede + CTAs nudged up */
@media (max-width: 1366px) and (orientation: landscape) and (min-width: 1025px) {
  main#main:not(.page-main) .home-first-viewport .government-heading-wrap {
    top: 31%;
  }

  main#main:not(.page-main) .home-first-viewport .government-text-wrap {
    top: 62%;
  }

  main#main:not(.page-main) .home-first-viewport .government-heading__name {
    margin-top: 0.32em;
  }

  main#main:not(.page-main) .home-first-viewport .government-text {
    margin-bottom: clamp(0.95rem, 1.85vw, 1.55rem);
  }
}

/* Index government — iPad Pro landscape only (1181–1366): match iPad Air lede width + type */
@media (max-width: 1366px) and (min-width: 1181px) and (orientation: landscape) {
  main#main:not(.page-main) .home-first-viewport .government-heading-wrap,
  main#main:not(.page-main) .home-first-viewport .government-text-wrap {
    max-width: min(54rem, 97vw);
    padding-left: clamp(0.25rem, 0.85vw, 0.5rem);
    padding-right: clamp(0.25rem, 0.85vw, 0.5rem);
    box-sizing: border-box;
  }

  main#main:not(.page-main) .home-first-viewport .government-text {
    font-size: clamp(0.92rem, 0.55rem + 1.25vw, 1.42rem);
    line-height: 1.52;
  }
}

/* Index — iPad Air landscape (~1180×820; 1025–1180 only — iPad Pro 1366×1024 unchanged) */
@media (max-width: 1180px) and (min-width: 1025px) and (orientation: landscape) {
  .hero-landing {
    padding-top: clamp(3.15rem, 5.95vh, 4.65rem);
  }

  .hero-landing .hero-left {
    margin-top: clamp(5.05rem, 13.1vh, 8.65rem);
  }

  .hero-landing .hero-trusted {
    font-size: calc(clamp(1.14rem, 2.58vw, 1.92rem) - 7px);
    margin-bottom: clamp(1.3rem, 2.55vh, 2rem);
  }

  .hero-landing .hero-deck-group .hero-deck {
    font-size: calc(clamp(1.08rem, 2.05vw, 1.42rem) + 2px);
  }

  .hero-landing .hero-title-teal {
    margin-top: -0.45rem;
    margin-bottom: clamp(0.78rem, 1.7vh, 1.18rem);
  }

  .hero-landing .hero-deck-group {
    margin-top: calc(clamp(1.65rem, 2.65vh, 2.3rem) + 0.25rem);
    margin-bottom: clamp(0.88rem, 1.55vh, 1.35rem);
  }

  .hero-landing .hero-glass-card__body {
    font-size: calc(clamp(0.9rem, 1.12vw, 1.02rem) + 2px);
  }

  .hero-landing .hero-graphic-layer .hero-graphic {
    margin-top: clamp(9.35rem, 33.5vh, 20.15rem);
    transform: scale(1.12) translate(-5%, -1.25rem);
  }

  .hero-landing .hero-buttons .btn-hero,
  .hero-landing .hero-buttons .definition-trigger {
    font-size: calc(clamp(1.2rem, 2.4vw, 1.55rem) - 3px);
    padding: 0.42rem 1.9rem;
    gap: 0.58rem;
  }

  .hero-landing .hero-buttons .btn-hero:hover,
  .hero-landing .hero-buttons .definition-trigger:hover {
    font-size: calc(clamp(1.26rem, 2.5vw, 1.62rem) - 3px);
  }

  .hero-landing .hero-buttons {
    margin-top: calc(clamp(2.05rem, 4vh, 2.95rem) + 0.8rem);
    position: relative;
    z-index: 4;
  }

  .hero-landing .definition-dropdown-panel:not([hidden]) {
    z-index: 12;
  }
}

/* Index government — ≤1200: stack in flow earlier so kicker, body, and CTAs don’t overlap when the window narrows */
@media (max-width: 1200px) {
  main#main:not(.page-main) .home-first-viewport .section-government-wrap {
    min-height: max(calc(100vw * (618 / 1922) * 1.55), 30rem);
  }

  main#main:not(.page-main) .home-first-viewport .section-government-tunnel {
    position: absolute;
    inset: 0;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: 100%;
    min-height: 100%;
  }

  main#main:not(.page-main) .home-first-viewport .section-government {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 2.75vh, 1.55rem);
    min-height: max(calc(100vw * (618 / 1922) * 1.55), 30rem);
    padding: clamp(1.85rem, 4.5vh, 3rem) clamp(1rem, 4vw, 1.5rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-heading-wrap,
  main#main:not(.page-main) .home-first-viewport .government-text-wrap {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: min(36rem, 92vw);
    padding-left: clamp(0.75rem, 3vw, 1.25rem);
    padding-right: clamp(0.75rem, 3vw, 1.25rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-heading__line {
    font-size: clamp(0.82rem, 0.45rem + 1.05vw, 1.08rem);
    letter-spacing: 0.13em;
  }

  main#main:not(.page-main) .home-first-viewport .government-heading__name {
    font-size: clamp(1.35rem, 0.75rem + 3.8vw, 1.95rem);
    line-height: 1.08;
  }

  main#main:not(.page-main) .home-first-viewport .government-text-wrap {
    gap: clamp(1.15rem, 3.25vw, 1.75rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-text {
    font-size: clamp(0.88rem, 0.5rem + 1.65vw, 1.18rem);
    line-height: 1.52;
    margin-bottom: 0;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions {
    margin-top: 0;
  }
}

/* Index government — iPad Air landscape (1025–1180): less side padding, wider lede, one-row CTAs */
@media (max-width: 1180px) and (min-width: 1025px) and (orientation: landscape) {
  main#main:not(.page-main) .home-first-viewport .section-government-wrap,
  main#main:not(.page-main) .home-first-viewport .section-government {
    min-height: max(calc(100vw * (618 / 1922) * 1.08), 24rem);
  }

  main#main:not(.page-main) .home-first-viewport .section-government {
    padding: clamp(1.05rem, 2.35vh, 1.55rem) clamp(0.45rem, 1.75vw, 0.75rem);
    gap: clamp(0.7rem, 1.75vh, 1.05rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-heading-wrap,
  main#main:not(.page-main) .home-first-viewport .government-text-wrap {
    max-width: min(54rem, 97vw);
    padding-left: clamp(0.25rem, 0.85vw, 0.5rem);
    padding-right: clamp(0.25rem, 0.85vw, 0.5rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-heading__line {
    font-size: calc(clamp(0.82rem, 0.45rem + 1.05vw, 1.08rem) + 3px);
  }

  main#main:not(.page-main) .home-first-viewport .government-heading__name {
    margin-top: 0.32em;
    font-size: calc(clamp(1.35rem, 0.75rem + 3.8vw, 1.95rem) + 3px);
  }

  main#main:not(.page-main) .home-first-viewport .government-text-wrap {
    gap: clamp(0.65rem, 1.5vw, 0.95rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-text {
    font-size: clamp(0.92rem, 0.55rem + 1.25vw, 1.42rem);
    margin-top: 0.28rem;
    margin-bottom: 0;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: clamp(0.65rem, 1.45vw, 1.05rem);
    margin-top: 0.78rem;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-csam-started,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-deepfake-started,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero {
    min-width: clamp(7.55rem, 16.25vw, 9.6rem);
    flex: 0 1 auto;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1.2;
    padding: clamp(0.52rem, 1.35vw, 0.68rem) clamp(0.98rem, 2.55vw, 1.45rem);
    font-size: clamp(0.75rem, 1.55vw, 0.9rem);
    gap: clamp(0.35rem, 1vw, 0.5rem);
    border-radius: clamp(1.25rem, 4.5vw, 28px);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero .btn-arrow {
    width: clamp(0.98rem, 2.65vw, 1.16rem);
    height: clamp(0.98rem, 2.65vw, 1.16rem);
    flex-shrink: 0;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero .btn-arrow svg {
    width: clamp(0.68rem, 1.85vw, 0.82rem);
    height: clamp(0.68rem, 1.85vw, 0.82rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-csam-started .btn-arrow,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-deepfake-started .btn-arrow {
    width: auto;
    height: auto;
    flex-shrink: 0;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-csam-started .btn-arrow svg,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-deepfake-started .btn-arrow svg {
    width: clamp(0.82rem, 2.25vw, 0.98rem);
    height: clamp(0.82rem, 2.25vw, 0.98rem);
    transform: translate(-0.02rem, -0.02rem);
  }
}

/* Index government — ≤1024: further tighten stacked TAP band typography */
@media (max-width: 1024px) {
  main#main:not(.page-main) .home-first-viewport .section-government {
    gap: clamp(0.9rem, 2.35vh, 1.4rem);
    padding-top: clamp(1.65rem, 4vh, 2.75rem);
    padding-bottom: clamp(1.65rem, 4vh, 2.75rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-heading-wrap,
  main#main:not(.page-main) .home-first-viewport .government-text-wrap {
    max-width: min(34rem, 90vw);
  }

  main#main:not(.page-main) .home-first-viewport .government-heading__line {
    font-size: clamp(0.78rem, 0.4rem + 0.95vw, 1rem);
    letter-spacing: 0.12em;
  }

  main#main:not(.page-main) .home-first-viewport .government-heading__name {
    font-size: clamp(1.22rem, 0.65rem + 3.25vw, 1.72rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-text-wrap {
    gap: clamp(1.25rem, 4vw, 2rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-text {
    font-size: clamp(0.84rem, 0.48rem + 1.45vw, 1.08rem);
    line-height: 1.5;
    margin-bottom: 0;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-csam-started,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-deepfake-started,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero {
    min-width: clamp(8.5rem, 38vw, 11.5rem);
    padding: clamp(0.52rem, 2.2vw, 0.68rem) clamp(1.05rem, 5vw, 1.65rem);
    font-size: clamp(0.78rem, 2.65vw, 0.9375rem);
    border-radius: clamp(1.1rem, 5vw, 1.65rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero:hover {
    font-size: clamp(0.8rem, 2.75vw, 0.96rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-csam-started .btn-arrow svg,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-deepfake-started .btn-arrow svg {
    width: clamp(0.82rem, 2.85vw, 1rem);
    height: clamp(0.82rem, 2.85vw, 1rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero .btn-arrow svg {
    width: clamp(0.72rem, 2.65vw, 0.94rem);
    height: clamp(0.72rem, 2.65vw, 0.94rem);
  }
}

/* Index government — iPad 1024×768 landscape: match iPad Air TAP band (768–1024 only) */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
  main#main:not(.page-main) .home-first-viewport .section-government-wrap,
  main#main:not(.page-main) .home-first-viewport .section-government {
    min-height: max(calc(100vw * (618 / 1922) * 1.08), 24rem);
  }

  main#main:not(.page-main) .home-first-viewport .section-government {
    padding: clamp(1.05rem, 2.35vh, 1.55rem) clamp(0.45rem, 1.75vw, 0.75rem);
    gap: clamp(0.7rem, 1.75vh, 1.05rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-heading-wrap,
  main#main:not(.page-main) .home-first-viewport .government-text-wrap {
    max-width: min(54rem, 97vw);
    padding-left: clamp(0.25rem, 0.85vw, 0.5rem);
    padding-right: clamp(0.25rem, 0.85vw, 0.5rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-heading__line {
    font-size: calc(clamp(0.82rem, 0.45rem + 1.05vw, 1.08rem) + 3px);
    letter-spacing: 0.13em;
  }

  main#main:not(.page-main) .home-first-viewport .government-heading__name {
    margin-top: 0.32em;
    font-size: calc(clamp(1.35rem, 0.75rem + 3.8vw, 1.95rem) + 3px);
    line-height: 1.08;
  }

  main#main:not(.page-main) .home-first-viewport .government-text-wrap {
    gap: clamp(0.65rem, 1.5vw, 0.95rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-text {
    font-size: clamp(0.92rem, 0.55rem + 1.25vw, 1.42rem);
    line-height: 1.52;
    margin-top: 0.28rem;
    margin-bottom: 0;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: clamp(0.65rem, 1.45vw, 1.05rem);
    margin-top: 0.78rem;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-csam-started,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-deepfake-started,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero {
    min-width: clamp(7.15rem, 15.5vw, 9.1rem);
    flex: 0 1 auto;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1.2;
    padding: clamp(0.52rem, 1.35vw, 0.68rem) clamp(0.98rem, 2.55vw, 1.45rem);
    font-size: clamp(0.75rem, 1.55vw, 0.9rem);
    gap: clamp(0.35rem, 1vw, 0.5rem);
    border-radius: clamp(1.25rem, 4.5vw, 28px);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero:hover {
    font-size: clamp(0.8rem, 1.65vw, 0.94rem);
    font-weight: 500;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero .btn-arrow {
    width: clamp(0.98rem, 2.65vw, 1.16rem);
    height: clamp(0.98rem, 2.65vw, 1.16rem);
    flex-shrink: 0;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero .btn-arrow svg {
    width: clamp(0.68rem, 1.85vw, 0.82rem);
    height: clamp(0.68rem, 1.85vw, 0.82rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-csam-started .btn-arrow,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-deepfake-started .btn-arrow {
    width: auto;
    height: auto;
    flex-shrink: 0;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-csam-started .btn-arrow svg,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-deepfake-started .btn-arrow svg {
    width: clamp(0.82rem, 2.25vw, 0.98rem);
    height: clamp(0.82rem, 2.25vw, 0.98rem);
    transform: translate(-0.02rem, -0.02rem);
  }
}

/* Index government — iPad Pro portrait (834–1024): wider lede, tighter side inset, one-row equal-height CTAs */
@media (max-width: 1024px) and (min-width: 834px) and (orientation: portrait) {
  main#main:not(.page-main) .home-first-viewport .section-government-wrap,
  main#main:not(.page-main) .home-first-viewport .section-government {
    min-height: max(calc(100vw * (618 / 1922) * 1.08), 24rem);
  }

  main#main:not(.page-main) .home-first-viewport .section-government {
    padding: clamp(1.05rem, 2.35vh, 1.55rem) clamp(0.35rem, 1.25vw, 0.65rem);
    gap: clamp(0.7rem, 1.75vh, 1.05rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-heading-wrap,
  main#main:not(.page-main) .home-first-viewport .government-text-wrap {
    max-width: min(46rem, 92vw);
    padding-left: clamp(0.15rem, 0.65vw, 0.4rem);
    padding-right: clamp(0.15rem, 0.65vw, 0.4rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-heading__line {
    font-size: calc(clamp(0.82rem, 0.45rem + 1.05vw, 1.08rem) + 3px);
    letter-spacing: 0.13em;
  }

  main#main:not(.page-main) .home-first-viewport .government-heading__name {
    margin-top: 0.32em;
    font-size: calc(clamp(1.35rem, 0.75rem + 3.8vw, 1.95rem) + 3px);
    line-height: 1.08;
  }

  main#main:not(.page-main) .home-first-viewport .government-text-wrap {
    gap: clamp(0.65rem, 1.5vw, 0.95rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-text {
    font-size: calc(clamp(0.92rem, 0.55rem + 1.25vw, 1.42rem) + 1px);
    line-height: 1.52;
    margin-top: 0.28rem;
    margin-bottom: 0;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: clamp(0.65rem, 1.45vw, 1.05rem);
    margin-top: 0.78rem;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-csam-started,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-deepfake-started,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero {
    min-width: clamp(7rem, 14.5vw, 8.85rem);
    flex: 0 1 auto;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1.2;
    padding: clamp(0.52rem, 1.35vw, 0.68rem) clamp(0.92rem, 2.35vw, 1.35rem);
    font-size: clamp(0.75rem, 1.5vw, 0.88rem);
    gap: clamp(0.35rem, 1vw, 0.5rem);
    border-radius: clamp(1.25rem, 4.5vw, 28px);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero:hover {
    font-size: clamp(0.78rem, 1.58vw, 0.92rem);
    font-weight: 500;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero .btn-arrow {
    width: clamp(0.98rem, 2.65vw, 1.16rem);
    height: clamp(0.98rem, 2.65vw, 1.16rem);
    flex-shrink: 0;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero .btn-arrow svg {
    width: clamp(0.68rem, 1.85vw, 0.82rem);
    height: clamp(0.68rem, 1.85vw, 0.82rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-csam-started .btn-arrow,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-deepfake-started .btn-arrow {
    width: auto;
    height: auto;
    flex-shrink: 0;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-csam-started .btn-arrow svg,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-deepfake-started .btn-arrow svg {
    width: clamp(0.82rem, 2.25vw, 0.98rem);
    height: clamp(0.82rem, 2.25vw, 0.98rem);
    transform: translate(-0.02rem, -0.02rem);
  }
}

/* Index government — iPad Air portrait (768–833): match Pro portrait TAP band */
@media (max-width: 833px) and (min-width: 768px) and (orientation: portrait) {
  main#main:not(.page-main) .home-first-viewport .section-government-wrap,
  main#main:not(.page-main) .home-first-viewport .section-government {
    min-height: max(calc(100vw * (618 / 1922) * 1), 22.5rem);
  }

  main#main:not(.page-main) .home-first-viewport .section-government {
    padding: clamp(1.05rem, 2.35vh, 1.55rem) clamp(0.35rem, 1.25vw, 0.65rem);
    gap: clamp(0.7rem, 1.75vh, 1.05rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-heading-wrap,
  main#main:not(.page-main) .home-first-viewport .government-text-wrap {
    max-width: min(42rem, 90vw);
    padding-left: clamp(0.15rem, 0.65vw, 0.4rem);
    padding-right: clamp(0.15rem, 0.65vw, 0.4rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-heading__line {
    font-size: calc(clamp(0.82rem, 0.45rem + 1.05vw, 1.08rem) + 3px);
    letter-spacing: 0.13em;
  }

  main#main:not(.page-main) .home-first-viewport .government-heading__name {
    margin-top: 0.32em;
    font-size: calc(clamp(1.35rem, 0.75rem + 3.8vw, 1.95rem) + 3px);
    line-height: 1.08;
  }

  main#main:not(.page-main) .home-first-viewport .government-text-wrap {
    gap: clamp(0.65rem, 1.5vw, 0.95rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-text {
    font-size: clamp(0.92rem, 0.55rem + 1.25vw, 1.42rem);
    line-height: 1.52;
    margin-top: 0.28rem;
    margin-bottom: 0;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: clamp(0.65rem, 1.45vw, 1.05rem);
    margin-top: 0.78rem;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-csam-started,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-deepfake-started,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero {
    min-width: clamp(7.35rem, 16.75vw, 9.15rem);
    flex: 0 1 auto;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1.2;
    padding: clamp(0.52rem, 1.35vw, 0.68rem) clamp(1rem, 2.65vw, 1.45rem);
    font-size: clamp(0.72rem, 1.55vw, 0.86rem);
    gap: clamp(0.35rem, 1vw, 0.5rem);
    border-radius: clamp(1.25rem, 4.5vw, 28px);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero:hover {
    font-size: clamp(0.75rem, 1.62vw, 0.9rem);
    font-weight: 500;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero .btn-arrow {
    width: clamp(0.98rem, 2.65vw, 1.16rem);
    height: clamp(0.98rem, 2.65vw, 1.16rem);
    flex-shrink: 0;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero .btn-arrow svg {
    width: clamp(0.68rem, 1.85vw, 0.82rem);
    height: clamp(0.68rem, 1.85vw, 0.82rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-csam-started .btn-arrow,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-deepfake-started .btn-arrow {
    width: auto;
    height: auto;
    flex-shrink: 0;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-csam-started .btn-arrow svg,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-deepfake-started .btn-arrow svg {
    width: clamp(0.82rem, 2.25vw, 0.98rem);
    height: clamp(0.82rem, 2.25vw, 0.98rem);
    transform: translate(-0.02rem, -0.02rem);
  }
}

@media (max-width: 640px) {
  main#main:not(.page-main) .home-first-viewport .government-heading__name {
    font-size: clamp(1.1rem, 0.6rem + 4.2vw, 1.55rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-text-wrap {
    gap: clamp(1.35rem, 4.75vw, 2.15rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-text {
    font-size: clamp(0.8rem, 0.45rem + 1.85vw, 1rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: min(16.5rem, 88vw);
    gap: clamp(0.5rem, 2.5vw, 0.75rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-csam-started,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-deepfake-started,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero {
    width: 100%;
    max-width: min(16.5rem, 88vw);
    min-width: 0;
    padding: clamp(0.48rem, 2.4vw, 0.62rem) clamp(0.95rem, 5.5vw, 1.35rem);
    font-size: clamp(0.74rem, 3.1vw, 0.875rem);
    border-radius: clamp(1rem, 5.5vw, 1.45rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero:hover {
    font-size: clamp(0.76rem, 3.2vw, 0.9rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-csam-started .btn-arrow svg,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-deepfake-started .btn-arrow svg {
    width: clamp(0.78rem, 3.2vw, 0.94rem);
    height: clamp(0.78rem, 3.2vw, 0.94rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero .btn-arrow svg {
    width: clamp(0.7rem, 3.1vw, 0.88rem);
    height: clamp(0.7rem, 3.1vw, 0.88rem);
  }
}

.section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--text);
}

.section-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 400;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.section-text {
  margin: 0 0 1.5rem;
  max-width: 600px;
  line-height: 1.6;
  color: var(--text-muted);
}

.section-assurance {
  text-align: center;
}

.assurance-label {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.assurance-image {
  margin-top: 2rem;
  height: 80px;
  background: var(--teal-dim) center/contain no-repeat;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: opacity 0.2s;
}

.btn:hover {
  opacity: 0.9;
}

.btn-primary {
  background: var(--teal);
  color: var(--btn-text);
  border: none;
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

/* CTA + footer: stacked with no sibling gap (avoids seam between </main> and footer) */
.cta-footer-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* CTA band — full-bleed background art (assets/CTA.svg?v=… in HTML); main page bg (#0f1118), not --bg-alt */
.section-cta-wrap {
  position: relative;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: clamp(-2.25rem, -4vw, -1.25rem);
  margin-bottom: 0;
  overflow: hidden;
  min-height: clamp(30rem, 59vh, 54rem);
  padding: clamp(5.75rem, 12.5vw, 8.75rem) calc(var(--page-margin) * 2) clamp(5.5rem, 11.5vw, 7.75rem);
  box-sizing: border-box;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Pull bottom edge up slightly so overlap with footer covers any seam */
  margin-bottom: -6px;
}

.section-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--bg);
}

#main {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* CTA background — cover, left edge. Vertical % below 100%: keep more of image top visible, clip more off bottom (vs left bottom). Section box unchanged. */
.section-cta-bg .section-cta-vortex {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Nudge art down via object-position only (translateY was wrong direction for you) */
  object-position: left 26%;
  transform: scale(0.8) translateY(1rem);
  transform-origin: left 68%;
  display: block;
}

/* Product pages ≤767: left-origin scale(0.8) leaves empty band on the right inside the CTA — reads as page “margin” in light mode */
@media (max-width: 767px) {
  .page-main--product-hero .section-cta-bg .section-cta-vortex {
    transform: none;
    object-position: center 32%;
    transform-origin: center center;
  }
}

.section-cta-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: clamp(2.25rem, 5.5vh, 4.5rem) auto 0;
  box-sizing: border-box;
  text-align: center;
}

/* CTA kicker — “Join the movement…” (index, product, deepfake, what-we-are-not) */
.section-cta-inner .section-cta-kicker {
  font-family: 'Azeret Mono', monospace;
  font-size: 1.78rem;
  font-weight: 300;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--government-kicker);
  -webkit-text-fill-color: var(--government-kicker);
  text-align: center;
  margin: 0 auto 1.65rem;
}

.section-cta-title {
  margin: 0;
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(2.06rem, 4.9vw, 2.95rem);
  font-weight: 400;
  line-height: 1.22;
  color: var(--cta-title);
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.section-cta-title-line {
  display: block;
  color: var(--cta-line);
  font-weight: 400;
}

.section-cta-title-gradient {
  display: block;
  margin-top: 0.22em;
  font-weight: 450;
  letter-spacing: -0.02em;
}

.section-cta-lede {
  margin: 1.25rem 0 0;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(0.98rem, 1.88vw, 1.12rem);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(241, 245, 249, 0.82);
}

.section-cta-button {
  margin-top: 2.5rem;
  display: inline-flex;
  font-size: 1.63rem;
}

/* CTA band — portrait: shorter min-height + vertical padding + inner offset (landscape uses .section-cta-wrap base above). */
@media (orientation: portrait) {
  .section-cta-wrap {
    min-height: clamp(22rem, 46vh, 40rem);
    padding: clamp(4rem, 9.5vw, 7rem) calc(var(--page-margin) * 2) clamp(3.85rem, 9vw, 6.35rem);
  }

  .section-cta-inner {
    margin: clamp(1.2rem, 3.35vh, 3rem) auto 0;
  }
}

.section-cta-inner .btn-hero.section-cta-button:hover {
  font-size: 1.71rem;
}

/* “BOOK A 1:1 CALL” CTA: black label + outlined arrow; hover = white arrow on black-filled circle */
.section-cta-inner .btn-hero.section-cta-button,
.section-cta-inner .btn-hero.section-cta-button:hover {
  color: #000;
  -webkit-text-fill-color: #000;
}

.section-cta-inner .btn-hero.section-cta-button .btn-arrow {
  color: #000;
  border-color: #000;
  background: transparent;
}

.section-cta-inner .btn-hero.section-cta-button:hover .btn-arrow {
  background: #0a0a0a;
  border: 1px solid #0a0a0a;
  color: #fff;
}

.section-cta-inner .btn-hero.section-cta-button:hover .btn-arrow svg {
  width: 1.02rem;
  height: 1.02rem;
  stroke: #fff;
}

/* Bottom CTA band: scale type + pill below 1281 (index, product, deepfake, what-we-are-not) */
@media (max-width: 1280px) {
  .section-cta-inner .section-cta-kicker {
    font-size: clamp(1.05rem, 2.48vw, 1.62rem);
    letter-spacing: 0.15em;
    margin-bottom: clamp(1rem, 2.2vw, 1.65rem);
  }

  .section-cta-inner .section-cta-title {
    font-size: clamp(1.58rem, 3.95vw, 2.65rem);
  }

  .section-cta-inner .section-cta-lede {
    font-size: clamp(0.88rem, 1.6vw, 1.06rem);
  }

  .section-cta-inner .section-cta-button {
    margin-top: clamp(1.65rem, 4vw, 2.5rem);
  }

  .section-cta-inner .btn-hero.section-cta-button {
    font-size: clamp(0.98rem, 2.08vw, 1.42rem);
    padding: clamp(0.42rem, 1vw, 0.55rem) clamp(1.35rem, 3.5vw, 2.2rem);
    gap: clamp(0.5rem, 1.25vw, 0.72rem);
    border-radius: clamp(22px, 4.5vw, 30px);
  }

  .section-cta-inner .btn-hero.section-cta-button::before {
    border-radius: clamp(22px, 4.5vw, 30px);
  }

  .section-cta-inner .btn-hero.section-cta-button:hover {
    font-size: clamp(1.02rem, 2.18vw, 1.48rem);
  }

  .section-cta-inner .btn-hero.section-cta-button .btn-arrow {
    width: clamp(1.14rem, 2.8vw, 1.52rem);
    height: clamp(1.14rem, 2.8vw, 1.52rem);
  }

  .section-cta-inner .btn-hero.section-cta-button .btn-arrow svg {
    width: clamp(0.75rem, 1.72vw, 0.96rem);
    height: clamp(0.75rem, 1.72vw, 0.96rem);
  }

  .section-cta-inner .btn-hero.section-cta-button:hover .btn-arrow svg {
    width: clamp(0.8rem, 1.82vw, 1.02rem);
    height: clamp(0.8rem, 1.82vw, 1.02rem);
  }
}

/* Portrait CTA copy spacing — after ≤1280 so kicker + button margins beat that block. */
@media (orientation: portrait) {
  .section-cta-inner .section-cta-kicker {
    margin: 0 auto clamp(0.95rem, 2vw, 1.4rem);
  }

  .section-cta-inner .section-cta-button {
    margin-top: clamp(1.75rem, 3.5vw, 2.25rem);
  }
}

/* CTA — phablet only (431–767px): smaller kicker / title / lede / pill than ≤1280 band. Other widths unchanged. */
@media (max-width: 767px) and (min-width: 441px) {
  .section-cta-inner .section-cta-kicker {
    font-size: clamp(0.9rem, 2.05vw, 1.38rem);
    letter-spacing: 0.12em;
  }

  .section-cta-inner .section-cta-title {
    font-size: clamp(1.4rem, 3.55vw, 2.18rem);
  }

  .section-cta-inner .section-cta-lede {
    font-size: clamp(0.88rem, 1.55vw, 1.06rem);
  }

  .section-cta-inner .btn-hero.section-cta-button {
    font-size: clamp(0.82rem, 1.82vw, 1.22rem);
  }

  .section-cta-inner .btn-hero.section-cta-button:hover {
    font-size: clamp(0.86rem, 1.92vw, 1.28rem);
  }

  .section-cta-inner .btn-hero.section-cta-button .btn-arrow {
    width: clamp(1rem, 2.45vw, 1.32rem);
    height: clamp(1rem, 2.45vw, 1.32rem);
  }

  .section-cta-inner .btn-hero.section-cta-button .btn-arrow svg {
    width: clamp(0.68rem, 1.52vw, 0.88rem);
    height: clamp(0.68rem, 1.52vw, 0.88rem);
  }

  .section-cta-inner .btn-hero.section-cta-button:hover .btn-arrow svg {
    width: clamp(0.72rem, 1.62vw, 0.92rem);
    height: clamp(0.72rem, 1.62vw, 0.92rem);
  }
}

/* Site footer — full-bleed navy; overlap CTA slightly so body bg can’t show in subpixel seam */
.site-footer {
  position: relative;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: -28px;
  margin-bottom: 0;
  box-sizing: border-box;
  background: var(--bg-alt);
  border-top: none;
  --footer-pad-y: clamp(3.25rem, 6.5vw, 4.75rem);
  --footer-pad-bottom: clamp(1.25rem, 2.5vw, 2rem);
  padding-top: calc(var(--footer-pad-y) + 28px);
  padding-right: var(--page-margin);
  padding-bottom: var(--footer-pad-bottom);
  padding-left: var(--page-margin);
}

/*
 * Product pages (CSAM + Deepfake): CTA + footer — same bleed math as .product-hero / duotone (not 100vw + 50%−50vw),
 * which leaves a persistent body‑bg strip when body uses horizontal padding (deepfake showed it; CSAM masked via narrower body :has margin).
 */
.page-main--product-hero .section-cta-wrap,
.page-main--product-hero .site-footer {
  width: calc(100% + 2 * var(--page-margin)) !important;
  max-width: none !important;
  margin-left: calc(-1 * var(--page-margin)) !important;
  margin-right: calc(-1 * var(--page-margin)) !important;
}

.site-footer-inner {
  max-width: min(1320px, 100%);
  margin: 0 auto;
}

/* Logo + icons (stacked) | four link columns */
.site-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* Wider space logo ↔ nav only; nav column spacing unchanged (see .site-footer-nav) */
  column-gap: clamp(3.25rem, 8vw, 5.75rem);
  row-gap: clamp(1.75rem, 4vw, 2.5rem);
  width: 100%;
  padding-bottom: clamp(3rem, 5.25vw, 4rem);
  border-bottom: 1px solid rgba(51, 65, 85, 0.6);
}

.site-footer-brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  flex-shrink: 0;
}

.site-footer-logo-link {
  display: inline-block;
  line-height: 0;
}

.site-footer-logo {
  height: auto;
  width: clamp(6.25rem, 20vw, 8rem);
  display: block;
}

/* Phablet/phone: single-column stack (shown ≤767px). Desktop/tablet: hidden. */
.site-footer-mobile-stack {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Flex + space-between: equal space *between* the four blocks (not equal-width cells), so Menu↔Products
   isn’t a huge empty slab and Company↔Resources doesn’t get a false “Articles is miles away” gap */
.site-footer-nav {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  row-gap: clamp(1.75rem, 3.5vw, 2.25rem);
}

.site-footer-nav-columns {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  row-gap: clamp(1.75rem, 3.5vw, 2.25rem);
}

.site-footer-col {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
}

.site-footer-heading {
  margin: 0 0 0.85rem;
  font-family: 'Azeret Mono', monospace;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.site-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer-links li + li {
  margin-top: 0.65rem;
}

.site-footer-links a {
  font-family: 'Azeret Mono', monospace;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}

/* One line per link on desktop so “DEEPFAKE DETECTION” doesn’t read as two items */
@media (min-width: 769px) {
  .site-footer-nav .site-footer-links a {
    white-space: nowrap;
  }
}

.site-footer-links a:hover {
  color: #79ffea;
}

.site-footer-link-tight {
  letter-spacing: 0.04em;
}

.site-footer-col--cta {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.site-footer-cta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
  width: 100%;
  max-width: 14rem;
}

.site-footer-cta .btn-csam-started,
.site-footer-cta .btn-deepfake-started {
  margin-top: 0;
  margin-left: 0;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  font-size: 0.88rem;
  padding: 0.55rem 1.25rem;
  gap: 0.42rem;
}

.site-footer-cta .btn-csam-started .btn-arrow svg,
.site-footer-cta .btn-deepfake-started .btn-arrow svg {
  width: 0.95rem;
  height: 0.95rem;
  transform: translate(-0.02rem, -0.05rem);
}

.site-footer-cta .btn-csam-started:hover .btn-arrow svg,
.site-footer-cta .btn-deepfake-started:hover .btn-arrow svg {
  transform: translate(0.08rem, -0.05rem);
}

/* Footer CONTACT + TAP LOGIN — larger pills on desktop only */
@media (min-width: 1367px) {
  .site-footer-cta {
    max-width: 20rem;
    gap: 0.85rem;
  }

  .site-footer-cta .btn-csam-started,
  .site-footer-cta .btn-deepfake-started {
    font-size: 1rem;
    padding: 0.72rem 2.05rem;
    gap: 0.5rem;
  }

  .site-footer-cta .btn-csam-started .btn-arrow svg,
  .site-footer-cta .btn-deepfake-started .btn-arrow svg {
    width: 1.09rem;
    height: 1.09rem;
  }
}

.site-footer-social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-top: -0.3rem;
}

.site-footer-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: 50%;
  /* Match copyright line (.site-footer-copyright uses var(--text-muted)) */
  border: 1px solid rgba(148, 163, 184, 0.45); /* ~ --text-muted #94a3b8 */
  background: var(--bg-alt);
  color: var(--text-muted);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease,
    transform 0.2s ease;
  line-height: 0;
}

.site-footer-icon-link:hover {
  color: #79ffea;
  border-color: #79ffea;
  background: var(--bg-alt);
}

.site-footer-icon {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
}

.site-footer-icon--mail {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Below nav rule: TOS / Privacy (left), copyright (right); icons share same right edge as copyright via .site-footer-inner width + margin-left: auto */
.site-footer-legal {
  padding-top: clamp(1rem, 2.25vw, 1.35rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.5rem;
  font-family: 'Open Sans', var(--font);
}

.site-footer-legal-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
}

.site-footer-legal-left a {
  font-family: 'Open Sans', var(--font);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  letter-spacing: normal;
  text-transform: none;
}

.site-footer-legal-left a:hover {
  color: #79ffea;
}

.site-footer-copyright {
  font-family: 'Open Sans', var(--font);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-muted);
  margin: 0;
  margin-left: auto;
  text-align: right;
  line-height: 1.4;
  flex: 0 0 auto;
}

@media (max-width: 520px) {
  .site-footer-legal {
    flex-direction: column;
    align-items: stretch;
  }

  .site-footer-copyright {
    margin-left: 0;
    width: 100%;
    text-align: right;
  }

  .site-footer-top {
    flex-direction: column;
    align-items: stretch;
    gap: 1.75rem;
  }

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

@media (max-width: 768px) {
  .site-footer-nav-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: none;
    width: 100%;
    column-gap: clamp(1.5rem, 4vw, 2.5rem);
    row-gap: clamp(1.75rem, 3.5vw, 2.25rem);
    justify-content: initial;
  }

  /* Allow wrapping in 2-col / narrow layout */
  .site-footer-nav .site-footer-links a {
    white-space: normal;
  }
}

@media (max-width: 420px) {
  .site-footer-nav-columns {
    grid-template-columns: 1fr;
  }
}

/* Footer — phone + phablet: stacked nav (no headings), icons row, logo, copyright, then legal links */
@media (max-width: 767px) {
  .site-footer {
    --footer-pad-y: clamp(1.95rem, 4.65vw, 3rem);
    padding-top: calc(var(--footer-pad-y) + 28px);
  }

  .site-footer.site-footer--standalone {
    --footer-pad-y: clamp(1.95rem, 4.65vw, 3rem);
    padding-top: var(--footer-pad-y);
  }

  .site-footer-top {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    row-gap: 0;
    padding-bottom: clamp(1.45rem, 3.85vw, 2rem);
    border-bottom: none;
  }

  .site-footer-nav {
    order: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    flex: none;
    row-gap: 0;
  }

  .site-footer-nav-columns {
    display: none;
  }

  .site-footer-mobile-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* Match .header width; centered rule instead of full-bleed border */
  .site-footer-mobile-stack li {
    margin: 0;
    border-bottom: none;
  }

  .site-footer-mobile-stack li::after {
    content: '';
    display: block;
    width: min(1520px, calc(100vw - 2 * var(--page-margin) - 2.25rem));
    max-width: 100%;
    height: 1px;
    margin-left: auto;
    margin-right: auto;
    background: rgba(148, 163, 184, 0.15);
  }

  .site-footer-mobile-stack a {
    display: block;
    padding: clamp(1.35rem, 4.55vw, 1.65rem) var(--page-margin);
    font-family: 'Azeret Mono', monospace;
    font-size: 1.125rem;
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    text-align: center;
    transition: color 0.2s ease;
  }

  .site-footer-mobile-stack a:hover {
    color: #79ffea;
  }

  .site-footer-mobile-stack li:first-child a {
    padding-top: clamp(0.15rem, 0.85vw, 0.4rem);
  }

  .site-footer-brand-col {
    order: 2;
    align-items: center;
    width: 100%;
    gap: clamp(2.3rem, 5.9vw, 2.95rem);
    padding-top: clamp(1.9rem, 5.35vw, 2.5rem);
  }

  .site-footer-social {
    order: 1;
    margin-top: 0;
    justify-content: center;
  }

  .site-footer-logo-link {
    order: 2;
  }

  .site-footer-legal {
    flex-direction: column;
    align-items: center;
    gap: clamp(0.85rem, 2.5vw, 1.1rem);
    padding-top: clamp(0.95rem, 2.75vw, 1.3rem);
  }

  .site-footer-copyright {
    order: 1;
    margin-left: 0;
    width: 100%;
    text-align: center;
  }

  .site-footer-legal-left {
    order: 2;
    justify-content: center;
    width: 100%;
    flex-wrap: nowrap;
    gap: 1rem 1.75rem;
  }

  .site-footer-legal-left a {
    color: var(--text-muted);
  }

  html[data-theme='light'] .site-footer-mobile-stack li::after {
    background: rgba(100, 116, 139, 0.19);
  }
}

/* Inner pages — no CTA overlap above footer */
.site-footer.site-footer--standalone {
  margin-top: 0;
  --footer-pad-y: clamp(3.25rem, 6.5vw, 4.75rem);
  --footer-pad-bottom: clamp(1.25rem, 2.5vw, 2rem);
  padding-top: var(--footer-pad-y);
  padding-bottom: var(--footer-pad-bottom);
}

html.page-contact .site-footer.site-footer--standalone {
  --footer-pad-bottom: clamp(2.75rem, 5.5vw, 4.5rem);
}

.page-main {
  padding-top: clamp(5.5rem, 10vw, 7.5rem);
}

/* CSAM product: hero extends to top so gradient shows behind fixed header */
.page-main--product-hero {
  padding-top: 0;
}

/*
 * CSAM + Deepfake product: horizontal gutter on #main only (body side padding confounds full-bleed calcs).
 * Applies at all widths — not nested under ≤767 — so devtools / any stack width always picks it up.
 */
body:has(#main.page-main--product-hero) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#main.page-main.page-main--product-hero {
  padding-left: var(--page-margin) !important;
  padding-right: var(--page-margin) !important;
  box-sizing: border-box !important;
  width: 100%;
  max-width: 100%;
}

/* Product pages: nav bar width follows padded header-wrap — avoid 100vw scrollbar mismatch vs layout viewport */
body:has(#main.page-main--product-hero) .header {
  width: min(1520px, 100%) !important;
}

/* Product page: main content bands use primary bg (#0f1118); no dividers between bands */
.page-main--product-hero > .page-section {
  background: var(--bg);
  border-top: none;
}

.page-main--product-hero > .page-section.page-section--duotone-noise {
  background: var(--bg-alt);
}

.page-main--product-hero > .page-section.page-section--api-split {
  padding-top: clamp(1.25rem, 3vw, 2.15rem);
  position: relative;
  z-index: 1;
}

/* Standalone API band (no duotone-noise): match .page-section--duotone-noise full-bleed + gutters so --bg
   paints edge-to-edge like the band above — avoids lighter bg-alt “showing through” at viewport sides and
   aligns horizontal inset with Model I/O / product-io. Sections that already include .page-section--duotone-noise
   inherit bleed from that rule. */
.page-main--product-hero > .page-section.page-section--api-split:not(.page-section--duotone-noise) {
  width: calc(100% + 2 * var(--page-margin));
  max-width: none;
  margin-left: calc(-1 * var(--page-margin));
  margin-right: calc(-1 * var(--page-margin));
  padding-left: calc(var(--page-margin) * 2);
  padding-right: calc(var(--page-margin) * 2);
  box-sizing: border-box;
}

/* Same column width + inset as home landing; duotone / product bands use --page-text-inset-left with hero */
.page-main--product-hero > .page-section:not(.page-section--duotone-noise) .page-inner {
  max-width: min(1600px, 100%);
  padding-left: var(--page-text-inset-left);
  padding-right: var(--page-text-inset-left);
  box-sizing: border-box;
}

.page-hero {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) var(--page-margin) clamp(3rem, 6vw, 4.5rem);
  max-width: min(56rem, 100%);
  margin: 0 auto;
}

.page-kicker {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 1rem;
}

.page-hero-title {
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 1.25rem;
}

.page-hero-lead {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--text-muted);
  max-width: 36rem;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

/* What we aren’t: clip any horizontal spill (nowrap titles / chart min-widths / 100vw quirks). “Visible” overflow
   was letting scrollWidth grow and mobile Chrome rubber-banded / felt like endless zoom. */
html.page-what-we-are-not {
  overflow-x: clip !important;
  max-width: 100%;
}

html.page-what-we-are-not .page-main,
html.page-what-we-are-not #main {
  overflow-x: clip;
  overflow-y: visible !important;
  max-width: 100%;
}

/* Same as index `<main>` (no .page-main) + product `page-main--product-hero`: hero owns top inset */
html.page-what-we-are-not .page-main {
  padding-top: 0;
}

/* This page only: remove body side padding so the hero + full-bleed bands paint to the viewport.
   Global `body { padding: 0 var(--page-margin) }` + `width: calc(100% + 2*)` bleed was still leaving
   visible gutters in Chrome (flex hero / containing-block quirks). Sections keep rhythm via
   `.page-section` / `.what-not-*` horizontal padding and `.header-wrap` padding. */
html.page-what-we-are-not body {
  padding-left: 0;
  padding-right: 0;
  overflow-x: clip;
  max-width: 100%;
}

/*
 * What we aren't — hero: optional sky tint on section; full-viewport art on ::before (cover + bottom anchor);
 * grain on ::after. Design art in Figma at 2560×1440 (or 1920×1080); ~16:9 works well with cover on laptops;
 * keep focal content inside ~center 60% — tall phones crop the sides.
 */
.what-not-hero {
  /* Grain (::after): long ramp so noise fades before next section */
  --what-not-hero-bottom-fade: linear-gradient(
    to bottom,
    #000 0%,
    #000 8%,
    rgba(0, 0, 0, 0.96) 22%,
    rgba(0, 0, 0, 0.78) 36%,
    rgba(0, 0, 0, 0.48) 52%,
    rgba(0, 0, 0, 0.22) 68%,
    rgba(0, 0, 0, 0.07) 82%,
    rgba(0, 0, 0, 0.02) 92%,
    transparent 100%
  );
  /* Full-frame hero art (::before): luminance mask — white = show; fade bottom only (art already includes sky). */
  --what-not-hero-art-mask: linear-gradient(
    to bottom,
    #fff 0%,
    #fff 72%,
    #e8e8e8 82%,
    #7a7a7a 91%,
    #000 100%
  );
  position: relative;
  isolation: isolate;
  /* Same bleed as .product-hero — NOT 100vw + 50%−50vw (that leaves a strip of body bg at each edge; see .product-hero comment). */
  width: calc(100% + 2 * var(--page-margin)) !important;
  max-width: none !important;
  margin-left: calc(-1 * var(--page-margin)) !important;
  margin-right: calc(-1 * var(--page-margin)) !important;
  text-align: left;
  /* No horizontal padding here — it lives on .what-not-hero__inner; art lives on ::before. */
  padding-left: 0;
  padding-right: 0;
  padding-top: clamp(3.85rem, 5.35vh, 5.35rem);
  padding-bottom: 4rem;
  min-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-x: visible;
  /* No max-height: keeps hills + copy in one flow; document scroll only (was a 100dvh cage + huge translateY). */
  overflow-y: hidden;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, rgba(213, 255, 250, 0.07) 0%, transparent 40%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.what-not-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url('assets/hills.svg?v=hills3');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  -webkit-mask-image: var(--what-not-hero-art-mask);
  mask-image: var(--what-not-hero-art-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.what-not-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.075;
  background-image: url('assets/Noise.svg?v=n3'), url('assets/Noise.svg?v=n3');
  background-repeat: repeat, repeat;
  /* Larger tiles + offset layers → bigger, more separated grain specks */
  background-size: 384px 384px, 256px 256px;
  background-position: 0 0, 131px 97px;
  mix-blend-mode: soft-light;
  -webkit-mask-image: var(--what-not-hero-bottom-fade);
  mask-image: var(--what-not-hero-bottom-fade);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

html[data-theme='light'].page-what-we-are-not .what-not-hero {
  background-color: var(--bg);
  background-image: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

html[data-theme='light'].page-what-we-are-not .what-not-hero::before {
  background-image: url('assets/light/hills.svg?v=hills2');
}

html[data-theme='light'].page-what-we-are-not .what-not-hero::after {
  background-image: url('assets/light/Noise.svg?v=n3'), url('assets/light/Noise.svg?v=n3');
  background-repeat: repeat, repeat;
  background-size: 384px 384px, 256px 256px;
  background-position: 0 0, 131px 97px;
  opacity: 0.3;
  mix-blend-mode: multiply;
}

/*
 * Hero-only: tie width to the viewport, not just main — compare band below already reads full-bleed;
 * this section can still compute narrower (flex / % quirks), which leaves “gutters” beside the hills.
 */
html.page-what-we-are-not .what-not-hero {
  /* Override base .what-not-hero min-height:100dvh — iOS still animates dvh with the chrome; svh is stable here. */
  min-height: 100svh;
  /* Body has no horizontal padding on this page — 100% avoids 100vw vs scrollbar / dual-pane layout bugs. */
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  /* Full-frame SVGs include sky; don’t double-tint with the legacy hero wash. */
  background-image: none !important;
  /* Don’t clip-x here — nowrap desktop headline + gradient span paint past the copy column edge; clip was cutting “detection…”. */
  overflow-x: visible !important;
  overflow-y: visible !important;
  /*
   * Main uses padding-top:0 here (like product heroes). Without at least ~.page-main’s inset, the first
   * hero line can sit under the fixed header — reads as “clipped” ascenders in both light and dark.
   */
  padding-top: calc(
    env(safe-area-inset-top, 0px) + max(clamp(3.85rem, 5.35svh, 5.35rem), clamp(5.65rem, 10vw, 7.85rem))
  ) !important;
  /* Extra bottom space so mask fade + next section don’t read cramped (svh: stable vs iOS toolbar) */
  padding-bottom: clamp(5rem, 9svh, 7rem) !important;
}

/* Avoid flex min-height:0 letting the grid shrink vs content (perceived ascender / line-box clip). */
html.page-what-we-are-not .what-not-hero__inner {
  min-height: auto !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  /* Pull headline, CTA, and mesh up together — rem-only (svh caused post-load jump on iPad when chrome settled). */
  margin-top: calc(-1 * clamp(1.5rem, 2.25rem, 3rem));
}

/* Extra line-box room + copy stacks above the mesh column if columns ever overlap at some widths. */
html.page-what-we-are-not .what-not-hero__copy {
  padding-top: clamp(0.6rem, 0.85rem, 1.05rem);
  padding-bottom: clamp(1.25rem, 2.75vw, 2.5rem);
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/*
 * What we aren’t — ≤767 portrait: hero ::before hills used background-size:cover in a tall narrow 100svh band —
 * cover scales to fill height and crops hard horizontally (“super zoomed” mesh-like blur). Fit width instead;
 * mesh canvas is separate (static frame ≤1024 in what-not-landscape-mesh.js).
 *
 * ≤767 wide / landscape (e.g. Surface Duo 720×540): keep cover so hills read edge-to-edge like ≥768 / iPad Pro;
 * 100% auto was still active there and left visible side bands vs body bg. Portrait ≤767 unchanged.
 */
@media (max-width: 767px) and (orientation: portrait) {
  html.page-what-we-are-not .what-not-hero::before {
    background-size: 100% auto;
    background-position: center bottom;
  }

  html[data-theme='light'].page-what-we-are-not .what-not-hero::before {
    background-size: 100% auto;
    background-position: center bottom;
  }
}

/*
 * Phablet portrait (431–767): hills back to cover so the art fills the hero band behind copy + CTA. The generic ≤767
 * portrait rule uses 100% auto (tall phones); that + heavy copy nudge read as a white strip above the wave on ~755px wide.
 */
@media (max-width: 767px) and (min-width: 441px) and (orientation: portrait) {
  html.page-what-we-are-not .what-not-hero::before,
  html[data-theme='light'].page-what-we-are-not .what-not-hero::before {
    background-size: cover;
    background-position: center bottom;
  }
}

@media (max-width: 767px) and (orientation: landscape),
  (max-width: 767px) and (min-aspect-ratio: 1/1) {
  html.page-what-we-are-not .what-not-hero::before {
    background-size: cover;
    background-position: center bottom;
  }

  html[data-theme='light'].page-what-we-are-not .what-not-hero::before {
    background-size: cover;
    background-position: center bottom;
  }
}

.what-not-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, min(40rem, 42vw));
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
  overflow: visible;
  width: 100%;
  /* Border-box max includes side padding so the grid still caps at 1600px content (was on .what-not-hero). */
  max-width: min(calc(1600px + 4 * var(--page-margin)), 100%);
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  padding-top: clamp(0.65rem, 1.35vh, 1.35rem);
  padding-left: calc(var(--page-margin) * 2);
  padding-right: calc(var(--page-margin) * 2);
  box-sizing: border-box;
}

.what-not-hero__copy {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  margin-top: 7.25rem;
  /* Tiny top pad so gradient H1 isn’t flush against the grid/track edge (reduces perceived ascender clip) */
  padding-top: clamp(0.2rem, 0.45vh, 0.45rem);
  padding-left: var(--page-text-inset-left);
  padding-right: 0;
  overflow: visible;
  overflow-x: visible;
  position: relative;
  z-index: 3;
  background: transparent;
}

.what-not-hero .product-hero__deepfake-line:first-of-type {
  margin-bottom: clamp(0.85rem, 1.65vw, 1.35rem);
}

.what-not-hero .product-hero__deepfake-line--semibold {
  margin-bottom: clamp(1.85rem, 3.5vw, 2.85rem);
}

/* Three lines total, one per element; width max-content avoids nowrap clipping in the grid column */
.what-not-hero .product-hero__deepfake-line {
  display: block;
  box-sizing: border-box;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  font-size: clamp(1.35rem, 2.25vw, 2.2rem);
  line-height: 1.4;
  width: max-content;
  max-width: none;
  filter: none;
  overflow: visible;
  overflow-x: visible;
}

.what-not-hero .page-cta-actions {
  margin-top: clamp(0.35rem, 1vw, 0.85rem);
  justify-content: flex-start;
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
}

.what-not-hero__visual {
  position: relative;
  z-index: 0;
  justify-self: end;
  width: 100%;
  max-width: min(52rem, 100%);
  overflow: visible;
  margin-top: clamp(4.35rem, 6.65vw, 6.35rem);
  transform: translateX(clamp(0.45rem, 1.2vw, 1.1rem));
}

/* Narrow viewports: mesh column layout is isolated so canvas bitmap / internal reflow doesn’t reshuffle hero siblings. */
@media (max-width: 1024px) {
  html.page-what-we-are-not .what-not-hero__visual {
    contain: layout;
  }
}

.what-not-hero__canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  background: transparent;
}

/* What we aren’t hero — laptop landscape (≤1727): sit higher than full-width desktop; not the deepfake product page */
@media (max-width: 1727px) and (min-width: 1367px) and (orientation: landscape) {
  .what-not-hero {
    padding-top: clamp(2.85rem, 4.65vh, 4.25rem);
  }

  .what-not-hero__inner {
    padding-top: clamp(0.85rem, 1.45vh, 1.45rem);
  }

  .what-not-hero__copy {
    margin-top: clamp(7rem, 12vh, 8.35rem);
  }

  .what-not-hero__visual {
    margin-top: clamp(3.65rem, 5.5vw, 5.35rem);
  }
}

/* What we aren’t hero — 1367–1688 landscape (e.g. 1688×803): tighter still vs ≥1728 */
@media (max-width: 1688px) and (min-width: 1367px) and (orientation: landscape) {
  .what-not-hero {
    padding-top: clamp(2.45rem, 4.15vh, 3.85rem);
  }

  .what-not-hero__inner {
    padding-top: clamp(0.65rem, 1.1vh, 1.15rem);
  }

  .what-not-hero__copy {
    margin-top: clamp(6rem, 10vh, 7.35rem);
  }

  .what-not-hero__visual {
    margin-top: clamp(3.15rem, 4.5vw, 4.65rem);
  }
}

/* What we aren’t hero — ~1600px band: nudge mesh right with only a modest column/canvas trim vs full-width */
@media (max-width: 1680px) and (min-width: 1367px) {
  .what-not-hero__inner {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, min(37rem, 39vw));
    gap: clamp(1.25rem, 2.35vw, 2rem);
  }

  .what-not-hero__visual {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    max-width: min(100%, 48rem);
    transform: translateX(clamp(1.1rem, 3.25vw, 2.65rem));
  }

  .what-not-hero__canvas {
    width: min(100%, 40rem);
    max-width: 100%;
    height: auto;
    margin-left: auto;
  }
}

/* What we aren’t hero: ≤1366 only — product-hero bleed + gutters + tighter vertical padding (does not affect ≥1367) */
@media (max-width: 1366px) {
  .what-not-hero {
    position: relative;
    isolation: isolate;
    display: block;
    /* Wider than .product-hero @ ≤1366 (1.5×): gutters live on .what-not-hero__inner — hero band stays full-bleed */
    padding: 2.95rem 0 3.5rem;
    overflow-x: visible;
    overflow-y: hidden;
  }

  .what-not-hero__inner {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    align-items: flex-start;
    box-sizing: border-box;
    min-height: 0;
    padding-top: clamp(1.1rem, 2.1vh, 1.85rem);
    padding-left: calc(var(--page-margin) * 2);
    padding-right: calc(var(--page-margin) * 2);
  }

  .what-not-hero__copy {
    text-align: left;
    padding-top: 0;
    padding-left: var(--page-text-inset-left);
    padding-right: 0;
    /* Wins over base 14.15rem; eased back from the ultra-tight pass */
    margin-top: clamp(4.35rem, 10.5vw, 7.25rem);
  }

  .what-not-hero__visual {
    margin-top: clamp(3.75rem, 5.85vw, 5.35rem);
  }

  /* Fixed header + short bands: floor copy so the headline clears the nav (same issue as tablet portrait). */
  html.page-what-we-are-not .what-not-hero__copy {
    margin-top: max(
      clamp(3.65rem, 9.5vw, 6.65rem),
      calc(env(safe-area-inset-top, 0px) + clamp(5.25rem, 11vw, 7.25rem))
    );
  }
}

/* After the general ≤1366 what-not hero rule: restore same padding as .product-hero in wide-tablet landscape
   (see ~1991–1996). Without this, the block above overrides the shared rule and what-not drifts vs product. */
@media (max-width: 1366px) and (orientation: landscape) and (min-width: 1025px) {
  .what-not-hero {
    /* Match portrait what-not band; horizontal gutters on .what-not-hero__inner */
    padding-top: clamp(3.35rem, 6.25vh, 4.85rem);
    padding-bottom: clamp(1.75rem, 3.5vh, 2.5rem);
    padding-left: 0;
    padding-right: 0;
    min-height: 100vh;
    min-height: 100dvh;
  }
}

/* What we aren’t — tablet landscape 768–1024 (e.g. iPad mini): rem-only hero box; overrides ~4058 svh/dvh padding + min-height. */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
  html.page-what-we-are-not .what-not-hero {
    min-height: clamp(33rem, 37rem, 42rem);
    padding-top: calc(
      env(safe-area-inset-top, 0px) + max(clamp(3.85rem, 5.35rem, 5.35rem), clamp(5.65rem, 10vw, 7.85rem))
    ) !important;
    padding-bottom: clamp(5rem, 6rem, 7rem) !important;
  }
}

/*
 * What we aren’t hero — phone width ladder (CSS width):
 *
 *   ≤767px — single-column stack (mesh above copy); same boundary as product “phone” vs tablet.
 *   ≤440px — iPhone regular + Pro Max portrait in one band (~390–440 CSS px cluster).
 *   441–767px — phablet / fold / wide Android portrait (inspect: Surface Duo ~540×720 single pane).
 */
/* Phone-only stack: use 767px so iPad mini portrait (768 CSS px) keeps two-column hero + tablet portrait min-height
   (same issue as product / deepfake heroes — max-width:768px matched exactly 768 and stacked + blew vertical rhythm). */
@media (max-width: 767px) {
  .what-not-hero__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
  }

  .what-not-hero__copy {
    padding-left: clamp(2.45rem, 5.75vw, 2.95rem);
    padding-right: 2rem;
    order: 1;
    margin-top: clamp(2.85rem, 7vw, 4.55rem);
  }

  .what-not-hero .product-hero__title--deepfake,
  .what-not-hero .product-hero__deepfake-line {
    margin-left: auto;
    margin-right: auto;
  }

  .what-not-hero .product-hero__title.product-hero__title--deepfake {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .what-not-hero .what-not-hero__heading-text {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .what-not-hero .product-hero__deepfake-line {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .what-not-hero .page-cta-actions {
    justify-content: center;
  }

  .what-not-hero__visual {
    justify-self: center;
    order: -1;
    max-width: min(46rem, 98vw);
    margin-top: 0;
    padding: clamp(2.15rem, 5.85vw, 3.15rem) 2rem 0;
  }

  html.page-what-we-are-not .what-not-hero__inner {
    margin-top: calc(-1 * clamp(0.65rem, 1.05rem, 1.5rem));
  }
}

/* What we aren’t hero — phablet / wide phone (431–767px, e.g. Surface Duo ~540×720 single pane). Typography + insets + centered hero. */
@media (max-width: 767px) and (min-width: 441px) {
  /* Match CSAM / deepfake product `body:has(#main.page-main--product-hero …)` gutters at ≤767 (this band only). */
  html.page-what-we-are-not body {
    --page-margin: clamp(0.65rem, 3vw, 1rem);
    --page-text-inset-left: clamp(0.75rem, 3.35vw, 1.15rem);
  }

  /* Centering applies only in this band — viewports ≤430, ≥768, and tablet portrait/landscape are unchanged here. */
  html.page-what-we-are-not .what-not-hero {
    text-align: center;
    /* Keep enough top band to clear the fixed header without hollowing the mid-hero vs hills (::before). */
    padding-top: calc(
      env(safe-area-inset-top, 0px) + max(clamp(2.35rem, 4.25svh, 3.25rem), clamp(4.25rem, 8.25vw, 6.15rem))
    ) !important;
    padding-bottom: clamp(5.5rem, 10svh, 7.5rem) !important;
  }

  html.page-what-we-are-not .what-not-hero__inner {
    justify-items: center;
    padding-left: clamp(0.75rem, 3.35vw, 1.15rem);
    padding-right: clamp(0.75rem, 3.35vw, 1.15rem);
    margin-top: calc(-1 * clamp(1rem, 2.5vw, 2rem));
  }

  html.page-what-we-are-not .what-not-hero .page-cta-actions {
    justify-content: center;
  }

  html.page-what-we-are-not .what-not-hero .product-hero__title.product-hero__title--deepfake,
  html.page-what-we-are-not .what-not-hero .product-hero__deepfake-line {
    margin-left: auto;
    margin-right: auto;
  }

  html.page-what-we-are-not .what-not-hero .product-hero__title.product-hero__title--deepfake {
    font-size: clamp(1.42rem, 3.15vw, 2.08rem);
    line-height: 1.5;
    margin-bottom: clamp(0.95rem, 2.4vw, 1.45rem);
  }

  html.page-what-we-are-not .what-not-hero .product-hero__deepfake-line {
    font-size: clamp(1.05rem, 2.35vw, 1.22rem);
    line-height: 1.4;
  }

  html.page-what-we-are-not .what-not-hero .product-hero__deepfake-line--semibold {
    font-size: clamp(1.08rem, 2.45vw, 1.26rem);
  }

  html.page-what-we-are-not .what-not-hero__copy {
    text-align: center;
    /* Inset lives on .what-not-hero__inner — avoid double gutters that narrow type vs product phablet. */
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    /* Strong pull up toward mesh (phablet 431–767; tail matches). */
    margin-top: clamp(-7.35rem, -17.25vw, -3.65rem);
  }

  html.page-what-we-are-not .what-not-hero__visual {
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: min(28rem, 100%);
    margin-left: auto;
    margin-right: auto;
    /* translateX(0) drops desktop mesh nudge so the column lines up with centered copy (phablet only). */
    transform: translate(0, clamp(1.05rem, 3.05vw, 2.35rem));
    padding: clamp(1.25rem, 3.35vw, 2.15rem) 0 0;
  }

  html.page-what-we-are-not .what-not-hero__canvas {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: min(100%, 22rem);
    max-width: 100%;
  }
}

/* What we aren’t hero — iPhone band (≤430px): regular + Pro Max portrait; see ladder comment above. */
@media (max-width: 440px) {
  /*
   * Content-height hero (see site-wide ≤430 tail): global `html…what-not-hero` still uses svh-heavy padding + copy
   * margin-top that duplicated header clearance; mesh canvas was width:100% + aspect-square → ~430px-tall bitmap on
   * narrow phones (431–767 phablet band caps canvas — ≤430 did not). Align vertical rhythm + mesh cap with product heroes.
   */
  html.page-what-we-are-not .what-not-hero {
    /* Slightly less top band so copy + CTA can sit higher vs mesh (min-height unchanged at EOF tail). */
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(4.55rem, 11vw, 5.85rem)) !important;
    padding-bottom: clamp(5.15rem, 11.5vw, 6.1rem) !important;
    text-align: center;
  }

  html.page-what-we-are-not .what-not-hero__visual {
    padding: 0 clamp(0.85rem, 3.2vw, 1.35rem) 0;
    max-width: min(22rem, 100%);
    margin-left: auto;
    margin-right: auto;
    /* Tuck copy column slightly closer to mesh vs global `html…__copy` padding-top (~4410). */
    margin-bottom: clamp(-0.55rem, -2.35vw, -0.18rem);
  }

  html.page-what-we-are-not .what-not-hero__canvas {
    display: block;
    width: min(100%, 19rem);
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  /*
   * What we aren’t — ≤430: match product / index horizontal rhythm (≤768 `.what-not-*-inner` clamps were ~2.45rem
   * each side — far tighter on product `.page-inner`). Hero copy nudge + type scale + deepfake-style CTA pill.
   * Compare: two narrow cards, centered row, left-aligned copy inside. Accordions: icon stack above paragraphs.
   */
  html.page-what-we-are-not .what-not-compare-inner,
  html.page-what-we-are-not .what-not-hash-inner,
  html.page-what-we-are-not .what-not-spec-chart-section .what-not-spec-chart-inner {
    padding-left: clamp(0.38rem, 2.45vw, 0.68rem);
    padding-right: clamp(0.38rem, 2.45vw, 0.68rem);
  }

  html.page-what-we-are-not .what-not-hero__copy {
    padding-left: clamp(0.38rem, 2.55vw, 0.7rem);
    padding-right: clamp(0.38rem, 2.55vw, 0.7rem);
    padding-top: clamp(0.08rem, 0.45vw, 0.22rem);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Strong pull-up: title, lines, and CTA move up together vs mesh (::before art unchanged). */
    margin-top: clamp(-3.85rem, -17.5vw, -1.65rem);
  }

  html.page-what-we-are-not .what-not-hero__inner {
    margin-top: calc(-1 * clamp(2.35rem, 6.35vw, 3.35rem));
  }

  html.page-what-we-are-not .what-not-hero .product-hero__title.product-hero__title--deepfake {
    font-size: calc(clamp(1.38rem, 5.45vw, 2.08rem) + 2px);
    line-height: 1.5;
    margin-bottom: clamp(1.05rem, 4.15vw, 1.58rem);
  }

  html.page-what-we-are-not .what-not-hero .product-hero__deepfake-line {
    font-size: calc(clamp(1.05rem, 3.55vw, 1.22rem) + 2px);
    line-height: 1.4;
  }

  html.page-what-we-are-not .what-not-hero .product-hero__deepfake-line:first-of-type {
    margin-bottom: clamp(1.05rem, 2.35vw, 1.55rem);
  }

  html.page-what-we-are-not .what-not-hero .product-hero__deepfake-line--semibold {
    font-size: calc(clamp(1.08rem, 3.65vw, 1.26rem) + 2px);
    margin-top: clamp(0.22rem, 1vw, 0.42rem);
  }

  /* Mirror deepfake product hero CTA at ≤430 (~7043) */
  html.page-what-we-are-not .what-not-hero .product-hero__cta.btn-hero,
  html[data-theme='light'].page-what-we-are-not .what-not-hero .product-hero__cta.btn-hero {
    font-size: calc(clamp(1.2rem, 2.4vw, 1.55rem) - 1px);
    padding: 0.5rem 2.2rem;
    line-height: 1.2;
    gap: 0.65rem;
    border-radius: 28px;
    margin-left: auto;
    margin-right: auto;
    margin-top: clamp(0.42rem, calc(1.75vw + 0.45dvh), 1.35rem);
    justify-content: center;
    width: 100%;
    max-width: min(17rem, 100%);
    box-sizing: border-box;
  }

  html.page-what-we-are-not .what-not-hero .product-hero__cta.btn-hero::before,
  html[data-theme='light'].page-what-we-are-not .what-not-hero .product-hero__cta.btn-hero::before {
    border-radius: 28px;
  }

  html.page-what-we-are-not .what-not-hero .product-hero__cta.btn-hero:hover,
  html[data-theme='light'].page-what-we-are-not .what-not-hero .product-hero__cta.btn-hero:hover {
    font-size: calc(clamp(1.26rem, 2.5vw, 1.62rem) - 1px);
  }

  html.page-what-we-are-not .what-not-hero .product-hero__cta.btn-hero .btn-arrow,
  html[data-theme='light'].page-what-we-are-not .what-not-hero .product-hero__cta.btn-hero .btn-arrow {
    position: relative;
    z-index: 1;
    width: 1.5rem;
    height: 1.5rem;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid currentColor;
  }

  html.page-what-we-are-not .what-not-hero .product-hero__cta.btn-hero .btn-arrow svg,
  html[data-theme='light'].page-what-we-are-not .what-not-hero .product-hero__cta.btn-hero .btn-arrow svg {
    width: 1rem;
    height: 1rem;
  }

  html.page-what-we-are-not .what-not-hero .product-hero__cta.btn-hero:hover .btn-arrow svg,
  html[data-theme='light'].page-what-we-are-not .what-not-hero .product-hero__cta.btn-hero:hover .btn-arrow svg {
    width: 1.05rem;
    height: 1.05rem;
    stroke: currentColor;
    stroke-width: 2.1;
  }

  /* “Current state” — beat ≤768 single-column: two compact cards, centered pair, gap between cards */
  html.page-what-we-are-not .what-not-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, min(10.45rem, 47vw)));
    column-gap: clamp(0.7rem, 4.75vw, 1.15rem);
    row-gap: clamp(0.5rem, 2.25vw, 0.75rem);
    justify-content: center;
    justify-items: stretch;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-right: 0;
    box-sizing: border-box;
  }

  html.page-what-we-are-not .what-not-compare-card {
    min-height: clamp(6.85rem, 36vw, 8.85rem);
    padding: clamp(0.38rem, 1.65vw, 0.52rem) clamp(0.32rem, 1.35vw, 0.45rem) clamp(0.28rem, 1.15vw, 0.42rem);
    text-align: left;
    box-sizing: border-box;
  }

  html.page-what-we-are-not .what-not-compare-card__num {
    font-size: calc(clamp(0.58rem, 1.65vw, 0.72rem) + 3px);
    margin-bottom: 0.12rem;
  }

  html.page-what-we-are-not .what-not-compare-card__rule {
    margin-bottom: clamp(0.18rem, 0.85vw, 0.28rem);
  }

  html.page-what-we-are-not .what-not-compare-card__name {
    /*
     * Cards only; !important beats later ≤1280 cascade on this width.
     * Do not use calc(clamp(...) − Npx): vw + small rem − 11px hits ≤0 on narrow phones → font-size invalid / titles vanish.
     */
    font-size: calc(clamp(0.625rem, 2.85vw, 0.8125rem) + 1px) !important;
    line-height: 1.22 !important;
  }

  html.page-what-we-are-not .what-not-compare-card__visual {
    flex: 1 1 auto;
    min-height: clamp(1.55rem, 8.25vw, 2.15rem);
    margin: clamp(0.12rem, 0.85vw, 0.22rem) 0 clamp(0.08rem, 0.55vw, 0.16rem);
    padding-top: clamp(0.4rem, 2.05vw, 0.65rem);
    padding-bottom: clamp(0.4rem, 2.05vw, 0.65rem);
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
  }

  html.page-what-we-are-not .what-not-compare-card__img {
    width: auto;
    max-width: min(6.05rem, 42vw);
    max-height: clamp(2.05rem, 9.15vw, 2.62rem);
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  html.page-what-we-are-not .what-not-compare-card__stat {
    padding-top: 0.12rem;
  }

  html.page-what-we-are-not .what-not-compare-card__label {
    /* RECALL / ACCURACY — +2px vs prior +3px on this band */
    font-size: calc(clamp(0.52rem, 1.75vw, 0.68rem) + 5px);
    margin-bottom: 0.08rem;
    letter-spacing: 0.08em;
  }

  html.page-what-we-are-not .what-not-compare-card__value {
    font-size: calc(clamp(1.28rem, 6.35vw, 1.95rem) + 3px);
    line-height: 1.02;
  }

  html.page-what-we-are-not .what-not-compare-header {
    margin-bottom: clamp(1.85rem, 4.95vw, 2.55rem);
  }

  /* Accordions: icon block above paragraph (theme img pair stays inline-flex) */
  html.page-what-we-are-not .what-not-acc__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: clamp(0.38rem, 1.65vw, 0.55rem);
    margin: 0 0 clamp(0.82rem, 2.35vw, 1.12rem);
  }

  html.page-what-we-are-not .what-not-acc__row-icon {
    width: clamp(2.82rem, 6.35vw, 3.52rem);
    max-width: 100%;
  }

  html.page-what-we-are-not .what-not-acc__row-icon[src*='Failed'] {
    width: clamp(2.42rem, 5.65vw, 3.05rem);
  }

  html.page-what-we-are-not .what-not-mn-section .what-not-acc-item:nth-child(1) .what-not-acc__row-icon,
  html.page-what-we-are-not .what-not-mn-section .what-not-acc-item:nth-child(2) .what-not-acc__row-icon {
    width: clamp(3.98rem, 18.65vw, 5.28rem);
  }

  html.page-what-we-are-not .what-not-acc__row-text {
    width: 100%;
  }

  html.page-what-we-are-not .what-not-mn-section .what-not-acc-item:nth-child(1) .what-not-acc__row,
  html.page-what-we-are-not .what-not-mn-section .what-not-acc-item:nth-child(2) .what-not-acc__row {
    column-gap: 0;
  }
}

/*
 * Index home — phablet only (431–767px CSS width, e.g. Surface Duo 540×720, resized desktop): hero stack order trusted → title →
 * CTAs → GIF → deck lines; smaller GIF; centered copy + promos. Same viewport-height floor as product heroes (fit-to-window / dvh stable).
 */
@media (max-width: 767px) and (min-width: 441px) {
  /* Clear fixed .header-wrap + nav bar so kicker/title start below chrome (this band only). */
  main#main:not(.page-main) .hero-landing {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(6.7rem, 19.25vw, 8.65rem));
  }

  main#main:not(.page-main) .hero-landing .hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: clamp(0.65rem, 1.85vw, 1.05rem);
  }

  main#main:not(.page-main) .hero-landing .hero-left {
    display: contents;
  }

  main#main:not(.page-main) .hero-landing .hero-right {
    display: none;
  }

  main#main:not(.page-main) .hero-landing .hero-trusted {
    grid-row: 1;
    margin-top: clamp(0.55rem, 1.65vw, 1.05rem);
    margin-bottom: clamp(0.15rem, 0.55vw, 0.28rem);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(0.1rem, 0.55vw, 0.35rem);
    padding-right: clamp(0.1rem, 0.55vw, 0.35rem);
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: calc(1px + clamp(0.91rem, 2.05vw, 1.4rem) - 2px);
    letter-spacing: 0.042em;
  }

  /* Two-line title from HTML <br> in .hero-title__default — hide portrait splits; size so first line fits ~540px. */
  main#main:not(.page-main) .hero-landing .hero-title__default {
    display: block;
  }

  main#main:not(.page-main) .hero-landing .hero-title__portrait {
    display: none;
  }

  main#main:not(.page-main) .hero-landing .hero-title-teal {
    grid-row: 2;
    margin: 0 auto;
    margin-bottom: clamp(0.28rem, 0.85vw, 0.52rem);
    padding-left: clamp(0.4rem, 1.35vw, 0.75rem);
    padding-right: clamp(0.4rem, 1.35vw, 0.75rem);
    text-align: center;
    max-width: 100%;
    font-size: calc(clamp(1.76rem, 3.98vw, 2.28rem) - 3px);
    line-height: 1.35;
    text-wrap: balance;
  }

  main#main:not(.page-main) .hero-landing .hero-deck-group {
    grid-row: 3;
    margin: clamp(0.55rem, 1.35vw, 0.85rem) auto clamp(0.45rem, 1.15vw, 0.75rem);
    position: relative;
    z-index: 2;
    padding-left: clamp(0.4rem, 1.35vw, 0.75rem);
    padding-right: clamp(0.4rem, 1.35vw, 0.75rem);
    text-align: center;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  main#main:not(.page-main) .hero-landing .hero-deck-group .hero-deck {
    font-size: calc(clamp(0.98rem, 2.15vw, 1.22rem) + 1px);
    line-height: 1.4;
  }

  main#main:not(.page-main) .hero-landing .hero-buttons {
    grid-row: 5;
    position: relative;
    z-index: 2;
    margin-top: clamp(0.85rem, 1.65vw, 1.25rem);
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: min(16.5rem, 82%);
    margin-bottom: clamp(0.75rem, 1.85vw, 1.15rem);
    transform: translateY(clamp(-0.45rem, -1.25vw, -0.2rem));
  }

  main#main:not(.page-main) .hero-landing .hero-inner > .hero-graphic-layer {
    grid-row: 4;
    position: relative;
    z-index: 0;
    width: 100%;
    max-width: min(292px, 90vw);
    margin: clamp(0.35rem, 1.05vw, 0.65rem) 0 clamp(0.35rem, 1.45vw, 0.95rem);
    padding: 0 0 clamp(0.08rem, 0.65vw, 0.35rem);
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    grid-template-columns: none;
  }

  main#main:not(.page-main) .hero-landing .hero-graphic-layer .hero-graphic {
    grid-column: auto;
    margin: 0 auto;
    max-width: min(228px, 56vw);
    width: 100%;
    height: auto;
    transform: none;
    justify-self: center;
  }

  main#main:not(.page-main) .hero-landing .hero-inner > .hero-bottom {
    grid-row: 6;
    position: relative;
    z-index: 2;
    margin-top: clamp(0.05rem, 0.75vw, 0.38rem);
  }

  main#main:not(.page-main) .hero-landing .hero-bottom-left {
    padding-left: clamp(0.65rem, 2vw, 1.25rem);
    padding-right: clamp(0.65rem, 2vw, 1.25rem);
    text-align: center;
  }

  main#main:not(.page-main) .hero-landing .hero-tagline {
    margin-left: auto;
    margin-right: auto;
  }

  main#main:not(.page-main) .section-csam .section-csam-inner,
  main#main:not(.page-main) .section-dashboards .section-dashboards-inner,
  main#main:not(.page-main) .section-deepfake .section-deepfake-inner {
    justify-items: center;
    text-align: center;
    padding-left: clamp(0.65rem, 3.25vw, 1.15rem);
    padding-right: clamp(0.65rem, 3.25vw, 1.15rem);
    margin-left: auto;
    margin-right: auto;
  }

  /* Undo index ≤1024 left-heavy section gutters + deepfake extra inset (this phablet band only). */
  main#main:not(.page-main) .section.section-csam,
  main#main:not(.page-main) .section.section-dashboards,
  main#main:not(.page-main) .section.section-deepfake {
    padding-left: clamp(1rem, 4.25vw, 1.65rem);
    padding-right: clamp(1rem, 4.25vw, 1.65rem);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  main#main:not(.page-main) .section-csam-content,
  main#main:not(.page-main) .section-dashboards-content,
  main#main:not(.page-main) .section-deepfake-content {
    text-align: center;
    justify-self: center;
    width: 100%;
    max-width: min(30rem, 100%);
    margin-left: auto;
    margin-right: auto;
  }

  main#main:not(.page-main) .section-csam-title,
  main#main:not(.page-main) .section-dashboards-title,
  main#main:not(.page-main) .section-deepfake-title {
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* Phablet index only: hide CSAM / Deepfake / Dashboards title rules (≥768 and ≤430 unchanged here). */
  main#main:not(.page-main) .section-csam-title::before,
  main#main:not(.page-main) .section-dashboards-title::before,
  main#main:not(.page-main) .section-deepfake-title::before {
    content: none;
    display: none;
  }

  main#main:not(.page-main) .section-csam-subtitle,
  main#main:not(.page-main) .section-deepfake-subtitle,
  main#main:not(.page-main) .section-dashboards-subtitle,
  main#main:not(.page-main) .section-csam-body,
  main#main:not(.page-main) .section-deepfake-body,
  main#main:not(.page-main) .section-dashboards-body {
    text-align: center;
  }

  main#main:not(.page-main) .section-csam-content .btn-csam-started,
  main#main:not(.page-main) .section-dashboards-content .btn-csam-started,
  main#main:not(.page-main) .section-deepfake-content .btn-deepfake-started {
    margin-left: auto;
    margin-right: auto;
  }

  /* Full `.section.section-*` chain so these beat index ≤1024 rules (e.g. deepfake stack `margin-left: 0`). */
  main#main:not(.page-main) .section.section-csam .section-csam-graphic,
  main#main:not(.page-main) .section.section-dashboards .section-dashboards-graphic,
  main#main:not(.page-main) .section.section-deepfake .section-deepfake-graphic {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    transform: none;
  }

  main#main:not(.page-main) .section.section-csam .section-csam-graphic-stack,
  main#main:not(.page-main) .section.section-dashboards .section-dashboards-graphic-stack,
  main#main:not(.page-main) .section.section-deepfake .section-deepfake-graphic-stack {
    margin-left: auto;
    margin-right: auto;
    transform: translate(0, 0.65rem);
  }
}

/* Index “What is CSAM” panel — centered under trigger, overlays tagline (≤767 only; ≥768 unchanged). */
@media (max-width: 767px) {
  main#main:not(.page-main) .hero-landing .hero-buttons {
    z-index: 8;
    max-width: min(16.5rem, 82%);
  }

  main#main:not(.page-main) .hero-landing .hero-inner > .hero-bottom {
    z-index: 1;
  }

  main#main:not(.page-main) .hero-landing .definition-dropdown-panel:not([hidden]) {
    position: absolute;
    left: 50%;
    top: calc(100% + 0.35rem);
    right: auto;
    transform: translateX(-50%);
    margin-top: 0;
    width: min(440px, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
    z-index: 10;
    box-sizing: border-box;
  }

  main#main:not(.page-main) .hero-landing .hero-tagline {
    margin-left: auto;
    margin-right: auto;
    padding-top: clamp(0.55rem, 1.65vw, 0.95rem);
  }

  /*
   * Index `#deepfake` promo — width ≤767 only (portrait + landscape). ID + !important beats phablet/≤1024/grid
   * and DevTools where `orientation` can disagree with width×height. ≥768 unchanged.
   */
  #deepfake.section.section-deepfake {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    padding-left: clamp(1rem, 4.25vw, 1.65rem) !important;
    padding-right: clamp(1rem, 4.25vw, 1.65rem) !important;
    box-sizing: border-box;
  }

  #deepfake .section-deepfake-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 0 1 min(100%, 36rem) !important;
    grid-template-columns: none !important;
    width: min(100%, 36rem) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(0.65rem, 3.25vw, 1.15rem) !important;
    padding-right: clamp(0.65rem, 3.25vw, 1.15rem) !important;
    box-sizing: border-box;
  }

  #deepfake .section-deepfake-graphic {
    order: -1 !important;
    display: flex !important;
    align-self: center !important;
    width: 100% !important;
    max-width: min(30rem, 100%) !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  #deepfake .section-deepfake-content {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    padding-left: clamp(0.35rem, 2vw, 0.85rem) !important;
    padding-right: clamp(0.35rem, 2vw, 0.85rem) !important;
    max-width: min(30rem, 100%) !important;
    width: min(100%, 30rem) !important;
    text-align: center !important;
    transform: none !important;
    box-sizing: border-box;
  }

  #deepfake .section-deepfake-title {
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #deepfake .section-deepfake-subtitle {
    text-align: center !important;
  }

  /*
   * Body: index ≤1024 still applies `max-width: min(23.5rem, 100%)` to `.section-deepfake-body` at 720px-wide viewports.
   * Without horizontal `margin: auto`, that narrower block sits left in the copy column while text is centered inside it
   * — reads off-center vs title/subtitle (full column width). Beat ≤1024 + center the box (≤767 only; ≥768 unchanged).
   */
  #deepfake .section-deepfake-body {
    text-align: center !important;
    max-width: min(30rem, 100%) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    box-sizing: border-box;
  }

  #deepfake .section-deepfake-content .btn-deepfake-started {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #deepfake .section-deepfake-graphic-stack {
    margin-left: auto !important;
    margin-right: auto !important;
    transform: translate(0, 0.65rem) !important;
  }
}

/* What we aren’t hero — ≤1280 only, two-column band: mesh + copy slightly lower (≥1281 unchanged; min-width 768 matches iPad mini portrait) */
@media (max-width: 1280px) and (min-width: 768px) {
  html.page-what-we-are-not .what-not-hero__visual {
    margin-top: calc(
      clamp(3.75rem, 6vw, 5.35rem) + clamp(1.25rem, 2.85vw, 2.5rem)
    );
  }

  html.page-what-we-are-not .what-not-hero__copy {
    margin-top: max(
      calc(clamp(3.65rem, 9.25vw, 6.35rem) + clamp(0.3rem, 0.9vw, 0.65rem)),
      calc(env(safe-area-inset-top, 0px) + clamp(5.25rem, 11vw, 7.25rem))
    );
  }
}

/*
 * What we aren’t — iPad mini / Air portrait (768–833): hills.svg under `background-size: cover` crops to bright sky on
 * narrow tall viewports; bias focal point toward the bottom (hills) so the band doesn’t read as a white field.
 */
@media (max-width: 833px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  html.page-what-we-are-not .what-not-hero::before {
    background-position: 50% 92%;
  }
}

/* ——— Product page (CSAM / Deepfake) hero: full-bleed — band padding + min-height match index .hero-landing ——— */
.product-hero {
  position: relative;
  isolation: isolate;
  /* Bleed to viewport edges using main’s width (body has horizontal padding — 100vw + 50%-50vw leaves one gutter of body bg). */
  width: calc(100% + 2 * var(--page-margin)) !important;
  max-width: none !important;
  margin-left: calc(-1 * var(--page-margin)) !important;
  margin-right: calc(-1 * var(--page-margin)) !important;
  text-align: left;
  /* Same as index .hero-landing; first-line vertical offset lives on .product-hero__copy like .hero-left */
  padding: 3rem calc(var(--page-margin) * 2) 4rem;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  overflow: hidden;
}

/* Deepfake hero: allow nowrap headline to paint past the hero box — dots/gradient stay clipped under .product-hero__bg */
.product-hero.product-hero--deepfake {
  overflow: visible;
}

.product-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.32s ease-out;
}

.product-hero__bg.faded .product-hero__dot {
  animation: none !important;
  opacity: 0 !important;
}

/* Deepfake light hero only: extra teal mist layer (hidden unless .product-hero__blobs exists + light rules) */
.product-hero__blobs {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.product-hero__gradient {
  position: absolute;
  inset: 0;
  /* Hint of teal at bottom only; hero reads mostly navy */
  background:
    linear-gradient(
      180deg,
      rgba(5, 87, 92, 0) 0%,
      rgba(5, 87, 92, 0) 44%,
      rgba(5, 87, 92, 0.08) 62%,
      rgba(5, 87, 92, 0.16) 78%,
      rgba(5, 87, 92, 0.3) 100%
    ),
    linear-gradient(
      180deg,
      var(--product-hero-bg-a) 0%,
      var(--product-hero-bg-b) 22%,
      var(--product-hero-bg-c) 48%,
      var(--product-hero-bg-d) 72%,
      var(--product-hero-bg-e) 100%
    );
}

.product-hero__dots {
  position: absolute;
  inset: 0;
}

.product-hero__dot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle at 40% 40%,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(186, 255, 247, 0.26) 38%,
    rgba(121, 255, 234, 0.12) 62%,
    transparent 82%
  );
  filter: blur(1px);
  opacity: 0.28;
  mix-blend-mode: screen;
  animation: product-hero-float-a 30s ease-in-out infinite;
}

/* Drift + breathe: dim ↔ visible while moving */
@keyframes product-hero-float-a {
  0% {
    transform: translate(0, 0);
    opacity: 0.1;
  }
  12% {
    transform: translate(2vw, -3vh);
    opacity: 0.38;
  }
  28% {
    transform: translate(5vw, -8vh);
    opacity: 0.12;
  }
  44% {
    transform: translate(-3vw, 4vh);
    opacity: 0.44;
  }
  60% {
    transform: translate(7vw, 5vh);
    opacity: 0.14;
  }
  78% {
    transform: translate(-4vw, -5vh);
    opacity: 0.4;
  }
  100% {
    transform: translate(0, 0);
    opacity: 0.1;
  }
}

@keyframes product-hero-float-b {
  0% {
    transform: translate(0, 0);
    opacity: 0.12;
  }
  18% {
    transform: translate(-4vw, 5vh);
    opacity: 0.42;
  }
  35% {
    transform: translate(-7vw, 2vh);
    opacity: 0.11;
  }
  52% {
    transform: translate(4vw, -9vh);
    opacity: 0.46;
  }
  68% {
    transform: translate(6vw, 3vh);
    opacity: 0.13;
  }
  86% {
    transform: translate(-2vw, 7vh);
    opacity: 0.36;
  }
  100% {
    transform: translate(0, 0);
    opacity: 0.12;
  }
}

@keyframes product-hero-float-c {
  0% {
    transform: translate(0, 0);
    opacity: 0.11;
  }
  22% {
    transform: translate(5vw, 7vh);
    opacity: 0.34;
  }
  40% {
    transform: translate(-6vw, -3vh);
    opacity: 0.15;
  }
  58% {
    transform: translate(-8vw, -6vh);
    opacity: 0.48;
  }
  74% {
    transform: translate(3vw, -10vh);
    opacity: 0.12;
  }
  92% {
    transform: translate(-3vw, 4vh);
    opacity: 0.39;
  }
  100% {
    transform: translate(0, 0);
    opacity: 0.11;
  }
}

@keyframes product-hero-float-d {
  0% {
    transform: translate(0, 0);
    opacity: 0.13;
  }
  16% {
    transform: translate(-5vw, -6vh);
    opacity: 0.41;
  }
  34% {
    transform: translate(6vw, 5vh);
    opacity: 0.1;
  }
  50% {
    transform: translate(5vw, -4vh);
    opacity: 0.45;
  }
  66% {
    transform: translate(-4vw, 8vh);
    opacity: 0.14;
  }
  84% {
    transform: translate(7vw, -5vh);
    opacity: 0.37;
  }
  100% {
    transform: translate(0, 0);
    opacity: 0.13;
  }
}

/* Light deepfake hero: circular teal blobs — drift + blur breathe (shape stays 50% radius) */
@keyframes deepfake-hero-blob-a {
  0%,
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.33;
    filter: blur(48px);
  }
  27% {
    transform: translate(10vw, -6vh) scale(1.1) rotate(-4deg);
    opacity: 0.64;
    filter: blur(82px);
  }
  54% {
    transform: translate(-6vw, 9vh) scale(0.9) rotate(3deg);
    opacity: 0.43;
    filter: blur(40px);
  }
  79% {
    transform: translate(5vw, 4vh) scale(1.05) rotate(-2deg);
    opacity: 0.56;
    filter: blur(68px);
  }
}

@keyframes deepfake-hero-blob-b {
  0%,
  100% {
    transform: translate(0, 0) scale(1.03) rotate(1deg);
    opacity: 0.35;
    filter: blur(58px);
  }
  24% {
    transform: translate(-11vw, 7vh) scale(0.88) rotate(-5deg);
    opacity: 0.6;
    filter: blur(44px);
  }
  49% {
    transform: translate(8vw, -11vh) scale(1.14) rotate(4deg);
    opacity: 0.28;
    filter: blur(88px);
  }
  73% {
    transform: translate(14vw, 2vh) scale(0.98) rotate(-1deg);
    opacity: 0.66;
    filter: blur(54px);
  }
}

@keyframes deepfake-hero-blob-c {
  0%,
  100% {
    transform: translate(0, 0) scale(0.95) rotate(-2deg);
    opacity: 0.3;
    filter: blur(46px);
  }
  31% {
    transform: translate(7vw, 12vh) scale(1.12) rotate(5deg);
    opacity: 0.63;
    filter: blur(76px);
  }
  58% {
    transform: translate(-13vw, -5vh) scale(0.86) rotate(-4deg);
    opacity: 0.38;
    filter: blur(38px);
  }
  86% {
    transform: translate(-3vw, -10vh) scale(1.08) rotate(2deg);
    opacity: 0.51;
    filter: blur(64px);
  }
}

@keyframes deepfake-hero-blob-d {
  0%,
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.33;
    filter: blur(52px);
  }
  20% {
    transform: translate(-9vw, -8vh) scale(1.16) rotate(6deg);
    opacity: 0.58;
    filter: blur(42px);
  }
  46% {
    transform: translate(11vw, 10vh) scale(0.84) rotate(-5deg);
    opacity: 0.31;
    filter: blur(84px);
  }
  71% {
    transform: translate(-4vw, 6vh) scale(1.06) rotate(-3deg);
    opacity: 0.64;
    filter: blur(50px);
  }
}

/* Bottom-center blob: translate uses -50% X so left:50% stays visually centered (lower opacity than other blobs) */
@keyframes deepfake-hero-blob-e {
  0%,
  100% {
    transform: translate(-50%, 0) scale(1) rotate(0deg);
    opacity: 0.15;
    filter: blur(50px);
  }
  26% {
    transform: translate(calc(-50% + 8vw), -5vh) scale(1.1) rotate(4deg);
    opacity: 0.3;
    filter: blur(78px);
  }
  52% {
    transform: translate(calc(-50% - 10vw), 4vh) scale(0.9) rotate(-5deg);
    opacity: 0.21;
    filter: blur(42px);
  }
  78% {
    transform: translate(calc(-50% + 3vw), 8vh) scale(1.04) rotate(2deg);
    opacity: 0.27;
    filter: blur(66px);
  }
}

.product-hero__dot:nth-child(4n + 1) {
  animation-name: product-hero-float-a;
}
.product-hero__dot:nth-child(4n + 2) {
  animation-name: product-hero-float-b;
}
.product-hero__dot:nth-child(4n + 3) {
  animation-name: product-hero-float-c;
}
.product-hero__dot:nth-child(4n) {
  animation-name: product-hero-float-d;
}

.product-hero__dot:nth-child(1) {
  left: 6%;
  top: 10%;
  width: 0.37rem;
  height: 0.37rem;
  animation-duration: 34s;
  animation-delay: -2s;
}
.product-hero__dot:nth-child(2) {
  left: 18%;
  top: 55%;
  width: 0.26rem;
  height: 0.26rem;
  animation-duration: 25s;
  animation-delay: -7s;
}
.product-hero__dot:nth-child(3) {
  left: 82%;
  top: 14%;
  width: 0.33rem;
  height: 0.33rem;
  animation-duration: 32s;
  animation-delay: -1s;
}
.product-hero__dot:nth-child(4) {
  left: 72%;
  top: 48%;
  width: 0.3rem;
  height: 0.3rem;
  animation-duration: 28s;
  animation-delay: -11s;
}
.product-hero__dot:nth-child(5) {
  left: 42%;
  top: 8%;
  width: 0.42rem;
  height: 0.42rem;
  animation-duration: 37s;
  animation-delay: -4s;
}
.product-hero__dot:nth-child(6) {
  left: 55%;
  top: 62%;
  width: 0.25rem;
  height: 0.25rem;
  animation-duration: 22s;
  animation-delay: -9s;
}
.product-hero__dot:nth-child(7) {
  left: 88%;
  top: 72%;
  width: 0.32rem;
  height: 0.32rem;
  animation-duration: 29s;
  animation-delay: -3.5s;
}
.product-hero__dot:nth-child(8) {
  left: 10%;
  top: 78%;
  width: 0.35rem;
  height: 0.35rem;
  animation-duration: 33s;
  animation-delay: -14s;
}
.product-hero__dot:nth-child(9) {
  left: 30%;
  top: 28%;
  width: 0.23rem;
  height: 0.23rem;
  animation-duration: 21s;
  animation-delay: -5s;
}
.product-hero__dot:nth-child(10) {
  left: 62%;
  top: 22%;
  width: 0.39rem;
  height: 0.39rem;
  animation-duration: 36s;
  animation-delay: -8s;
}
.product-hero__dot:nth-child(11) {
  left: 48%;
  top: 42%;
  width: 0.28rem;
  height: 0.28rem;
  animation-duration: 26s;
  animation-delay: -12s;
}
.product-hero__dot:nth-child(12) {
  left: 92%;
  top: 38%;
  width: 0.31rem;
  height: 0.31rem;
  animation-duration: 30s;
  animation-delay: -0.5s;
}
.product-hero__dot:nth-child(13) {
  left: 25%;
  top: 18%;
  width: 0.34rem;
  height: 0.34rem;
  animation-duration: 38s;
  animation-delay: -16s;
}
.product-hero__dot:nth-child(14) {
  left: 38%;
  top: 70%;
  width: 0.26rem;
  height: 0.26rem;
  animation-duration: 24s;
  animation-delay: -6s;
}
.product-hero__dot:nth-child(15) {
  left: 65%;
  top: 8%;
  width: 0.3rem;
  height: 0.3rem;
  animation-duration: 29s;
  animation-delay: -10s;
}
.product-hero__dot:nth-child(16) {
  left: 2%;
  top: 45%;
  width: 0.44rem;
  height: 0.44rem;
  animation-duration: 40s;
  animation-delay: -3s;
}
.product-hero__dot:nth-child(17) {
  left: 52%;
  top: 88%;
  width: 0.27rem;
  height: 0.27rem;
  animation-duration: 25s;
  animation-delay: -13s;
}
.product-hero__dot:nth-child(18) {
  left: 76%;
  top: 28%;
  width: 0.33rem;
  height: 0.33rem;
  animation-duration: 32s;
  animation-delay: -7.5s;
}
.product-hero__dot:nth-child(19) {
  left: 14%;
  top: 38%;
  width: 0.36rem;
  height: 0.36rem;
  animation-duration: 34s;
  animation-delay: -1.8s;
}
.product-hero__dot:nth-child(20) {
  left: 58%;
  top: 52%;
  width: 0.25rem;
  height: 0.25rem;
  animation-duration: 22s;
  animation-delay: -15s;
}
.product-hero__dot:nth-child(21) {
  left: 22%;
  top: 6%;
  width: 0.29rem;
  height: 0.29rem;
  animation-duration: 41s;
  animation-delay: -9s;
}
.product-hero__dot:nth-child(22) {
  left: 94%;
  top: 52%;
  width: 0.24rem;
  height: 0.24rem;
  animation-duration: 20s;
  animation-delay: -4s;
}
.product-hero__dot:nth-child(23) {
  left: 8%;
  top: 32%;
  width: 0.4rem;
  height: 0.4rem;
  animation-duration: 36s;
  animation-delay: -18s;
}
.product-hero__dot:nth-child(24) {
  left: 50%;
  top: 58%;
  width: 0.26rem;
  height: 0.26rem;
  animation-duration: 29s;
  animation-delay: -2s;
}
.product-hero__dot:nth-child(25) {
  left: 35%;
  top: 82%;
  width: 0.32rem;
  height: 0.32rem;
  animation-duration: 33s;
  animation-delay: -11s;
}
.product-hero__dot:nth-child(26) {
  left: 70%;
  top: 16%;
  width: 0.28rem;
  height: 0.28rem;
  animation-duration: 25s;
  animation-delay: -6s;
}
.product-hero__dot:nth-child(27) {
  left: 12%;
  top: 48%;
  width: 0.33rem;
  height: 0.33rem;
  animation-duration: 44s;
  animation-delay: -22s;
}
.product-hero__dot:nth-child(28) {
  left: 84%;
  top: 26%;
  width: 0.26rem;
  height: 0.26rem;
  animation-duration: 21s;
  animation-delay: -1s;
}
.product-hero__dot:nth-child(29) {
  left: 44%;
  top: 68%;
  width: 0.37rem;
  height: 0.37rem;
  animation-duration: 37s;
  animation-delay: -14s;
}
.product-hero__dot:nth-child(30) {
  left: 28%;
  top: 46%;
  width: 0.23rem;
  height: 0.23rem;
  animation-duration: 28s;
  animation-delay: -8s;
}
.product-hero__dot:nth-child(31) {
  left: 96%;
  top: 12%;
  width: 0.3rem;
  height: 0.3rem;
  animation-duration: 32s;
  animation-delay: -5s;
}
.product-hero__dot:nth-child(32) {
  left: 4%;
  top: 62%;
  width: 0.27rem;
  height: 0.27rem;
  animation-duration: 24s;
  animation-delay: -12s;
}
.product-hero__dot:nth-child(33) {
  left: 60%;
  top: 36%;
  width: 0.35rem;
  height: 0.35rem;
  animation-duration: 38s;
  animation-delay: -20s;
}
.product-hero__dot:nth-child(34) {
  left: 78%;
  top: 64%;
  width: 0.25rem;
  height: 0.25rem;
  animation-duration: 20s;
  animation-delay: -3s;
}
.product-hero__dot:nth-child(35) {
  left: 40%;
  top: 24%;
  width: 0.31rem;
  height: 0.31rem;
  animation-duration: 34s;
  animation-delay: -16s;
}
.product-hero__dot:nth-child(36) {
  left: 16%;
  top: 20%;
  width: 0.29rem;
  height: 0.29rem;
  animation-duration: 30s;
  animation-delay: -7s;
}
.product-hero__dot:nth-child(37) {
  left: 54%;
  top: 14%;
  width: 0.33rem;
  height: 0.33rem;
  animation-duration: 42s;
  animation-delay: -25s;
}
.product-hero__dot:nth-child(38) {
  left: 68%;
  top: 44%;
  width: 0.26rem;
  height: 0.26rem;
  animation-duration: 22s;
  animation-delay: -2.5s;
}
.product-hero__dot:nth-child(39) {
  left: 32%;
  top: 58%;
  width: 0.39rem;
  height: 0.39rem;
  animation-duration: 26s;
  animation-delay: -10s;
}
.product-hero__dot:nth-child(40) {
  left: 90%;
  top: 84%;
  width: 0.24rem;
  height: 0.24rem;
  animation-duration: 40s;
  animation-delay: -19s;
}
.product-hero__dot:nth-child(41) {
  left: 46%;
  top: 88%;
  width: 0.28rem;
  height: 0.28rem;
  animation-duration: 29s;
  animation-delay: -13s;
}
.product-hero__dot:nth-child(42) {
  left: 74%;
  top: 8%;
  width: 0.34rem;
  height: 0.34rem;
  animation-duration: 36s;
  animation-delay: -4.5s;
}
.product-hero__dot:nth-child(43) {
  left: 20%;
  top: 72%;
  width: 0.25rem;
  height: 0.25rem;
  animation-duration: 21s;
  animation-delay: -9s;
}
.product-hero__dot:nth-child(44) {
  left: 58%;
  top: 76%;
  width: 0.32rem;
  height: 0.32rem;
  animation-duration: 33s;
  animation-delay: -17s;
}
.product-hero__dot:nth-child(45) {
  left: 36%;
  top: 14%;
  width: 0.36rem;
  height: 0.36rem;
  animation-duration: 37s;
  animation-delay: -6.5s;
}
.product-hero__dot:nth-child(46) {
  left: 86%;
  top: 40%;
  width: 0.26rem;
  height: 0.26rem;
  animation-duration: 28s;
  animation-delay: -1.2s;
}
.product-hero__dot:nth-child(47) {
  left: 26%;
  top: 92%;
  width: 0.3rem;
  height: 0.3rem;
  animation-duration: 45s;
  animation-delay: -28s;
}
.product-hero__dot:nth-child(48) {
  left: 64%;
  top: 92%;
  width: 0.27rem;
  height: 0.27rem;
  animation-duration: 24s;
  animation-delay: -5.5s;
}
.product-hero__dot:nth-child(49) {
  left: 11%;
  top: 4%;
  width: 0.29rem;
  height: 0.29rem;
  animation-duration: 38s;
  animation-delay: -21s;
}
.product-hero__dot:nth-child(50) {
  left: 56%;
  top: 4%;
  width: 0.24rem;
  height: 0.24rem;
  animation-duration: 22s;
  animation-delay: -3.8s;
}
.product-hero__dot:nth-child(51) {
  left: 98%;
  top: 68%;
  width: 0.32rem;
  height: 0.32rem;
  animation-duration: 33s;
  animation-delay: -14s;
}
.product-hero__dot:nth-child(52) {
  left: 5%;
  top: 86%;
  width: 0.26rem;
  height: 0.26rem;
  animation-duration: 29s;
  animation-delay: -8.5s;
}
.product-hero__dot:nth-child(53) {
  left: 71%;
  top: 34%;
  width: 0.28rem;
  height: 0.28rem;
  animation-duration: 41s;
  animation-delay: -26s;
}
.product-hero__dot:nth-child(54) {
  left: 39%;
  top: 34%;
  width: 0.25rem;
  height: 0.25rem;
  animation-duration: 20s;
  animation-delay: -2.2s;
}
.product-hero__dot:nth-child(55) {
  left: 23%;
  top: 64%;
  width: 0.35rem;
  height: 0.35rem;
  animation-duration: 36s;
  animation-delay: -11s;
}
.product-hero__dot:nth-child(56) {
  left: 81%;
  top: 56%;
  width: 0.26rem;
  height: 0.26rem;
  animation-duration: 25s;
  animation-delay: -6.8s;
}
.product-hero__dot:nth-child(57) {
  left: 47%;
  top: 96%;
  width: 0.31rem;
  height: 0.31rem;
  animation-duration: 44s;
  animation-delay: -30s;
}
.product-hero__dot:nth-child(58) {
  left: 15%;
  top: 56%;
  width: 0.23rem;
  height: 0.23rem;
  animation-duration: 21s;
  animation-delay: -4.2s;
}
.product-hero__dot:nth-child(59) {
  left: 63%;
  top: 66%;
  width: 0.33rem;
  height: 0.33rem;
  animation-duration: 32s;
  animation-delay: -15s;
}
.product-hero__dot:nth-child(60) {
  left: 91%;
  top: 22%;
  width: 0.27rem;
  height: 0.27rem;
  animation-duration: 37s;
  animation-delay: -7s;
}
.product-hero__dot:nth-child(61) {
  left: 34%;
  top: 2%;
  width: 0.3rem;
  height: 0.3rem;
  animation-duration: 26s;
  animation-delay: -9.5s;
}
.product-hero__dot:nth-child(62) {
  left: 52%;
  top: 30%;
  width: 0.24rem;
  height: 0.24rem;
  animation-duration: 46s;
  animation-delay: -32s;
}
.product-hero__dot:nth-child(63) {
  left: 7%;
  top: 16%;
  width: 0.33rem;
  height: 0.33rem;
  animation-duration: 30s;
  animation-delay: -12s;
}
.product-hero__dot:nth-child(64) {
  left: 78%;
  top: 82%;
  width: 0.26rem;
  height: 0.26rem;
  animation-duration: 24s;
  animation-delay: -1.5s;
}
.product-hero__dot:nth-child(65) {
  left: 43%;
  top: 50%;
  width: 0.28rem;
  height: 0.28rem;
  animation-duration: 34s;
  animation-delay: -18s;
}
.product-hero__dot:nth-child(66) {
  left: 17%;
  top: 86%;
  width: 0.24rem;
  height: 0.24rem;
  animation-duration: 38s;
  animation-delay: -22s;
}
.product-hero__dot:nth-child(67) {
  left: 61%;
  top: 18%;
  width: 0.22rem;
  height: 0.22rem;
  animation-duration: 29s;
  animation-delay: -5s;
}
.product-hero__dot:nth-child(68) {
  left: 93%;
  top: 8%;
  width: 0.27rem;
  height: 0.27rem;
  animation-duration: 41s;
  animation-delay: -33s;
}
.product-hero__dot:nth-child(69) {
  left: 3%;
  top: 24%;
  width: 0.23rem;
  height: 0.23rem;
  animation-duration: 32s;
  animation-delay: -14s;
}
.product-hero__dot:nth-child(70) {
  left: 49%;
  top: 74%;
  width: 0.25rem;
  height: 0.25rem;
  animation-duration: 36s;
  animation-delay: -8s;
}
.product-hero__dot:nth-child(71) {
  left: 73%;
  top: 46%;
  width: 0.21rem;
  height: 0.21rem;
  animation-duration: 27s;
  animation-delay: -3s;
}
.product-hero__dot:nth-child(72) {
  left: 29%;
  top: 12%;
  width: 0.26rem;
  height: 0.26rem;
  animation-duration: 44s;
  animation-delay: -36s;
}
.product-hero__dot:nth-child(73) {
  left: 84%;
  top: 94%;
  width: 0.22rem;
  height: 0.22rem;
  animation-duration: 31s;
  animation-delay: -11s;
}
.product-hero__dot:nth-child(74) {
  left: 38%;
  top: 52%;
  width: 0.24rem;
  height: 0.24rem;
  animation-duration: 39s;
  animation-delay: -19s;
}
.product-hero__dot:nth-child(75) {
  left: 66%;
  top: 2%;
  width: 0.28rem;
  height: 0.28rem;
  animation-duration: 33s;
  animation-delay: -6s;
}
.product-hero__dot:nth-child(76) {
  left: 9%;
  top: 40%;
  width: 0.23rem;
  height: 0.23rem;
  animation-duration: 42s;
  animation-delay: -28s;
}
.product-hero__dot:nth-child(77) {
  left: 56%;
  top: 48%;
  width: 0.21rem;
  height: 0.21rem;
  animation-duration: 28s;
  animation-delay: -2.5s;
}
.product-hero__dot:nth-child(78) {
  left: 22%;
  top: 34%;
  width: 0.25rem;
  height: 0.25rem;
  animation-duration: 37s;
  animation-delay: -16s;
}
.product-hero__dot:nth-child(79) {
  left: 97%;
  top: 44%;
  width: 0.22rem;
  height: 0.22rem;
  animation-duration: 30s;
  animation-delay: -9s;
}
.product-hero__dot:nth-child(80) {
  left: 41%;
  top: 96%;
  width: 0.26rem;
  height: 0.26rem;
  animation-duration: 45s;
  animation-delay: -40s;
}
.product-hero__dot:nth-child(81) {
  left: 13%;
  top: 68%;
  width: 0.24rem;
  height: 0.24rem;
  animation-duration: 35s;
  animation-delay: -12s;
}
.product-hero__dot:nth-child(82) {
  left: 69%;
  top: 78%;
  width: 0.23rem;
  height: 0.23rem;
  animation-duration: 40s;
  animation-delay: -25s;
}
.product-hero__dot:nth-child(83) {
  left: 51%;
  top: 12%;
  width: 0.27rem;
  height: 0.27rem;
  animation-duration: 34s;
  animation-delay: -7s;
}

/* Match landing: .hero-inner grid + .hero-left inset (text sits in first column) */
.product-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* minmax(0, …): fr tracks may shrink below nowrap headline intrinsic width — avoids copy + art fighting same pixels */
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  align-items: flex-start;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  padding-top: 0.5rem;
  box-sizing: border-box;
}

.product-hero__copy {
  position: relative;
  z-index: 2;
  text-align: left;
  margin-top: 8.75rem;
  padding-left: var(--page-text-inset-left);
  padding-right: 0;
  min-width: 0;
}

/* Right column: Face → Brackets+Globe (brackets flush to globe) */
.product-hero__visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  /* Mirror .hero-left inset on the right */
  padding: 0.5rem var(--page-text-inset-left) 0 clamp(0.25rem, 2vw, 1rem);
}

/* Product hero: stacked PNGs (shared 1268×1320 artboard); flex aligns stack to column end */
.product-hero__visual-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-height: clamp(15rem, 36vh, 27rem);
  isolation: isolate;
  --ph-illustration-max: min(31.25rem, 64vmin);
  transform: translateX(clamp(-2rem, -5vw, -0.85rem));
}

/* Deepfake: CSAM replaces this with its own transform; deepfake was inheriting translateX() and pulling the GIF into the copy column */
.product-hero--deepfake .product-hero__visual-inner {
  transform: translateX(clamp(0rem, 0.5vw, 0.85rem));
  /* Slightly smaller cap than CSAM stack — keeps nowrap headline + GIF from sharing the same pixels */
  --ph-illustration-max: min(28.75rem, 58vmin);
  /* Row flex defaults to align-items:center — GIF sat mid-strip inside a tall min-height box; pin art to the bottom edge */
  align-items: flex-end;
  padding-bottom: clamp(0.35rem, 1vh, 0.85rem);
}

/* Deepfake: first column eats remaining width; art column capped — fr/fr split was too greedy for the GIF vs a long nowrap H1 */
.product-hero--deepfake .product-hero__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, min(34vw, 24.5rem));
}

.product-hero__illustration-stack {
  position: relative;
  max-width: 100%;
  max-height: var(--ph-illustration-max);
  aspect-ratio: 1268 / 1320;
  width: min(100%, calc(var(--ph-illustration-max) * 1268 / 1320));
}

/* CSAM product hero (product.html): headline slightly lower; PNG stack noticeably lower */
.product-hero--csam .product-hero__copy {
  margin-top: calc(8.75rem + 3.35rem);
}

.product-hero--csam .product-hero__visual-inner {
  transform: translate(
    clamp(-2rem, -5vw, -0.85rem),
    clamp(7.25rem, 18vh, 13.5rem)
  );
}

/*
 * Advertiser Portal — hero: copy + animated feed stack; keyhole + key + beam in `.advertiser-portal-stack-section`.
 */
.product-hero--advertiser-portal.product-hero--csam .product-hero__copy {
  max-width: min(62rem, 100%);
  /* Clear drop vs generic CSAM hero — applies at every width (TAP page only). */
  margin-top: calc(8.75rem + 3.35rem + clamp(1.35rem, 2.5vw, 2.65rem));
}

.product-hero--advertiser-portal.product-hero--csam .product-hero__inner {
  grid-template-columns: minmax(0, 1.46fr) minmax(0, min(34vw, 32rem));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: flex-start;
}

/* TAP hero: primary heavier, lede lighter + smaller; wider copy track reduces wrap. */
.product-hero--advertiser-portal.product-hero--csam .product-hero__title-primary {
  font-weight: 500;
  /* +1px vs parent H1 at every width; lede keeps its own clamp + px. */
  font-size: calc(100% + 1px);
}

.product-hero--advertiser-portal.product-hero--csam .product-hero__title-lede {
  font-weight: 400;
  font-size: calc(clamp(1.28rem, 2.85vw, 2.12rem) + 3px);
  line-height: 1.42;
  /* Slight extra air vs default `.product-hero__title-lede` / CSAM ≤1280 (TAP page only). */
  margin-top: calc(clamp(1.05rem, 1.95vw, 1.45rem) + clamp(0.2rem, 0.52vw, 0.4rem));
}

.product-hero--advertiser-portal.product-hero--csam .product-hero__title,
.product-hero--advertiser-portal.product-hero--csam .product-hero__sub {
  max-width: 100%;
}

.product-hero--advertiser-portal.product-hero--csam .product-hero__title {
  margin-bottom: calc(clamp(0.95rem, 2vw, 1.35rem) + clamp(0.18rem, 0.48vw, 0.38rem));
}

.product-hero--advertiser-portal.product-hero--csam .product-hero__sub {
  font-size: calc(clamp(1.52rem, 3.2vw, 1.95rem) + 2px);
}

.product-hero--advertiser-portal.product-hero--csam .product-hero__visual-inner.advertiser-portal-hero-feed__inner {
  transform: translate(
    clamp(-0.5rem, -1.2vw, 0),
    clamp(8.5rem, 18vh, 14rem)
  );
  min-height: clamp(14rem, 36vh, 24rem);
  justify-content: center;
  align-items: center;
  --ph-illustration-max: min(32rem, min(96vw, 94%));
  /* Avoid extra composited layer vs default `isolation: isolate` on `.product-hero__visual-inner` — keeps hero teal blobs visible through PNG transparency. */
  isolation: auto;
}

/* Animated feed uses backdrop-filter; keep hero bg + mist on stable compositor layers (WebKit/Blink can drop them each loop). */
.page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__bg,
.page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__gradient,
.page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__blobs,
.page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__dots {
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__blob {
  will-change: transform, opacity;
}

.advertiser-portal-hero-feed {
  display: flex;
  flex-direction: column;
  gap: clamp(0.82rem, 2.5vw, 1.4rem);
  width: min(100%, var(--ph-illustration-max, 32rem));
  margin-left: auto;
  margin-right: auto;
  /* bad1 → ad1 → bad2 → ad swaps → softer stack exit → loop; tune wall-clock here */
  --ap-feed-cycle: 8.34s;
}

.advertiser-portal-hero-feed__card {
  flex-shrink: 0;
  width: 100%;
  padding: clamp(0.3rem, 1vw, 0.5rem);
  border-radius: clamp(0.75rem, 2.2vw, 1.05rem);
  /* Glass panel: frosted hero behind; PNG still paints on top — opaque bitmap pixels stay opaque. */
  background: rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 14px rgba(15, 23, 42, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.42);
  overflow: hidden;
  /* Own stacking context so backdrop-filter invalidates less of the hero bg graph. */
  isolation: isolate;
  animation-duration: var(--ap-feed-cycle);
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.advertiser-portal-hero-feed__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(0.5rem, 1.6vw, 0.82rem);
}

/* Stacked ad art: only opacities crossfade while bad actors stay put. */
.advertiser-portal-hero-feed__ad-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 1020 / 340;
}

.advertiser-portal-hero-feed__img--ad {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: clamp(0.5rem, 1.6vw, 0.82rem);
  animation-duration: var(--ap-feed-cycle);
  /* Match post cards so stacked ad fades don’t feel like a different motion system */
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-delay: 0.15s;
}

/* Softer crossfades for ad-2 / ad-3 only (first ad tracks the glass card above). */
.advertiser-portal-hero-feed__img--ad2,
.advertiser-portal-hero-feed__img--ad3 {
  /* Gentler than ad-1’s overshoot curve — longer ad-2↔ad-3 overlap lives in the keyframes. */
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.advertiser-portal-hero-feed__img--ad1 {
  animation-name: advertiser-portal-feed-ad-img-1;
}

.advertiser-portal-hero-feed__img--ad2 {
  animation-name: advertiser-portal-feed-ad-img-2;
}

.advertiser-portal-hero-feed__img--ad3 {
  animation-name: advertiser-portal-feed-ad-img-3;
}

.advertiser-portal-hero-feed__card--bad1 {
  animation-name: advertiser-portal-feed-card-1;
  animation-delay: 0.15s;
}

.advertiser-portal-hero-feed__card--ad {
  animation-name: advertiser-portal-feed-card-2;
  animation-delay: 0.15s;
}

.advertiser-portal-hero-feed__card--bad2 {
  animation-name: advertiser-portal-feed-card-3;
  animation-delay: 0.15s;
}

/* Feed dividers: fade in after each post appears (siblings, not inside fading cards). */
.advertiser-portal-hero-feed__sep {
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-top: 1px solid rgba(15, 23, 42, 0.09);
  opacity: 0;
  animation-duration: var(--ap-feed-cycle);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-delay: 0.15s;
}

.advertiser-portal-hero-feed__sep--after-bad1 {
  animation-name: advertiser-portal-feed-sep-1;
}

.advertiser-portal-hero-feed__sep--after-ad {
  animation-name: advertiser-portal-feed-sep-2;
}

@keyframes advertiser-portal-feed-sep-1 {
  0%,
  3% {
    opacity: 0;
  }
  4%,
  76% {
    opacity: 1;
  }
  84%,
  100% {
    opacity: 0;
  }
}

@keyframes advertiser-portal-feed-sep-2 {
  0%,
  8% {
    opacity: 0;
  }
  9%,
  76% {
    opacity: 1;
  }
  84%,
  100% {
    opacity: 0;
  }
}

/* Each post: same 4% enter ramp; exit is one continuous 76→84% fade (no stepped opacity) so the stack doesn’t “hang” then vanish. */
@keyframes advertiser-portal-feed-card-1 {
  0%,
  1% {
    opacity: 0;
    transform: translateY(0.85rem) scale(0.96);
  }
  5%,
  76% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  84%,
  84% {
    opacity: 0;
    transform: translateY(-0.45rem) scale(0.985);
  }
  87%,
  88% {
    opacity: 0;
    transform: translateY(0.06rem) scale(0.982);
  }
  91%,
  92% {
    opacity: 0;
    transform: translateY(0.52rem) scale(0.971);
  }
  95%,
  100% {
    opacity: 0;
    transform: translateY(0.85rem) scale(0.96);
  }
}

@keyframes advertiser-portal-feed-card-2 {
  0%,
  6% {
    opacity: 0;
    transform: translateY(0.85rem) scale(0.96);
  }
  10%,
  76% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  84%,
  84% {
    opacity: 0;
    transform: translateY(-0.45rem) scale(0.985);
  }
  87%,
  88% {
    opacity: 0;
    transform: translateY(0.06rem) scale(0.982);
  }
  91%,
  92% {
    opacity: 0;
    transform: translateY(0.52rem) scale(0.971);
  }
  95%,
  100% {
    opacity: 0;
    transform: translateY(0.85rem) scale(0.96);
  }
}

@keyframes advertiser-portal-feed-card-3 {
  0%,
  10% {
    opacity: 0;
    transform: translateY(0.85rem) scale(0.96);
  }
  14%,
  76% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  84%,
  84% {
    opacity: 0;
    transform: translateY(-0.45rem) scale(0.985);
  }
  87%,
  88% {
    opacity: 0;
    transform: translateY(0.06rem) scale(0.982);
  }
  91%,
  92% {
    opacity: 0;
    transform: translateY(0.52rem) scale(0.971);
  }
  95%,
  100% {
    opacity: 0;
    transform: translateY(0.85rem) scale(0.96);
  }
}

@keyframes advertiser-portal-feed-ad-img-1 {
  /* Opacity 0 only while the ad *card* is hidden (same window as card-2: 0–6%); then ramp 6–10% with the glass. */
  0%,
  6% {
    opacity: 0;
  }
  10%,
  21% {
    opacity: 1;
  }
  26%,
  100% {
    opacity: 0;
  }
}

@keyframes advertiser-portal-feed-ad-img-2 {
  0%,
  25% {
    opacity: 0;
  }
  31%,
  42.75% {
    opacity: 1;
  }
  /* Longer ease-out into ad-3 so the swap reads softer (overlaps ad-3 ramp-in). */
  47.75% {
    opacity: 0.55;
  }
  53.75%,
  100% {
    opacity: 0;
  }
}

@keyframes advertiser-portal-feed-ad-img-3 {
  0%,
  38.75% {
    opacity: 0;
  }
  /* Earlier, gradual rise so both ads share opacity through the mid-40s–low-50s. */
  45.75% {
    opacity: 0.45;
  }
  51.75%,
  76% {
    opacity: 1;
  }
  84%,
  100% {
    opacity: 0;
  }
}

/* Advertiser Portal hero feed — single column + centered stack at ≤1280 (matches nav breakpoint). */
@media (max-width: 1280px) {
  .product-hero--advertiser-portal.product-hero--csam .product-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__copy {
    max-width: min(52rem, 100%);
    /* Stacked hero: copy + CTA sit a bit lower vs wide two-column TAP. */
    margin-top: calc(8.75rem + 3.35rem + clamp(1.75rem, 3.95vw, 3.25rem));
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__visual-inner.advertiser-portal-hero-feed__inner {
    transform: translate(0, 0);
    min-height: clamp(11rem, 30vh, 18rem);
    margin-top: clamp(0.35rem, 2vw, 1rem);
  }
}

.advertiser-portal-stack-section__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  /* Tight art ↔ copy on TAP; image hugs headline without a wide gutter. */
  gap: clamp(0.35rem, 1.1vw, 0.85rem);
  text-align: left;
}

@media (min-width: 769px) {
  .advertiser-portal-stack-section__inner {
    flex-wrap: nowrap;
  }
}

.advertiser-portal-stack-section__copy {
  flex: 1 1 min(0, 66rem);
  min-width: 0;
  max-width: min(70rem, 100%);
}

.advertiser-portal-stack-section__title,
.advertiser-portal-stack-section .page-api-split__title {
  text-align: left;
  max-width: none;
  line-height: 1.06;
}

.advertiser-portal-stack-section__body {
  margin-bottom: 0;
}

.advertiser-portal-stack-section__visual {
  --ap-stack-col-outer: min(44rem, 72vw);
  flex: 0 0 var(--ap-stack-col-outer);
  width: var(--ap-stack-col-outer);
  max-width: var(--ap-stack-col-outer);
  box-sizing: border-box;
  /*
   * Keyhole translateX is −11/19 of scene width; scene = 19/30 of this column’s outer width so bleed fits
   * inside the same box (padding = 11/30 × outer) — avoids flex min-content width ≈ scene + padding (was wrapping copy under art).
   */
  padding-left: calc((11 / 30) * var(--ap-stack-col-outer));
  display: flex;
  justify-content: flex-start;
  /* Bleed from art-shift translateX must not clip keyhole; padding already reserves horizontal room in flex. */
  overflow-x: visible;
  overflow-y: visible;
}

@media (max-width: 1366px) {
  .advertiser-portal-stack-section__visual {
    /* Slightly narrower art column vs ≥1367 (TAP stack only) — frees measure for copy. */
    --ap-stack-col-outer: min(38rem, 60vw);
  }
}

@media (min-width: 769px) {
  /* Art column: scene hugged to copy-side; strong translateX moves stack right (bleed padding eats flex-end). */
  .advertiser-portal-stack-section__visual {
    margin-left: 0;
    justify-content: flex-end;
  }

  .advertiser-portal-stack-section__visual-inner {
    transform: translateX(clamp(2.85rem, 11.5vw, 9.25rem));
  }
}

.advertiser-portal-stack-section__visual-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-height: clamp(8.5rem, 18vh, 13.5rem);
  padding-block: clamp(0.35rem, 1.5vw, 0.85rem);
  padding-left: 0;
  padding-right: clamp(0.25rem, 1vw, 0.65rem);
  overflow: visible;
}

/*
 * Stack section: square artboard. One `translateX` on `.art-shift`; beam full-bleed; keyhole + key live in
 * `.advertiser-portal-hero__keyhole-slot` sized to the keyhole PNG aspect (1294×2219). A square-only box made
 * `object-fit: contain` letterbox the tall keyhole vs the wide key differently — the key looked like it drifted.
 */
.advertiser-portal-stack-section .advertiser-portal-hero__scene {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.advertiser-portal-stack-section .advertiser-portal-hero__artboard {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  isolation: isolate;
  overflow: visible;
}

.advertiser-portal-stack-section .advertiser-portal-hero__layers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: visible;
}

.advertiser-portal-stack-section .advertiser-portal-hero__art-shift {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translateX(calc(-100% * 11 / 19));
  overflow: visible;
}

.advertiser-portal-stack-section .advertiser-portal-hero__keyhole-slot {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  /* Same fitted width as `object-fit: contain` for a tall keyhole inside a square (100% = art-shift side). */
  width: calc(100% * 1294 / 2219);
  max-width: 100%;
  box-sizing: border-box;
  pointer-events: none;
}

.advertiser-portal-stack-section .advertiser-portal-hero__keyhole-slot .advertiser-portal-hero__keyhole {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  max-width: none;
  z-index: 2;
}

/*
 * Key moor: percentages are of `.keyhole-slot` (keyhole’s layout box). `left`/`width` match the prior art-shift
 * math re-based on slot width: (26.25% − 31%) of art → ≈ −43.89% / 106.32% of slot (1294/2219 of art width),
 * minus a tiny extra horizontal offset so the key sits slightly left of that baseline.
 */
.advertiser-portal-stack-section .advertiser-portal-hero__keyhole-slot .advertiser-portal-hero__key-moor {
  position: absolute;
  left: calc(-43.887% - 6.5%);
  top: 0;
  width: 106.32%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.advertiser-portal-stack-section .advertiser-portal-hero__keyhole-slot .advertiser-portal-hero__key-moor .advertiser-portal-hero__key {
  position: absolute;
  left: 50%;
  top: calc(50% - 7.3%);
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  will-change: transform;
  animation: advertiser-portal-key-out 5.75s linear infinite;
  animation-delay: 0.75s;
}

.advertiser-portal-stack-section .advertiser-portal-hero__art-shift > .advertiser-portal-hero__beam {
  z-index: 0;
  /* Full keyhole height at the opening (right); flares taller away from the hole — light through a window. */
  top: 0;
  height: 100%;
  width: 190%;
  left: -12%;
  filter: blur(0.42rem);
  clip-path: polygon(0% -14%, 0% 114%, 100% 100%, 100% 0%);
  -webkit-clip-path: polygon(0% -14%, 0% 114%, 100% 100%, 100% 0%);
}

@media (max-width: 768px) {
  .advertiser-portal-stack-section__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .advertiser-portal-stack-section__copy {
    text-align: center;
    max-width: min(44rem, 100%);
  }

  .advertiser-portal-stack-section .page-api-split__title {
    text-align: center;
  }

  .advertiser-portal-stack-section__visual {
    --ap-stack-col-outer: min(40rem, 96vw);
    flex: 0 1 var(--ap-stack-col-outer);
    width: var(--ap-stack-col-outer);
    max-width: var(--ap-stack-col-outer);
    box-sizing: border-box;
    padding-left: calc((11 / 30) * var(--ap-stack-col-outer));
    justify-content: center;
    margin-left: 0;
  }

  .advertiser-portal-stack-section__visual-inner {
    justify-content: center;
    min-height: clamp(7.5rem, 20vw, 11rem);
    padding-inline: clamp(0.5rem, 3vw, 1rem);
  }
}

.advertiser-portal-hero__scene {
  position: relative;
  width: min(100%, 19rem);
  margin-left: auto;
  margin-right: auto;
}

.advertiser-portal-hero__beam {
  position: absolute;
  z-index: 1;
  /* Slightly inset from scene top/bottom so the cast is almost full keyhole height, not edge-to-edge. */
  left: clamp(-0.65rem, -4.75vw, 0.55rem);
  top: 5%;
  width: 165%;
  height: 90%;
  pointer-events: none;
  transform-origin: 0% 50%;
  /* Slightly warm / yellowed cast (reads as light through glass). */
  background: linear-gradient(
    90deg,
    rgba(255, 252, 238, 0) 0%,
    rgba(255, 252, 238, 0) 5%,
    rgba(255, 250, 228, 0.64) 14%,
    rgba(255, 247, 218, 0.37) 24%,
    rgba(255, 244, 210, 0.18) 46%,
    rgba(255, 246, 220, 0.078) 70%,
    rgba(255, 252, 238, 0) 100%
  );
  /* No clip-path — blur can bloom past the box; mask feathers top/bottom so edges stay soft. */
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.45) 10%,
    #000 22%,
    #000 78%,
    rgba(0, 0, 0, 0.45) 90%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.45) 10%,
    #000 22%,
    #000 78%,
    rgba(0, 0, 0, 0.45) 90%,
    transparent 100%
  );
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  filter: blur(0.34rem);
  opacity: 0;
  mix-blend-mode: screen;
  animation: advertiser-portal-beam-reveal 8.5s ease-in-out infinite;
  animation-delay: 0.2s;
}

html[data-theme='light'] .advertiser-portal-hero__beam {
  /* Warm off-white + a touch more yellow (same stops as dark beam). */
  background: linear-gradient(
    90deg,
    rgba(255, 246, 218, 0) 0%,
    rgba(255, 246, 218, 0) 5%,
    rgba(255, 242, 200, 0.62) 14%,
    rgba(255, 236, 188, 0.33) 26%,
    rgba(255, 232, 178, 0.135) 50%,
    rgba(255, 238, 195, 0.055) 74%,
    rgba(255, 244, 210, 0) 100%
  );
  mix-blend-mode: soft-light;
  /* Match dark beam: same vertical feather for soft top/bottom. */
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.45) 10%,
    #000 22%,
    #000 78%,
    rgba(0, 0, 0, 0.45) 90%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.45) 10%,
    #000 22%,
    #000 78%,
    rgba(0, 0, 0, 0.45) 90%,
    transparent 100%
  );
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}

.advertiser-portal-hero__layers {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
}

.advertiser-portal-hero__keyhole {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  /* Shift art left; layout box unchanged so the key (absolute to .layers) stays put. */
  transform: translateX(clamp(-11rem, -42vw, -4.15rem));
}

.advertiser-portal-hero__key {
  position: absolute;
  left: calc(50% - clamp(2.65rem, 8.4vw, 4.85rem));
  top: calc(50% - clamp(1.38rem, 3.55vw, 2.15rem));
  z-index: 3;
  width: 103%;
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  will-change: transform;
  opacity: 1;
  animation: advertiser-portal-key-out 5.75s linear infinite;
  animation-delay: 0.75s;
}

html.product-hero-anim-paused .advertiser-portal-hero__beam,
html.product-hero-anim-paused .advertiser-portal-hero__key,
html.product-hero-anim-paused .advertiser-portal-hero-feed__card,
html.product-hero-anim-paused .advertiser-portal-hero-feed__sep,
html.product-hero-anim-paused .advertiser-portal-hero-feed__img--ad {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .advertiser-portal-hero__beam,
  .advertiser-portal-hero__key,
  .advertiser-portal-hero-feed__card,
  .advertiser-portal-hero-feed__sep,
  .advertiser-portal-hero-feed__img--ad {
    animation: none !important;
  }

  .advertiser-portal-hero__beam {
    opacity: 0.72;
    transform: scaleX(1);
    filter: blur(0.34rem);
    mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.45) 10%,
      #000 22%,
      #000 78%,
      rgba(0, 0, 0, 0.45) 90%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.45) 10%,
      #000 22%,
      #000 78%,
      rgba(0, 0, 0, 0.45) 90%,
      transparent 100%
    );
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
  }

  .advertiser-portal-hero__key {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .advertiser-portal-hero-feed__card {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .advertiser-portal-hero-feed__sep {
    opacity: 1;
    transform: none;
  }

  .advertiser-portal-hero-feed__img--ad {
    opacity: 0;
  }

  .advertiser-portal-hero-feed__img--ad1 {
    opacity: 1;
  }
}

@keyframes advertiser-portal-beam-reveal {
  /* Looped: swell on → fade off → swell on → taper off; 0% matches 100% for seamless repeat. */
  0%,
  100% {
    opacity: 0.1;
    transform: scaleX(0.14) translateX(-3%);
    filter: blur(0.62rem);
  }
  20% {
    opacity: 0.9;
    transform: scaleX(0.96) translateX(0);
    filter: blur(0.36rem);
  }
  32% {
    opacity: 1;
    transform: scaleX(1) translateX(0);
    filter: blur(0.3rem);
  }
  45% {
    opacity: 0.42;
    transform: scaleX(0.58) translateX(0);
    filter: blur(0.44rem);
  }
  56% {
    opacity: 0.06;
    transform: scaleX(0.16) translateX(-2%);
    filter: blur(0.68rem);
  }
  72% {
    opacity: 0.85;
    transform: scaleX(0.92) translateX(0);
    filter: blur(0.34rem);
  }
  86% {
    opacity: 0.48;
    transform: scaleX(0.68) translateX(0);
    filter: blur(0.48rem);
  }
}

@keyframes advertiser-portal-key-out {
  /* One sin cycle; linear + dense samples = steady roll (no ease “stops” at each %). */
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  6.25% {
    transform: translate(-50%, -50%) rotate(1.23deg);
  }
  12.5% {
    transform: translate(-50%, -50%) rotate(2.26deg);
  }
  18.75% {
    transform: translate(-50%, -50%) rotate(2.96deg);
  }
  25% {
    transform: translate(-50%, -50%) rotate(3.2deg);
  }
  31.25% {
    transform: translate(-50%, -50%) rotate(2.96deg);
  }
  37.5% {
    transform: translate(-50%, -50%) rotate(2.26deg);
  }
  43.75% {
    transform: translate(-50%, -50%) rotate(1.23deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  56.25% {
    transform: translate(-50%, -50%) rotate(-1.23deg);
  }
  62.5% {
    transform: translate(-50%, -50%) rotate(-2.26deg);
  }
  68.75% {
    transform: translate(-50%, -50%) rotate(-2.96deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(-3.2deg);
  }
  81.25% {
    transform: translate(-50%, -50%) rotate(-2.96deg);
  }
  87.5% {
    transform: translate(-50%, -50%) rotate(-2.26deg);
  }
  93.75% {
    transform: translate(-50%, -50%) rotate(-1.23deg);
  }
}

/* CSAM hero — 1367–1727 (laptop band below 16in MBP 1728px): ease offsets tuned for ≥1728 */
@media (max-width: 1727px) and (min-width: 1367px) {
  .product-hero--csam .product-hero__copy {
    margin-top: calc(8.75rem + 2.35rem);
  }

  .product-hero--csam .product-hero__visual-inner {
    transform: translate(
      clamp(-2rem, -5vw, -0.85rem),
      clamp(5rem, 12vh, 9.5rem)
    );
  }

  .page-main--product-hero .product-hero {
    padding-bottom: clamp(3.25rem, 6vh, 4.75rem);
  }
}

/* CSAM hero — 1367–1688: nudge copy up + stack down vs generic 1367–1727 band */
@media (max-width: 1688px) and (min-width: 1367px) {
  .product-hero--csam .product-hero__copy {
    margin-top: calc(8.75rem + 2.12rem);
  }

  .product-hero--csam .product-hero__visual-inner {
    transform: translate(
      clamp(-2rem, -5vw, -0.85rem),
      clamp(7.2rem, 15.6vh, 12.1rem)
    );
  }
}

/* CSAM hero — ≤1550 & ≥1367: PNG stack lower than 1367–1688 band (must follow that block) */
@media (max-width: 1550px) and (min-width: 1367px) {
  .product-hero--csam .product-hero__visual-inner {
    transform: translate(
      clamp(-2rem, -5vw, -0.85rem),
      clamp(9.15rem, 18.5vh, 14.35rem)
    );
  }
}

/* CSAM hero — ≤1470 & ≥1367: modestly smaller headline + sub vs full laptop size */
@media (max-width: 1470px) and (min-width: 1367px) {
  .product-hero--csam .product-hero__title {
    font-size: clamp(2.05rem, 4.05vw, 2.92rem);
    line-height: 1.52;
  }

  .product-hero--csam .product-hero__sub {
    font-size: clamp(1.45rem, 3.05vw, 1.86rem);
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__sub {
    font-size: calc(clamp(1.45rem, 3.05vw, 1.86rem) + 2px);
  }
}

/* CSAM product hero (product.html) — ≤1280: scale headline, footnote, and CTA pill together */
@media (max-width: 1280px) {
  .product-hero--csam .product-hero__title {
    font-size: clamp(1.62rem, 3.65vw, 2.68rem);
    line-height: 1.5;
    margin-bottom: clamp(0.72rem, 1.55vw, 1.15rem);
  }

  .product-hero--csam .product-hero__title-lede {
    margin-top: clamp(0.8rem, 1.55vw, 1.2rem);
  }

  .product-hero--csam .product-hero__sub {
    font-size: clamp(1.22rem, 2.72vw, 1.84rem);
    margin-bottom: clamp(1.85rem, 4vw, 3.15rem);
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title-lede {
    font-size: calc(clamp(1.08rem, 2.42vw, 1.78rem) + 3px);
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__sub {
    font-size: calc(clamp(1.22rem, 2.72vw, 1.84rem) + 2px);
  }

  .product-hero--csam .product-hero__cta.btn-hero,
  html[data-theme='light'] .product-hero--csam .product-hero__cta.btn-hero {
    font-size: clamp(0.94rem, 1.88vw, 1.32rem);
    padding: clamp(0.36rem, 0.88vw, 0.48rem) clamp(1.15rem, 3.1vw, 1.95rem);
    gap: clamp(0.42rem, 1.05vw, 0.65rem);
    border-radius: clamp(20px, 4vw, 27px);
  }

  .product-hero--csam .product-hero__cta.btn-hero::before,
  html[data-theme='light'] .product-hero--csam .product-hero__cta.btn-hero::before {
    border-radius: clamp(20px, 4vw, 27px);
  }

  .product-hero--csam .product-hero__cta.btn-hero:hover,
  html[data-theme='light'] .product-hero--csam .product-hero__cta.btn-hero:hover {
    font-size: clamp(0.98rem, 1.98vw, 1.36rem);
  }

  .product-hero--csam .product-hero__cta .btn-arrow {
    width: clamp(1.08rem, 2.72vw, 1.48rem);
    height: clamp(1.08rem, 2.72vw, 1.48rem);
  }

  .product-hero--csam .product-hero__cta .btn-arrow svg {
    width: clamp(0.72rem, 1.68vw, 0.95rem);
    height: clamp(0.72rem, 1.68vw, 0.95rem);
  }

  .product-hero--csam .product-hero__cta.btn-hero:hover .btn-arrow svg,
  html[data-theme='light'] .product-hero--csam .product-hero__cta.btn-hero:hover .btn-arrow svg {
    width: clamp(0.78rem, 1.78vw, 1rem);
    height: clamp(0.78rem, 1.78vw, 1rem);
  }

  /* What we aren’t — hero CTA matches CSAM/deepfake hero pill scale at ≤1280 */
  .what-not-hero .product-hero__cta.btn-hero,
  html[data-theme='light'] .what-not-hero .product-hero__cta.btn-hero {
    font-size: clamp(0.94rem, 1.88vw, 1.32rem);
    padding: clamp(0.36rem, 0.88vw, 0.48rem) clamp(1.15rem, 3.1vw, 1.95rem);
    gap: clamp(0.42rem, 1.05vw, 0.65rem);
    border-radius: clamp(20px, 4vw, 27px);
  }

  .what-not-hero .product-hero__cta.btn-hero::before,
  html[data-theme='light'] .what-not-hero .product-hero__cta.btn-hero::before {
    border-radius: clamp(20px, 4vw, 27px);
  }

  .what-not-hero .product-hero__cta.btn-hero:hover,
  html[data-theme='light'] .what-not-hero .product-hero__cta.btn-hero:hover {
    font-size: clamp(0.98rem, 1.98vw, 1.36rem);
  }

  .what-not-hero .product-hero__cta .btn-arrow {
    width: clamp(1.08rem, 2.72vw, 1.48rem);
    height: clamp(1.08rem, 2.72vw, 1.48rem);
  }

  .what-not-hero .product-hero__cta .btn-arrow svg {
    width: clamp(0.72rem, 1.68vw, 0.95rem);
    height: clamp(0.72rem, 1.68vw, 0.95rem);
  }

  .what-not-hero .product-hero__cta.btn-hero:hover .btn-arrow svg,
  html[data-theme='light'] .what-not-hero .product-hero__cta.btn-hero:hover .btn-arrow svg {
    width: clamp(0.78rem, 1.78vw, 1rem);
    height: clamp(0.78rem, 1.78vw, 1rem);
  }
}

.product-hero__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center right;
  pointer-events: none;
  display: block;
}

/* Face slides horizontally (subtle); brackets fade — 5s rhythm */
.product-hero__layer--face {
  transform-origin: center center;
  animation: product-hero-svg-face-pulse 5s ease-in-out infinite;
}

.product-hero__layer--brackets {
  animation: product-hero-svg-brackets-fade 5s ease-in-out infinite;
}

/* Inline / external hero SVG (e.g. assets/Full.svg): same motion hooks */
.product-hero__illustration-svg.product-hero__illustration {
  overflow: visible;
}

.product-hero__illustration-svg .product-hero-svg__face {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: product-hero-svg-face-pulse 5s ease-in-out infinite;
}

.product-hero__illustration-svg .product-hero-svg__brackets {
  animation: product-hero-svg-brackets-fade 5s ease-in-out infinite;
}

@keyframes product-hero-svg-face-pulse {
  0%,
  100% {
    transform: translateX(-3%);
  }
  50% {
    transform: translateX(3%);
  }
}

@keyframes product-hero-svg-brackets-fade {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Tab in background / hero off-screen — stop layered hero motion */
html.product-hero-anim-paused .product-hero__layer--face,
html.product-hero-anim-paused .product-hero__layer--brackets,
html.product-hero-anim-paused .product-hero__illustration-svg .product-hero-svg__face,
html.product-hero-anim-paused .product-hero__illustration-svg .product-hero-svg__brackets {
  animation-play-state: paused;
}

html.product-hero-anim-paused .product-hero .product-hero__dot {
  animation: none;
  filter: none;
  opacity: 0.22;
  mix-blend-mode: normal;
}

/* Phone-width hero: single column + art below copy. Use 767px (not 768) so iPad mini portrait (768 CSS px) keeps the
   two-column hero and tablet portrait GIF rules — max-width:768px matched exactly 768 and stacked the GIF under copy. */
@media (max-width: 767px) {
  .product-hero__inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .product-hero--deepfake .product-hero__inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .product-hero__visual {
    justify-content: center;
    padding: clamp(1.5rem, 5vw, 2.5rem) 2rem 0;
    order: 2;
  }

  .product-hero__copy {
    padding-left: clamp(2.45rem, 5.75vw, 2.95rem);
    padding-right: 2rem;
    order: 1;
  }

  .product-hero__visual-inner {
    justify-content: center;
    min-height: clamp(13.25rem, 36vw, 18rem);
    --ph-illustration-max: min(22.75rem, 58vmin);
    transform: translateX(clamp(-0.85rem, -3.25vw, -0.45rem));
  }

  .product-hero--csam:not(.product-hero--advertiser-portal) .product-hero__copy {
    margin-top: calc(clamp(4.5rem, 14vw, 7.5rem) + 1.35rem);
  }

  .product-hero--csam:not(.product-hero--advertiser-portal) .product-hero__visual-inner {
    --ph-illustration-max: min(28.75rem, 70vmin);
    transform: translate(
      clamp(-0.85rem, -3.25vw, -0.45rem),
      clamp(10.65rem, 32.5vw, 15.85rem)
    );
  }

  .product-hero--deepfake .product-hero__copy--deepfake {
    margin-top: calc(clamp(4.5rem, 14vw, 7.5rem) + 2.75rem);
  }

  .product-hero--deepfake .product-hero__gif {
    transform: translate(
      clamp(-0.55rem, -0.35vw, 0.35rem),
      clamp(13.15rem, 37vw, 20.15rem)
    );
  }

  .product-hero--deepfake .product-hero__title.product-hero__title--deepfake {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /*
   * Product pages (CSAM + Deepfake): narrower gutters than global ≤1366 — matches hero bleed + CTA/footer calc above.
   */
  body:has(#main.page-main--product-hero .product-hero--csam),
  body:has(#main.page-main--product-hero .product-hero--deepfake),
  body:has(#main.page-main--product-hero .product-hero--advertiser-portal) {
    --page-margin: clamp(0.65rem, 3vw, 1rem);
    --page-text-inset-left: clamp(0.75rem, 3.35vw, 1.15rem);
  }

  .page-main--product-hero:has(.product-hero--csam) .page-section--duotone-noise > .page-inner,
  .page-main--product-hero:has(.product-hero--deepfake) .page-section--duotone-noise > .page-inner,
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split
    .page-inner.page-api-split,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split
    .page-inner.page-api-split,
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats
    .page-inner,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--performance-stats
    .page-inner {
    padding-left: clamp(0.75rem, 3.35vw, 1.15rem);
    padding-right: clamp(0.75rem, 3.35vw, 1.15rem);
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__copy {
    padding-left: clamp(0.75rem, 3.35vw, 1.15rem);
    padding-right: clamp(0.75rem, 3.35vw, 1.15rem);
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__visual {
    padding-left: clamp(0.65rem, 3vw, 1.05rem);
    padding-right: clamp(0.65rem, 3vw, 1.05rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__copy--deepfake {
    padding-left: clamp(0.75rem, 3.35vw, 1.15rem);
    padding-right: clamp(0.75rem, 3.35vw, 1.15rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__visual {
    padding-left: clamp(0.65rem, 3vw, 1.05rem);
    padding-right: clamp(0.65rem, 3vw, 1.05rem);
  }

  /*
   * Deepfake product hero — all ≤767 (not only 431–767 phablet / landscape tail): center copy + art in the grid so
   * narrow portrait and small phones match Duo-style wide layouts (generic .product-hero__copy still uses heavier left inset).
   */
  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__inner {
    justify-items: center;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__copy.product-hero__copy--deepfake {
    justify-self: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: min(100%, 36rem);
    max-width: 100%;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__title.product-hero__title--deepfake,
  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__deepfake-line,
  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__deepfake-line--semibold {
    margin-left: auto;
    margin-right: auto;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__visual-inner {
    transform: translateX(0);
    justify-content: center;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__gif {
    margin-left: auto;
    margin-right: auto;
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__visual-inner {
    transform: translate(
      clamp(-0.85rem, -3.25vw, -0.45rem),
      clamp(2.35rem, 7.5vw, 5.35rem)
    );
  }

  /* Section H2s: center titles here (≤767 CSAM). Model I/O “Detect…” stays left — layout handled in CSAM Model I/O block below. */
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split
    .page-api-split__title,
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section
    .page-section-title.page-product-duotone-heading {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /*
   * CSAM Model I/O (≤767): one bullet list; Files image beside input column; “Detect…” matches API section title scale;
   * Model Input/Output h3s larger (body copy unchanged); Model Output row right-aligned. Deepfake Model I/O unchanged.
   */
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(44vw, 11.25rem));
    grid-template-rows: auto auto;
    gap: clamp(0.55rem, 2vw, 0.95rem) clamp(0.45rem, 1.85vw, 0.75rem);
    align-items: center;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__col--input {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__col--visual {
    grid-column: 2;
    grid-row: 1;
    order: 0;
    margin-top: 0;
    padding-top: 0;
    justify-self: end;
    align-self: center;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__col--output {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: right;
    padding-left: 0;
    padding-right: 0;
    margin-top: clamp(0.45rem, 1.85vw, 0.95rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__col--output
    .product-io__rule {
    margin-left: auto;
    margin-right: 0;
    max-width: min(28rem, 100%);
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__img:not(.product-io__img--deepfake-scales) {
    max-width: min(10.75rem, 44vw);
    width: 100%;
    margin: 0;
    transform: none;
  }

  /* One column of bullets only at ≤767 (phablet + narrow phones); ≥768 uses two columns on the <ul> (see base). */
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__lists
    .product-io__list {
    display: flex;
    flex-direction: column;
    grid-template-columns: initial;
    grid-template-rows: initial;
    grid-auto-flow: initial;
    gap: 0.3rem;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__list li {
    font-size: clamp(0.92rem, 2.75vw, 1.08rem);
    line-height: 1.48;
  }

  /* “Detect…” uses same scale as “A One-Time API Plug-In” (page-wide --product-csam-section-heading-fs); do not shrink here. */
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__heading {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__col--input
    .product-io__col-heading {
    font-size: clamp(1.28rem, 3.45vw, 1.62rem);
    margin-bottom: 0.6rem;
    text-align: left;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__col--output
    .product-io__col-heading {
    font-size: clamp(1.28rem, 3.45vw, 1.62rem);
    margin-bottom: 0.6rem;
    text-align: right;
    margin-left: auto;
    width: 100%;
    max-width: min(28rem, 100%);
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__output {
    font-size: clamp(0.9rem, 2.7vw, 1.05rem);
    line-height: 1.55;
    text-align: right;
    margin-left: auto;
    max-width: min(36rem, 100%);
  }
}

/*
 * Product pages (CSAM + Deepfake) — iPhone band (≤430px): section inners + hero copy/visual; deepfake hero mirrors CSAM rhythm.
 * Global --page-margin / --page-text-inset-left for all pages at this width live at end of file (body !important).
 * Placed after generic ≤767 product rules so padding wins cascade. Phablet 431–767 unchanged.
 */
@media (max-width: 440px) {
  .page-main--product-hero:has(.product-hero--csam) .page-section--duotone-noise > .page-inner,
  .page-main--product-hero:has(.product-hero--deepfake) .page-section--duotone-noise > .page-inner,
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split
    .page-inner.page-api-split,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split
    .page-inner.page-api-split,
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats
    .page-inner,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--performance-stats
    .page-inner {
    padding-left: clamp(0.38rem, 2.45vw, 0.68rem);
    padding-right: clamp(0.38rem, 2.45vw, 0.68rem);
  }

  /* Extra air under Peak Performance (beats generic ≤1280 `padding-bottom` on this section). */
  .page-main--product-hero:has(.product-hero--csam) > .page-section.page-section--performance-stats,
  .page-main--product-hero:has(.product-hero--deepfake) > .page-section.page-section--performance-stats {
    padding-bottom: clamp(3.5rem, 8.25vw, 5.5rem);
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__copy {
    padding-left: clamp(0.38rem, 2.55vw, 0.7rem);
    padding-right: clamp(0.38rem, 2.55vw, 0.7rem);
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__visual {
    padding-left: clamp(0.3rem, 2.1vw, 0.52rem);
    padding-right: clamp(0.3rem, 2.1vw, 0.52rem);
  }

  /*
   * CSAM product hero — ≤430: extra `.product-hero__inner` top padding (PNG stack sizing is in the later ≤430 CSAM block ~16291).
   * Pro Max–only extra air lives in `(min-height: 844px)` at EOF.
   */
  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__inner {
    padding-top: clamp(3.25rem, 13vw, 4.75rem);
  }

  /* CSAM `.product-hero__visual-inner` sizing lives in the later ≤430 “CSAM product” block (~16296) so it wins cascade. */

  /*
   * Deepfake product — ≤430 only (deepfake.html): phablet block is 431–767; here we mirror CSAM ≤430 hero / Model I/O /
   * API / law recap so narrow phones match product.html. Book-a-call keeps `.btn-deepfake-started` colors only.
   */
  #main.page-main.page-main--product-hero:has(.product-hero--deepfake) {
    overflow-x: clip;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero {
    width: calc(100% + 2 * var(--page-margin)) !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--page-margin)) !important;
    margin-right: calc(-1 * var(--page-margin)) !important;
    box-sizing: border-box;
    height: auto;
    max-height: none;
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(6.15rem, 17.65vw, 7.95rem));
    padding-bottom: clamp(5.15rem, 11.5vw, 6.1rem);
    padding-left: calc(var(--page-margin) * 1.5);
    padding-right: calc(var(--page-margin) * 1.5);
    overflow-x: clip;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__inner {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(0.5rem, 2.1vw, 1.05rem);
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    /* Match CSAM ≤430: push hero column down; GIF scales from `--ph-illustration-max` on `__visual-inner`. */
    padding-top: clamp(3.25rem, 13vw, 4.75rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__copy.product-hero__copy--deepfake {
    margin-top: 0;
    text-align: center;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
    width: min(100%, 36rem);
    max-width: 100%;
    box-sizing: border-box;
    padding-left: clamp(0.38rem, 2.55vw, 0.7rem);
    padding-right: clamp(0.38rem, 2.55vw, 0.7rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__visual {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    padding: 0 clamp(0.3rem, 2.1vw, 0.52rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__title.product-hero__title--deepfake {
    font-size: clamp(1.58rem, 6.65vw, 2.22rem);
    line-height: 1.22;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__deepfake-line {
    font-size: calc(clamp(1.12rem, 3.85vw, 1.38rem) + 1px);
    line-height: 1.38;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__deepfake-line--semibold {
    font-size: calc(clamp(1.18rem, 3.95vw, 1.42rem) + 1px);
    line-height: 1.34;
    margin-bottom: clamp(1.35rem, 4.25vw, 2.15rem);
  }

  /* GIF: inherit `max-width` / `max-height` from `--ph-illustration-max` on `__visual-inner` (same cap as CSAM stack). */
  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__gif {
    margin-left: auto;
    margin-right: auto;
    width: auto;
    height: auto;
    transform: translate(clamp(0.85rem, 2.35vw, 1.45rem), 0);
  }

  /* Match CSAM ≤430 `__visual-inner`: art column height + translate; GIF uses shared `--ph-illustration-max`. */
  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__visual-inner {
    --ph-illustration-max: min(23.75rem, min(100vw - 1rem, 32dvh));
    min-height: clamp(12.5rem, 29vw, 17rem);
    transform: translate(
      calc(clamp(-0.85rem, -3.25vw, -0.45rem) + 0.72rem),
      clamp(2.15rem, 7.25vw, 4.75rem)
    );
    justify-content: center;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__cta.btn-hero,
  html[data-theme='light'] .page-main--product-hero:has(.product-hero--deepfake) .product-hero__cta.btn-hero {
    font-size: calc(clamp(1.2rem, 2.4vw, 1.55rem) - 1px);
    padding: 0.5rem 2.2rem;
    line-height: 1.2;
    gap: 0.65rem;
    border-radius: 28px;
    margin-left: auto;
    margin-right: auto;
    margin-top: clamp(1.15rem, calc(3.25vw + 1.1dvh), 2.65rem);
    justify-content: center;
    width: 100%;
    max-width: min(17rem, 100%);
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__cta.btn-hero::before,
  html[data-theme='light'] .page-main--product-hero:has(.product-hero--deepfake) .product-hero__cta.btn-hero::before {
    border-radius: 28px;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__cta.btn-hero:hover,
  html[data-theme='light'] .page-main--product-hero:has(.product-hero--deepfake) .product-hero__cta.btn-hero:hover {
    font-size: calc(clamp(1.26rem, 2.5vw, 1.62rem) - 1px);
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__cta.btn-hero .btn-arrow,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--deepfake)
    .product-hero__cta.btn-hero
    .btn-arrow {
    position: relative;
    z-index: 1;
    width: 1.5rem;
    height: 1.5rem;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid currentColor;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__cta.btn-hero .btn-arrow svg,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--deepfake)
    .product-hero__cta.btn-hero
    .btn-arrow
    svg {
    width: 1rem;
    height: 1rem;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__cta.btn-hero:hover .btn-arrow svg,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--deepfake)
    .product-hero__cta.btn-hero:hover
    .btn-arrow
    svg {
    width: 1.05rem;
    height: 1.05rem;
    stroke: currentColor;
    stroke-width: 2.1;
  }

  /* Model I/O (Problem / scales / Not) — same 2×2 grid + Files-scale art as CSAM ≤767 (applies here via ≤430). */
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker) {
    margin-bottom: clamp(2.25rem, 6vw, 3.85rem);
    padding-bottom: clamp(2.15rem, 5.5vw, 3.35rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__grid {
    display: grid !important;
    flex-direction: unset;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(44vw, 11.25rem));
    grid-template-rows: auto auto;
    gap: clamp(0.55rem, 2vw, 0.95rem) clamp(0.45rem, 1.85vw, 0.75rem);
    margin-bottom: 0;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__col--input {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    margin-top: 0;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__col--visual {
    grid-column: 2;
    grid-row: 1;
    order: 0;
    margin-top: 0;
    padding-top: 0;
    justify-self: end;
    align-self: center;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__col--output {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: right;
    padding-left: 0;
    padding-right: 0;
    margin-top: clamp(0.45rem, 1.85vw, 0.95rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__img.product-io__img--deepfake-scales {
    max-width: min(10.75rem, 44vw);
    max-height: none;
    width: 100%;
    margin: 0;
    transform: none;
    object-fit: contain;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__heading.product-io__heading--deepfake-kicker {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: clamp(0.85rem, 2.65vw, 1.45rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__col--input
    .product-io__col-heading {
    font-size: clamp(1.28rem, 3.45vw, 1.62rem);
    margin-bottom: 0.6rem;
    text-align: left;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__col--output
    .product-io__col-heading {
    font-size: clamp(1.28rem, 3.45vw, 1.62rem);
    margin-bottom: 0.6rem;
    text-align: right;
    margin-left: auto;
    width: 100%;
    max-width: min(28rem, 100%);
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__col--input
    .product-io__rule {
    max-width: min(12.5rem, 82%);
    margin-left: 0;
    margin-right: auto;
    border-top-width: 2px;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__col--output
    .product-io__rule {
    max-width: min(12.5rem, 82%);
    margin-left: auto;
    margin-right: 0;
    border-top-width: 2px;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__problem-line {
    font-size: calc(clamp(0.92rem, 2.75vw, 1.08rem) + 1px);
    line-height: 1.48;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__col--input
    .product-io__problem-line {
    max-width: min(13.25rem, 96%);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__col--output
    .product-io__problem-line {
    max-width: min(13.25rem, 96%);
    margin-left: auto;
  }

  /* One-Time API — less air above the plug image (visual is order:-1); law recap band unchanged. */
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap) {
    padding-top: clamp(0.55rem, 1.85vw, 1rem);
  }

  /* One-Time API — match CSAM ≤430 plug stack; `.btn-deepfake-started` keeps deepfake gradient only. */
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.32rem, 1.25vw, 0.65rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: min(34rem, 100%);
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__copy {
    text-align: center;
    justify-self: center;
    width: 100%;
    max-width: min(34rem, 100%);
    margin-left: auto;
    margin-right: auto;
    padding-top: clamp(0.12rem, 0.65vw, 0.35rem);
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__lead,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__body {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__cta {
    margin-left: auto;
    margin-right: auto;
    align-self: center;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__visual {
    order: -1;
    justify-content: center;
    justify-self: center;
    margin-top: clamp(0.02rem, 0.35vw, 0.15rem);
    margin-bottom: clamp(0.25rem, 1.15vw, 0.5rem);
    margin-left: auto;
    margin-right: auto;
    max-width: min(11.15rem, 76vw);
    transform: none;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__img {
    max-width: min(10.15rem, 72vw);
    margin-left: auto;
    margin-right: auto;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-deepfake-started.page-api-split__cta,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-deepfake-started.page-api-split__cta {
    font-size: clamp(0.98rem, 2.08vw, 1.42rem);
    padding: clamp(0.42rem, 1vw, 0.55rem) clamp(1.35rem, 3.5vw, 2.2rem);
    line-height: 1.2;
    gap: clamp(0.5rem, 1.25vw, 0.72rem);
    border-radius: clamp(22px, 4.5vw, 30px);
    align-items: center;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-deepfake-started.page-api-split__cta::before {
    border-radius: clamp(22px, 4.5vw, 30px);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-deepfake-started.page-api-split__cta:hover,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-deepfake-started.page-api-split__cta:hover {
    font-size: clamp(1.02rem, 2.18vw, 1.48rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-deepfake-started.page-api-split__cta
    .btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(1.42rem, 3.35vw, 1.86rem);
    height: clamp(1.42rem, 3.35vw, 1.86rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-deepfake-started.page-api-split__cta
    .btn-arrow
    svg {
    width: clamp(0.96rem, 2.2vw, 1.22rem);
    height: clamp(0.96rem, 2.2vw, 1.22rem);
    transform: translate(-0.02rem, -0.065rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-deepfake-started.page-api-split__cta:hover
    .btn-arrow
    svg {
    width: clamp(1.02rem, 2.32vw, 1.28rem);
    height: clamp(1.02rem, 2.32vw, 1.28rem);
    transform: translate(0.1rem, -0.065rem);
  }

  /* Law recap — hourglass a touch larger; less margin/padding above the image stack (body row↔visual; title↔body row-gap stays generic ≤900). */
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .page-api-split__visual.page-api-split__visual--stacked {
    margin-top: clamp(0.42rem, 1.55vw, 0.88rem);
    padding-top: clamp(0.08rem, 0.45vw, 0.28rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .page-api-split__img--hourglass {
    width: auto;
    max-width: min(15.35rem, 95vw);
    height: auto;
    margin-top: clamp(0.22rem, 1vw, 0.55rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .page-api-split__body-stack {
    margin-bottom: clamp(-0.42rem, -1.25vw, -0.12rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual {
    font-size: calc(clamp(0.98rem, 2.08vw, 1.42rem) - 3px);
    padding: clamp(0.42rem, 1vw, 0.55rem) clamp(1.35rem, 3.5vw, 2.2rem);
    line-height: 1.2;
    gap: clamp(0.5rem, 1.25vw, 0.72rem);
    border-radius: clamp(22px, 4.5vw, 30px);
    align-items: center;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual::before {
    border-radius: clamp(22px, 4.5vw, 30px);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual:hover,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual:hover {
    font-size: calc(clamp(1.02rem, 2.18vw, 1.48rem) - 3px);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual
    .btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(1.28rem, 3.05vw, 1.68rem);
    height: clamp(1.28rem, 3.05vw, 1.68rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual
    .btn-arrow
    svg {
    width: clamp(0.88rem, 2.05vw, 1.1rem);
    height: clamp(0.88rem, 2.05vw, 1.1rem);
    transform: translate(-0.02rem, 0);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual:hover
    .btn-arrow
    svg {
    width: clamp(0.92rem, 2.12vw, 1.14rem);
    height: clamp(0.92rem, 2.12vw, 1.14rem);
    transform: translate(0.1rem, 0);
  }
}

/*
 * Deepfake product (deepfake.html) — phablet only (431–767): hero GIF smaller; Model I/O + One-Time API +
 * Unparalleled Performance match CSAM phablet bands in the block below. CSAM + deepfake iPhone (≤430) in block above.
 * ≥768 unchanged here.
 */
@media (max-width: 767px) and (min-width: 441px) {
  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__copy--deepfake {
    text-align: center;
    padding-left: clamp(0.75rem, 3.35vw, 1.15rem);
    padding-right: clamp(0.75rem, 3.35vw, 1.15rem);
    /* Phablet-only hero copy vertical (≤430 / ≥768 unchanged). */
    margin-top: calc(clamp(3.35rem, 11.25vw, 5.1rem) + 1.1rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__title.product-hero__title--deepfake,
  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__deepfake-line,
  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__deepfake-line--semibold {
    margin-left: auto;
    margin-right: auto;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__visual-inner {
    --ph-illustration-max: min(12.75rem, 38vmin);
    min-height: clamp(6rem, 18vw, 9rem);
    transform: translateX(0);
    justify-content: center;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__gif {
    margin-left: auto;
    margin-right: auto;
    max-width: min(11.25rem, 70vw);
    width: auto;
    height: auto;
    transform: translate(
      0,
      clamp(-0.35rem, -0.85vw, 0.15rem)
    );
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__deepfake-line--semibold {
    margin-bottom: clamp(1.85rem, 4.15vw, 2.55rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__cta.btn-hero {
    margin-top: clamp(0.35rem, 1.45vw, 0.75rem);
  }

  /*
   * Model I/O (Problem / scales / Not) — same grid as CSAM ≤767 + phablet column widths (overrides generic ≤900 flex stack).
   * Scales cap + Detect ↔ “The Problem” air: phablet-only (431–767); other widths use global + ≤1280 / ≤900 bands.
   */
  /* Extra air under Model I/O: padding inside the duotone band (global padding-bottom is 0 on this section). */
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker) {
    margin-bottom: clamp(3rem, 7.5vw, 5.5rem);
    padding-bottom: clamp(2.85rem, 7vw, 5rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__grid {
    display: grid !important;
    flex-direction: unset;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(48.5vw, 12.45rem));
    grid-template-rows: auto auto;
    gap: 0 clamp(0.45rem, 1.85vw, 0.75rem);
    margin-bottom: 0;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__col--input {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    margin-top: 0;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__col--visual {
    grid-column: 2;
    grid-row: 1;
    order: 0;
    margin-top: clamp(-1.55rem, -5.5vw, -0.65rem);
    padding-top: 0;
    justify-self: end;
    align-self: start;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__col--output {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: right;
    padding-left: 0;
    padding-right: 0;
    margin-top: clamp(-0.55rem, -2.25vw, 0.35rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__col--output
    .product-io__rule {
    margin-left: auto;
    margin-right: 0;
    max-width: min(28rem, 100%);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__img.product-io__img--deepfake-scales {
    max-width: min(9.5rem, 38vw);
    max-height: min(14.25rem, 40vmin);
    width: 100%;
    margin: 0;
    transform: translateY(clamp(-1.65rem, -5.75vw, -0.72rem));
    object-fit: contain;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__heading.product-io__heading--deepfake-kicker {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: clamp(1.45rem, 3.85vw, 2.65rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__col--input
    .product-io__col-heading {
    font-size: clamp(1.28rem, 3.45vw, 1.62rem);
    margin-bottom: 0.6rem;
    text-align: left;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__col--output
    .product-io__col-heading {
    font-size: clamp(1.28rem, 3.45vw, 1.62rem);
    margin-bottom: 0.6rem;
    text-align: right;
    margin-left: auto;
    width: 100%;
    max-width: min(28rem, 100%);
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__col--input
    .product-io__rule,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__col--output
    .product-io__rule {
    max-width: min(12.5rem, 74%);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker)
    .product-io__problem-line {
    font-size: clamp(1.12rem, 1.92vw, 1.42rem);
    line-height: 1.6;
  }

  /* One-Time API (first api-split only, not law recap) — same as CSAM phablet plug stack */
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__grid {
    grid-template-columns: 1fr;
    gap: clamp(0.35rem, 1.35vw, 0.72rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__copy {
    text-align: center;
    padding-top: clamp(0.15rem, 0.75vw, 0.4rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__visual {
    order: -1;
    justify-content: center;
    margin: clamp(0.35rem, 1.35vw, 0.65rem) auto clamp(0.35rem, 1.15vw, 0.65rem);
    max-width: min(13.25rem, 56vw);
    transform: none;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__img {
    max-width: min(12.25rem, 52vw);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* One-Time API + law recap CTAs — match CSAM phablet pill height, type, and arrow scale (431–767 only). */
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-deepfake-started.page-api-split__cta,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual {
    align-items: center;
    font-size: clamp(0.94rem, 1.88vw, 1.32rem);
    padding: clamp(0.36rem, 0.88vw, 0.48rem) clamp(1.15rem, 3.1vw, 1.95rem);
    gap: clamp(0.42rem, 1.05vw, 0.65rem);
    border-radius: clamp(20px, 4vw, 27px);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-deepfake-started.page-api-split__cta:hover,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual:hover {
    font-size: clamp(0.98rem, 1.98vw, 1.36rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-deepfake-started.page-api-split__cta
    .btn-arrow,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual
    .btn-arrow {
    width: clamp(1.4rem, 3.45vw, 1.9rem);
    height: clamp(1.4rem, 3.45vw, 1.9rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-deepfake-started.page-api-split__cta
    .btn-arrow
    svg,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual
    .btn-arrow
    svg {
    width: clamp(0.98rem, 2.2vw, 1.26rem);
    height: clamp(0.98rem, 2.2vw, 1.26rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-deepfake-started.page-api-split__cta:hover
    .btn-arrow
    svg,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual:hover
    .btn-arrow
    svg {
    width: clamp(1.05rem, 2.35vw, 1.32rem);
    height: clamp(1.05rem, 2.35vw, 1.32rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-deepfake-started.page-api-split__cta
    .btn-arrow
    svg,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual
    .btn-arrow
    svg {
    transform: translate(-0.02rem, -0.02rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-deepfake-started.page-api-split__cta:hover
    .btn-arrow
    svg,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual:hover
    .btn-arrow
    svg {
    transform: translate(0.1rem, -0.02rem);
  }

  /* Law recap — hourglass phablet-only size + nudge down (≤430 / ≥768 unchanged). */
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .page-api-split__visual.page-api-split__visual--stacked {
    align-items: center;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .page-api-split__img--hourglass {
    width: auto;
    max-width: min(11.85rem, 54vw);
    height: auto;
    margin-top: clamp(0.45rem, 2vw, 0.95rem);
  }

  /* Unparalleled Performance — same 4-across plexus row + intro alignment as CSAM phablet */
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--performance-stats--deepfake.page-section--performance-stats--plexus
    .page-performance-stats__intro,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--performance-stats--deepfake.page-section--performance-stats--plexus
    .page-api-split__body.page-section--performance-stats__body {
    text-align: left;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--performance-stats--deepfake.page-section--performance-stats--plexus
    .page-performance-stats__intro
    .page-section-title.page-product-duotone-heading {
    text-align: left;
    margin-left: 0;
    margin-right: auto;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--performance-stats--deepfake.page-section--performance-stats--plexus
    .page-performance-stats__grid--plexus {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    --stat-gap: clamp(0.32rem, 1.15vw, 0.58rem);
    --stat-extend-right: 0;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--performance-stats--deepfake.page-section--performance-stats--plexus
    .page-performance-stats__box {
    min-height: 0;
    align-self: start;
    justify-self: center;
    width: 100%;
    max-width: 86%;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--performance-stats--deepfake.page-section--performance-stats--plexus
    .page-performance-stats__box-inner {
    padding-left: clamp(0.2rem, 0.85vw, 0.42rem);
    padding-right: clamp(0.2rem, 0.85vw, 0.42rem);
    padding-top: clamp(0.42rem, 1.35vw, 0.68rem);
    padding-bottom: clamp(0.32rem, 1.1vw, 0.55rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--performance-stats--deepfake.page-section--performance-stats--plexus
    .page-performance-stats__label {
    font-size: clamp(0.62rem, 2.35vw, 0.84rem);
    margin-bottom: clamp(0.08rem, 0.35vw, 0.14rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--performance-stats--deepfake.page-section--performance-stats--plexus
    .page-performance-stats__value {
    font-size: clamp(1.42rem, 7.35vw, 2.12rem);
    line-height: 1.04;
  }
}

/*
 * Deepfake Model I/O → One-Time API — phablet **landscape** (431–767): the block above adds extra margin-bottom +
 * padding-bottom under Model I/O; CSAM keeps the default duotone `padding-bottom` only. That stacked more air above
 * the API band on Duo-style widths. Match CSAM’s duotone bottom so the API section’s top edge reads the same.
 * Portrait phablet (same 431–767 width range, orientation portrait) keeps the taller-band spacing from the block above.
 */
@media (max-width: 767px) and (min-width: 441px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:not(.page-section--api-split):has(.product-io__heading--deepfake-kicker) {
    margin-bottom: 0;
    padding-bottom: clamp(4.25rem, 9.5vw, 7.25rem);
  }
}

/*
 * CSAM product (product.html) — phablet only (431–767px CSS width): hero, Model I/O, One-Time API (image above title + smaller art),
 * performance intros; ≤430px, ≥768px, deepfake, index unchanged unless a rule here explicitly scopes wider. Default product layout
 * tweaks from the author are assumed phablet-only until they say “all breakpoints” / “desktop” / etc.
 */
@media (max-width: 767px) and (min-width: 441px) {
  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__copy {
    text-align: center;
    padding-left: clamp(0.75rem, 3.35vw, 1.15rem);
    padding-right: clamp(0.75rem, 3.35vw, 1.15rem);
  }

  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__title {
    margin-left: auto;
    margin-right: auto;
  }

  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__sub {
    margin-left: auto;
    margin-right: auto;
  }

  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__visual-inner {
    --ph-illustration-max: min(19.5rem, 52vmin);
    min-height: clamp(10.5rem, 26vw, 14.5rem);
    transform: translate(
      0,
      clamp(1.1rem, 5.5vw, 3.85rem)
    );
  }

  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__illustration-stack {
    transform: scale(0.9);
    transform-origin: 50% 42%;
  }

  /* CSAM One-Time API — phablet only (431–767): plug image above title; smaller art; copy stays centered. */
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__grid {
    grid-template-columns: 1fr;
    /* Tighter than generic ≤900 row gap so title sits closer under the plug-in art */
    gap: clamp(0.35rem, 1.35vw, 0.72rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__copy {
    text-align: center;
    padding-top: clamp(0.15rem, 0.75vw, 0.4rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__visual {
    order: -1;
    justify-content: center;
    margin: clamp(0.35rem, 1.35vw, 0.65rem) auto clamp(0.35rem, 1.15vw, 0.65rem);
    max-width: min(13.25rem, 56vw);
    transform: none;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__img {
    max-width: min(12.25rem, 52vw);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-performance-stats__intro,
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-section--performance-stats__lead,
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-api-split__body.page-section--performance-stats__body {
    text-align: left;
  }

  /* Peak Performance H2: beats generic ≤767 “center all .page-product-duotone-heading” rule for this section only */
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-performance-stats__intro
    .page-section-title.page-product-duotone-heading {
    text-align: left;
    margin-left: 0;
    margin-right: auto;
  }

  /*
   * CSAM Model I/O — phablet only (431–767): modestly shorter rules (not as tight as first pass); slightly larger Files
   * art column; less space under “Detect…” before grid; bullets + output = API body scale. ≤430 / ≥768 unchanged.
   */
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__heading:not(.product-io__heading--deepfake-kicker) {
    margin-bottom: clamp(2.55rem, 5.35vw, 3.95rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(48.5vw, 12.45rem));
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__img:not(.product-io__img--deepfake-scales) {
    max-width: min(12.25rem, 48.5vw);
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__col--input
    .product-io__rule,
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__col--output
    .product-io__rule {
    max-width: min(12.5rem, 74%);
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__list li {
    font-size: clamp(1.12rem, 1.92vw, 1.42rem);
    line-height: 1.6;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__output {
    font-size: clamp(1.12rem, 1.92vw, 1.42rem);
    line-height: 1.6;
  }

  /*
   * CSAM “Peak Performance” plexus — phablet only (431–767): four boxes in one row (overrides generic ≤900 2×2).
   * Tighter gap/bleed, inset cards, smaller label/value so the row fits. ≤430, ≥768, deepfake unchanged.
   */
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-performance-stats__grid--plexus {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    --stat-gap: clamp(0.32rem, 1.15vw, 0.58rem);
    /* Kill right bleed here: negative margin + subpixel clip vs html overflow-x was reading as a black bar on F1 */
    --stat-extend-right: 0;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-performance-stats__box {
    min-height: 0;
    align-self: start;
    justify-self: center;
    width: 100%;
    max-width: 86%;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-performance-stats__box-inner {
    padding-left: clamp(0.2rem, 0.85vw, 0.42rem);
    padding-right: clamp(0.2rem, 0.85vw, 0.42rem);
    padding-top: clamp(0.42rem, 1.35vw, 0.68rem);
    padding-bottom: clamp(0.32rem, 1.1vw, 0.55rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-performance-stats__label {
    font-size: clamp(0.62rem, 2.35vw, 0.84rem);
    margin-bottom: clamp(0.08rem, 0.35vw, 0.14rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-performance-stats__value {
    font-size: clamp(1.42rem, 7.35vw, 2.12rem);
    line-height: 1.04;
  }

  /*
   * CSAM product — phablet only (431–767): Book a call, No Face, Read more, bottom CTA match hero pill type/padding;
   * in-page section rows use larger arrows than hero / bottom CTA. ≤430, ≥768, deepfake, index unchanged.
   */
  .page-main--product-hero:has(.product-hero--csam) .section-cta-inner .btn-hero.section-cta-button,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam)
    .section-cta-inner
    .btn-hero.section-cta-button {
    font-size: clamp(0.94rem, 1.88vw, 1.32rem);
    padding: clamp(0.36rem, 0.88vw, 0.48rem) clamp(1.15rem, 3.1vw, 1.95rem);
    gap: clamp(0.42rem, 1.05vw, 0.65rem);
    border-radius: clamp(20px, 4vw, 27px);
  }

  .page-main--product-hero:has(.product-hero--csam) .section-cta-inner .btn-hero.section-cta-button::before,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam)
    .section-cta-inner
    .btn-hero.section-cta-button::before {
    border-radius: clamp(20px, 4vw, 27px);
  }

  .page-main--product-hero:has(.product-hero--csam) .section-cta-inner .btn-hero.section-cta-button:hover,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam)
    .section-cta-inner
    .btn-hero.section-cta-button:hover {
    font-size: clamp(0.98rem, 1.98vw, 1.36rem);
  }

  .page-main--product-hero:has(.product-hero--csam) .section-cta-inner .btn-hero.section-cta-button .btn-arrow {
    width: clamp(1.08rem, 2.72vw, 1.48rem);
    height: clamp(1.08rem, 2.72vw, 1.48rem);
  }

  .page-main--product-hero:has(.product-hero--csam) .section-cta-inner .btn-hero.section-cta-button .btn-arrow svg {
    width: clamp(0.72rem, 1.68vw, 0.95rem);
    height: clamp(0.72rem, 1.68vw, 0.95rem);
  }

  .page-main--product-hero:has(.product-hero--csam) .section-cta-inner .btn-hero.section-cta-button:hover .btn-arrow svg,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam)
    .section-cta-inner
    .btn-hero.section-cta-button:hover
    .btn-arrow
    svg {
    width: clamp(0.78rem, 1.78vw, 1rem);
    height: clamp(0.78rem, 1.78vw, 1rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta.btn-hero {
    padding: clamp(0.36rem, 0.88vw, 0.48rem) clamp(1.15rem, 3.1vw, 1.95rem);
    font-size: clamp(0.94rem, 1.88vw, 1.32rem);
    gap: clamp(0.42rem, 1.05vw, 0.65rem);
    border-radius: clamp(20px, 4vw, 27px);
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta.btn-hero::before {
    border-radius: clamp(20px, 4vw, 27px);
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta.btn-hero:hover {
    font-size: clamp(0.98rem, 1.98vw, 1.36rem);
  }

  /* In-page section CTAs only: larger arrows than hero / bottom CTA (those keep hero clamps above). */
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta
    .btn-arrow {
    width: clamp(1.4rem, 3.45vw, 1.9rem);
    height: clamp(1.4rem, 3.45vw, 1.9rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta
    .btn-arrow
    svg {
    width: clamp(0.98rem, 2.2vw, 1.26rem);
    height: clamp(0.98rem, 2.2vw, 1.26rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta.btn-hero:hover
    .btn-arrow
    svg {
    width: clamp(1.05rem, 2.35vw, 1.32rem);
    height: clamp(1.05rem, 2.35vw, 1.32rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-csam-started.page-api-split__cta,
  .page-main--product-hero:has(.product-hero--csam)
    .page-spec-chart-read-more-wrap
    .btn-csam-started.page-spec-chart-read-more {
    align-items: center;
    font-size: clamp(0.94rem, 1.88vw, 1.32rem);
    padding: clamp(0.36rem, 0.88vw, 0.48rem) clamp(1.15rem, 3.1vw, 1.95rem);
    gap: clamp(0.42rem, 1.05vw, 0.65rem);
    border-radius: clamp(20px, 4vw, 27px);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-csam-started.page-api-split__cta:hover,
  .page-main--product-hero:has(.product-hero--csam)
    .page-spec-chart-read-more-wrap
    .btn-csam-started.page-spec-chart-read-more:hover {
    font-size: clamp(0.98rem, 1.98vw, 1.36rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-csam-started.page-api-split__cta
    .btn-arrow,
  .page-main--product-hero:has(.product-hero--csam)
    .page-spec-chart-read-more-wrap
    .btn-csam-started.page-spec-chart-read-more
    .btn-arrow {
    width: clamp(1.4rem, 3.45vw, 1.9rem);
    height: clamp(1.4rem, 3.45vw, 1.9rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-csam-started.page-api-split__cta
    .btn-arrow
    svg,
  .page-main--product-hero:has(.product-hero--csam)
    .page-spec-chart-read-more-wrap
    .btn-csam-started.page-spec-chart-read-more
    .btn-arrow
    svg {
    width: clamp(0.98rem, 2.2vw, 1.26rem);
    height: clamp(0.98rem, 2.2vw, 1.26rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-csam-started.page-api-split__cta:hover
    .btn-arrow
    svg,
  .page-main--product-hero:has(.product-hero--csam)
    .page-spec-chart-read-more-wrap
    .btn-csam-started.page-spec-chart-read-more:hover
    .btn-arrow
    svg {
    width: clamp(1.05rem, 2.35vw, 1.32rem);
    height: clamp(1.05rem, 2.35vw, 1.32rem);
  }

  /* Section CTAs: slight vertical tweak on arrow svg (phablet; a touch below -0.05rem pass). */
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta
    .btn-arrow
    svg {
    transform: translate(-0.02rem, -0.02rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta.btn-hero:hover
    .btn-arrow
    svg {
    transform: translate(0.1rem, -0.02rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-csam-started.page-api-split__cta
    .btn-arrow
    svg,
  .page-main--product-hero:has(.product-hero--csam)
    .page-spec-chart-read-more-wrap
    .btn-csam-started.page-spec-chart-read-more
    .btn-arrow
    svg {
    transform: translate(-0.02rem, -0.02rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .btn-csam-started.page-api-split__cta:hover
    .btn-arrow
    svg,
  .page-main--product-hero:has(.product-hero--csam)
    .page-spec-chart-read-more-wrap
    .btn-csam-started.page-spec-chart-read-more:hover
    .btn-arrow
    svg {
    transform: translate(0.1rem, -0.02rem);
  }
}

/* CSAM hero — ≤1366 & ≥769 only: copy higher, PNG stack lower (does not affect ≥1367) */
@media (max-width: 1366px) and (min-width: 769px) {
  .product-hero--csam .product-hero__copy {
    margin-top: calc(8.75rem + 1.35rem);
  }

  .product-hero--csam .product-hero__visual-inner {
    transform: translate(
      clamp(-2rem, -5vw, -0.85rem),
      clamp(9.85rem, 21.5vh, 15.25rem)
    );
  }
}

/* CSAM hero — ≤1280 & ≥769: larger globe/face stack + lower vs copy (overrides band above in this width range only) */
@media (max-width: 1280px) and (min-width: 769px) {
  .product-hero--csam .product-hero__visual-inner {
    --ph-illustration-max: min(38.5rem, 76vmin);
    transform: translate(
      clamp(-2rem, -5vw, -0.85rem),
      clamp(14.15rem, 30.5vh, 21.35rem)
    );
  }
}

/*
 * CSAM product hero — 768–1024 landscape with enough height (iPad-style): default grid is 1.35fr / 0.65fr, so the art
 * column (~32% of the row) caps .product-hero__illustration-stack at width: min(100%, …) before --ph-illustration-max
 * ever binds — widen copy/art split for this band only, then raise --ph so the PNG stack can grow.
 * `min-height: 600px` excludes phone landscape (e.g. iPhone 14 Pro Max ~932×430): same width band was applying huge
 * --ph + 15–22rem translateY and colliding with the ≤1366 hero min-height floor — see the short-landscape block below.
 */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) and (min-height: 600px) {
  .product-hero--csam .product-hero__inner {
    /* Copy track ~67%: a touch wider than 1.32/0.68 for the H1 line length */
    grid-template-columns: minmax(0, 1.34fr) minmax(0, 0.66fr);
    gap: clamp(0.65rem, 1.85vw, 1.15rem);
  }

  .product-hero--csam .product-hero__title {
    max-width: min(60rem, 100%);
  }

  .product-hero--csam .product-hero__visual-inner {
    --ph-illustration-max: min(44rem, 92vmin, 76vw);
    transform: translate(
      clamp(-0.35rem, 1.25vw, 2.85rem),
      clamp(15.75rem, 30.5vh, 22.5rem)
    );
  }
}

/*
 * CSAM product — 768–1024 landscape but short height (phones rotated, e.g. ~932×430): without this, the tall-landscape
 * band’s --ph + translateY still do not apply, but base/≤1280/≤1366 rules leave a large copy offset + hero min-height
 * and the stack still reads oversized; tighten vertical rhythm and cap art so the CTA and graphic stay in view.
 */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) and (max-height: 580px) {
  .page-main--product-hero .product-hero.product-hero--csam {
    min-height: unset;
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__copy {
    margin-top: clamp(1.85rem, 4.8vh, 3.25rem);
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: clamp(0.4rem, 1.1vw, 0.7rem);
    align-items: start;
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero--csam .product-hero__title {
    margin-bottom: clamp(0.35rem, 1vh, 0.6rem);
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero--csam .product-hero__title-lede {
    margin-top: clamp(0.3rem, 0.85vw, 0.55rem);
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero--csam .product-hero__sub {
    margin-top: clamp(0.15rem, 0.65vh, 0.45rem);
    margin-bottom: clamp(0.45rem, 1.5vh, 0.85rem);
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__visual-inner {
    --ph-illustration-max: min(10.5rem, 36vmin, 42vw);
    min-height: 0;
    transform: translate(
      clamp(-0.35rem, 1vw, 1.35rem),
      clamp(0.35rem, 2.25vh, 1.85rem)
    );
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__illustration-stack {
    transform: none;
  }
}

/*
 * CSAM product hero — iPad Air portrait only (768–833): copy sits higher; wider copy track + tuned H1 scale;
 * nowrap so only the authored <br> lines break (no mid-phrase wrap). Deepfake / ≥834 portrait / landscape unchanged.
 */
@media (max-width: 833px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .page-main--product-hero
    .product-hero.product-hero--csam:not(.product-hero--advertiser-portal)
    .product-hero__inner {
    /* Wider art track: stack width is min(100%, ph×ratio) — column width was binding, not --ph. */
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
    gap: clamp(0.55rem, 1.65vw, 1rem);
  }

  .page-main--product-hero .product-hero.product-hero--csam:not(.product-hero--advertiser-portal) .product-hero__copy {
    margin-top: calc(8.75rem + 0.08rem);
    padding-right: clamp(0.15rem, 0.85vw, 0.45rem);
  }

  .page-main--product-hero
    .product-hero.product-hero--csam:not(.product-hero--advertiser-portal)
    .product-hero__title {
    max-width: 100%;
    font-size: clamp(1.68rem, 3.72vw, 2.88rem);
    line-height: 1.44;
    white-space: nowrap;
  }

  /*
   * Portrait 768–833: positive translateX clears the headline (≤1280 band’s negative X pulls into copy).
   * Do not reuse that band’s translateY here — 14–21rem + 30.5vh pushes the stack past .product-hero { overflow: hidden }.
   */
  .page-main--product-hero
    .product-hero.product-hero--csam:not(.product-hero--advertiser-portal)
    .product-hero__visual-inner {
    min-height: clamp(10.5rem, 24vh, 16.5rem);
    transform: translate(
      clamp(0.85rem, 2.95vw, 2.15rem),
      clamp(3.85rem, 10.5vh, 8.65rem)
    );
  }

  /* Scale the stack so pixels grow even when min(100%, …) still caps to column width; extra translateX vs copy. */
  .page-main--product-hero
    .product-hero.product-hero--csam:not(.product-hero--advertiser-portal)
    .product-hero__illustration-stack {
    transform: scale(1.085) translateX(clamp(1.05rem, 2.85vw, 1.95rem));
    transform-origin: 100% 30%;
  }
}

.product-hero__title {
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(2.2rem, 4.25vw, 3.15rem);
  font-weight: 500;
  line-height: 1.58;
  margin: 0 0 clamp(0.95rem, 2vw, 1.35rem);
  max-width: min(48rem, 100%);
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  filter: drop-shadow(0 2px 24px rgba(0, 0, 0, 0.45));
}

/* Only deepfake *product* hero (section.product-hero--deepfake). What-we-aren’t reuses these BEM classes on
   .what-not-hero without that wrapper — a bare .product-hero__title--deepfake was forcing nowrap site-wide and
   blew scrollWidth on narrow viewports (“zoom to white”) after hero-specific overrides. */
.product-hero.product-hero--deepfake .product-hero__title--deepfake {
  font-size: clamp(2.14rem, 3.72vw, 2.95rem);
  line-height: 1.4;
  margin-bottom: clamp(1.35rem, 2.65vw, 1.95rem);
  max-width: min(84rem, 100%);
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  background-image: linear-gradient(
    to bottom right,
    #d3fff7 0%,
    #aafff0 28%,
    #79ffea 52%,
    #40e8d7 100%
  );
  background-size: 140% 140%;
  background-position: left top;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.product-hero--deepfake .product-hero__title.product-hero__title--deepfake {
  overflow: visible;
  font-size: clamp(2.28rem, 3.95vw, 3.12rem);
  /* Same as what-not hero: filter + max-width:100% clips gradient text at laptop widths (e.g. 1688) */
  filter: none;
  width: max-content;
  max-width: none;
}

/* Deepfake product hero — ≤1280: H1 matches CSAM hero headline band (same scale as .product-hero--csam .product-hero__title, incl. lede line) */
@media (max-width: 1280px) {
  /* Slight nudge down under the nav (default band is 3rem) */
  .product-hero.product-hero--deepfake {
    padding-top: clamp(3.65rem, 5.75vw, 4.85rem);
  }

  /* ≤1280 (not only ≤767): base .product-hero--deepfake title uses nowrap + max-content — intrinsic width exceeds
     many tablet / phablet-wide viewports and grows scrollWidth (blank strip on the right entire page). */
  .product-hero--deepfake .product-hero__title.product-hero__title--deepfake {
    font-size: clamp(1.62rem, 3.65vw, 2.68rem);
    line-height: 1.5;
    white-space: normal;
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .product-hero--deepfake .product-hero__deepfake-line {
    font-size: clamp(1.28rem, 2.55vw, 1.95rem);
    line-height: 1.44;
    margin: 0 0 clamp(0.95rem, 1.85vw, 1.35rem);
  }

  .product-hero--deepfake .product-hero__deepfake-line--semibold {
    margin-bottom: clamp(2.1rem, 4.15vw, 3.15rem);
  }

  .product-hero--deepfake .product-hero__cta.btn-hero,
  html[data-theme='light'] .product-hero--deepfake .product-hero__cta.btn-hero {
    font-size: clamp(0.94rem, 1.88vw, 1.32rem);
    padding: clamp(0.36rem, 0.88vw, 0.48rem) clamp(1.15rem, 3.1vw, 1.95rem);
    gap: clamp(0.42rem, 1.05vw, 0.65rem);
    border-radius: clamp(20px, 4vw, 27px);
  }

  .product-hero--deepfake .product-hero__cta.btn-hero::before,
  html[data-theme='light'] .product-hero--deepfake .product-hero__cta.btn-hero::before {
    border-radius: clamp(20px, 4vw, 27px);
  }

  .product-hero--deepfake .product-hero__cta.btn-hero:hover,
  html[data-theme='light'] .product-hero--deepfake .product-hero__cta.btn-hero:hover {
    font-size: clamp(0.98rem, 1.98vw, 1.36rem);
  }

  .product-hero--deepfake .product-hero__cta .btn-arrow {
    width: clamp(1.08rem, 2.72vw, 1.48rem);
    height: clamp(1.08rem, 2.72vw, 1.48rem);
  }

  .product-hero--deepfake .product-hero__cta .btn-arrow svg {
    width: clamp(0.72rem, 1.68vw, 0.95rem);
    height: clamp(0.72rem, 1.68vw, 0.95rem);
  }

  .product-hero--deepfake .product-hero__cta.btn-hero:hover .btn-arrow svg,
  html[data-theme='light'] .product-hero--deepfake .product-hero__cta.btn-hero:hover .btn-arrow svg {
    width: clamp(0.78rem, 1.78vw, 1rem);
    height: clamp(0.78rem, 1.78vw, 1rem);
  }
}

/*
 * What we aren't — hero title: gradient lives on inner span (h2 wrapper stays unclipped).
 * nowrap + max-content must NOT apply below 768px — this block used to sit after the ≤767 stack rules and
 * overrode them, blowing scrollWidth (Surface Duo / phablet “zoom to white”, tab crash under GPU load).
 */
.what-not-hero .product-hero__title.product-hero__title--deepfake {
  padding: 0;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  margin-bottom: clamp(0.85rem, 2.2vw, 1.45rem);
  filter: none;
  /* Clear .product-hero__title--deepfake gradient from the h2 wrapper */
  background-image: none;
  background-size: auto;
  background-position: 0 0;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: unset;
  color: inherit;
  animation: none;
}

@media (min-width: 768px) {
  .what-not-hero .product-hero__title.product-hero__title--deepfake {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    font-size: clamp(1.8rem, 3.55vw, 3.05rem);
    /* Match deepfake/CSAM product hero title (1.5 at ≤1280); inner `.what-not-hero__heading-text` uses same. */
    line-height: 1.5;
    width: max-content;
    max-width: none;
    filter: none;
    overflow: visible;
    overflow-x: visible;
    margin-bottom: clamp(1.2rem, 2.65vw, 2rem);
  }
}

.what-not-hero .what-not-hero__heading-text {
  display: inline-block;
  max-width: 100%;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  /* Match product hero H1 line box (CSAM / deepfake ≤1280: 1.5) so wrapped lines don’t read looser. */
  line-height: 1.5;
  /* px + em: background-clip:text still eats a fraction of cap height in WebKit without generous headroom */
  padding-top: max(0.75rem, 0.52em);
  padding-bottom: max(0.28rem, 0.14em);
  box-sizing: border-box;
  vertical-align: top;
  overflow: visible;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(
    100deg,
    #40e8d7 0%,
    #5ef0dc 18%,
    #aafff0 38%,
    #d3fff7 50%,
    #aafff0 62%,
    #79ffea 82%,
    #40e8d7 100%
  );
  background-size: 280% 125%;
  background-position: 50% 45%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: what-not-hero-title-gradient-slide 5.5s ease-in-out infinite alternate;
}

/* Wide desktop: match base `.product-hero__title` (1.58); ≤1280 stays on 1.5 with product headline band. */
@media (min-width: 1281px) {
  .what-not-hero .what-not-hero__heading-text {
    line-height: 1.58;
  }

  .what-not-hero .product-hero__title.product-hero__title--deepfake {
    line-height: 1.58;
  }
}

/* Dark: headline is gradient-through-glyphs (not a solid-filled text box). Extra padding = more mask room for ascenders. */
html.page-what-we-are-not:not([data-theme='light']) .what-not-hero .what-not-hero__heading-text {
  padding-top: max(1.05rem, 0.62em);
  padding-bottom: max(0.35rem, 0.18em);
}

@keyframes what-not-hero-title-gradient-slide {
  0% {
    background-position: 50% 45%;
  }
  100% {
    background-position: 10% 45%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .what-not-hero .what-not-hero__heading-text {
    animation: none;
    background-position: 50% 45%;
  }
}

/* What we aren’t hero — ≤1490: modestly smaller revolution headline */
@media (max-width: 1490px) {
  .what-not-hero .product-hero__title.product-hero__title--deepfake {
    font-size: clamp(1.68rem, 3.35vw, 2.88rem);
  }
}

/* What we aren’t hero — ≤1400: one more slight step down */
@media (max-width: 1400px) {
  .what-not-hero .product-hero__title.product-hero__title--deepfake {
    font-size: clamp(1.58rem, 3.12vw, 2.72rem);
  }
}

/* What we aren’t hero — ≤1366 only: slightly larger title than ≤1400 cascade (≥1367 unchanged) */
@media (max-width: 1366px) {
  .what-not-hero .product-hero__title.product-hero__title--deepfake {
    font-size: clamp(1.72rem, 3.38vw, 2.92rem);
  }
}

/* Lede block: extra space after “Proxies …” and between “Experience …” / “with …” */
.product-hero__title-lede {
  display: block;
  margin-top: clamp(1.05rem, 1.95vw, 1.45rem);
  line-height: 1.34;
}

.product-hero__title-primary {
  font-weight: 400;
}

/* Deepfake hero: sub-head lines match .product-hero__title size; medium vs semibold */
.product-hero__deepfake-line {
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(1.72rem, 3.2vw, 2.3rem);
  font-weight: 400;
  line-height: 1.45;
  margin: 0 0 clamp(1.15rem, 2.15vw, 1.55rem);
  max-width: min(72rem, 100%);
  overflow-wrap: anywhere;
  color: #fff;
  -webkit-text-fill-color: #fff;
  filter: none;
}

.product-hero__deepfake-line--semibold {
  font-weight: 500;
  margin-bottom: clamp(2.65rem, 5.5vw, 3.85rem);
}

.product-hero__copy--deepfake {
  max-width: min(84rem, 100%);
}

/* Deepfake product hero (deepfake.html): headline block lower; GIF well below prior anchor */
.product-hero--deepfake .product-hero__copy--deepfake {
  margin-top: calc(8.75rem + 1.95rem);
}

/* Wide desktop (≥1728px): more drop under nav — tied to 16" default width; unchanged for ≤2056px policy. */
@media (min-width: 1728px) {
  .product-hero--deepfake .product-hero__copy--deepfake {
    margin-top: calc(8.75rem + 5.65rem);
  }
}

/* Extra drop on very wide viewports (already excludes 16" MBP — max ~2056). */
@media (min-width: 2200px) {
  .product-hero--deepfake .product-hero__copy--deepfake {
    margin-top: calc(8.75rem + 6.5rem);
  }
}

.product-hero__gif {
  max-width: min(100%, var(--ph-illustration-max, min(31.25rem, 64vmin)));
  max-height: var(--ph-illustration-max, min(31.25rem, 64vmin));
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center right;
  pointer-events: none;
  display: block;
  margin-left: auto;
  transform: translate(
    clamp(0.5rem, 1.5vw, 1.25rem),
    clamp(-1.85rem, -3.1vw, -0.9rem)
  );
}

.product-hero--deepfake .product-hero__gif {
  mix-blend-mode: screen;
  transform: translate(
    clamp(0.5rem, 1.5vw, 1.25rem),
    clamp(10.65rem, 20.5vh, 17.15rem)
  );
}

/* Deepfake hero — ≤1727 (first px narrower than 16in MBP 1728): tighter GIF cap + lane between columns */
@media (max-width: 1727px) {
  .product-hero--deepfake .product-hero__inner {
    gap: clamp(1.35rem, 2.85vw, 2rem);
  }

  .product-hero--deepfake .product-hero__visual-inner {
    --ph-illustration-max: min(25.5rem, 51vmin);
  }
}

/* Deepfake hero — 1367–1727 portrait: desktop GIF/copy tuning is heavy; landscape uses rules below */
@media (max-width: 1727px) and (min-width: 1367px) and (orientation: portrait) {
  .product-hero--deepfake .product-hero__gif {
    transform: translate(
      clamp(0.5rem, 1.5vw, 1.25rem),
      clamp(9.25rem, 18.5vh, 15.25rem)
    );
  }
}

/* Deepfake — ≤1688 & ≥1367: a bit more gap + GIF cap so art reads larger without crowding copy */
@media (max-width: 1688px) and (min-width: 1367px) {
  .product-hero--deepfake .product-hero__inner {
    gap: clamp(1.25rem, 2.85vw, 2.15rem);
  }

  .product-hero--deepfake .product-hero__visual-inner {
    --ph-illustration-max: min(23.5rem, 46vmin);
  }
}

@media (max-width: 1688px) and (min-width: 1367px) and (orientation: portrait) {
  .product-hero--deepfake .product-hero__copy--deepfake {
    margin-top: calc(8.75rem + 2.45rem);
  }

  .product-hero--deepfake .product-hero__gif {
    transform: translate(
      clamp(0.45rem, 1.2vw, 1rem),
      clamp(10.65rem, 19.5vh, 15.75rem)
    );
  }
}

/* Deepfake hero: mid-width landscape — anchor GIF right; clip horizontal bleed only (hidden would clip Y) */
@media (max-width: 1727px) and (min-width: 769px) and (orientation: landscape) {
  .product-hero--deepfake .product-hero__visual {
    overflow-x: clip;
    overflow-y: visible;
    justify-content: flex-end;
  }

  .product-hero--deepfake .product-hero__visual-inner {
    /* Keep a slight +X nudge (base rule uses translateX); `none` pulled art left toward nowrap copy */
    transform: translateX(clamp(0.35rem, 0.9vw, 1.15rem));
    justify-content: flex-end;
    align-items: flex-end;
  }

  .product-hero--deepfake .product-hero__copy--deepfake {
    margin-top: calc(8.75rem + 1.35rem);
    /* Reserve a gutter so gradient H1 + screen-blend GIF do not share the same pixels after resize */
    padding-right: clamp(0.65rem, 2.25vw, 1.85rem);
  }

  .product-hero--deepfake .product-hero__gif {
    margin-left: auto;
    margin-right: 0;
    object-position: right center;
    /* 1689–1727 landscape — 1688 band below refines copy vs GIF */
    transform: translate(0, clamp(7.35rem, 13.25vh, 11.15rem));
  }
}

/* Deepfake: 1367–1688 landscape (e.g. 1688×803) — sit lower than the tight 1727-wide band above */
@media (max-width: 1688px) and (min-width: 1367px) and (orientation: landscape) {
  .product-hero--deepfake .product-hero__inner {
    /* Slightly narrower art track vs 34vw/24.5rem — frees pixels for long nowrap H1 + gutter */
    grid-template-columns: minmax(0, 1fr) minmax(0, min(30vw, 22rem));
  }

  .product-hero--deepfake .product-hero__copy--deepfake {
    margin-top: calc(8.75rem + 2.55rem);
    padding-right: clamp(1rem, 2.75vw, 2.25rem);
  }

  .product-hero--deepfake .product-hero__gif {
    transform: translate(0, clamp(10rem, 18.25vh, 15rem));
  }
}

/* Deepfake hero: ≤1570 landscape — narrower grid + smaller cap (GIF translate stays from ≤1688 / ≤1470) */
@media (max-width: 1570px) and (min-width: 769px) and (orientation: landscape) {
  .product-hero--deepfake .product-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(31vw, 22rem));
    gap: clamp(0.85rem, 1.9vw, 1.35rem);
  }

  .product-hero--deepfake .product-hero__visual-inner {
    --ph-illustration-max: min(22.75rem, 45.5vmin);
  }
}

/* Deepfake hero: ≤1499 landscape — extra step down on GIF cap (narrower than ≤1570 band) */
@media (max-width: 1499px) and (min-width: 769px) and (orientation: landscape) {
  .product-hero--deepfake .product-hero__visual-inner {
    --ph-illustration-max: min(22.75rem, 45vmin);
  }
}

/* Deepfake hero: ≤1470 landscape — smaller cap + GIF pushed down vs wider laptop band */
@media (max-width: 1470px) and (min-width: 1367px) and (orientation: landscape) {
  .product-hero--deepfake .product-hero__visual-inner {
    --ph-illustration-max: min(20.5rem, 40.5vmin);
  }

  .product-hero--deepfake .product-hero__gif {
    transform: translate(0, clamp(17.15rem, 29vh, 23.25rem));
  }
}

/* Deepfake: 1471–1570 landscape — slightly smaller art + a bit lower than ≤1688 (must follow ≤1470) */
@media (max-width: 1570px) and (min-width: 1471px) and (orientation: landscape) {
  .product-hero--deepfake .product-hero__visual-inner {
    --ph-illustration-max: min(22rem, 44vmin);
  }

  .product-hero--deepfake .product-hero__gif {
    transform: translate(0, clamp(11.35rem, 20.25vh, 16.35rem));
  }
}

/* Deepfake: 1471–1550 landscape — another step down (must follow 1471–1570) */
@media (max-width: 1550px) and (min-width: 1471px) and (orientation: landscape) {
  .product-hero--deepfake .product-hero__gif {
    transform: translate(0, clamp(15.35rem, 26.25vh, 20.75rem));
  }
}

/* Deepfake hero: ≤1366 — move GIF down (portrait / narrow; landscape tablet rule below overrides) */
@media (max-width: 1366px) {
  .product-hero--deepfake .product-hero__copy--deepfake {
    margin-top: calc(clamp(4.5rem, 14vw, 7.5rem) + 1.75rem);
  }

  .product-hero--deepfake .product-hero__gif {
    transform: translate(
      clamp(-0.65rem, -0.5vw, 0.45rem),
      clamp(11.65rem, 20vw, 15.9rem)
    );
  }
}

/* Deepfake hero: ≤1366 landscape — same copy / GIF rhythm where 1367–1727 band no longer applies */
@media (max-width: 1366px) and (min-width: 769px) and (orientation: landscape) {
  .product-hero--deepfake .product-hero__gif {
    transform: translate(
      clamp(-0.85rem, -1.1vw, -0.15rem),
      clamp(14.95rem, 27vh, 21rem)
    );
  }
}

/* Deepfake product hero — ≤1280: smaller GIF cap (placed after wider-band --ph rules so it wins) */
@media (max-width: 1280px) {
  .product-hero--deepfake .product-hero__visual-inner {
    --ph-illustration-max: min(18.25rem, 38vmin);
  }
}

/* Product pages — 769–1366 two-column: extra hero foot room so shifted art clears overflow:hidden */
@media (max-width: 1366px) and (min-width: 769px) {
  .page-main--product-hero .product-hero {
    padding-bottom: clamp(3.5rem, 7.5vh, 5.25rem);
  }
}

/*
 * CSAM + Deepfake product heroes — iPad Pro class landscape (1025–1366 wide, e.g. 12.9″ 1366×1024,
 * 11″ ~1194×834): more headroom above copy/art; trim hero foot padding so less dead space below content.
 * Excludes TAP (`.product-hero--advertiser-portal` also carries `.product-hero--csam`).
 */
@media (max-width: 1366px) and (min-width: 1025px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero,
  .page-main--product-hero:has(.product-hero--deepfake) .product-hero {
    padding-top: clamp(5rem, 10.25vh, 7.15rem);
    padding-bottom: clamp(1.15rem, 2.35vh, 1.95rem);
  }

  .product-hero--csam:not(.product-hero--advertiser-portal) .product-hero__copy {
    margin-top: calc(clamp(6.85rem, 17vh, 11.65rem) + 1rem);
  }

  .product-hero--deepfake .product-hero__copy--deepfake {
    margin-top: calc(clamp(6.85rem, 17vh, 11.65rem) + 0.85rem);
  }

  .product-hero--csam:not(.product-hero--advertiser-portal) .product-hero__visual-inner {
    transform: translate(
      clamp(-2rem, -5vw, -0.85rem),
      clamp(8.35rem, 16.75vh, 13.65rem)
    );
  }

  .product-hero--deepfake .product-hero__gif {
    transform: translate(
      clamp(-0.85rem, -1.1vw, -0.15rem),
      clamp(16.35rem, 29.5vh, 22.35rem)
    );
  }
}

/*
 * Same pages — iPad (not Pro) landscape 768–1024×600+ (e.g. 1024×768): hero padding + copy only; CSAM stack
 * translate stays on the tall-landscape band above (~15.75–22.5rem). Pro landscape uses min-width: 1025px block.
 */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) and (min-height: 600px) {
  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero,
  .page-main--product-hero:has(.product-hero--deepfake) .product-hero {
    padding-top: clamp(4.35rem, 8.75vh, 6.25rem);
    padding-bottom: clamp(1.15rem, 2.35vh, 1.95rem);
  }

  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__copy {
    margin-top: calc(clamp(5.35rem, 13.5vw, 8.35rem) + 1.15rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__copy--deepfake {
    margin-top: calc(clamp(5.35rem, 13.5vw, 8.35rem) + 1.75rem);
  }
}

/* Tablet portrait (768–1024): CSAM stack larger + higher; deepfake GIF — after 769–1280 / ≤1366 so these win. */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .product-hero--csam:not(.product-hero--advertiser-portal) .product-hero__visual-inner {
    --ph-illustration-max: min(39rem, 80vmin);
    transform: translate(
      clamp(-0.55rem, -2.15vw, 0.55rem),
      clamp(4.65rem, 10.75vh, 8.55rem)
    );
  }

  .product-hero--deepfake .product-hero__visual-inner {
    --ph-illustration-max: min(14.85rem, 30vmin);
  }

  .product-hero--deepfake .product-hero__gif {
    transform: translate(
      clamp(-3.1rem, -6.75vw, -1.15rem),
      clamp(3.85rem, 6.35vw, 7.15rem)
    );
  }
}

/*
 * Deepfake product hero — iPad mini / Air portrait (768–833): copy a touch higher; tighter --ph + scale(0.88) vs 768–1024 band.
 * `align-items: center` avoids flex-end pinning a shorter asset
 * to the bottom of the tall min-height strip (that read as “GIF jumped way down”). CSAM unchanged. ≥834 portrait unchanged.
 */
@media (max-width: 833px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .page-main--product-hero .product-hero.product-hero--deepfake .product-hero__copy--deepfake {
    margin-top: calc(clamp(4.5rem, 14vw, 7.5rem) + 1.2rem);
  }

  .page-main--product-hero .product-hero.product-hero--deepfake .product-hero__visual-inner {
    align-items: center;
    --ph-illustration-max: min(13.65rem, 27vmin);
  }

  .page-main--product-hero .product-hero.product-hero--deepfake .product-hero__gif {
    transform: translate(
      clamp(-3.1rem, -6.75vw, -1.15rem),
      clamp(5.05rem, 8.35vw, 9.15rem)
    ) scale(0.88);
    transform-origin: 100% 50%;
  }
}

/*
 * TAP advertiser portal — iPad portrait (768–1024): stacked copy + feed below (≤767 mobile / ≥1025 wide unchanged).
 * Without this band, CSAM tablet rules at 768px force two columns, nowrap H1, and a shifted feed that overlaps copy.
 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.15rem, 2.65vw, 1.85rem);
    width: 100%;
    max-width: 100%;
    padding-inline: clamp(1.15rem, 3.35vw, 2.15rem);
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero.product-hero--advertiser-portal {
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(2.15rem, 5.15vw, 3.05rem));
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__inner {
    padding-top: 0;
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__copy {
    max-width: 100%;
    width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    /* Less dead space above stacked copy vs ≤1280 margin (8.75rem + 3.35rem + clamp). */
    margin-top: calc(clamp(5.15rem, 11.5vh, 6.65rem) + clamp(0.45rem, 1.1vw, 0.85rem));
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 100%;
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title-lede {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    margin-top: clamp(0.85rem, 1.65vw, 1.2rem);
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__sub {
    margin-top: 0;
    margin-bottom: clamp(1.35rem, 3.15vw, 2.15rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__visual {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    justify-content: flex-start;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__visual-inner.advertiser-portal-hero-feed__inner {
    --ph-illustration-max: min(19.25rem, min(100% - 0.5rem, 62vw));
    min-height: clamp(9.5rem, 22vh, 13.25rem);
    transform: translate(0, 0);
    margin-top: clamp(0.25rem, 0.95vw, 0.65rem);
    justify-content: flex-start;
    align-items: flex-start;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-hero-feed {
    width: min(100%, var(--ph-illustration-max, 19.25rem));
    max-width: var(--ph-illustration-max, 19.25rem);
    gap: clamp(0.68rem, 2.1vw, 1.15rem);
    margin-left: 0;
    margin-right: auto;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-hero-feed__card {
    padding: clamp(0.24rem, 0.85vw, 0.42rem);
    border-radius: clamp(0.65rem, 1.85vw, 0.92rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-hero-feed__img {
    border-radius: clamp(0.42rem, 1.35vw, 0.72rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-tap-features.page-section--grid-bg
    .page-no-face-stack
    .page-three-col {
    gap: clamp(4.35rem, 8.35vw, 5.85rem);
  }

  /* Theme toggle + menu: keep controls inside the header bar on narrow portrait tablets. */
  body:has(.product-hero--advertiser-portal) .header .nav {
    padding-left: clamp(1rem, 2.65vw, 1.85rem);
    padding-right: clamp(1rem, 2.65vw, 1.85rem);
  }

  body:has(.product-hero--advertiser-portal) .nav-end {
    gap: clamp(0.28rem, 0.85vw, 0.45rem);
    padding-right: 0.12rem;
  }
}

/*
 * TAP advertiser portal — iPad Air landscape (~1180×820; 1025–1180 only): copy + feed side by side (overrides
 * ≤1280 stacked column), hero type −3px, feed stack beside copy. iPad 1024×768 landscape uses the band below.
 */
@media (max-width: 1180px) and (min-width: 1025px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero.product-hero--advertiser-portal {
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(4.35rem, 8.5vh, 5.85rem));
    padding-bottom: clamp(0.85rem, 1.85vh, 1.45rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__inner {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, min(31vw, 21.75rem));
    gap: clamp(0.55rem, 1.35vw, 0.95rem);
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    padding-inline: clamp(0.85rem, 2.15vw, 1.35rem);
    box-sizing: border-box;
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__copy {
    max-width: min(36rem, 100%);
    width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: clamp(0.35rem, 1vw, 0.65rem);
    margin-top: calc(clamp(5.85rem, 14.25vh, 8.45rem) + clamp(0.35rem, 0.85vw, 0.62rem) + clamp(0.65rem, 1.35vh, 1.05rem));
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title {
    font-size: calc(clamp(1.62rem, 3.65vw, 2.68rem) - 3px);
    line-height: 1.48;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 100%;
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title-primary {
    font-size: calc(clamp(1.62rem, 3.65vw, 2.68rem) - 2px);
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title-lede {
    font-size: calc(clamp(1.08rem, 2.42vw, 1.78rem) - 2px);
    line-height: 1.4;
    margin-top: clamp(0.88rem, 1.55vw, 1.22rem);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__sub {
    font-size: calc(clamp(1.22rem, 2.72vw, 1.84rem) - 5px);
    line-height: 1.42;
    margin-top: 0;
    margin-bottom: clamp(1.15rem, 2.45vw, 1.85rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero {
    font-size: calc(clamp(0.94rem, 1.88vw, 1.32rem) - 3px);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero:hover,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero:hover {
    font-size: calc(clamp(0.98rem, 1.98vw, 1.36rem) - 3px);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__visual {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    justify-content: flex-end;
    align-self: flex-start;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__visual-inner.advertiser-portal-hero-feed__inner {
    --ph-illustration-max: min(20.5rem, 31vw);
    min-height: clamp(10rem, 27.5vh, 14.25rem);
    transform: translate(clamp(0.65rem, 1.45vw, 1.15rem), clamp(7.1rem, 15.75vh, 9.55rem));
    margin-top: 0;
    justify-content: flex-start;
    align-items: flex-end;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-hero-feed {
    width: min(100%, var(--ph-illustration-max, 20.5rem));
    max-width: var(--ph-illustration-max, 20.5rem);
    gap: clamp(0.62rem, 1.4vw, 0.98rem);
    margin-left: auto;
    margin-right: 0;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-hero-feed__card {
    padding: clamp(0.28rem, 0.88vw, 0.46rem);
    border-radius: clamp(0.62rem, 1.48vw, 0.88rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-hero-feed__img {
    border-radius: clamp(0.38rem, 1.05vw, 0.62rem);
  }
}

/*
 * TAP advertiser portal — iPad 1024×768 landscape (768–1024 wide, landscape): same side-by-side hero + type/card
 * tuning as iPad Air landscape above; vh/rem nudges account for the shorter ~768px-tall viewport. Portrait unchanged.
 */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero.product-hero--advertiser-portal {
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(4.35rem, 8.75vh, 5.85rem));
    padding-bottom: clamp(0.75rem, 1.65vh, 1.25rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, min(30vw, 20.5rem));
    gap: clamp(0.5rem, 1.25vw, 0.88rem);
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    padding-inline: clamp(0.75rem, 2vw, 1.25rem);
    box-sizing: border-box;
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__copy {
    max-width: min(34rem, 100%);
    width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: clamp(0.32rem, 0.95vw, 0.58rem);
    margin-top: calc(clamp(7.05rem, 16.75vh, 9.45rem) + clamp(0.35rem, 0.85vw, 0.62rem));
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title {
    font-size: calc(clamp(1.62rem, 3.65vw, 2.68rem) - 3px);
    line-height: 1.48;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    max-width: 100%;
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title-primary {
    font-size: calc(clamp(1.62rem, 3.65vw, 2.68rem) - 2px);
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title-lede {
    font-size: calc(clamp(1.08rem, 2.42vw, 1.78rem) - 2px);
    line-height: 1.4;
    margin-top: clamp(1.08rem, 1.92vw, 1.45rem);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__sub {
    font-size: calc(clamp(1.22rem, 2.72vw, 1.84rem) - 5px);
    line-height: 1.42;
    margin-top: 0;
    margin-bottom: clamp(1.05rem, 2.25vw, 1.72rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero {
    font-size: calc(clamp(0.94rem, 1.88vw, 1.32rem) - 3px);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero:hover,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero:hover {
    font-size: calc(clamp(0.98rem, 1.98vw, 1.36rem) - 3px);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__visual {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    justify-content: flex-end;
    align-self: flex-start;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__visual-inner.advertiser-portal-hero-feed__inner {
    --ph-illustration-max: min(20.5rem, 30vw);
    min-height: clamp(9.35rem, 26vh, 13.15rem);
    transform: translate(clamp(1.25rem, 2.45vw, 1.95rem), clamp(7.45rem, 16.25vh, 9.45rem));
    margin-top: 0;
    justify-content: flex-start;
    align-items: flex-end;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-hero-feed {
    width: min(100%, var(--ph-illustration-max, 20.5rem));
    max-width: var(--ph-illustration-max, 20.5rem);
    gap: clamp(0.62rem, 1.4vw, 0.98rem);
    margin-left: auto;
    margin-right: 0;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-hero-feed__card {
    padding: clamp(0.28rem, 0.88vw, 0.46rem);
    border-radius: clamp(0.62rem, 1.48vw, 0.88rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-hero-feed__img {
    border-radius: clamp(0.38rem, 1.05vw, 0.62rem);
  }

  /* Features — wider heading measure (no wrap); body −5px; note +1px vs TAP ≤1366 (+4px). */
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-feature-card
    h3.page-feature-card__title,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-feature-card__title {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-feature-card__title span {
    white-space: nowrap;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .advertiser-portal-tap-features__body
    p {
    font-size: calc(clamp(1.15rem, 2.05vw, 1.38rem) - 5px);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-no-face-stack__note.page-api-split__body {
    font-size: calc(clamp(1.12rem, 1.92vw, 1.42rem) + 5px);
  }
}

/*
 * TAP advertiser portal — iPad Pro landscape (1181–1366, e.g. 1366×1024): hero feed position; blind-spot copy
 * further left (keyhole / key / beam unchanged). iPad Air (1025–1180) and 768–1024 landscape bands above.
 */
@media (max-width: 1366px) and (min-width: 1181px) and (orientation: landscape) {
  .product-hero--advertiser-portal.product-hero--csam .product-hero__copy {
    transform: translateY(calc(-1 * clamp(0.65rem, 1.35vh, 1.05rem)));
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__visual-inner.advertiser-portal-hero-feed__inner {
    transform: translate(
      clamp(0.85rem, 1.65vw, 1.35rem),
      clamp(9.75rem, 20.25vh, 15.45rem)
    );
  }

  .advertiser-portal-stack-section
    > .advertiser-portal-stack-section__inner
    > .advertiser-portal-stack-section__copy.page-api-split__copy {
    transform: translate(
      -clamp(4.05rem, 7.55vw, 5.65rem),
      calc(-1 * clamp(1rem, 2.1vw, 1.65rem))
    );
  }

  /* +3px vs CSAM ≤1366 No Face card h3 (1.16rem); h3.page-feature-card__title beats shared CSAM selector. */
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-feature-card
    h3.page-feature-card__title {
    font-size: calc(1.16rem + 3px);
  }
}

.product-hero__sub {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1.52rem, 3.2vw, 1.95rem);
  font-weight: 300;
  line-height: 1.45;
  margin: 0 0 clamp(2.85rem, 5.5vw, 3.85rem);
  color: #fff;
  max-width: min(50rem, 100%);
}

.product-hero__cta {
  position: relative;
  z-index: 1;
}

.product-hero__cta.btn-hero {
  padding: 0.58rem 2.95rem;
  font-size: 1.75rem;
  border-radius: 32px;
  gap: 0.82rem;
}

.product-hero__cta.btn-hero::before {
  border-radius: 32px;
}

.product-hero__cta.btn-hero:hover {
  font-size: 1.84rem;
}

.product-hero__cta .btn-arrow {
  width: 1.76rem;
  height: 1.76rem;
}

.product-hero__cta .btn-arrow svg {
  width: 1.05rem;
  height: 1.05rem;
}

.product-hero__cta.btn-hero:hover .btn-arrow svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* Deepfake hero “TELL ME MORE”: same pill as CTA (.section-cta-inner .btn-hero.section-cta-button) — mint gradient, black label + arrow */
.product-hero--deepfake .product-hero__cta.btn-hero {
  isolation: isolate;
  background: linear-gradient(45deg, #94e6e3 0%, #b0efed 25%, #ccf5f4 50%, #e5fafa 75%, #f6fafb 100%);
  border: 0.5px solid #0a0e17;
  color: #000;
  -webkit-text-fill-color: #000;
  transition: background 0.4s ease, color 0.2s, border-color 0.2s, font-weight 0.2s, font-size 0.2s;
}

.product-hero--deepfake .product-hero__cta.btn-hero::before {
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: auto;
  mix-blend-mode: normal;
  filter: none;
}

.product-hero--deepfake .product-hero__cta.btn-hero:hover {
  background: linear-gradient(225deg, #94e6e3 0%, #b0efed 25%, #ccf5f4 50%, #e5fafa 75%, #f6fafb 100%);
  color: #000;
  -webkit-text-fill-color: #000;
  border-color: #0a0e17;
  font-weight: 600;
}

.product-hero--deepfake .product-hero__cta.btn-hero:hover::before {
  opacity: 0.35;
  mix-blend-mode: normal;
}

.product-hero--deepfake .product-hero__cta.btn-hero .btn-arrow {
  color: #000;
  border-color: #000;
  background: transparent;
}

.product-hero--deepfake .product-hero__cta.btn-hero:hover .btn-arrow {
  background: #0a0a0a;
  border: 1px solid #0a0a0a;
  color: #fff;
}

.product-hero--deepfake .product-hero__cta.btn-hero:hover .btn-arrow svg {
  stroke: #fff;
}

/* Light: CSAM hero, what-we-aren’t hero, contact submit — same mint pill CTA as deepfake hero */
html[data-theme='light'] .product-hero--csam .product-hero__cta.btn-hero,
html[data-theme='light'] .what-not-hero .product-hero__cta.btn-hero,
html.page-contact[data-theme='light'] .contact-form__submit.btn-hero.product-hero__cta {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: linear-gradient(45deg, #94e6e3 0%, #b0efed 25%, #ccf5f4 50%, #e5fafa 75%, #f6fafb 100%);
  border: 0.5px solid #0a0e17;
  color: #000;
  -webkit-text-fill-color: #000;
  font-size: 1.75rem;
  transition: background 0.4s ease, color 0.2s, border-color 0.2s, font-weight 0.2s, font-size 0.2s;
}

html[data-theme='light'] .product-hero--csam .product-hero__cta.btn-hero::before,
html[data-theme='light'] .what-not-hero .product-hero__cta.btn-hero::before,
html.page-contact[data-theme='light'] .contact-form__submit.btn-hero.product-hero__cta::before {
  border-radius: 32px;
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: auto;
  mix-blend-mode: normal;
  filter: none;
}

html[data-theme='light'] .product-hero--csam .product-hero__cta.btn-hero:hover,
html[data-theme='light'] .what-not-hero .product-hero__cta.btn-hero:hover,
html.page-contact[data-theme='light'] .contact-form__submit.btn-hero.product-hero__cta:hover {
  background: linear-gradient(225deg, #94e6e3 0%, #b0efed 25%, #ccf5f4 50%, #e5fafa 75%, #f6fafb 100%);
  color: #000;
  -webkit-text-fill-color: #000;
  border-color: #0a0e17;
  font-weight: 600;
  font-size: 1.84rem;
}

html[data-theme='light'] .product-hero--csam .product-hero__cta.btn-hero:hover::before,
html[data-theme='light'] .what-not-hero .product-hero__cta.btn-hero:hover::before,
html.page-contact[data-theme='light'] .contact-form__submit.btn-hero.product-hero__cta:hover::before {
  opacity: 0.35;
  mix-blend-mode: normal;
}

html[data-theme='light'] .product-hero--csam .product-hero__cta.btn-hero .btn-arrow,
html[data-theme='light'] .what-not-hero .product-hero__cta.btn-hero .btn-arrow,
html.page-contact[data-theme='light'] .contact-form__submit.btn-hero.product-hero__cta .btn-arrow {
  color: #000;
  border-color: #000;
  background: transparent;
}

html[data-theme='light'] .product-hero--csam .product-hero__cta.btn-hero:hover .btn-arrow,
html[data-theme='light'] .what-not-hero .product-hero__cta.btn-hero:hover .btn-arrow,
html.page-contact[data-theme='light'] .contact-form__submit.btn-hero.product-hero__cta:hover .btn-arrow {
  background: #0a0a0a;
  border: 1px solid #0a0a0a;
  color: #fff;
}

html[data-theme='light'] .product-hero--csam .product-hero__cta.btn-hero:hover .btn-arrow svg,
html[data-theme='light'] .what-not-hero .product-hero__cta.btn-hero:hover .btn-arrow svg,
html.page-contact[data-theme='light'] .contact-form__submit.btn-hero.product-hero__cta:hover .btn-arrow svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke: #fff;
}

/* Light hero CTAs — ≤1280: step down pill (must follow base light rules above so it wins over 1.75rem / 1.84rem); contact submit unchanged */
@media (max-width: 1280px) {
  html[data-theme='light'] .product-hero--csam .product-hero__cta.btn-hero,
  html[data-theme='light'] .what-not-hero .product-hero__cta.btn-hero {
    font-size: clamp(0.94rem, 1.88vw, 1.32rem);
    padding: clamp(0.36rem, 0.88vw, 0.48rem) clamp(1.15rem, 3.1vw, 1.95rem);
    gap: clamp(0.42rem, 1.05vw, 0.65rem);
    border-radius: clamp(20px, 4vw, 27px);
  }

  html[data-theme='light'] .product-hero--csam .product-hero__cta.btn-hero::before,
  html[data-theme='light'] .what-not-hero .product-hero__cta.btn-hero::before {
    border-radius: clamp(20px, 4vw, 27px);
  }

  html[data-theme='light'] .product-hero--csam .product-hero__cta.btn-hero:hover,
  html[data-theme='light'] .what-not-hero .product-hero__cta.btn-hero:hover {
    font-size: clamp(0.98rem, 1.98vw, 1.36rem);
  }

  html[data-theme='light'] .product-hero--csam .product-hero__cta .btn-arrow,
  html[data-theme='light'] .what-not-hero .product-hero__cta .btn-arrow {
    width: clamp(1.08rem, 2.72vw, 1.48rem);
    height: clamp(1.08rem, 2.72vw, 1.48rem);
  }

  html[data-theme='light'] .product-hero--csam .product-hero__cta .btn-arrow svg,
  html[data-theme='light'] .what-not-hero .product-hero__cta .btn-arrow svg {
    width: clamp(0.72rem, 1.68vw, 0.95rem);
    height: clamp(0.72rem, 1.68vw, 0.95rem);
  }

  html[data-theme='light'] .product-hero--csam .product-hero__cta.btn-hero:hover .btn-arrow svg,
  html[data-theme='light'] .what-not-hero .product-hero__cta.btn-hero:hover .btn-arrow svg {
    width: clamp(0.78rem, 1.78vw, 1rem);
    height: clamp(0.78rem, 1.78vw, 1rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-hero__dot {
    animation: none;
    opacity: 0.23;
  }

  html[data-theme='light'] .product-hero--deepfake .product-hero__blob,
  html[data-theme='light'] .product-hero--csam .product-hero__blob {
    animation: none !important;
    opacity: 0.42;
    filter: blur(58px) !important;
    transform: none !important;
  }

  html[data-theme='light'] .product-hero--deepfake .product-hero__blob:nth-child(5),
  html[data-theme='light'] .product-hero--csam .product-hero__blob:nth-child(5) {
    transform: translate(-50%, 0) !important;
    opacity: 0.2 !important;
  }

  .product-hero__layer--face,
  .product-hero__illustration-svg .product-hero-svg__face {
    animation: none;
    transform: none;
  }

  .product-hero__layer--brackets,
  .product-hero__illustration-svg .product-hero-svg__brackets {
    animation: none;
    opacity: 1;
  }
}

.page-section {
  padding: clamp(3rem, 6vw, 5rem) var(--page-margin);
  border-top: 1px solid rgba(51, 65, 85, 0.35);
}

.page-section--alt {
  background: var(--bg-alt);
}

/* Product Model I/O / duotone: bleed past body padding (same math as .product-hero — not 100vw, which misaligns with padded main). */
.page-section--duotone-noise {
  position: relative;
  isolation: isolate;
  width: calc(100% + 2 * var(--page-margin)) !important;
  max-width: none !important;
  margin-left: calc(-1 * var(--page-margin)) !important;
  margin-right: calc(-1 * var(--page-margin)) !important;
  box-sizing: border-box;
  overflow: visible;
  padding-top: clamp(4.25rem, 9.5vw, 7.25rem);
  padding-bottom: clamp(4.25rem, 9.5vw, 7.25rem);
  /* Match product hero / home landing: double page gutter */
  padding-left: calc(var(--page-margin) * 2);
  padding-right: calc(var(--page-margin) * 2);
}

.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker) {
  padding-bottom: 0;
  margin-bottom: 0;
}

.page-section--duotone-noise::before,
.page-section--duotone-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('assets/noise-grain.svg');
  background-repeat: repeat;
  background-size: 224px 224px;
}

.page-section--duotone-noise::before {
  mix-blend-mode: multiply;
  opacity: 0.075;
}

.page-section--duotone-noise::after {
  mix-blend-mode: screen;
  opacity: 0.055;
}

/* Four product duotone bands only — tiled Noise.svg (opaque tile) at all breakpoints; no pseudo grain overlay */
.page-main--product-hero:has(.product-hero--csam)
  > .page-section.page-section--duotone-noise:has(
    .product-io__heading:not(.product-io__heading--deepfake-kicker)
  ),
.page-main--product-hero:has(.product-hero--csam)
  > .page-section.page-section--duotone-noise:has(.page-spec-chart),
.page-main--product-hero:has(.product-hero--deepfake)
  > .page-section.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker),
.page-main--product-hero:has(.product-hero--deepfake)
  > .page-section.page-section--law-recap.page-section--duotone-noise {
  background-color: transparent;
  background-image: url('assets/Noise.svg?v=n3');
  background-repeat: repeat;
  background-size: 256px 256px;
}

.page-main--product-hero:has(.product-hero--csam)
  > .page-section.page-section--duotone-noise:has(
    .product-io__heading:not(.product-io__heading--deepfake-kicker)
  )::before,
.page-main--product-hero:has(.product-hero--csam)
  > .page-section.page-section--duotone-noise:has(
    .product-io__heading:not(.product-io__heading--deepfake-kicker)
  )::after,
.page-main--product-hero:has(.product-hero--csam)
  > .page-section.page-section--duotone-noise:has(.page-spec-chart)::before,
.page-main--product-hero:has(.product-hero--csam)
  > .page-section.page-section--duotone-noise:has(.page-spec-chart)::after,
.page-main--product-hero:has(.product-hero--deepfake)
  > .page-section.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)::before,
.page-main--product-hero:has(.product-hero--deepfake)
  > .page-section.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)::after,
.page-main--product-hero:has(.product-hero--deepfake)
  > .page-section.page-section--law-recap.page-section--duotone-noise::before,
.page-main--product-hero:has(.product-hero--deepfake)
  > .page-section.page-section--law-recap.page-section--duotone-noise::after {
  display: none;
}

/* Duotone + noise bands: same max width + horizontal inset as index hero (--page-text-inset-left) */
.page-section--duotone-noise > .page-inner {
  position: relative;
  z-index: 1;
  max-width: min(1600px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-text-inset-left);
  padding-right: var(--page-text-inset-left);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .page-section--duotone-noise > .page-inner {
    padding-left: clamp(2.45rem, 5.75vw, 2.95rem);
    padding-right: clamp(2.45rem, 5.75vw, 2.95rem);
  }
}

.product-io__heading,
.page-api-split__title,
.page-product-duotone-heading {
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(1.95rem, 4.2vw, 3.25rem);
  font-weight: 500;
  line-height: 1.22;
  max-width: none;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.product-io__heading,
.page-api-split__title {
  text-align: left;
}

.product-io__heading {
  margin: 0 0 clamp(4.55rem, 9.75vw, 6.35rem);
}

/* Deepfake Model I/O: match CTA kicker (“Join the movement…”) — Azeret, caps, #aafff0 */
.product-io__heading.product-io__heading--deepfake-kicker {
  font-family: 'Azeret Mono', monospace;
  font-size: clamp(1.08rem, 2.1vw, 1.82rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.62;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  color: #aafff0;
  -webkit-text-fill-color: #aafff0;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  overflow-wrap: normal;
  word-break: normal;
}

.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
  .product-io__heading.product-io__heading--deepfake-kicker {
  margin-top: clamp(0.85rem, 1.65vw, 1.35rem);
}

.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker) .product-io__col--input {
  margin-top: clamp(1.35rem, 2.55vw, 1.95rem);
  min-width: 0;
}

.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker) .product-io__grid {
  grid-template-columns: minmax(0, 1.24fr) minmax(11rem, min(27vw, 23.5rem)) minmax(0, 0.92fr);
  gap: clamp(1.65rem, 4.25vw, 3.75rem);
  margin-bottom: clamp(-1.35rem, -2.75vw, -0.7rem);
}

/* 1367–1727 landscape: grid override must live *after* the rule above — earlier @media lost to cascade. */
@media (max-width: 1727px) and (min-width: 1367px) and (orientation: landscape) {
  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker) .product-io__grid {
    /* Wider third track than 0.78fr so “Safe-For-Work GenAI” fits; fund from center + slight left trim */
    grid-template-columns: minmax(0, 1.48fr) minmax(9rem, min(18.25vw, 17rem)) minmax(0, 0.9fr);
    gap: clamp(1.05rem, 2.85vw, 2.55rem);
  }

  .page-main--product-hero
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--input
    .product-io__problem-line {
    font-size: clamp(calc(1.28rem + 1px), calc(2.12vw + 1px), calc(1.68rem + 1px));
  }
}

/* Deepfake Model I/O: ≤1366 landscape — grid + input problem line continue below 1367px band */
@media (max-width: 1366px) and (min-width: 901px) and (orientation: landscape) {
  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker) .product-io__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(8.5rem, min(16.5vw, 15rem)) minmax(0, 0.86fr);
    gap: clamp(0.88rem, 2.35vw, 2.05rem);
  }

  .page-main--product-hero
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--input
    .product-io__problem-line {
    font-size: clamp(calc(1.22rem + 1px), calc(2.02vw + 1px), calc(1.62rem + 1px));
  }
}

/* Deepfake Model I/O — ≤1570: step down on lines under “The Problem” / “Not The Problem” */
@media (max-width: 1570px) {
  .page-main--product-hero
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--input
    .product-io__problem-line,
  .page-main--product-hero
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--output
    .product-io__problem-line {
    font-size: clamp(calc(1.26rem + 1px), calc(2.12vw + 1px), calc(1.66rem + 1px));
    line-height: 1.4;
  }
}

/* Deepfake Model I/O — ≤1532: smaller lines under “The Problem” / “Not The Problem” */
@media (max-width: 1532px) {
  .page-main--product-hero
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--input
    .product-io__problem-line,
  .page-main--product-hero
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--output
    .product-io__problem-line {
    font-size: clamp(calc(1.18rem + 1px), calc(1.95vw + 1px), calc(1.52rem + 1px));
    line-height: 1.38;
  }
}

/* Deepfake Model I/O — ≤1469: headings + body lines under rules (step before ≤1410) */
@media (max-width: 1469px) {
  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--input
    .product-io__col-heading,
  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--output
    .product-io__col-heading {
    font-size: clamp(1.32rem, 2.78vw, 1.8rem);
    line-height: 1.17;
  }

  .page-main--product-hero
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--input
    .product-io__problem-line,
  .page-main--product-hero
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--output
    .product-io__problem-line {
    font-size: clamp(calc(1.1rem + 1px), calc(1.86vw + 1px), calc(1.44rem + 1px));
    line-height: 1.37;
  }
}

/* Deepfake Model I/O — ≤1410: smaller “The Problem” / “Not The Problem” + lines below */
@media (max-width: 1410px) {
  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker) .product-io__col--input {
    transform: translateY(clamp(-0.78rem, -1.48vw, -0.38rem));
  }

  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--input
    .product-io__rule {
    max-width: min(21.5rem, 92%);
  }

  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--input
    .product-io__col-heading,
  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--output
    .product-io__col-heading {
    font-size: clamp(1.28rem, 2.65vw, 1.72rem);
    line-height: 1.16;
  }

  .page-main--product-hero
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--input
    .product-io__problem-line,
  .page-main--product-hero
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--output
    .product-io__problem-line {
    font-size: clamp(calc(1.06rem + 1px), calc(1.78vw + 1px), calc(1.38rem + 1px));
    line-height: 1.36;
  }
}

.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker) .product-io__col {
  min-width: 0;
}

.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
  .product-io__col--input
  .product-io__problem-lines {
  max-width: none;
  width: 100%;
}

.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker) .product-io__col--visual {
  margin-top: clamp(-2.55rem, -4.65vw, -1.8rem);
  align-items: flex-end;
}

.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
  .product-io__col--input
  .product-io__col-heading {
  margin-bottom: clamp(1.45rem, 2.85vw, 2.05rem);
}

.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
  .product-io__col--output
  .product-io__col-heading {
  margin-bottom: clamp(1.45rem, 2.85vw, 2.05rem);
}

.page-api-split__title {
  margin: 0;
}

.page-product-duotone-heading.page-section-title--center {
  text-align: center;
  margin: 0 auto 1rem;
  max-width: min(52rem, 100%);
}

.product-io__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(10rem, min(24vw, 21.5rem)) minmax(0, 1.08fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.product-io__rule {
  height: 0;
  width: 100%;
  max-width: 23.5rem;
  border: 0;
  border-top: 1.5px solid #fff;
  margin: 0 0 0.9rem;
  padding: 0;
  background: none;
}

.product-io__col--input .product-io__rule {
  max-width: 26.5rem;
  border-top-width: 2px;
}

.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
  .product-io__col--input
  .product-io__rule {
  max-width: 27.5rem;
}

.product-io__col--output .product-io__rule {
  max-width: 25rem;
  border-top-width: 2px;
}

.product-io__col-heading {
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(1.55rem, 3.35vw, 2.1rem);
  font-weight: 500;
  margin: 0 0 1.55rem;
  line-height: 1.18;
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

/* CSAM Model Input uses one <ul> of six items — wrapper is single block; two text columns from ≥768 via .product-io__list grid. */
.product-io__lists {
  display: block;
  width: 100%;
  max-width: min(42rem, 100%);
}

.product-io__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Match legacy side-by-side lists: first three bullets in column one, next three in column two. */
@media (min-width: 768px) {
  .product-io__lists .product-io__list {
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-flow: column;
    column-gap: clamp(0.15rem, 0.85vw, 0.48rem);
    row-gap: 0.4rem;
    align-items: start;
  }
}

.product-io__list li {
  position: relative;
  padding-left: 1em;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1.42rem, 2.65vw, 1.7rem);
  font-weight: 350;
  color: #fff;
  line-height: 1.82;
  text-transform: none;
  letter-spacing: normal;
  border: none;
}

.product-io__list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.85);
}

.product-io__problem-lines {
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 1.35vw, 0.95rem);
  margin: 0;
  padding: 0;
  max-width: min(42rem, 100%);
  width: 100%;
}

.product-io__problem-line {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1.42rem, 2.65vw, 1.7rem);
  font-weight: 350;
  color: #fff;
  line-height: 1.42;
  max-width: 100%;
  overflow-wrap: break-word;
}

.product-io__col--visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  margin-top: -1.3rem;
}

.product-io__img {
  display: block;
  width: 100%;
  max-width: min(21.5rem, 72vw);
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

/* Deepfake I/O: vertical scales art */
.product-io__img.product-io__img--deepfake-scales {
  max-width: min(22rem, 64vw);
  max-height: min(37rem, 58vh);
  width: auto;
  margin: 0 auto;
  transform: translate(clamp(-1rem, -1.85vw, -0.5rem), clamp(-8.35rem, -17.5vw, -5.35rem));
}

.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker) .product-io__img.product-io__img--deepfake-scales {
  max-height: min(31rem, 50vh);
  transform: translate(clamp(-1rem, -1.85vw, -0.5rem), clamp(-7.35rem, -15vw, -4.5rem));
  margin-bottom: clamp(-2.75rem, -5.5vw, -1.65rem);
}

.product-io__col--output {
  padding-left: clamp(1.65rem, 4.1vw, 2.95rem);
  box-sizing: border-box;
}

/* Deepfake Model I/O: right-align “Not The Problem” column (CSAM unchanged) */
.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker) .product-io__col--output {
  text-align: right;
  padding-left: 0;
  padding-right: clamp(1.1rem, 3.15vw, 2.35rem);
  margin-top: clamp(-2.55rem, -4.65vw, -1.8rem);
  transform: translateX(clamp(0.35rem, 0.85vw, 0.75rem));
}

.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
  .product-io__col--output
  .product-io__rule {
  max-width: min(30.5rem, 100%);
  width: 100%;
  border-top-width: 2px;
  margin-left: auto;
  margin-right: 0;
}

.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
  .product-io__col--output
  .product-io__col-heading {
  max-width: min(37rem, 96%);
  margin-left: auto;
  width: 100%;
  box-sizing: border-box;
}

.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
  .product-io__col--output
  .product-io__problem-lines {
  gap: clamp(0.78rem, 1.6vw, 1.2rem);
  max-width: min(37rem, 96%);
  margin-left: auto;
  width: 100%;
  box-sizing: border-box;
}

.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
  .product-io__col--output
  .product-io__problem-line {
  line-height: 1.52;
}

.product-io__output {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1.38rem, 2.5vw, 1.64rem);
  font-weight: 350;
  line-height: 1.74;
  color: #fff;
  max-width: min(22rem, 100%);
}

/* Detect / Model I/O — body lines match API plug-in subtitle (.page-api-split__lead) */
.page-main--product-hero .page-section--duotone-noise .product-io__list li,
.page-main--product-hero .page-section--duotone-noise .product-io__problem-line,
.page-main--product-hero .page-section--duotone-noise .product-io__output {
  font-size: clamp(calc(1.35rem + 1px), calc(2.4vw + 1px), calc(1.8rem + 1px));
}

.page-main--product-hero .page-section--duotone-noise .product-io__output {
  max-width: min(34rem, 100%);
  overflow-wrap: break-word;
}

/* CSAM Model I/O — slightly smaller type than shared product-io band (Deepfake page keeps rules above). */
.page-main--product-hero:has(.product-hero--csam)
  .page-section--duotone-noise
  .product-io__list
  li,
.page-main--product-hero:has(.product-hero--csam)
  .page-section--duotone-noise
  .product-io__problem-line,
.page-main--product-hero:has(.product-hero--csam)
  .page-section--duotone-noise
  .product-io__output {
  font-size: clamp(calc(1.2rem + 1px), calc(2.05vw + 1px), calc(1.58rem + 1px));
}

.page-main--product-hero:has(.product-hero--csam)
  .page-section--duotone-noise
  .product-io
  .product-io__col-heading {
  font-size: clamp(1.42rem, 3.05vw, 1.92rem);
}

/* CSAM Model I/O — ≤1280: smaller copy + column headings under Model Input / Model Output */
@media (max-width: 1280px) {
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__list
    li,
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__output {
    font-size: clamp(calc(1.02rem + 1px), calc(1.72vw + 1px), calc(1.34rem + 1px));
    line-height: 1.62;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__col-heading {
    font-size: clamp(1.28rem, 2.72vw, 1.72rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--duotone-noise:has(
      .product-io__heading:not(.product-io__heading--deepfake-kicker)
    ) {
    padding-top: clamp(2.85rem, 6.25vw, 5.35rem);
    padding-bottom: clamp(2.5rem, 5.5vw, 4.65rem);
  }
}

/* Deepfake Model I/O — ≤1280: band + grid read higher; shorter rule; smaller scales art + nudge left */
@media (max-width: 1280px) {
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker) {
    padding-top: clamp(2.35rem, 5.5vw, 4.35rem);
  }

  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__heading.product-io__heading--deepfake-kicker {
    margin-bottom: clamp(2rem, 4.85vw, 3.65rem);
  }

  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker) .product-io__col--input {
    margin-top: clamp(0.65rem, 1.65vw, 1.35rem);
  }

  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--input
    .product-io__rule {
    max-width: min(21.5rem, 92%);
  }

  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__img.product-io__img--deepfake-scales {
    max-width: min(19.25rem, 58vw);
    max-height: min(27.5rem, 44vh);
    transform: translate(
      clamp(-2.35rem, -3.85vw, -1.25rem),
      clamp(-7.35rem, -15vw, -4.5rem)
    );
  }

  /* Two-column band: pull scales column off the strong negative margin so art sits visibly lower */
  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--visual {
    margin-top: clamp(0.35rem, 1.35vw, 1.1rem);
  }
}

/* CSAM Model I/O — 901–1280: Files art slightly smaller + nudged up (two-column layout only) */
@media (max-width: 1280px) and (min-width: 901px) {
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__col--visual {
    margin-top: clamp(-2.45rem, -4.5vw, -1.85rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__img:not(.product-io__img--deepfake-scales) {
    max-width: min(19.35rem, 64vw);
    transform: translate(
      clamp(0.3rem, 0.9vw, 0.7rem),
      clamp(-0.75rem, -1.45vw, -0.35rem)
    );
  }
}

@media (max-width: 900px) {
  .product-io__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2.25rem;
  }

  .product-io__col--output {
    padding-left: 0;
  }

  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker) .product-io__col--output {
    padding-right: 0;
    margin-top: 0;
    transform: none;
  }

  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker) .product-io__col--input {
    margin-top: clamp(0.65rem, 2vw, 1.15rem);
  }

  .product-io__col--visual {
    order: -1;
    padding-top: 0;
    margin-top: -1.1rem;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__col--visual {
    margin-top: clamp(-1.55rem, -3.85vw, -1.15rem);
  }

  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker) .product-io__col--visual {
    margin-top: clamp(-1.45rem, -3.2vw, -0.8rem);
  }

  .product-io__img {
    max-width: min(18rem, 62vw);
    margin: 0 auto;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__img:not(.product-io__img--deepfake-scales) {
    max-width: min(16.85rem, 58vw);
    transform: translate(0.35rem, -0.55rem);
  }

  .product-io__img.product-io__img--deepfake-scales {
    max-width: min(20.25rem, 64vw);
    max-height: min(32.5rem, 54vh);
  }

  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker) .product-io__img.product-io__img--deepfake-scales {
    max-height: min(28rem, 48vh);
    margin-bottom: clamp(-2rem, -4.5vw, -1.2rem);
  }

  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker) .product-io__grid {
    margin-bottom: clamp(-1rem, -2.25vw, -0.5rem);
  }

  .product-io__output {
    max-width: none;
  }
}

/* CSAM Model I/O — tablet portrait only: wider Model Output copy + nudge column left (less wrap). */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__col--output {
    padding-left: clamp(0.55rem, 1.85vw, 1.35rem);
    margin-left: clamp(-0.5rem, -1.35vw, -0.12rem);
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__output {
    max-width: min(41rem, 100%);
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__col--output
    .product-io__rule {
    max-width: min(41rem, 100%);
  }
}

/*
 * CSAM Model I/O — tablet portrait 768–900 (+ narrow landscape 800–904): restore 3-column grid + center art.
 * Generic ≤900 flex-stack on `.product-io__grid` loses to this selector. Deepfake unchanged (:has(.product-hero--csam)).
 */
@media (max-width: 900px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8rem, min(24vw, 12.1rem)) minmax(0, 1fr);
    gap: clamp(0.55rem, 1.75vw, 1.25rem);
    align-items: start;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__col--visual {
    order: 0;
    margin-top: clamp(-1.35rem, -3.15vw, -0.82rem);
    padding-top: 0;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__col--output {
    padding-left: clamp(0.45rem, 1.35vw, 1.05rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__img:not(.product-io__img--deepfake-scales) {
    max-width: min(13.85rem, 36vw);
    width: 100%;
    margin: 0 auto;
    transform: translate(
      clamp(0.1rem, 0.5vw, 0.38rem),
      clamp(-0.42rem, -1.05vw, -0.08rem)
    );
  }
}

/*
 * CSAM API plug-in — tablet portrait 768–900 (+ narrow landscape 800–904): two-column grid + right-aligned art.
 * Generic ≤900 single-column `.page-api-split__grid` loses to this block. Deepfake mirrors below.
 */
@media (max-width: 900px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(17.25rem, 30vw));
    gap: clamp(0.75rem, 2.2vw, 1.55rem);
    align-items: center;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__copy {
    text-align: left;
    padding-top: clamp(0.85rem, 2.25vw, 1.65rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__body {
    margin-left: 0;
    margin-right: 0;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__visual {
    justify-content: flex-end;
    margin-left: 0;
    margin-right: 0;
    margin-top: clamp(1.25rem, 3.35vw, 2.35rem);
    max-width: min(18.5rem, 38vw);
    transform: translateX(clamp(0.2rem, 0.95vw, 0.75rem));
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__img {
    max-width: min(15.85rem, 100%);
  }
}

/* Deepfake API plug-in — same portrait / narrow-landscape band as CSAM API block above. */
@media (max-width: 900px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(17.25rem, 30vw));
    gap: clamp(0.75rem, 2.2vw, 1.55rem);
    align-items: center;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__copy {
    text-align: left;
    padding-top: clamp(0.85rem, 2.25vw, 1.65rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__body {
    margin-left: 0;
    margin-right: 0;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__visual {
    justify-content: flex-end;
    margin-left: 0;
    margin-right: 0;
    margin-top: clamp(1.25rem, 3.35vw, 2.35rem);
    max-width: min(18.5rem, 38vw);
    transform: translateX(clamp(0.2rem, 0.95vw, 0.75rem));
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__img {
    max-width: min(15.85rem, 100%);
  }
}

/*
 * CSAM performance stats (plexus) — tablet portrait 768–900 + narrow landscape 800–904: one row of four boxes.
 * Generic ≤900 still uses 2×2 on `.page-performance-stats__grid`; this block overrides for product plexus only (higher specificity). Deepfake mirrors below.
 */
@media (max-width: 900px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-performance-stats__grid--plexus {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    --stat-gap: clamp(0.5rem, 1.1vw, 0.88rem);
    --stat-extend-right: clamp(0.3rem, 0.85vw, 0.55rem);
    width: calc(min(72rem, 100%) + var(--stat-extend-right));
    max-width: calc(100% + var(--stat-extend-right));
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-performance-stats__box {
    /* Base min-height is tall vs. stepped-down type at ≤1180; hug content on Air portrait */
    min-height: 0;
    align-self: start;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-performance-stats__box-inner {
    padding-left: clamp(0.42rem, 1.05vw, 0.68rem);
    padding-right: clamp(0.42rem, 1.05vw, 0.68rem);
    padding-top: clamp(0.48rem, 1.1vw, 0.72rem);
    padding-bottom: clamp(0.32rem, 0.75vw, 0.48rem);
  }
}

/* Deepfake Unparalleled Performance (plexus) — same portrait / narrow-landscape band as CSAM block above. */
@media (max-width: 900px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--performance-stats--deepfake.page-section--performance-stats--plexus
    .page-performance-stats__grid--plexus {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    --stat-gap: clamp(0.5rem, 1.1vw, 0.88rem);
    --stat-extend-right: clamp(0.3rem, 0.85vw, 0.55rem);
    width: calc(min(72rem, 100%) + var(--stat-extend-right));
    max-width: calc(100% + var(--stat-extend-right));
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--performance-stats--deepfake.page-section--performance-stats--plexus
    .page-performance-stats__box {
    min-height: 0;
    align-self: start;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--performance-stats--deepfake.page-section--performance-stats--plexus
    .page-performance-stats__box-inner {
    padding-left: clamp(0.42rem, 1.05vw, 0.68rem);
    padding-right: clamp(0.42rem, 1.05vw, 0.68rem);
    padding-top: clamp(0.48rem, 1.1vw, 0.72rem);
    padding-bottom: clamp(0.32rem, 0.75vw, 0.48rem);
  }
}

/*
 * CSAM Model I/O — 768–1024 landscape only: favor output column width; keep copy inside the grid cell (no nowrap —
 * nowrap + min-content was overflowing the section).
 */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__grid {
    /* Center track modestly wider than default min(20vw,17.5rem) so Files.png reads larger without dominating the row */
    grid-template-columns: minmax(0, 0.96fr) minmax(10rem, min(23vw, 18.5rem)) minmax(0, 1.2fr);
    gap: clamp(1.1rem, 3.25vw, 2.75rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__col--visual {
    transform: translateX(clamp(0.4rem, 1.15vw, 1rem));
    min-width: 0;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__img:not(.product-io__img--deepfake-scales) {
    max-width: min(22.75rem, 69vw);
    transform: translate(
      clamp(0.32rem, 0.95vw, 0.72rem),
      clamp(-0.35rem, -0.72vw, -0.06rem)
    );
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__col--output {
    padding-left: clamp(0.65rem, 1.65vw, 1.35rem);
    min-width: 0;
    /* X nudge only — Y must stay 0 so rule / titles align with Model Input column */
    transform: translateX(clamp(0.35rem, 1vw, 0.9rem));
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__col--output
    .product-io__col-heading {
    max-width: min(34.5rem, 100%);
    min-width: 0;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__output {
    max-width: min(27.5rem, 100%);
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__col--input
    .product-io__rule,
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__col--output
    .product-io__rule {
    border-top-width: 2px;
    margin: 0 0 0.9rem;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__col--output
    .product-io__rule {
    max-width: min(30.5rem, calc(100% - 0.95rem));
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__col--input
    .product-io__col-heading,
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__col--output
    .product-io__col-heading {
    margin-top: 0;
    margin-bottom: 1.55rem;
    line-height: 1.18;
  }
}

/* Deepfake Model I/O — ≤1180: shorter rule; smaller scales art (placement matches ≤1280); smaller Problem / Not The Problem + lines */
@media (max-width: 1180px) {
  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--input
    .product-io__rule {
    max-width: min(18.5rem, 88%);
  }

  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__img.product-io__img--deepfake-scales {
    max-width: min(16.5rem, 46vw);
    max-height: min(21rem, 36vh);
    /* Same X/Y as ≤1280 so vertical match stays; only size steps down at this breakpoint */
    transform: translate(
      clamp(-2.35rem, -3.85vw, -1.25rem),
      clamp(-7.35rem, -15vw, -4.5rem)
    );
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--input
    .product-io__col-heading,
  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--output
    .product-io__col-heading {
    font-size: clamp(1.04rem, 2.05vw, 1.45rem);
    line-height: 1.12;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--input
    .product-io__problem-line,
  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--output
    .product-io__problem-line {
    font-size: clamp(calc(0.94rem + 1px), calc(1.48vw + 1px), calc(1.18rem + 1px));
    line-height: 1.32;
  }
}

/* Deepfake Model I/O — tablet portrait only: smaller scales image; wider Not The Problem copy (after ≤1180 / ≤900). */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__img.product-io__img--deepfake-scales {
    max-width: min(11.1rem, 34vw);
    max-height: min(16.25rem, 27vh);
    transform: translate(
      clamp(-1.58rem, -2.38vw, -0.76rem),
      clamp(-7.35rem, -15vw, -4.5rem)
    );
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--output {
    padding-right: clamp(0.2rem, 1.2vw, 0.85rem);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--output
    .product-io__rule {
    flex-shrink: 0;
    max-width: none;
    /* Right edge flush with heading / problem-lines; % = column width */
    width: calc(min(44rem, 100%) + clamp(1.65rem, 4.25vw, 3.25rem));
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--output
    .product-io__col-heading {
    flex-shrink: 0;
    width: min(44rem, 100%);
    max-width: min(44rem, 100%);
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--output
    .product-io__problem-lines {
    flex-shrink: 0;
    width: min(44rem, 100%);
    max-width: min(44rem, 100%);
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
}

/* Deepfake Model I/O — 768–1024 only: extra bottom padding on duotone band; tighter band-to-band gap below. */
@media (max-width: 1024px) and (min-width: 768px) {
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker) {
    padding-bottom: clamp(4.85rem, 10.25vw, 7.85rem);
    margin-bottom: clamp(-2.95rem, -5.05vw, -1.62rem);
  }
}

/* Deepfake Model I/O — 768–1024 landscape: wider “Not The Problem” track; scales column + img (grid only when >900) */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__grid {
    grid-template-columns: minmax(0, 1.22fr) minmax(8rem, min(16vw, 14.5rem)) minmax(0, 1.08fr);
    gap: clamp(0.85rem, 2.2vw, 1.95rem);
    transform: translateY(clamp(1.42rem, 2.1vw, 1.95rem));
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--visual {
    transform: translate(
      clamp(1.18rem, 2.52vw, 2.08rem),
      clamp(0.3rem, 0.65vw, 0.55rem)
    );
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__img.product-io__img--deepfake-scales {
    max-width: min(13.65rem, 40vw);
    max-height: min(17.25rem, 30vh);
  }
}

/* Deepfake Model I/O — tablet portrait, three-column band only: wider “The Problem” track + tighter center (scales). */
@media (max-width: 1024px) and (min-width: 901px) and (orientation: portrait) {
  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__grid {
    grid-template-columns: minmax(0, 1.58fr) minmax(8.5rem, min(20vw, 17.5rem)) minmax(0, 0.82fr);
    gap: clamp(1rem, 2.85vw, 2.35rem);
  }
}

/* Deepfake Model I/O — stacked tablet portrait (≤900): slightly trim duotone horizontal padding so “The Problem” lines get more line length. */
@media (max-width: 900px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker) {
    padding-left: calc(var(--page-margin) * 1.55);
    padding-right: calc(var(--page-margin) * 1.55);
  }
}

/*
 * Deepfake Model I/O — tablet portrait 768–900 (+ narrow landscape 800–904): 3-column grid like 901–1024 portrait.
 * Overrides generic ≤900 flex on `.product-io__grid` for deepfake duotone. CSAM unchanged.
 */
@media (max-width: 900px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(6rem, min(15.5vw, 11.25rem)) minmax(0, 1.02fr);
    gap: clamp(0.55rem, 1.75vw, 1.2rem);
    align-items: start;
    margin-bottom: clamp(-1rem, -2.25vw, -0.5rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--visual {
    order: 0;
    /* Less negative than default band — whole center column sits slightly lower */
    margin-top: clamp(-1.25rem, -2.65vw, -0.55rem);
    align-items: center;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__img.product-io__img--deepfake-scales {
    max-width: min(10.5rem, 28vw);
    max-height: min(13.25rem, 22vh);
    width: auto;
    height: auto;
    object-fit: contain;
    transform: translate(
      clamp(-1.55rem, -2.85vw, -0.88rem),
      clamp(-3.65rem, -6.85vw, -1.55rem)
    ) scale(0.9);
    transform-origin: 50% 38%;
    margin-bottom: clamp(-1.15rem, -2.65vw, -0.55rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--input {
    margin-top: clamp(1.2rem, 2.45vw, 1.85rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--output {
    margin-top: clamp(-2.15rem, -3.85vw, -1.35rem);
    transform: translateX(clamp(0.28rem, 0.75vw, 0.65rem));
    padding-right: clamp(0.45rem, 1.35vw, 1.15rem);
  }
}

.page-section--grid-bg {
  position: relative;
  overflow: hidden;
}

/* No face? band — full-bleed like duotone / API rows so grid reaches viewport edges; extra space below cards */
.page-main--product-hero > .page-section.page-section--grid-bg.page-section--alt {
  width: calc(100% + 2 * var(--page-margin));
  max-width: none;
  margin-left: calc(-1 * var(--page-margin));
  margin-right: calc(-1 * var(--page-margin));
  padding-left: calc(var(--page-margin) * 2);
  padding-right: calc(var(--page-margin) * 2);
  box-sizing: border-box;
  padding-bottom: clamp(4rem, 7.5vw, 6.35rem);
}

.page-section--grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(45, 212, 191, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 212, 191, 0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  opacity: 0.78;
}

/* CSAM “No Face?” band (light): slightly stronger grid on pale --bg-alt */
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--csam)
  .page-section--grid-bg::before {
  background-image:
    linear-gradient(rgba(13, 148, 136, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 148, 136, 0.09) 1px, transparent 1px);
  opacity: 0.86;
}

/* TAP Features (advertiser portal, light): same grid lines as CSAM “No Face?” on --bg-alt */
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--advertiser-portal)
  .advertiser-portal-tap-features.page-section--grid-bg::before {
  background-image:
    linear-gradient(rgba(13, 148, 136, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 148, 136, 0.09) 1px, transparent 1px);
  opacity: 0.86;
}

.page-inner {
  position: relative;
  z-index: 1;
  max-width: min(72rem, 100%);
  margin: 0 auto;
}

.page-section-title {
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  font-weight: 500;
  margin: 0 0 1rem;
  line-height: 1.3;
}

.page-section-title--center {
  text-align: center;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.page-section-title.page-section-title--center.page-product-duotone-heading {
  font-size: clamp(1.95rem, 4.2vw, 3.25rem);
  line-height: 1.22;
  max-width: min(52rem, 100%);
}

/* Left-aligned product gradient titles (same size/weight as centered duotone headings) */
.page-section-title.page-product-duotone-heading:not(.page-section-title--center) {
  font-size: clamp(1.95rem, 4.2vw, 3.25rem);
  line-height: 1.22;
  max-width: min(52rem, 100%);
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* CSAM + Deepfake product pages: section H2s share fluid type scale (API plug-in title matches CSAM on deepfake.html) */
.page-main--product-hero:has(.product-hero--csam),
.page-main--product-hero:has(.product-hero--deepfake) {
  --product-csam-section-heading-fs: clamp(2.2rem, 4.25vw, 3.15rem);
  --product-csam-section-heading-lh: 1.58;
}

@media (max-width: 1470px) and (min-width: 1367px) {
  .page-main--product-hero:has(.product-hero--csam),
  .page-main--product-hero:has(.product-hero--deepfake) {
    --product-csam-section-heading-fs: clamp(2.05rem, 4.05vw, 2.92rem);
    --product-csam-section-heading-lh: 1.52;
  }
}

@media (max-width: 1280px) {
  .page-main--product-hero:has(.product-hero--csam),
  .page-main--product-hero:has(.product-hero--deepfake) {
    --product-csam-section-heading-fs: clamp(1.62rem, 3.65vw, 2.68rem);
    --product-csam-section-heading-lh: 1.5;
  }
}

/* CSAM Model I/O — Model Input / Model Output h3s larger than generic .product-io__col-heading (≥768; ≤767 uses band below) */
.page-main--product-hero:has(.product-hero--csam)
  .page-section--duotone-noise
  .product-io:not(:has(.product-io__heading--deepfake-kicker))
  .product-io__col-heading {
  font-size: clamp(1.32rem, 3.15vw, 1.88rem);
  line-height: 1.2;
}

/* CSAM Model I/O — tighter gap under section H2 (type unifies with other section H2s in 768–1024 landscape only — see block below) */
.page-main--product-hero:has(.product-hero--csam)
  .page-section--duotone-noise
  .product-io__heading:not(.product-io__heading--deepfake-kicker) {
  margin-bottom: clamp(3.05rem, 6.5vw, 4.65rem);
}

.page-main--product-hero:has(.product-hero--csam) .product-io__heading:not(.product-io__heading--deepfake-kicker),
.page-main--product-hero:has(.product-hero--csam) .page-api-split__title,
.page-main--product-hero:has(.product-hero--csam) .page-section-title.page-product-duotone-heading,
.page-main--product-hero:has(.product-hero--deepfake)
  .page-section--api-split:not(.page-section--law-recap)
  .page-api-split__title,
.page-main--product-hero:has(.product-hero--deepfake)
  .page-section--performance-stats
  .page-section-title.page-product-duotone-heading {
  font-size: var(--product-csam-section-heading-fs);
  line-height: var(--product-csam-section-heading-lh);
}

/* CSAM + Deepfake product pages — 768–1024 landscape: non-hero section H2s share Detect… / API plug-in scale (0.93 × shared vars; placed after rule above so it wins) */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--csam)
    .product-io__heading:not(.product-io__heading--deepfake-kicker),
  .page-main--product-hero:has(.product-hero--csam)
    .page-api-split__title,
  .page-main--product-hero:has(.product-hero--csam)
    .page-section-title.page-product-duotone-heading,
  .page-main--product-hero:has(.product-hero--deepfake)
    .page-api-split__title,
  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section-title.page-product-duotone-heading,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .page-api-split__grid--law-recap
    .page-api-split__title {
    font-size: calc(var(--product-csam-section-heading-fs) * 0.93);
    line-height: calc(var(--product-csam-section-heading-lh) * 0.98);
  }
}

/*
 * CSAM product — iPad mini / Air portrait (768–833): section H2s −2px vs shared --product-csam-section-heading-fs (≤1280).
 * Placed after shared CSAM section-heading rules so this wins. Deepfake unchanged; viewports outside this query unchanged.
 */
@media (max-width: 833px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--csam)
    .product-io__heading:not(.product-io__heading--deepfake-kicker),
  .page-main--product-hero:has(.product-hero--csam) .page-api-split__title,
  .page-main--product-hero:has(.product-hero--csam)
    .page-section-title.page-product-duotone-heading {
    font-size: calc(var(--product-csam-section-heading-fs) - 2px);
    line-height: var(--product-csam-section-heading-lh);
  }

  .page-main--product-hero:has(.product-hero--csam) .section-cta-inner .section-cta-title {
    font-size: calc(clamp(1.58rem, 3.95vw, 2.65rem) - 2px);
  }
}

/* TAP blindspot (under hero): H2 −6px vs shared heading fs; tighter line-height vs --product-csam-section-heading-lh. */
.page-main--product-hero:has(.product-hero--advertiser-portal)
  .advertiser-portal-stack-section.page-section--api-split
  .page-api-split__title.advertiser-portal-stack-section__title {
  font-size: calc(var(--product-csam-section-heading-fs) - 6px);
  line-height: calc(var(--product-csam-section-heading-lh) * 0.88);
}

/* TAP blind-spot row: extra space above TAP Features band */
.page-main--product-hero:has(.product-hero--advertiser-portal)
  > .advertiser-portal-stack-section.page-section--api-split {
  padding-bottom: clamp(3rem, 6.25vw, 5.25rem);
}

@media (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section.page-section--api-split
    .page-api-split__title.advertiser-portal-stack-section__title {
    font-size: calc(var(--product-csam-section-heading-fs) * 0.93 - 6px);
    line-height: calc(var(--product-csam-section-heading-lh) * 0.92);
  }
}

@media (max-width: 833px) and (min-width: 768px) and (orientation: portrait),
  (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section.page-section--api-split
    .page-api-split__title.advertiser-portal-stack-section__title {
    font-size: calc(var(--product-csam-section-heading-fs) - 8px);
    line-height: calc(var(--product-csam-section-heading-lh) * 0.9);
  }
}

.page-section-sub {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin: 0 0 2rem;
  max-width: 40rem;
}

.page-section-label {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 1rem;
}

.page-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 768px) {
  .page-split {
    grid-template-columns: 1fr;
  }
}

.page-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-list li {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(51, 65, 85, 0.5);
  color: var(--text);
}

.page-output-box {
  padding: 1.5rem;
  border: 1px solid rgba(45, 212, 191, 0.25);
  border-radius: 8px;
  background: rgba(45, 212, 191, 0.06);
}

.page-output-box p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.55;
}

.page-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.page-pill {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  color: var(--text-muted);
}

/* Product: API plug-in row — gutters match .page-inner.product-io */
.page-main--product-hero > .page-section.page-section--api-split .page-inner.page-api-split {
  max-width: min(1600px, 100%);
  padding-left: var(--page-text-inset-left);
  padding-right: var(--page-text-inset-left);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .page-main--product-hero > .page-section.page-section--api-split .page-inner.page-api-split {
    padding-left: clamp(2.45rem, 5.75vw, 2.95rem);
    padding-right: clamp(2.45rem, 5.75vw, 2.95rem);
  }
}

/* TAP — first section under hero: pull copy + keyhole row left (padding + translateX; desktop-visible). */
@media (min-width: 769px) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-stack-section.page-section--api-split
    > .page-inner.page-api-split.advertiser-portal-stack-section__inner {
    padding-left: max(
      0.08rem,
      calc(var(--page-text-inset-left) - clamp(2.75rem, 5.05vw, 5.15rem))
    );
    transform: translateX(-clamp(1.3rem, 2.65vw, 2.5rem));
  }
}

@media (min-width: 1367px) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-stack-section.page-section--api-split
    > .page-inner.page-api-split.advertiser-portal-stack-section__inner {
    padding-left: max(
      0.06rem,
      calc(var(--page-text-inset-left) - clamp(3.05rem, 5.45vw, 5.85rem))
    );
    transform: translateX(-clamp(1.85rem, 3.15vw, 3.25rem));
  }
}

/* Copy uses remaining row width; art column capped so widening max-width on <p> actually shows */
.page-api-split__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(24rem, 30vw));
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
}

@media (max-width: 900px) {
  .page-api-split__grid {
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 4.5vw, 2.75rem);
  }

  .page-api-split__visual {
    max-width: min(24rem, 86vw);
    margin-left: auto;
    margin-right: auto;
  }

  .page-section--api-split:not(.page-section--law-recap) .page-api-split__visual {
    margin-left: auto;
    margin-right: 0;
    max-width: min(20.75rem, 88vw);
  }
}

.page-api-split__copy {
  text-align: left;
  min-width: 0;
  padding-top: clamp(1.35rem, 3.25vw, 2.5rem);
}

/* TAP blindspot row (769+): generic `.page-api-split__copy` top padding is huge — override + translate so lift reads on desktop;
 * widen copy + lead/body measure; slightly narrower art column + tighter gap so text sits left-er with fewer wraps. */
@media (min-width: 769px) {
  .advertiser-portal-stack-section__inner {
    gap: clamp(0.1rem, 0.45vw, 0.35rem);
  }

  .advertiser-portal-stack-section__visual {
    --ap-stack-col-outer: min(34.75rem, 48vw);
  }

  .advertiser-portal-stack-section
    > .advertiser-portal-stack-section__inner
    > .advertiser-portal-stack-section__copy.page-api-split__copy {
    padding-top: clamp(0.35rem, 1vw, 0.75rem);
    transform: translate(
      -clamp(1.35rem, 3.1vw, 2.65rem),
      calc(-1 * clamp(1rem, 2.1vw, 1.65rem))
    );
    max-width: min(82rem, 100%);
    flex: 1 1 min(0, 80rem);
  }

  .advertiser-portal-stack-section
    > .advertiser-portal-stack-section__inner
    > .advertiser-portal-stack-section__copy.page-api-split__copy
    .page-api-split__body,
  .advertiser-portal-stack-section
    > .advertiser-portal-stack-section__inner
    > .advertiser-portal-stack-section__copy.page-api-split__copy
    .page-api-split__lead {
    max-width: min(82rem, 100%);
  }
}

/*
 * TAP blind-spot + Features — iPad Air landscape (1025–1180). Blind-spot: copy left + down (art unchanged).
 */
@media (max-width: 1180px) and (min-width: 1025px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    > .advertiser-portal-stack-section__inner
    > .advertiser-portal-stack-section__copy.page-api-split__copy {
    transform: translate(
      calc(-1 * (clamp(1.35rem, 3.1vw, 2.65rem) + clamp(0.65rem, 1.35vw, 1.05rem))),
      calc(-1 * clamp(1rem, 2.1vw, 1.65rem) + clamp(0.65rem, 1.35vh, 1.05rem))
    );
  }

  /* Features — wider heading measure; headings +1px vs CSAM ≤1366 h3; body −4px vs base clamp. */
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-feature-card
    h3.page-feature-card__title,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-feature-card__title {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    font-size: calc(1.16rem + 1px);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-feature-card__title span {
    white-space: nowrap;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .advertiser-portal-tap-features__body
    p {
    font-size: calc(clamp(1.15rem, 2.05vw, 1.38rem) - 4px);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-no-face-stack__note.page-api-split__body {
    font-size: calc(clamp(1.12rem, 1.92vw, 1.42rem) + 5px);
  }
}

/*
 * TAP blind-spot — tablet (768–1024, portrait + landscape): art left, copy right; keyhole fully on-screen.
 * Drop desktop bleed padding + art-shift −11/19 (scene was sized to full column, so bleed clipped under html overflow-x:hidden).
 * Neutralize 769+ section-inner left pull; center keyhole in the art column. Beam visible (unlike ≤767).
 * ≤767 stacked phone and ≥1025 unchanged.
 */
@media (min-width: 768px) and (max-width: 1024px) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-stack-section.page-section--api-split
    > .page-inner.page-api-split.advertiser-portal-stack-section__inner {
    transform: none;
    padding-left: var(--page-text-inset-left);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section__inner {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: clamp(0.25rem, 1.15vw, 0.65rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section__visual {
    --ap-stack-col-outer: min(18.25rem, 33vw);
    flex: 0 0 var(--ap-stack-col-outer);
    width: var(--ap-stack-col-outer);
    max-width: var(--ap-stack-col-outer);
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    justify-content: center;
    overflow-x: visible;
    overflow-y: visible;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section__visual-inner {
    min-height: clamp(6.75rem, 14.5vh, 10.25rem);
    justify-content: flex-start;
    padding-inline: 0;
    /* Override ≥769 `.advertiser-portal-stack-section__visual-inner` right translate (2.85–9.25rem). */
    transform: translateX(clamp(-2.75rem, -5.5vw, -2rem));
    overflow: visible;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__scene,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__artboard,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__layers {
    overflow: visible;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__art-shift {
    transform: none;
    overflow: visible;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__keyhole-slot {
    position: absolute;
    left: calc(50% - clamp(0.85rem, 2vw, 1.15rem));
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% * 1294 / 2219);
    max-width: 100%;
    height: 100%;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__keyhole-slot
    .advertiser-portal-hero__keyhole {
    transform: none;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    > .advertiser-portal-stack-section__inner
    > .advertiser-portal-stack-section__copy.page-api-split__copy {
    padding-top: clamp(0.35rem, 1vw, 0.75rem);
    transform: translate(
      -clamp(0.35rem, 0.85vw, 0.65rem),
      calc(-1 * clamp(0.85rem, 1.85vw, 1.45rem))
    );
    max-width: min(88rem, 100%);
    flex: 1 1 min(0, 86rem);
    width: auto;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section.page-section--api-split
    .page-api-split__title.advertiser-portal-stack-section__title {
    max-width: min(38rem, 100%);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    > .advertiser-portal-stack-section__inner
    > .advertiser-portal-stack-section__copy.page-api-split__copy
    .page-api-split__body,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    > .advertiser-portal-stack-section__inner
    > .advertiser-portal-stack-section__copy.page-api-split__copy
    .page-api-split__lead {
    max-width: min(88rem, 100%);
    text-align: left;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section.page-section--api-split
    .page-api-split__title.advertiser-portal-stack-section__title {
    text-align: left;
  }

}

.page-api-split__lead {
  color: #fff;
  max-width: min(90rem, 100%);
  width: 100%;
}

.page-api-split__body {
  max-width: min(52rem, 100%);
  width: 100%;
  font-size: clamp(1.14rem, 1.8vw, 1.36rem);
}

/* No Face? — wider measure; body lines use same type scale as One-Time API plug-in */
.page-main--product-hero .page-section--grid-bg.page-section--alt .page-api-split__body.page-section-title--center {
  max-width: min(70rem, 100%);
}

/* API plug-in body + No Face body / note — one scale so they never drift */
.page-main--product-hero .page-section--api-split .page-api-split__body,
.page-main--product-hero .page-section--grid-bg.page-section--alt .page-api-split__body.page-section-title--center,
.page-main--product-hero .page-section--grid-bg.page-section--alt .page-no-face-stack__note.page-api-split__body {
  font-size: clamp(1.28rem, 2.15vw, 1.58rem);
  line-height: 1.6;
}

@media (max-width: 1366px) {
  .page-main--product-hero .page-section--api-split .page-api-split__body,
  .page-main--product-hero .page-section--grid-bg.page-section--alt .page-api-split__body.page-section-title--center,
  .page-main--product-hero .page-section--grid-bg.page-section--alt .page-no-face-stack__note.page-api-split__body {
    font-size: clamp(1.12rem, 1.92vw, 1.42rem);
    line-height: 1.6;
    max-width: min(62rem, 96vw);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .page-main--product-hero
    .page-section--performance-stats
    .page-api-split__body.page-section--performance-stats__body {
    font-size: clamp(1.12rem, 1.92vw, 1.42rem);
    line-height: 1.6;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--performance-stats--plexus
    .page-performance-stats__grid--plexus,
  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--performance-stats--plexus
    .page-performance-stats__grid--plexus {
    --stat-gap: clamp(1.25rem, 2.85vw, 2rem);
    --stat-extend-right: clamp(0.5rem, 1.35vw, 1.15rem);
  }
}

.page-main--product-hero .page-section--api-split .page-api-split__lead {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* CSAM + Deepfake — API plug-in lead: same subtitle scale (deepfake excludes law-recap band) */
.page-main--product-hero:has(.product-hero--csam) .page-api-split__lead,
.page-main--product-hero:has(.product-hero--deepfake)
  .page-section--api-split:not(.page-section--law-recap)
  .page-api-split__lead {
  font-size: clamp(calc(1.35rem + 1px), calc(2.4vw + 1px), calc(1.8rem + 1px));
  line-height: 1.35;
  font-weight: 350;
}

.page-main--product-hero:has(.product-hero--advertiser-portal)
  .advertiser-portal-stack-section
  .advertiser-portal-stack-section__copy.page-api-split__copy
  > .page-api-split__lead {
  font-size: calc(clamp(calc(1.35rem + 1px), calc(2.4vw + 1px), calc(1.8rem + 1px)) - 1px);
  line-height: 1.42;
  font-weight: 350;
}

@media (max-width: 1280px) {
  .page-main--product-hero:has(.product-hero--csam) .page-api-split__lead,
  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--api-split:not(.page-section--law-recap)
    .page-api-split__lead {
    font-size: clamp(calc(1.22rem + 1px), calc(2.1vw + 1px), calc(1.62rem + 1px));
    line-height: 1.32;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-stack-section__copy.page-api-split__copy
    > .page-api-split__lead {
    font-size: calc(clamp(calc(1.22rem + 1px), calc(2.1vw + 1px), calc(1.62rem + 1px)) - 1px);
    line-height: 1.4;
  }
}

.page-api-split__visual {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

@media (min-width: 901px) {
  .page-api-split__visual {
    margin-top: clamp(2.85rem, 5.25vw, 4.1rem);
  }

  .page-section--api-split:not(.page-section--law-recap) .page-api-split__visual {
    transform: translateX(clamp(0.4rem, 1.65vw, 1.85rem));
  }
}

.page-api-split__img {
  display: block;
  width: 100%;
  max-width: min(24rem, 100%);
  height: auto;
  object-fit: contain;
}

.page-section--api-split:not(.page-section--law-recap) .page-api-split__img {
  max-width: min(20.75rem, 100%);
}

@media (max-width: 900px) {
  .page-api-split__visual {
    justify-content: center;
    margin-top: clamp(1.75rem, 4.25vw, 2.85rem);
  }

  .page-section--api-split:not(.page-section--law-recap) .page-api-split__visual {
    justify-content: center;
  }
}

.page-section--api-split .btn-csam-started.page-api-split__cta {
  margin-top: clamp(2.35rem, 4.5vw, 3.15rem);
  padding: 0.8rem 1.95rem;
  font-size: 1.05rem;
  gap: 0.52rem;
  border-radius: 28px;
}

.page-section--api-split .btn-csam-started.page-api-split__cta .btn-arrow svg {
  width: 1.08rem;
  height: 1.08rem;
}

/* Deepfake product page: API CTA matches home deepfake band (inverted), same sizing as CSAM API row */
.page-main:has(.product-hero--deepfake) .page-section--api-split .btn-deepfake-started.page-api-split__cta {
  margin-top: clamp(2.35rem, 4.5vw, 3.15rem);
  padding: 0.8rem 1.95rem;
  font-size: 1.05rem;
  gap: 0.52rem;
  border-radius: 28px;
}

.page-main:has(.product-hero--deepfake) .page-section--api-split .btn-deepfake-started.page-api-split__cta .btn-arrow svg {
  width: 1.08rem;
  height: 1.08rem;
}

.page-main:has(.product-hero--deepfake) .page-section--api-split .page-api-split__title {
  background: none;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #fff;
  color: #fff;
}

.page-main:has(.product-hero--deepfake) .page-section--api-split .page-api-split__lead {
  color: #79ffea;
}

/* Deepfake law recap: same classes as Model I/O band — page-section--duotone-noise + page-inner.page-api-split */

/* ≥1281: duotone top from .page-section--duotone-noise; law band keeps extra bottom only */
.page-main--product-hero > .page-section.page-section--law-recap.page-section--duotone-noise {
  padding-bottom: clamp(5.85rem, 9.75vw, 7.5rem);
}

.page-main--product-hero > .page-section.page-section--law-recap .take-it-down-act {
  font-weight: 600;
}

.page-main--product-hero > .page-section.page-section--law-recap .page-inner.page-api-split {
  padding-right: 0;
}

@media (max-width: 768px) {
  .page-main--product-hero > .page-section.page-section--law-recap .page-inner.page-api-split {
    padding-right: clamp(2.45rem, 5.75vw, 2.95rem);
  }
}

/* Title row / body+image row — image lines up with body; extra row-gap = space below title.
   --law-copy-nudge: lower title + body without moving the hourglass (padding down + same amount pulled from visual margin). */
.page-main--product-hero > .page-section.page-section--law-recap .page-api-split__grid--law-recap {
  --law-copy-nudge: clamp(0.85rem, 2vw, 1.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(36rem, 42vw));
  grid-template-rows: auto auto;
  column-gap: clamp(1.5rem, 4vw, 3.25rem);
  row-gap: clamp(2.35rem, 4.75vw, 3.5rem);
  align-items: start;
  padding-top: calc(clamp(3.1rem, 6.1vw, 4.35rem) + var(--law-copy-nudge));
}

/* Law recap — 1281–1366: less space between title and body row (base row-gap unchanged at ≥1367) */
@media (max-width: 1366px) and (min-width: 1281px) {
  .page-main--product-hero > .page-section.page-section--law-recap .page-api-split__grid--law-recap {
    row-gap: clamp(1.5rem, 3.25vw, 2.35rem);
  }
}

/* Law recap — ≤1280 only: tighter band + pull stack up (do not alter ≥1281; see responsive-under-1367.mdc) */
@media (max-width: 1280px) {
  .page-main--product-hero > .page-section.page-section--law-recap.page-section--duotone-noise {
    padding-top: clamp(1.2rem, 3.15vw, 2.55rem);
    padding-bottom: clamp(3.95rem, 6.65vw, 6.1rem);
  }

  .page-main--product-hero > .page-section.page-section--law-recap .page-inner.page-api-split {
    margin-top: clamp(-0.65rem, -1.65vw, -0.18rem);
  }

  .page-main--product-hero > .page-section.page-section--law-recap .page-api-split__grid--law-recap {
    row-gap: clamp(1.35rem, 3.2vw, 2.35rem);
    padding-top: calc(clamp(1.45rem, 3.25vw, 2.45rem) + var(--law-copy-nudge));
  }
}

/* Deepfake law recap H2: same fluid type as “A One-Time API Plug-In.” (--product-csam-section-heading-fs on main). */
.page-main--product-hero:has(.product-hero--deepfake)
  > .page-section.page-section--law-recap
  .page-api-split__grid--law-recap
  .page-api-split__title {
  grid-column: 1 / -1;
  grid-row: 1;
  font-size: var(--product-csam-section-heading-fs);
  line-height: var(--product-csam-section-heading-lh);
  margin: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* Law recap: ≤1366 only — tighter stack, narrower CTA (no desktop ≥1367 changes) */
@media (max-width: 1366px) {
  .page-main--product-hero
    > .page-section.page-section--law-recap
    .page-api-split__body-stack
    .page-api-split__body {
    font-size: calc(clamp(1.12rem, 1.92vw, 1.42rem) + 1pt);
  }

  .page-main--product-hero > .page-section.page-section--law-recap .page-api-split__grid--law-recap {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(34rem, 38vw));
  }

  .page-main--product-hero > .page-section.page-section--law-recap .page-api-split__grid--law-recap .page-api-split__visual {
    width: min(27.5rem, 100%);
  }

  .page-main--product-hero > .page-section.page-section--law-recap .page-api-split__visual--stacked {
    gap: clamp(1.1rem, 2.65vw, 1.85rem);
  }

  .page-section--api-split .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual {
    margin-top: clamp(-0.6rem, -1.22vw, -0.3rem);
    padding-left: clamp(1.55rem, 3.65vw, 2.45rem);
    padding-right: clamp(1.55rem, 3.65vw, 2.45rem);
    min-width: min(20.5rem, 90vw);
    max-width: fit-content;
    width: auto;
    align-self: center;
    justify-content: center;
  }

  .page-api-split__img--hourglass {
    max-width: min(26.25rem, 92vw);
  }
}

/* Law recap — 901–1280: less space above body copy (row-gap + body-stack nudge); title uses shared API scale */
@media (max-width: 1280px) and (min-width: 901px) {
  .page-main--product-hero
    > .page-section.page-section--law-recap
    .page-api-split__grid--law-recap {
    row-gap: clamp(0.95rem, 2.15vw, 1.65rem);
  }

  .page-main--product-hero
    > .page-section.page-section--law-recap
    .page-api-split__body-stack {
    margin-top: clamp(-0.72rem, -1.55vw, -0.2rem);
  }
}

.page-main--product-hero > .page-section.page-section--law-recap .page-api-split__body-stack {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

.page-main--product-hero > .page-section.page-section--law-recap .page-api-split__grid--law-recap .page-api-split__visual {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: end;
  margin-top: calc(clamp(-4.5rem, -8.5vw, -2rem) - var(--law-copy-nudge) - clamp(1.45rem, 2.85vw, 2.15rem) - clamp(0.35rem, 0.8vw, 0.55rem) - clamp(0.45rem, 0.95vw, 0.7rem));
  margin-right: calc(-1 * clamp(1.15rem, 3.5vw, 2.35rem));
  justify-content: flex-end;
  align-items: flex-end;
  width: min(30rem, 100%);
  max-width: 100%;
  padding-right: 0;
  transform: translateX(clamp(0.35rem, 1.25vw, 0.85rem));
}

.page-main--product-hero > .page-section.page-section--law-recap .page-api-split__img--hourglass {
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* Law recap (hourglass): ≥1367 desktop/wide — softer .visual margin than the global rule (which hit clamp(-4.5rem,…)
   at wide viewports and pulled the art into the H2). Previously max-width: 1589px left ≥1590 on the aggressive base;
   align all wide desktop with this nudge. ≤1366 unchanged (other blocks). */
@media (min-width: 1367px) {
  .page-main--product-hero > .page-section.page-section--law-recap .page-api-split__grid--law-recap {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(31.5rem, 38vw));
    column-gap: clamp(1.65rem, 4.2vw, 3rem);
  }

  .page-main--product-hero > .page-section.page-section--law-recap .page-api-split__grid--law-recap .page-api-split__visual {
    width: min(26.5rem, 100%);
    margin-right: 0;
    transform: none;
    margin-top: calc(
      clamp(-2.35rem, -4.35vw, -0.85rem) - var(--law-copy-nudge) - clamp(1.45rem, 2.85vw, 2.15rem) -
        clamp(0.35rem, 0.8vw, 0.55rem) - clamp(0.45rem, 0.95vw, 0.7rem) + clamp(1.45rem, 2.85vw, 2.2rem) +
        clamp(0.5rem, 1.1vw, 1.1rem)
    );
  }

  .page-main--product-hero > .page-section.page-section--law-recap .page-api-split__img--hourglass {
    max-width: min(24.25rem, 100%);
  }

  .page-main--product-hero
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual {
    min-width: min(28rem, 96vw);
    padding-left: clamp(2.25rem, 5vw, 3.35rem);
    padding-right: clamp(2.25rem, 5vw, 3.35rem);
  }
}

/* Law recap: ≤1366, 901+ two-col — tuned art column + CTA + extra vertical nudge (was 901–1589 / 901–1508) */
@media (max-width: 1366px) and (min-width: 901px) {
  .page-main--product-hero > .page-section.page-section--law-recap .page-api-split__grid--law-recap {
    grid-template-columns: minmax(0, 1fr) minmax(0, min(29.5rem, 36vw));
    column-gap: clamp(1.65rem, 4.2vw, 3rem);
  }

  .page-main--product-hero > .page-section.page-section--law-recap .page-api-split__grid--law-recap .page-api-split__visual {
    width: min(25rem, 100%);
    margin-right: 0;
    transform: none;
    margin-top: calc(
      clamp(-2.35rem, -4.35vw, -0.85rem) - var(--law-copy-nudge) - clamp(1.45rem, 2.85vw, 2.15rem) -
        clamp(0.35rem, 0.8vw, 0.55rem) - clamp(0.45rem, 0.95vw, 0.7rem) + clamp(1.45rem, 2.85vw, 2.2rem) +
        clamp(0.95rem, 1.85vw, 1.55rem)
    );
  }

  .page-main--product-hero > .page-section.page-section--law-recap .page-api-split__img--hourglass {
    max-width: min(22.75rem, 100%);
  }

  .page-main--product-hero
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual {
    min-width: min(21.5rem, 88vw);
    padding-left: clamp(1.65rem, 3.85vw, 2.55rem);
    padding-right: clamp(1.65rem, 3.85vw, 2.55rem);
  }
}

/* Law recap — 901–1280: nudge hourglass + CTA column slightly down (after ≤1366/901 margin so this wins) */
@media (max-width: 1280px) and (min-width: 901px) {
  .page-main--product-hero
    > .page-section.page-section--law-recap
    .page-api-split__grid--law-recap
    .page-api-split__visual {
    transform: translateY(clamp(0.62rem, 1.45vw, 1.2rem));
  }
}

@media (max-width: 900px) {
  .page-main--product-hero > .page-section.page-section--law-recap .page-api-split__grid--law-recap {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: clamp(1.15rem, 3.35vw, 2.1rem);
  }

  .page-main--product-hero > .page-section.page-section--law-recap .page-api-split__grid--law-recap .page-api-split__title {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .page-main--product-hero > .page-section.page-section--law-recap .page-api-split__body-stack {
    grid-column: 1;
    grid-row: 2;
  }

  .page-main--product-hero > .page-section.page-section--law-recap .page-api-split__grid--law-recap .page-api-split__visual {
    grid-column: 1;
    grid-row: 3;
    align-items: center;
    justify-content: center;
    max-width: min(22.75rem, 85vw);
    margin-top: calc(-1 * var(--law-copy-nudge) - clamp(1.45rem, 2.85vw, 2.15rem) - clamp(0.35rem, 0.8vw, 0.55rem) - clamp(0.45rem, 0.95vw, 0.7rem));
    margin-left: auto;
    margin-right: auto;
    transform: none;
  }

  .page-main--product-hero
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual {
    min-width: min(19.5rem, 88vw);
    max-width: fit-content;
    width: auto;
    padding-left: clamp(1.45rem, 3.35vw, 2.35rem);
    padding-right: clamp(1.45rem, 3.35vw, 2.35rem);
    justify-content: center;
  }

  /* Stacked law recap: global .page-api-split__body { margin-top: 1.5rem } was hidden on 901–1280 by body-stack nudge only — zero first line so title↔copy matches tightened row-gap. */
  .page-main--product-hero > .page-section.page-section--law-recap .page-api-split__body-stack > .page-api-split__body:first-child {
    margin-top: 0;
  }
}

/*
 * Law recap — iPad Air portrait (768–833): stacked grid row-gap (title↔copy and copy↔hourglass). Tuned above generic ≤900
 * stack so first-body margin-top:0 still reads airy. ≥834px portrait unchanged.
 */
@media (max-width: 833px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .page-api-split__grid--law-recap {
    row-gap: clamp(1.2rem, 3.35vw, 1.95rem);
  }

  /* Extra air above hourglass / CTA stack without changing title↔body row-gap */
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .page-api-split__grid--law-recap
    .page-api-split__visual {
    padding-top: clamp(0.85rem, 2.35vw, 1.35rem);
  }
}

/* Deepfake law recap CTA — longer pill + room in stacked visual column (≤1024 only; ≥1025 unchanged). */
@media (max-width: 1024px) {
  .page-main--product-hero > .page-section.page-section--law-recap .page-api-split__grid--law-recap .page-api-split__visual {
    max-width: min(30rem, 96vw);
  }

  .page-main--product-hero
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual {
    min-width: min(26.75rem, 96vw);
    padding-left: clamp(1.95rem, 5vw, 3.15rem);
    padding-right: clamp(1.95rem, 5vw, 3.15rem);
  }
}

/* Deepfake law recap CTA — modest width on phones (<768; 768–1024 unchanged). :has matches phablet so this wins in 431–767. */
@media (max-width: 767px) {
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .page-api-split__grid--law-recap
    .page-api-split__visual {
    max-width: min(24.5rem, 92vw);
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual {
    min-width: min(19.25rem, 90vw);
    max-width: min(22.5rem, 94vw);
    padding-left: clamp(1.35rem, 3.85vw, 2.05rem);
    padding-right: clamp(1.35rem, 3.85vw, 2.05rem);
  }
}

.page-main--product-hero .page-section--api-split:not(.page-section--law-recap) .page-api-split__visual--stacked {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(1.75rem, 4vw, 2.75rem);
}

.page-main--product-hero > .page-section.page-section--law-recap .page-api-split__visual--stacked {
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 2.75rem);
}

@media (min-width: 1367px) {
  .page-section--api-split .btn-csam-started.page-api-split__cta.page-api-split__cta--below-visual {
    margin-top: 0;
    padding-left: clamp(1.85rem, 4.25vw, 2.85rem);
    padding-right: clamp(1.85rem, 4.25vw, 2.85rem);
    min-width: min(22rem, 92vw);
    justify-content: center;
  }
}

.page-api-split__img--hourglass {
  max-width: min(28rem, 94vw);
}

.page-three-col {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 9rem;
  margin-top: 2.65rem;
}

@media (max-width: 768px) {
  .page-three-col {
    flex-direction: column;
    align-items: center;
  }
}

/* No face? — full-width stack so note row can match intro copy measure; cards stay centered */
.page-no-face-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  margin-top: 2.65rem;
}

.page-no-face-stack .page-three-col {
  margin-top: 0;
  align-self: center;
}

/* No Face? — ≤1405: tighter spacing between the three feature cards */
@media (max-width: 1405px) {
  .page-main--product-hero .page-section--grid-bg.page-section--alt .page-no-face-stack .page-three-col {
    gap: clamp(3.25rem, 5.5vw, 5.75rem);
  }
}

.page-no-face-stack__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  margin-top: 2.65rem;
  width: 100%;
  max-width: min(70rem, 100%);
  margin-inline: auto;
  align-self: center;
  box-sizing: border-box;
  text-align: center;
}

.page-no-face-stack__note {
  margin: 0;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.page-main--product-hero .page-section--grid-bg.page-section--alt .page-no-face-stack__note.page-api-split__body {
  max-width: 100%;
  text-align: center;
}

/* Match Book a call / Read more: same padding, type, flex as .btn-csam-started; arrow only (no ring), same SVG size as those rows */
.page-main--product-hero .page-section--grid-bg.page-section--alt .page-no-face-stack__cta.btn-hero {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  align-items: center;
  padding: 0.8rem 1.95rem;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.2;
  border-radius: 28px;
  gap: 0.52rem;
  color: #000;
  -webkit-text-fill-color: #000;
}

.page-main--product-hero .page-section--grid-bg.page-section--alt .page-no-face-stack__cta.btn-hero::before {
  border-radius: 28px;
}

.page-main--product-hero .page-section--grid-bg.page-section--alt .page-no-face-stack__cta.btn-hero:hover {
  font-size: 1.05rem;
  font-weight: 500;
  color: #000;
  -webkit-text-fill-color: #000;
}

.page-main--product-hero .page-section--grid-bg.page-section--alt .page-no-face-stack__cta .btn-arrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  flex-shrink: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #000;
  transform: none;
}

.page-main--product-hero .page-section--grid-bg.page-section--alt .page-no-face-stack__cta .btn-arrow svg {
  width: 1.08rem;
  height: 1.08rem;
  flex-shrink: 0;
  display: block;
  stroke: #000;
  stroke-width: 1.75;
  transform: translate(-0.02rem, -0.13rem);
  transition: stroke-width 0.2s ease, transform 0.2s ease;
}

.page-main--product-hero .page-section--grid-bg.page-section--alt .page-no-face-stack__cta.btn-hero:hover .btn-arrow {
  background: transparent;
  border: none;
  color: #000;
  transform: none;
}

.page-main--product-hero .page-section--grid-bg.page-section--alt .page-no-face-stack__cta.btn-hero:hover .btn-arrow svg {
  width: 1.08rem;
  height: 1.08rem;
  stroke: #000;
  stroke-width: 2.35;
  transform: translate(0.1rem, -0.13rem);
}

.page-feature-card {
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  flex: 0 0 auto;
  padding: 1.1rem 0.45rem 0.3rem;
  border-radius: 6px;
  border: 1px solid rgba(51, 65, 85, 0.6);
  background: rgba(15, 17, 24, 0.75);
  text-align: center;
}

.page-feature-card__img {
  display: block;
  width: 100%;
  max-width: min(16.25rem, 62vw);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.page-feature-card h3 {
  font-family: 'Azeret Mono', monospace;
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 auto 0.75rem;
  line-height: 1.45;
  max-width: min(16.25rem, 62vw);
  background-image: linear-gradient(
    to bottom right,
    #d3fff7 0%,
    #aafff0 28%,
    #79ffea 52%,
    #40e8d7 100%
  );
  background-size: 140% 140%;
  background-position: left top;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.page-feature-card__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12em;
}

.page-feature-card__title span {
  display: block;
  white-space: nowrap;
}

.page-feature-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

html[data-theme='light'] .page-feature-card {
  background: #f0f3f8;
  border-color: var(--border);
}

html[data-theme='light'] .page-feature-card h3 {
  background-image: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #047e7d;
  color: #047e7d;
  font-weight: 500;
}

html[data-theme='light'] .page-feature-card p {
  color: #047e7d;
  font-weight: 400;
}

/* TAP page — “TAP’s Features”: no card chrome; teal headings; black body; slightly wider card gaps. */
.page-main--product-hero:has(.product-hero--advertiser-portal)
  .advertiser-portal-tap-features.page-section--grid-bg
  .page-no-face-stack
  .page-three-col {
  gap: clamp(4rem, 7.15vw, 8.15rem);
}

.advertiser-portal-tap-features .page-feature-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none;
  padding: 0.35rem 0.2rem 0.15rem;
  /* Equal columns in a row: do not use width:100% here — it forces one card per line under flex-wrap */
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: 100%;
}

@media (max-width: 768px) {
  .advertiser-portal-tap-features .page-three-col .page-feature-card {
    flex: 0 1 auto;
    width: 100%;
    max-width: min(26rem, 100%);
  }
}

html[data-theme='light'] .advertiser-portal-tap-features .page-feature-card {
  background: transparent !important;
  border: none !important;
}

.advertiser-portal-tap-features .page-feature-card__title span {
  white-space: normal;
}

.advertiser-portal-tap-features .page-feature-card h3,
.advertiser-portal-tap-features .page-feature-card__title {
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #047e7d !important;
  color: #047e7d !important;
  font-weight: 500;
  margin: 0 auto 0.55rem;
}

html[data-theme='light'] .advertiser-portal-tap-features .page-feature-card h3,
html[data-theme='light'] .advertiser-portal-tap-features .page-feature-card__title {
  -webkit-text-fill-color: #047e7d !important;
  color: #047e7d !important;
}

.advertiser-portal-tap-features__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto 0.35rem;
}

.advertiser-portal-tap-features__icon .page-feature-card__img {
  margin-top: 0;
  max-width: min(21rem, 76vw);
}

.advertiser-portal-tap-features .advertiser-portal-tap-features__body {
  margin: 0.35rem auto 0;
  padding: 0 0.2rem;
  max-width: 100%;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  font-family: 'Open Sans', var(--font);
}

.advertiser-portal-tap-features .advertiser-portal-tap-features__body p {
  margin: 0;
  font-size: clamp(1.15rem, 2.05vw, 1.38rem);
  line-height: 1.55;
  text-wrap: pretty;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  font-weight: 400;
}

html[data-theme='light'] .advertiser-portal-tap-features .advertiser-portal-tap-features__body p {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

.advertiser-portal-tap-features .advertiser-portal-tap-features__body p + p {
  margin-top: 0.55rem;
}

/* TAP Features — extra space above note row; note: Inter Tight 500 (medium), +4px vs shared grid-alt note scale */
.page-main--product-hero:has(.product-hero--advertiser-portal)
  .advertiser-portal-tap-features
  .page-no-face-stack__row {
  margin-top: clamp(3.15rem, 5.1vw, 3.95rem);
}

.page-main--product-hero:has(.product-hero--advertiser-portal)
  .advertiser-portal-tap-features
  .page-no-face-stack__note.page-api-split__body {
  font-family: 'Inter Tight', var(--font);
  font-weight: 500;
  font-size: calc(clamp(1.28rem, 2.15vw, 1.58rem) + 4px);
}

.page-main--product-hero:has(.product-hero--advertiser-portal)
  .advertiser-portal-tap-features
  .page-no-face-stack__cta.btn-hero
  .btn-arrow
  svg {
  transform: translate(-0.02rem, -0.06rem);
}

.page-main--product-hero:has(.product-hero--advertiser-portal)
  .advertiser-portal-tap-features
  .page-no-face-stack__cta.btn-hero:hover
  .btn-arrow
  svg {
  transform: translate(0.1rem, -0.06rem);
}

@media (max-width: 1366px) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-tap-features
    .page-no-face-stack__note.page-api-split__body {
    font-size: calc(clamp(1.12rem, 1.92vw, 1.42rem) + 4px);
  }
}

/* Advertiser Portal — responsive (page-scoped; ≤1366 track) */
@media (max-width: 1366px) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features
    .page-section-title.page-section-title--center {
    max-width: min(62rem, 96vw);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}

@media (max-width: 767px) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-stack-section.page-section--api-split
    .page-inner.page-api-split {
    padding-left: clamp(0.75rem, 3.35vw, 1.15rem);
    padding-right: clamp(0.75rem, 3.35vw, 1.15rem);
  }

  /*
   * TAP hero — ≤767: same viewport + stacked shell as CSAM / deepfake product heroes (and index phablet
   * 100svh floor). Padding in-box via border-box so the blind-spot band does not peek.
   */
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero.product-hero--advertiser-portal {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    box-sizing: border-box;
    height: auto;
    max-height: none;
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(5.45rem, 15.25vw, 7.15rem));
    padding-bottom: clamp(5.15rem, 11.5vw, 6.1rem);
    padding-left: calc(var(--page-margin) * 1.5);
    padding-right: calc(var(--page-margin) * 1.5);
    overflow-x: clip;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__inner {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-items: center;
    gap: clamp(1.35rem, 3.75vw, 2.15rem);
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    padding-top: clamp(2.6rem, 9.5vw, 4.05rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__copy {
    text-align: center;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
    width: min(100%, 36rem);
    max-width: 100%;
    margin-top: 0;
    padding-left: clamp(0.75rem, 3.35vw, 1.15rem);
    padding-right: clamp(0.75rem, 3.35vw, 1.15rem);
    box-sizing: border-box;
    /* Title → CTA → sub (visual follows in `.product-hero__inner`). */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title {
    order: 1;
    margin-bottom: clamp(0.72rem, 1.55vw, 1.15rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero {
    order: 2;
  }

  /* TAP hero three lines — match deepfake product hero type at 431–767 (deepfake ≤1280 band). */
  .product-hero--advertiser-portal.product-hero--csam .product-hero__title-primary {
    font-size: clamp(1.62rem, 3.65vw, 2.68rem);
    line-height: 1.5;
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title-lede {
    font-size: clamp(1.28rem, 2.55vw, 1.95rem);
    line-height: 1.44;
    margin-top: clamp(0.8rem, 1.55vw, 1.2rem);
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__sub {
    order: 3;
    font-size: clamp(1.28rem, 2.55vw, 1.95rem);
    line-height: 1.44;
    margin-top: clamp(1.65rem, 4.35vw, 2.55rem);
    margin-bottom: 0;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero {
    font-size: clamp(0.94rem, 1.88vw, 1.32rem);
    padding: clamp(0.36rem, 0.88vw, 0.48rem) clamp(1.15rem, 3.1vw, 1.95rem);
    gap: clamp(0.42rem, 1.05vw, 0.65rem);
    border-radius: clamp(20px, 4vw, 27px);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero:hover,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero:hover {
    font-size: clamp(0.98rem, 1.98vw, 1.36rem);
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title,
  .product-hero--advertiser-portal.product-hero--csam .product-hero__sub {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title {
    white-space: normal;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero {
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    display: inline-flex;
    width: auto;
    max-width: min(19rem, 100%);
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__visual {
    width: 100%;
    max-width: 100%;
    margin-top: clamp(0.35rem, 1.15vw, 0.72rem);
    padding-top: clamp(0.75rem, 2.1vw, 1.25rem);
    padding-left: clamp(0.65rem, 3vw, 1.05rem);
    padding-right: clamp(0.65rem, 3vw, 1.05rem);
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__visual-inner.advertiser-portal-hero-feed__inner {
    --ph-illustration-max: min(22.5rem, min(100vw - 1.75rem, 62vmin));
    min-height: clamp(11.75rem, 36vw, 16.5rem);
    transform: translate(0, 0);
    margin-top: 0;
  }

  /* TAP Features — stack cards vertically (see EOF ≤767 block for cascade over CSAM No Face 3-across). */
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-no-face-stack
    .page-three-col {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: clamp(2.15rem, 5.5vw, 2.85rem);
    width: 100%;
    max-width: min(26rem, 100%);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    grid-template-columns: unset;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-no-face-stack
    .page-three-col
    > .page-feature-card {
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.35rem 0.2rem 0.15rem;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-tap-features
    .page-feature-card
    h3,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-tap-features
    .page-feature-card__title {
    font-size: calc(clamp(1.1rem, 3.55vw, 1.28rem) + 4px);
    letter-spacing: 0.04em;
    line-height: 1.32;
    margin-bottom: 0.5rem;
    text-align: center;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-tap-features
    .advertiser-portal-tap-features__body
    p {
    font-size: clamp(0.95rem, 2.65vw, 1.08rem);
    line-height: 1.48;
    text-align: center;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-hero-feed {
    width: min(100%, var(--ph-illustration-max, 22.5rem));
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-stack-section__inner {
    gap: clamp(0.55rem, 2.25vw, 0.95rem);
  }

  /* Blind-spot row: key stack above copy (matches markup order). */
  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-stack-section__visual {
    order: 1;
    padding-left: 0;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-stack-section__copy {
    order: 2;
    padding-top: clamp(0.35rem, 1vw, 0.65rem);
  }

  /* Blind-spot title — ≤767: match API plug-in / section heading size (undo global −6px). */
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section.page-section--api-split
    .page-api-split__title.advertiser-portal-stack-section__title {
    font-size: var(--product-csam-section-heading-fs);
    line-height: var(--product-csam-section-heading-lh);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-stack-section__visual-inner {
    transform: translateX(0);
    justify-content: center;
    padding-inline: clamp(0.5rem, 3vw, 1rem);
  }

  /* Center keyhole + key as one unit (drop desktop bleed padding + art-shift). */
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__art-shift {
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__keyhole-slot {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    flex: 0 0 auto;
    margin-inline: auto;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__scene {
    margin-left: auto;
    margin-right: auto;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .page-api-split__lead,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section__body {
    text-align: center;
  }

  /* Blind-spot key stack — shrink art, center keyhole over title, align key; hide beam (≤767 TAP only). */
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section__copy {
    width: 100%;
    max-width: min(20.5rem, 92vw);
    margin-left: auto;
    margin-right: auto;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section__visual {
    --ap-stack-col-outer: min(12.25rem, 70vw);
    flex: 0 1 auto;
    width: 100%;
    max-width: min(20.5rem, 92vw);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section__visual-inner {
    min-height: 0;
    padding-block: 0;
    padding-inline: 0;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__scene {
    width: min(100%, var(--ap-stack-col-outer));
    max-width: var(--ap-stack-col-outer);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__art-shift
    > .advertiser-portal-hero__beam {
    display: none;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__keyhole-slot
    .advertiser-portal-hero__key-moor {
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
  }

  /* Stack slot owns alignment — drop hero-only keyhole translateX (was clipping cloud left of title). */
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__keyhole-slot
    .advertiser-portal-hero__keyhole {
    transform: none;
  }

  /* Key only — moor/keyhole alignment unchanged; `left` so key-out animation transform stays valid. */
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__keyhole-slot
    .advertiser-portal-hero__key-moor
    .advertiser-portal-hero__key {
    left: calc(50% + 32px);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section__visual,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section__visual-inner,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__scene,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__artboard,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__layers,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__art-shift {
    overflow: visible;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-tap-features .page-no-face-stack {
    margin-top: clamp(2.5rem, 5.75vw, 3.25rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-tap-features__icon
    .page-feature-card__img {
    max-width: min(16.5rem, 78vw);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-tap-features
    .page-no-face-stack__row {
    margin-top: clamp(3rem, 7vw, 3.85rem);
    padding-inline: clamp(0.25rem, 2vw, 0.75rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-tap-features
    .advertiser-portal-tap-features__body,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-tap-features
    .advertiser-portal-tap-features__body
    p {
    text-align: center;
  }
}

/*
 * TAP hero — phablet portrait (431–767): lede −2px; sub −2px; tighter lede→sub; sub then CTA; smaller feed.
 * ≤430 uses the advertiser-portal ≤430 block; ≥768 unchanged.
 */
@media (max-width: 767px) and (min-width: 441px) and (orientation: portrait) {
  .product-hero--advertiser-portal.product-hero--csam .product-hero__title-lede {
    font-size: calc(clamp(1.28rem, 2.55vw, 1.95rem) - 2px);
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title {
    margin-bottom: clamp(0.28rem, 0.62vw, 0.48rem);
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__sub {
    order: 2;
    font-size: calc(clamp(1.28rem, 2.55vw, 1.95rem) - 2px);
    margin-top: clamp(0.15rem, 0.38vw, 0.28rem);
    margin-bottom: 0;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero {
    order: 3;
    margin-top: clamp(1.15rem, 2.45vw, 1.85rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero {
    font-size: calc(clamp(0.94rem, 1.88vw, 1.32rem) - 3px);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero:hover,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero:hover {
    font-size: calc(clamp(0.98rem, 1.98vw, 1.36rem) - 3px);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__visual-inner.advertiser-portal-hero-feed__inner {
    --ph-illustration-max: min(17.35rem, min(100vw - 1.75rem, 47vmin));
    min-height: clamp(9.15rem, 27.5vw, 12.95rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-hero-feed {
    width: min(100%, var(--ph-illustration-max, 17.35rem));
  }
}

@media (max-width: 440px) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-stack-section.page-section--api-split
    .page-inner.page-api-split {
    padding-left: clamp(0.38rem, 2.55vw, 0.7rem);
    padding-right: clamp(0.38rem, 2.55vw, 0.7rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__copy {
    margin-top: 0;
    width: min(100%, 100%);
    padding-left: clamp(0.38rem, 2.55vw, 0.7rem);
    padding-right: clamp(0.38rem, 2.55vw, 0.7rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__visual {
    padding-left: clamp(0.3rem, 2.1vw, 0.52rem);
    padding-right: clamp(0.3rem, 2.1vw, 0.52rem);
    margin-top: clamp(0.92rem, 2.05vw, 1.38rem);
    padding-top: clamp(1.35rem, 3.15vw, 2.1rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__visual-inner.advertiser-portal-hero-feed__inner {
    --ph-illustration-max: min(22.85rem, min(100vw - 1rem, 60vmin));
    min-height: clamp(11.95rem, 45.5vw, 16.55rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section__copy,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section__visual {
    max-width: min(19rem, 94vw);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section__visual {
    --ap-stack-col-outer: min(10.75rem, 64vw);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-feature-card
    h3,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-feature-card__title {
    font-size: calc(clamp(1.1rem, 4.35vw, 1.26rem) + 4px);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-tap-features
    .advertiser-portal-tap-features__body
    p {
    font-size: clamp(0.95rem, 3.8vw, 1.08rem);
  }

  /* TAP hero three lines — match deepfake product hero type at ≤430 (same clamps as deepfake ≤430 block). */
  .product-hero--advertiser-portal.product-hero--csam .product-hero__title-primary {
    font-size: clamp(1.58rem, 6.65vw, 2.22rem);
    line-height: 1.22;
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title {
    margin-bottom: clamp(0.42rem, 0.88vw, 0.62rem);
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title-lede {
    font-size: calc(calc(clamp(1.12rem, 3.85vw, 1.38rem) + 1px) - 1px);
    line-height: 1.38;
    margin-top: clamp(1.22rem, 2.25vw, 1.72rem);
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__sub {
    order: 2;
    font-size: calc(clamp(1.18rem, 3.95vw, 1.42rem) - 1px);
    line-height: 1.34;
    margin-top: clamp(0.42rem, 0.72vw, 0.52rem);
    margin-bottom: 0;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero {
    order: 3;
    margin-top: clamp(2.15rem, 4vw, 3.05rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero {
    font-size: calc(clamp(0.94rem, 1.88vw, 1.32rem) + 1px);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero:hover,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero:hover {
    font-size: calc(clamp(0.98rem, 1.98vw, 1.36rem) + 1px);
  }
}

@media (max-width: 1405px) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-tap-features.page-section--grid-bg
    .page-no-face-stack
    .page-three-col {
    gap: clamp(3.4rem, 6.1vw, 6.75rem);
  }
}

/* No Face? No problem. — ≤1366: type + measure tuned so copy stays within card cluster width */
@media (max-width: 1366px) {
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-section-title.page-section-title--center.page-product-duotone-heading {
    max-width: min(62rem, 96vw);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-api-split__lead.page-section-title--center {
    max-width: min(62rem, 96vw);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack__row {
    max-width: min(62rem, 96vw);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-feature-card
    h3 {
    font-size: 1.16rem;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta.btn-hero,
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta.btn-hero:hover {
    font-size: 0.96rem;
  }
}

/*
 * TAP Features card titles — iPad Pro landscape (1181–1366): +3px vs CSAM ≤1366 h3 (1.16rem) above.
 * Must follow that block: equal specificity otherwise loses on source order.
 */
@media (max-width: 1366px) and (min-width: 1181px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-feature-card
    h3.page-feature-card__title {
    font-size: calc(1.16rem + 3px);
  }
}

/* CSAM product — performance stats: same horizontal inset as API plug-in (not duotone 2× section gutter) */
.page-main--product-hero > .page-section.page-section--performance-stats {
  padding-top: clamp(3.25rem, 7vw, 5.5rem);
}

@media (max-width: 1280px) {
  .page-main--product-hero > .page-section.page-section--performance-stats {
    padding-top: clamp(2.15rem, 4.85vw, 3.85rem);
    padding-bottom: clamp(2.1rem, 4.6vw, 3.6rem);
  }
}

.page-main--product-hero > .page-section.page-section--performance-stats .page-inner {
  max-width: min(1600px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-text-inset-left);
  padding-right: var(--page-text-inset-left);
  box-sizing: border-box;
}

/* Deepfake — Unparalleled Performance: nudge block content down */
.page-main--product-hero:has(.product-hero--deepfake)
  > .page-section.page-section--performance-stats--deepfake
  .page-inner {
  padding-top: clamp(0.7rem, 1.75vw, 1.35rem);
}

/* CSAM — performance stats: same inner top nudge as deepfake plexus band */
.page-main--product-hero:has(.product-hero--csam)
  > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
  .page-inner {
  padding-top: clamp(0.7rem, 1.75vw, 1.35rem);
}

@media (max-width: 768px) {
  .page-main--product-hero > .page-section.page-section--performance-stats .page-inner {
    padding-left: clamp(2.45rem, 5.75vw, 2.95rem);
    padding-right: clamp(2.45rem, 5.75vw, 2.95rem);
  }
}

/* CSAM product — performance stats: subtitle + body match other product sections */
.page-main--product-hero .page-section--performance-stats .page-section-title.page-product-duotone-heading {
  max-width: min(90rem, 100%);
  width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.page-main--product-hero .page-section--performance-stats .page-section--performance-stats__lead {
  max-width: min(90rem, 100%);
  overflow-wrap: break-word;
}

.page-main--product-hero .page-section--performance-stats .page-api-split__body.page-section--performance-stats__body {
  margin: 0;
  max-width: min(90rem, 100%);
  font-size: clamp(1.28rem, 2.15vw, 1.58rem);
  line-height: 1.6;
  text-align: left;
}

.page-main--product-hero
  .page-section--performance-stats
  .page-performance-stats__grid
  + .page-api-split__body.page-section--performance-stats__body {
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.page-main--product-hero
  .page-section--performance-stats
  .page-api-split__body.page-section--performance-stats__body
  + .page-api-split__body.page-section--performance-stats__body {
  margin-top: 1.35rem;
}

/* Performance stats — four boxes, one shared animated gradient (clipped per cell; gaps stay dark) */
.page-performance-stats__grid {
  --stat-gap: 5rem;
  --stat-extend-right: clamp(5rem, 10.25vw, 10.75rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--stat-gap);
  margin-top: 2.5rem;
  width: calc(min(72rem, 100%) + var(--stat-extend-right));
  max-width: calc(100% + var(--stat-extend-right));
  margin-left: 0;
  margin-right: calc(-1 * var(--stat-extend-right));
  list-style: none;
  padding: 0;
  box-sizing: border-box;
}

/* Product plexus row (901+): 1367–1727 — ease gap + right bleed toward ≤1366 spacing; keep box type + padding steady */
@media (min-width: 1367px) and (max-width: 1727px) {
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--performance-stats--plexus
    .page-performance-stats__grid--plexus,
  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--performance-stats--plexus
    .page-performance-stats__grid--plexus {
    /* 5rem @1727 → ~2rem @1367 (matches ≤1366 plexus cap); linear in viewport width */
    --stat-gap: clamp(2rem, calc(5rem - (1727px - 100vw) * 48 / 360), 5rem);
    /* ~10.75rem bleed @1727 → ~1.15rem @1367 (same as ≤1366 rule) */
    --stat-extend-right: clamp(
      1.15rem,
      calc(172px - (1727px - 100vw) * 153.6 / 360),
      10.75rem
    );
    width: calc(min(72rem, 100%) + var(--stat-extend-right));
  }

  .page-section--performance-stats--plexus .page-performance-stats__box {
    min-height: 8.5rem;
  }

  .page-section--performance-stats--plexus .page-performance-stats__box-inner {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.7rem;
    padding-right: 2.85rem;
  }

  .page-section--performance-stats--plexus .page-performance-stats__label {
    font-size: 2.05rem;
  }

  .page-section--performance-stats--plexus .page-performance-stats__value {
    font-size: 5.1rem;
  }
}

@media (max-width: 900px) {
  .page-performance-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /*
     * Explicit two rows so `grid-row: 1 / -1` on `.page-performance-stats__plexus-unified` spans both rows.
     * With only implicit rows, `-1` can resolve to the end of the first row — canvas stays short, bottom cells sit
     * on section bg (#f0f3f8) with no plexus. 4-across bands below reset rows to `none`.
     */
    grid-template-rows: repeat(2, minmax(0, auto));
  }
}

/* Plexus 4-across: single row — undo explicit two rows from ≤900 (see block above). */
@media (max-width: 900px) and (min-width: 768px) and (orientation: portrait),
  (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-performance-stats__grid--plexus,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--performance-stats--deepfake.page-section--performance-stats--plexus
    .page-performance-stats__grid--plexus {
    grid-template-rows: none;
  }
}

@media (max-width: 767px) and (min-width: 441px) {
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-performance-stats__grid--plexus,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--performance-stats--deepfake.page-section--performance-stats--plexus
    .page-performance-stats__grid--plexus {
    grid-template-rows: none;
  }
}

.page-performance-stats__box {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  border: none;
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.35);
  min-height: clamp(6.5rem, 18vw, 8.5rem);
}

.page-performance-stats__grid.performance-stats-anim-paused .page-performance-stats__sheen-unified {
  animation-play-state: paused;
}

/* CSAM performance stats: one animated gradient layer + gap overlays (same visual, less GPU work than four sheens) */
.page-performance-stats__grid--unified-sheen {
  position: relative;
}

.page-performance-stats__sheen-unified {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  /* Wide teal / mint / cyan; purple eases into page bg #0f1118 (not black), then back to teal */
  background: linear-gradient(
    125deg,
    #79ffea 0%,
    #9dfff4 4%,
    #b8f08c 9%,
    #8ef0c8 14%,
    #6ae8d4 19%,
    #56e8dc 24%,
    #4ad4ce 29%,
    #45c8d8 33%,
    #4ab8de 37%,
    #52acd8 40%,
    #58a2dc 43%,
    #5a9ee0 46%,
    #5c92e4 49%,
    #6688e8 52%,
    #6b7ee8 55%,
    #6458c8 59%,
    #4a3290 64%,
    #352060 68%,
    #241838 72%,
    #171420 76%,
    var(--bg) 80%,
    var(--bg) 90%,
    #1a3036 93%,
    #2a6a72 96%,
    #79ffea 100%
  );
  background-size: 420% 420%;
  animation: page-performance-stats-flow 5s linear infinite;
}

/* Per-cell sheen used 400% of *box* width + gaps (= full row). On the grid, use 100% so one layer matches that footprint. */
@media (min-width: 901px) {
  .page-performance-stats__grid--unified-sheen .page-performance-stats__sheen-unified {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}

@media (max-width: 900px) {
  .page-performance-stats__grid--unified-sheen .page-performance-stats__sheen-unified {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}

.page-performance-stats__gap-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.page-performance-stats__grid--unified-sheen .page-performance-stats__gap-piece {
  position: absolute;
  background: var(--bg);
}

.page-performance-stats__grid--unified-sheen .page-performance-stats__box {
  z-index: 2;
}

@keyframes page-performance-stats-flow {
  0%,
  100% {
    background-position: 5% 19%;
  }

  12% {
    background-position: 12% 24%;
  }

  22% {
    background-position: 20% 30%;
  }

  32% {
    background-position: 30% 36%;
  }

  42% {
    background-position: 40% 42%;
  }

  52% {
    background-position: 52% 48%;
  }

  62% {
    background-position: 64% 55%;
  }

  72% {
    background-position: 74% 62%;
  }

  82% {
    background-position: 84% 67%;
  }

  88% {
    background-position: 89% 70%;
  }

  91% {
    background-position: 88% 69%;
  }

  94% {
    background-position: 68% 54%;
  }

  96% {
    background-position: 44% 40%;
  }

  98% {
    background-position: 22% 28%;
  }

  99.5% {
    background-position: 10% 22%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-performance-stats__grid--unified-sheen .page-performance-stats__sheen-unified {
    animation: none;
    background-position: 5% 19%;
  }
}

.page-performance-stats__box-inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(0.72rem, 1.55vw, 1rem);
  padding-bottom: clamp(0.72rem, 1.55vw, 1rem);
  padding-left: clamp(1.2rem, 2.6vw, 1.7rem);
  padding-right: clamp(1.95rem, 3.85vw, 2.85rem);
  text-align: left;
}

.page-performance-stats__label {
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(1.52rem, 3.35vw, 2.05rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.96);
  margin: 0 0 0.2rem;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.68),
    0 2px 16px rgba(0, 0, 0, 0.55),
    0 5px 32px rgba(0, 0, 0, 0.45),
    0 8px 48px rgba(0, 0, 0, 0.35);
}

.page-performance-stats__value {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(3.45rem, 7.4vw, 5.1rem);
  font-weight: 350;
  line-height: 1.05;
  color: #fff;
  margin: 0;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.65),
    0 3px 18px rgba(0, 0, 0, 0.52),
    0 7px 38px rgba(0, 0, 0, 0.42),
    0 10px 56px rgba(0, 0, 0, 0.34);
}

/* Plexus stat boxes — step down type below ~1180px (not tied to 1280; ≥1367 laptop band above stays on its own rules) */
@media (max-width: 1180px) {
  .page-section--performance-stats--plexus .page-performance-stats__label {
    font-size: clamp(1.22rem, 2.65vw, 1.72rem);
  }

  .page-section--performance-stats--plexus .page-performance-stats__value {
    font-size: clamp(2.65rem, 5.65vw, 4.15rem);
    line-height: 1.06;
  }

  /* CSAM + Deepfake product — body + chart cell copy only at 1180 (leads/subtitles unchanged here) */
  .page-main--product-hero:has(.product-hero--csam) .page-section--api-split .page-api-split__body,
  .page-main--product-hero:has(.product-hero--deepfake) .page-section--api-split .page-api-split__body,
  .page-main--product-hero:has(.product-hero--csam) .page-section--grid-bg.page-section--alt .page-api-split__body.page-section-title--center,
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--grid-bg.page-section--alt
    .page-no-face-stack__note.page-api-split__body,
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--performance-stats
    .page-api-split__body.page-section--performance-stats__body,
  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--performance-stats
    .page-api-split__body.page-section--performance-stats__body,
  /* Law recap: match API plug-in body at ≤1180 (overrides more specific ≤1366 .page-api-split__body-stack rule) */
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .page-api-split__body-stack
    .page-api-split__body {
    font-size: clamp(1.02rem, 1.68vw, 1.32rem);
    line-height: 1.58;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__list
    li,
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io
    .product-io__output,
  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise
    .product-io
    .product-io__list
    li,
  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise
    .product-io
    .product-io__output {
    font-size: clamp(calc(1.02rem + 1px), calc(1.72vw + 1px), calc(1.38rem + 1px));
    line-height: 1.55;
  }

  .page-main--product-hero:has(.product-hero--csam) .page-spec-chart__head {
    font-size: clamp(1.18rem, 2.55vw, 1.65rem);
  }

  .page-main--product-hero:has(.product-hero--csam) .page-spec-chart__perf-label,
  .page-main--product-hero:has(.product-hero--csam) .page-spec-chart__pct {
    font-size: clamp(1.12rem, 2.35vw, 1.62rem);
  }

  .page-main--product-hero:has(.product-hero--csam) .page-spec-chart__feature-label {
    font-size: clamp(0.92rem, 1.62vw, 1.12rem);
  }

  .page-main--product-hero:has(.product-hero--csam) .page-feature-card p {
    font-size: 0.82rem;
    line-height: 1.48;
  }

  /* No Face? — smaller card frames + imagery (CSAM grid section); less air under intro body → cards */
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack {
    margin-top: clamp(1.05rem, 2.45vw, 1.55rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack
    .page-three-col {
    gap: clamp(1.65rem, 3.85vw, 2.85rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-feature-card {
    padding: 0.8rem 0.32rem 0.22rem;
    border-radius: 5px;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-feature-card__img {
    max-width: min(12.75rem, 46vw);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-feature-card
    h3 {
    font-size: clamp(0.98rem, 2.15vw, 1.08rem);
    max-width: min(12.75rem, 46vw);
    margin-bottom: 0.55rem;
    line-height: 1.38;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack__row {
    margin-top: clamp(1.85rem, 3.6vw, 2.35rem);
    gap: 1.1rem;
  }
}

/*
 * CSAM "No Face? No Problem." — iPad Air portrait only (768–833): one row of three cards (flex+wrap was 2+1 on ~820px).
 * Deepfake and ≥834px portrait are unchanged by this block; viewports outside this query are unchanged.
 */
@media (max-width: 833px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack
    .page-three-col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    align-items: start;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: clamp(0.45rem, 1.25vw, 0.95rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack
    .page-three-col
    > .page-feature-card {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-feature-card__img {
    max-width: 100%;
    width: 100%;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-feature-card
    h3 {
    max-width: 100%;
    font-size: clamp(0.7rem, 2vw, 0.86rem);
    letter-spacing: 0.055em;
    line-height: 1.28;
  }
}

/*
 * CSAM "No Face? No Problem." — phablet only (431–767): three cards in one horizontal row; scaled-down art + titles.
 * ≤430px, ≥768px, deepfake, index, and other product sections unchanged by this block.
 */
@media (max-width: 767px) and (min-width: 441px) {
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack
    .page-three-col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: start;
    justify-content: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: clamp(0.28rem, 1.05vw, 0.55rem);
    margin-top: clamp(0.2rem, 0.9vw, 0.5rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack {
    margin-top: clamp(0.45rem, 1.35vw, 0.85rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack
    .page-three-col
    > .page-feature-card {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    flex: 1 1 0;
    padding: clamp(0.42rem, 1.35vw, 0.62rem) clamp(0.15rem, 0.75vw, 0.28rem) clamp(0.1rem, 0.45vw, 0.18rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-feature-card__img {
    max-width: 100%;
    width: 100%;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-feature-card
    h3 {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    font-size: clamp(0.55rem, 1.85vw, 0.78rem);
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin-bottom: clamp(0.22rem, 0.95vw, 0.38rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-feature-card__title span {
    white-space: normal;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-feature-card__title {
    gap: 0.06em;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack__row {
    margin-top: clamp(1.25rem, 3vw, 1.85rem);
  }
}

/* Law recap — 901–1180 (deepfake): hourglass slightly lower in two-col band (min-width avoids clashing with ≤900 stack) */
@media (max-width: 1180px) and (min-width: 901px) {
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .page-api-split__grid--law-recap
    .page-api-split__img--hourglass {
    margin-top: clamp(0.32rem, 0.85vw, 0.62rem);
  }
}

/* Deepfake — performance stats: title, teal row gradient + plexus drawn in canvas */
.page-main:has(.product-hero--deepfake)
  .page-section--performance-stats--deepfake
  .page-section-title.page-product-duotone-heading {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #fff;
  color: #fff;
}

.page-section--performance-stats--deepfake .page-performance-stats__intro,
.page-section--performance-stats--plexus .page-performance-stats__intro {
  margin-bottom: 0.25rem;
}

.page-section--performance-stats--deepfake .page-performance-stats__intro .page-section-title,
.page-section--performance-stats--plexus .page-performance-stats__intro .page-section-title {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.page-section--performance-stats--plexus .page-performance-stats__grid--plexus {
  position: relative;
}

/* Plexus layer must span the full grid; otherwise it only occupies the first auto cell and boxes show empty. */
.page-section--performance-stats--plexus .page-performance-stats__plexus-unified {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  position: absolute;
  inset: 0;
  z-index: 0;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
  overflow: hidden;
}

.page-section--performance-stats--plexus .page-performance-stats__plexus-unified canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.page-section--performance-stats--plexus .page-performance-stats__box {
  z-index: 1;
  background: transparent;
  /* Outer depth only — no inset highlight (that read as a thin light “border” on light section bg) */
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4);
}

.page-section--performance-stats--plexus .page-performance-stats__box-inner {
  position: relative;
  z-index: 1;
}

.page-section--performance-stats--plexus .page-performance-stats__value {
  font-weight: 300;
}

.page-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
  text-align: center;
}

@media (max-width: 900px) {
  .page-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.page-stat {
  padding: 1.25rem;
}

.page-stat-label {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.35rem;
}

.page-stat-value {
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  margin: 0;
  color: var(--teal);
}

.page-compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.page-compare--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .page-compare {
    grid-template-columns: 1fr;
  }

  .page-compare--two {
    grid-template-columns: 1fr;
  }
}

.page-compare-col {
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid rgba(51, 65, 85, 0.5);
}

.page-compare-col h3 {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: var(--teal);
}

.page-compare-col ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.page-compare-perf {
  font-family: 'Inter Tight', var(--font);
  font-size: 2rem;
  font-weight: 600;
  margin-top: 1rem;
  color: var(--text);
}

/* What we aren’t — “current state” band: full-bleed grid, main bg, no section divider lines */
.what-not-compare-section.page-section {
  position: relative;
  width: calc(100% + 2 * var(--page-margin));
  max-width: none;
  margin-left: calc(-1 * var(--page-margin));
  margin-right: calc(-1 * var(--page-margin));
  /* Same outer gutter as product / home hero; text inset on .what-not-compare-inner */
  padding-left: calc(var(--page-margin) * 2);
  padding-right: calc(var(--page-margin) * 2);
  box-sizing: border-box;
  background: var(--bg);
  border-top: none;
  border-bottom: none;
}

.what-not-compare-section + .page-section,
.what-not-compare-section + .what-not-hash-section,
.what-not-hash-section + .what-not-mn-section {
  border-top: none;
}

/* Dark / default: subtle white wire on navy */
html.page-what-we-are-not:not([data-theme='light']) .what-not-compare-section.page-section--grid-bg::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.85;
  inset: 0;
}

/* Light: same grid weight as CSAM product “No Face?” band (teal lines + 0.86 layer opacity) */
html[data-theme='light'].page-what-we-are-not .what-not-compare-section.page-section--grid-bg::before {
  background-image:
    linear-gradient(rgba(13, 148, 136, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 148, 136, 0.09) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.86;
  inset: 0;
}

.what-not-compare-inner {
  width: 100%;
  max-width: min(1600px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-text-inset-left);
  padding-right: var(--page-text-inset-left);
  text-align: left;
  box-sizing: border-box;
}

.what-not-compare-header {
  margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
}

/* Match what-not hero gradient title size */
.what-not-compare-title {
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(1.8rem, 3.55vw, 3.05rem);
  font-weight: 500;
  line-height: 1.22;
  margin: 0 0 clamp(1.4rem, 2.75vw, 2.1rem);
  color: #fff;
}

/* Same size as .page-api-split__lead (“Keep the dashboard you love…”), white */
.what-not-compare-lead {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(calc(1.35rem + 1px), calc(2.4vw + 1px), calc(1.8rem + 1px));
  font-weight: 350;
  line-height: 1.35;
  margin: 0;
  color: #fff;
  max-width: min(90rem, 100%);
}

.what-not-compare-lead--second {
  margin-top: clamp(0.45rem, 1.5vw, 0.95rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}

.what-not-compare-grid,
.what-not-hash-accordion-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, clamp(20.25rem, 25.5vw, 31rem)));
  column-gap: clamp(1.85rem, 4vw, 3rem);
  align-items: stretch;
  justify-content: end;
  width: 100%;
  max-width: 100%;
  padding-right: clamp(2rem, 4.25vw, 4.75rem);
  box-sizing: border-box;
}

.what-not-compare-card {
  display: flex;
  flex-direction: column;
  min-height: clamp(16rem, 32vw, 20rem);
  max-width: none;
  width: 100%;
  padding: clamp(1.65rem, 3vw, 2.35rem);
  border: 1px solid #fff;
  border-radius: 2px;
  box-sizing: border-box;
  background: transparent;
}

.what-not-compare-card__head {
  flex-shrink: 0;
}

.what-not-compare-card__num {
  font-family: 'Azeret Mono', monospace;
  font-size: clamp(1.15rem, 1.5vw, 1.32rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #fff;
  display: block;
  margin-bottom: 0.5rem;
}

.what-not-compare-card__rule {
  display: block;
  height: 0;
  width: 100%;
  margin: 0 0 clamp(0.65rem, 1.35vw, 0.95rem);
  padding: 0;
  border: 0;
  border-top: 1px solid #fff;
  background: none;
}

.what-not-compare-card__name {
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(1.55rem, 2.75vw, 1.9rem);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: #fff;
  text-transform: none;
}

.what-not-compare-card__visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(5.5rem, 14vw, 7.5rem);
  margin: clamp(1.45rem, 2.65vw, 2.1rem) 0 clamp(0.65rem, 1.25vw, 1rem);
}

.what-not-compare-card__img {
  width: 100%;
  max-width: 228px;
  height: auto;
  display: block;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.92;
  filter: brightness(1.1);
}

/* Light mode: don’t dim/brighten — #f0f3f8 fills in SVGs must match page --bg */
html[data-theme='light'] .what-not-compare-card__img {
  opacity: 1;
  filter: none;
}

.what-not-compare-card__stat {
  margin-top: auto;
  align-self: stretch;
  text-align: right;
  padding-top: 0.5rem;
}

.what-not-compare-card__label {
  display: block;
  font-family: 'Azeret Mono', monospace;
  font-size: clamp(1.05rem, 1.65vw, 1.28rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.35rem;
}

.what-not-compare-card__value {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(3.15rem, 5.85vw, 4.2rem);
  font-weight: 400;
  line-height: 1;
  color: #fff;
}

@media (max-width: 768px) {
  .what-not-compare-section.page-section {
    padding-left: calc(var(--page-margin) * 2);
    padding-right: calc(var(--page-margin) * 2);
  }

  .what-not-compare-inner {
    padding-left: clamp(2.45rem, 5.75vw, 2.95rem);
    padding-right: clamp(2.45rem, 5.75vw, 2.95rem);
    margin-right: auto;
  }

  .what-not-compare-grid,
  .what-not-hash-accordion-wrap {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  .what-not-hash-accordion-wrap {
    padding-right: 0;
  }

  .what-not-compare-card {
    max-width: none;
  }
}

/* What we aren’t — Hash Matching + Minor+Nudity: split title + accordion (aligns with compare band) */
.what-not-hash-section.page-section,
.what-not-mn-section.page-section {
  position: relative;
  width: calc(100% + 2 * var(--page-margin));
  max-width: none;
  margin-left: calc(-1 * var(--page-margin));
  margin-right: calc(-1 * var(--page-margin));
  /* Outer gutter matches compare band; copy inset on .what-not-hash-inner */
  padding-left: calc(var(--page-margin) * 2);
  padding-right: calc(var(--page-margin) * 2);
  padding-top: clamp(3.5rem, 7vw, 5.75rem);
  padding-bottom: clamp(3.5rem, 7vw, 5.75rem);
  box-sizing: border-box;
  background: var(--bg);
  border-top: none;
  overflow: visible;
}

.what-not-hash-inner {
  width: 100%;
  max-width: min(1600px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-text-inset-left);
  padding-right: var(--page-text-inset-left);
  position: relative;
  z-index: 1;
  text-align: left;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .what-not-hash-inner {
    padding-left: clamp(2.45rem, 5.75vw, 2.95rem);
    padding-right: clamp(2.45rem, 5.75vw, 2.95rem);
  }
}

.what-not-hash-intro {
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(0.95rem, 2vw, 1.65rem);
  padding: 0;
  text-align: left;
  box-sizing: border-box;
}

.what-not-hash-title {
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(1.8rem, 3.55vw, 3.05rem);
  font-weight: 500;
  line-height: 1.22;
  margin: 0 0 clamp(0.85rem, 1.75vw, 1.35rem);
  color: #fff;
}

.what-not-hash-recall {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1.85rem, 3.5vw, 2.85rem);
  font-weight: 300;
  line-height: 1.25;
  margin: 0;
  color: #fff;
  letter-spacing: 0.02em;
}

/* What we aren’t — ≤1280 only: compare + hash section titles match hero H2; compare card names smaller; recall/accuracy below hash titles */
@media (max-width: 1280px) {
  html.page-what-we-are-not .what-not-compare-title,
  html.page-what-we-are-not .what-not-hash-title {
    font-size: clamp(1.72rem, 3.38vw, 2.92rem);
    line-height: 1.3;
  }

  html.page-what-we-are-not .what-not-compare-card__name {
    font-size: clamp(1.22rem, 2.2vw, 1.62rem);
    line-height: 1.28;
  }

  html.page-what-we-are-not .what-not-hash-recall {
    font-size: clamp(1.65rem, 3.15vw, 2.55rem);
    line-height: 1.22;
  }
}

/* Compare cards — two-column band only: wider columns + shorter cards (min-width keeps ≤768 single-column stack) */
@media (max-width: 1280px) and (min-width: 769px) {
  html.page-what-we-are-not .what-not-compare-grid {
    grid-template-columns: repeat(2, minmax(0, clamp(21rem, 30.5vw, 36.5rem)));
    column-gap: clamp(1.2rem, 2.75vw, 2.1rem);
    padding-right: clamp(1.15rem, 3vw, 3.35rem);
  }

  html.page-what-we-are-not .what-not-compare-card {
    min-height: clamp(10.75rem, 18.5vw, 13.75rem);
    padding: clamp(1rem, 1.95vw, 1.5rem);
  }

  html.page-what-we-are-not .what-not-compare-card__visual {
    min-height: clamp(3.65rem, 8.5vw, 5rem);
    margin: clamp(0.7rem, 1.45vw, 1.05rem) 0 clamp(0.35rem, 0.9vw, 0.6rem);
  }

  html.page-what-we-are-not .what-not-compare-card__img {
    max-width: min(188px, 36vw);
  }

  html.page-what-we-are-not .what-not-compare-card__value {
    font-size: clamp(2.2rem, 4.05vw, 3.05rem);
  }
}

.what-not-accordion {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.88);
}

.what-not-acc-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.88);
}

.what-not-acc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.05rem, 1.95vw, 1.45rem) 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: 'Azeret Mono', monospace;
  font-size: clamp(1.2rem, 2vw, 1.48rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-align: left;
  transition: color 0.2s ease;
}

.what-not-acc__trigger:hover,
.what-not-acc__trigger:hover .what-not-acc__icon {
  color: #79ffea;
}

.what-not-acc-item.is-open .what-not-acc__trigger {
  color: #fff;
}

.what-not-acc-item.is-open .what-not-acc__trigger:hover,
.what-not-acc-item.is-open .what-not-acc__trigger:hover .what-not-acc__icon {
  color: #79ffea;
}

.what-not-acc__icon {
  display: inline-block;
  flex-shrink: 0;
  font-size: clamp(1.75rem, 2.75vw, 2.25rem);
  line-height: 1;
  font-weight: 300;
  color: inherit;
  transition: color 0.2s ease, transform 0.2s ease;
}

.what-not-acc-item.is-open .what-not-acc__icon {
  transform: rotate(45deg);
}

.what-not-acc__panel {
  padding-bottom: clamp(1.1rem, 2.25vw, 1.65rem);
}

.what-not-acc__body {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1.12rem, 1.95vw, 1.3rem);
  font-weight: 400;
  line-height: 1.62;
  color: rgba(241, 245, 249, 0.92);
}

/* Fixed icon column + text column: body copy left-aligns; icons centered in column */
.what-not-hash-section .what-not-accordion {
  --what-not-acc-icon-col: clamp(4.5rem, 9vw, 6.75rem);
}

.what-not-mn-section .what-not-accordion {
  --what-not-acc-icon-col: clamp(6.75rem, 12.5vw, 9.5rem);
}

.what-not-acc__row {
  display: grid;
  grid-template-columns: var(--what-not-acc-icon-col, clamp(4.5rem, 9vw, 6.75rem)) minmax(0, 1fr);
  column-gap: clamp(0.85rem, 1.75vw, 1.25rem);
  align-items: center;
  margin: 0 0 clamp(0.95rem, 1.85vw, 1.35rem);
}

.what-not-acc__row:last-child {
  margin-bottom: 0;
}

.what-not-acc__row-icon {
  width: clamp(2.75rem, 5.5vw, 3.75rem);
  max-width: 100%;
  height: auto;
  justify-self: center;
  display: block;
  object-fit: contain;
}

/* Hash WHY IT FAILS — Failed.svg: smaller graphic, same column (text aligns with other rows) */
.what-not-acc__row-icon[src*='Failed'] {
  width: clamp(2.35rem, 4.85vw, 3.2rem);
  max-width: 88%;
}

/* Minor + Nudity — WHAT IT IS + THE LIMITATIONS: larger N+M blue + Puzzle in shared column */
.what-not-mn-section .what-not-acc-item:nth-child(1) .what-not-acc__row,
.what-not-mn-section .what-not-acc-item:nth-child(2) .what-not-acc__row {
  column-gap: clamp(1.35rem, 2.5vw, 2.15rem);
}

.what-not-mn-section .what-not-acc-item:nth-child(1) .what-not-acc__row-icon,
.what-not-mn-section .what-not-acc-item:nth-child(2) .what-not-acc__row-icon {
  width: clamp(5.5rem, 11vw, 8.25rem);
  max-width: 100%;
}

/* Minor + Nudity — WHY IT FAILS: same icon column + gap as Hash Matching so body text aligns */
.what-not-mn-section .what-not-acc-item:nth-child(3) {
  --what-not-acc-icon-col: clamp(4.5rem, 9vw, 6.75rem);
}

.what-not-acc__row-text {
  margin: 0;
  min-width: 0;
}

.what-not-acc__row--dilemma {
  margin-bottom: 0;
}

.what-not-acc__dilemma-label {
  font-weight: 400;
  color: rgba(241, 245, 249, 0.92);
}

.what-not-acc__dilemma-em {
  font-weight: 600;
  color: #79ffea;
}

.what-not-acc__body strong {
  font-weight: 600;
  color: #fff;
}

.what-not-mn-section + .page-section {
  border-top: none;
}

/* What we aren’t — compare chart only: page navy, no duotone/noise band */
.what-not-spec-chart-section.page-section {
  position: relative;
  width: calc(100% + 2 * var(--page-margin));
  max-width: none;
  margin-left: calc(-1 * var(--page-margin));
  margin-right: calc(-1 * var(--page-margin));
  padding-left: calc(var(--page-margin) * 2);
  padding-right: calc(var(--page-margin) * 2);
  padding-top: clamp(3.5rem, 7vw, 5.75rem);
  padding-bottom: clamp(3.5rem, 7vw, 5.75rem);
  box-sizing: border-box;
  background: var(--bg);
  border-top: none;
  overflow: visible;
}

/* Compare / hash / MN / spec bands: width rules above target a padded body; flush-body page uses 100%. */
html.page-what-we-are-not .what-not-compare-section.page-section,
html.page-what-we-are-not .what-not-hash-section.page-section,
html.page-what-we-are-not .what-not-mn-section.page-section,
html.page-what-we-are-not .what-not-spec-chart-section.page-section {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* What we aren’t — compare chart only (4 columns: Compare + MN + Hash + AI). Does not affect CSAM product page. */
.what-not-spec-chart-section .page-spec-chart {
  background: var(--bg);
  margin-top: 0;
  max-width: min(140rem, 100%);
  width: min(100%, 140rem);
  margin-left: auto;
  margin-right: auto;
}

.what-not-spec-chart-section .page-spec-chart__header,
.what-not-spec-chart-section .page-spec-chart__row {
  grid-template-columns: minmax(20rem, 2.95fr) repeat(3, minmax(0, 1fr));
}

.what-not-spec-chart-section .page-spec-chart__head {
  min-height: 3.85em;
  padding-top: clamp(1.15rem, 2.6vw, 1.55rem);
  padding-bottom: clamp(1.15rem, 2.6vw, 1.55rem);
}

.what-not-spec-chart-section .page-spec-chart__head--specs {
  padding-left: clamp(0.65rem, 1.5vw, 1.1rem);
  padding-right: clamp(1rem, 2.2vw, 1.5rem);
}

.what-not-spec-chart-section .page-spec-chart__head--mn,
.what-not-spec-chart-section .page-spec-chart__head--hash,
.what-not-spec-chart-section .page-spec-chart__head--ai {
  text-align: center;
  align-items: center;
}

.what-not-spec-chart-section .page-spec-chart__head--mn {
  color: #78a5e1;
}

.what-not-spec-chart-section .page-spec-chart__header .page-spec-chart__head:nth-child(n + 2) {
  padding-left: clamp(0.35rem, 0.9vw, 0.75rem);
  padding-right: clamp(0.35rem, 0.9vw, 0.75rem);
}

.what-not-spec-chart-section .page-spec-chart__perf-label {
  padding-top: clamp(1.15rem, 2.5vw, 1.45rem);
  padding-bottom: clamp(1.15rem, 2.5vw, 1.45rem);
  padding-left: clamp(0.45rem, 1.1vw, 0.75rem);
  padding-right: clamp(1rem, 2.35vw, 1.65rem);
}

.what-not-spec-chart-section .page-spec-chart__pct {
  padding: clamp(1.15rem, 2.5vw, 1.45rem) clamp(0.5rem, 1.15vw, 0.95rem);
}

.what-not-spec-chart-section .page-spec-chart__feature-label {
  padding-top: clamp(1.1rem, 2.35vw, 1.4rem);
  padding-bottom: clamp(1.1rem, 2.35vw, 1.4rem);
  padding-left: clamp(0.45rem, 1.1vw, 0.75rem);
  padding-right: clamp(1rem, 2.35vw, 1.65rem);
}

.what-not-spec-chart-section .page-spec-chart__mark {
  padding: clamp(0.95rem, 2vw, 1.25rem) clamp(0.5rem, 1.15vw, 0.95rem);
}

/* What we aren’t — bottom compare chart: slightly smaller column headings (≤1280 only) */
@media (max-width: 1280px) {
  html.page-what-we-are-not .what-not-spec-chart-section .page-spec-chart__head {
    font-size: clamp(1.14rem, 2.52vw, 1.56rem);
    line-height: 1.13;
  }
}

/* What we aren’t — ≤1180: chart body row type slightly smaller (headers stay on ≤1280 scale); hash/M+N intro gap; smaller accordion type */
@media (max-width: 1180px) {
  html.page-what-we-are-not .what-not-spec-chart-section .page-spec-chart__perf-label,
  html.page-what-we-are-not .what-not-spec-chart-section .page-spec-chart__pct {
    font-size: clamp(1.18rem, 2.45vw, 1.65rem);
  }

  html.page-what-we-are-not .what-not-spec-chart-section .page-spec-chart__feature-label {
    font-size: clamp(0.92rem, 1.62vw, 1.1rem);
  }

  html.page-what-we-are-not .what-not-hash-section .what-not-hash-intro,
  html.page-what-we-are-not .what-not-mn-section .what-not-hash-intro {
    margin: 0 0 clamp(1.4rem, 2.9vw, 2.25rem);
  }

  html.page-what-we-are-not .what-not-acc__body {
    font-size: clamp(1.02rem, 1.72vw, 1.18rem);
  }

  html.page-what-we-are-not .what-not-acc__trigger {
    font-size: clamp(1.08rem, 1.82vw, 1.35rem);
  }

  html.page-what-we-are-not .what-not-acc__icon {
    font-size: clamp(1.55rem, 2.45vw, 2.05rem);
  }
}

/* What we aren’t — tablet portrait (768–1024, e.g. iPad mini / iPad Pro): not phone, not tablet landscape */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  /* Compare band: two cards abreast; left-aligned with section title (portrait tablet only). */
  html.page-what-we-are-not .what-not-compare-grid {
    grid-template-columns: repeat(2, minmax(0, min(16.25rem, 33.5vw)));
    column-gap: clamp(1.45rem, 3.35vw, 2.35rem);
    row-gap: 0;
    justify-content: start;
    justify-items: stretch;
    align-items: stretch;
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  html.page-what-we-are-not .what-not-compare-card {
    max-width: 100%;
    min-height: clamp(8.35rem, 18vw, 11rem);
    padding: clamp(0.65rem, 1.25vw, 1rem);
  }

  html.page-what-we-are-not .what-not-compare-card__visual {
    min-height: clamp(2.85rem, 6.5vw, 4rem);
    margin: clamp(0.45rem, 1vw, 0.75rem) 0 clamp(0.2rem, 0.55vw, 0.45rem);
  }

  html.page-what-we-are-not .what-not-compare-card__img {
    max-width: min(148px, 30vw);
  }

  /* Portrait tablet only: accordions flush with section titles (base grid stays end-aligned elsewhere). */
  html.page-what-we-are-not .what-not-hash-accordion-wrap {
    justify-content: start;
    padding-right: 0;
  }

  html.page-what-we-are-not .what-not-spec-chart-section .page-spec-chart {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  html.page-what-we-are-not .what-not-spec-chart-section .page-spec-chart__header,
  html.page-what-we-are-not .what-not-spec-chart-section .page-spec-chart__row {
    grid-template-columns: minmax(12.5rem, 2fr) repeat(3, minmax(0, 1fr));
  }

  /* Portrait tablet: light upward nudge only — strong negative margin read as copy too high after tighter line stack. */
  html.page-what-we-are-not .what-not-hero__inner {
    margin-top: calc(-1 * clamp(0.65rem, 1.15rem, 1.75rem));
  }

  html.page-what-we-are-not .what-not-hero__copy {
    padding-top: clamp(0.55rem, 0.85rem, 1.15rem);
    margin-top: max(
      clamp(2.65rem, 6.15vw, 4.45rem),
      calc(env(safe-area-inset-top, 0px) + clamp(4.95rem, 10.35vw, 6.65rem))
    );
  }

  /*
   * Portrait tablet only: mesh nudged right + lower vs copy (margin-top beats ≤1280 two-col ~4388 here).
   */
  html.page-what-we-are-not .what-not-hero__visual {
    margin-top: calc(
      clamp(4.65rem, 7.35vw, 6.5rem) + clamp(1.85rem, 3.35vw, 3.15rem)
    );
    transform: translateX(clamp(0.85rem, 2.05vw, 1.65rem));
  }

  /* Portrait tablet only: slightly smaller revolution headline vs ≤1366 cascade. */
  html.page-what-we-are-not .what-not-hero .product-hero__title.product-hero__title--deepfake {
    font-size: clamp(1.48rem, 2.88vw, 2.42rem);
    line-height: 1.5;
    margin-bottom: clamp(0.55rem, 1.35vw, 0.95rem);
  }

  /* Tighter stack than base .what-not-hero line margins — what-not has two body lines, not deepfake product rhythm. */
  html.page-what-we-are-not .what-not-hero .product-hero__deepfake-line:first-of-type {
    margin-top: 0;
    margin-bottom: clamp(0.42rem, 1.05vw, 0.7rem);
  }

  html.page-what-we-are-not .what-not-hero .product-hero__deepfake-line--semibold {
    margin-top: 0;
    margin-bottom: clamp(0.95rem, 2vw, 1.45rem);
  }

  /* Same hero band as CSAM/Deepfake: min-height matches ~1694 product portrait; a touch more top inset so copy sits lower. */
  html.page-what-we-are-not .what-not-hero {
    padding-top: calc(
      env(safe-area-inset-top, 0px) + max(clamp(3.45rem, 5.05rem, 5.35rem), clamp(5.4rem, 9.85vw, 7.45rem))
    ) !important;
    /* Override ~4079 svh bottom — same stable band as min-height (iOS toolbar). */
    padding-bottom: clamp(5rem, 6rem, 7rem) !important;
    min-height: clamp(26rem, 51dvh, 42rem);
    max-height: none;
  }
}

/*
 * What we aren’t — bottom spec chart (4-col): landscape 905–932 (Pro Max-class) skips the `(max-width: 904)` branch that
 * sets `overflow-x: auto`; restore horizontal scroll so all columns stay readable vs `overflow:hidden` on `.page-spec-chart`.
 */
@media (orientation: landscape) and (min-width: 905px) and (max-width: 932px) {
  html.page-what-we-are-not .what-not-spec-chart-section .page-spec-chart {
    max-width: none !important;
    width: 100%;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  html.page-what-we-are-not .what-not-spec-chart-section .page-spec-chart__header,
  html.page-what-we-are-not .what-not-spec-chart-section .page-spec-chart__row {
    grid-template-columns: minmax(12.5rem, 2fr) repeat(3, minmax(0, 1fr));
    min-width: 38rem;
  }
}

/*
 * What we aren’t hero — wide-narrow tablet only (834–900 portrait, 804–904 landscape): base nowrap lines + two-col grid
 * can let copy and mesh collide; widen gap + slightly trim art column — no forced wrapping (768–833 portrait keeps
 * natural line breaks; phablet stack unchanged).
 */
@media (max-width: 900px) and (min-width: 834px) and (orientation: portrait), (min-width: 804px) and (max-width: 904px) and (orientation: landscape) {
  html.page-what-we-are-not .what-not-hero__inner {
    gap: clamp(2.25rem, 5.15vw, 3.65rem);
    grid-template-columns: minmax(0, 1.35fr) minmax(0, min(28rem, 36vw));
  }

  html.page-what-we-are-not .what-not-hero__canvas {
    width: min(100%, 19.5rem);
    margin-left: auto;
  }
}

/*
 * What we aren’t hero — iPad Air portrait (768–833): extra mesh drop via translateY only (margin from portrait block above).
 * ≥834 portrait unchanged.
 */
@media (max-width: 833px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape) {
  html.page-what-we-are-not .what-not-hero__visual {
    transform: translate(
      clamp(0.85rem, 2.05vw, 1.65rem),
      clamp(5.35rem, 12.5vw, 9.35rem)
    );
  }
}

@media (max-width: 520px) {
  /* Was min-width: 34rem — wider than many phones; forced document scrollWidth and “zoom” rubber-band. */
  .what-not-spec-chart-section .page-spec-chart__header,
  .what-not-spec-chart-section .page-spec-chart__row {
    min-width: 0;
  }
}

.what-not-spec-chart-section .what-not-spec-chart-inner {
  max-width: min(1600px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-text-inset-left);
  padding-right: var(--page-text-inset-left);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

@media (max-width: 768px) {
  .what-not-spec-chart-section.page-section {
    padding-left: calc(var(--page-margin) * 2);
    padding-right: calc(var(--page-margin) * 2);
  }

  .what-not-spec-chart-section .what-not-spec-chart-inner {
    padding-left: clamp(2.45rem, 5.75vw, 2.95rem);
    padding-right: clamp(2.45rem, 5.75vw, 2.95rem);
    align-items: stretch;
  }

  .what-not-spec-chart-section .page-spec-chart {
    margin-left: auto;
    margin-right: auto;
    max-width: min(140rem, 100%);
  }
}

/*
 * What we aren’t — phablet (431–767): below-hero bands use the same text gutters as product ≤767
 * (.page-inner / duotone insets: clamp(0.75rem, 3.35vw, 1.15rem)), not the wider ≤768 phone clamps.
 * Compare band: two cards abreast + scaled interiors (same idea as CSAM “No Face?” phablet ~10934).
 */
@media (max-width: 767px) and (min-width: 441px) {
  html.page-what-we-are-not .what-not-compare-inner,
  html.page-what-we-are-not .what-not-hash-inner,
  html.page-what-we-are-not .what-not-spec-chart-section .what-not-spec-chart-inner {
    padding-left: clamp(0.75rem, 3.35vw, 1.15rem);
    padding-right: clamp(0.75rem, 3.35vw, 1.15rem);
  }

  html.page-what-we-are-not .what-not-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(0.35rem, 1.35vw, 0.65rem);
    row-gap: clamp(0.45rem, 1.85vw, 0.75rem);
    justify-content: stretch;
    justify-items: stretch;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    box-sizing: border-box;
  }

  html.page-what-we-are-not .what-not-compare-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: none;
    min-width: 0;
    min-height: clamp(9.85rem, 36.5vw, 11.5rem);
    padding: clamp(0.48rem, 1.45vw, 0.68rem) clamp(0.15rem, 0.75vw, 0.28rem) clamp(0.18rem, 0.58vw, 0.28rem);
    box-sizing: border-box;
  }

  html.page-what-we-are-not .what-not-compare-card__num {
    font-size: clamp(0.62rem, 1.75vw, 0.78rem);
    margin-bottom: 0.18rem;
    letter-spacing: 0.05em;
  }

  html.page-what-we-are-not .what-not-compare-card__rule {
    margin-bottom: clamp(0.22rem, 1vw, 0.38rem);
  }

  html.page-what-we-are-not .what-not-compare-card__name {
    font-size: clamp(0.72rem, 2.55vw, 0.98rem);
    line-height: 1.22;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  html.page-what-we-are-not .what-not-compare-card__visual {
    flex: 1 1 auto;
    min-height: clamp(2.55rem, 10.75vw, 3.45rem);
    margin: clamp(0.2rem, 1vw, 0.36rem) 0 clamp(0.14rem, 0.7vw, 0.24rem);
    align-items: center;
    justify-content: center;
  }

  html.page-what-we-are-not .what-not-compare-card__img {
    width: auto;
    max-width: min(6.05rem, 46vw);
    max-height: clamp(2.72rem, 11.25vw, 3.55rem);
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  html.page-what-we-are-not .what-not-compare-card__stat {
    padding-top: 0.2rem;
  }

  html.page-what-we-are-not .what-not-compare-card__label {
    font-size: clamp(0.58rem, 1.95vw, 0.78rem);
    margin-bottom: 0.14rem;
    letter-spacing: 0.09em;
  }

  html.page-what-we-are-not .what-not-compare-card__value {
    font-size: clamp(1.48rem, 7.15vw, 2.38rem);
    line-height: 1.02;
  }

  html.page-what-we-are-not .what-not-compare-header {
    margin-bottom: clamp(1.15rem, 3.25vw, 1.85rem);
  }
}

.what-not-acc__trigger:focus-visible {
  outline: 2px solid #79ffea;
  outline-offset: 3px;
}

/* Product — No hash: 3-column spec chart (Compare + Hash + AI). 4-column layout is what-we-aren’t only. */
.page-spec-chart {
  --page-spec-chart-line: rgba(148, 163, 184, 0.5);
  margin-top: clamp(2rem, 4vw, 2.75rem);
  margin-left: auto;
  margin-right: auto;
  max-width: min(64rem, 100%);
  padding: clamp(0.88rem, 2.2vw, 1.48rem) clamp(1.1rem, 2.8vw, 1.85rem);
  border: 1px solid var(--page-spec-chart-line);
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  background: rgba(15, 17, 24, 0.5);
}

/* Wraps header + rows; grows with min-width grid so light wash (on __body) scrolls with content */
.page-spec-chart__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 100%;
  width: max-content;
  box-sizing: border-box;
}

/*
 * Spec charts — phablet (431–767): scroll inside the chart so column grids keep readable mins
 * (what-not 4-col; CSAM “No Hash? No Problem.” 3-col). Beats base overflow:hidden + ≤520 min-width:0 on what-not.
 */
@media (max-width: 767px) and (min-width: 441px) {
  html.page-what-we-are-not .what-not-spec-chart-section .page-spec-chart {
    max-width: none;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  html.page-what-we-are-not .what-not-spec-chart-section .page-spec-chart__header,
  html.page-what-we-are-not .what-not-spec-chart-section .page-spec-chart__row {
    min-width: 36rem;
    grid-template-columns: minmax(11.5rem, 1.35fr) repeat(3, minmax(5.75rem, 1fr));
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--duotone-noise:has(.page-spec-chart)
    > .page-inner
    > .page-spec-chart {
    max-width: none;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--duotone-noise:has(.page-spec-chart)
    .page-spec-chart__header,
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--duotone-noise:has(.page-spec-chart)
    .page-spec-chart__row {
    min-width: 30rem;
    grid-template-columns: minmax(11rem, 1.4fr) minmax(6.25rem, 1fr) minmax(6.25rem, 1fr);
  }
}

.page-spec-chart__header {
  display: grid;
  grid-template-columns: minmax(14.5rem, 1.85fr) minmax(6.5rem, 1fr) minmax(6.5rem, 1fr);
  border-bottom: 1px solid var(--page-spec-chart-line);
}

.page-spec-chart__head {
  padding: clamp(0.95rem, 2.2vw, 1.35rem) clamp(0.85rem, 2.2vw, 1.45rem);
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(1.38rem, 3.05vw, 1.88rem);
  font-weight: 600;
  line-height: 1.16;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 3.35em;
}

.page-spec-chart__head--specs {
  text-align: left;
  align-items: flex-start;
}

.page-spec-chart__head--hash,
.page-spec-chart__head--ai {
  text-align: center;
  align-items: center;
}

.page-spec-chart__head--hash {
  color: #cfbdf3;
}

.page-spec-chart__head--ai {
  color: #79ffea;
}

.page-spec-chart__row {
  display: grid;
  grid-template-columns: minmax(14.5rem, 1.85fr) minmax(6.5rem, 1fr) minmax(6.5rem, 1fr);
  align-items: stretch;
}

.page-spec-chart__row--perf {
  border-bottom: 1px solid var(--page-spec-chart-line);
}

.page-spec-chart__perf-label,
.page-spec-chart__pct {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(1.35rem, 2.85vw, 1.9rem);
  line-height: 1.25;
  color: #fff;
  padding: clamp(0.95rem, 2.2vw, 1.25rem) clamp(0.85rem, 2.2vw, 1.45rem);
  margin: 0;
}

.page-spec-chart__perf-label {
  text-align: left;
  display: flex;
  align-items: center;
}

.page-spec-chart__pct {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-spec-chart__row--feature {
  border-bottom: 1px dotted var(--page-spec-chart-line);
}

.page-spec-chart__row--feature:last-child {
  border-bottom: none;
}

.page-spec-chart__feature-label {
  font-family: 'Azeret Mono', monospace;
  font-weight: 400;
  font-size: clamp(1.02rem, 1.9vw, 1.26rem);
  line-height: 1.45;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  padding: clamp(0.95rem, 2.1vw, 1.2rem) clamp(0.85rem, 2.2vw, 1.45rem);
  display: flex;
  align-items: center;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.page-spec-chart__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 1.75vw, 1.05rem);
}

.page-spec-chart__x {
  width: clamp(1.55rem, 3.15vw, 1.9rem);
  height: clamp(1.55rem, 3.15vw, 1.9rem);
  color: #ff206e;
  flex-shrink: 0;
}

.page-spec-chart__check {
  width: clamp(1.6rem, 3.25vw, 1.95rem);
  height: clamp(1.6rem, 3.25vw, 1.95rem);
  color: #47ff00;
  flex-shrink: 0;
}

@media (max-width: 520px) {
  .page-spec-chart {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .page-spec-chart__header,
  .page-spec-chart__row {
    min-width: 22rem;
  }
}

.page-spec-chart-read-more-wrap {
  text-align: center;
  margin: 2.5rem 0 0;
}

.page-spec-chart-read-more-wrap .btn-csam-started.page-spec-chart-read-more {
  margin-top: 0;
  margin-left: 0;
  padding: 0.8rem 1.95rem;
  font-size: 1.05rem;
  gap: 0.52rem;
  border-radius: 28px;
}

.page-spec-chart-read-more-wrap .btn-csam-started.page-spec-chart-read-more .btn-arrow svg {
  width: 1.08rem;
  height: 1.08rem;
}

.page-scroll-hint {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin: 2rem 0 0;
}

.page-long-read {
  max-width: 40rem;
  margin: 0 auto;
}

.page-long-read h3 {
  font-family: 'Inter Tight', var(--font);
  font-size: 1.35rem;
  margin: 2rem 0 0.75rem;
}

.page-long-read p {
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 1rem;
}

.page-cta {
  text-align: center;
  padding: clamp(4rem, 8vw, 6rem) var(--page-margin);
  border-top: 1px solid rgba(51, 65, 85, 0.35);
}

.page-cta h2 {
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  margin: 0 0 0.75rem;
}

.page-cta p {
  color: var(--text-muted);
  margin: 0 0 2rem;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

.page-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.page-cta-actions .btn-hero {
  margin-top: 0;
}

/* Articles */
.articles-intro {
  text-align: left;
  padding-top: clamp(2rem, 5vw, 3rem);
  padding-bottom: 2rem;
  padding-right: var(--page-margin);
  padding-left: calc(var(--page-margin) + var(--page-text-inset-left));
}

.articles-intro .articles-intro__title {
  text-align: left;
  margin-bottom: 1rem;
}

.articles-intro .articles-intro__lead {
  font-family: 'Azeret Mono', monospace;
  font-size: clamp(1.02rem, 1.85vw, 1.22rem);
  letter-spacing: 0.055em;
  text-transform: uppercase;
  text-align: left;
  color: var(--accent);
  max-width: min(52rem, 100%);
  margin: 0 0 2rem;
  line-height: 1.65;
}

.articles-grid {
  display: grid;
  /* One card per row uses full width; auto-fill + minmax(280px) left a ~280px column for a lone card */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  padding-top: 0;
  padding-right: var(--page-margin);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  padding-left: calc(var(--page-margin) + var(--page-text-inset-left));
  max-width: min(96rem, 100%);
  width: 100%;
  margin-left: 0;
  margin-right: auto;
  box-sizing: border-box;
}

.article-card {
  display: block;
  padding: 1.75rem;
  border-radius: 10px;
  border: 1px solid rgba(51, 65, 85, 0.55);
  background: var(--bg-alt);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.article-card--has-thumb {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: var(--bg);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.article-card--has-thumb:hover {
  border-color: rgba(203, 213, 225, 0.45);
  transform: translateY(-1px);
}

.article-card--has-thumb .article-card__thumb {
  flex: 0 0 clamp(15rem, 40vw, 28rem);
  min-width: 0;
  align-self: stretch;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.article-card--has-thumb .article-card__thumb img {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.article-card--has-thumb .article-card__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.article-card:hover:not(.article-card--has-thumb) {
  border-color: rgba(45, 212, 191, 0.4);
  transform: translateY(-2px);
}

.article-card-meta {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 0.75rem;
}

.article-card h2 {
  font-family: 'Inter Tight', var(--font);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  line-height: 1.35;
}

.article-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.article-card--has-thumb .article-card-meta {
  font-family: var(--font);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-muted);
  margin: 0 0 0.65rem;
}

.article-card--has-thumb h2 {
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(1.45rem, 3.1vw, 1.95rem);
  font-weight: 500;
  color: var(--text);
  line-height: 1.25;
  margin: 0 0 0.85rem;
}

.article-card--has-thumb .article-card-excerpt {
  font-size: clamp(0.88rem, 1.35vw, 0.98rem);
  line-height: 1.62;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card-excerpt-kicker {
  font-family: 'Azeret Mono', monospace;
  font-size: clamp(0.95rem, 1.45vw, 1.12rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--government-kicker);
  -webkit-text-fill-color: var(--government-kicker);
  margin-right: 0.4rem;
}

@media (max-width: 768px) {
  /* Thumb first in DOM: stack image on top, text below */
  .article-card--has-thumb {
    flex-direction: column;
  }

  .article-card--has-thumb .article-card__thumb {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .article-card--has-thumb .article-card__thumb img {
    min-height: 0;
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

/*
 * Articles listing — phablet only (431–767): clear fixed header; centered intro; symmetric page gutters (≤430 / ≥768 unchanged).
 */
@media (max-width: 767px) and (min-width: 441px) {
  .articles-intro {
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(5.5rem, 16vw, 7rem));
    padding-left: max(1.1rem, var(--page-margin));
    padding-right: max(1.1rem, var(--page-margin));
    text-align: center;
  }

  .articles-intro .articles-intro__title,
  .articles-intro .articles-intro__lead {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .articles-grid {
    padding-left: max(1.1rem, var(--page-margin));
    padding-right: max(1.1rem, var(--page-margin));
  }
}

/* Blog post — light content card on dark bg (e.g. /post/… ) */
html.page-blog-post body {
  padding-left: clamp(1rem, 3.5vw, 2rem);
  padding-right: clamp(1rem, 3.5vw, 2rem);
}

html.page-blog-post .header-wrap {
  padding-left: clamp(1rem, 3.5vw, 2rem);
  padding-right: clamp(1rem, 3.5vw, 2rem);
}

html.page-blog-post .site-footer {
  padding-left: clamp(1rem, 3.5vw, 2rem);
  padding-right: clamp(1rem, 3.5vw, 2rem);
}

.blog-post-page {
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(0.35rem, 1.25vw, 0.75rem) clamp(3rem, 6vw, 5rem);
  max-width: min(72rem, 100%);
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
}

/* Blog post — phablet only (431–767): first content clears fixed header (≤430 / ≥768 unchanged). */
@media (max-width: 767px) and (min-width: 441px) {
  html.page-blog-post .blog-post-page {
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(5.15rem, 14.5vw, 6.5rem));
  }
}

.blog-post-kicker {
  font-family: 'Azeret Mono', monospace;
  font-size: clamp(0.95rem, 1.65vw, 1.12rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: #aafff0;
}

.blog-post-kicker a {
  color: inherit;
  text-decoration: none;
}

.blog-post-kicker__arrow {
  display: inline-block;
  margin-right: 0.45em;
  font-size: 1.45em;
  line-height: 1;
  vertical-align: -0.12em;
  text-transform: none;
  letter-spacing: 0;
}

.blog-post-kicker__label {
  text-decoration: none;
}

.blog-post-kicker a:hover {
  color: #aafff0;
  text-decoration: none;
}

.blog-post-kicker a:hover .blog-post-kicker__label {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.blog-post-canvas {
  background: #fff;
  color: #0a0a0a;
  border: 1px solid rgba(45, 212, 191, 0.55);
  border-radius: 6px;
  padding: clamp(1.65rem, 3.2vw, 2.5rem);
  box-sizing: border-box;
}

.blog-post-meta {
  font-family: var(--font);
  font-size: 1.02rem;
  color: #1e293b;
  margin: 0 0 0.85rem;
}

.blog-post-headline {
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(1.52rem, 3.35vw, 2.12rem);
  font-weight: 500;
  line-height: 1.22;
  margin: 0 0 1.1rem;
  color: #0a0a0a;
}

.blog-post-cta-line {
  font-family: 'Azeret Mono', monospace;
  font-size: clamp(1rem, 1.7vw, 1.16rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
  color: #0a0a0a;
}

.blog-post-download {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  margin: 0 0 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, background 0.2s ease;
}

/* Tighten space between first PDF block and hero image */
.blog-post-canvas > a.blog-post-download {
  margin-bottom: 0.35rem;
}

.blog-post-download:hover {
  border-color: rgba(45, 212, 191, 0.65);
  background: rgba(45, 212, 191, 0.04);
}

.blog-post-download__icon {
  flex-shrink: 0;
  color: var(--teal);
}

.blog-post-download__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.blog-post-download__name {
  font-family: 'Open Sans', var(--font);
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 1.3;
}

.blog-post-download__sub {
  font-family: var(--font);
  font-size: 0.92rem;
  color: #64748b;
}

.blog-post-download__action {
  flex-shrink: 0;
  color: #475569;
}

.blog-post-feature-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.blog-post-figure--hero {
  margin: 0 0 1.75rem;
}

.blog-post-body {
  font-family: 'Open Sans', var(--font);
  font-size: clamp(1.1rem, 1.5vw, 1.22rem);
  font-weight: 400;
  line-height: 1.65;
  color: #0a0a0a;
}

.blog-post-body__label {
  font-family: 'Open Sans', var(--font);
  font-weight: 400;
  margin: 0 0 0.65rem;
}

.blog-post-body p {
  margin: 0 0 1.1rem;
}

.blog-post-body p:last-child {
  margin-bottom: 0;
}

.blog-post-body ul {
  margin: 0 0 1.1rem;
  padding-left: 1.35rem;
}

.blog-post-body li {
  margin-bottom: 0.4rem;
}

.blog-post-body li:last-child {
  margin-bottom: 0;
}

.blog-post-body strong {
  font-weight: 700;
}

.blog-post-callout {
  margin: 0 0 1.25rem;
  padding: 0.35rem 0 0.35rem 1.15rem;
  border-left: 4px solid rgba(45, 212, 191, 0.85);
  font-family: 'Open Sans', var(--font);
  font-size: clamp(1.15rem, 2.05vw, 1.35rem);
  font-weight: 300;
  line-height: 1.55;
  color: #0a0a0a;
}

.blog-post-callout p {
  margin: 0;
}

.blog-post-callout strong {
  font-weight: 700;
}

.blog-post-section-title {
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(1.34rem, 2.55vw, 1.58rem);
  font-weight: 600;
  color: #0a0a0a;
  margin: 1.5rem 0 0.65rem;
  line-height: 1.3;
}

.blog-post-body .blog-post-section-title:first-of-type {
  margin-top: 0.25rem;
}

.blog-post-end-cta {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid #e2e8f0;
}

.blog-post-end-cta .blog-post-cta-line {
  margin-bottom: 1rem;
}

.blog-post-end-cta .blog-post-download {
  margin-bottom: 0;
}

@media (max-width: 520px) {
  .blog-post-download {
    flex-wrap: wrap;
  }

  .blog-post-download__action {
    margin-left: auto;
  }
}

/* Contact */
.contact-page {
  max-width: min(76rem, 100%);
  margin: 0 auto;
  padding: 0 max(1.25rem, calc(var(--page-margin) - 1.25rem))
    clamp(5rem, 9vw, 8rem) max(0.5rem, calc(var(--page-margin) - 3rem));
  box-sizing: border-box;
}

@media (max-width: 1366px) {
  html.page-contact .contact-page {
    padding-bottom: clamp(3.15rem, 6.25vw, 5.25rem);
  }
}

.contact-page__inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

.contact-page__form-wrap {
  flex: 0 1 min(74rem, 100%);
  min-width: 0;
  text-align: left;
}

.contact-page__visual {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding-top: 0;
  padding-left: 1rem;
  margin-right: -1.35rem;
}

html.page-contact .contact-page__visual {
  position: relative;
  margin-top: -3.25rem;
}

html.page-contact .contact-page__visual::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(78%, 28rem);
  height: min(72%, 36rem);
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse 50% 48% at 50% 50%,
    rgba(170, 255, 240, 0.055) 0%,
    rgba(46, 245, 229, 0.028) 42%,
    transparent 68%
  );
  filter: blur(56px);
  pointer-events: none;
  z-index: 0;
}

.contact-page__visual img {
  width: 100%;
  max-width: min(22rem, 100%);
  height: auto;
  display: block;
}

html.page-contact .contact-page__visual img {
  position: relative;
  z-index: 1;
  max-width: min(48rem, 100%);
  transform: translateX(1.45rem);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #fff 0%,
    #fff 84%,
    rgba(255, 255, 255, 0.45) 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #fff 0%,
    #fff 84%,
    rgba(255, 255, 255, 0.45) 92%,
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@media (min-width: 901px) {
  html.page-contact .contact-page-hero,
  html.page-contact .contact-page {
    max-width: min(88rem, 100%);
    margin-left: clamp(3.5rem, 11vw, 8.5rem);
    margin-right: auto;
  }

  html.page-contact .contact-page__visual {
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: clamp(-2rem, -4vw, -3.25rem);
    margin-top: clamp(-7rem, -9vw, -5.4rem);
    min-width: 0;
  }

  html.page-contact .contact-page__visual img {
    width: auto;
    max-width: min(56rem, 46vw);
    transform: translateX(clamp(1.05rem, 2.85vw, 3.55rem));
  }
}

/*
 * Contact — ≥1920px only (e.g. 27″ FHD fullscreen): align kicker + form with index `.hero-left`.
 * Home hero uses full-bleed `padding-left: calc(var(--page-margin) * 2)` then `--page-text-inset-left` on copy.
 * In the body-padded flow, that reads as an extra `var(--page-margin)` before the text inset — so
 * `margin-left: calc(var(--page-margin) * 2)` + `padding-left: var(--page-text-inset-left)` after the body gutter.
 * Viewports <1920px keep the 901px clamp + default padding.
 */
@media (min-width: 1920px) {
  html.page-contact .contact-page-hero,
  html.page-contact .contact-page {
    margin-left: calc(var(--page-margin) * 2);
    padding-left: var(--page-text-inset-left);
  }
}

/* Contact Submit.gif — shrink from ≤1650 (901–1650). Asset is 480px wide; any max-width > 480 never changes layout. */
@media (max-width: 1650px) and (min-width: 901px) {
  html.page-contact .contact-page__visual img {
    max-width: min(480px, clamp(15.5rem, 30vw - 2rem, 30rem));
    height: auto;
  }
}

@media (max-width: 900px) {
  .contact-page__inner {
    flex-direction: column;
  }

  .contact-page__visual {
    justify-content: flex-start;
    padding-top: 0;
    max-width: 100%;
  }

  .contact-page__visual img {
    max-width: min(22rem, 90vw);
    transform: none;
  }

  html.page-contact .contact-page__visual img {
    max-width: min(34rem, 92vw);
  }

  html.page-contact .contact-page__visual {
    margin-right: 0;
    margin-top: 0;
    padding-left: 0;
  }
}

/* Contact Submit.gif — smallest cap ≤1366 (901–1650 band above bridges down from full width); floor vw for phones */
@media (max-width: 1366px) {
  html.page-contact .contact-page__visual img {
    max-width: min(18.5rem, max(26vw, 11rem));
    transform: translateX(clamp(-0.35rem, 0.35vw, 0.65rem));
  }
}

/* Contact page — wireframe form + layout (contact.html only) */
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__status {
  margin: 1.25rem 0 0;
  padding: 1rem 1.15rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

.contact-form__status-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-heading, inherit);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.contact-form__status-body {
  margin: 0;
  opacity: 0.92;
}

.contact-form__status--ok {
  background: rgba(120, 255, 200, 0.12);
  border: 1px solid rgba(120, 255, 200, 0.35);
}

html.page-contact[data-theme='light'] .contact-form__status--ok {
  background: rgba(0, 140, 90, 0.08);
  border-color: rgba(0, 120, 75, 0.28);
  color: #0d3d2a;
}

.contact-form__status--err {
  background: rgba(255, 120, 120, 0.1);
  border: 1px solid rgba(255, 120, 120, 0.35);
}

.contact-page-hero {
  max-width: min(76rem, 100%);
  margin: 0 auto;
  padding: clamp(2rem, 4.5vw, 3.35rem)
    max(1.25rem, calc(var(--page-margin) - 1.25rem)) 1rem
    max(0.5rem, calc(var(--page-margin) - 3rem));
  box-sizing: border-box;
  text-align: left;
}

/* CTA-aligned kicker, slightly tighter than footer CTA band */
html.page-contact .contact-kicker {
  font-family: 'Azeret Mono', monospace;
  font-size: 1.62rem;
  font-weight: 200;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--government-kicker);
  -webkit-text-fill-color: var(--government-kicker);
  text-align: left;
  margin: 0 0 0.95rem;
}

html.page-contact .contact-page-title {
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(1.96rem, 3.68vw, 2.62rem);
  font-weight: 500;
  text-align: left;
  margin: 0 0 2rem;
  line-height: 1.25;
  color: var(--text);
}

/*
 * Contact — tablet portrait (768–900) + narrow landscape (800–904) + short landscape (905–1200, e.g. iPad mini rotated).
 * Matches centered rail / stacked inner to iPad-mini-style portrait; wide landscape laptops stay out via max-height.
 */
@media (max-width: 900px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape), (min-width: 905px) and (max-width: 1200px) and (orientation: landscape) and (max-height: 900px) {
  html.page-contact .contact-page-hero,
  html.page-contact .contact-page {
    margin-left: auto;
    margin-right: auto;
    max-width: min(40rem, 100%);
    padding-left: max(1.25rem, calc(var(--page-margin) - 1.25rem));
    padding-right: max(1.25rem, calc(var(--page-margin) - 1.25rem));
    box-sizing: border-box;
  }

  html.page-contact .contact-page-hero {
    padding-top: clamp(3.15rem, 6.65vw, 4.65rem);
  }

  html.page-contact .contact-kicker,
  html.page-contact .contact-page-title {
    text-align: center;
  }

  html.page-contact .contact-kicker {
    letter-spacing: 0.1em;
    font-size: clamp(1.22rem, 2.75vw, 1.42rem);
  }

  html.page-contact .contact-page-title {
    font-size: clamp(2.05rem, 3.92vw, 2.82rem);
  }

  .contact-page__inner {
    flex-direction: column;
    align-items: center;
    gap: clamp(0.65rem, 1.75vw, 1.25rem);
  }

  .contact-page__form-wrap {
    width: 100%;
    max-width: min(40rem, 100%);
    margin-left: auto;
    margin-right: auto;
  }

  .contact-page__visual {
    justify-content: center;
    width: 100%;
    margin-right: 0;
    margin-top: 0;
    padding-left: 0;
  }

  .contact-page__visual img {
    max-width: min(22rem, 90vw);
    transform: none;
  }

  html.page-contact .contact-page__visual img {
    max-width: min(34rem, 92vw);
    transform: none;
    margin-left: auto;
    margin-right: auto;
  }
}

/*
 * Contact — phablet only (431–767): clear fixed header; centered hero + form rail; Submit.gif centered (≤430 / ≥768 unchanged).
 */
@media (max-width: 767px) and (min-width: 441px) {
  html.page-contact .contact-page-hero {
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(4.05rem, 11.25vw, 5.45rem));
    padding-left: max(1.1rem, calc(var(--page-margin) - 0.35rem));
    padding-right: max(1.1rem, calc(var(--page-margin) - 0.35rem));
    text-align: center;
  }

  html.page-contact .contact-kicker,
  html.page-contact .contact-page-title {
    text-align: center;
  }

  html.page-contact .contact-kicker {
    font-size: clamp(0.96rem, 2.72vw, 1.22rem);
    letter-spacing: 0.11em;
    margin: 0 0 clamp(0.55rem, 1.65vw, 0.78rem);
  }

  html.page-contact .contact-page-title {
    font-size: clamp(1.48rem, 3.2vw, 1.92rem);
    line-height: 1.22;
    margin: 0 0 clamp(1.25rem, 3.25vw, 1.65rem);
  }

  html.page-contact .contact-page-hero,
  html.page-contact .contact-page {
    max-width: min(40rem, 100%);
    margin-left: auto;
    margin-right: auto;
  }

  html.page-contact .contact-page {
    padding-left: max(1.1rem, calc(var(--page-margin) - 0.35rem));
    padding-right: max(1.1rem, calc(var(--page-margin) - 0.35rem));
  }

  html.page-contact .contact-page__inner {
    align-items: center;
    gap: clamp(0.35rem, 1.15vw, 0.65rem);
  }

  html.page-contact .contact-page__form-wrap {
    width: 100%;
    max-width: min(40rem, 100%);
    margin-left: auto;
    margin-right: auto;
  }

  html.page-contact .contact-page__visual {
    justify-content: center;
    width: 100%;
    margin-top: clamp(0.05rem, 0.45vw, 0.28rem);
  }

  html.page-contact .contact-page__visual img {
    max-width: min(17rem, 72vw);
    transform: none;
    margin-left: auto;
    margin-right: auto;
  }

  html.page-contact .contact-form__submit.btn-hero.product-hero__cta {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1.08rem, 2.28vw, 1.32rem);
    padding: clamp(0.56rem, 1.18vw, 0.74rem) clamp(1.44rem, 3.35vw, 1.96rem);
    gap: clamp(0.56rem, 1.26vw, 0.74rem);
    border-radius: clamp(26px, 4.25vw, 32px);
  }

  html.page-contact .contact-form__submit.btn-hero.product-hero__cta .btn-arrow {
    width: clamp(1.28rem, 3.2vw, 1.58rem);
    height: clamp(1.28rem, 3.2vw, 1.58rem);
  }

  html.page-contact .contact-form__submit.btn-hero.product-hero__cta .btn-arrow svg {
    width: clamp(0.9rem, 2.1vw, 1.12rem);
    height: clamp(0.9rem, 2.1vw, 1.12rem);
  }

  html.page-contact .contact-form__submit.btn-hero.product-hero__cta:hover {
    font-size: clamp(1.14rem, 2.35vw, 1.34rem);
  }

  html.page-contact .contact-form__submit.btn-hero.product-hero__cta:hover .btn-arrow svg {
    width: clamp(0.94rem, 2.15vw, 1.16rem);
    height: clamp(0.94rem, 2.15vw, 1.16rem);
  }

  /* Light mint pill uses higher-specificity base/hover font sizes — keep phablet step-down. */
  html.page-contact[data-theme='light'] .contact-form__submit.btn-hero.product-hero__cta {
    font-size: clamp(1.08rem, 2.28vw, 1.32rem);
    padding: clamp(0.56rem, 1.18vw, 0.74rem) clamp(1.44rem, 3.35vw, 1.96rem);
    gap: clamp(0.56rem, 1.26vw, 0.74rem);
    border-radius: clamp(26px, 4.25vw, 32px);
  }

  html.page-contact[data-theme='light'] .contact-form__submit.btn-hero.product-hero__cta:hover {
    font-size: clamp(1.14rem, 2.35vw, 1.34rem);
  }

  html.page-contact[data-theme='light'] .contact-form__submit.btn-hero.product-hero__cta .btn-arrow {
    width: clamp(1.28rem, 3.2vw, 1.58rem);
    height: clamp(1.28rem, 3.2vw, 1.58rem);
  }

  html.page-contact[data-theme='light'] .contact-form__submit.btn-hero.product-hero__cta .btn-arrow svg {
    width: clamp(0.9rem, 2.1vw, 1.12rem);
    height: clamp(0.9rem, 2.1vw, 1.12rem);
  }

  html.page-contact[data-theme='light'] .contact-form__submit.btn-hero.product-hero__cta:hover .btn-arrow svg {
    width: clamp(0.94rem, 2.15vw, 1.16rem);
    height: clamp(0.94rem, 2.15vw, 1.16rem);
  }
}

/*
 * Contact — ≤430 only (contact.html): body handles L/R like other pages (no extra hero/page horizontal padding);
 * kicker — smaller type + tighter tracking; slightly smaller CONTACT US pill vs base .btn-hero (phablet 431–767 unchanged).
 */
@media (max-width: 440px) {
  html.page-contact .contact-page-hero,
  html.page-contact .contact-page {
    /* Body gutter + a bit more left inset on phones (drops contact-only max() side padding from base). */
    padding-left: clamp(0.55rem, 3.85vw, 1.05rem);
    padding-right: clamp(0.55rem, 3.85vw, 1.05rem);
    box-sizing: border-box;
  }

  html.page-contact .contact-page-hero {
    text-align: left;
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(1.95rem, 5.55vw, 2.85rem));
  }

  html.page-contact .contact-page-title {
    text-align: left;
    font-size: calc(clamp(1.96rem, 3.68vw, 2.62rem) - 1px);
  }

  html.page-contact .contact-kicker {
    text-align: left;
    font-size: clamp(0.88rem, 2.35vw, 1.05rem);
    letter-spacing: 0.07em;
  }

  html.page-contact .contact-page__form-wrap {
    text-align: left;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  html.page-contact .contact-form {
    text-align: left;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* First/last row: ensure one column + full-width cells so underlines span the rail (base grid is 1fr 1fr until ≤540px). */
  html.page-contact .contact-form-row {
    grid-template-columns: 1fr;
    width: 100%;
  }

  html.page-contact .contact-form-row > div {
    min-width: 0;
    width: 100%;
  }

  html.page-contact .contact-page__inner {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
  }

  html.page-contact .contact-page__visual {
    justify-content: flex-start;
  }

  html.page-contact .contact-page__visual img {
    margin-left: 0;
    margin-right: 0;
  }

  html.page-contact .contact-form__submit.btn-hero.product-hero__cta,
  html.page-contact[data-theme='light'] .contact-form__submit.btn-hero.product-hero__cta {
    font-size: clamp(1.06rem, 2.28vw, 1.32rem);
    padding: clamp(0.52rem, 1.12vw, 0.66rem) clamp(1.28rem, 3.05vw, 1.82rem);
    gap: clamp(0.52rem, 1.15vw, 0.66rem);
    border-radius: clamp(25px, 4.1vw, 31px);
    margin-top: clamp(0.95rem, 2.45vw, 1.55rem);
  }

  html.page-contact .contact-form__submit.btn-hero.product-hero__cta::before,
  html.page-contact[data-theme='light'] .contact-form__submit.btn-hero.product-hero__cta::before {
    border-radius: clamp(25px, 4.1vw, 31px);
  }

  html.page-contact .contact-form__submit.btn-hero.product-hero__cta:hover,
  html.page-contact[data-theme='light'] .contact-form__submit.btn-hero.product-hero__cta:hover {
    font-size: clamp(1.1rem, 2.35vw, 1.36rem);
  }

  html.page-contact .contact-form__submit.btn-hero.product-hero__cta .btn-arrow,
  html.page-contact[data-theme='light'] .contact-form__submit.btn-hero.product-hero__cta .btn-arrow {
    width: clamp(1.26rem, 3.12vw, 1.56rem);
    height: clamp(1.26rem, 3.12vw, 1.56rem);
  }

  html.page-contact .contact-form__submit.btn-hero.product-hero__cta .btn-arrow svg,
  html.page-contact[data-theme='light'] .contact-form__submit.btn-hero.product-hero__cta .btn-arrow svg {
    width: clamp(0.9rem, 2.1vw, 1.03rem);
    height: clamp(0.9rem, 2.1vw, 1.03rem);
  }

  html.page-contact .contact-form__submit.btn-hero.product-hero__cta:hover .btn-arrow svg,
  html.page-contact[data-theme='light'] .contact-form__submit.btn-hero.product-hero__cta:hover .btn-arrow svg {
    width: clamp(0.95rem, 2.18vw, 1.07rem);
    height: clamp(0.95rem, 2.18vw, 1.07rem);
  }
}

html.page-contact .contact-form label:not(.contact-form__check) {
  display: block;
  font-family: 'Inter Tight', var(--font);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #fff;
  margin-bottom: 0.3rem;
}

html.page-contact .contact-form__legend {
  display: block;
  width: 100%;
  padding: 0;
  font-family: 'Inter Tight', var(--font);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #fff;
  margin-bottom: 0.45rem;
}

html.page-contact .contact-form .req {
  color: var(--government-kicker);
  -webkit-text-fill-color: var(--government-kicker);
}

html.page-contact .contact-form input[type='text'],
html.page-contact .contact-form input[type='email'],
html.page-contact .contact-form input[type='url'] {
  width: 100%;
  padding: 0.5rem 0 0.82rem;
  margin-bottom: 1.35rem;
  font-family: 'Inter Tight', var(--font);
  font-size: 1.3rem;
  font-weight: 500;
  color: #fff;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.92);
  border-radius: 0;
  box-sizing: border-box;
}

html.page-contact .contact-form input::placeholder {
  color: rgba(248, 250, 252, 0.4);
  font-weight: 500;
}

html.page-contact .contact-form input:focus {
  outline: none;
  border-bottom-color: #fff;
  border-bottom-width: 2px;
}

html.page-contact .contact-form textarea {
  width: 100%;
  min-height: 6rem;
  padding: 0.5rem 0 0.82rem;
  margin-bottom: 1.35rem;
  font-family: 'Inter Tight', var(--font);
  font-size: 1.3rem;
  font-weight: 500;
  color: #fff;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.92);
  border-radius: 0;
  resize: vertical;
  box-sizing: border-box;
}

html.page-contact .contact-form textarea::placeholder {
  color: rgba(248, 250, 252, 0.4);
  font-size: 1.15rem;
  font-weight: 400;
}

html.page-contact .contact-form textarea:focus {
  outline: none;
  border-bottom-color: #fff;
  border-bottom-width: 2px;
}

html.page-contact .contact-form__fieldset {
  border: none;
  padding: 0;
  margin: 0 0 0.85rem;
  min-width: 0;
}

html.page-contact .contact-form__checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 1.75rem;
}

html.page-contact .contact-form__check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Inter Tight', var(--font);
  font-size: 1.12rem;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  margin: 0;
  line-height: 1.35;
}

html.page-contact .contact-form__check input {
  width: auto;
  margin: 0;
  flex-shrink: 0;
  accent-color: #aafff0;
}

html.page-contact .contact-form__hint {
  margin: 0.5rem 0 0;
  font-family: 'Inter', var(--font);
  font-size: 0.8rem;
  font-style: italic;
  font-weight: 400;
  color: rgba(248, 250, 252, 0.55);
  line-height: 1.45;
}

/* Match product / what-we-aren’t hero CTA (.product-hero__cta.btn-hero + light mint block above) */
html.page-contact .contact-form__submit.btn-hero.product-hero__cta {
  margin-top: clamp(0.35rem, 1.25vw, 1.1rem);
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

html.page-contact .contact-form__submit.btn-hero.product-hero__cta .btn-arrow {
  position: relative;
  z-index: 1;
}

html.page-contact .contact-form__submit.btn-hero.product-hero__cta:focus-visible {
  outline: 2px solid #0a0a0a;
  outline-offset: 3px;
}

/* Contact — same tablet / short-landscape band as hero + form rail above (centered submit). */
@media (max-width: 900px) and (min-width: 768px) and (orientation: portrait), (min-width: 800px) and (max-width: 904px) and (orientation: landscape), (min-width: 905px) and (max-width: 1200px) and (orientation: landscape) and (max-height: 900px) {
  html.page-contact .contact-form__hint {
    margin: 0.5rem 0 clamp(1.05rem, 2.45vw, 1.65rem);
  }

  html.page-contact .contact-form__submit.btn-hero.product-hero__cta {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: clamp(1.2rem, 2.85vw, 1.9rem);
  }
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2.5rem;
}

@media (max-width: 540px) {
  .contact-form-row {
    grid-template-columns: 1fr;
  }

  html.page-contact .contact-form__checkbox-grid {
    grid-template-columns: 1fr;
  }
}

/* Deepfake problem / not problem */
.page-problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .page-problem-grid {
    grid-template-columns: 1fr;
  }
}

.page-problem-box h3 {
  font-family: 'Azeret Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 1rem;
}

.page-problem-box ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Legal pages (Terms, Privacy) */
main#main.page-main:has(.legal-doc) {
  padding-top: clamp(6.75rem, 12vw, 9rem);
}

.legal-doc {
  max-width: min(42rem, 100%);
  margin: 0 auto;
  padding: 0 var(--page-margin) clamp(3rem, 6vw, 5rem);
  font-family: 'Open Sans', var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
}

/* Legal — phablet only (431–767): space first heading under fixed header (privacy.html / terms-of-service.html). */
@media (max-width: 767px) and (min-width: 441px) {
  main#main.page-main .legal-doc {
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(5.9rem, 16vw, 7.4rem));
  }
}

.legal-doc h1 {
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 500;
  color: var(--text);
  margin: 0 0 0.35rem;
  line-height: 1.2;
}

.legal-doc .legal-updated {
  font-family: 'Open Sans', var(--font);
  font-size: 0.95rem;
  color: var(--teal);
  margin: 0 0 2rem;
}

.legal-doc .legal-lead {
  margin: 0 0 1.5rem;
  color: var(--text-muted);
}

.legal-doc h2 {
  font-family: 'Inter Tight', var(--font);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  margin: 2.25rem 0 0.65rem;
  line-height: 1.35;
  border-top: 1px solid var(--nav-mobile-divider);
  padding-top: 2rem;
}

.legal-doc h2:first-of-type {
  margin-top: 2rem;
}

.legal-doc h3 {
  font-family: 'Inter Tight', var(--font);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 1.25rem 0 0.5rem;
  line-height: 1.35;
}

.legal-doc p {
  margin: 0 0 1rem;
}

.legal-doc ul,
.legal-doc ol {
  margin: 0 0 1.25rem;
  padding-left: 1.35rem;
}

.legal-doc li {
  margin-bottom: 0.4rem;
}

.legal-doc a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-doc a:hover {
  color: #79ffea;
}

.legal-doc strong {
  color: var(--text);
  font-weight: 600;
}

/* —— Light theme (toggle sets data-theme="light" on <html>) —— */
html[data-theme='light'] {
  color-scheme: light;
  --bg: #f0f3f8;
  --bg-alt: #e2e8f0;
  --text: #0f172a;
  --text-muted: #475569;
  --border: #cbd5e1;
  --accent: #0f172a;
  --btn-bg: #0f172a;
  --btn-text: #fafafa;
  --teal: #0d9488;
  --teal-dim: rgba(13, 148, 136, 0.14);
  --nav-link: #0f172a;
  --nav-link-hover: #0f7668;
  --nav-active: #0f172a;
  --nav-dd-bg: rgba(255, 255, 255, 0.96);
  --nav-dd-border: rgba(15, 23, 42, 0.12);
  --nav-mobile-divider: rgba(15, 23, 42, 0.1);
  --nav-mobile-row: rgba(15, 23, 42, 0.07);
  --nav-drawer-grad-1: rgba(255, 255, 255, 0.72);
  --nav-drawer-grad-2: rgba(248, 250, 252, 0.84);
  --nav-drawer-grad-3: rgba(241, 245, 249, 0.9);
  --nav-toggle-bar: #0f172a;
  --header-border: rgba(15, 23, 42, 0.14);
  --header-shadow: 0 2px 24px rgba(15, 23, 42, 0.07), 0 0 0 1px rgba(15, 23, 42, 0.06);
  --hero-tagline: #0f172a;
  --hero-line: #000;
  --definition-trigger-fg: #0f172a;
  --government-kicker: #05575c;
  --cta-title: #0f172a;
  --cta-line: #0f172a;
  --product-hero-bg-a: #eef2f7;
  --product-hero-bg-b: #ecf0f6;
  --product-hero-bg-c: #e9eef4;
  --product-hero-bg-d: #e6ecf2;
  --product-hero-bg-e: #e2e8f0;
}

/* Light: text link hovers match header nav (--nav-link-hover) */
html[data-theme='light'] .site-footer-links a:hover,
html[data-theme='light'] .site-footer-mobile-stack a:hover,
html[data-theme='light'] .site-footer-legal-left a:hover {
  color: var(--nav-link-hover);
  -webkit-text-fill-color: var(--nav-link-hover);
}

html[data-theme='light'] .site-footer-icon-link:hover {
  color: var(--nav-link-hover);
  border-color: var(--nav-link-hover);
}

html[data-theme='light'] .legal-doc a:hover {
  color: var(--nav-link-hover);
}

html[data-theme='light'] .article-card--has-thumb:hover h2 {
  color: var(--nav-link-hover);
  -webkit-text-fill-color: var(--nav-link-hover);
}

html.page-blog-post[data-theme='light'] .blog-post-body a:hover {
  color: var(--nav-link-hover);
}

html.page-blog-post[data-theme='light'] .blog-post-download:hover,
html.page-blog-post[data-theme='light'] .blog-post-download:hover .blog-post-download__icon,
html.page-blog-post[data-theme='light'] .blog-post-download:hover .blog-post-download__sub,
html.page-blog-post[data-theme='light'] .blog-post-download:hover .blog-post-download__action {
  color: var(--nav-link-hover);
}

html[data-theme='light'] .hero-graphic-layer .hero-graphic {
  mix-blend-mode: multiply;
  opacity: 0.9;
  filter: brightness(1.1) contrast(0.95);
}

html[data-theme='light'] .hero-tagline::before {
  height: 2px;
}

html[data-theme='light'] .hero-trusted {
  color: var(--government-kicker);
  -webkit-text-fill-color: var(--government-kicker);
}

/* Index only: <main id="main"> has no .page-main — light-mode --btn-text is for dark pills site-wide */
html[data-theme='light'] main#main:not(.page-main) .btn-hero,
html[data-theme='light'] main#main:not(.page-main) .btn-hero:hover {
  color: #000;
  -webkit-text-fill-color: #000;
}

/* Header TAP LOGIN: mint pill keeps dark text in light theme (same as hero .btn-hero) */
html[data-theme='light'] .nav-tap-login.btn-hero,
html[data-theme='light'] .nav-tap-login.btn-hero:hover {
  color: #000;
  -webkit-text-fill-color: #000;
}

html[data-theme='light'] main#main:not(.page-main) .definition-trigger,
html[data-theme='light'] main#main:not(.page-main) .definition-trigger:hover {
  color: #000;
  -webkit-text-fill-color: #000;
  border: 0.5px solid #0a0e17;
}

html:not([data-theme='light']) main#main:not(.page-main) .definition-trigger,
html:not([data-theme='light']) main#main:not(.page-main) .definition-trigger:hover {
  border: 0.5px solid #79ffea;
}

html[data-theme='light'] main#main:not(.page-main) .definition-trigger-icon {
  color: var(--government-kicker);
}

html[data-theme='light'] main#main:not(.page-main) .definition-trigger:hover .definition-trigger-icon {
  color: var(--government-kicker);
}

/* Home promo SVGs (Spiral / Donut / Net): light assets are authored for pale bg — render flat, no dark-mode blend */
html[data-theme='light'] .section-csam-graphic-stack .section-csam-spiral-layer.theme-img--light,
html[data-theme='light'] .section-deepfake-graphic-stack .section-deepfake-donut-layer.theme-img--light,
html[data-theme='light'] .section-dashboards-graphic-stack .section-dashboards-net-layer.theme-img--light {
  mix-blend-mode: normal;
  opacity: 1;
  filter: none;
}

/* Promo orb glow (behind Orb.gif) — light: radial from base (dark → mint → white at crown); soft base vignette */
html[data-theme='light'] .section-csam-graphic-stack .section-csam-orb-glow,
html[data-theme='light'] .section-deepfake-graphic-stack .section-deepfake-orb-glow,
html[data-theme='light'] .section-dashboards-graphic-stack .section-dashboards-orb-glow {
  opacity: 0.86;
  background:
    radial-gradient(ellipse 100% 38% at 50% 100%, rgba(62, 145, 135, 0.042) 0%, transparent 65%),
    radial-gradient(
      ellipse 125% 108% at 50% 100%,
      #3cb0a2 0%,
      #4ec1b2 10%,
      #64d4c6 24%,
      #82e4d6 36%,
      #a2f0e6 46%,
      #c2f8f0 56%,
      #dcfbf4 66%,
      rgba(236, 252, 249, 0.58) 76%,
      rgba(248, 255, 253, 0.34) 84%,
      rgba(255, 255, 255, 0.16) 92%,
      transparent 100%
    );
  box-shadow:
    inset 0 10px 22px rgba(252, 255, 254, 0.32),
    inset 0 4px 16px rgba(255, 255, 255, 0.36),
    inset 0 -12px 24px rgba(62, 138, 130, 0.04);
}

html[data-theme='light'] .product-hero__dot {
  mix-blend-mode: multiply;
  opacity: 0.2;
}

/* Light: Solutions flyout + CSAM panel — same frosted glass as index hero cards */
html[data-theme='light'] .nav-dropdown-menu,
html[data-theme='light'] .definition-dropdown-panel {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(14px) saturate(168%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(168%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22),
    0 4px 28px rgba(15, 23, 42, 0.04) !important;
}

/* Dark: Solutions flyout + CSAM panel — same glass chrome as hero cards / header */
html:not([data-theme='light']) .nav-dropdown-menu,
html:not([data-theme='light']) .definition-dropdown-panel {
  background: transparent !important;
  border: 1px solid var(--header-border) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  box-shadow: var(--header-shadow) !important;
}

/* Hamburger (≤1280): Solutions accordion — no flyout card; indent line only (desktop flyout unchanged). */
@media (max-width: 1280px) {
  .nav-list.is-open .nav-dropdown-menu {
    background: transparent !important;
    border: none !important;
    border-left: 1px solid var(--nav-mobile-divider) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
}

/* Contact form (wireframe) — dark-theme whites → theme tokens in light mode */
html.page-contact[data-theme='light'] .contact-form label:not(.contact-form__check),
html.page-contact[data-theme='light'] .contact-form__legend {
  color: var(--text);
}

html.page-contact[data-theme='light'] .contact-form input[type='text'],
html.page-contact[data-theme='light'] .contact-form input[type='email'],
html.page-contact[data-theme='light'] .contact-form input[type='url'] {
  color: var(--text);
  border-bottom-color: rgba(15, 23, 42, 0.28);
}

html.page-contact[data-theme='light'] .contact-form input::placeholder,
html.page-contact[data-theme='light'] .contact-form textarea::placeholder {
  color: rgba(15, 23, 42, 0.42);
}

html.page-contact[data-theme='light'] .contact-form input:focus,
html.page-contact[data-theme='light'] .contact-form textarea:focus {
  border-bottom-color: var(--teal);
}

html.page-contact[data-theme='light'] .contact-form textarea {
  color: var(--text);
  border-bottom-color: rgba(15, 23, 42, 0.28);
}

html.page-contact[data-theme='light'] .contact-form__check {
  color: var(--text);
}

html.page-contact[data-theme='light'] .contact-form__hint {
  color: rgba(15, 23, 42, 0.5);
}

html.page-contact[data-theme='light'] .contact-page__visual::before {
  left: calc(50% + clamp(1rem, 2.25vw, 2.5rem));
  width: min(92%, 36rem);
  height: min(86%, 44rem);
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse 68% 62% at 56% 48%,
    rgba(8, 72, 68, 0.08) 0%,
    rgba(13, 116, 108, 0.04) 40%,
    transparent 72%
  );
}

/* Promo section headings / CSAM CTA were hardcoded for dark bg — fix contrast in light mode */
html[data-theme='light'] .section-csam-title,
html[data-theme='light'] .section-dashboards-title,
html[data-theme='light'] .section-deepfake-title {
  color: #000;
}

html[data-theme='light'] .section-csam-title::before,
html[data-theme='light'] .section-dashboards-title::before,
html[data-theme='light'] .section-deepfake-title::before {
  background: #000;
  height: 2px;
}

html[data-theme='light'] .btn-csam-started {
  color: #000;
  border-color: rgba(15, 23, 42, 0.28);
  background: var(--bg-alt);
}

html[data-theme='light'] .btn-csam-started .btn-arrow {
  color: #000;
}

html[data-theme='light'] .btn-csam-started:hover {
  background: #334155;
  color: #fff;
  border-color: #334155;
  -webkit-text-fill-color: #fff;
}

html[data-theme='light'] .btn-csam-started:hover .btn-arrow {
  color: #fff;
}

html[data-theme='light'] .btn-csam-started:hover::before {
  mix-blend-mode: overlay;
  opacity: 0.28;
}

/* Light: same family as home promo — slate pill + outline hover (inverse of .btn-csam-started) */
html[data-theme='light'] .btn-deepfake-started {
  background: #334155;
  color: #fff;
  border-color: #334155;
  -webkit-text-fill-color: #fff;
}

html[data-theme='light'] .btn-deepfake-started .btn-arrow {
  color: #fff;
}

html[data-theme='light'] .btn-deepfake-started:hover {
  background: var(--bg-alt);
  color: #000;
  border-color: rgba(15, 23, 42, 0.28);
  -webkit-text-fill-color: #000;
}

html[data-theme='light'] .btn-deepfake-started:hover .btn-arrow {
  color: #000;
}

html[data-theme='light'] .btn-deepfake-started:hover::before {
  mix-blend-mode: multiply;
  opacity: 0.32;
}

/* Light mode — site-wide: hardcoded white / near-white / clip-gradient copy → black */
html[data-theme='light'] .product-hero__title,
html[data-theme='light'] .product-hero__sub {
  color: #000;
  -webkit-text-fill-color: #000;
}

html[data-theme='light'] .product-hero__title {
  filter: none;
}

html[data-theme='light'] .product-hero.product-hero--deepfake .product-hero__title--deepfake,
html[data-theme='light'] .what-not-hero .product-hero__title.product-hero__title--deepfake,
html[data-theme='light'] .what-not-hero .what-not-hero__heading-text {
  background-image: none;
  background-size: auto;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #000;
  color: #000;
  animation: none;
}

html[data-theme='light'] .product-hero__deepfake-line {
  color: #000;
  -webkit-text-fill-color: #000;
  filter: none;
}

html[data-theme='light'] .product-hero--deepfake .product-hero__gradient,
html[data-theme='light'] .product-hero--csam .product-hero__gradient {
  /* Light CSAM + deepfake heroes: same wash as “A One-Time API Plug-In” (main product section → var(--bg)) */
  background: var(--bg);
}

html[data-theme='light'] .product-hero--deepfake .product-hero__blobs,
html[data-theme='light'] .product-hero--csam .product-hero__blobs {
  display: block;
}

html[data-theme='light'] .product-hero--deepfake .product-hero__blob,
html[data-theme='light'] .product-hero--csam .product-hero__blob {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  aspect-ratio: 1;
  transform-origin: 50% 50%;
}

/* NW — teal-weighted cyan (light product heroes) */
html[data-theme='light'] .product-hero--deepfake .product-hero__blob:nth-child(1),
html[data-theme='light'] .product-hero--csam .product-hero__blob:nth-child(1) {
  width: min(56vw, 520px);
  height: auto;
  left: -18%;
  top: -22%;
  background:
    radial-gradient(circle at 38% 40%, rgba(96, 212, 216, 0.66) 0%, rgba(96, 212, 216, 0.23) 42%, transparent 62%),
    radial-gradient(circle at 62% 58%, rgba(32, 168, 178, 0.54) 0%, rgba(32, 168, 178, 0.15) 46%, transparent 64%);
  animation: deepfake-hero-blob-a 24s ease-in-out infinite;
  animation-delay: -3s;
}

/* NE */
html[data-theme='light'] .product-hero--deepfake .product-hero__blob:nth-child(2),
html[data-theme='light'] .product-hero--csam .product-hero__blob:nth-child(2) {
  width: min(50vw, 460px);
  height: auto;
  right: -12%;
  top: -4%;
  background:
    radial-gradient(circle at 48% 42%, rgba(128, 222, 224, 0.68) 0%, rgba(128, 222, 224, 0.2) 44%, transparent 62%),
    radial-gradient(circle at 44% 68%, rgba(38, 182, 188, 0.5) 0%, rgba(38, 182, 188, 0.17) 48%, transparent 64%);
  animation: deepfake-hero-blob-b 28s ease-in-out infinite;
  animation-delay: -8s;
}

/* SE */
html[data-theme='light'] .product-hero--deepfake .product-hero__blob:nth-child(3),
html[data-theme='light'] .product-hero--csam .product-hero__blob:nth-child(3) {
  width: min(54vw, 500px);
  height: auto;
  right: -6%;
  bottom: -20%;
  background:
    radial-gradient(circle at 55% 48%, rgba(26, 172, 184, 0.62) 0%, rgba(26, 172, 184, 0.19) 44%, transparent 64%),
    radial-gradient(circle at 32% 58%, rgba(72, 200, 208, 0.48) 0%, rgba(72, 200, 208, 0.13) 50%, transparent 62%);
  animation: deepfake-hero-blob-c 21s ease-in-out infinite;
  animation-delay: -1.5s;
}

/* W — copy side */
html[data-theme='light'] .product-hero--deepfake .product-hero__blob:nth-child(4),
html[data-theme='light'] .product-hero--csam .product-hero__blob:nth-child(4) {
  width: min(44vw, 400px);
  height: auto;
  left: -10%;
  top: 38%;
  background:
    radial-gradient(circle at 50% 44%, rgba(36, 180, 190, 0.58) 0%, rgba(36, 180, 190, 0.17) 46%, transparent 62%),
    radial-gradient(circle at 36% 62%, rgba(108, 212, 216, 0.44) 0%, rgba(108, 212, 216, 0.12) 52%, transparent 64%);
  animation: deepfake-hero-blob-d 26s ease-in-out infinite;
  animation-delay: -12s;
}

/* Bottom middle — softer than other blobs */
html[data-theme='light'] .product-hero--deepfake .product-hero__blob:nth-child(5),
html[data-theme='light'] .product-hero--csam .product-hero__blob:nth-child(5) {
  left: 50%;
  bottom: -16%;
  width: min(50vw, 460px);
  height: auto;
  background:
    radial-gradient(circle at 48% 42%, rgba(68, 200, 206, 0.34) 0%, rgba(68, 200, 206, 0.11) 44%, transparent 62%),
    radial-gradient(circle at 52% 62%, rgba(34, 166, 176, 0.28) 0%, rgba(34, 166, 176, 0.075) 50%, transparent 64%);
  animation: deepfake-hero-blob-e 23s ease-in-out infinite;
  animation-delay: -5.5s;
}

html[data-theme='light'] .product-hero--deepfake .product-hero__dots,
html[data-theme='light'] .product-hero--csam .product-hero__dots {
  display: none;
}

html[data-theme='light'] .product-hero--deepfake .product-hero__gif {
  mix-blend-mode: soft-light;
  opacity: 0.9;
  filter: brightness(1.1) saturate(0.99) hue-rotate(-2deg);
}

/* Deepfake Model I/O, CSAM Model I/O + No Hash (light): --bg-alt + mint-tinted grain (tiled Noise.svg overrides the four duotone bands below) */
html[data-theme='light']
  .page-main--product-hero
  > .page-section.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker),
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--csam)
  > .page-section.page-section--duotone-noise {
  background: var(--bg-alt);
}

/* Mint-tinted grain — a touch lighter on --bg-alt */
html[data-theme='light']
  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)::before,
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--csam)
  > .page-section.page-section--duotone-noise::before {
  mix-blend-mode: multiply;
  opacity: 0.095;
  background-image:
    linear-gradient(rgb(198, 236, 228), rgb(198, 236, 228)),
    url('assets/noise-grain.svg');
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 180px 180px;
  background-blend-mode: color, normal;
}

html[data-theme='light']
  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)::after,
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--csam)
  > .page-section.page-section--duotone-noise::after {
  mix-blend-mode: soft-light;
  opacity: 0.065;
  background-image:
    linear-gradient(rgb(244, 252, 250), rgb(244, 252, 250)),
    url('assets/noise-grain.svg');
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 180px 180px;
  background-blend-mode: color, normal;
}

/* Four product duotone bands (light): tiled Noise.svg at all breakpoints — overrides mint wash + grain pseudos above */
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--csam)
  > .page-section.page-section--duotone-noise:has(.page-spec-chart),
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--csam)
  > .page-section.page-section--duotone-noise:has(
    .product-io__heading:not(.product-io__heading--deepfake-kicker)
  ),
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--deepfake)
  > .page-section.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker),
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--deepfake)
  > .page-section.page-section--law-recap.page-section--duotone-noise {
  background-color: transparent;
  background-image: url('assets/light/Noise.svg?v=n3');
  background-repeat: repeat;
  background-size: 256px 256px;
}

html[data-theme='light']
  .page-main--product-hero:has(.product-hero--csam)
  > .page-section.page-section--duotone-noise:has(.page-spec-chart)::before,
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--csam)
  > .page-section.page-section--duotone-noise:has(.page-spec-chart)::after,
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--csam)
  > .page-section.page-section--duotone-noise:has(
    .product-io__heading:not(.product-io__heading--deepfake-kicker)
  )::before,
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--csam)
  > .page-section.page-section--duotone-noise:has(
    .product-io__heading:not(.product-io__heading--deepfake-kicker)
  )::after,
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--deepfake)
  > .page-section.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)::before,
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--deepfake)
  > .page-section.page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)::after,
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--deepfake)
  > .page-section.page-section--law-recap.page-section--duotone-noise::before,
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--deepfake)
  > .page-section.page-section--law-recap.page-section--duotone-noise::after {
  display: none;
}

html[data-theme='light'] .page-section--performance-stats--plexus {
  background: #f0f3f8;
}

html[data-theme='light'] .product-io__heading,
html[data-theme='light'] .page-api-split__title,
html[data-theme='light'] .page-product-duotone-heading {
  background-image: none;
  background-size: auto;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #000;
  color: #000;
}

/* Light deepfake Model I/O kicker — same #05575c + weight as “Join the movement…” (.section-cta-kicker) */
html[data-theme='light']
  .page-main:has(.product-hero--deepfake)
  .product-io__heading.product-io__heading--deepfake-kicker {
  color: var(--government-kicker);
  -webkit-text-fill-color: var(--government-kicker);
  font-weight: 400;
}

/* No Hash (etc.): gradient title rule is more specific than line above — clear fill, solid black type */
html[data-theme='light']
  .page-section--duotone-noise
  .page-inner:not(.product-io)
  .page-product-duotone-heading {
  background: transparent;
  background-image: none;
  background-color: transparent;
  background-size: auto;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #000;
  color: #000;
}

html[data-theme='light'] .page-main:has(.product-hero--deepfake) .page-section--api-split .page-api-split__title {
  background-image: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #000;
  color: #000;
}

html[data-theme='light'] .page-api-split__lead {
  color: #000;
}

/* API plug-in row subtitle — match CTA kicker “Join the movement…” (light: var(--government-kicker)) */
html[data-theme='light']
  .page-section--api-split:not(.page-section--law-recap)
  .page-api-split__copy
  .page-api-split__lead {
  color: var(--government-kicker);
  -webkit-text-fill-color: var(--government-kicker);
}

/* CSAM product (light): No Face / No Hash / performance leads — same kicker as API plug-in subtitle */
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--csam)
  .page-api-split__lead {
  color: var(--government-kicker);
  -webkit-text-fill-color: var(--government-kicker);
}

html[data-theme='light'] .product-io__col-heading {
  color: #000;
  -webkit-text-fill-color: #000;
}

html[data-theme='light'] .product-io__list li {
  color: #000;
}

html[data-theme='light'] .product-io__list li::before {
  color: rgba(0, 0, 0, 0.55);
}

html[data-theme='light'] .product-io__output,
html[data-theme='light'] .product-io__problem-line {
  color: #000;
  -webkit-text-fill-color: #000;
}

html[data-theme='light'] .product-io__rule {
  border-top-color: rgba(0, 0, 0, 0.22);
}

html[data-theme='light']
  .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
  .product-io__rule,
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--csam)
  > .page-section.page-section--duotone-noise
  .product-io__rule {
  border-top-color: #000;
}

html[data-theme='light'] .page-performance-stats__label {
  color: #000;
  text-shadow: none;
}

html[data-theme='light'] .page-performance-stats__value {
  color: #000;
  -webkit-text-fill-color: #000;
  text-shadow: none;
}

html[data-theme='light'] .page-main--product-hero:has(.product-hero--csam)
  .page-section--performance-stats--plexus
  .page-section-title.page-product-duotone-heading,
html[data-theme='light'] .page-main:has(.product-hero--deepfake)
  .page-section--performance-stats--plexus
  .page-section-title.page-product-duotone-heading {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #000;
  color: #000;
}

html[data-theme='light'] .page-section--performance-stats--plexus .page-performance-stats__label {
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.68),
    0 2px 16px rgba(0, 0, 0, 0.55),
    0 5px 32px rgba(0, 0, 0, 0.45),
    0 8px 48px rgba(0, 0, 0, 0.35);
}

html[data-theme='light'] .page-section--performance-stats--plexus .page-performance-stats__value {
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.65),
    0 3px 18px rgba(0, 0, 0, 0.52),
    0 7px 38px rgba(0, 0, 0, 0.42),
    0 10px 56px rgba(0, 0, 0, 0.34);
}

html[data-theme='light'] .hero-title-teal,
html[data-theme='light'] .section-cta-title-gradient {
  background: none;
  background-image: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #000;
  color: #000;
}

html[data-theme='light'] .section-cta-lede {
  color: #000;
}

html[data-theme='light'] .section-csam-subtitle,
html[data-theme='light'] .section-dashboards-subtitle,
html[data-theme='light'] .section-deepfake-subtitle {
  color: #05575c;
  -webkit-text-fill-color: #05575c;
  font-weight: 350;
}

html[data-theme='light'] .section-cta-inner .section-cta-kicker {
  font-weight: 400;
}

html[data-theme='light'] .government-heading__line {
  -webkit-text-fill-color: var(--government-kicker);
  color: var(--government-kicker);
}

html[data-theme='light'] .government-heading__name {
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
}

html[data-theme='light'] .government-text {
  color: #000;
  -webkit-text-fill-color: #000;
}

html[data-theme='light'] .what-not-compare-title,
html[data-theme='light'] .what-not-compare-lead,
html[data-theme='light'] .what-not-compare-lead--second {
  color: #000;
}

html[data-theme='light'] .what-not-compare-card__num,
html[data-theme='light'] .what-not-compare-card__name,
html[data-theme='light'] .what-not-compare-card__label,
html[data-theme='light'] .what-not-compare-card__value {
  color: #000;
}

html[data-theme='light'] .what-not-compare-card {
  border-color: #000;
}

html[data-theme='light'] .what-not-compare-card__rule {
  border-top-color: #000;
}

html[data-theme='light'] .what-not-hash-title,
html[data-theme='light'] .what-not-hash-recall {
  color: #000;
}

/* Hash + Minor+Nudity accordions: match compare cards — rules black in light */
html[data-theme='light'] .what-not-accordion {
  border-top-color: #000;
}

html[data-theme='light'] .what-not-acc-item {
  border-bottom-color: #000;
}

html[data-theme='light'] .what-not-acc__trigger {
  color: #000;
}

html[data-theme='light'] .what-not-acc-item.is-open .what-not-acc__trigger {
  color: #000;
}

html[data-theme='light'] .what-not-acc__body {
  color: #000;
}

html[data-theme='light'] .what-not-acc__dilemma-label {
  color: #000;
}

html[data-theme='light'] .what-not-acc__dilemma-em {
  color: #05575c;
}

html[data-theme='light'] .what-not-acc__body strong {
  color: #000;
}

html[data-theme='light'] .page-spec-chart__head,
html[data-theme='light'] .page-spec-chart__head--hash,
html[data-theme='light'] .page-spec-chart__head--ai {
  color: #000;
  -webkit-text-fill-color: #000;
}

html[data-theme='light'] .page-spec-chart__perf-label,
html[data-theme='light'] .page-spec-chart__pct {
  color: #000;
}

html[data-theme='light'] .page-spec-chart__feature-label {
  color: #000;
}

html[data-theme='light'] .what-not-spec-chart-section .page-spec-chart__check {
  color: #24d819;
}

/* CSAM product — No Hash band chart only (not other duotone sections): deeper lime checks in light */
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--csam)
  .page-section--duotone-noise:has(.page-spec-chart)
  .page-spec-chart__check {
  color: #24d819;
}

/* CSAM “No Hash? No Problem.” — light: tint + grain on bordered box only; __body stays transparent (no ring inside border) */
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--csam)
  .page-spec-chart {
  position: relative;
  border: 1px solid var(--page-spec-chart-line);
  background: rgba(255, 255, 255, 0.3);
}

html[data-theme='light']
  .page-main--product-hero:has(.product-hero--csam)
  .page-spec-chart::before {
  content: none;
  display: none;
}

html[data-theme='light']
  .page-main--product-hero:has(.product-hero--csam)
  .page-spec-chart::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: url('assets/noise-grain.svg') repeat;
  background-size: 180px 180px;
  opacity: 0.04;
}

html[data-theme='light']
  .page-main--product-hero:has(.product-hero--csam)
  .page-spec-chart__body {
  position: relative;
  z-index: 1;
  background: transparent;
}

html[data-theme='light']
  .page-main--product-hero:has(.product-hero--csam)
  .page-spec-chart__body::before,
html[data-theme='light']
  .page-main--product-hero:has(.product-hero--csam)
  .page-spec-chart__body::after {
  content: none;
  display: none;
}

html[data-theme='light'] .what-not-acc__trigger:hover,
html[data-theme='light'] .what-not-acc__trigger:hover .what-not-acc__icon {
  color: var(--nav-link-hover);
}

html[data-theme='light'] .what-not-acc-item.is-open .what-not-acc__trigger:hover,
html[data-theme='light'] .what-not-acc-item.is-open .what-not-acc__trigger:hover .what-not-acc__icon {
  color: var(--nav-link-hover);
}

html.page-blog-post[data-theme='light'] .blog-post-kicker,
html.page-blog-post[data-theme='light'] .blog-post-kicker a {
  color: #000;
}

html.page-blog-post[data-theme='light'] .blog-post-kicker a:hover {
  color: var(--nav-link-hover);
  -webkit-text-fill-color: var(--nav-link-hover);
}

/*
 * What we aren’t — phablet (431–767): hero layout + gutters (cascade tail + !important).
 * Pairs with what-not-landscape-mesh.js — copy/visual nudges stay phablet-scoped at cascade tail.
 * (max-width:767px) and (min-width:431px) only — all other widths unchanged.
 */
@media (max-width: 767px) and (min-width: 441px) {
  html.page-what-we-are-not body {
    --page-margin: clamp(0.65rem, 3vw, 1rem) !important;
    --page-text-inset-left: clamp(0.75rem, 3.35vw, 1.15rem) !important;
  }

  html.page-what-we-are-not .what-not-hero {
    text-align: center !important;
    /* Match ~4682 — tail must not re-tighten top band after eased phablet pass */
    padding-top: calc(
      env(safe-area-inset-top, 0px) + max(clamp(2.35rem, 4.25svh, 3.25rem), clamp(4.25rem, 8.25vw, 6.15rem))
    ) !important;
    padding-bottom: clamp(5.5rem, 10svh, 7.5rem) !important;
  }

  html.page-what-we-are-not .what-not-hero__inner {
    justify-items: center !important;
    padding-left: clamp(0.75rem, 3.35vw, 1.15rem) !important;
    padding-right: clamp(0.75rem, 3.35vw, 1.15rem) !important;
    margin-top: calc(-1 * clamp(1rem, 2.5vw, 2rem)) !important;
  }

  html.page-what-we-are-not .what-not-hero__copy {
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    margin-top: clamp(-7.35rem, -17.25vw, -3.65rem) !important;
    max-width: 100% !important;
  }

  html.page-what-we-are-not .what-not-hero__visual {
    justify-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: clamp(1.25rem, 3.35vw, 2.15rem) 0 0 !important;
    transform: translate(0, clamp(1.05rem, 3.05vw, 2.35rem)) !important;
  }
}

/*
 * Home index — min-width: 1367px only: slight translate so tagline doesn’t crowd footer of hero art.
 * Kept gentle so desktop resize doesn’t pull the row up as sharply; ≤1366px unchanged (phones / tablets).
 */
@media (min-width: 1367px) {
  .hero-landing .hero-bottom {
    transform: translateY(clamp(-0.35rem, -0.55vw, -0.5rem));
  }

  .hero-landing .hero-tagline {
    padding-top: 0.12rem;
  }
}

/*
 * deepfake.html — product hero: wide short viewports ≤767 (landscape or min-aspect-ratio; some emulators mis-report orientation).
 * Index `#deepfake` centering lives in the general ≤767 block above with !important.
 */
@media (max-width: 767px) and (orientation: landscape), (max-width: 767px) and (min-aspect-ratio: 1/1) {
  /* deepfake.html — hero copy: ≤767 phone rules use asymmetric .product-hero__copy padding; phablet band is 431–767 only. */
  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__inner {
    justify-items: center !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__copy.product-hero__copy--deepfake {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    padding-left: clamp(0.75rem, 3.35vw, 1.15rem) !important;
    padding-right: clamp(0.75rem, 3.35vw, 1.15rem) !important;
    max-width: min(36rem, 100%) !important;
    width: min(100%, 36rem) !important;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__title.product-hero__title--deepfake,
  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__deepfake-line,
  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__deepfake-line--semibold {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__visual-inner {
    transform: translateX(0) !important;
    justify-content: center !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__gif {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/*
 * Index home `#deepfake` — cascade tail (max-width: 767px only).
 * Phablet (431–767) uses `main#main:not(.page-main) .section-deepfake .section-deepfake-inner` etc., which beats
 * `#deepfake .section-deepfake-inner` on specificity for properties without !important — layout could stay grid-ish
 * or keep asymmetric gutters. Doubling the stack with `main#main…#deepfake…` wins everywhere ≤767; ≥768 unchanged.
 */
@media (max-width: 767px) {
  main#main:not(.page-main) #deepfake.section.section-deepfake {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    padding-left: clamp(1rem, 4.25vw, 1.65rem) !important;
    padding-right: clamp(1rem, 4.25vw, 1.65rem) !important;
    box-sizing: border-box;
  }

  main#main:not(.page-main) #deepfake .section-deepfake-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-items: center !important;
    text-align: center !important;
    flex: 0 1 min(100%, 36rem) !important;
    grid-template-columns: none !important;
    width: min(100%, 36rem) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(0.65rem, 3.25vw, 1.15rem) !important;
    padding-right: clamp(0.65rem, 3.25vw, 1.15rem) !important;
    box-sizing: border-box;
  }

  main#main:not(.page-main) #deepfake .section-deepfake-graphic {
    order: -1 !important;
    display: flex !important;
    align-self: center !important;
    width: 100% !important;
    max-width: min(30rem, 100%) !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  main#main:not(.page-main) #deepfake .section-deepfake-content {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    padding-left: clamp(0.35rem, 2vw, 0.85rem) !important;
    padding-right: clamp(0.35rem, 2vw, 0.85rem) !important;
    max-width: min(30rem, 100%) !important;
    width: min(100%, 30rem) !important;
    text-align: center !important;
    transform: none !important;
    box-sizing: border-box;
  }

  main#main:not(.page-main) #deepfake .section-deepfake-title {
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  main#main:not(.page-main) #deepfake .section-deepfake-subtitle {
    text-align: center !important;
  }

  main#main:not(.page-main) #deepfake .section-deepfake-body {
    text-align: center !important;
    max-width: min(30rem, 100%) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    box-sizing: border-box;
  }

  main#main:not(.page-main) #deepfake .section-deepfake-content .btn-deepfake-started {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  main#main:not(.page-main) #deepfake .section-deepfake-graphic-stack {
    margin-left: auto !important;
    margin-right: auto !important;
    transform: translate(0, 0.65rem) !important;
  }
}

/*
 * Index `#deepfake` — phablet wide / landscape (431–767, width ≥ height). `orientation: landscape` can disagree with
 * DevTools; min-aspect-ratio catches Surface Duo 720×540. Row flex + centered inner; portrait phablet (tall) unchanged.
 */
@media (max-width: 767px) and (min-width: 441px) and (orientation: landscape),
  (max-width: 767px) and (min-width: 441px) and (min-aspect-ratio: 1/1) {
  main#main:not(.page-main) #deepfake.section.section-deepfake,
  #deepfake.section.section-deepfake {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-left: clamp(1rem, 4.25vw, 1.65rem) !important;
    padding-right: clamp(1rem, 4.25vw, 1.65rem) !important;
    box-sizing: border-box;
  }

  main#main:not(.page-main) #deepfake .section-deepfake-inner,
  #deepfake .section-deepfake-inner {
    flex: 0 1 min(100%, 36rem) !important;
    width: min(100%, 36rem) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    grid-template-columns: none !important;
    box-sizing: border-box;
  }
}

/*
 * Site-wide — iPhone band (≤430px): tighten global gutters on body (index, contact, articles, legal, blog, what-not,
 * product). body padding + .header-wrap + components using var(--page-margin) / var(--page-text-inset-left) pick this up.
 * !important beats product ≤767 `body:has(#main… .product-hero--*)` var overrides. Phablet 431–767 unchanged.
 */
@media (max-width: 440px) {
  body {
    --page-margin: clamp(0.32rem, 2vw, 0.52rem) !important;
    --page-text-inset-left: clamp(0.38rem, 2.25vw, 0.62rem) !important;
  }

  /* Index hero kicker: governments abbr on phones; full “agencies” line hidden (441px+ unchanged). */
  .hero-trusted .hero-trusted__full {
    display: none;
  }

  .hero-trusted .hero-trusted__abbr {
    display: block;
    text-transform: uppercase;
  }

  /*
   * Index home hero — ≤440 only: kicker → title → deck lines → GIF → CTAs.
   * Mirrors 431–767 phablet stack; narrower max widths. Same `min-height` stack as product / What We Aren’t heroes
   * so the hero fills the layout viewport (e.g. DevTools fit-to-window / `svh`) and the government band starts below the fold.
   * Tall narrow phones (e.g. Pro Max) get extra vertical spacing via a separate `(min-height: 844px)` band — not here —
   * so 425×803 keeps the original rhythm.
   */
  main#main:not(.page-main) .hero-landing {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(6.15rem, 17.65vw, 7.95rem));
    /* Space before government band — kept moderate so tagline → CSAM doesn’t read as a huge void (≤430 index only). */
    padding-bottom: clamp(5.15rem, 11.5vw, 6.1rem);
  }

  main#main:not(.page-main) .hero-landing .hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: clamp(0.45rem, 1.5vw, 0.9rem);
  }

  main#main:not(.page-main) .hero-landing .hero-left {
    display: contents;
  }

  main#main:not(.page-main) .hero-landing .hero-right {
    display: none;
  }

  main#main:not(.page-main) .hero-landing .hero-trusted {
    grid-row: 1;
    margin-top: clamp(0.88rem, 2.35vw, 1.35rem);
    margin-bottom: clamp(0.38rem, 1.15vw, 0.58rem);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(0.12rem, 0.9vw, 0.45rem);
    padding-right: clamp(0.12rem, 0.9vw, 0.45rem);
    text-align: center;
    letter-spacing: 0.03em;
    /* −1px vs ≤1024 `clamp(...) - 2.5px` kicker (this band only). */
    font-size: calc(clamp(1.08rem, 2.58vw, 1.73rem) - 2.5px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  main#main:not(.page-main) .hero-landing .hero-title__default {
    display: block;
  }

  main#main:not(.page-main) .hero-landing .hero-title__portrait {
    display: none;
  }

  main#main:not(.page-main) .hero-landing .hero-title-teal {
    grid-row: 2;
    margin: 0 auto;
    margin-bottom: clamp(0.22rem, 0.85vw, 0.48rem);
    padding-left: clamp(0.32rem, 1.15vw, 0.62rem);
    padding-right: clamp(0.32rem, 1.15vw, 0.62rem);
    text-align: center;
    max-width: 100%;
    font-size: calc(clamp(1.52rem, 3.55vw, 1.98rem) - 3px);
    line-height: 1.38;
    text-wrap: balance;
  }

  main#main:not(.page-main) .hero-landing .hero-deck-group {
    grid-row: 3;
    margin: clamp(-0.55rem, -0.05vw, -0.22rem) auto 0;
    padding-left: clamp(0.32rem, 1.15vw, 0.62rem);
    padding-right: clamp(0.32rem, 1.15vw, 0.62rem);
    text-align: center;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  main#main:not(.page-main) .hero-landing .hero-deck-group .hero-deck {
    font-size: calc(clamp(0.94rem, 2.35vw, 1.12rem) + 2px);
    line-height: 1.42;
  }

  main#main:not(.page-main) .hero-landing .hero-deck-group .hero-deck + .hero-deck {
    margin-top: clamp(0.86rem, 1.8vw, 1.25rem);
  }

  main#main:not(.page-main) .hero-landing .hero-buttons {
    grid-row: 5;
    flex-direction: column;
    align-items: stretch;
    align-self: center;
    margin-top: clamp(1.45rem, 2.85vw, 1.95rem);
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    width: 100%;
    max-width: min(17rem, 100%);
    gap: clamp(1.18rem, 3.05vw, 1.62rem);
  }

  main#main:not(.page-main) .hero-landing .hero-inner > .hero-graphic-layer {
    grid-row: 4;
    position: relative;
    z-index: 0;
    width: 100%;
    max-width: min(290px, 92vw);
    margin: clamp(1.35rem, 3.75vw, 1.9rem) auto clamp(1.15rem, 2.65vw, 1.85rem);
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    grid-template-columns: none;
  }

  main#main:not(.page-main) .hero-landing .hero-graphic-layer .hero-graphic {
    grid-column: auto;
    margin: clamp(0.95rem, 2.45vw, 1.28rem) auto 0;
    max-width: min(234px, 79vw);
    width: 100%;
    height: auto;
    transform: none;
    justify-self: center;
  }

  main#main:not(.page-main) .hero-landing .hero-buttons .btn-hero,
  main#main:not(.page-main) .hero-landing .hero-buttons .definition-dropdown {
    width: 100%;
    max-width: 100%;
  }

  main#main:not(.page-main) .hero-landing .hero-buttons .definition-trigger {
    width: 100%;
    justify-content: center;
  }

  main#main:not(.page-main) .hero-landing .hero-inner > .hero-bottom {
    grid-row: 6;
    margin-top: clamp(0.72rem, 3.35vw, 1.28rem);
    margin-left: auto;
    margin-right: auto;
    justify-items: center;
    text-align: center;
  }

  main#main:not(.page-main) .hero-landing .hero-bottom-left {
    padding-left: clamp(0.4rem, 2.25vw, 0.9rem);
    padding-right: clamp(0.4rem, 2.25vw, 0.9rem);
    text-align: center;
  }

  main#main:not(.page-main) .hero-landing .hero-tagline {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    /* −2px vs ≤1024 `clamp(...) + 1px` tagline (this band only). */
    font-size: calc(clamp(1.34rem, 3.08vw, 1.78rem) - 1px);
    line-height: 1.42;
    padding-top: clamp(0.28rem, 1.2vw, 0.62rem);
  }

  /*
   * Index — government tunnel fills the wrap (≤430 only). Two fixes:
   * (1) main#main… + !important beats @media (max-width: 1366px) `main#main… .section-government-tunnel { height: calc(…) }`.
   * (2) Tunnel SVGs use preserveAspectRatio="none" so <img> + object-fit: fill actually stretches (WebKit).
   * 431px+ unchanged by this block.
   */
  main#main:not(.page-main) .home-first-viewport > .section-government-wrap {
    position: relative !important;
    box-sizing: border-box;
    height: auto !important;
    min-height: max(30rem, 33vmin, calc(100vw * (618 / 1922) * 1.45)) !important;
  }

  main#main:not(.page-main) .home-first-viewport .government-heading__line {
    font-size: calc(clamp(0.86rem, 1.8vw, 1.12rem) + 1px);
  }

  main#main:not(.page-main) .home-first-viewport > .section-government-wrap .section-government-tunnel {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    pointer-events: none;
  }

  main#main:not(.page-main) .home-first-viewport > .section-government-wrap .government-tunnel-img {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: fill !important;
    object-position: center !important;
    opacity: 1 !important;
  }

  main#main:not(.page-main) .home-first-viewport > .section-government-wrap #government.section.section-government {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(0.75rem, 2vh, 1.25rem) !important;
    background-image: none !important;
    background-color: transparent !important;
    height: auto !important;
    min-height: max(30rem, 33vmin) !important;
    padding: clamp(1.75rem, 4.5vh, 2.75rem) clamp(0.85rem, 4vw, 1.15rem) !important;
  }

  main#main:not(.page-main) .home-first-viewport > .section-government-wrap .government-heading-wrap,
  main#main:not(.page-main) .home-first-viewport > .section-government-wrap .government-text-wrap {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }

  main#main:not(.page-main) .home-first-viewport .government-text-wrap {
    gap: clamp(1.4rem, 5.25vw, 2.35rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-text {
    margin-bottom: 0;
    font-weight: 400;
  }

  main#main:not(.page-main) .home-first-viewport .government-actions {
    max-width: min(15rem, 86vw);
    gap: clamp(0.45rem, 2.8vw, 0.65rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-csam-started,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-deepfake-started,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero {
    max-width: min(15rem, 86vw);
    min-width: 0;
    padding: clamp(0.44rem, 2.6vw, 0.56rem) clamp(0.85rem, 6vw, 1.15rem);
    font-size: calc(clamp(0.7rem, 3.35vw, 0.8125rem) + 1px);
    border-radius: clamp(0.95rem, 6vw, 1.3rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero:hover {
    font-size: calc(clamp(0.72rem, 3.45vw, 0.84rem) + 1px);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-csam-started .btn-arrow svg,
  main#main:not(.page-main) .home-first-viewport .government-actions .btn-deepfake-started .btn-arrow svg {
    width: clamp(0.72rem, 3.5vw, 0.88rem);
    height: clamp(0.72rem, 3.5vw, 0.88rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero .btn-arrow {
    width: clamp(1.15rem, 3.65vw, 1.28rem);
    height: clamp(1.15rem, 3.65vw, 1.28rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-actions .btn-hero .btn-arrow svg {
    width: clamp(0.72rem, 3.45vw, 0.86rem);
    height: clamp(0.72rem, 3.45vw, 0.86rem);
  }

  /*
   * Index — CSAM / Deepfake / Dashboards promos (≤430 only): hide title rules; stack + center copy, CTAs, art.
   * 431px+ unchanged.
   */
  main#main:not(.page-main) .section-csam-title::before,
  main#main:not(.page-main) .section-dashboards-title::before,
  main#main:not(.page-main) .section-deepfake-title::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
  }

  main#main:not(.page-main) .section-csam .section-csam-inner,
  main#main:not(.page-main) .section-dashboards .section-dashboards-inner {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    box-sizing: border-box;
  }

  main#main:not(.page-main) #deepfake.section.section-deepfake .section-deepfake-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    width: min(100%, 38rem);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  main#main:not(.page-main) .section-csam-title,
  main#main:not(.page-main) .section-deepfake-title {
    align-items: center;
  }

  main#main:not(.page-main) .section-dashboards-title {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  main#main:not(.page-main) .section-csam-content,
  main#main:not(.page-main) .section-dashboards-content,
  main#main:not(.page-main) .section-deepfake-content {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    transform: none;
    width: 100%;
    max-width: min(33rem, calc(100vw - clamp(1.65rem, 7.5vw, 2.45rem)));
    justify-self: center;
    padding-left: clamp(0.4rem, 2vw, 0.85rem);
    padding-right: clamp(0.4rem, 2vw, 0.85rem);
    box-sizing: border-box;
  }

  /* Same kicker size as CSAM / Deepfake (≤1280 ramp); Dashboards-only rules are smaller elsewhere. */
  main#main:not(.page-main) .section-dashboards-subtitle {
    font-size: clamp(calc(1.16rem + 1px), calc(2.18vw + 1px), calc(1.72rem + 1px));
    line-height: 1.38;
  }

  main#main:not(.page-main) .section-csam-subtitle,
  main#main:not(.page-main) .section-deepfake-subtitle,
  main#main:not(.page-main) .section-dashboards-subtitle,
  main#main:not(.page-main) .section-csam-body,
  main#main:not(.page-main) .section-deepfake-body,
  main#main:not(.page-main) .section-dashboards-body {
    text-align: center;
  }

  main#main:not(.page-main) .section-csam-content .btn-csam-started,
  main#main:not(.page-main) .section-dashboards-content .btn-csam-started,
  main#main:not(.page-main) .section-deepfake-content .btn-deepfake-started {
    margin-left: auto;
    margin-right: auto;
  }

  main#main:not(.page-main) .section.section-csam .section-csam-graphic,
  main#main:not(.page-main) .section.section-dashboards .section-dashboards-graphic,
  main#main:not(.page-main) .section.section-deepfake .section-deepfake-graphic {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    transform: none;
  }

  main#main:not(.page-main) .section.section-csam .section-csam-graphic-stack,
  main#main:not(.page-main) .section.section-dashboards .section-dashboards-graphic-stack,
  main#main:not(.page-main) .section.section-deepfake .section-deepfake-graphic-stack {
    margin-left: auto;
    margin-right: auto;
    transform: translate(0, clamp(0.35rem, 1.25vw, 0.75rem));
  }

  main#main:not(.page-main) .section.section-csam,
  main#main:not(.page-main) .section.section-dashboards,
  main#main:not(.page-main) .section.section-deepfake {
    padding-left: clamp(0.88rem, 4vw, 1.45rem);
    padding-right: clamp(0.88rem, 4vw, 1.45rem);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  /* Index — dashboards bottom: slightly under base clamp (≤430 only). */
  main#main:not(.page-main) .section.section-dashboards {
    padding-bottom: calc(clamp(5.45rem, 9.15vw, 6.65rem) - 2.85rem);
  }

  /*
   * CTA band (≤430): lighter top, fuller bottom; cancel base negative `margin-top` so the prior section keeps foot room.
   */
  .section-cta-wrap {
    min-height: clamp(17.5rem, 38vh, 32rem);
    margin-top: 0;
    padding-top: clamp(0.95rem, 2.85vw, 1.55rem);
    padding-bottom: clamp(2.65rem, 6.5vw, 4.35rem);
    padding-left: calc(var(--page-margin) * 2);
    padding-right: calc(var(--page-margin) * 2);
  }

  .section-cta-inner {
    margin: 0 auto;
  }

  /* Index + What We Aren’t — extra top space in the CTA band + nudge inner stack down (≤430 only). */
  main#main:not(.page-main) .cta-footer-stack .section-cta-wrap,
  html.page-what-we-are-not .cta-footer-stack .section-cta-wrap {
    padding-top: clamp(3.15rem, 7.5vw, 4.65rem);
  }

  main#main:not(.page-main) .cta-footer-stack .section-cta-inner,
  html.page-what-we-are-not .cta-footer-stack .section-cta-inner {
    margin: clamp(0.85rem, 2.85vw, 1.55rem) auto 0;
  }

  /*
   * CTA — ≤430 only: kicker/lede −3px vs ≤1280; title −5px; pill nudged smaller.
   * 431px+ unchanged.
   */
  .section-cta-inner .section-cta-kicker {
    font-size: calc(clamp(1.05rem, 2.48vw, 1.62rem) - 3px);
    letter-spacing: 0.1em;
  }

  .section-cta-inner .section-cta-title {
    font-size: calc(clamp(1.58rem, 3.95vw, 2.65rem) - 5px);
  }

  .section-cta-inner .section-cta-lede {
    font-size: calc(clamp(0.88rem, 1.6vw, 1.06rem) - 3px);
  }

  /*
   * Bottom “BOOK A 1:1 CALL” pill — same ramp as product CSAM ≤430 tail (index, what-we-are-not, product CSAM/deepfake).
   * In-page product CTAs (API / No Face / read-more) stay on the product-only rules below.
   */
  .section-cta-inner .btn-hero.section-cta-button,
  html[data-theme='light'] .section-cta-inner .btn-hero.section-cta-button {
    font-size: clamp(0.98rem, 2.08vw, 1.42rem);
    padding: clamp(0.42rem, 1vw, 0.55rem) clamp(1.35rem, 3.5vw, 2.2rem);
    line-height: 1.2;
    gap: clamp(0.5rem, 1.25vw, 0.72rem);
    border-radius: clamp(22px, 4.5vw, 30px);
    align-items: center;
    box-sizing: border-box;
  }

  .section-cta-inner .btn-hero.section-cta-button::before,
  html[data-theme='light'] .section-cta-inner .btn-hero.section-cta-button::before {
    border-radius: clamp(22px, 4.5vw, 30px);
  }

  .section-cta-inner .btn-hero.section-cta-button:hover,
  html[data-theme='light'] .section-cta-inner .btn-hero.section-cta-button:hover {
    font-size: clamp(1.02rem, 2.18vw, 1.48rem);
  }

  .section-cta-inner .btn-hero.section-cta-button .btn-arrow {
    width: clamp(1.14rem, 2.8vw, 1.52rem);
    height: clamp(1.14rem, 2.8vw, 1.52rem);
  }

  .section-cta-inner .btn-hero.section-cta-button .btn-arrow svg {
    width: clamp(0.75rem, 1.72vw, 0.96rem);
    height: clamp(0.75rem, 1.72vw, 0.96rem);
  }

  .section-cta-inner .btn-hero.section-cta-button:hover .btn-arrow svg,
  html[data-theme='light'] .section-cta-inner .btn-hero.section-cta-button:hover .btn-arrow svg {
    width: clamp(0.8rem, 1.82vw, 1.02rem);
    height: clamp(0.8rem, 1.82vw, 1.02rem);
  }

  /* Tighter footer vertical rhythm vs ≤767 (+28px); vars so padding-bottom still resolves. */
  .site-footer {
    padding-top: calc(var(--footer-pad-y) + 6px);
    --footer-pad-bottom: clamp(1.05rem, 2.1vw, 1.7rem);
  }

  .site-footer.site-footer--standalone {
    padding-top: var(--footer-pad-y);
    --footer-pad-bottom: clamp(1.05rem, 2.1vw, 1.7rem);
  }

  html.page-contact .site-footer.site-footer--standalone {
    --footer-pad-bottom: clamp(2.45rem, 5vw, 4.1rem);
  }

  /*
   * CSAM product (product.html) — ≤430px only: hero center + home-primary pill; Model I/O body +1px; output rule;
   * API plug-in (visual above title, centered); No Face 3-across compact cards; chart read-more type; performance title + plexus grid.
   * Deepfake, index, and viewports wider than 430px are unchanged by this block.
   */
  /*
   * CSAM hero ≤430: height policy matches index + site tail (see “First-viewport heroes” below): content + padding only.
   * Scroll-driven fade on `.product-hero__bg` in script.js.
   */
  #main.page-main.page-main--product-hero:has(.product-hero--csam) {
    overflow-x: clip;
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero {
    width: calc(100% + 2 * var(--page-margin)) !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--page-margin)) !important;
    margin-right: calc(-1 * var(--page-margin)) !important;
    box-sizing: border-box;
    height: auto;
    max-height: none;
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(6.15rem, 17.65vw, 7.95rem));
    /* Same rhythm as index hero ≤430 (`15215`) — CSAM had much tighter bottom pad, so tall viewports showed next band sooner */
    padding-bottom: clamp(5.15rem, 11.5vw, 6.1rem);
    padding-left: calc(var(--page-margin) * 1.5);
    padding-right: calc(var(--page-margin) * 1.5);
    overflow-x: clip;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__inner {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(0.5rem, 2.1vw, 1.05rem);
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__copy {
    margin-top: 0;
    text-align: center;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
    width: min(100%, 36rem);
    max-width: 100%;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__title,
  .page-main--product-hero:has(.product-hero--csam) .product-hero__sub {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__title {
    white-space: normal;
  }

  /* “Experience true Visual Detection…” — 1px under H1 scale; ≤430 only (431+ unchanged). TAP excluded. */
  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__title-lede {
    font-size: calc(100% - 1px);
  }

  /* TAP hero lede — sizes live in advertiser-portal ≤430 block (match deepfake hero lines). */

  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__cta.btn-hero,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__cta.btn-hero {
    font-size: calc(clamp(1.2rem, 2.4vw, 1.55rem) - 1px);
    padding: 0.5rem 2.2rem;
    line-height: 1.2;
    gap: 0.65rem;
    border-radius: 28px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    width: 100%;
    max-width: min(17rem, 100%);
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__cta.btn-hero::before,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__cta.btn-hero::before {
    border-radius: 28px;
  }

  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__cta.btn-hero:hover,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__cta.btn-hero:hover {
    font-size: calc(clamp(1.26rem, 2.5vw, 1.62rem) - 1px);
  }

  /* Match index `.hero-buttons .btn-hero .btn-arrow` ring + icon (beats ≤1280 light/dark product hero clamps). */
  .page-main--product-hero:has(.product-hero--csam) .product-hero__cta.btn-hero .btn-arrow,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam)
    .product-hero__cta.btn-hero
    .btn-arrow {
    position: relative;
    z-index: 1;
    width: 1.5rem;
    height: 1.5rem;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid currentColor;
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__cta.btn-hero .btn-arrow svg,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam)
    .product-hero__cta.btn-hero
    .btn-arrow
    svg {
    width: 1rem;
    height: 1rem;
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__cta.btn-hero:hover .btn-arrow,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam)
    .product-hero__cta.btn-hero:hover
    .btn-arrow {
    transform: translateX(0.11rem) scale(1.08);
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__cta.btn-hero:hover .btn-arrow svg,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam)
    .product-hero__cta.btn-hero:hover
    .btn-arrow
    svg {
    width: 1.05rem;
    height: 1.05rem;
    stroke: currentColor;
    stroke-width: 2.1;
  }

  /* Art column: sits under copy with a fixed `gap` on `__inner` (not pinned to the bottom of the viewport). */
  .page-main--product-hero:has(.product-hero--csam) .product-hero__visual {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: clamp(0.3rem, 2.1vw, 0.52rem);
    padding-right: clamp(0.3rem, 2.1vw, 0.52rem);
  }

  /* PNG stack size + nudge: must stay here — this @media (≤430) section appears *after* the product iPhone block (~6932)
   * and was overriding `--ph-illustration-max` with a tiny cap; width/height use `var(--ph-illustration-max)` on `.product-hero__illustration-stack`. */
  .page-main--product-hero:has(.product-hero--csam) .product-hero__visual-inner {
    --ph-illustration-max: min(23.75rem, min(100vw - 1rem, 32dvh));
    min-height: clamp(12.5rem, 29vw, 17rem);
    transform: translate(
      calc(clamp(-0.85rem, -3.25vw, -0.45rem) + 0.72rem),
      clamp(2.15rem, 7.25vw, 4.75rem)
    );
    justify-content: center;
  }

  /* Advertiser Portal stack — no tall min-height on small phones (≤430). */
  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-stack-section__visual-inner {
    min-height: 0;
    padding-block: 0;
  }

  /* Hero feed mock — skip CSAM globe translate / tall min-height (≤430). */
  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-hero-feed__inner.product-hero__visual-inner {
    --ph-illustration-max: min(22.85rem, min(100vw - 1rem, 60vmin));
    min-height: clamp(11.95rem, 45.5vw, 16.55rem);
    transform: translate(0, 0);
    justify-content: center;
  }

  /*
   * TAP hero — ≤430: same shell as CSAM / deepfake ≤430 (First-viewport min-height at EOF wins cascade).
   */
  #main.page-main.page-main--product-hero:has(.product-hero--advertiser-portal) {
    overflow-x: clip;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero.product-hero--advertiser-portal {
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(5.45rem, 15.25vw, 7.15rem));
    padding-bottom: clamp(5.15rem, 11.5vw, 6.1rem);
    overflow-y: hidden;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__inner {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(1.35rem, 3.75vw, 2.15rem);
    min-height: 0;
    padding-top: clamp(2.6rem, 9.5vw, 4.05rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__copy {
    margin-top: 0;
    width: min(100%, 36rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__visual {
    margin-top: clamp(0.92rem, 2.05vw, 1.38rem);
    padding-top: clamp(1.35rem, 3.15vw, 2.1rem);
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__illustration-stack {
    transform: none;
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__list
    li,
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__output {
    font-size: calc(clamp(0.92rem, 2.75vw, 1.08rem) + 1px);
  }

  /* Shorter rule line (width), not stroke — keep 2px border; pull max-width in from the right. */
  .page-main--product-hero:has(.product-hero--csam)
    .page-section--duotone-noise
    .product-io:not(:has(.product-io__heading--deepfake-kicker))
    .product-io__col--output
    .product-io__rule {
    max-width: min(9.5rem, 48%);
    margin-left: auto;
    margin-right: 0;
    border-top-width: 2px;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.32rem, 1.25vw, 0.65rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__copy {
    text-align: center;
    justify-self: center;
    width: 100%;
    max-width: min(34rem, 100%);
    margin-left: auto;
    margin-right: auto;
    padding-top: clamp(0.12rem, 0.65vw, 0.35rem);
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__lead,
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__body {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__cta {
    margin-left: auto;
    margin-right: auto;
    align-self: center;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__visual {
    order: -1;
    justify-content: center;
    justify-self: center;
    margin: clamp(0.25rem, 1.15vw, 0.5rem) auto;
    max-width: min(11.15rem, 76vw);
    transform: none;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--api-split:not(.page-section--law-recap)
    .page-api-split__img {
    max-width: min(10.15rem, 72vw);
    margin-left: auto;
    margin-right: auto;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack
    .page-three-col {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: clamp(0.22rem, 1.35vw, 0.45rem);
    width: 100%;
    max-width: 100%;
    margin-top: clamp(0.85rem, 2.75vw, 1.35rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-feature-card {
    flex: 1 1 0;
    min-width: 0;
    max-width: 33%;
    padding: 0.45rem 0.12rem 0.2rem;
    box-sizing: border-box;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-feature-card {
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-feature-card__img {
    max-width: min(4.85rem, 30vw);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-feature-card h3 {
    font-size: calc(clamp(0.68rem, 2.85vw, 0.82rem) - 1px);
    letter-spacing: 0.065em;
    line-height: 1.28;
    margin-bottom: 0.35rem;
    max-width: 100%;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-feature-card__title span {
    white-space: normal;
  }

  /*
   * Section CTAs (not hero): in-page pills only — bottom-band `.section-cta-inner .btn-hero.section-cta-button` uses the
   * shared ≤430 ramp earlier in this file. Hero `.product-hero__cta` stays on its own tighter scale above.
   */
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section
    .btn-csam-started.page-api-split__cta,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam)
    > .page-section
    .btn-csam-started.page-api-split__cta,
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta.btn-hero,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta.btn-hero {
    font-size: clamp(0.98rem, 2.08vw, 1.42rem);
    padding: clamp(0.42rem, 1vw, 0.55rem) clamp(1.35rem, 3.5vw, 2.2rem);
    line-height: 1.2;
    gap: clamp(0.5rem, 1.25vw, 0.72rem);
    border-radius: clamp(22px, 4.5vw, 30px);
    align-items: center;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--csam) .page-spec-chart-read-more-wrap .btn-csam-started.page-spec-chart-read-more,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam)
    .page-spec-chart-read-more-wrap
    .btn-csam-started.page-spec-chart-read-more {
    font-size: calc(clamp(0.98rem, 2.08vw, 1.42rem) - 3px);
    padding: clamp(0.42rem, 1vw, 0.55rem) clamp(1.35rem, 3.5vw, 2.2rem);
    line-height: 1.2;
    gap: clamp(0.5rem, 1.25vw, 0.72rem);
    border-radius: clamp(22px, 4.5vw, 30px);
    align-items: center;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta.btn-hero::before,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta.btn-hero::before {
    border-radius: clamp(22px, 4.5vw, 30px);
  }

  .page-main--product-hero:has(.product-hero--csam) > .page-section .btn-csam-started.page-api-split__cta::before,
  .page-main--product-hero:has(.product-hero--csam)
    .page-spec-chart-read-more-wrap
    .btn-csam-started.page-spec-chart-read-more::before {
    border-radius: clamp(22px, 4.5vw, 30px);
  }

  .page-main--product-hero:has(.product-hero--csam) > .page-section .btn-csam-started.page-api-split__cta:hover,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam)
    > .page-section
    .btn-csam-started.page-api-split__cta:hover,
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta.btn-hero:hover,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta.btn-hero:hover {
    font-size: clamp(1.02rem, 2.18vw, 1.48rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-spec-chart-read-more-wrap
    .btn-csam-started.page-spec-chart-read-more:hover,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam)
    .page-spec-chart-read-more-wrap
    .btn-csam-started.page-spec-chart-read-more:hover {
    font-size: calc(clamp(1.02rem, 2.18vw, 1.48rem) - 3px);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta.btn-hero
    .btn-arrow {
    width: clamp(1.42rem, 3.35vw, 1.86rem);
    height: clamp(1.42rem, 3.35vw, 1.86rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta.btn-hero
    .btn-arrow
    svg {
    width: clamp(0.96rem, 2.2vw, 1.22rem);
    height: clamp(0.96rem, 2.2vw, 1.22rem);
    transform: translate(0, -0.05rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta.btn-hero:hover
    .btn-arrow
    svg,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--grid-bg.page-section--alt
    .page-no-face-stack__cta.btn-hero:hover
    .btn-arrow
    svg {
    width: clamp(1.02rem, 2.32vw, 1.28rem);
    height: clamp(1.02rem, 2.32vw, 1.28rem);
    transform: translate(0, -0.05rem);
  }

  .page-main--product-hero:has(.product-hero--csam) > .page-section .btn-csam-started.page-api-split__cta .btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(1.42rem, 3.35vw, 1.86rem);
    height: clamp(1.42rem, 3.35vw, 1.86rem);
  }

  .page-main--product-hero:has(.product-hero--csam) > .page-section .btn-csam-started.page-api-split__cta .btn-arrow svg {
    width: clamp(0.96rem, 2.2vw, 1.22rem);
    height: clamp(0.96rem, 2.2vw, 1.22rem);
    transform: translate(-0.02rem, -0.065rem);
  }

  .page-main--product-hero:has(.product-hero--csam) > .page-section .btn-csam-started.page-api-split__cta:hover .btn-arrow svg {
    width: clamp(1.02rem, 2.32vw, 1.28rem);
    height: clamp(1.02rem, 2.32vw, 1.28rem);
    transform: translate(0.1rem, -0.065rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-spec-chart-read-more-wrap
    .btn-csam-started.page-spec-chart-read-more
    .btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(1.28rem, 3.05vw, 1.68rem);
    height: clamp(1.28rem, 3.05vw, 1.68rem);
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-spec-chart-read-more-wrap
    .btn-csam-started.page-spec-chart-read-more
    .btn-arrow
    svg {
    width: clamp(0.88rem, 2.05vw, 1.1rem);
    height: clamp(0.88rem, 2.05vw, 1.1rem);
    transform: translate(-0.02rem, 0);
  }

  .page-main--product-hero:has(.product-hero--csam)
    .page-spec-chart-read-more-wrap
    .btn-csam-started.page-spec-chart-read-more:hover
    .btn-arrow
    svg {
    width: clamp(0.92rem, 2.12vw, 1.14rem);
    height: clamp(0.92rem, 2.12vw, 1.14rem);
    transform: translate(0.1rem, 0);
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-performance-stats__intro
    .page-section-title.page-product-duotone-heading {
    text-align: left;
    margin-left: 0;
    margin-right: auto;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-section--performance-stats__lead,
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-api-split__body.page-section--performance-stats__body {
    text-align: left;
    margin-left: 0;
    margin-right: auto;
    max-width: min(36rem, 100%);
  }

  /*
   * First-viewport heroes — ≤430 only: product + What We Aren’t fill the viewport (padding in-box via
   * `box-sizing: border-box`) so the next band doesn’t peek. Must use `:has(.product-hero--csam|deepfake)` so this
   * beats the looser-but-earlier `min-height: auto` on CSAM portrait ≤767 (`@media (max-width: 767px) and (orientation: portrait)`).
   * Index `.hero-landing` uses the same viewport `min-height` stack in its ≤430 / phablet blocks.
   */
  .page-main--product-hero:has(.product-hero--csam) .product-hero,
  .page-main--product-hero:has(.product-hero--deepfake) .product-hero,
  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero,
  html.page-what-we-are-not .what-not-hero {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
  }

  .page-main--product-hero .product-hero__visual-inner {
    min-height: 0;
  }

  /* Fixed header bar — iPhone band only; 441px+ unchanged. */
  .header-wrap {
    top: 0.65rem;
    padding-left: clamp(0.12rem, 0.85vw, 0.26rem);
    padding-right: clamp(0.12rem, 0.85vw, 0.26rem);
  }

  .header {
    width: 100%;
    max-width: none;
  }

  .nav {
    padding: 0.65rem clamp(0.45rem, 3.5vw, 0.95rem);
    min-height: 0;
  }

  .nav-end {
    gap: clamp(0.65rem, 2.25vw, 0.95rem);
  }

  .nav-logo-img {
    height: 1.28rem;
  }

  .nav-logo-row {
    gap: 0.55rem;
  }

  .nav-tap-login.btn-hero {
    min-height: 2.125rem;
    height: 2.125rem;
    font-size: clamp(0.62rem, 3.1vw, 0.76rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    padding: 0 0.72rem;
    gap: 0.28rem;
  }

  .nav-tap-login.btn-hero:hover {
    font-size: clamp(0.62rem, 3.1vw, 0.76rem);
    font-weight: 450;
  }

  .nav-tap-login.btn-hero .btn-arrow {
    width: 0.95rem;
    height: 0.95rem;
  }

  .nav-tap-login.btn-hero .btn-arrow svg {
    width: 0.55rem;
    height: 0.55rem;
  }

  .nav-tap-login.btn-hero:hover .btn-arrow svg {
    width: 0.58rem;
    height: 0.58rem;
  }

  .theme-toggle {
    --theme-toggle-h: 2.125rem;
    --theme-toggle-pad: 1px;
    --theme-toggle-thumb: calc(var(--theme-toggle-h) - 2 * var(--theme-toggle-pad) - 4px);
  }

  .nav-toggle {
    padding: 0.3rem;
  }

  /* TAP Features card titles — after CSAM No Face ≤430 h3 so advertiser-portal.html keeps mobile scale */
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-feature-card
    h3,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-feature-card__title {
    font-size: calc(clamp(1.1rem, 4.35vw, 1.26rem) + 4px);
    letter-spacing: 0.04em;
    line-height: 1.32;
    max-width: 100%;
  }
}

/*
 * Index — ≤430 portrait only: CSAM dropdown −2px vs base; government kicker/body −1px vs the ≤430 / ≤1024 wins
 * they stack on. ≤430 landscape + 431px+ unchanged.
 */
@media (max-width: 440px) and (orientation: portrait) {
  main#main:not(.page-main) .hero-landing .definition-title {
    font-size: calc(1rem - 2px);
  }

  main#main:not(.page-main) .hero-landing .definition-text {
    font-size: calc(14px - 2px);
  }

  main#main:not(.page-main) .home-first-viewport .government-heading__line {
    font-size: clamp(0.86rem, 1.8vw, 1.12rem);
  }

  main#main:not(.page-main) .home-first-viewport .government-text {
    font-size: calc(clamp(0.96rem, 1.92vw, 1.28rem) - 1px);
  }
}

/*
 * Tall narrow phone (≤430 width + height ≥844px, e.g. Pro Max class):
 * — Index: larger GIF + extra vertical air below the title row + slight `padding-top` nudge (see rules below).
 * — CSAM + Deepfake product heroes: extra `padding-top` / `transform` / `min-height` (and CTA air for CSAM) on top of ≤430 rules.
 * Heights below 844px unchanged.
 */
@media (max-width: 440px) and (min-height: 844px) {
  main#main:not(.page-main) .hero-landing {
    padding-top: calc(
      env(safe-area-inset-top, 0px) + clamp(6.15rem, 17.65vw, 7.95rem) + clamp(0.42rem, 1.15dvh, 1rem)
    );
  }

  main#main:not(.page-main) .hero-landing .hero-title-teal {
    margin-bottom: clamp(0.5rem, calc(0.95vw + 1.45dvh), 2.5rem);
  }

  main#main:not(.page-main) .hero-landing .hero-inner > .hero-graphic-layer {
    max-width: min(312px, 94vw);
    margin: clamp(1.55rem, calc(3.75vw + 1.5dvh), 2.85rem) auto clamp(1.1rem, calc(2.45vw + 0.75dvh), 2.05rem);
  }

  main#main:not(.page-main) .hero-landing .hero-graphic-layer .hero-graphic {
    max-width: min(262px, 84vw);
    margin: clamp(1.05rem, calc(2.45vw + 1.1dvh), 2rem) auto 0;
  }

  main#main:not(.page-main) .hero-landing .hero-deck-group {
    margin-top: clamp(-0.25rem, calc(1.55vw + 0.05dvh), 0.85rem);
  }

  main#main:not(.page-main) .hero-landing .hero-buttons {
    margin-top: clamp(1.85rem, calc(3.85vw + 1.35dvh), 2.75rem);
    gap: clamp(1.18rem, 3.05vw, 1.62rem);
  }

  main#main:not(.page-main) .hero-landing .hero-inner > .hero-bottom {
    margin-top: clamp(0.95rem, calc(3.35vw + 1.65dvh), 2.45rem);
  }

  main#main:not(.page-main) .hero-landing .hero-tagline {
    padding-top: clamp(0.38rem, calc(1.2vw + 1.05dvh), 1.15rem);
  }

  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__inner {
    padding-top: clamp(3.65rem, calc(2.85rem + 3.35dvh), 5.25rem);
  }

  /* Extra air between disclaimer line and CTA (copy column is title → sub → button). */
  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__cta.btn-hero,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__cta.btn-hero {
    margin-top: clamp(1.45rem, calc(3.5vw + 1.85dvh), 3rem);
  }

  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__visual-inner {
    min-height: clamp(13.5rem, calc(29vw + 2.65dvh), 18.5rem);
    transform: translate(
      calc(clamp(-0.85rem, -3.25vw, -0.45rem) + 0.72rem),
      clamp(2.35rem, calc(7.25vw + 1.1dvh), 5.85rem)
    );
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__inner {
    padding-top: clamp(3.65rem, calc(2.85rem + 3.35dvh), 5.25rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__cta.btn-hero,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--deepfake)
    .product-hero__cta.btn-hero {
    margin-top: clamp(1.45rem, calc(3.5vw + 1.85dvh), 3rem);
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__visual-inner {
    min-height: clamp(13.5rem, calc(29vw + 2.65dvh), 18.5rem);
    transform: translate(
      calc(clamp(-0.85rem, -3.25vw, -0.45rem) + 0.72rem),
      clamp(2.35rem, calc(7.25vw + 1.1dvh), 5.85rem)
    );
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__inner {
    padding-top: clamp(2.9rem, calc(2.4rem + 2.35dvh), 4.3rem);
    gap: clamp(1.45rem, calc(3.35vw + 0.95dvh), 2.35rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero {
    margin-top: clamp(1.28rem, calc(3.05vw + 1.15dvh), 2.55rem);
    /* Same TAP ≤430 pill clamps as advertiser-portal hero block (not CSAM home-primary stack). */
    font-size: calc(clamp(0.94rem, 1.88vw, 1.32rem) - 3px);
    white-space: nowrap;
    display: inline-flex;
    width: auto;
    max-width: min(19.25rem, 100%);
    min-width: min(12.15rem, 100%);
    padding: 0.5rem clamp(2.4rem, 6.75vw, 2.7rem);
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero:hover,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero:hover {
    font-size: calc(clamp(0.98rem, 1.98vw, 1.36rem) - 3px);
  }

  /* TAP hero type on Pro Max tall ≤430: same three-line clamps as deepfake (no extra shrink). */

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__visual {
    margin-top: clamp(1.05rem, calc(1.65vw + 0.35dvh), 1.45rem);
    padding-top: clamp(1.5rem, calc(3.15vw + 0.5dvh), 2.25rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-hero-feed__inner.product-hero__visual-inner {
    --ph-illustration-max: min(23.05rem, min(100vw - 0.85rem, 60.5vmin));
    min-height: clamp(13.95rem, calc(37.5vw + 2.65dvh), 19.45rem);
  }

  /* What we aren’t — mesh column: same left nudge as ≤393 Pro tall band (394–430 Pro Max + any ≤430 height ≥844). */
  html.page-what-we-are-not .what-not-hero__visual {
    transform: translateX(calc(clamp(0.45rem, 1.2vw, 1.1rem) - clamp(0.32rem, 1.05vw, 0.68rem)));
  }
}

/*
 * Very narrow portrait — max-width 393px (logical width < 394px), portrait only.
 * e.g. iPhone 16 Pro 393×852. Placed after ≤430 + tall-height rules so overrides here win when both match.
 * Index hero: tall-height (≥844) also matches 393×852 and adds vertical air — compress so kicker→tagline fits one
 * viewport without scrolling past the hero (government may sit just below). 394px+ portrait unchanged here.
 */
@media (max-width: 393px) and (orientation: portrait) {
  main#main:not(.page-main) .hero-landing {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(4.65rem, 12.75vw, 5.65rem));
    padding-bottom: clamp(1.35rem, 3.25dvh, 2.1rem);
  }

  main#main:not(.page-main) .hero-landing .hero-inner {
    gap: clamp(0.28rem, 1vw, 0.55rem);
  }

  main#main:not(.page-main) .hero-landing .hero-trusted {
    margin-top: clamp(0.72rem, 2.35vw, 1.12rem);
    margin-bottom: clamp(0.32rem, 0.95vw, 0.52rem);
    /* −3.5px kicker (−1px vs prior −2.5px; this band only). */
    font-size: calc(clamp(1.08rem, 2.58vw, 1.73rem) - 3.5px);
  }

  main#main:not(.page-main) .hero-landing .hero-title-teal {
    margin-top: clamp(0.38rem, 1.08vw, 0.62rem);
    margin-bottom: clamp(0, 0.42vw, 0.18rem);
    /* −1px vs ≤440 `calc(clamp(...) - 3px)` title (this band only). */
    font-size: calc(clamp(1.52rem, 3.55vw, 1.98rem) - 4px);
  }

  main#main:not(.page-main) .hero-landing .hero-inner > .hero-graphic-layer {
    max-width: min(298px, 95vw);
    margin: clamp(0.88rem, 3.65vw, 1.75rem) auto clamp(0.95rem, 2.15vw, 1.45rem);
  }

  main#main:not(.page-main) .hero-landing .hero-graphic-layer .hero-graphic {
    max-width: min(246px, 82vw);
    margin: clamp(0.72rem, 2.15vw, 1.22rem) auto 0;
  }

  main#main:not(.page-main) .hero-landing .hero-deck-group {
    margin-top: clamp(-0.05rem, calc(2.65vw + 0.05dvh), 1.55rem);
  }

  main#main:not(.page-main) .hero-landing .hero-buttons {
    margin-top: clamp(1.95rem, calc(4.25vw + 1.45dvh), 3.05rem);
    gap: clamp(1.18rem, 3.05vw, 1.62rem);
  }

  /* Matches deck + buttons margin nudges so tagline Y stays fixed. */
  main#main:not(.page-main) .hero-landing .hero-inner > .hero-bottom {
    margin-top: calc(clamp(0.52rem, 2.85vw, 1.08rem) + 1.1rem);
  }

  main#main:not(.page-main) .hero-landing .hero-tagline {
    padding-top: clamp(0.28rem, 1.2vw, 0.62rem);
  }

  /*
   * Index CSAM / Deepfake / Dashboards promos — less inset vs general ≤430 promos (closer to screen edges;
   * ≤393 portrait only).
   */
  main#main:not(.page-main) .section.section-csam,
  main#main:not(.page-main) .section.section-dashboards,
  main#main:not(.page-main) .section.section-deepfake {
    padding-left: clamp(0.58rem, 2.85vw, 1.05rem);
    padding-right: clamp(0.58rem, 2.85vw, 1.05rem);
  }

  /* Promo titles + subtitles — −1px vs ≤1280 / ≤430 stack (≤393 portrait index only). */
  main#main:not(.page-main) .section-csam-title,
  main#main:not(.page-main) .section-deepfake-title {
    font-size: calc(clamp(1.72rem, 3.35vw, 2.62rem) - 1px);
  }

  main#main:not(.page-main) .section-dashboards-title,
  main#main:not(.page-main) .section.section-dashboards .section-dashboards-title {
    font-size: calc(clamp(1.54rem, 3.02vw, 2.36rem) - 1px);
  }

  main#main:not(.page-main) .section-csam-subtitle,
  main#main:not(.page-main) .section-deepfake-subtitle,
  main#main:not(.page-main) .section-dashboards-subtitle,
  main#main:not(.page-main) .section.section-dashboards .section-dashboards-subtitle {
    font-size: calc(clamp(calc(1.16rem + 1px), calc(2.18vw + 1px), calc(1.72rem + 1px)) - 1px);
  }

  /*
   * Index CTA — more `padding-top` / `padding-bottom` on the band; kicker −1px vs ≤430 `calc(… - 3px)` stack
   * (≤393 portrait only).
   */
  main#main:not(.page-main) .cta-footer-stack .section-cta-wrap {
    padding-top: clamp(3.65rem, 8.25vw, 5.25rem);
    padding-bottom: clamp(3.35rem, 7.25vw, 5.05rem);
  }

  main#main:not(.page-main) .cta-footer-stack .section-cta-inner .section-cta-kicker {
    font-size: calc(clamp(1.05rem, 2.48vw, 1.62rem) - 4px);
  }

  /* CSAM product hero (product.html) — H1 −1px vs ≤1280 headline clamp (≤393 portrait only). */
  .page-main--product-hero:has(.product-hero--csam) .product-hero__title {
    font-size: calc(clamp(1.62rem, 3.65vw, 2.68rem) - 1px);
  }
}

/*
 * Same width band as above, shorter portrait height (e.g. Pixel 3 393×786 vs iPhone 16 Pro 393×852): the base
 * ≤393 rules tune for ~844px+ tall phones; here we compress vertical rhythm + cap CTAs gap with `dvh` so kicker→
 * tagline fits the first screen without scrolling; `justify-content: center` balances slack top/bottom in the hero.
 * Portrait heights **821px+** at this width unchanged by this block.
 */
@media (max-width: 393px) and (orientation: portrait) and (max-height: 820px) {
  main#main:not(.page-main) .hero-landing {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    /* Slightly trim top vs prior pass so `justify-content: center` splits slack above + below the stack evenly. */
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(3.85rem, 9.75vw, 4.85rem));
    padding-bottom: clamp(1.15rem, 2.85dvh, 1.8rem);
  }

  main#main:not(.page-main) .hero-landing .hero-inner {
    flex: 0 0 auto;
    gap: clamp(0.18rem, 0.75vw, 0.42rem);
  }

  main#main:not(.page-main) .hero-landing .hero-trusted {
    margin-top: clamp(0.52rem, 1.85vw, 0.92rem);
    margin-bottom: clamp(0.2rem, 0.72vw, 0.42rem);
  }

  main#main:not(.page-main) .hero-landing .hero-title-teal {
    margin-top: clamp(0.22rem, 0.85vw, 0.48rem);
    margin-bottom: clamp(0.05rem, 0.55vw, 0.28rem);
  }

  main#main:not(.page-main) .hero-landing .hero-inner > .hero-graphic-layer {
    max-width: min(272px, 92vw);
    margin: clamp(0.48rem, 2.45vw, 1.12rem) auto clamp(0.72rem, 1.75vw, 1.15rem);
  }

  main#main:not(.page-main) .hero-landing .hero-graphic-layer .hero-graphic {
    max-width: min(218px, 78vw);
    margin: clamp(0.35rem, 1.55vw, 0.82rem) auto 0;
  }

  main#main:not(.page-main) .hero-landing .hero-deck-group {
    margin-top: min(clamp(0.95rem, calc(4.35vw + 0.65dvh), 2.85rem), 12.5dvh);
  }

  main#main:not(.page-main) .hero-landing .hero-buttons {
    margin-top: clamp(1.55rem, calc(3.05vw + 0.85dvh), 1.95rem);
  }

  main#main:not(.page-main) .hero-landing .hero-inner > .hero-bottom {
    margin-top: calc(clamp(0.55rem, 2.85vw, 1.05rem) + 0.85rem);
  }

  main#main:not(.page-main) .hero-landing .hero-tagline {
    padding-top: clamp(0.15rem, 0.85vw, 0.45rem);
  }

}

/*
 * ≤393 portrait + tall height (e.g. iPhone 16 Pro 393×852): kicker/title nudged down; deck + CTAs nudged up.
 * Does not change `.hero-landing` min-height or band padding — only inner margins. Excludes `(max-height: 820px)` stack.
 */
@media (max-width: 393px) and (orientation: portrait) and (min-height: 841px) {
  /* Kicker only: less air under header; tighter kicker→title gap so the title band Y is unchanged. */
  main#main:not(.page-main) .hero-landing .hero-trusted {
    margin-top: clamp(1.78rem, 3.48vw, 2.35rem);
    margin-bottom: 0;
  }

  main#main:not(.page-main) .hero-landing .hero-title-teal {
    margin-top: clamp(0.58rem, 1.25vw, 0.92rem);
    margin-bottom: clamp(0, 0.35vw, 0.12rem);
  }

  main#main:not(.page-main) .hero-landing .hero-deck-group {
    margin-top: clamp(0.22rem, calc(4.15vw + 0.42dvh), 2.85rem);
  }

  main#main:not(.page-main) .hero-landing .hero-buttons {
    margin-top: clamp(1.35rem, calc(3.35vw + 0.95dvh), 2.15rem);
  }

  main#main:not(.page-main) .hero-landing .hero-inner > .hero-bottom {
    margin-top: calc(clamp(0.45rem, 2.75vw, 0.92rem) + 0.55rem);
  }

  main#main:not(.page-main) .hero-landing .hero-tagline {
    padding-top: clamp(0.06rem, 0.72vw, 0.28rem);
  }

  /* CSAM product — API / No Face / No Hash / Performance subtitles (`.page-api-split__lead`): −1px vs ≤1280 scale. */
  .page-main--product-hero:has(.product-hero--csam) .page-api-split__lead {
    font-size: calc(clamp(calc(1.22rem + 1px), calc(2.1vw + 1px), calc(1.62rem + 1px)) - 1px);
  }

  /* Bottom CTA kicker — product pages: −1px vs ≤430 (−3px); index home uses ≤393 portrait −4px (no extra shrink here). */
  .page-main .cta-footer-stack .section-cta-inner .section-cta-kicker {
    font-size: calc(clamp(1.05rem, 2.48vw, 1.62rem) - 4px);
  }

  /* Contact hero kicker — −1px vs ≤430 `clamp(0.88rem, 2.35vw, 1.05rem)` (contact.html only). */
  html.page-contact .contact-kicker {
    font-size: calc(clamp(0.88rem, 2.35vw, 1.05rem) - 1px);
  }

  /* What we aren’t — mesh column: left vs base `translateX(clamp(0.45rem, …))` (stronger nudge than first pass). */
  html.page-what-we-are-not .what-not-hero__visual {
    transform: translateX(calc(clamp(0.45rem, 1.2vw, 1.1rem) - clamp(0.32rem, 1.05vw, 0.68rem)));
  }
}

/*
 * TAP advertiser portal hero — iPhone 14/15 Pro portrait (~393×852): less top padding so the feed stack
 * is fully visible before scroll. Overrides ≤430 + tall-height (≥844) TAP air that also matches 393×852.
 * Layout at portrait widths ≥394px unchanged here.
 */
@media (max-width: 393px) and (orientation: portrait) and (min-height: 821px) and (max-height: 870px) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero.product-hero--advertiser-portal {
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(4.65rem, 13.5vw, 5.85rem));
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__inner {
    padding-top: clamp(1.85rem, calc(1.65rem + 1.35dvh), 2.75rem);
    gap: clamp(1.05rem, calc(2.65vw + 0.55dvh), 1.65rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__visual {
    margin-top: clamp(0.2rem, 0.65vw, 0.48rem);
    padding-top: clamp(0.42rem, 1.35vw, 0.72rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-hero-feed__inner.product-hero__visual-inner {
    min-height: clamp(10.25rem, 38vw, 14.25rem);
  }
}

/*
 * Index — extra space between deepfake and dashboards promos (phone landscape only).
 * Portrait and viewports wider than 932px are unchanged.
 */
@media (orientation: landscape) and (max-width: 932px) {
  main#main:not(.page-main) .section.section-dashboards {
    margin-top: clamp(1.35rem, 3vh, 2.5rem);
  }
}

/*
 * Large phone landscape (~768–932px wide, ≤480px tall): Pro Max–class devices rotated — width clears ≤767 phone rules
 * but height is still handset-short. Tablet-style hero min-heights, 100vh/dvh floors, 901+ two-column promos, and
 * 769+ landscape deepfake GIF transforms overflow badly. max-height keeps normal tablets in landscape on existing rules.
 */
@media (orientation: landscape) and (max-height: 480px) and (min-width: 768px) and (max-width: 932px) {
  /* What we aren’t — undo 768–1024 landscape ~33–42rem hero min-height on ~430px-tall viewports */
  html.page-what-we-are-not .what-not-hero {
    min-height: unset !important;
    min-height: auto !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(3.15rem, 10dvh, 4.85rem)) !important;
    padding-bottom: clamp(1.25rem, 5dvh, 2.5rem) !important;
  }

  html.page-what-we-are-not .what-not-hero__inner {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 0 !important;
  }

  html.page-what-we-are-not .what-not-hero__copy {
    order: 1 !important;
    margin-top: clamp(2rem, 7dvh, 3.25rem) !important;
    padding-left: clamp(1rem, 3.25vw, 1.65rem) !important;
    padding-right: clamp(1rem, 3.25vw, 1.65rem) !important;
    text-align: center !important;
  }

  html.page-what-we-are-not .what-not-hero__visual {
    order: -1 !important;
    justify-self: center !important;
    margin-top: 0 !important;
    padding: clamp(1rem, 4dvh, 1.75rem) clamp(1rem, 3vw, 1.5rem) 0 !important;
    max-width: min(46rem, 96vw) !important;
  }

  html.page-what-we-are-not .what-not-hero .page-cta-actions {
    justify-content: center !important;
  }

  /* Index only — was paired with .product-hero; that made CSAM/deepfake heroes content-height on short landscape. */
  main#main:not(.page-main) .hero-landing {
    min-height: unset !important;
    min-height: auto !important;
  }

  main#main:not(.page-main) .home-first-viewport {
    min-height: unset;
  }

  main#main:not(.page-main) .home-first-viewport .hero-landing {
    flex: unset;
    min-height: unset;
  }

  /* Index hero — extra air under fixed header → kicker; tighter kicker → title */
  main#main:not(.page-main) .hero-landing {
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(3.75rem, 8dvh, 4.95rem));
  }

  main#main:not(.page-main) .hero-landing .hero-left {
    margin-top: clamp(3.75rem, 8.75dvh, 5.15rem);
  }

  main#main:not(.page-main) .hero-landing .hero-trusted {
    margin-bottom: clamp(0.2rem, 0.75dvh, 0.42rem) !important;
    font-size: calc(clamp(1.02rem, 2.35vw, 1.48rem) - 2.5px);
    line-height: 1.22;
  }

  main#main:not(.page-main) .hero-landing .hero-title-teal {
    font-size: calc(clamp(2.05rem, 4.35vw, 2.95rem) - 6px);
    line-height: 1.35;
  }

  main#main:not(.page-main) .hero-landing .hero-tagline {
    font-size: clamp(1.28rem, 2.65vw, 1.82rem);
    line-height: 1.32;
    padding-top: clamp(0.95rem, 2.65vw, 1.65rem);
  }

  main#main:not(.page-main) .hero-landing .hero-graphic-layer .hero-graphic {
    margin-top: clamp(-1.75rem, -3.35dvh, 0.15rem) !important;
    max-width: min(292px, 42vw) !important;
  }

  .hero-landing .hero-bottom {
    margin-top: clamp(0.85rem, 4dvh, 2rem) !important;
  }

  .product-hero__copy {
    margin-top: clamp(3.15rem, 9dvh, 4.75rem) !important;
  }

  .product-hero--csam .product-hero__copy {
    margin-top: clamp(3.35rem, 9dvh, 5rem) !important;
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__visual-inner {
    transform: translate(
      clamp(-0.85rem, -2.5vw, -0.35rem),
      clamp(0.4rem, 4dvh, 1.5rem)
    ) !important;
  }

  .product-hero--deepfake .product-hero__copy--deepfake {
    margin-top: clamp(3rem, 9dvh, 4.5rem) !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__inner {
    justify-items: center !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__copy.product-hero__copy--deepfake {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    padding-left: clamp(0.75rem, 3.35vw, 1.15rem) !important;
    padding-right: clamp(0.75rem, 3.35vw, 1.15rem) !important;
    max-width: min(36rem, 100%) !important;
    width: min(100%, 36rem) !important;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__title.product-hero__title--deepfake,
  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__deepfake-line,
  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__deepfake-line--semibold {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__visual-inner {
    min-height: unset !important;
    align-items: center !important;
    transform: translate(
      calc(clamp(-0.85rem, -2.85vw, -0.35rem) + 0.72rem),
      clamp(0.35rem, 4dvh, 1.35rem)
    ) !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__gif {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .product-hero--deepfake .product-hero__gif {
    transform: translate(
      clamp(-0.65rem, -1.25vw, 0.15rem),
      clamp(0.25rem, 3.5dvh, 1rem)
    ) !important;
  }

  /*
   * Index promos — match desktop row geometry on a short landscape strip: CSAM + dashboards = copy | spiral/net;
   * deepfake = donut | copy. (Prior 1-column center stack removed.)
   */
  main#main:not(.page-main) .section.section-csam .section-csam-inner,
  main#main:not(.page-main) .section.section-dashboards .section-dashboards-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--section-promo-graphic-max), 30vw)) !important;
    gap: clamp(0.45rem, 1.15vw, 0.95rem) !important;
    align-items: start !important;
    justify-items: stretch !important;
  }

  main#main:not(.page-main) .section.section-deepfake .section-deepfake-inner {
    display: grid !important;
    /* Same art column cap as CSAM / dashboards (was 44vw — donut read oversized vs spiral/net on ~800px-wide landscape). */
    grid-template-columns: minmax(0, min(var(--section-deepfake-graphic-max), 30vw)) minmax(0, 1fr) !important;
    gap: clamp(0.45rem, 1.15vw, 0.95rem) !important;
    align-items: center !important;
    justify-items: stretch !important;
  }

  main#main:not(.page-main) .section.section-csam,
  main#main:not(.page-main) .section.section-dashboards,
  main#main:not(.page-main) .section.section-deepfake {
    padding-left: clamp(1rem, 4.25vw, 1.65rem) !important;
    padding-right: clamp(1rem, 4.25vw, 1.65rem) !important;
    padding-top: clamp(1.65rem, 6dvh, 3.25rem) !important;
    padding-bottom: clamp(1.25rem, 4dvh, 2.35rem) !important;
  }

  /*
   * Dashboards: index CTA band uses negative margin-top on `.section-cta-wrap` (~2.25rem up). Shared promo foot above
   * is smaller than that overlap — the “What we’re not” pill was sitting under the CTA. Extra foot only here.
   */
  main#main:not(.page-main) .section.section-dashboards {
    padding-bottom: clamp(3.85rem, 12dvh, 6rem) !important;
  }

  main#main:not(.page-main) .section-csam-content,
  main#main:not(.page-main) .section-dashboards-content {
    text-align: left !important;
    justify-self: start !important;
    width: 100% !important;
    /* Fill the text grid column — avoid % of column (e.g. 62%) which capped measure tighter than ≤1366 rem rail */
    max-width: min(42rem, 100%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: clamp(0.35rem, 1.5vw, 0.85rem) !important;
    transform: none !important;
    min-width: 0 !important;
  }

  main#main:not(.page-main) .section-deepfake-content {
    text-align: left !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: min(30rem, 100%) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding-left: clamp(0.55rem, 1.65vw, 1.15rem) !important;
    padding-right: 0 !important;
    transform: translateX(clamp(2.25rem, 4.75vw, 3.55rem)) !important;
  }

  main#main:not(.page-main) .section-csam-title,
  main#main:not(.page-main) .section-dashboards-title,
  main#main:not(.page-main) .section-deepfake-title {
    text-align: left !important;
    align-items: flex-start !important;
  }

  main#main:not(.page-main) .section-csam-subtitle,
  main#main:not(.page-main) .section-csam-body,
  main#main:not(.page-main) .section-dashboards-subtitle,
  main#main:not(.page-main) .section-dashboards-body,
  main#main:not(.page-main) .section-deepfake-subtitle,
  main#main:not(.page-main) .section-deepfake-body {
    text-align: left !important;
  }

  main#main:not(.page-main) .section.section-csam .section-csam-body,
  main#main:not(.page-main) .section.section-dashboards .section-dashboards-body {
    max-width: none !important;
    width: 100% !important;
  }

  /* Deepfake: keep prior narrower body measure on this band — CSAM/dashboards widened rules above don’t apply here */
  main#main:not(.page-main) .section.section-deepfake .section-deepfake-body {
    max-width: min(23.5rem, 100%) !important;
    width: 100% !important;
  }

  /*
   * `max-width: 900px` sets promo graphics to `order: -1` (stacked portrait). In a 2-col grid that pulls the graphic
   * into column 1 — reversed vs desktop (copy should stay left). Unset so DOM order wins: CSAM/dashboards = copy | art.
   *
   * 901+ :root nudge `--section-promo-*-extra-x` pulls spirals/net/donut toward copy — fine on wide desktop; on this
   * short strip it overlaps (~803×425 vs 932×430). Reset graphic transforms so art stays in-column (≤430 band does
   * the same for stacked promos).
   */
  main#main:not(.page-main) .section.section-csam .section-csam-graphic,
  main#main:not(.page-main) .section.section-dashboards .section-dashboards-graphic {
    order: unset !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  main#main:not(.page-main) .section.section-deepfake .section-deepfake-graphic {
    order: unset !important;
    justify-content: flex-end !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  main#main:not(.page-main) .section.section-csam .section-csam-graphic-stack {
    width: min(100%, var(--section-promo-graphic-max)) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  main#main:not(.page-main) .section.section-dashboards .section-dashboards-graphic-stack {
    width: min(100%, var(--section-promo-graphic-max)) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    transform: translateX(clamp(0.35rem, 1.1vw, 0.95rem)) !important;
  }

  main#main:not(.page-main) .section.section-deepfake .section-deepfake-graphic-stack {
    width: min(100%, var(--section-deepfake-graphic-max)) !important;
    transform: translate(clamp(0.15rem, 0.9vw, 0.65rem), clamp(0.2rem, 1.1vw, 0.55rem)) !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  main#main:not(.page-main) .section-csam-content .btn-csam-started,
  main#main:not(.page-main) .section-dashboards-content .btn-csam-started,
  main#main:not(.page-main) .section-deepfake-content .btn-deepfake-started {
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: clamp(1.05rem, 2.35vw, 1.55rem) !important;
    padding-right: clamp(1.15rem, 2.55vw, 1.75rem) !important;
  }
}

/*
 * What we aren’t — narrow short landscape (800–904 CSS px wide, ≤480 tall, e.g. ~803×425 + `html { zoom: }` cohort):
 * same two-column hero, viewport-tall cage, paddings + mesh/button offsets as Pro Max band — overrides 768–932 stack here.
 * Viewports outside `(orientation: landscape) and (max-height: 480px) and (min-width: 800px) and (max-width: 904px)` are unchanged.
 */
@media (orientation: landscape) and (max-height: 480px) and (min-width: 800px) and (max-width: 904px) {
  html.page-what-we-are-not .what-not-hero {
    /* Match product hero: `html { zoom: 0.88 }` — svh/dvh resolve pre-zoom; scale so painted strip fills visible viewport */
    min-height: calc(max(100vmin, 100dvh, 100vh) / 0.88) !important;
    max-height: calc(max(100vmin, 100dvh, 100vh) / 0.88) !important;
    height: calc(max(100vmin, 100dvh, 100vh) / 0.88) !important;
    box-sizing: border-box !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(3.85rem, 10.25dvh, 5.35rem)) !important;
    padding-bottom: clamp(0.45rem, 2dvh, 0.95rem) !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  html.page-what-we-are-not .what-not-hero__inner {
    margin-top: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding-top: clamp(1.35rem, 4.15dvh, 2.25rem) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(17.25rem, 36vw)) !important;
    justify-items: stretch !important;
    align-items: center !important;
    align-content: start !important;
    gap: clamp(0.42rem, 1.45vw, 0.92rem) !important;
  }

  html.page-what-we-are-not .what-not-hero__copy {
    order: unset !important;
    justify-self: stretch !important;
    margin-top: clamp(2.55rem, 8.65dvh, 4.65rem) !important;
    padding-top: 0 !important;
    padding-left: clamp(0.75rem, 2.35vw, 1.35rem) !important;
    padding-right: clamp(0.35rem, 1.35vw, 0.72rem) !important;
    padding-bottom: clamp(0.18rem, 1.1dvh, 0.48rem) !important;
    text-align: left !important;
  }

  html.page-what-we-are-not .what-not-hero .product-hero__title.product-hero__title--deepfake,
  html.page-what-we-are-not .what-not-hero .product-hero__deepfake-line,
  html.page-what-we-are-not .what-not-hero .product-hero__deepfake-line--semibold {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  html.page-what-we-are-not .what-not-hero .product-hero__deepfake-line:first-of-type {
    margin-bottom: clamp(0.42rem, 1.35vw, 0.68rem) !important;
  }

  html.page-what-we-are-not .what-not-hero .product-hero__deepfake-line--semibold {
    margin-bottom: clamp(0.65rem, 2vw, 1.05rem) !important;
  }

  html.page-what-we-are-not .what-not-hero .page-cta-actions {
    justify-content: flex-start !important;
    margin-top: clamp(0.72rem, 2.85dvh, 1.25rem) !important;
  }

  html.page-what-we-are-not .what-not-hero__visual {
    order: unset !important;
    justify-self: end !important;
    align-self: center !important;
    margin-top: clamp(5.65rem, 18.25dvh, 9rem) !important;
    max-width: min(17.25rem, 36vw) !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: clamp(0.45rem, 1.65vw, 1.05rem) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html.page-what-we-are-not .what-not-hero__canvas {
    width: min(100%, 14.35rem) !important;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: 0 !important;
    display: block !important;
  }
}

/*
 * What we aren’t — iPhone Pro Max landscape (905–932, short height): two-column hero (copy | mesh), smaller canvas —
 * overrides shared short-landscape stack (mesh above copy) via `order: unset` + grid columns.
 * One viewport tall — band sits lower vs prior tight-header pass (hero + inner pad + column margin-top).
 * Viewports outside `(orientation: landscape) and (max-height: 480px) and (min-width: 905px) and (max-width: 932px)` are unchanged.
 */
@media (orientation: landscape) and (max-height: 480px) and (min-width: 905px) and (max-width: 932px) {
  html.page-what-we-are-not .what-not-hero {
    /* No page zoom — cap peek from svh vs dynamic toolbar with max(..., dvh) */
    min-height: max(100svh, 100dvh) !important;
    max-height: max(100svh, 100dvh) !important;
    height: max(100svh, 100dvh) !important;
    box-sizing: border-box !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(3.85rem, 10.25dvh, 5.35rem)) !important;
    padding-bottom: clamp(0.45rem, 2dvh, 0.95rem) !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  html.page-what-we-are-not .what-not-hero__inner {
    margin-top: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding-top: clamp(1.35rem, 4.15dvh, 2.25rem) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(17.25rem, 36vw)) !important;
    justify-items: stretch !important;
    align-items: center !important;
    align-content: start !important;
    gap: clamp(0.42rem, 1.45vw, 0.92rem) !important;
  }

  html.page-what-we-are-not .what-not-hero__copy {
    order: unset !important;
    justify-self: stretch !important;
    margin-top: clamp(2.55rem, 8.65dvh, 4.65rem) !important;
    padding-top: 0 !important;
    padding-left: clamp(0.75rem, 2.35vw, 1.35rem) !important;
    padding-right: clamp(0.35rem, 1.35vw, 0.72rem) !important;
    padding-bottom: clamp(0.18rem, 1.1dvh, 0.48rem) !important;
    text-align: left !important;
  }

  html.page-what-we-are-not .what-not-hero .product-hero__title.product-hero__title--deepfake,
  html.page-what-we-are-not .what-not-hero .product-hero__deepfake-line,
  html.page-what-we-are-not .what-not-hero .product-hero__deepfake-line--semibold {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  html.page-what-we-are-not .what-not-hero .product-hero__deepfake-line:first-of-type {
    margin-bottom: clamp(0.42rem, 1.35vw, 0.68rem) !important;
  }

  html.page-what-we-are-not .what-not-hero .product-hero__deepfake-line--semibold {
    margin-bottom: clamp(0.65rem, 2vw, 1.05rem) !important;
  }

  html.page-what-we-are-not .what-not-hero .page-cta-actions {
    justify-content: flex-start !important;
    margin-top: clamp(0.72rem, 2.85dvh, 1.25rem) !important;
  }

  html.page-what-we-are-not .what-not-hero__visual {
    order: unset !important;
    justify-self: end !important;
    align-self: center !important;
    margin-top: clamp(5.65rem, 18.25dvh, 9rem) !important;
    max-width: min(17.25rem, 36vw) !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: clamp(0.45rem, 1.65vw, 1.05rem) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html.page-what-we-are-not .what-not-hero__canvas {
    width: min(100%, 14.35rem) !important;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: 0 !important;
    display: block !important;
  }
}

/*
 * Index — narrow short landscape (≤904px wide, matches 800–904 `html { zoom: 0.88 }` band). Pro Max (932px) skips zoom
 * and keeps the shared large-phone hero / CSAM rules above — here we pull hero stack up + nudge CSAM spiral off copy.
 */
@media (orientation: landscape) and (max-height: 480px) and (min-width: 768px) and (max-width: 904px) {
  main#main:not(.page-main) .hero-landing {
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(1.55rem, 3.65dvh, 2.55rem)) !important;
  }

  main#main:not(.page-main) .hero-landing .hero-left {
    margin-top: clamp(1.35rem, 3.65dvh, 2.65rem) !important;
  }

  main#main:not(.page-main) .hero-landing .hero-graphic-layer .hero-graphic {
    margin-top: clamp(-1.85rem, -3.2dvh, 0rem) !important;
  }

  .hero-landing .hero-bottom {
    margin-top: clamp(0.28rem, 2dvh, 0.95rem) !important;
  }

  main#main:not(.page-main) .section.section-csam .section-csam-graphic-stack {
    transform: translate(clamp(0.55rem, 1.85vw, 1.35rem), 0.5rem) !important;
  }
}

/*
 * Product pages (CSAM / Deepfake) — phone landscape: hero must span one full viewport height so the next band doesn’t peek.
 * Do NOT nest under `(max-height: 480px)` — DevTools / Safari often report a taller layout height, so those rules never ran.
 * Landscape: `vmin` equals viewport height; `max(..., 100dvh)` catches dynamic viewport without relying on svh/lvh support.
 */
@media (orientation: landscape) and (min-width: 768px) and (max-width: 932px) {
  .page-main--product-hero .product-hero {
    min-height: 100vmin !important;
    min-height: max(100vmin, 100dvh) !important;
  }
}

/*
 * Same band as `html { zoom: 0.88 }` (800–904 landscape). DevTools “zoom” can be 100% while this CSS zoom still runs —
 * `vmin`/`dvh` resolve in pre-zoom layout space, so a ~one-band peek at the duotone/API sections is common. Scale min-height
 * by `1 / 0.88` so the hero’s painted strip fills the visible viewport. 905px+ (e.g. Pro Max) skips page zoom — unchanged.
 */
@media (orientation: landscape) and (min-width: 800px) and (max-width: 904px) {
  .page-main--product-hero .product-hero {
    min-height: calc(max(100vmin, 100dvh, 100vh) / 0.88) !important;
  }
}

/*
 * CSAM product.html — narrow landscape (768–904, e.g. 803×425): copy + pill lower; PNG stack a touch smaller + shifted down.
 * Pro Max (905+) — next block — unchanged.
 */
@media (orientation: landscape) and (max-height: 480px) and (min-width: 768px) and (max-width: 904px) {
  .page-main--product-hero:has(.product-hero--csam) .product-hero__copy {
    margin-top: clamp(6.05rem, 14.75dvh, 8.25rem) !important;
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__cta.btn-hero,
  html[data-theme='light'] .page-main--product-hero:has(.product-hero--csam) .product-hero__cta.btn-hero {
    margin-top: clamp(1.95rem, 4.85dvh, 3.05rem) !important;
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__visual-inner {
    --ph-illustration-max: min(24.5rem, 56vmin) !important;
    transform: translate(
      clamp(-0.85rem, -2.5vw, -0.35rem),
      clamp(4.35rem, 15dvh, 8.25rem)
    ) !important;
  }
}

/*
 * CSAM product.html — iPhone 14 Pro Max landscape (~932×430): narrower phones in the same short-landscape band keep prior art/type.
 * Slightly smaller headline + sub; PNG stack larger and shifted down vs `…product-hero__visual-inner` in the large-phone block.
 */
@media (orientation: landscape) and (max-height: 480px) and (min-width: 905px) and (max-width: 932px) {
  .page-main--product-hero:has(.product-hero--csam) .product-hero__copy {
    margin-top: clamp(4.85rem, 13dvh, 7.25rem) !important;
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__title {
    font-size: clamp(1.38rem, 2.95vw, 2.2rem) !important;
    line-height: 1.46 !important;
    margin-bottom: clamp(0.55rem, 1.25vw, 0.88rem) !important;
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__sub {
    font-size: clamp(1rem, 2.2vw, 1.52rem) !important;
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__cta.btn-hero,
  html[data-theme='light'] .page-main--product-hero:has(.product-hero--csam) .product-hero__cta.btn-hero {
    margin-top: clamp(1.35rem, 3.85dvh, 2.45rem) !important;
    font-size: clamp(0.82rem, 1.55vw, 1.12rem) !important;
    padding: clamp(0.32rem, 0.75vw, 0.42rem) clamp(1rem, 2.65vw, 1.72rem) !important;
  }

  .page-main--product-hero:has(.product-hero--csam) .product-hero__visual-inner {
    --ph-illustration-max: min(34rem, 74vmin) !important;
    min-height: clamp(11.5rem, 26vmin, 17.5rem) !important;
    transform: translate(
      clamp(-0.85rem, -2.5vw, -0.35rem),
      clamp(3rem, 12dvh, 6.35rem)
    ) !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__copy--deepfake {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    width: min(100%, 44rem) !important;
    /* Slightly higher rail vs prior calc(8.75rem - 3.06rem) — whole title + lines + CTA move up together. */
    margin-top: calc(8.75rem - 3.06rem - 0.52rem) !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__title.product-hero__title--deepfake {
    font-size: clamp(1.34rem, 2.75vw, 2.06rem) !important;
    line-height: 1.38 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    margin-bottom: clamp(0.55rem, 1.2vw, 0.9rem) !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__deepfake-line {
    font-size: clamp(0.94rem, 1.95vw, 1.28rem) !important;
    line-height: 1.34 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__deepfake-line--semibold {
    font-size: clamp(1rem, 2.05vw, 1.34rem) !important;
    margin-bottom: clamp(1.2rem, 2.65vw, 1.9rem) !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__cta.btn-hero,
  html[data-theme='light'] .page-main--product-hero:has(.product-hero--deepfake) .product-hero__cta.btn-hero {
    display: inline-flex !important;
    align-self: flex-start !important;
    justify-self: start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    left: 0 !important;
    transform: none !important;
    margin-top: clamp(-0.9rem, -0.84dvh, -0.5rem) !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    .product-hero__copy--deepfake
    .product-hero__cta.btn-hero,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--deepfake)
    .product-hero__copy--deepfake
    .product-hero__cta.btn-hero {
    /* Keep CTA edge aligned with the text start in this viewport by canceling inherited inset drift. */
    transform: translateX(clamp(-7.2rem, -14.5vw, -5rem)) !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__visual-inner {
    --ph-illustration-max: min(19.65rem, 42vmin) !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__gif {
    transform: translate(
      clamp(-0.95rem, -1.35vw, -0.2rem),
      clamp(3.75rem, 8.95vh, 8.35rem)
    ) !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__img.product-io__img--deepfake-scales {
    max-width: min(23rem, 62vw) !important;
    max-height: min(28rem, 49vh) !important;
    transform: translate(
      clamp(-3.1rem, -5.15vw, -1.9rem),
      clamp(-6.7rem, -13.1vw, -4.2rem)
    ) !important;
  }
}

/*
 * Product plexus narrow landscape 800–904 only:
 * keep full-width 4-across alignment while preserving live canvas animation.
 */
@media (orientation: landscape) and (min-width: 800px) and (max-width: 904px) {
  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-performance-stats__grid--plexus,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--performance-stats--deepfake.page-section--performance-stats--plexus
    .page-performance-stats__grid--plexus {
    --stat-extend-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-performance-stats__plexus-unified,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--performance-stats--deepfake.page-section--performance-stats--plexus
    .page-performance-stats__plexus-unified {
    display: none !important;
  }

  .page-main--product-hero:has(.product-hero--csam)
    > .page-section.page-section--performance-stats--plexus:not(.page-section--performance-stats--deepfake)
    .page-performance-stats__box,
  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--performance-stats--deepfake.page-section--performance-stats--plexus
    .page-performance-stats__box {
    background-image:
      radial-gradient(circle at 50% 45%, rgba(90, 220, 230, 0.18), rgba(20, 100, 110, 0.03) 56%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(90deg, rgb(12, 88, 98), rgb(10, 72, 80) 32%, rgb(8, 60, 68) 58%, rgb(6, 44, 50) 82%, rgb(5, 38, 44));
    background-size: cover;
    background-position: center center;
  }
}

/*
 * Deepfake — narrow landscape 800–904 (e.g. ~803×425, same band as narrow `html { zoom }`):
 * undo short-landscape centered hero; left rail copy + CTA; larger GIF + Problem scales; much smaller law hourglass.
 * Viewports outside `(min-width: 800px) and (max-width: 904px) and (orientation: landscape)` are unchanged.
 */
@media (orientation: landscape) and (min-width: 800px) and (max-width: 904px) {
  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__inner {
    justify-items: start !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__copy.product-hero__copy--deepfake {
    text-align: left !important;
    justify-self: start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-inline: unset !important;
    width: min(100%, 44rem) !important;
    max-width: min(44rem, 100%) !important;
    margin-top: clamp(5.95rem, 14dvh, 7.85rem) !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__title.product-hero__title--deepfake {
    font-size: clamp(1.58rem, 3.08vw, 2.32rem) !important;
    line-height: 1.36 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    margin-bottom: clamp(1.12rem, 2.05vw, 1.48rem) !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__deepfake-line {
    font-size: clamp(1.08rem, 2.22vw, 1.46rem) !important;
    line-height: 1.32 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__deepfake-line:first-of-type {
    margin-top: 0 !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__deepfake-line--semibold {
    font-size: clamp(1.16rem, 2.32vw, 1.52rem) !important;
    margin-bottom: clamp(1.05rem, 2.45vw, 1.65rem) !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__cta.btn-hero,
  html[data-theme='light'] .page-main--product-hero:has(.product-hero--deepfake) .product-hero__cta.btn-hero {
    display: inline-flex !important;
    align-self: flex-start !important;
    justify-self: start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    left: 0 !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    margin-top: clamp(-0.55rem, -0.5dvh, -0.25rem) !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    .product-hero__copy--deepfake
    .product-hero__cta.btn-hero,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--deepfake)
    .product-hero__copy--deepfake
    .product-hero__cta.btn-hero {
    transform: translateX(clamp(-0.35rem, -1.85vw, 0.35rem)) !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__visual-inner {
    align-items: flex-end !important;
    justify-content: flex-end !important;
    --ph-illustration-max: min(20.85rem, 46vmin) !important;
    min-height: clamp(10.5rem, 24vmin, 15.5rem) !important;
    transform: translate(
      clamp(0.75rem, 1.45vw, 1.65rem),
      clamp(0.45rem, 3.5dvh, 1.25rem)
    ) !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake) .product-hero__gif {
    margin-left: auto !important;
    margin-right: 0 !important;
    transform: translate(
      clamp(0.45rem, 1.25vw, 1.85rem),
      clamp(4.25rem, 11dvh, 8.85rem)
    ) !important;
    transform-origin: 100% 100% !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__heading.product-io__heading--deepfake-kicker {
    max-width: min(30.5rem, 86vw) !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--input
    .product-io__rule,
  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__col--output
    .product-io__rule {
    max-width: min(16.35rem, 78%) !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    .page-section--duotone-noise:has(.product-io__heading--deepfake-kicker)
    .product-io__img.product-io__img--deepfake-scales {
    max-width: min(23.75rem, 72vw) !important;
    max-height: min(30.5rem, 54vh) !important;
    transform: translate(
      clamp(-2.95rem, -5vw, -1.65rem),
      clamp(-6.35rem, -12.35vw, -3.35rem)
    ) !important;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .page-api-split__grid--law-recap
    .page-api-split__visual {
    max-width: min(18.85rem, 54vw) !important;
    padding-left: clamp(0.35rem, 1.65vw, 0.95rem);
    padding-right: clamp(0.35rem, 1.65vw, 0.95rem);
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--deepfake)
    > .page-section.page-section--law-recap
    .page-api-split__img--hourglass {
    max-width: min(14.95rem, 46vw) !important;
    width: auto !important;
    height: auto !important;
  }
}

/*
 * TAP "Features" (advertiser-portal.html) — ≤767: vertical stack in DOM order (strike → alerts → mega).
 * The TAP hero also carries `.product-hero--csam`, so CSAM No Face phablet/≤430 3-across rules match this
 * section unless overridden here. ≥768 and other product feature grids are unchanged.
 */
@media (max-width: 767px) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-no-face-stack
    .page-three-col {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    max-width: min(26rem, 100%);
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    box-sizing: border-box;
    gap: clamp(3.65rem, 8.5vw, 4.6rem);
    grid-template-columns: unset;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-no-face-stack
    .page-three-col
    > .page-feature-card {
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .advertiser-portal-tap-features__icon
    .page-feature-card__img {
    max-width: min(13.5rem, 64vw);
    width: auto;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-feature-card
    h3,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-tap-features.page-section--grid-bg.page-section--alt
    .page-feature-card__title {
    font-size: calc(clamp(1.1rem, 3.55vw, 1.28rem) + 4px);
  }
}

/* —— Pricing page: three-card SaaS layout —— */
.page-main--pricing {
  --pricing-accent: #06d1c4;
  --pricing-accent-soft: rgba(6, 209, 196, 0.12);
  --pricing-price: #05575c;
  --pricing-check: #06d1c4;
  --pricing-check-featured: #06d1c4;
  --pricing-card-bg: #ffffff;
  --pricing-card-border: rgba(15, 23, 42, 0.08);
  --pricing-text: var(--text);
  --pricing-text-muted: var(--text-muted);
  background: transparent;
}

/* Glass preview: full-bleed gradient (body side padding otherwise leaves grey strips) */
html.page-pricing body {
  padding-left: 0;
  padding-right: 0;
  background: #f0f3f8;
  position: relative;
}

html.page-pricing body::before {
  content: '';
  position: fixed;
  inset: -18%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 55% at 88% 18%, rgba(6, 209, 196, 0.12), transparent 58%),
    radial-gradient(ellipse 75% 50% at 12% 72%, rgba(5, 87, 92, 0.1), transparent 52%);
  transform: rotate(-11deg);
}

html.page-pricing #main.page-main--pricing {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

html[data-theme='dark'] .page-main--pricing {
  --pricing-card-bg: #171a24;
  --pricing-card-border: rgba(255, 255, 255, 0.1);
}

.pricing-page {
  max-width: min(92rem, 100%);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 2.5vw, 2rem) clamp(4rem, 7.5vw, 6.25rem);
}

.pricing-page__intro {
  text-align: center;
  max-width: min(68rem, 100%);
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}

.pricing-page__title {
  margin: 0 0 0.75rem;
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--pricing-text);
}

.pricing-page__lead {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.55;
  color: var(--pricing-text-muted);
  font-weight: 400;
}

.pricing-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.125rem;
  align-items: stretch;
}

.pricing-plan:not(.pricing-plan--featured) {
  width: 100%;
  max-width: min(100%, 25.5rem);
  justify-self: center;
}

/* Glass preview — revert background/border/shadow on .pricing-plan to restore solid cards */
.pricing-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(1.35rem, 2.5vw, 1.75rem);
  padding-top: clamp(2.35rem, 3.25vw, 2.65rem);
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 1rem;
  box-shadow:
    0 8px 32px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

html[data-theme='dark'] .pricing-plan {
  background: rgba(23, 26, 36, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pricing-plan--featured {
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(6, 209, 196, 0.65);
  box-shadow:
    0 12px 40px rgba(6, 209, 196, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html[data-theme='dark'] .pricing-plan--featured {
  background: rgba(23, 26, 36, 0.58);
  border-color: rgba(6, 209, 196, 0.55);
}

.pricing-plan__head {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  margin-bottom: 0;
}

.pricing-plan__head .pricing-plan__name-kicker {
  margin: -0.65rem 0 0.65rem;
}

.pricing-plan__head .pricing-plan__name-title {
  margin: 0.05rem 0 0;
}

.pricing-plan__head .pricing-plan__price {
  margin-top: 0.35rem;
  margin-bottom: 0.25rem;
}

.pricing-plan__head .pricing-plan__billing {
  margin-bottom: 1.35rem;
}

.pricing-plan__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0.4rem 0.95rem;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #fff;
  background: var(--pricing-accent);
  border-radius: 999px;
  white-space: nowrap;
}

.pricing-plan__name--stacked {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0 0 1.45rem;
  text-transform: none;
  letter-spacing: normal;
}

.pricing-plan__name-kicker {
  margin: 0;
  font-family: 'Azeret Mono', monospace;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--pricing-price);
}

.pricing-plan__name-title {
  display: block;
  box-sizing: border-box;
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(1.3rem, 2.75vw, 1.65rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--pricing-text);
  /* Reserve two lines so CSAM (often one line) aligns with TAP / NCII titles */
  min-height: calc(2 * 1.15em);
  padding-bottom: 0;
  border-bottom: none;
}

.pricing-plan__name-title::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 0.85rem;
  background: rgba(15, 23, 42, 0.18);
}

.pricing-plan__price {
  margin: 0 0 0.25rem;
  font-family: 'Inter Tight', var(--font);
  font-size: clamp(2rem, 4.5vw, 2.65rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--pricing-price);
}

.pricing-plan__price-suffix {
  font-family: inherit;
  font-size: 0.45em;
  font-weight: 400;
  letter-spacing: 0;
  color: inherit;
}

.pricing-plan__billing {
  margin: 0 0 1.35rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--pricing-text-muted);
}

.pricing-plan__billing em {
  font-style: italic;
  font-weight: 400;
}

.pricing-plan__desc {
  margin: 0;
  margin-bottom: 0;
  min-height: 5.1rem;
  font-size: clamp(0.9rem, 1vw, 0.96rem);
  line-height: 1.55;
  color: var(--pricing-text);
}

.pricing-plan__coming-label {
  margin: 0.5rem 0 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pricing-text-muted);
}

/* TAP: don’t let main feature list grow — keeps “Coming soon” directly under Strike / Mega */
.pricing-plan--featured .pricing-plan__body > .pricing-plan__features--tap {
  flex: 0 0 auto;
  margin-bottom: 0;
}

/* CSAM / NCII: don’t grow the formats list — removes dead space below Custom Threshold Analysis */
.pricing-plan:not(.pricing-plan--featured) .pricing-plan__body > .pricing-plan__features--formats {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.pricing-plan:not(.pricing-plan--featured) .pricing-plan__coming-label {
  margin-top: 1.3rem;
  margin-bottom: 1.1rem;
}

.pricing-plan--featured .pricing-plan__coming-label {
  margin-top: 0.15rem;
  margin-bottom: 1rem;
}

.pricing-plan--featured .pricing-plan__coming-label--enterprise {
  margin-bottom: 0.85rem;
}

.pricing-plan--featured .pricing-plan__features--soon {
  flex: 0 0 auto;
}

.pricing-plan__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.pricing-plan__features {
  list-style: none;
  margin: 0 0 auto;
  padding: 0;
  flex: 1 1 auto;
}

.pricing-plan__features--formats {
  flex: 1 1 auto;
}

.pricing-plan__features--formats li {
  font-weight: 600;
  font-size: calc(0.975rem + 1px);
}

.pricing-plan__features--customers {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.pricing-plan__features--customers li {
  margin-bottom: 0.75rem;
  color: var(--pricing-text-muted);
}

.pricing-plan:not(.pricing-plan--featured) .pricing-plan__features--customers li {
  margin-bottom: 0.75rem;
  color: var(--pricing-text-muted);
}

.pricing-plan__features li {
  position: relative;
  margin: 0 0 0.65rem;
  padding-left: 1.85rem;
  font-size: 0.975rem;
  line-height: 1.45;
  color: var(--pricing-text);
}

.pricing-plan:not(.pricing-plan--featured) .pricing-plan__features li {
  margin-bottom: 0.75rem;
  padding-left: 2.05rem;
}

.pricing-plan__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--pricing-check)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2L5 8.7L9.5 3.8' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 0.65rem no-repeat;
}

.pricing-plan--featured .pricing-plan__features--tap li::before {
  background-color: var(--pricing-check-featured);
}

.pricing-plan__features--tap li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1.05rem;
}

.pricing-plan--featured .pricing-plan__features--tap li,
.pricing-plan--featured .pricing-plan__features--soon li {
  margin-bottom: 1.45rem;
  padding-left: 1.95rem;
}

.pricing-plan__features--tap strong {
  font-weight: 600;
  color: var(--pricing-text);
}

.pricing-plan__feature-detail {
  display: block;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--pricing-text-muted);
  font-weight: 400;
}

.pricing-plan--featured .pricing-plan__features--tap strong,
.pricing-plan--featured .pricing-plan__features--soon strong {
  font-size: calc(0.975rem + 1px);
}

.pricing-plan--featured .pricing-plan__features--tap .pricing-plan__feature-detail,
.pricing-plan--featured .pricing-plan__features--soon .pricing-plan__feature-detail {
  font-size: calc(0.875rem + 1px);
}

.pricing-plan__features--soon li::before {
  opacity: 0.55;
}

.pricing-plan__head .pricing-plan__cta {
  width: 100%;
  margin-top: -0.4rem;
  margin-bottom: 2.1rem;
  margin-left: 0;
  justify-content: center;
  text-align: center;
}

.pricing-plan__head .pricing-plan__cta.btn-csam-started,
.pricing-plan__head .pricing-plan__cta.btn-deepfake-started {
  margin-top: -0.4rem;
}

.pricing-plan__cta {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.pricing-plan__cta--outline.btn-csam-started {
  background: transparent;
  color: var(--pricing-accent);
  border: 1.5px solid var(--pricing-accent);
  box-shadow: none;
}

.pricing-plan__cta--outline.btn-csam-started::before {
  display: none;
}

.pricing-plan__cta--outline.btn-csam-started:hover {
  background: var(--pricing-accent-soft);
  color: var(--pricing-accent);
  border-color: var(--pricing-accent);
}

.pricing-plan__cta--outline.btn-csam-started .btn-csam-label,
.pricing-plan__cta--outline.btn-csam-started .btn-arrow {
  color: inherit;
}

.pricing-plan--featured .pricing-plan__head .pricing-plan__cta.btn-deepfake-started {
  margin-top: -0.4rem;
  margin-bottom: 2.1rem;
}

/* Three-column desktop: shared row tracks — kicker, title, price, billing, desc */
@media (min-width: 1025px) {
  .pricing-plans {
    grid-template-rows: auto auto auto auto minmax(5.1rem, auto) auto minmax(0, 1fr);
    align-items: stretch;
  }

  .pricing-plan {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 7;
    grid-template-columns: minmax(0, 1fr);
  }

  .pricing-plan__head {
    display: contents;
  }

  .pricing-plan__head .pricing-plan__name-kicker {
    margin: -0.65rem 0 0.65rem;
  }

  .pricing-plan__head .pricing-plan__name-title {
    margin: 0.05rem 0 0;
  }

  .pricing-plan__head .pricing-plan__price {
    margin: 0.35rem 0 0.25rem;
  }

  .pricing-plan__head .pricing-plan__billing {
    margin: 0 0 1.35rem;
  }

  .pricing-plan__head .pricing-plan__desc {
    margin: 0;
  }

  .pricing-plan__head .pricing-plan__cta {
    margin: -0.4rem 0 2.1rem;
  }

  .pricing-plan__body {
    grid-row: 7;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
}

@media (max-width: 1024px) {
  .pricing-plans {
    grid-template-columns: 1fr;
    max-width: min(36rem, 100%);
    margin: 0 auto;
  }

  .pricing-plan:not(.pricing-plan--featured) {
    max-width: min(36rem, 100%);
  }

  .pricing-plan--featured {
    order: -1;
  }

  .pricing-plan {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    grid-template-rows: none;
  }

  .pricing-plan__head {
    display: flex;
  }

  .pricing-plan__body {
    grid-row: auto;
  }

  .pricing-plan__name-title {
    min-height: 0;
  }

  .pricing-plan__desc {
    min-height: 0;
  }
}

/* Pricing — iPad tablet 768–1024 (portrait + landscape): card gap, rule→price air, CTA spacing. */
@media (max-width: 1024px) and (min-width: 768px) {
  html.page-pricing .pricing-plans {
    gap: clamp(1.85rem, 4.25vw, 2.5rem);
  }

  html.page-pricing .pricing-plan__name-title::after {
    margin-bottom: 0.65rem;
  }

  html.page-pricing .pricing-plan__head .pricing-plan__price {
    margin-top: 0.9rem;
  }

  html.page-pricing .pricing-plan__head .pricing-plan__desc {
    margin-bottom: 0.75rem;
  }

  html.page-pricing .pricing-plan__head .pricing-plan__cta,
  html.page-pricing .pricing-plan__head .pricing-plan__cta.btn-csam-started,
  html.page-pricing .pricing-plan__head .pricing-plan__cta.btn-deepfake-started,
  html.page-pricing .pricing-plan--featured .pricing-plan__head .pricing-plan__cta.btn-deepfake-started {
    margin-top: 1rem;
    margin-bottom: 3.15rem;
  }

  html.page-pricing .pricing-plan__body {
    padding-top: 0.35rem;
  }
}

/* Pricing — phablet portrait 441–767: same card gap, rule→price air, CTA spacing as iPad tablet band. */
@media (max-width: 767px) and (min-width: 441px) and (orientation: portrait) {
  html.page-pricing .pricing-plans {
    gap: clamp(1.85rem, 4.25vw, 2.5rem);
  }

  html.page-pricing .pricing-plan__name-title::after {
    margin-bottom: 0.65rem;
  }

  html.page-pricing .pricing-plan__head .pricing-plan__price {
    margin-top: 0.9rem;
  }

  html.page-pricing .pricing-plan__head .pricing-plan__desc {
    margin-bottom: 0.75rem;
  }

  html.page-pricing .pricing-plan__head .pricing-plan__cta,
  html.page-pricing .pricing-plan__head .pricing-plan__cta.btn-csam-started,
  html.page-pricing .pricing-plan__head .pricing-plan__cta.btn-deepfake-started,
  html.page-pricing .pricing-plan--featured .pricing-plan__head .pricing-plan__cta.btn-deepfake-started {
    margin-top: 1rem;
    margin-bottom: 3.15rem;
  }

  html.page-pricing .pricing-plan__body {
    padding-top: 0.35rem;
  }
}

/* Pricing — mobile ≤440 (Pro Max / phone): same card gap, rule→price air, CTA spacing. */
@media (max-width: 440px) {
  html.page-pricing .pricing-plans {
    gap: clamp(1.85rem, 4.25vw, 2.5rem);
  }

  html.page-pricing .pricing-plan__name-title::after {
    margin-bottom: 0.65rem;
  }

  html.page-pricing .pricing-plan__head .pricing-plan__price {
    margin-top: 0.9rem;
  }

  html.page-pricing .pricing-plan__head .pricing-plan__desc {
    margin-bottom: 0.75rem;
  }

  html.page-pricing .pricing-plan__head .pricing-plan__cta,
  html.page-pricing .pricing-plan__head .pricing-plan__cta.btn-csam-started,
  html.page-pricing .pricing-plan__head .pricing-plan__cta.btn-deepfake-started,
  html.page-pricing .pricing-plan--featured .pricing-plan__head .pricing-plan__cta.btn-deepfake-started {
    margin-top: 1rem;
    margin-bottom: 3.15rem;
  }

  html.page-pricing .pricing-plan__body {
    padding-top: 0.35rem;
  }
}

/*
 * Index home hero — Pro Max landscape (905–956 wide, height ≤440; e.g. 932×430 / 956×440).
 * Real devices are often 932px wide — do not use min-width 933+ or this band never matches.
 * −4px kicker / −4px headline vs 768–1024 landscape band; GIF via layer + img (min() so rem pull wins).
 */
@media (orientation: landscape) and (max-height: 440px) and (min-width: 905px) and (max-width: 956px) {
  main#main:not(.page-main) .hero-landing {
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(3.85rem, 7.85dvh, 4.95rem)) !important;
    padding-bottom: clamp(0.95rem, 2.35dvh, 1.45rem) !important;
  }

  main#main:not(.page-main) .home-first-viewport > .section-government-wrap {
    margin-top: clamp(0.45rem, 1.15dvh, 0.85rem);
  }

  main#main:not(.page-main) .hero-landing .hero-left {
    margin-top: clamp(3.75rem, 7.95dvh, 5.05rem) !important;
  }

  main#main:not(.page-main) .hero-landing .hero-trusted {
    font-size: calc(calc(clamp(1.04rem, 2.92vw, 1.73rem) - 5.5px) - 4px);
    margin-bottom: clamp(0.15rem, 0.5dvh, 0.32rem) !important;
    transform: translateY(0.2rem);
  }

  main#main:not(.page-main) .hero-landing .hero-title-teal {
    font-size: calc(calc(clamp(2.18rem, 4.68vw, 3.08rem) - 7px) - 4px);
    margin-top: clamp(0.12rem, 0.35dvh, 0.28rem);
    margin-bottom: clamp(0.3rem, 0.6dvh, 0.5rem);
    transform: translateY(0.2rem);
  }

  main#main:not(.page-main) .hero-landing .hero-graphic-layer {
    transform: translateY(2.45rem) !important;
    align-items: flex-start !important;
  }

  main#main:not(.page-main) .hero-landing .hero-graphic-layer .hero-graphic {
    margin-top: clamp(1.5rem, 3.65dvh, 2.9rem) !important;
    max-width: min(248px, 38vw) !important;
    transform: scale(0.88) translate(1.15%, 2.7rem) !important;
    transform-origin: 100% 50%;
  }

  .hero-landing .hero-glass-card__heading {
    font-size: calc(clamp(0.88rem, 1.25vw, 1.02rem) - 1px);
  }

  .hero-landing .hero-glass-card__body {
    font-size: calc(calc(clamp(0.9rem, 1.12vw, 1.02rem) - 1px) - 1px);
  }

  main#main:not(.page-main) .hero-landing .hero-deck-group {
    margin-top: clamp(1.1rem, 2.05vh, 1.6rem);
    margin-bottom: clamp(0.55rem, 0.95vh, 0.82rem);
    transform: translateY(0.15rem);
  }

  main#main:not(.page-main) .hero-landing .hero-buttons {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: min(100%, 36rem);
    margin-top: clamp(1.45rem, 2.65vh, 2.05rem);
    margin-bottom: clamp(0.85rem, 2.05dvh, 1.35rem);
    gap: clamp(0.55rem, 1.35vw, 0.95rem);
    transform: translateY(0.1rem);
  }

  main#main:not(.page-main) .hero-landing .hero-buttons .btn-hero,
  main#main:not(.page-main) .hero-landing .hero-buttons .definition-dropdown {
    width: auto;
    max-width: none;
    flex: 0 1 auto;
    min-width: 0;
  }

  main#main:not(.page-main) .hero-landing .hero-buttons .definition-trigger {
    width: auto;
    justify-content: center;
  }

  .hero-landing .hero-glass-bottom {
    padding-top: clamp(0.55rem, 1.25dvh, 0.85rem);
    padding-bottom: clamp(0.65rem, 1.55dvh, 1.05rem);
  }

  .hero-landing .hero-glass-cards {
    transform: translateY(0);
    padding-top: clamp(1.15rem, 2.45dvh, 1.55rem);
  }

  /*
   * TAP advertiser portal — Pro Max landscape (905–956×≤440): −2px lede + sub; copy/CTA nudged down; smaller feed stack.
   * Wins over 768–1024 landscape TAP band + large-phone short-landscape product-hero margins.
   */
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero.product-hero--advertiser-portal {
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(4.05rem, 8.45dvh, 5.25rem)) !important;
    padding-bottom: clamp(1.25rem, 2.95dvh, 1.85rem) !important;
    min-height: calc(100dvh + 0.65rem) !important;
    overflow-x: clip;
    overflow-y: visible !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__inner {
    transform: translateY(0.2rem);
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__copy {
    margin-top: clamp(3.15rem, 7.15dvh, 4.35rem) !important;
    transform: translateY(0.35rem);
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title {
    transform: translateY(0.25rem);
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title-lede {
    font-size: calc(calc(clamp(1.08rem, 2.42vw, 1.78rem) - 2px) - 2px) !important;
    margin-top: clamp(0.72rem, 1.35vw, 1.05rem) !important;
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__sub {
    font-size: calc(calc(clamp(1.22rem, 2.72vw, 1.84rem) - 5px) - 3px) !important;
    margin-top: clamp(0.32rem, 0.85vh, 0.52rem) !important;
    margin-bottom: clamp(0.55rem, 1.45vh, 0.92rem) !important;
    transform: translateY(0.55rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta {
    transform: translateY(1.05rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__visual {
    transform: translateY(-1.1rem);
    overflow: visible;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__visual-inner.advertiser-portal-hero-feed__inner {
    --ph-illustration-max: min(17.25rem, 27.5vw);
    min-height: clamp(7.15rem, 19.5vh, 10.25rem) !important;
    transform: translate(
      clamp(1.25rem, 2.45vw, 1.95rem),
      clamp(3.6rem, 7.35vh, 5.2rem)
    )
      scale(0.88) !important;
    transform-origin: 100% 0%;
    margin-top: 0 !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-hero-feed {
    gap: clamp(0.52rem, 1.15vw, 0.82rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-hero-feed__card {
    padding: clamp(0.22rem, 0.72vw, 0.38rem);
    border-radius: clamp(0.55rem, 1.28vw, 0.78rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-hero-feed__img {
    border-radius: clamp(0.34rem, 0.92vw, 0.55rem);
  }
}

/*
 * Index home hero — smaller phone landscape (800–904 wide, short height; e.g. 852×393).
 * Mirrors the “Pro Max landscape” hero layout so the same rhythm applies at smaller widths:
 * - undo `html { zoom: 0.88 }` + the aggressive 800–904 collapse rules
 * - keep buttons horizontal, cards below, and ensure the next (government) section doesn't overlap
 */
@media (orientation: landscape) and (max-height: 410px) and (min-width: 800px) and (max-width: 904px) {
  html {
    zoom: 1;
  }

  main#main:not(.page-main) .hero-landing {
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(2.95rem, 6.55dvh, 4.05rem)) !important;
    padding-bottom: clamp(0.95rem, 2.65dvh, 1.55rem) !important;
  }

  main#main:not(.page-main) .home-first-viewport > .section-government-wrap {
    margin-top: clamp(0.45rem, 1.25dvh, 0.9rem);
  }

  main#main:not(.page-main) .hero-landing .hero-left {
    margin-top: clamp(2.85rem, 6.65dvh, 4.05rem) !important;
  }

  main#main:not(.page-main) .hero-landing .hero-trusted {
    font-size: calc(calc(clamp(1.04rem, 2.92vw, 1.73rem) - 5.5px) - 5px);
    margin-bottom: clamp(0.15rem, 0.5dvh, 0.32rem) !important;
    transform: translateY(-0.55rem);
  }

  main#main:not(.page-main) .hero-landing .hero-title__default {
    display: block;
  }

  main#main:not(.page-main) .hero-landing .hero-title__portrait {
    display: none;
  }

  main#main:not(.page-main) .hero-landing .hero-title-teal {
    font-size: calc(calc(clamp(1.82rem, 3.65vw, 2.45rem) - 6px) + 1px);
    line-height: 1.35;
    margin-top: clamp(0.12rem, 0.35dvh, 0.28rem);
    margin-bottom: clamp(0.12rem, 0.35dvh, 0.28rem);
    transform: translateY(-0.25rem);
  }

  main#main:not(.page-main) .hero-landing .hero-graphic-layer {
    transform: translateY(-0.95rem) !important;
    align-items: flex-start !important;
  }

  main#main:not(.page-main) .hero-landing .hero-graphic-layer .hero-graphic {
    margin-top: clamp(-1.45rem, -0.95dvh, -0.85rem) !important;
    max-width: min(230px, 34vw) !important;
    transform: scale(0.88) translate(1.15%, -0.75rem) !important;
    transform-origin: 100% 50%;
  }

  .hero-landing .hero-glass-card__heading {
    font-size: calc(clamp(0.88rem, 1.25vw, 1.02rem) - 3px);
  }

  .hero-landing .hero-glass-card__body {
    font-size: calc(calc(clamp(0.9rem, 1.12vw, 1.02rem) - 1px) - 3px);
  }

  main#main:not(.page-main) .hero-landing .hero-deck-group {
    margin-top: clamp(0rem, 0.35vh, 0.28rem);
    margin-bottom: clamp(0.25rem, 0.55vh, 0.45rem);
    transform: translateY(-1.55rem);
  }

  main#main:not(.page-main) .hero-landing .hero-deck-group .hero-deck {
    font-size: calc(calc(clamp(1.08rem, 2.05vw, 1.42rem) + 3px) - 3px);
  }

  main#main:not(.page-main) .hero-landing .hero-buttons {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: min(100%, 36rem);
    margin-top: clamp(0rem, 0.35vh, 0.32rem);
    margin-bottom: clamp(0.85rem, 2.25dvh, 1.45rem);
    gap: clamp(0.55rem, 1.35vw, 0.95rem);
    transform: translateY(-2.05rem);
  }

  main#main:not(.page-main) .hero-landing .hero-buttons .btn-hero,
  main#main:not(.page-main) .hero-landing .hero-buttons .definition-dropdown {
    width: auto;
    max-width: none;
    flex: 0 1 auto;
    min-width: 0;
  }

  main#main:not(.page-main) .hero-landing .hero-buttons .definition-trigger {
    width: auto;
    justify-content: center;
  }

  .hero-landing .hero-glass-bottom {
    padding-top: clamp(0.25rem, 0.65dvh, 0.45rem);
    padding-bottom: clamp(0.65rem, 1.55dvh, 1.05rem);
    transform: translateY(-0.45rem);
  }

  .hero-landing .hero-glass-cards {
    transform: translateY(-0.45rem);
    padding-top: clamp(0.75rem, 1.65dvh, 1.05rem);
  }

  /*
   * TAP advertiser portal — smaller phone landscape (800–904×≤410; e.g. 852×393).
   * Mirrors Pro Max landscape TAP band (905–956×≤440); wins over 768–1024 landscape TAP + 800–904 zoom/collapse.
   */
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero.product-hero--advertiser-portal {
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(4.05rem, 8.45dvh, 5.25rem)) !important;
    padding-bottom: clamp(1.25rem, 2.95dvh, 1.85rem) !important;
    min-height: calc(100dvh + 0.65rem) !important;
    overflow-x: clip;
    overflow-y: visible !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__inner {
    transform: translateY(0.2rem);
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__copy {
    margin-top: clamp(3.15rem, 7.15dvh, 4.35rem) !important;
    transform: translateY(0.35rem);
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title {
    transform: translateY(0.25rem);
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__title-lede {
    font-size: calc(calc(calc(clamp(1.08rem, 2.42vw, 1.78rem) - 2px) - 2px) - 1px) !important;
    margin-top: clamp(0.72rem, 1.35vw, 1.05rem) !important;
  }

  .product-hero--advertiser-portal.product-hero--csam .product-hero__sub {
    font-size: calc(calc(clamp(1.22rem, 2.72vw, 1.84rem) - 5px) - 3px) !important;
    margin-top: clamp(0.32rem, 0.85vh, 0.52rem) !important;
    margin-bottom: clamp(0.55rem, 1.45vh, 0.92rem) !important;
    transform: translateY(0.55rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta {
    transform: translateY(-0.25rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__visual {
    transform: translateY(-1.1rem);
    overflow: visible;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__visual-inner.advertiser-portal-hero-feed__inner {
    --ph-illustration-max: min(17.25rem, 27.5vw);
    min-height: clamp(7.15rem, 19.5vh, 10.25rem) !important;
    transform: translate(
      clamp(1.25rem, 2.45vw, 1.95rem),
      clamp(3.6rem, 7.35vh, 5.2rem)
    )
      scale(0.88) !important;
    transform-origin: 100% 0%;
    margin-top: 0 !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-hero-feed {
    gap: clamp(0.52rem, 1.15vw, 0.82rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-hero-feed__card {
    padding: clamp(0.22rem, 0.72vw, 0.38rem);
    border-radius: clamp(0.55rem, 1.28vw, 0.78rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .advertiser-portal-hero-feed__img {
    border-radius: clamp(0.34rem, 0.92vw, 0.55rem);
  }
}

@media (max-width: 767px) {
  .pricing-page {
    padding-left: clamp(1rem, 4vw, 1.5rem);
    padding-right: clamp(1rem, 4vw, 1.5rem);
  }
}

/*
 * CSAM + Deepfake product heroes — desktop (≥1367): restore headroom under the fixed nav.
 * Laptop bands below 1728px had nudged copy up; this wins at source order for typical desktop widths.
 */
@media (min-width: 1367px) {
  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero {
    padding-top: clamp(3.75rem, 5.25vh, 4.5rem);
  }

  .product-hero--csam:not(.product-hero--advertiser-portal) .product-hero__copy {
    margin-top: calc(8.75rem + 3.35rem);
  }

  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__inner {
    padding-top: 0.85rem;
  }
}

/*
 * TAP advertiser portal — hero feed stack (bad-actor cards + ad cycle): desktop only.
 * Base `.product-hero--advertiser-portal … hero-feed__inner` translate edits were invisible when
 * (a) viewport ≤1280 (later band sets translate(0,0) with equal specificity) or
 * (b) ≥1367 but extra translateY only clipped under `.product-hero { overflow: hidden }`.
 * margin-top on `.product-hero__visual` + EOF transform wins over CSAM laptop bands.
 */
@media (min-width: 1367px) {
  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__visual {
    margin-top: 0;
    padding-top: 0;
  }

  .product-hero--advertiser-portal.product-hero--csam
    .product-hero__visual-inner.advertiser-portal-hero-feed__inner {
    transform: translate(
      clamp(-0.5rem, -1.2vw, 0),
      clamp(6.5rem, 13.5vh, 10.25rem)
    ) !important;
  }
}

/*
 * CSAM detection product hero — desktop (≥1367): PNG illustration stack lower under restored copy.
 * Laptop bands (1367–1727) pull translateY up vs base; margin on `.product-hero__visual` avoids clip under
 * `.product-hero { overflow: hidden }`. TAP / advertiser portal excluded. Viewports ≤1366px unchanged.
 */
@media (min-width: 1367px) {
  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__visual {
    margin-top: clamp(0.75rem, 2.25vh, 2rem);
    padding-top: clamp(0.5rem, 1.25vh, 1rem);
  }

  .page-main--product-hero:has(.product-hero--csam):not(:has(.product-hero--advertiser-portal))
    .product-hero__visual-inner {
    transform: translate(
      clamp(-2rem, -5vw, -0.85rem),
      clamp(7.5rem, 18.5vh, 14rem)
    ) !important;
  }
}

/*
 * TAP advertiser portal — hero lede + GET ACCESS TODAY pill (mobile type only).
 * Overrides (lost to later rules without !important):
 * — ~13800 phablet / ≤430 calc(−4px/−3px) bands
 * — ~18809 CSAM ≤430 `.product-hero__title-lede { calc(100% - 1px) }` (TAP has `.product-hero--csam` too)
 * — ~19498 tall ≤430×≥844 CTA `calc(home-primary − 3px − 3px)` (wrong base vs TAP pill)
 * — Prior EOF here used −2px/−1px !important and masked the −4px/−3px intent
 *
 * Lede base at 393×852 (≤430 band): clamp(1.12rem, 3.85vw, 1.38rem) + 1px → 18.92px; −4px → 14.92px.
 * CTA base at 393×852: clamp(0.94rem, 1.88vw, 1.32rem) → 15.04px; −1px → 14.04px (was −2px).
 * Viewports ≥768px unchanged.
 */
@media (max-width: 767px) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero.product-hero--advertiser-portal.product-hero--csam
    .product-hero__title-lede {
    font-size: calc(clamp(1.28rem, 2.55vw, 1.95rem) - 2px) !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero {
    font-size: clamp(0.94rem, 1.88vw, 1.32rem) !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero:hover,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero:hover {
    font-size: clamp(0.98rem, 1.98vw, 1.36rem) !important;
  }
}

@media (max-width: 767px) and (min-width: 441px) and (orientation: portrait) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero.product-hero--advertiser-portal.product-hero--csam
    .product-hero__title-lede {
    font-size: clamp(calc(1.28rem - 2px), calc(2.55vw - 2px), calc(1.95rem - 2px)) !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero.product-hero--advertiser-portal.product-hero--csam
    .product-hero__sub {
    font-size: calc(clamp(1.28rem, 2.55vw, 1.95rem) - 2px) !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero {
    font-size: clamp(calc(0.94rem - 1px), calc(1.88vw - 1px), calc(1.32rem - 1px)) !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero:hover,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero:hover {
    font-size: clamp(calc(0.98rem - 1px), calc(1.98vw - 1px), calc(1.36rem - 1px)) !important;
  }
}

@media (max-width: 440px) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero.product-hero--advertiser-portal.product-hero--csam
    .product-hero__title {
    margin-bottom: clamp(0.42rem, 0.88vw, 0.62rem) !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero.product-hero--advertiser-portal.product-hero--csam
    .product-hero__title-lede {
    font-size: calc(calc(clamp(1.12rem, 3.85vw, 1.38rem) + 1px) - 1px) !important;
    line-height: 1.38 !important;
    margin-top: clamp(1.22rem, 2.25vw, 1.72rem) !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero.product-hero--advertiser-portal.product-hero--csam
    .product-hero__sub {
    font-size: calc(clamp(1.18rem, 3.95vw, 1.42rem) - 1px) !important;
    margin-top: clamp(0.42rem, 0.72vw, 0.52rem) !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero {
    margin-top: clamp(2.15rem, 4vw, 3.05rem) !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__visual {
    margin-top: clamp(0.92rem, 2.05vw, 1.38rem) !important;
    padding-top: clamp(1.35rem, 3.15vw, 2.1rem) !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-hero-feed__inner.product-hero__visual-inner {
    --ph-illustration-max: min(22.85rem, min(100vw - 1rem, 60vmin)) !important;
    min-height: clamp(11.95rem, 45.5vw, 16.55rem) !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero {
    font-size: clamp(calc(0.94rem + 2px), calc(1.88vw + 2px), calc(1.32rem + 2px)) !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero:hover,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero:hover {
    font-size: clamp(calc(0.98rem + 2px), calc(1.98vw + 2px), calc(1.36rem + 2px)) !important;
  }
}

/* Tall ≤430 (≥844px height): beats ~19498 home-primary double −3px CTA on Pro Max class. */
@media (max-width: 440px) and (min-height: 844px) {
  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero {
    font-size: clamp(calc(0.94rem + 2px), calc(1.88vw + 2px), calc(1.32rem + 2px)) !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal) .product-hero__cta.btn-hero:hover,
  html[data-theme='light']
    .page-main--product-hero:has(.product-hero--advertiser-portal)
    .product-hero__cta.btn-hero:hover {
    font-size: clamp(calc(0.98rem + 2px), calc(1.98vw + 2px), calc(1.36rem + 2px)) !important;
  }
}

/*
 * TAP advertiser portal — blind-spot keyhole (768–1024 portrait + landscape, EOF).
 * Wins cascade over hero `.advertiser-portal-hero__keyhole` translateX, 769+ visual-inner pull,
 * base art-shift −11/19, and desktop bleed padding.
 * Absolute keyhole-slot in square artboard (height:100%); art-shift translateX none. Modest left nudge:
 * visual column flex-start/center + visual-inner translateX(clamp) + art-shift flex-start/center.
 */
@media (min-width: 768px) and (max-width: 1024px) {
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    > .advertiser-portal-stack-section.page-section--api-split
    > .page-inner.page-api-split.advertiser-portal-stack-section__inner {
    transform: none !important;
    padding-left: var(--page-text-inset-left);
    padding-right: var(--page-text-inset-left);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section.page-section--api-split {
    overflow-x: visible;
    overflow-y: visible;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section__inner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: clamp(0.25rem, 1.15vw, 0.65rem);
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section__visual {
    --ap-stack-col-outer: min(17.5rem, 34vw);
    flex: 0 0 var(--ap-stack-col-outer) !important;
    width: var(--ap-stack-col-outer) !important;
    max-width: var(--ap-stack-col-outer) !important;
    box-sizing: border-box;
    padding-left: 0 !important;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    justify-content: flex-start;
    align-items: center;
    overflow-x: visible;
    overflow-y: visible;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section__visual-inner {
    justify-content: flex-start;
    align-items: center;
    min-height: clamp(6.75rem, 14.5vh, 10.25rem);
    padding-inline: 0;
    /* Wins over `@media (min-width: 769px)` stack `translateX(2.85rem…9.25rem)` (pushes art right). */
    transform: translateX(clamp(-2.75rem, -5.5vw, -2rem)) !important;
    overflow: visible;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__scene {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section__visual,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section__visual-inner,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__scene,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__artboard,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__layers,
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__art-shift {
    overflow: visible;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__art-shift {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transform: none !important;
    overflow: visible;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__keyhole-slot {
    position: absolute !important;
    left: calc(50% - clamp(0.85rem, 2vw, 1.15rem)) !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% * 1294 / 2219);
    max-width: 100%;
    height: 100%;
    margin-inline: 0;
  }

  /* Hero-only keyhole nudge — was clipping left under html overflow-x:hidden (tablet band only). */
  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__keyhole-slot
    .advertiser-portal-hero__keyhole {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__keyhole-slot
    .advertiser-portal-hero__key-moor
    .advertiser-portal-hero__key {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__keyhole-slot
    .advertiser-portal-hero__key-moor {
    left: calc(50% + clamp(0.55rem, 1.35vw, 0.8rem)) !important;
    width: 100% !important;
    transform: translateX(-50%) !important;
    top: 0;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__keyhole-slot
    .advertiser-portal-hero__key-moor
    .advertiser-portal-hero__key {
    left: calc(50% + clamp(2.45rem, 5.35vw, 3.15rem)) !important;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    .advertiser-portal-hero__art-shift
    > .advertiser-portal-hero__beam {
    left: clamp(2.85rem, 6.25vw, 3.75rem) !important;
    width: 165%;
  }

  .page-main--product-hero:has(.product-hero--advertiser-portal)
    .advertiser-portal-stack-section
    > .advertiser-portal-stack-section__inner
    > .advertiser-portal-stack-section__copy.page-api-split__copy {
    transform: translate(
      -clamp(0.35rem, 0.85vw, 0.65rem),
      calc(-1 * clamp(0.85rem, 1.85vw, 1.45rem))
    );
    text-align: left;
  }
}