/* ==========================================================================
   Opal — Batch 1: Global foundation
   Tokens, buttons, typography, nav, shared modules.
   Loaded after style.css + assets/css/main.css so these rules win.
   ========================================================================== */

:root {
  --opal-blue: #2A70EA;
  --opal-blue-hover: #1F5BC9;
  --opal-blue-soft: rgba(42, 112, 234, 0.08);
  --opal-blue-glow: rgba(42, 112, 234, 0.45);
  --opal-blue-glow-soft: rgba(42, 112, 234, 0.32);
  --opal-blue-glow-faint: rgba(42, 112, 234, 0.18);
  --opal-text-glow: rgba(42, 112, 234, 0.35);

  --opal-white: #ffffff;
  --opal-dark: #18222A;
  --opal-darkgray: #0B101B;

  --opal-radius-btn: 4px;
  --opal-font-body: "Apercu", system-ui, sans-serif;
  --opal-font-display: "VC Garamond Condensed", "Garamond", serif;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.opal-btn,
.opal-btn--primary,
.opal-btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.5em;
  font-family: var(--opal-font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  border-radius: var(--opal-radius-btn);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease,
    transform 150ms ease;
}

.opal-btn--primary {
  background-color: var(--opal-blue);
  color: var(--opal-white);
  border-color: var(--opal-blue);
}

.opal-btn--primary:hover,
.opal-btn--primary:focus-visible {
  background-color: var(--opal-blue-hover);
  border-color: var(--opal-blue-hover);
  color: var(--opal-white);
  box-shadow: 0 0 18px var(--opal-blue-glow);
  transform: translateY(-1px);
  outline: none;
}

.opal-btn--secondary {
  background-color: transparent;
  color: var(--opal-blue);
  border-color: var(--opal-blue);
}

.opal-btn--secondary:hover,
.opal-btn--secondary:focus-visible {
  background-color: var(--opal-blue-soft);
  color: var(--opal-blue);
  box-shadow: 0 0 14px var(--opal-blue-glow-soft);
  transform: translateY(-1px);
  outline: none;
}

.opal-btn-arrow {
  display: inline-block;
  transition: transform 200ms ease;
}

.opal-btn:hover .opal-btn-arrow,
.opal-btn--primary:hover .opal-btn-arrow,
.opal-btn--secondary:hover .opal-btn-arrow {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Typography globals
   -------------------------------------------------------------------------- */

h1 {
  font-weight: 400;
}

/* Tighter line-heights on large display text */
h1,
.opal-page-header h1,
.opal-hero h1,
.opal-home-hero h1 {
  line-height: 1.02;
}

h2,
.opal-section h2 {
  line-height: 1.06;
}

/* Large stat / number callouts */
.opal-stat,
.stat-large,
.opal-feature-grid .stat,
.opal-feature-callout .stat {
  line-height: 0.95;
}

/* 6-up icon block — keep labels from breaking the grid */
.opal-feature-grid.six-up .grid-feature,
.opal-feature-grid--six-up .grid-feature {
  min-height: 11rem;
}

.opal-feature-grid.six-up .grid-feature h3,
.opal-feature-grid--six-up .grid-feature h3 {
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  max-width: 18ch;
  line-height: 1.15;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Nav & header
   -------------------------------------------------------------------------- */

/* Announcement bar — smaller text, hover highlight */
#notification-bar.site-notification {
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  transition:
    background-color 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease;
}

#notification-bar.site-notification p {
  font-size: inherit;
  margin: 0;
}

/* Wrapped in an <a>, so hover is on the parent */
a:hover > #notification-bar.site-notification,
a:focus-visible > #notification-bar.site-notification {
  background-color: var(--opal-blue-glow-faint);
  color: var(--opal-white);
  box-shadow: inset 0 0 24px var(--opal-blue-glow-faint);
}

/* Top-level nav hover — soft color glow */
#masthead .main-nav .nav-menu > li > a {
  transition: color 200ms ease, text-shadow 220ms ease, background 200ms ease;
}

#masthead .main-nav .nav-menu > li > a:hover,
#masthead .main-nav .nav-menu > li > a:focus-visible {
  background: transparent;
  color: var(--opal-blue);
  text-shadow: 0 0 12px var(--opal-text-glow);
  outline: none;
}

/*
 * "Talk to Opal" CTA menu item.
 * In WP Admin → Menus → expand the "Talk to Opal" item → add `cta-menu-item`
 * to the CSS Classes field (toggle "CSS Classes" on via Screen Options).
 */
.nav-menu .cta-menu-item > a,
.nav-menu .menu-item-talk-to-opal > a {
  border: 1px solid var(--opal-blue);
  color: var(--opal-blue);
  border-radius: var(--opal-radius-btn);
  padding: 0.55em 1em;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    box-shadow 220ms ease,
    border-color 200ms ease;
}

.nav-menu .cta-menu-item > a::after,
.nav-menu .menu-item-talk-to-opal > a::after {
  content: " \2192"; /* → */
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 200ms ease;
}

.nav-menu .cta-menu-item > a:hover,
.nav-menu .cta-menu-item > a:focus-visible,
.nav-menu .menu-item-talk-to-opal > a:hover,
.nav-menu .menu-item-talk-to-opal > a:focus-visible {
  background-color: var(--opal-blue);
  color: var(--opal-white);
  box-shadow: 0 0 16px var(--opal-blue-glow);
  text-shadow: none;
  outline: none;
}

.nav-menu .cta-menu-item > a:hover::after,
.nav-menu .menu-item-talk-to-opal > a:hover::after {
  transform: translateX(2px);
}

/* Mobile nav — top-level items in VC Garamond Condensed */
.mobile-menu-overlay .mobile-nav-menu > li > a {
  font-family: var(--opal-font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  letter-spacing: -0.005em;
}

/* --------------------------------------------------------------------------
   Nav continuity — only explicit opt-ins override existing nav styles.
   `hero-light` is the default and intentionally a no-op so we don't
   regress pages that already work with the existing nav treatment.
   `hero-dark` is an explicit override for pages that want the nav to
   sit transparently over a dark hero with light logo + links.
   -------------------------------------------------------------------------- */

/*
 * Make the masthead itself dark on hero-dark pages so the nav area
 * shows dark (matching the hero) and white logo + links are visible
 * against it. Scoped to masthead only — previous body bg approach
 * broke content sections below the hero that expect a white page bg.
 */
body.hero-dark #masthead.site-header {
  background-color: var(--opal-darkgray);
  border-bottom: none;
  box-shadow: none;
  position: relative;
  z-index: 10;
}

body.hero-dark #masthead .nav-menu > li > a,
body.hero-dark #masthead .main-nav .nav-menu > li > a,
body.hero-dark #masthead .nav-menu > li > a:link,
body.hero-dark #masthead .nav-menu > li > a:visited,
body.hero-dark #masthead .nav-menu .nav-link,
body.hero-dark #masthead .nav-menu .nav-link * {
  color: #ffffff !important;
}

/* Dropdown caret/arrow indicators next to Platform / Solutions / About */
body.hero-dark #masthead .nav-menu .nav-link::before,
body.hero-dark #masthead .nav-menu .nav-link::after,
body.hero-dark #masthead .nav-menu > li > a::before,
body.hero-dark #masthead .nav-menu > li > a::after,
body.hero-dark #masthead .menu-item-has-children > a::after,
body.hero-dark #masthead .nav-menu .dropdown-arrow,
body.hero-dark #masthead .nav-menu .arrow {
  color: #ffffff !important;
  fill: #ffffff !important;
  border-color: #ffffff !important;
}

body.hero-dark #masthead .nav-menu svg,
body.hero-dark #masthead .nav-menu svg path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

body.hero-dark #masthead .nav-menu > li > a:hover,
body.hero-dark #masthead .nav-menu > li > a:focus-visible {
  color: #cce7ff !important;
  text-shadow: 0 0 12px rgba(204, 231, 255, 0.5);
}

/* --------------------------------------------------------------------------
   Homepage integrations module — full-bleed blue section
   Blue gradient bg with scattered square decorations, uniform white tile
   cards with color logos, white Garamond headline, light body,
   text-link CTA with chevron. Specificity (.site-main #post-431) beats
   existing narrow-width rules.
   -------------------------------------------------------------------------- */

.site-main #post-431 .integrations {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -50px;
  margin-bottom: -50px;
  max-width: none;
  background:
    radial-gradient(900px 420px at 50% 30%, rgba(58, 132, 255, 0.22), transparent 70%),
    radial-gradient(600px 320px at 18% 78%, rgba(120, 80, 255, 0.14), transparent 72%),
    radial-gradient(700px 360px at 82% 82%, rgba(42, 112, 234, 0.16), transparent 72%),
    linear-gradient(180deg, #1A1438 0%, #110B2A 50%, #07051A 100%);
  padding: clamp(4.5rem, 8vw, 7rem) clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
  border-radius: 0;
}

/* Strip any border-radius inherited from parent .opal-container-block */
.site-main #post-431 .opal-container-block.integrations {
  border-radius: 0;
}

/* Hide wp-block-spacer adjacent to this section so there are no
   white gaps top/bottom. Uses :has() for the spacer immediately
   before — sibling selector covers the one after. */
.site-main #post-431 .opal-container-block.integrations + .wp-block-spacer,
.site-main #post-431 .wp-block-spacer:has(+ .opal-container-block.integrations) {
  display: none;
}

/* ~100 scattered decorative squares for dense texture, ambient drift */
.site-main #post-431 .integrations::before {
  content: "";
  position: absolute;
  inset: -40px;
  will-change: transform;
  animation: opal-integrations-squares-drift 22s ease-in-out infinite alternate;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 700' preserveAspectRatio='xMidYMid slice'><g fill='%23ffffff'><rect x='80' y='80' width='18' height='18' opacity='0.10'/><rect x='320' y='200' width='14' height='14' opacity='0.12'/><rect x='600' y='50' width='20' height='20' opacity='0.07'/><rect x='820' y='80' width='16' height='16' opacity='0.10'/><rect x='1040' y='70' width='12' height='12' opacity='0.13'/><rect x='1240' y='130' width='14' height='14' opacity='0.09'/><rect x='1440' y='170' width='20' height='20' opacity='0.07'/><rect x='60' y='280' width='14' height='14' opacity='0.11'/><rect x='290' y='420' width='10' height='10' opacity='0.14'/><rect x='510' y='410' width='8' height='8' opacity='0.16'/><rect x='740' y='420' width='14' height='14' opacity='0.10'/><rect x='980' y='420' width='24' height='24' opacity='0.07'/><rect x='1220' y='400' width='18' height='18' opacity='0.08'/><rect x='1460' y='400' width='10' height='10' opacity='0.14'/><rect x='110' y='500' width='20' height='20' opacity='0.08'/><rect x='340' y='520' width='16' height='16' opacity='0.11'/><rect x='580' y='540' width='14' height='14' opacity='0.10'/><rect x='820' y='560' width='8' height='8' opacity='0.16'/><rect x='1060' y='540' width='18' height='18' opacity='0.08'/><rect x='1300' y='560' width='16' height='16' opacity='0.08'/><rect x='1540' y='540' width='22' height='22' opacity='0.07'/><rect x='1580' y='240' width='14' height='14' opacity='0.11'/><rect x='130' y='30' width='10' height='10' opacity='0.12'/><rect x='370' y='40' width='14' height='14' opacity='0.09'/><rect x='560' y='150' width='18' height='18' opacity='0.08'/><rect x='760' y='100' width='14' height='14' opacity='0.10'/><rect x='990' y='80' width='10' height='10' opacity='0.14'/><rect x='1180' y='40' width='12' height='12' opacity='0.12'/><rect x='1390' y='240' width='10' height='10' opacity='0.13'/><rect x='250' y='480' width='14' height='14' opacity='0.11'/><rect x='450' y='480' width='12' height='12' opacity='0.09'/><rect x='680' y='370' width='16' height='16' opacity='0.08'/><rect x='910' y='370' width='14' height='14' opacity='0.09'/></g><g fill='%237EB0FF'><rect x='160' y='140' width='10' height='10' opacity='0.16'/><rect x='420' y='110' width='8' height='8' opacity='0.18'/><rect x='700' y='180' width='10' height='10' opacity='0.16'/><rect x='940' y='160' width='22' height='22' opacity='0.10'/><rect x='1140' y='200' width='18' height='18' opacity='0.12'/><rect x='1340' y='60' width='10' height='10' opacity='0.18'/><rect x='1520' y='110' width='14' height='14' opacity='0.11'/><rect x='180' y='350' width='22' height='22' opacity='0.08'/><rect x='400' y='300' width='16' height='16' opacity='0.10'/><rect x='620' y='320' width='20' height='20' opacity='0.07'/><rect x='860' y='340' width='10' height='10' opacity='0.16'/><rect x='1100' y='320' width='12' height='12' opacity='0.14'/><rect x='1340' y='320' width='14' height='14' opacity='0.11'/><rect x='1560' y='330' width='18' height='18' opacity='0.09'/><rect x='220' y='580' width='12' height='12' opacity='0.16'/><rect x='460' y='620' width='10' height='10' opacity='0.18'/><rect x='700' y='620' width='20' height='20' opacity='0.07'/><rect x='940' y='620' width='14' height='14' opacity='0.12'/><rect x='1180' y='620' width='12' height='12' opacity='0.16'/><rect x='1420' y='620' width='10' height='10' opacity='0.16'/><rect x='40' y='420' width='12' height='12' opacity='0.13'/><rect x='270' y='270' width='12' height='12' opacity='0.12'/><rect x='470' y='240' width='8' height='8' opacity='0.18'/><rect x='660' y='240' width='10' height='10' opacity='0.16'/><rect x='870' y='240' width='16' height='16' opacity='0.08'/><rect x='1090' y='240' width='20' height='20' opacity='0.07'/><rect x='1280' y='220' width='14' height='14' opacity='0.11'/><rect x='1490' y='40' width='16' height='16' opacity='0.10'/><rect x='150' y='240' width='10' height='10' opacity='0.16'/><rect x='370' y='370' width='8' height='8' opacity='0.18'/><rect x='550' y='370' width='10' height='10' opacity='0.15'/><rect x='790' y='480' width='10' height='10' opacity='0.16'/><rect x='1020' y='480' width='12' height='12' opacity='0.13'/><rect x='1240' y='480' width='16' height='16' opacity='0.08'/></g><g fill='%23B89AFF'><rect x='240' y='60' width='24' height='24' opacity='0.08'/><rect x='520' y='220' width='12' height='12' opacity='0.10'/><rect x='1340' y='60' width='10' height='10' opacity='0'/><rect x='20' y='620' width='14' height='14' opacity='0.14'/><rect x='20' y='160' width='12' height='12' opacity='0.15'/><rect x='1580' y='460' width='16' height='16' opacity='0.10'/><rect x='60' y='550' width='16' height='16' opacity='0.09'/><rect x='180' y='640' width='10' height='10' opacity='0.15'/><rect x='280' y='660' width='14' height='14' opacity='0.10'/><rect x='400' y='560' width='8' height='8' opacity='0.18'/><rect x='520' y='670' width='12' height='12' opacity='0.12'/><rect x='640' y='560' width='10' height='10' opacity='0.15'/><rect x='760' y='670' width='14' height='14' opacity='0.10'/><rect x='880' y='540' width='10' height='10' opacity='0.16'/><rect x='1000' y='670' width='12' height='12' opacity='0.12'/><rect x='1120' y='540' width='14' height='14' opacity='0.10'/><rect x='1240' y='670' width='10' height='10' opacity='0.16'/><rect x='1360' y='540' width='16' height='16' opacity='0.08'/><rect x='1480' y='670' width='12' height='12' opacity='0.13'/><rect x='1560' y='620' width='14' height='14' opacity='0.11'/><rect x='1560' y='160' width='10' height='10' opacity='0.15'/><rect x='1560' y='400' width='10' height='10' opacity='0.15'/><rect x='1560' y='500' width='12' height='12' opacity='0.12'/><rect x='10' y='40' width='12' height='12' opacity='0.13'/><rect x='10' y='340' width='14' height='14' opacity='0.12'/><rect x='10' y='540' width='10' height='10' opacity='0.15'/><rect x='10' y='240' width='8' height='8' opacity='0.18'/><rect x='100' y='180' width='8' height='8' opacity='0.17'/><rect x='100' y='450' width='10' height='10' opacity='0.15'/><rect x='370' y='600' width='10' height='10' opacity='0.16'/><rect x='890' y='40' width='12' height='12' opacity='0.13'/><rect x='1130' y='370' width='10' height='10' opacity='0.16'/><rect x='1380' y='460' width='8' height='8' opacity='0.18'/><rect x='1510' y='250' width='10' height='10' opacity='0.15'/></g></svg>");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

@keyframes opal-integrations-squares-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(10px, -8px, 0) scale(1.015);
  }
  100% {
    transform: translate3d(-8px, 6px, 0) scale(1.005);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-main #post-431 .integrations::before {
    animation: none;
  }
}

.site-main #post-431 .integrations > .wrapper.container-fluid,
.site-main #post-431 .integrations .wrapper.container-fluid {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  display: block;
  text-align: center;
}

.site-main #post-431 .integrations .integrations-tiles-wrapper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.6rem);
  width: 100%;
  max-width: 760px;
  padding: 0;
  margin: 0 auto clamp(1.75rem, 3.5vw, 3rem);
  background: transparent;
  align-items: stretch;
  justify-items: stretch;
  flex-wrap: nowrap;
}

/* Uniform white tile cards — square via aspect-ratio, capped width */
.site-main #post-431 .integrations .integrations-tiles-wrapper .tile {
  background: var(--opal-white);
  border-radius: 14px;
  padding: clamp(0.85rem, 1.6vw, 1.15rem);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  max-width: 130px;
  min-width: 0;
  justify-self: center;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.45),
    0 2px 5px rgba(0, 0, 0, 0.28);
  transition:
    transform 460ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-main #post-431 .integrations .integrations-tiles-wrapper .tile:hover,
.site-main #post-431 .integrations .integrations-tiles-wrapper .tile:focus-within {
  transform: none;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.45),
    0 2px 5px rgba(0, 0, 0, 0.28),
    0 0 22px rgba(140, 170, 255, 0.32);
}

/* Lock icon aspect ratio — beat any inherited img width rules */
.site-main #post-431 .integrations .integrations-tiles-wrapper .tile img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

/* Headline */
.site-main #post-431 .integrations h3 {
  display: block;
  font-family: var(--opal-font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--opal-white);
  text-align: center;
  max-width: 28ch;
  margin: 0 auto clamp(0.85rem, 1.6vw, 1.25rem);
  padding: 0;
}

/* Body — must override existing .site-main #post-431 .integrations p
   rule that sets padding: 12px 120px (which was squeezing the
   content area to one-word-per-line at certain viewports). */
.site-main #post-431 .integrations p {
  display: block;
  color: rgba(255, 255, 255, 0.74);
  text-align: center;
  max-width: 58ch;
  width: 100%;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  padding: 0;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  line-height: 1.6;
  box-sizing: border-box;
}

/* Media-query specificity match to defeat existing @media padding rule */
@media (min-width: 992px) {
  .site-main #post-431 .integrations p {
    padding: 0;
  }
}

/* Text-link "Learn More >" CTA */
.site-main #post-431 .integrations a.button {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--opal-white);
  font-weight: 600;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  text-decoration: none;
  margin: 0 auto;
  transition: color 200ms ease, text-shadow 220ms ease, transform 180ms ease;
}

.site-main #post-431 .integrations a.button::after {
  content: " \2192"; /* → */
  display: inline-block;
  margin-left: 0.3em;
  font-weight: 400;
  transition: transform 200ms ease;
}

.site-main #post-431 .integrations a.button:hover,
.site-main #post-431 .integrations a.button:focus,
.site-main #post-431 .integrations a.button:focus-visible,
.site-main #post-431 .integrations a.button:active {
  color: var(--opal-white);
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  text-decoration: none;
}

.site-main #post-431 .integrations a.button:hover::after,
.site-main #post-431 .integrations a.button:focus-visible::after {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Icon value props — optional 3-up row rendered below hero/feature-callout
   body copy via ACF repeater. Inherits color from surrounding context, so
   it works in both light-hero (dark text) and dark-hero (light text) layouts.
   -------------------------------------------------------------------------- */

.opal-icon-value-props {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
  padding: 0;
  align-items: start;
}

.opal-icon-value-prop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  text-align: left;
}

.opal-icon-value-prop__icon {
  display: block;
  width: clamp(36px, 4vw, 56px);
  height: auto;
  max-height: 56px;
  object-fit: contain;
}

.opal-icon-value-prop__text {
  margin: 0;
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  line-height: 1.45;
  color: inherit;
  font-weight: 500;
}

/* On dark-hero pages, soften body color slightly */
body.hero-dark .opal-icon-value-prop__text {
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 600px) {
  .opal-icon-value-props {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   Product page (/product/) — SIMPLIFIED
   White bg, default light nav, dark eyebrow + headline, product mockup
   hidden, hero flows straight into the Plans section below.
   -------------------------------------------------------------------------- */

/* Strip the bg PNG and collapse the hero to its natural content height */
body.page-id-10031 #post-10031 .hero,
body.page-product #post-10031 .hero,
.site-main #post-10031 .hero {
  background: none !important;
  padding-top: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Hide the product mockup figure entirely */
body.page-id-10031 #post-10031 .hero .product-hero,
body.page-id-10031 #post-10031 .hero figure.product-hero,
body.page-product #post-10031 .hero .product-hero,
body.page-product #post-10031 .hero figure.product-hero {
  display: none !important;
}

/* Hero text: static layout, dark colors, breathing padding */
body.page-id-10031 #post-10031 .hero .hero-text,
body.page-product #post-10031 .hero .hero-text {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem) !important;
  text-align: center;
  color: var(--opal-dark) !important;
  font-weight: 400 !important;
}

body.page-id-10031 #post-10031 .hero .hero-text h1,
body.page-id-10031 #post-10031 .hero .hero-text h2,
body.page-id-10031 #post-10031 .hero .hero-text h1 .highlight,
body.page-id-10031 #post-10031 .hero .hero-text h1 span.highlight,
body.page-product #post-10031 .hero .hero-text h1,
body.page-product #post-10031 .hero .hero-text h2,
body.page-product #post-10031 .hero .hero-text h1 .highlight,
body.page-product #post-10031 .hero .hero-text h1 span.highlight {
  color: var(--opal-dark) !important;
}

/* Spacer below the hero is no longer needed since there's no image overlap */
body.page-id-10031 #post-10031 .hero + .spacer,
body.page-id-10031 #post-10031 #spacer.spacer,
body.page-product #post-10031 .hero + .spacer,
body.page-product #post-10031 #spacer.spacer {
  display: none !important;
  height: 0 !important;
}

/* --------------------------------------------------------------------------
   Batch 3 — Plans / Boards / Calendar
   Mid-page demo CTA stripe: subtle rotating conic gradient bg.

   DEFERRED 2026-05-15 — selectors `.opal-demo-cta` do not exist on
   /campaign-planner/, /project-boards/, or /content-calendar/ (verified
   via curl). Rules below render nothing today. Re-target to the real
   demo-CTA block class after DB sync; design intent preserved here.
   -------------------------------------------------------------------------- */

body.page-campaign-planner .opal-demo-cta,
body.page-project-boards .opal-demo-cta,
body.page-content-calendar .opal-demo-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body.page-campaign-planner .opal-demo-cta::before,
body.page-project-boards .opal-demo-cta::before,
body.page-content-calendar .opal-demo-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    rgba(42, 112, 234, 0.55),
    rgba(122, 160, 255, 0.4),
    rgba(184, 154, 255, 0.5),
    rgba(42, 112, 234, 0.55)
  );
  animation: opal-demo-stripe-rotate 8s linear infinite;
  opacity: 0.22;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}

@keyframes opal-demo-stripe-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  body.page-campaign-planner .opal-demo-cta::before,
  body.page-project-boards .opal-demo-cta::before,
  body.page-content-calendar .opal-demo-cta::before {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Batch 4 — Enterprise page

   Real DOM (audited 2026-05-15 via curl):
   - Customer Love section: `.pink-wrapper` (with `.thin-h3` + `.bold-h3` quote)
   - Change management: `.strategies-wrap` (with `.thin-h3` + `.bold-h3` + <p>)
   - 89% stat / quote: `.meeting-wrap h3 > strong`
   - 3-up icon grids: `.opal-feature-grid.icons .grid-feature` (used twice — Built for
     Enterprise + Enterprise-grade Security), cell holds `.tile > img` + `.info-wrapper > h3 + p`
   - Integrations Learn More: `.block-integrations-wrapper > a` (single direct-child anchor)
   - Avatars on Success section: NOT in static DOM — likely runtime-injected, skipped.
   -------------------------------------------------------------------------- */

/* Line-height tightening on big display text */
body.page-enterprise .opal-hero h1,
body.page-enterprise .meeting-wrap h3,
body.page-enterprise .meeting-wrap h3 strong,
body.page-enterprise .strategies-wrap h3,
body.page-enterprise .pink-wrapper h3 {
  line-height: 1.06;
}

/* Customer Love quote: tighter line-height + space below quote */
body.page-enterprise .pink-wrapper .thin-h3,
body.page-enterprise .pink-wrapper .bold-h3 {
  line-height: 1.12;
}

body.page-enterprise .pink-wrapper .bold-h3 {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Customer Love section: subtle light gradient bg (overrides inline pink bg) */
body.page-enterprise .pink-wrapper {
  background: linear-gradient(180deg, #ffffff 0%, #F4F7FB 60%, #ECF1F7 100%) !important;
}

/* Change management: tighter line-height on split headline, more space before <p> */
body.page-enterprise .strategies-wrap .thin-h3,
body.page-enterprise .strategies-wrap .bold-h3 {
  line-height: 1.08;
}

body.page-enterprise .strategies-wrap .bold-h3 {
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
}

/* 3-up grids (Built for Enterprise + Enterprise-grade Security):
   open up gap between icon → headline → subhead */
body.page-enterprise .opal-feature-grid.icons .grid-feature {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 1.6vw, 1.4rem);
}

body.page-enterprise .opal-feature-grid.icons .grid-feature .info-wrapper h3 {
  margin: clamp(0.5rem, 1vw, 1rem) 0 clamp(0.4rem, 0.8vw, 0.75rem);
}

/* Integrations module Learn More hover glow on Enterprise page.
   Real DOM: `.block-integrations-wrapper.darkmode > a` (direct child). */
body.page-enterprise .block-integrations-wrapper > a {
  transition: color 200ms ease, text-shadow 220ms ease;
}

body.page-enterprise .block-integrations-wrapper > a:hover {
  text-shadow: 0 0 14px var(--opal-blue-glow);
}

/* Avatar replacement on "Success Built on Relationships":
   DEFERRED 2026-05-15 — avatar images are NOT in the static rendered HTML
   (likely runtime-injected by JS). Cannot reliably hide-and-replace via CSS.
   Revisit after DB sync with browser DevTools to see the live DOM. */

/* --------------------------------------------------------------------------
   Shared utility: scroll-triggered fade-up stagger (consumed by Solutions)
   -------------------------------------------------------------------------- */

.opal-fade-up-stagger .opal-fade-up-item {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.opal-fade-up-stagger .opal-fade-up-item.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .opal-fade-up-stagger .opal-fade-up-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Batch 3 — Plans / Boards / Calendar hero eyebrow

   DEFERRED 2026-05-15 (revised) — the Plans/Boards/Calendar hero blocks
   on prod do NOT emit an eyebrow above the H1 (verified via curl). They
   render `.opal-hero.short > .textcenter > .row > .content > <h1>` directly.
   Selectors below target `.hero-text > h2:first-child` and `.opal-page-header
   .eyebrow` — neither exists on those pages.

   Correct path: populate the `eyebrow_headline` ACF field on each page in
   wp-admin (the hero block PHP template at template-parts/acf-blocks/hero/hero.php
   conditionally emits `<div class="eyebrow">` when that field is set).
   Then style with `body.page-* .opal-hero .content > .eyebrow`. Architectural
   note: design content in CSS pseudo breaks i18n + screen readers — keep it
   in ACF, not stylesheets.
   -------------------------------------------------------------------------- */

body.page-campaign-planner .opal-hero .hero-text > h2:first-child,
body.page-campaign-planner .opal-page-header .eyebrow,
body.page-project-boards .opal-hero .hero-text > h2:first-child,
body.page-project-boards .opal-page-header .eyebrow {
  color: var(--opal-blue);
  font-size: clamp(0.7rem, 0.9vw, 0.85rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}

/* When the ACF field IS populated, this is the correct selector for styling: */
body.page-campaign-planner .opal-hero .content > .eyebrow,
body.page-project-boards .opal-hero .content > .eyebrow,
body.page-content-calendar .opal-hero .content > .eyebrow {
  color: var(--opal-blue);
  font-size: clamp(0.7rem, 0.9vw, 0.85rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: clamp(0.5rem, 1vw, 1rem);
}

/* --------------------------------------------------------------------------
   Batch 5 — Integrations page

   DEFERRED 2026-05-15 — selectors `.integration-card`, `.opal-integration-card`,
   `.zapier-tray-section`, `.icon-feature-set`, `.icon-features` do NOT exist
   on /integrations/ (verified via curl). Real page uses generic
   `.opal-container-block` wrappers + `.integration-main-wrap`. Rules below
   render nothing today. Re-target after DB sync; design intent preserved.
   -------------------------------------------------------------------------- */

/* Uniform card heights so two-line subtext doesn't break the grid */
body.page-integrations .integration-card,
body.page-integrations .opal-integration-card,
body.page-integrations [class*="integration"] .card,
body.page-integrations [class*="integration-stack"] > * {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  height: 100%;
}

body.page-integrations [class*="integration"] .grid,
body.page-integrations [class*="integration"] .row {
  align-items: stretch;
}

/* Zapier + Tray.io section — full-width dark */
body.page-integrations .zapier-tray-section,
body.page-integrations [class*="zapier-tray"],
body.page-integrations [class*="zapier_tray"] {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: linear-gradient(180deg, #18222A 0%, #0B101B 100%);
  color: var(--opal-white);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}

body.page-integrations .zapier-tray-section .logos,
body.page-integrations [class*="zapier-tray"] .logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

body.page-integrations .zapier-tray-section h2,
body.page-integrations [class*="zapier-tray"] h2 {
  font-family: var(--opal-font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.04;
  margin: 0 0 clamp(1rem, 2vw, 1.75rem);
}

/* Icon feature sets — centered 3-up alignment */
body.page-integrations .icon-feature-set,
body.page-integrations .icon-features,
body.page-integrations [class*="icon-feature"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  justify-items: center;
  text-align: center;
  margin-inline: auto;
  max-width: 1180px;
}

/* --------------------------------------------------------------------------
   Batch 6 — Solutions ×3 (MPM, Content Marketing, Comms)
   -------------------------------------------------------------------------- */

/* Hero typography — mirror the verticals so weight/size/rhythm feel
   consistent across the three Solutions pages and the vertical industry
   pages, even though Solutions uses a centered layout.

   We have to beat `style.css` rules of the form
   `.opal-page-solutions .post-NNNNN .solutions-page-hero h1 {font-size: 4vw !important}`
   (and matching p rules at 2.5vw / 27px). Those have specificity (0,3,1)
   with !important, so our selector below uses body.page-* +
   .opal-page-solutions + .solutions-page-hero (specificity 0,3,2) with
   !important to win cleanly. */
body.page-marketing-project-management-software .opal-page-solutions .solutions-page-hero h1,
body.page-content-marketing-platform .opal-page-solutions .solutions-page-hero h1,
body.page-communication-management-software .opal-page-solutions .solutions-page-hero h1 {
  font-size: clamp(3.25rem, 4.2vw, 5rem) !important;
  /* Weight 400 to match verticals (wp-custom-css forces 600 otherwise) */
  font-weight: 400 !important;
  line-height: 1.02 !important;
  /* Breathing room between fixed nav and headline */
  margin-top: clamp(1.25rem, 3vw, 3rem) !important;
}

/* Sub-headline — match the verticals' theme-default body p in the hero
   (no special hero p rules on verticals; they render at ~16–18px Apercu).
   Overrides `style.css` `.opal-page-solutions .solutions-page-hero p`
   rules at 2.5vw!important (723+) and 27px!important (1366+). */
body.page-marketing-project-management-software .opal-page-solutions .solutions-page-hero p,
body.page-content-marketing-platform .opal-page-solutions .solutions-page-hero p,
body.page-communication-management-software .opal-page-solutions .solutions-page-hero p {
  font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin-top: clamp(0.75rem, 1.5vw, 1.25rem) !important;
}

/* Close the thin white sliver between the notification bar and the hero.
   `style.css` sets the hero's `.pullup` to `-92px` margin-top, but `#masthead`
   is ~95px tall, so 3px of body white shows through the transparent masthead.
   Use the same hero PNG as the masthead background with the same `cover` sizing
   so both elements render the image at the same scale — the masthead is a
   pixel-true continuation of the hero gradient, seamless at any breakpoint. */
body.page-marketing-project-management-software #masthead,
body.page-content-marketing-platform #masthead,
body.page-communication-management-software #masthead {
  background-image: url('https://workwithopal.com/wp-content/uploads/2023/12/solutions-page-hero-bg.png');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

/* Dark narrative sections — open up vertical rhythm */
body.page-marketing-project-management-software [class*="dark"] h2,
body.page-content-marketing-platform [class*="dark"] h2,
body.page-communication-management-software [class*="dark"] h2 {
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
}

body.page-marketing-project-management-software [class*="dark"] h2 + p,
body.page-content-marketing-platform [class*="dark"] h2 + p,
body.page-communication-management-software [class*="dark"] h2 + p,
body.page-marketing-project-management-software [class*="dark"] p + p,
body.page-content-marketing-platform [class*="dark"] p + p,
body.page-communication-management-software [class*="dark"] p + p {
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

/* Why Opal — checkmarks before each item.
   ACF block wraps content as .block-why-opal > .row > .content > <h2>+<p>...
   so selectors MUST be descendant, not direct-child. */
.block-why-opal p,
[class*="why-opal"] p,
[class*="why-opal"] li {
  list-style: none !important;
  position: relative !important;
  padding-left: 2.4rem !important;
  margin-bottom: 0.95rem !important;
}

.block-why-opal p::before,
[class*="why-opal"] p::before,
[class*="why-opal"] li::before {
  content: "✅" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  font-size: 1em !important;
  line-height: 1.5 !important;
}

/* Headings inside .block-why-opal must NOT get the checkmark/indent */
.block-why-opal h1,
.block-why-opal h2,
.block-why-opal h3,
[class*="why-opal"] h1,
[class*="why-opal"] h2,
[class*="why-opal"] h3 {
  padding-left: 0 !important;
}

/* By the Numbers — subtle hover lift on stat tiles */
/* Real DOM: .opal-by-the-numbers-container > .tile-wrapper > .tile (audited 2026-05-15).
   Old selectors targeted [class*="stat"] which matches nothing. */
body.page-marketing-project-management-software .opal-by-the-numbers-container .tile,
body.page-content-marketing-platform .opal-by-the-numbers-container .tile,
body.page-communication-management-software .opal-by-the-numbers-container .tile {
  transition: opacity 240ms ease, transform 240ms ease;
}

body.page-marketing-project-management-software .opal-by-the-numbers-container .tile:hover,
body.page-content-marketing-platform .opal-by-the-numbers-container .tile:hover,
body.page-communication-management-software .opal-by-the-numbers-container .tile:hover {
  opacity: 0.88;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Batch 7 — Verticals ×5

   Real URLs + body classes (audited 2026-05-15 via curl — these are NOT the
   plain slugs we originally assumed):
   - /opal-for-qsr/              → body.page-opal-for-qsr
   - /retail-planning-lp/        → body.page-retail-planning-lp
   - /opal-for-healthcare/       → body.page-opal-for-healthcare
   - /opal-grocery-segment-lp/   → body.page-opal-grocery-segment-lp
   - /opal-for-software/         → body.page-opal-for-software

   Hero markup confirmed: `.opal-hero.short > .textleft.right > .row >
   .content.col-xs-12.col-sm-5 + .image.right.sticky.col-xs-12.col-sm-7`.
   Hero already has eyebrow inside `.content > .eyebrow` + <h1>.
   -------------------------------------------------------------------------- */

/* Wide-viewport hero column ratio adjustment (≥1440px) — push from 5/7 → ~45/55 */
@media (min-width: 1440px) {
  body.page-opal-for-qsr .opal-hero .row,
  body.page-retail-planning-lp .opal-hero .row,
  body.page-opal-for-healthcare .opal-hero .row,
  body.page-opal-grocery-segment-lp .opal-hero .row,
  body.page-opal-for-software .opal-hero .row {
    align-items: center;
  }

  body.page-opal-for-qsr .opal-hero .content,
  body.page-retail-planning-lp .opal-hero .content,
  body.page-opal-for-healthcare .opal-hero .content,
  body.page-opal-grocery-segment-lp .opal-hero .content,
  body.page-opal-for-software .opal-hero .content {
    flex-basis: 45%;
    max-width: 45%;
  }

  body.page-opal-for-qsr .opal-hero .image,
  body.page-retail-planning-lp .opal-hero .image,
  body.page-opal-for-healthcare .opal-hero .image,
  body.page-opal-grocery-segment-lp .opal-hero .image,
  body.page-opal-for-software .opal-hero .image {
    flex-basis: 55%;
    max-width: 55%;
  }

  body.page-opal-for-qsr .opal-hero h1,
  body.page-retail-planning-lp .opal-hero h1,
  body.page-opal-for-healthcare .opal-hero h1,
  body.page-opal-grocery-segment-lp .opal-hero h1,
  body.page-opal-for-software .opal-hero h1 {
    font-size: clamp(3.25rem, 4.2vw, 5rem);
  }
}

/* Hero eyebrow color — verticals already emit `.opal-hero .content > .eyebrow`
   with copy like "BUILT FOR QSR MARKETERS". Color it Opal blue. */
body.page-opal-for-qsr .opal-hero .content > .eyebrow,
body.page-retail-planning-lp .opal-hero .content > .eyebrow,
body.page-opal-for-healthcare .opal-hero .content > .eyebrow,
body.page-opal-grocery-segment-lp .opal-hero .content > .eyebrow,
body.page-opal-for-software .opal-hero .content > .eyebrow {
  color: var(--opal-blue);
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* Form styling — Software + QSR.
   DEFERRED 2026-05-15 (revised) — selectors below are wrong on TWO axes:
   (1) body classes — real are `page-opal-for-software` / `page-opal-for-qsr`
       (NOT `page-software` / `page-qsr` — those slugs return 404).
   (2) form element — real form is Marketo (`form#mktoForm_1590.mktoForm`)
       inside `.get-a-demo` wrapper. The `[class*="contact-form"]` /
       `[class*="talk-to-opal"]` classes do NOT exist on the live pages.
   Rules below render nothing today. Need ground-up rewrite targeting
   `.get-a-demo .mktoForm` with Marketo-specific overrides — do after DB sync. */
body.page-software [class*="contact-form"],
body.page-software [class*="talk-to-opal"],
body.page-qsr [class*="contact-form"],
body.page-qsr [class*="talk-to-opal"] {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 540px;
  margin-inline: auto;
}

body.page-software [class*="contact-form"] h2,
body.page-software [class*="talk-to-opal"] h2,
body.page-qsr [class*="contact-form"] h2,
body.page-qsr [class*="talk-to-opal"] h2 {
  font-family: var(--opal-font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.04;
  text-align: center;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}

body.page-software [class*="contact-form"] input[type="submit"],
body.page-software [class*="contact-form"] button[type="submit"],
body.page-software [class*="talk-to-opal"] input[type="submit"],
body.page-software [class*="talk-to-opal"] button[type="submit"],
body.page-qsr [class*="contact-form"] input[type="submit"],
body.page-qsr [class*="contact-form"] button[type="submit"],
body.page-qsr [class*="talk-to-opal"] input[type="submit"],
body.page-qsr [class*="talk-to-opal"] button[type="submit"] {
  width: 100%;
  background: var(--opal-blue);
  color: var(--opal-white);
  border: 0;
  border-radius: var(--opal-radius-btn);
  padding: 0.95em 1.5em;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease, box-shadow 220ms ease;
}

body.page-software [class*="contact-form"] input[type="submit"]:hover,
body.page-qsr [class*="contact-form"] input[type="submit"]:hover,
body.page-software [class*="talk-to-opal"] button[type="submit"]:hover,
body.page-qsr [class*="talk-to-opal"] button[type="submit"]:hover {
  background: var(--opal-blue-hover);
  box-shadow: 0 0 18px var(--opal-blue-glow);
}

/* --------------------------------------------------------------------------
   Batch 8 — Customers page
   -------------------------------------------------------------------------- */

/* Customer stories — consistent vertical gap between image / headline / subtext.
   Real DOM: .opal-customer-stories > .row > .col-xs-12.col-sm-6.story (verified via curl 2026-05-15). */
body.page-customers .opal-customer-stories .story {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 1.6vw, 1.4rem);
}

/* Customer story images — enforce consistent aspect ratio */
body.page-customers .opal-customer-stories .story > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Testimonial.io widget — white bg, full width, no extra whitespace */
body.page-customers [class*="testimonial-io"],
body.page-customers [id*="testimonial"],
body.page-customers [class*="t-widget"],
body.page-customers .testimonial-widget {
  background: var(--opal-white);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0;
  margin-bottom: 0;
}

body.page-customers [class*="testimonial-io"] iframe,
body.page-customers [id*="testimonial"] iframe,
body.page-customers .testimonial-widget iframe {
  width: 100%;
  display: block;
  margin: 0;
}

/* Customers page testimonial.to section — kill ALL top/bottom padding
   on both the outer (.opal-testimonials-section) and inner
   (.opal-testimonials-section__inner — the one that was showing 144px
   green padding in DevTools), and swap cream #f7f5f0 bg to white so the
   widget blends seamlessly into the quote section above. Same for the
   .opal-testimonial GM quote block. */
body.page-customers .opal-testimonials-section,
body.page-customers .opal-testimonials-section__inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

body.page-customers .opal-testimonial {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Customers page hero: extend the dark hero bg image (bg.png on
   .opal-container-block.dark) up behind the site header for visual
   continuity. Use background-attachment: fixed on both so they render
   one viewport-locked image — the seam between header and hero disappears.

   Specificity note: the global `body.hero-dark #masthead.site-header` rule
   above uses an ID — match it here (+ page-customers class) to win the
   cascade, and use longhands not shorthand to be unambiguous about which
   properties are overridden. */
body.page-customers.hero-dark #masthead.site-header {
  background-color: transparent !important;
  background-image: url("https://workwithopal.com/wp-content/uploads/2023/06/bg.png") !important;
  background-size: cover !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

body.page-customers .opal-container-block.dark {
  background-attachment: fixed !important;
  background-position: top center !important;
}

/* Responsive tile grid — 5 tiles → 5 on desktop, 5 on tablet (tighter), 3+2 on mobile */
@media (max-width: 900px) {
  .site-main #post-431 .integrations .integrations-tiles-wrapper {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.9rem;
    max-width: 620px;
  }
}

@media (max-width: 600px) {
  /* Switch to flex so the trailing row (2 tiles) centers cleanly */
  .site-main #post-431 .integrations .integrations-tiles-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    max-width: 360px;
  }
  .site-main #post-431 .integrations .integrations-tiles-wrapper .tile {
    flex: 0 0 calc((100% - 1.5rem) / 3);
    max-width: 105px;
  }
}

/* --------------------------------------------------------------------------
   Batch 9 — Closing audit (2026-05-15)

   All selectors below verified against rendered HTML via curl. No fabrication.
   -------------------------------------------------------------------------- */

/* Better Together module — hide body copy + button, add hover glow on links.
   Real DOM (verified on /campaign-planner/, /project-boards/, /content-calendar/):
   `.opal-container-block.better-together > .cc-better-together-wrap >
    {.cc-bt-title, .cc-bt-desc, .cc-bt-demo-btn-wrap, .cc-bt-img-wrap}`
   Menu items are `a.cc-bt-link` inside `.cc-bt-lft-img` and `.cc-bt-rgt-img`. */
.cc-better-together-wrap .cc-bt-desc,
.cc-better-together-wrap .cc-bt-demo-btn-wrap {
  display: none !important;
}

.cc-better-together-wrap .cc-bt-link {
  transition: color 220ms ease, text-shadow 220ms ease, transform 220ms ease;
}

.cc-better-together-wrap .cc-bt-link:hover,
.cc-better-together-wrap .cc-bt-link:focus-visible {
  color: var(--opal-blue);
  text-shadow: 0 0 12px var(--opal-blue-glow);
  transform: translateY(-1px);
}

/* Integrations module SVG padding — shared block used on product pages.
   Real DOM: `.opal-container-block.block-integrations-wrapper >
    .block-integrations-tiles > .tile > img`. Tiles are 74x74 fixed per
   block's own CSS; add internal padding so SVGs don't bleed to the edge. */
.block-integrations-wrapper .block-integrations-tiles .tile {
  padding: clamp(0.5rem, 1vw, 0.85rem);
  box-sizing: border-box;
}

.block-integrations-wrapper .block-integrations-tiles .tile img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 6-up icon block (Enterprise: "Built for the Enterprise" + "Enterprise-grade
   Security" 3-up grids). Reduce H3 label so 2-line titles don't break the
   row, and enforce min-height so the row stays even when titles wrap. */
.opal-feature-grid.icons .grid-feature .info-wrapper h3 {
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  line-height: 1.25;
  min-height: 2.6em;
  margin-top: clamp(0.5rem, 1vw, 1rem);
}

/* Plans / Boards / Calendar mid-page "experience" CTA.
   Real DOM: .experience-wrap > .experience-text + .experience-btn-wrap > a.cc-get-a-demo-btn
   Restyle the button to read as a text link with right arrow + hover glow.
   (Replacing the literal copy needs a template/content edit; this gets us the
   visual treatment from the hit list without a wp-admin step.) */
.experience-wrap .experience-btn-wrap a.cc-get-a-demo-btn {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--opal-blue) !important;
  font-weight: 600;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  box-shadow: none !important;
  transition: text-shadow 220ms ease, transform 220ms ease, color 220ms ease;
}

.experience-wrap .experience-btn-wrap a.cc-get-a-demo-btn::after {
  content: " →";
  display: inline-block;
  transition: transform 220ms ease;
}

.experience-wrap .experience-btn-wrap a.cc-get-a-demo-btn:hover,
.experience-wrap .experience-btn-wrap a.cc-get-a-demo-btn:focus-visible {
  color: var(--opal-blue-hover, var(--opal-blue));
  text-shadow: 0 0 14px var(--opal-blue-glow);
  transform: translateY(-1px);
}

.experience-wrap .experience-btn-wrap a.cc-get-a-demo-btn:hover::after,
.experience-wrap .experience-btn-wrap a.cc-get-a-demo-btn:focus-visible::after {
  transform: translateX(4px);
}

/* Homepage mobile centering — stats + enterprise sections.
   Real DOM (audited): `.opal-container-block.by-the-numbers` and
   `.opal-container-block.enterprise` on body.home. Hero mockup container
   width on mobile is a separate concern (custom .gem-hero markup) and is
   not addressed here — needs visual verification with local DB. */
@media (max-width: 768px) {
  body.home .opal-container-block.by-the-numbers,
  body.home .opal-container-block.by-the-numbers .tile-wrapper,
  body.home .opal-container-block.by-the-numbers .tile {
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  body.home .opal-container-block.by-the-numbers .tile {
    margin-left: auto;
    margin-right: auto;
  }

  body.home .opal-container-block.enterprise,
  body.home .opal-container-block.enterprise .wrapper,
  body.home .opal-container-block.enterprise .row {
    text-align: center;
  }

  body.home .opal-container-block.enterprise [class*="content"],
  body.home .opal-container-block.enterprise h1,
  body.home .opal-container-block.enterprise h2,
  body.home .opal-container-block.enterprise h3,
  body.home .opal-container-block.enterprise p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------------------------------------
   Batch 11 — Industry / vertical pages cleanup
   (QSR, Retail, Healthcare, Grocery, Software)

   Note: functions.php + header.php updated 2026-05-15 so these pages get
   body.hero-dark from the slug list (real slugs: opal-for-qsr,
   retail-planning-lp, opal-for-healthcare, opal-grocery-segment-lp,
   opal-for-software). They also share the SAME hero bg image:
   wp-content/uploads/2024/03/bg.png.
   -------------------------------------------------------------------------- */

/* Pink button site-wide → Opal blue. .pink-filled + .pink-outline appear
   across multiple WP blocks; this is the global audit removal.

   Specificity note: the per-page inline <style> blocks use
   `.site .site-main .pink-filled:hover { background-color: #780726 !important; }`
   = (0, 4, 0). Match that by chaining `html body` + `.site .site-main` so
   we land at (0, 5, 2) and win the cascade. */
html body .site .site-main .wp-block-button__link.pink-filled,
html body .site .site-main .wp-block-button.pink-filled .wp-block-button__link,
html body .site .site-main a.pink-filled,
html body .site .site-main .pink-filled {
  background: var(--opal-blue) !important;
  background-color: var(--opal-blue) !important;
  background-image: none !important;
  border-color: var(--opal-blue) !important;
  color: var(--opal-white) !important;
  transition: background-color 200ms ease, box-shadow 220ms ease;
}

html body .site .site-main .wp-block-button__link.pink-filled:hover,
html body .site .site-main .wp-block-button__link.pink-filled:focus-visible,
html body .site .site-main .wp-block-button.pink-filled .wp-block-button__link:hover,
html body .site .site-main a.pink-filled:hover,
html body .site .site-main a.pink-filled:focus-visible,
html body .site .site-main .pink-filled:hover,
html body .site .site-main .pink-outline:hover {
  background: var(--opal-blue-hover, var(--opal-blue)) !important;
  background-color: var(--opal-blue-hover, var(--opal-blue)) !important;
  background-image: none !important;
  box-shadow: 0 0 18px var(--opal-blue-glow) !important;
  color: var(--opal-white) !important;
}

html body .site .site-main .wp-block-button__link.pink-outline,
html body .site .site-main .is-style-outline > .wp-block-button__link.pink-outline,
html body .site .site-main a.pink-outline,
html body .site .site-main .pink-outline {
  background-color: transparent !important;
  background-image: none !important;
  border: 2px solid var(--opal-blue) !important;
  color: var(--opal-blue) !important;
}

html body .site .site-main .wp-block-button__link.pink-outline:hover,
html body .site .site-main .wp-block-button__link.pink-outline:focus-visible,
html body .site .site-main a.pink-outline:focus-visible {
  background-color: rgba(42, 112, 234, 0.08) !important;
  border-color: var(--opal-blue) !important;
  color: var(--opal-blue) !important;
}

/* Verticals: extend hero bg.png up behind the site header for visual
   continuity. Use background-attachment: fixed so masthead + hero render
   one viewport-locked image. Layer a dark gradient on top to tint
   "a little darker" per the design ask.

   Retail-planning-lp is INTENTIONALLY EXCLUDED — that page has a
   light-content design (white below the nav, not a dark bg.png hero),
   so it just gets the standard dark masthead from line 242 above. */
body.page-opal-for-qsr.hero-dark #masthead.site-header,
body.page-opal-for-healthcare.hero-dark #masthead.site-header,
body.page-opal-grocery-segment-lp.hero-dark #masthead.site-header,
body.page-opal-for-software.hero-dark #masthead.site-header {
  background-color: transparent !important;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)),
    url("https://workwithopal.com/wp-content/uploads/2024/03/bg.png") !important;
  background-size: cover !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* Match the dark tint on the hero container so the overlay reads continuous
   from masthead → hero. The container already has bg.png inline; we layer
   the same dark gradient via ::before pseudo (so we don't fight the inline
   background-image declaration with !important).
   Retail-planning-lp excluded — different content design. */
body.page-opal-for-qsr .opal-container-block.dark,
body.page-opal-for-healthcare .opal-container-block.dark,
body.page-opal-grocery-segment-lp .opal-container-block.dark,
body.page-opal-for-software .opal-container-block.dark {
  position: relative;
  background-attachment: fixed !important;
  background-position: top center !important;
}

body.page-opal-for-qsr .opal-container-block.dark::before,
body.page-opal-for-healthcare .opal-container-block.dark::before,
body.page-opal-grocery-segment-lp .opal-container-block.dark::before,
body.page-opal-for-software .opal-container-block.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.32);
  pointer-events: none;
  z-index: 0;
}

body.page-opal-for-qsr .opal-container-block.dark > *,
body.page-opal-for-healthcare .opal-container-block.dark > *,
body.page-opal-grocery-segment-lp .opal-container-block.dark > *,
body.page-opal-for-software .opal-container-block.dark > * {
  position: relative;
  z-index: 1;
}

/* Hero content↔image vertical alignment on QSR / Software / Grocery.
   Bootstrap's .row is flex; align-items: center vertically centers the
   .content column (text) with the .image column (product mockup) so the
   copy sits at the visual middle of the hero image instead of top-aligned.
   Healthcare + Retail intentionally excluded (different hero layouts). */
@media (min-width: 768px) {
  body.page-opal-for-qsr .opal-hero .row,
  body.page-opal-grocery-segment-lp .opal-hero .row,
  body.page-opal-for-software .opal-hero .row {
    align-items: center !important;
  }
}

/* Retail-planning-lp: restyle the two hero buttons ("How Target Does It" +
   "Self-Serve Demo") to match Opal blue. They render with inline
   `style="background:linear-gradient(...)"` so we beat inline style with
   !important + attribute selector. */
body.page-retail-planning-lp .wp-block-button__link[style*="linear-gradient"],
body.page-retail-planning-lp a.bf-demo-btn,
body.page-retail-planning-lp a.wp-block-button__link.wp-element-button {
  background: var(--opal-blue) !important;
  background-color: var(--opal-blue) !important;
  background-image: none !important;
  color: var(--opal-white) !important;
  border: 0 !important;
  border-radius: var(--opal-radius-btn, 9999px) !important;
  padding: 0.95em 1.6em !important;
  font-weight: 600;
  transition: background-color 200ms ease, box-shadow 220ms ease !important;
}

body.page-retail-planning-lp .wp-block-button__link[style*="linear-gradient"]:hover,
body.page-retail-planning-lp a.bf-demo-btn:hover,
body.page-retail-planning-lp a.wp-block-button__link.wp-element-button:hover,
body.page-retail-planning-lp .wp-block-button__link[style*="linear-gradient"]:focus-visible,
body.page-retail-planning-lp a.bf-demo-btn:focus-visible {
  background: var(--opal-blue-hover, var(--opal-blue)) !important;
  background-color: var(--opal-blue-hover, var(--opal-blue)) !important;
  box-shadow: 0 0 18px var(--opal-blue-glow) !important;
  color: var(--opal-white) !important;
}

/* Tighter hero spacing on wider screens — the H1 currently has a trailing
   <br /> in the markup plus heavy padding that creates a lot of empty
   space between the headline and the next element on large viewports. */
@media (min-width: 1024px) {
  body.page-opal-for-qsr .opal-hero.short,
  body.page-retail-planning-lp .opal-hero.short,
  body.page-opal-for-healthcare .opal-hero.short,
  body.page-opal-grocery-segment-lp .opal-hero.short,
  body.page-opal-for-software .opal-hero.short {
    padding-top: clamp(1.5rem, 2.5vw, 2.5rem) !important;
    padding-bottom: clamp(1.5rem, 2.5vw, 2.5rem) !important;
  }

  body.page-opal-for-qsr .opal-hero.short h1,
  body.page-retail-planning-lp .opal-hero.short h1,
  body.page-opal-for-healthcare .opal-hero.short h1,
  body.page-opal-grocery-segment-lp .opal-hero.short h1,
  body.page-opal-for-software .opal-hero.short h1 {
    margin-bottom: clamp(0.5rem, 1vw, 1rem) !important;
    line-height: 1.05;
  }

  /* Kill the trailing <br /> inside the H1 that contributes empty line height */
  body.page-opal-for-qsr .opal-hero.short h1 br:last-child,
  body.page-retail-planning-lp .opal-hero.short h1 br:last-child,
  body.page-opal-for-healthcare .opal-hero.short h1 br:last-child,
  body.page-opal-grocery-segment-lp .opal-hero.short h1 br:last-child,
  body.page-opal-for-software .opal-hero.short h1 br:last-child {
    display: none;
  }
}

/* Healthcare hero is single-column (`.content.col-sm-12`, no side image),
   unlike the QSR/Software 5/7 split. Center the eyebrow, H1, copy, and CTA
   button. The button wrapper has inline `style="text-align: left"` in the
   post content, so the override needs !important. Also undo the Batch 7
   45% width rule (line 1022) which was designed for the 2-column verticals
   and squeezes healthcare content unnecessarily at >=1440px. */
body.page-opal-for-healthcare .opal-hero.short .content {
  text-align: center;
  max-width: 920px;
  margin-inline: auto;
}

body.page-opal-for-healthcare .opal-hero.short .content > div[style*="text-align: left"] {
  text-align: center !important;
}

@media (min-width: 1440px) {
  body.page-opal-for-healthcare .opal-hero .content {
    flex-basis: 100% !important;
    max-width: 920px !important;
  }
}

/* In-page form container — currently no in-content forms render on these
   pages (only the global footer newsletter form `#mktoForm_1590` lives in
   `.site-footer .site-navigation`). This rule is defensive: if/when an
   ACF block or post-content form gets added to a vertical, it picks up
   a styled container automatically. Scoped to .entry-content so it only
   hits in-page forms, not the footer one. */
body.page-opal-for-qsr .entry-content form[id^="mktoForm_"],
body.page-retail-planning-lp .entry-content form[id^="mktoForm_"],
body.page-opal-for-healthcare .entry-content form[id^="mktoForm_"],
body.page-opal-grocery-segment-lp .entry-content form[id^="mktoForm_"],
body.page-opal-for-software .entry-content form[id^="mktoForm_"] {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 540px;
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   Pre-footer demo stripe
   Auto-injected above the footer on Home, Product, Plans, Boards,
   Calendar, Integrations, Enterprise (see opal_render_pre_footer_demo_stripe).
   -------------------------------------------------------------------------- */
.opal-demo-stripe {
  display: block;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(135deg, #2A70EA 0%, #1F5BC9 100%);
  padding: clamp(8px, 1.1vw, 16px) 0;
}
.opal-demo-stripe__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap;
}
.opal-demo-stripe__headline {
  font-family: var(--opal-font-display);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: var(--opal-white);
  margin: 0;
  flex: 1 1 480px;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              text-shadow 0.55s ease;
  will-change: transform;
}
.opal-demo-stripe__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 24px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  font-family: var(--opal-font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  color: var(--opal-white);
  text-decoration: none;
  background: transparent;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              background-color 0.35s ease,
              border-color 0.35s ease,
              color 0.35s ease,
              box-shadow 0.45s ease;
  will-change: transform;
}
.opal-demo-stripe__btn-arrow {
  display: inline-flex;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.opal-demo-stripe__btn-arrow svg {
  display: block;
}

/* Hover on the whole stripe: editorial lift + soft white glow */
.opal-demo-stripe:hover .opal-demo-stripe__headline {
  transform: translateY(-4px);
  text-shadow: 0 12px 32px rgba(255, 255, 255, 0.22);
}
.opal-demo-stripe:hover .opal-demo-stripe__btn {
  transform: translateY(-4px);
  background: var(--opal-white);
  border-color: var(--opal-white);
  color: var(--opal-blue);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.18);
}
.opal-demo-stripe:hover .opal-demo-stripe__btn-arrow {
  transform: translateX(4px);
}
.opal-demo-stripe__btn:focus-visible {
  outline: 2px solid var(--opal-white);
  outline-offset: 4px;
}

@media (max-width: 768px) {
  .opal-demo-stripe { padding: 10px 0; }
  .opal-demo-stripe__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .opal-demo-stripe__headline { max-width: none; }
}

/* Hide the legacy full-width-cta-banner ("Experience the Opal Difference. Get a Demo.")
   on the 3 Solutions pages where the new pre-footer demo-stripe replaces it. */
.page-content-marketing-platform .block-full-width-cta-banner,
.page-communication-management-software .block-full-width-cta-banner,
.page-marketing-project-management-software .block-full-width-cta-banner {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .opal-demo-stripe__headline,
  .opal-demo-stripe__btn,
  .opal-demo-stripe__btn-arrow { transition: none; }
  .opal-demo-stripe:hover .opal-demo-stripe__headline,
  .opal-demo-stripe:hover .opal-demo-stripe__btn,
  .opal-demo-stripe:hover .opal-demo-stripe__btn-arrow { transform: none; }
}
/* --------------------------------------------------------------------------
   Why Opal — wider gap between the headline and the checkmark list on the
   3 product-solution pages. The existing batch1 rule at line ~917 sets a
   tight clamp(1rem, 2vw, 1.75rem) margin-bottom on every h2 inside any
   [class*="dark"] container; this Why-Opal-scoped override beats it with
   higher specificity so other dark sections keep the tighter rhythm.
   -------------------------------------------------------------------------- */

body.page-content-marketing-platform .opal-container-block.dark .block-why-opal h2,
body.page-communication-management-software .opal-container-block.dark .block-why-opal h2,
body.page-marketing-project-management-software .opal-container-block.dark .block-why-opal h2 {
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

/* --------------------------------------------------------------------------
   Homepage 3-up feature sections — mirror /campaign-planner image handling.
   That page uses .opal-feature-callout .sticky img { width:50vw } so the
   product screenshot is locked to half the viewport regardless of its
   column width, bleeding past the column toward the viewport edge with
   its natural aspect ratio intact.

   Apply the same pattern to #post-431 .feature-section images. Also kills
   the Gutenberg inline aspect-ratio:1;object-fit:cover crop and the
   per-section aspect-ratio rules in style.css (653/557, 605/505, 682/558)
   that were calibrated for the prior images.
   -------------------------------------------------------------------------- */
.site-main #post-431 .feature-section figure:first-of-type img {
  aspect-ratio: auto !important;
  object-fit: contain !important;
  display: block;
  height: auto !important;
  width: 50vw !important;
  min-width: 50vw !important;
  max-width: 50vw !important;
}

/* Below the flex side-by-side breakpoint, image stacks above text and
   should fill the column width — no 50vw lock. */
@media (max-width: 767px) {
  .site-main #post-431 .feature-section figure:first-of-type img {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Flush to viewport edge: kill the wrapper's outer padding on the side
   the image lives on, so the 50vw image reaches the viewport edge instead
   of stopping at wrapper_right - 108px. Default + .last sections have image
   on the right (flex-direction: row-reverse); .reverse has image on the left.

   Margin-left:auto pushes the image away from text inside the flex row so
   text doesn't sit directly against it after the padding is gone — keeps
   the existing whitespace rhythm between text and image.

   Skipped on mobile (<768px) where the layout stacks vertically. */
@media (min-width: 768px) {
  /* Image-on-right (default + .last): kill ALL right padding — both the
     outer section's right padding (.last has padding-right: 28px) and the
     inner wrapper's right padding (108px at 1440+, smaller at lower bps).
     Without both, image stops short of viewport_right by the outer pad. */
  .site-main #post-431 .feature-section:not(.reverse),
  .site-main #post-431 .feature-section:not(.reverse) .wrapper.container-fluid {
    padding-right: 0 !important;
  }

  /* Image-on-left (.reverse): kill ALL left padding for the same reason
     (.reverse has padding-left: 28px on the section + ~70-108px on wrapper). */
  .site-main #post-431 .feature-section.reverse,
  .site-main #post-431 .feature-section.reverse .wrapper.container-fluid {
    padding-left: 0 !important;
  }

  /* Pull image flush against its viewport edge by killing any auto/explicit
     margin that the old per-section rules baked in. */
  .site-main #post-431 .feature-section:not(.reverse) figure:first-of-type {
    margin-right: 0 !important;
    margin-left: auto !important;
  }
  .site-main #post-431 .feature-section.reverse figure:first-of-type {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* --------------------------------------------------------------------------
   /get-a-demo/ — display headline
   Match the homepage hero headline scale + VC Garamond Condensed treatment.
   Page is hero-light, so we keep dark text instead of the homepage white.
   -------------------------------------------------------------------------- */
.page-get-a-demo .entry-content h1.wp-block-heading {
  font-family: var(--opal-font-display);
  font-size: clamp(3.1rem, 6.8vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: 300;
  margin: 0 0 0.25em;
  padding-bottom: 0.05em;
}

/* --------------------------------------------------------------------------
   /about/ — extend dark hero gradient up behind the site header.

   The page already wraps .opal-hero + first .opal-feature-callout
   ("Our Inspiration") in an `.opal-container-block.dark`. We apply the
   homepage integrations gradient to both the masthead and that wrapper
   with background-attachment: fixed so the viewport-locked gradient
   reads as one continuous bg from top of page through "Our Inspiration".
   `background-image: none` on the masthead first wipes the inline url()
   declaration on .block_<hash> before our gradient layers paint.
   -------------------------------------------------------------------------- */
body.page-about.hero-dark #masthead.site-header,
body.page-about .opal-container-block.dark {
  background-color: transparent !important;
  background-image:
    radial-gradient(900px 420px at 50% 30%, rgba(58, 132, 255, 0.22), transparent 70%),
    radial-gradient(600px 320px at 18% 78%, rgba(120, 80, 255, 0.14), transparent 72%),
    radial-gradient(700px 360px at 82% 82%, rgba(42, 112, 234, 0.16), transparent 72%),
    linear-gradient(180deg, #1A1438 0%, #110B2A 50%, #07051A 100%) !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

body.page-about .opal-container-block.dark {
  position: relative;
}

body.page-about .opal-container-block.dark > * {
  position: relative;
  z-index: 1;
}