/* Flex page-builder block styles. Home for flex-block CSS, moving it out of the legacy
   monolith (website-redesign-styles.css) over time. Migrated so far: flexComparisonTable,
   flexAgentGrid, flexLogoMarquee, flexFeatureRow, flexBanner, flexCta. */

/* flexHero — agents-fleet style. Was a separately lazy-loaded file (see global/_head.twig's
   heroVariantCss map) back when only /agents used this heroStyle; moved here once Safety
   Framework became a second consumer, since the lazy-load mechanism is for genuinely
   single-page CSS (e.g. the homepage variant, which still gets its own file) not a style
   reused across pages. Rules touching shared hero classes are prefixed with
   .flex-hero__container--agents-fleet; agents-fleet-only classes (payoff lines, underline)
   are left unprefixed. */

/* Compound selector outranks the inherited .hero-section__container--testing background,
   which otherwise screen-blends the base navy toward a lighter blue-gray. */
.hero-section__container--testing.flex-hero__container--agents-fleet {
  background: var(--gradient-hero);
}

/* Grid-line texture, faded via a radial mask so it reads as an accent, not a busy pattern. */
.flex-hero__container--agents-fleet::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(rgba(var(--cyan-500-rgb), 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cyan-500-rgb), 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 0%, #000 8%, transparent 70%);
  mask-image: radial-gradient(120% 120% at 50% 0%, #000 8%, transparent 70%);
  pointer-events: none;
}

.flex-hero__container--agents-fleet > .redesign-container {
  position: relative;
  z-index: 1;
}

.flex-hero__container--agents-fleet .platform-heading__text {
  font-family: var(--font-family-mono);
  font-size: 16px;
  font-weight: 400 !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin-bottom: 22px;
}

.flex-hero__container--agents-fleet .flex-hero__content { flex: 0 1 auto; }

.flex-hero__container--agents-fleet .flex-hero__image {
  flex: 0 0 auto;
  align-self: flex-end;
}

.flex-hero__container--agents-fleet .flex-hero__payoff {
  margin-top: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}

.flex-hero__payoff-line {
  font-family: var(--font-family-primary);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.flex-hero__payoff-line::selection {
  background: var(--cyan-200);
  color: var(--navy-700);
}

/* Fixed sequence (cyan / white / red / closing pill), colored by nth-child position rather
   than a per-row tone field -- content editors can't get the order wrong. */
.flex-hero__payoff > :nth-child(1) .flex-hero__payoff-line { color: var(--cyan-500); }
.flex-hero__payoff > :nth-child(2) .flex-hero__payoff-line { color: var(--color-white); }
.flex-hero__payoff > :nth-child(3) .flex-hero__payoff-line { color: var(--color-red-on-dark); }

.flex-hero__payoff > :nth-child(4) .flex-hero__payoff-line {
  background: var(--cyan-500);
  color: var(--navy-brand);
  padding: 2px 12px;
  margin-top: 4px;
  /* pill wraps to 2 lines; clone keeps padding/background consistent on each fragment */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  line-height: 1.5;
}

/* Caps the closing pill so it wraps to a tighter block instead of the full column width. */
.flex-hero__payoff > :nth-child(4) {
  max-width: 25rem;
  align-self: flex-end;
}

.hero-section__container--left.flex-hero__container--agents-fleet .flex-hero__title {
  /* Fluid so the headline shrinks on narrow screens; payoff lines below don't scale. */
  font-size: clamp(2.75rem, 10vw, 5rem);
  /* Base .page-title's line-height is a fixed 60px, tuned for its own fixed 58px font-size --
     shorter than this rule's fluid font-size once it clamps up past ~60px, which clipped/
     overlapped wrapped lines on long titles (e.g. this page's 3-line headline). Ratio-based so
     it scales with the clamp() above instead of breaking at its upper end. */
  line-height: 1.1;
  text-align: left;
  /* ch scales with the fluid font-size above. Caps the line at roughly "A safety framework
     for" so the next phrase wraps onto its own line, without needing to know or care whether
     that phrase is bold -- short titles (e.g. "AI + HUMANS") never reach this width anyway. */
  max-width: 20ch;
}

/* Ancestor-scoped so this beats Bootstrap's reboot rules for hr (height/opacity), which
   otherwise win uncontested since we don't declare a competing value. */
.flex-hero__container--agents-fleet .flex-hero__title-underline--agents-fleet {
  display: block;
  width: 100%;
  height: 7px;
  margin: 14px 0 0 0;
  border: 0;
  opacity: 1;
  background-color: var(--cyan-500);
  box-shadow: var(--cyan-500) 0px 0px 8px, rgba(var(--cyan-500-rgb), 0.95) 0px 0px 26px, rgba(var(--cyan-500-rgb), 0.8) 0px 0px 54px, rgba(var(--cyan-500-rgb), 0.55) 0px 0px 104px, rgba(var(--cyan-500-rgb), 0.3) 0px 0px 176px;
}

/* Italic repurposed as the red accent (e.g. "+" in "AI + Humans") rather than adding a
   new CKEditor button/class for one character. Bold's brand-blue is the shared hero rule. */
.flex-hero__container--agents-fleet .flex-hero__content em,
.flex-hero__container--agents-fleet .flex-hero__content i {
  color: var(--color-red-on-dark);
  font-style: normal;
}

.flex-hero__intro--agents-fleet {
  margin-top: var(--spacing-lg);
  max-width: 90ch;
}

/* <=991px: hero image is hidden (website-redesign-styles.css), single-column. Fixed 30px
   (not the desktop clamp()) matches the clamp's value right at 991px, so there's no jump. */
@media (max-width: 991px) {
  .flex-hero__container--agents-fleet .flex-hero__content { flex: 1 1 100%; }
  .flex-hero__container--agents-fleet .flex-hero__payoff { text-align: left; }
  .flex-hero__payoff-line { font-size: 30px; line-height: 1.3; }
  .flex-hero__payoff > :nth-child(4) { align-self: flex-start; }
}

/* Feature row list (homepage "Benefits"). Sharp corners throughout (media plate, callout
   box) -- the mock uses 14px/8px rounding, but design-system authority is still unresolved
   (see docs/flex-page-builder-guide.md), so this defaults to the site's existing sharp-corner
   system until a reviewer specifically asks otherwise, same as every other block here. */
.flex-feature-row {
  padding: var(--spacing-2xl) 0;
  border-bottom: 1px solid var(--slate-200);
}
.flex-feature-row:last-child { border-bottom: none; }

.flex-feature-row__container {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-xl);
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}
.flex-feature-row--flip .flex-feature-row__container { flex-direction: row-reverse; }
.flex-feature-row--tint { background: var(--slate-100); }

.flex-feature-row__media {
  flex: 0 0 150px;
  align-self: stretch;
  display: flex;
  align-items: center;
}
/* flex: 0 1 320px -- a ceiling, not a fixed width; can still shrink if the row gets tight.
   align-self: stretch (overriding the parent .flex-feature-row__media's align-items: center,
   which stays center for the icon-plate variant) so the photo fills the row's full height --
   matching the text column, per design feedback that the gradient-faded fixed-height photo lost
   information and looked smaller than the text beside it. */
.flex-feature-row__media--photo {
  flex: 0 1 320px;
  align-self: stretch;
  overflow: hidden;
}

.flex-feature-row__photo {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center 18%; /* overridden inline per-row via featurePhotoPosition */
}

.flex-feature-row__icon-plate {
  position: relative;
  width: 100%;
  height: 150px;
  min-height: 150px;
  background: var(--gradient-hero);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Same grid-line texture technique as the hero variants, scaled down for a small plate. */
.flex-feature-row__icon-plate::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(var(--cyan-500-rgb), 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cyan-500-rgb), 0.1) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent);
  mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent);
}
.flex-feature-row__icon {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  object-fit: contain;
}
.flex-feature-row__index {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 2;
  font-family: var(--font-family-primary);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
}

.flex-feature-row__text { flex: 1; }
/* Matches p.subhead exactly (mono, 2px letter-spacing, weight 400, no explicit font-size --
   the ambient 16px default), not the mock's smaller/looser 11px + 0.16em -- same typography
   clash already fixed once this session for platform-heading__text/flex-accordion__eyebrow. */
.flex-feature-row__kicker {
  font-family: var(--font-family-mono);
  letter-spacing: 2px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--red-500);
  margin-bottom: var(--spacing-xs);
}
.flex-feature-row__title {
  font-family: var(--font-family-primary);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--slate-700);
  margin: 0 0 var(--spacing-sm);
  max-width: 24ch;
}
.flex-feature-row__body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--slate-700);
  max-width: 64ch;
}
.flex-feature-row__body p { margin: 0; }
.flex-feature-row__body ul {
  list-style: none;
  padding: 0;
  margin: var(--spacing-sm) 0 0;
}
.flex-feature-row__body ul li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-top: 8px;
}
.flex-feature-row__body ul li::before {
  content: '✓';
  color: var(--cyan-700);
  font-weight: 700;
  flex: none;
}

.flex-feature-row__callout {
  margin-top: var(--spacing-md);
  background: var(--slate-100);
  border-left: 2px solid var(--cyan-500);
  padding: var(--spacing-sm) var(--spacing-md);
  max-width: 58ch;
}
.flex-feature-row__callout-heading {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--slate-700);
  margin-bottom: var(--spacing-xs);
}
.flex-feature-row__callout-body {
  font-family: var(--font-family-primary);
  line-height: var(--line-height-relaxed);
  color: var(--slate-700);
  margin: 0;
}

.flex-feature-row__cta {
  display: inline-flex;
  align-items: center;
  margin-top: var(--spacing-sm);
}

@media (max-width: 768px) {
  .flex-feature-row { padding: var(--spacing-lg) 0; }
  .flex-feature-row__container,
  .flex-feature-row--flip .flex-feature-row__container {
    flex-direction: column;
    gap: var(--spacing-lg); /* the desktop bump to --spacing-xl was requested desktop-only */
  }
  .flex-feature-row__media,
  .flex-feature-row__media--photo { flex-basis: auto; }
  /* Fixed height on mobile -- the layout stacks (text below, not beside) at this width, so
     there's no sibling row height to stretch-match like on desktop. */
  .flex-feature-row__photo {
    height: 240px;
  }
  .flex-feature-row__title { font-size: 22px; max-width: none; }
}

/* navy-500 (#111827), not the lighter/bluer --navy-brand, which read as a mismatched band
   under the hero above it. */
.flex-logo-marquee {
  background: var(--navy-500);
  padding: var(--spacing-xs) 0;
  overflow: hidden;
}

/* --slate-700 ("Sprocket gray" per its own token comment) is the only other dark-enough tone
   in the scale for the dim/brighten-on-hover logo technique below to still read -- a lighter
   slate would wash out the dimmed (brightness 0.45) logos against it. */
.flex-logo-marquee--slate {
  background: var(--slate-700);
}
.flex-logo-marquee--dark-gray {
  background: var(--gray-900);
}

.flex-logo-marquee__track {
  --gap: 3rem;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}

.flex-logo-marquee__content {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--gap);
  /* alternate (a left-right sway), not a hard reset-to-zero loop -- the reset was the actual
     cause of a periodic flash; dropping loop copies 3 -> 2 didn't fix it, which is what
     proved the reset itself was the bug, not the copy count. */
  animation: flex-logo-marquee-scroll 32s linear infinite alternate;
  will-change: transform;
}

/* Fixed 160x160 box, not min/max-width + height:auto -- with ~50 images loading concurrently,
   an auto height left each item's size unknown until its image loaded, and every load
   reflowed the row out from under the running animation (stutter). object-fit: contain below
   then keeps each logo's own visible size consistent despite mixed-source files (many are
   square-canvas exports with a lot of transparent padding around the wordmark). */
.flex-logo-marquee__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  flex: 0 0 auto;
}

/* Dimmed/brighten-on-hover so mixed-source client logos read consistently regardless of each
   logo's own color scheme. */
.flex-logo-marquee__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0.45);
  transition: filter 0.2s;
}

.flex-logo-marquee__logo:hover {
  filter: brightness(1.1);
}

@keyframes flex-logo-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--gap))); }
}

/* Motion-sensitive users get a static (first-copy-only) strip instead of an unstoppable
   scroll -- the duplicate content block is still in the DOM but sits directly behind the
   first, invisible, since neither one is animating away from translateX(0). */
@media (prefers-reduced-motion: reduce) {
  .flex-logo-marquee__content { animation: none; }
}

/* Comparison table */
.flex-comparison-table { padding: 72px 0; border-top: 1px solid var(--slate-200); text-align: center; }
.flex-comparison-table__kicker { font-family: var(--font-family-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--cyan-700); margin-bottom: var(--spacing-xs); }
.flex-comparison-table__heading { font-family: var(--font-family-primary); font-size: 44px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--navy-brand); margin: 0 auto; }
.flex-comparison-table__intro { font-family: var(--font-family-primary); font-size: 18px; color: var(--slate-700); max-width: 80ch; margin: 26px auto 0 auto; }
.flex-comparison-table__intro p { margin: 0; }
.flex-comparison-table__intro p + p { margin-top: 18px; }
.flex-comparison-table__intro strong { color: var(--cyan-900); }
.flex-comparison-table__cta { margin-top: 32px; }

.flex-comparison-table__wrap { max-width: 1180px; margin: 56px auto 0 auto; text-align: left; overflow-x: auto; border: 1px solid var(--slate-200); }
.flex-comparison-table__table { width: 100%; border-collapse: collapse; font-family: var(--font-family-primary); }
.flex-comparison-table__caption { caption-side: top; text-align: left; font-family: var(--font-family-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--slate-700); padding: var(--spacing-sm) var(--spacing-md); background: var(--slate-100); }
.flex-comparison-table__header-row { background: var(--navy-brand); }
.flex-comparison-table__header-cell { text-align: left; vertical-align: top; padding: 14px 20px; font-family: var(--font-family-primary); font-weight: 700; font-size: 16px; color: var(--color-white); }
.flex-comparison-table__cell { text-align: left; vertical-align: top; padding: 18px 20px; color: var(--slate-700); border-top: 1px solid var(--slate-200); }
.flex-comparison-table__cell--label { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; color: var(--cyan-900); }
.flex-comparison-table__table tr:nth-child(even) .flex-comparison-table__cell { background: var(--slate-100); }

@media (max-width: 768px) {
  .flex-comparison-table { padding: 48px 0; }
  .flex-comparison-table__heading { font-size: 30px; }
  .flex-comparison-table__intro { font-size: 16px; }
}

/* Flex Agent Grid — 4/3/2 column tile grid, phone carousel below. */
.flex-agent-grid { padding: var(--spacing-xl) 0; background: var(--color-white); }
.flex-agent-grid__heading { font-family: var(--font-family-primary); font-size: var(--font-size-xl); font-weight: 800; text-align: center; margin: 0 0 var(--spacing-lg) 0; }

.flex-agent-grid__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
  max-width: 1180px;
  margin: 0 auto;
}

.flex-agent-grid__tile {
  display: block; /* tiles can render as <a> when linked; keep block box + no link styling */
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* One level in from the data-sal tile -- animating the SAL reveal directly on a background+
   overflow:hidden element causes a repaint flash in some browsers. */
.flex-agent-grid__tile-card {
  position: relative;
  aspect-ratio: 3 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: #141b2b;
  border: 1px solid rgba(var(--bs-black-rgb), 0.08);
}

.flex-agent-grid__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 8%; transition: transform 0.5s ease, filter 0.4s ease; }
.flex-agent-grid__tile--recruiting .flex-agent-grid__img { filter: grayscale(1) brightness(0.75); }

.flex-agent-grid__scrim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(9,13,22,0.92) 6%, rgba(9,13,22,0.5) 34%, transparent 62%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.flex-agent-grid__meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 18px 18px 20px;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.flex-agent-grid__kicker { font-family: var(--font-family-mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan-400); margin-bottom: 7px; }
.flex-agent-grid__name { font-family: var(--font-family-primary); font-weight: 800; font-size: 26px; color: var(--color-white); line-height: 1; letter-spacing: -0.01em; }
.flex-agent-grid__name--tbd { color: rgba(var(--bs-white-rgb), 0.55); }
.flex-agent-grid__cap { font-family: var(--font-family-primary); line-height: 1.4; color: rgba(var(--bs-white-rgb), 0.85); margin-top: 8px; }

/* :active covers touch press, so the lift reads as feedback on mobile too. */
.flex-agent-grid__tile:hover,
.flex-agent-grid__tile:focus-visible,
.flex-agent-grid__tile:active {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(var(--bs-black-rgb), 0.35), 0 0 0 1px rgba(var(--cyan-500-rgb), 0.25);
}
/* Duotone reserved for a.flex-agent-grid__tile (linked tiles) as a "go here" cue. ::before
   exists at rest (opacity: 0) so it has something to transition from instead of popping in. */
a.flex-agent-grid__tile .flex-agent-grid__tile-card::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(140deg, var(--cyan-500) 0%, var(--color-red-500) 100%);
  mix-blend-mode: color;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
a.flex-agent-grid__tile:hover .flex-agent-grid__img,
a.flex-agent-grid__tile:focus-visible .flex-agent-grid__img { transform: scale(1.05); mix-blend-mode: luminosity; }
a.flex-agent-grid__tile:hover .flex-agent-grid__tile-card::before,
a.flex-agent-grid__tile:focus-visible .flex-agent-grid__tile-card::before {
  opacity: 1;
}
.flex-agent-grid__tile:hover .flex-agent-grid__scrim,
.flex-agent-grid__tile:hover .flex-agent-grid__meta,
.flex-agent-grid__tile:focus-visible .flex-agent-grid__scrim,
.flex-agent-grid__tile:focus-visible .flex-agent-grid__meta { opacity: 1; transform: translateY(0); }
.flex-agent-grid__tile:focus-visible {
  outline: 2px solid var(--cyan-500);
  outline-offset: 2px;
}

.flex-agent-grid__subheading { font-family: var(--font-family-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--color-text-secondary, #6b7280); text-align: center; margin-top: 32px; }

/* Column ladder by width: 4 (desktop) / 3 (tablet) / 2 (small tablet) / 1 (phone). */
@media (max-width: 1024px) { .flex-agent-grid__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .flex-agent-grid__grid { grid-template-columns: repeat(2, 1fr); } }

/* Phone: horizontal swipe carousel instead of a 1-per-row endless scroll. Card width leaves
   a peek of the next one so the scroll is discoverable. */
@media (max-width: 575px) {
  .flex-agent-grid__grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Full-bleed: make the scroll track exactly viewport-wide and pull it to the screen
       edges, independent of ancestor padding. calc(50% - 50vw) resolves to the negative of
       the (symmetric) side inset. body has overflow-x: hidden, so no page-level scroll.
       First card sits flush at the left edge (no leading padding -- a scroll container won't
       let you scroll into its start padding, which pins the resting position weirdly).
       padding-right gives the last card trailing breathing room. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-right: 24px;
    padding-bottom: 6px; /* room for the scrollbar without clipping the last card */
  }
  .flex-agent-grid__tile {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  /* Shorter on mobile: at 82% of a phone viewport's width, the desktop 3:5 ratio makes for a
     very tall card (~512px on a 375px-wide screen). 4:5 keeps it portrait but noticeably
     shorter, so less scrolling is needed to see the whole card. */
  .flex-agent-grid__tile-card {
    aspect-ratio: 4 / 5;
  }
}

/* Only the 2-column band squeezes the tiles narrow enough to need smaller caption type;
   the 1-column phone layout has full-width tiles, so it keeps the default sizes. */
@media (min-width: 576px) and (max-width: 768px) {
  .flex-agent-grid__meta { padding: 12px 12px 14px; }
  .flex-agent-grid__name { font-size: 18px; }
  .flex-agent-grid__cap { font-size: 12px; margin-top: 4px; }
}

/* Reveal-on-hover would hide the captions forever on anything that can't hover. Show them
   whenever the device has no hover (covers touch tablets at any width) OR the viewport is
   narrow (covers phones + narrow windows, and is what a desktop preview can actually show).
   The hover-only duotone/zoom and the "hover to reveal" hint are dropped in the same cases;
   pointer devices at wider widths keep the hover reveal defined above. */
@media (hover: none), (max-width: 768px) {
  .flex-agent-grid__scrim,
  .flex-agent-grid__meta { opacity: 1; transform: none; }
  a.flex-agent-grid__tile:hover .flex-agent-grid__tile-card::before { opacity: 0; }
  a.flex-agent-grid__tile:hover .flex-agent-grid__img { transform: none; mix-blend-mode: normal; }
  .flex-agent-grid__subheading { display: none; }
}

/* --- Announcement bar --- */
/* cyan-400 bg + navy-brand text -- alt to the red-500/white variant, testing against the
   site's teal/cyan accents instead of the brand red. Navy-on-cyan-400 measures ~8.7:1. */
.flex-announcement-bar {
  background-color: var(--cyan-400);
}

.flex-announcement-bar__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 1em 0;
  color: var(--navy-brand);
  text-decoration: none;
}

.flex-announcement-bar__link:hover,
.flex-announcement-bar__link:focus {
  color: var(--navy-brand);
  text-decoration: none;
}

.flex-announcement-bar__text {
  display: block;
  margin: 0;
  padding: 1em 0;
  color: var(--navy-brand);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.flex-announcement-bar__link .flex-announcement-bar__text {
  padding: 0;
}

.flex-announcement-bar__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 18px;
  font-weight: 700;
}

.flex-announcement-bar__cta-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.flex-announcement-bar__arrow {
  width: 18px;
  height: 18px;
  color: var(--navy-brand);
}

/* --- Callout Banner block (solid emphasis; red = "bottom line").
   Horizontal flex: heading sits beside the body statement. --- */
.flex-banner { padding: var(--spacing-2xl) 0; }
.flex-banner--red { background-color: var(--red-500); }
.flex-banner:has(.flex-banner__icon) { padding: var(--spacing-lg) 0; }
/* Everything left-aligned on one column -- design feedback flagged the old layout's mixed
   alignment (a left-aligned heading/body row next to a separately centered CTA row) as hard
   to read. Lead sentence promoted to its own heading, body kept to a shorter measure, and
   badges + CTA share one baseline below a divider, all still left-aligned. */
.flex-banner .redesign-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
}
.flex-banner__heading {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-2xl);
  font-weight: 800;
  line-height: var(--line-height-tight);
  color: var(--color-white);
  margin: 0;
  max-width: 32ch;
}
.flex-banner__body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  font-weight: 500;
  line-height: var(--line-height-relaxed);
  color: var(--color-white);
  max-width: 60ch; /* shorter measure, per design feedback */
}
.flex-banner__body p { margin: 0; }
.flex-banner__body strong { font-weight: 800; color: var(--color-white); }

/* ComplianceBand-style additions: icon, framework badges, CTA. All optional -- a plain
   heading+body banner (the original use case, e.g. Apex) renders with just those two stacked,
   no divider/bottom-row, since neither badges nor a CTA are present. */
.flex-banner__icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  /* Source SVG has no fill (defaults to black); rendered via <img> so its internal fill
     can't be restyled directly -- this forces it to solid white to match the mock. */
  filter: brightness(0) invert(1);
}
.flex-banner__divider {
  width: 100%;
  border: none;
  border-top: 2px solid rgba(255, 255, 255, 1);
  opacity: 1; /* the element is an <hr>; Bootstrap's base hr{} rule defaults opacity to .25 */
  margin: var(--spacing-xs) 0 0 0;
}
/* Badges + CTA on one baseline, spaced to the row's full width -- not a separate centered row. */
.flex-banner__bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  width: 100%;
  margin-top: var(--spacing-sm);
}
.flex-banner__badges {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}
.flex-banner__badge {
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--red-500);
  background: var(--color-white);
  padding: 5px 10px;
  white-space: nowrap;
}

/* --- Contact CTA block --- */
.flex-cta { padding: var(--spacing-2xl) 0; }
/* Heading left, body right; the button sits below the body. (flex-banner used to share this
   row layout + a min-width alignment with this block, but its own layout changed to a
   single left-aligned column per design feedback -- this block's own layout is unaffected.) */
.flex-cta__row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2xl);
}
.flex-cta__kicker {
  font-family: var(--font-family-mono);
  letter-spacing: 2px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--red-500);
  margin-bottom: var(--spacing-xs);
}
.flex-cta__heading {
  flex: 0 0 auto;
  min-width: 16rem;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xl);
  font-weight: 800;
  line-height: var(--line-height-tight);
  color: var(--color-black);
  margin: 0;
}
.flex-cta__body {
  flex: 1;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-lg);
  font-weight: 500;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  margin: 0;
}
.flex-cta__button { margin-top: var(--spacing-lg); }
.flex-cta--split .redesign-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2xl);
}
.flex-cta--split .flex-cta__row {
  display: block;
}
.flex-cta--split .flex-cta__heading {
  min-width: 0;
  margin-bottom: var(--spacing-sm);
}
.flex-cta--split .flex-cta__button {
  flex: none;
  margin-top: 0;
}
.flex-cta__badges {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  margin-top: var(--spacing-sm);
}
.flex-cta__badge {
  display: inline-block;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xsm);
  font-weight: 600;
  color: var(--navy-brand);
  background: var(--color-white);
  padding: 5px 10px;
}

/* --- Dark theme (flexTheme = "dark"): navy background + light text, matching the
   hero's dark treatment. The hero uses hero-section__container--testing directly;
   the banner has its own emphasis and is excluded. --- */
.flex-section--dark,
.flex-cta--dark {
  background-color: var(--color-dark-blue);
}
.flex-cta--dark {
  position: relative;
  overflow: hidden;
}
.flex-cta--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(rgba(var(--cyan-500-rgb), 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cyan-500-rgb), 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 0%, #000 8%, transparent 70%);
  mask-image: radial-gradient(120% 120% at 50% 0%, #000 8%, transparent 70%);
  pointer-events: none;
}
.flex-cta--dark .redesign-container {
  position: relative;
  z-index: 1;
}
.flex-section--dark .flex-section__heading,
.flex-section--dark .flex-section__body,
.flex-section--dark .flex-section__body strong,
.flex-section--navy .flex-section__heading,
.flex-section--navy .flex-section__body,
.flex-section--navy .flex-section__body strong,
.flex-cta--dark .flex-cta__heading,
.flex-cta--dark .flex-cta__body,
.flex-cta--gradient-hero .flex-cta__heading,
.flex-cta--gradient-hero .flex-cta__body {
  color: var(--color-white);
}
.flex-cta--dark .flex-cta__kicker,
.flex-cta--gradient-hero .flex-cta__kicker {
  color: var(--cyan-400);
}

/* Navy theme (flexTheme = "navy"): the actual brand navy token, distinct from "dark"'s
   generic --color-dark-blue. */
.flex-section--navy {
  background: var(--navy-brand);
}

/* Gradient-hero theme ("Switching" band): centered/stacked, not the side-by-side heading+body
   row the other flexCta themes use -- the mock's layout for this one is genuinely different
   (centered single column, not a two-column row), so it overrides .flex-cta__row's flex
   layout rather than trying to force the row layout to also look centered. Same
   --gradient-hero + grid-line technique as the hero variants, for visual continuity. */
.flex-cta--gradient-hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-hero);
}
.flex-cta--gradient-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(rgba(var(--cyan-500-rgb), 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cyan-500-rgb), 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 0%, #000 8%, transparent 70%);
  mask-image: radial-gradient(120% 120% at 50% 0%, #000 8%, transparent 70%);
  pointer-events: none;
}
/* .flex-cta__button is a sibling of .flex-cta__row, not a child of it (see _cta.twig) --
   centering .flex-cta__row alone never touched the button. Centering the shared parent
   instead handles both consistently. */
.flex-cta--gradient-hero .redesign-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.flex-cta--gradient-hero .flex-cta__row {
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}
.flex-cta--gradient-hero .flex-cta__heading {
  min-width: 0;
  font-size: 44px;
}
.flex-cta--gradient-hero .flex-cta__button { margin-top: var(--spacing-lg); }

/* Responsive overrides live here now, not in website-redesign-styles.css -- same selectors,
   equal specificity, but that file loads before this one, so an unconditional base rule here
   was silently beating a conditional responsive rule there regardless of viewport (e.g.
   .flex-banner .redesign-container's mobile gap never actually applied). Moving the overrides
   to the same file as their base rules, after them, is what makes source order do its job. */
@media (max-width: 991px) {
  .flex-banner { padding: var(--spacing-xl) 0; }
  .flex-banner .redesign-container {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  .flex-cta { padding: var(--spacing-xl) 0; }
  .flex-cta__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  .flex-banner__heading,
  .flex-cta__heading { min-width: 0; }
}
@media (max-width: 768px) {
  .flex-banner__heading,
  .flex-cta__heading { font-size: var(--font-size-lg); }
  .flex-banner__body,
  .flex-cta__body { font-size: var(--font-size-base); }
}
@media (max-width: 575px) {
  .flex-cta { padding: var(--spacing-lg) 0; }
}

/* --- Contrast panels (Safety Framework: "the paradox" / "enforcement") --- */
.flex-contrast { padding: var(--spacing-2xl) 0; border-top: 1px solid var(--slate-200); }
.flex-contrast__kicker { font-family: var(--font-family-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--cyan-700); margin-bottom: var(--spacing-xs); }
.flex-contrast__heading { font-family: var(--font-family-primary); font-weight: 800; font-size: var(--font-size-xl); line-height: 1.1; letter-spacing: -0.02em; color: var(--slate-700); margin: 0; max-width: 26ch; }
.flex-contrast__deck { font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); color: var(--slate-700); margin-top: var(--spacing-sm); max-width: 76ch; }
.flex-contrast__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}
.flex-contrast__panel { border: 1px solid var(--slate-200); background: var(--color-white); padding: var(--spacing-lg); }
.flex-contrast__panel--no { border-color: rgba(181, 35, 29, 0.32); }
.flex-contrast__panel--yes { border-color: var(--cyan-300); }
.flex-contrast__tag { font-family: var(--font-family-mono); letter-spacing: 2px; text-transform: uppercase; margin-bottom: var(--spacing-xs); }
.flex-contrast__panel--no .flex-contrast__tag { color: var(--red-500); }
.flex-contrast__panel--yes .flex-contrast__tag { color: var(--cyan-700); }
.flex-contrast__panel-title { font-family: var(--font-family-primary); font-weight: 800; font-size: var(--font-size-md); line-height: 1.15; color: var(--slate-700); margin: 0; }
.flex-contrast__panel-body { color: var(--slate-700); margin-top: var(--spacing-sm); }
.flex-contrast__pullquote {
  margin-top: var(--spacing-xl);
  border-left: 2px solid var(--cyan-500);
  padding: 6px 0 6px var(--spacing-md);
  font-family: var(--font-family-primary);
  font-weight: 800;
  font-size: var(--font-size-md);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--slate-700);
  max-width: 44ch;
}
@media (max-width: 768px) {
  .flex-contrast__panels { grid-template-columns: 1fr; }
}

/* --- Property grid (Safety Framework: the seven properties) --- */
.flex-property-grid { padding: var(--spacing-2xl) 0; background: var(--slate-100); border-top: 1px solid var(--slate-200); border-bottom: 1px solid var(--slate-200); }
.flex-property-grid__kicker { font-family: var(--font-family-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--cyan-700); margin-bottom: var(--spacing-xs); }
.flex-property-grid__heading { font-family: var(--font-family-primary); font-weight: 800; font-size: var(--font-size-xl); line-height: 1.1; letter-spacing: -0.02em; color: var(--slate-700); margin: 0; max-width: 26ch; }
.flex-property-grid__deck { font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); color: var(--slate-700); margin-top: var(--spacing-sm); max-width: 76ch; }
.flex-property-grid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}
.flex-property-grid__card {
  border: 2px solid var(--slate-200);
  background: var(--color-white);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
}
.flex-property-grid__index { font-family: var(--font-family-mono); letter-spacing: 2px; color: var(--slate-400); }
.flex-property-grid__card-title { font-family: var(--font-family-primary); font-weight: 800; font-size: var(--font-size-xl); line-height: 1; color: var(--cyan-700); margin: var(--spacing-xs) 0 0; }
.flex-property-grid__card-body { color: var(--slate-700); margin-top: var(--spacing-sm); }
.flex-property-grid__failure { margin-top: auto; padding-top: var(--spacing-sm); border-top: 1px solid var(--slate-200); }
/* "Failure mode" is a static template label (not per-item content), on its own line above the
   item's specific failure name -- previously baked into propertyItemFailureLabel as one string
   ("Failure mode — Scope drift"), which read as a single run-on line. */
.flex-property-grid__failure-tag { font-family: var(--font-family-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--slate-400); }
.flex-property-grid__failure-label { font-family: var(--font-family-primary); font-weight: 800; color: var(--red-500); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: var(--spacing-sm); }
.flex-property-grid__failure-text { color: var(--slate-600); }

/* --- Maturity levels (Safety Framework: baseline/managed/adaptive) --- */
.flex-maturity { padding: var(--spacing-2xl) 0; }
.flex-maturity__kicker { font-family: var(--font-family-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--cyan-700); margin-bottom: var(--spacing-xs); }
.flex-maturity__heading { font-family: var(--font-family-primary); font-weight: 800; font-size: var(--font-size-xl); line-height: 1.1; letter-spacing: -0.02em; color: var(--slate-700); margin: 0; max-width: 26ch; }
.flex-maturity__deck { font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); color: var(--slate-700); margin-top: var(--spacing-sm); max-width: 76ch; }
.flex-maturity__levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}
.flex-maturity__level { border: 2px solid var(--slate-200); background: var(--color-white); padding: var(--spacing-lg); }
.flex-maturity__level-n { font-family: var(--font-family-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--slate-400); }
.flex-maturity__level-title { font-family: var(--font-family-primary); font-weight: 800; font-size: var(--font-size-xl); margin: var(--spacing-xs) 0 0; color: var(--slate-700); }
.flex-maturity__level-sub { font-family: var(--font-family-primary); font-weight: 700; color: var(--cyan-700); margin-top: 7px; }
.flex-maturity__level-body { color: var(--slate-700); margin-top: var(--spacing-sm); }
/* Levels 2/3 get progressively darker per the mock -- the maturity model's own visual
   metaphor (deeper investment reads as deeper/richer color), not a generic theme option. */
.flex-maturity__level--2 { background: var(--navy-brand); border-color: var(--navy-brand); }
.flex-maturity__level--2 .flex-maturity__level-n { color: var(--cyan-400); }
.flex-maturity__level--2 .flex-maturity__level-title,
.flex-maturity__level--2 .flex-maturity__level-body { color: var(--color-white); }
.flex-maturity__level--2 .flex-maturity__level-sub { color: var(--cyan-300); }
/* Own diagonal cyan-to-navy sweep, per the mock -- not --gradient-hero, which is a radial
   navy-only blend built for hero sections and has no cyan in it at all. */
.flex-maturity__level--3 { background: linear-gradient(160deg, var(--cyan-800), var(--navy-800)); border-color: transparent; }
.flex-maturity__level--3 .flex-maturity__level-n { color: var(--cyan-400); }
.flex-maturity__level--3 .flex-maturity__level-title,
.flex-maturity__level--3 .flex-maturity__level-body { color: var(--color-white); }
.flex-maturity__level--3 .flex-maturity__level-sub { color: var(--cyan-300); }
@media (max-width: 768px) {
  .flex-maturity__levels { grid-template-columns: 1fr; }
}

/* --- flexAccordion tabs display style ---
   Checkbox-hack tabs: hidden radios (kept focusable, not display:none) + :has() to reveal the
   matching panel, same "no bespoke JS" approach as the accordion's own <details>/<summary>.
   Light surface (slate-100), not the base .flex-accordion dark navy-brand -- this mode suits
   a light "tint band" between other light sections (e.g. Safety Framework's lifecycle matrix),
   not a dark FAQ band. */
.flex-accordion--tabs { background: var(--slate-100); }
.flex-accordion--tabs .flex-accordion__eyebrow { color: var(--red-500); }
.flex-accordion--tabs .flex-accordion__title,
.flex-accordion--tabs .flex-accordion__subtitle { color: var(--slate-700); }
.flex-accordion__tabs {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  max-width: 1180px; /* matches .flex-comparison-table__wrap -- same page, same content width */
  margin: 0 auto var(--spacing-lg) auto;
}
.flex-accordion__tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.flex-accordion__tab-label {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: var(--font-size-sm);
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--slate-200);
  background: var(--color-white);
  color: var(--slate-500);
  cursor: pointer;
}
.flex-accordion__tab-input:checked + .flex-accordion__tab-label {
  background: var(--cyan-800);
  border-color: var(--cyan-800);
  color: var(--color-white);
}
.flex-accordion__tab-input:focus-visible + .flex-accordion__tab-label {
  outline: 2px solid var(--cyan-500);
  outline-offset: 2px;
}
.flex-accordion__panels {
  max-width: 1180px; /* matches .flex-comparison-table__wrap -- same page, same content width */
  margin: 0 auto;
  border: 1px solid var(--slate-200);
  overflow: hidden;
  background: var(--color-white);
}
.flex-accordion__tab-panel { display: none; }
.flex-accordion__tabs:has(.flex-accordion__tab-input:nth-of-type(1):checked) ~ .flex-accordion__panels .flex-accordion__tab-panel:nth-of-type(1),
.flex-accordion__tabs:has(.flex-accordion__tab-input:nth-of-type(2):checked) ~ .flex-accordion__panels .flex-accordion__tab-panel:nth-of-type(2),
.flex-accordion__tabs:has(.flex-accordion__tab-input:nth-of-type(3):checked) ~ .flex-accordion__panels .flex-accordion__tab-panel:nth-of-type(3),
.flex-accordion__tabs:has(.flex-accordion__tab-input:nth-of-type(4):checked) ~ .flex-accordion__panels .flex-accordion__tab-panel:nth-of-type(4),
.flex-accordion__tabs:has(.flex-accordion__tab-input:nth-of-type(5):checked) ~ .flex-accordion__panels .flex-accordion__tab-panel:nth-of-type(5),
.flex-accordion__tabs:has(.flex-accordion__tab-input:nth-of-type(6):checked) ~ .flex-accordion__panels .flex-accordion__tab-panel:nth-of-type(6) {
  display: block;
}
.flex-accordion__tab-hint {
  line-height: var(--line-height-relaxed);
  max-width: 80ch;
  margin: 0;
  padding: var(--spacing-lg) var(--spacing-lg) 0 var(--spacing-lg);
}
.flex-accordion__tab-rows { padding: var(--spacing-lg); }
.flex-accordion__tab-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-top: 1px solid var(--slate-200);
}
.flex-accordion__tab-row:first-child { border-top: none; padding-top: 0; }
.flex-accordion__tab-row-name {
  font-family: var(--font-family-primary);
  font-weight: 800;
  color: var(--cyan-700);
}
.flex-accordion__tab-row-text { color: var(--slate-700); }
@media (max-width: 700px) {
  .flex-accordion__tab-row { grid-template-columns: 1fr; gap: var(--spacing-xs); }
}