/* Homepage hero (2026-11-10): the copy on the left, the product on the right
   in a laptop's screen, a phone beside it, both on a soft pedestal. The
   exported React hero keeps its markup (the headline, the CTA and "Scroll to
   explore" are the same nodes the gates read); this sheet only relays them
   out and hides the old floating cards. The badge, email field, Ask AI row,
   devices and stage are mounted by product-hero.js after hydration. */

.EnterpriseHero .graph { display: none !important; }

.EnterpriseHero > div {
  --hero-gutter: 1.5rem;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  height: auto !important;
  min-height: calc(100dvh - var(--announcement-offset, 0px));
  padding-top: clamp(92px, 11vh, 118px) !important;
  padding-bottom: 0 !important;
  padding-inline: var(--hero-gutter) !important;
  overflow: hidden;
}

/* The copy block stops floating at 34% and becomes the first cell. */
.EnterpriseHero > div > div:has(> .HeadlineWithCta) {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0;
  padding: 0 !important;
}

.EnterpriseHero .HeadlineWithCta {
  grid-column: 1 / -1 !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.EnterpriseHero .HeadlineWithCta h1 {
  text-align: left !important;
  max-width: 100%;
  margin: 0;
  font-size: clamp(2rem, 3.45vw, 3.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.EnterpriseHero .hero-badge + h1 { margin-top: 20px; }

/* The hero carries the headline, its one-line subline and the actions below.
   Any other paragraph stays hidden. After hydration the text animation
   wraps the subline and splits each line into its own p, so the block is
   styled, not the p; the lines run on as one sentence. */
.EnterpriseHero .HeadlineWithCta > :not(.RichText) p { display: none !important; }
.EnterpriseHero .HeadlineWithCta > .RichText {
  margin: 18px 0 0 !important;
  max-width: 560px !important;
  text-align: left !important;
  font-size: clamp(1rem, 1.25vw, 1.1875rem) !important;
  line-height: 1.45 !important;
  color: #3d4757;
  text-wrap: pretty;
}
.EnterpriseHero .HeadlineWithCta > .RichText div { text-align: left !important; display: inline; }
.EnterpriseHero .HeadlineWithCta > .RichText p { margin: 0; display: inline; }
.EnterpriseHero .HeadlineWithCta > .RichText p + p::before { content: " "; }

/* The exported CTA gives way to the email field. It stays in the tree (its
   intro is the hydration signal) and is taken out once the field mounts. */
.EnterpriseHero .HeadlineWithCta > .FlatCta { opacity: 0 !important; pointer-events: none; }
.EnterpriseHero[data-product-hero="ready"] .HeadlineWithCta > .FlatCta { display: none !important; }

/* Proof badge: the SOC 2 line from the Security page, linking to it. */
.EnterpriseHero .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 13px 0 10px;
  border-radius: 999px;
  background: #f3f6fa;
  box-shadow: inset 0 0 0 1px rgba(17, 51, 89, 0.12);
  color: #113359;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms ease;
}
.EnterpriseHero .hero-badge:hover { background: #e9eef5; }
.EnterpriseHero .hero-badge svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Email field and button in one pill. */
.EnterpriseHero .hero-signup {
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(460px, 100%);
  margin: 30px 0 0;
  padding: 5px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 51, 89, 0.16), 0 10px 24px -14px rgba(17, 51, 89, 0.35);
  transition: box-shadow 200ms ease;
}
.EnterpriseHero .hero-signup:focus-within { box-shadow: 0 0 0 2px #2f6fd6, 0 10px 24px -14px rgba(17, 51, 89, 0.35); }
.EnterpriseHero .hero-signup input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 10px 0 16px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0b1220;
  font: inherit;
  font-size: 16px;
}
.EnterpriseHero .hero-signup input::placeholder { color: #7a8393; }
.EnterpriseHero .hero-signup button {
  flex: 0 0 auto;
  height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #113359;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.EnterpriseHero .hero-signup button:hover { background: #0b2643; }
.EnterpriseHero .hero-signup button:focus-visible { outline: 2px solid #2f6fd6; outline-offset: 2px; }

/* Ask AI: three marks that open an assistant with a question about Finsider. */
.EnterpriseHero .hero-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  color: #5b6472;
  font-size: 14px;
  line-height: 1.2;
}
.EnterpriseHero .hero-ask-marks { display: flex; gap: 8px; }
.EnterpriseHero .hero-ask-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #fff;
  color: #0b1220;
  box-shadow: inset 0 0 0 1px rgba(17, 51, 89, 0.16);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.EnterpriseHero .hero-ask-mark:hover { background: #f3f6fa; box-shadow: inset 0 0 0 1px rgba(17, 51, 89, 0.3); }
.EnterpriseHero .hero-ask-mark:focus-visible { outline: 2px solid #2f6fd6; outline-offset: 2px; }
.EnterpriseHero .hero-ask-mark svg { width: 16px; height: 16px; display: block; }

/* The stage: the devices, faded in once mounted. */
.EnterpriseHero .product-hero-stage {
  position: relative;
  min-width: 0;
  width: 100%;
  margin: 40px 0 28px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.EnterpriseHero .product-hero-stage.is-ready { opacity: 1; transform: none; }

/* Every size below is a share of the device box's width (cqw), so the
   composition scales as one picture. */
.EnterpriseHero .hero-device {
  position: relative;
  width: 100%;
  margin-inline: auto;
  aspect-ratio: 100 / 63;
  container-type: inline-size;
}
.EnterpriseHero .hero-pedestal {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -9%;
  height: 34%;
  background:
    radial-gradient(50% 42% at 50% 58%, rgba(17, 51, 89, 0.16), rgba(17, 51, 89, 0) 72%),
    radial-gradient(50% 50% at 50% 50%, #e9eff7 0%, rgba(233, 239, 247, 0.6) 55%, rgba(233, 239, 247, 0) 100%);
  pointer-events: none;
}

.EnterpriseHero .hero-laptop {
  position: absolute;
  left: 5%;
  top: 0;
  width: 79%;
}
.EnterpriseHero .hero-laptop-lid {
  position: relative;
  padding: 1.5cqw 1.5cqw 1.8cqw;
  border-radius: 2.2cqw 2.2cqw 0.5cqw 0.5cqw;
  background: #0e131b;
  box-shadow:
    0 0 0 0.22cqw #c3c9d2,
    0 3cqw 6cqw -3cqw rgba(17, 51, 89, 0.4);
}
.EnterpriseHero .hero-laptop-camera {
  position: absolute;
  left: 50%;
  top: 0.55cqw;
  width: 0.45cqw;
  height: 0.45cqw;
  margin-left: -0.225cqw;
  border-radius: 50%;
  background: #2b3442;
}
.EnterpriseHero .hero-laptop-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0.35cqw;
  background: #fff;
}
.EnterpriseHero .hero-laptop-base {
  position: relative;
  width: 116%;
  height: 1.9cqw;
  margin-left: -8%;
  border-radius: 0.2cqw 0.2cqw 1.6cqw 1.6cqw / 0.2cqw 0.2cqw 1.9cqw 1.9cqw;
  background: linear-gradient(180deg, #eef0f3 0%, #d5dae1 45%, #a9b0bb 100%);
  box-shadow: 0 1.4cqw 2.4cqw -1.2cqw rgba(17, 51, 89, 0.45);
}
.EnterpriseHero .hero-laptop-base::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 15%;
  height: 42%;
  transform: translateX(-50%);
  border-radius: 0 0 0.9cqw 0.9cqw;
  background: #c4cad3;
}

/* The product window fills the laptop's screen. */
.EnterpriseHero .product-hero-window {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 62.5px;
  background: #fff;
  overflow: hidden;
}

/* The phone, overlapping the laptop's right edge. */
.EnterpriseHero .hero-phone {
  position: absolute;
  right: 0;
  bottom: 2%;
  z-index: 5;
  width: 22.5%;
  aspect-ratio: 9 / 19;
  padding: 0.7cqw;
  border-radius: 3.6cqw;
  background: #0e131b;
  box-shadow:
    0 0 0 0.22cqw #c3c9d2,
    0 3cqw 5cqw -2cqw rgba(17, 51, 89, 0.45);
}
.EnterpriseHero .hero-phone-screen {
  height: 100%;
  overflow: hidden;
  border-radius: 2.95cqw;
  background: #f5f7fa;
  color: #0b1220;
  container-type: inline-size;
}
/* Inside the phone, cqw is a share of the phone screen's width. */
.EnterpriseHero .hero-phone-status {
  position: relative;
  display: flex;
  align-items: center;
  height: 15cqw;
  padding: 0 9cqw;
  font-size: 5.6cqw;
  font-weight: 600;
}
.EnterpriseHero .hero-phone-island {
  position: absolute;
  left: 50%;
  top: 4cqw;
  width: 30cqw;
  height: 8.5cqw;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #0e131b;
}
.EnterpriseHero .hero-phone-head {
  display: flex;
  align-items: center;
  gap: 3.5cqw;
  padding: 3cqw 7cqw 0;
  font-size: 9cqw;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.EnterpriseHero .hero-phone-head img { width: 8cqw; height: 8cqw; display: block; }
.EnterpriseHero .hero-phone-company {
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 2.5cqw 7cqw 0;
  color: #5b6472;
  font-size: 5.2cqw;
  white-space: nowrap;
}
.EnterpriseHero .hero-phone-company em {
  padding: 0.6cqw 2.4cqw;
  border-radius: 99px;
  background: #e6ebf2;
  color: #3d4757;
  font-style: normal;
  font-size: 4.4cqw;
}
.EnterpriseHero .hero-phone-card {
  display: flex;
  flex-direction: column;
  gap: 1.5cqw;
  margin: 5cqw 5cqw 0;
  padding: 5cqw 6cqw;
  border-radius: 5cqw;
  background: #113359;
  color: #fff;
}
.EnterpriseHero .hero-phone-card-label { font-size: 4.8cqw; color: rgba(255, 255, 255, 0.72); }
.EnterpriseHero .hero-phone-card strong { font-size: 10cqw; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.EnterpriseHero .hero-phone-section {
  margin: 6cqw 7cqw 2cqw;
  color: #5b6472;
  font-size: 4.8cqw;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.EnterpriseHero .hero-phone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3cqw;
  margin: 0 5cqw 2.4cqw;
  padding: 3.6cqw 4cqw;
  border-radius: 4cqw;
  background: #fff;
  box-shadow: 0 0 0 0.5cqw rgba(17, 51, 89, 0.08);
}
.EnterpriseHero .hero-phone-row-text { display: flex; flex-direction: column; gap: 1cqw; min-width: 0; }
.EnterpriseHero .hero-phone-row-title { font-size: 5.4cqw; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.EnterpriseHero .hero-phone-row-detail { font-size: 4.4cqw; color: #6b7482; white-space: nowrap; }
.EnterpriseHero .hero-phone-pill {
  flex: 0 0 auto;
  padding: 1.6cqw 3.2cqw;
  border-radius: 99px;
  background: #e8effa;
  color: #1f5fd1;
  font-size: 4.4cqw;
  font-weight: 500;
}

/* The screens of the sequence sit on top of one another; the active one shows. */
.EnterpriseHero .product-hero-window img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 320ms ease;
}
.EnterpriseHero .product-hero-window img.is-active { opacity: 1; }

/* Cursors: the tour's kite pointer with its name tag, one per collaborator.
   Position is a percentage of the screen, moved on a damped curve. */
.EnterpriseHero .product-hero-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
  transition: transform 1100ms cubic-bezier(0.3, 0.75, 0.25, 1);
}
.EnterpriseHero .product-hero-cursor .product-hero-pointer {
  transform-origin: 3px 2.5px;
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.EnterpriseHero .product-hero-cursor.is-pressed .product-hero-pointer { transform: scale(0.78); }
.EnterpriseHero .product-hero-cursor svg { display: block; width: 22px; height: 22px; }
.EnterpriseHero .product-hero-tag {
  position: absolute;
  left: 13px;
  top: 19px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.EnterpriseHero .product-hero-tag .fin-glyph { width: 9px; height: 9px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .EnterpriseHero .product-hero-stage { transition: none; }
  .EnterpriseHero .product-hero-cursor { transition: none; }
}

/* Desktop: copy and devices side by side, the client logos beneath both. */
@media (min-width: 1024px) {
  .EnterpriseHero > div {
    --hero-gutter: max(2.5rem, calc((100vw - 1260px) / 2));
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: 1fr auto;
    column-gap: clamp(36px, 4.5vw, 80px);
    align-content: stretch;
  }
  .EnterpriseHero > div > div:has(> .HeadlineWithCta) { grid-column: 1; grid-row: 1; align-self: center; }
  .EnterpriseHero .product-hero-stage {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 24px 0 40px;
  }
  /* On a short window the devices shrink to keep the logos in view. */
  .EnterpriseHero .hero-device { max-width: calc((100dvh - 260px) * 1.55); }
  .EnterpriseHero .hero-logos { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 767px) {
  .EnterpriseHero > div { padding-top: calc(var(--announcement-offset, 0px) + 88px) !important; }
  .EnterpriseHero .HeadlineWithCta h1 { max-width: 100%; font-size: 2rem !important; line-height: 1.08 !important; }
  .EnterpriseHero .hero-badge + h1 { margin-top: 16px; }
  .EnterpriseHero .HeadlineWithCta > .RichText { margin-top: 14px !important; }
  .EnterpriseHero .hero-signup { margin-top: 24px; }
  .EnterpriseHero .hero-signup button { padding: 0 16px; }
  .EnterpriseHero .hero-ask { margin-top: 16px; }
  .EnterpriseHero .product-hero-stage { margin: 36px 0 32px; }
  /* The laptop's screen is small on a phone; the cursors shrink with it. */
  .EnterpriseHero .product-hero-cursor svg { width: 16px; height: 16px; }
  .EnterpriseHero .product-hero-tag { left: 9px; top: 14px; gap: 4px; height: 16px; padding: 0 5px; border-radius: 4px; font-size: 9px; }
  .EnterpriseHero .product-hero-tag .fin-glyph { width: 7px; height: 7px; }
}

/* Client logos along the bottom edge of the hero: a caption, then a row of
   marks running edge to edge and fading out at both sides.    Mounted by product-hero.js with the stage. */
.EnterpriseHero[data-hero-logos] > div {
  --hero-logo-tile-h: 66px;
  --hero-logo-size: 0.88; /* one shrink for every client logo, proportions kept */
  --hero-logo-gap: 60px;
  --hero-logo-pad: 12px;
  --hero-logo-caption: 24px;
  padding-top: clamp(70px, 8.5vh, 92px) !important;
}
.EnterpriseHero .hero-logos {
  flex: 0 0 auto;
  align-self: stretch;
  margin-inline: calc(-1 * var(--hero-gutter));
  padding-bottom: var(--hero-logo-pad);
  opacity: 0;
  transition: opacity 600ms ease 120ms;
}
.EnterpriseHero .hero-logos.is-ready { opacity: 1; }
.EnterpriseHero .hero-logos-caption {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: var(--hero-logo-caption);
  margin: 0 0 8px;
  padding-inline: 24px;
  color: #5b6472;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
}
.EnterpriseHero .hero-logos-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.EnterpriseHero .hero-logos-track {
  display: flex;
  width: max-content;
  animation: hero-logos-scroll 90s linear infinite;
  will-change: transform;
}
.EnterpriseHero .hero-logos-tile {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--hero-logo-tile-h);
  margin-right: var(--hero-logo-gap);
}
.EnterpriseHero .hero-logos-tile img {
  display: block;
  width: auto;
  height: calc(var(--hero-logo-tile-h) * var(--logo-scale, 0.6) * var(--hero-logo-size, 1));
  object-fit: contain;
  opacity: 0.9;
}
@keyframes hero-logos-scroll { to { transform: translate3d(-50%, 0, 0); } }

/* "Scroll to explore" is retired; the logos close the hero. */
.EnterpriseHero[data-hero-logos] > div > .absolute.right-8 { display: none !important; }

@media (max-height: 780px) and (min-width: 768px) {
  .EnterpriseHero[data-hero-logos] > div {
    --hero-logo-tile-h: 56px;
    --hero-logo-gap: 52px;
    --hero-logo-pad: 18px;
  }
}
@media (max-width: 767px) {
  .EnterpriseHero[data-hero-logos] > div {
    --hero-logo-tile-h: 56px;
    --hero-logo-gap: 40px;
    --hero-logo-pad: 16px;
    --hero-logo-caption: 22px;
    padding-top: calc(var(--announcement-offset, 0px) + 88px) !important;
  }
  .EnterpriseHero .hero-logos { margin-top: auto; padding-top: 16px; }
  .EnterpriseHero .hero-logos-caption { font-size: 13px; margin-bottom: 10px; }
  .EnterpriseHero .hero-logos-track { animation-duration: 70s; }
}

/* "As seen on": the launch coverage, in place of the client marquee that used
   to sit in the dark bridge panel. The exported label and marquee stay in the
   React tree, hidden; this block is an extra sibling. */
.EnterpriseBridge [data-press="ready"] > div:has(> .triangle),
.EnterpriseBridge [data-press="ready"] > .LogoMarquee { display: none !important; }
.EnterpriseBridge .press-strip { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.EnterpriseBridge .press-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; margin: 0 0 2.25rem; }
.EnterpriseBridge .press-proof-item { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.EnterpriseBridge .press-proof dt { font-size: 2rem; line-height: 1; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.EnterpriseBridge .press-proof dd { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: rgba(255, 255, 255, 0.72); }
.EnterpriseBridge .press-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.EnterpriseBridge .press-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: hero-logos-scroll 36s linear infinite;
  will-change: transform;
}
.EnterpriseBridge .press-viewport:hover .press-track,
.EnterpriseBridge .press-viewport:focus-within .press-track { animation-play-state: paused; }
.EnterpriseBridge .press-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 48px;
  margin-right: 44px;
  opacity: 0.86;
  transition: opacity 200ms ease;
}
.EnterpriseBridge a.press-item:hover,
.EnterpriseBridge a.press-item:focus-visible { opacity: 1; }
.EnterpriseBridge .press-item img { display: block; width: auto; height: var(--press-h, 24px); }
.EnterpriseBridge .press-item img.press-emblem { border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22); }

@media (prefers-reduced-motion: reduce) {
  .EnterpriseHero .hero-logos { transition: none; }
  .EnterpriseHero .hero-logos-track,
  .EnterpriseBridge .press-track { animation: none; }
  .EnterpriseBridge .press-viewport { overflow-x: auto; }
}

/* Site header: a tighter band under the announcement bar on desktop. */
@media (min-width: 768px) {
  header > div > .relative.z-100 { padding-block: 14px !important; }
}

/* Announcement bar: Learn more sits a little apart, smaller and in italics. */
div:has(> span > .announcement-detail) > a {
  margin-left: 12px;
  font-size: 12px;
  font-style: italic;
}

/* Guides index: card titles hold to two lines. */
a[href^="/guides/"] h3.header5-regular { font-size: 1.25rem !important; line-height: 1.25 !important; }
@media (max-width: 767px) {
  a[href^="/guides/"] h3.header5-regular { font-size: 1.125rem !important; }
}

/* The hero's primary button is Finsider navy, like every other primary action. */
.EnterpriseHero .HeadlineWithCta .FlatCta { background-color: #113359 !important; }

/* Text contrast (WCAG AA, 4.5:1). The template's footer labels and small
   print were #575757 on black, guide dates and read times #929292 on
   #f2f2f2, and the light-header "Log in" #929292 on white. */
footer.bg-black .text-scale-gray-30 { color: #8a8a8a; }
.bg-scale-gray-95 .text-scale-gray-60 { color: #6b6b6b; }
html[data-theme=light] body { --nav-login-cta-text: #6b6b6b; }

/* Homepage "Three Products" cards: the second subtitle paragraph is the
   product's price (scripts/add-product-prices.mjs). */
.EnterprisePillars .HeadlineWithCta .RichText p + p {
  margin-top: 12px;
  font-weight: 500;
  color: #113359;
}

/* Customer story headings stay at two lines on a phone. */
@media (max-width: 480px) { .scroll-mt-8 > h2.header4-regular { font-size: 1.25rem; line-height: 1.3; } }

/* Addback hero: its picture is gone (remove-addback-hero-image.mjs), so a hero
   with no media wears the data fog's navy from the first paint, and the digits
   draw over it once the fog mounts. */
.FullBleedMediaSection:not(:has(.ResponsiveImage, video)) > div.relative { background-color: #13304f; }
/* The fog canvas paints over the picture's dimming overlay; without it the
   overlay would dim the navy until the fog arrives. */
.FullBleedMediaSection:not(:has(.ResponsiveImage, video)) .media-overlay { display: none; }