/* ============================================================
   Site-wide redesign overrides (loaded on every page, after the
   legacy CSS). Brings headings and CTA buttons in line with the
   redesigned homepage hero / agent-workflows section.
   ============================================================ */
/* Fonts (Space Grotesk + Inter) load via <link> in fragments/index/head.html —
   early, non-render-blocking. Do NOT re-add an @import here: it re-requests the
   font, is render-blocking, and forms a CSS @import chain (discovered late). */

/* ---- Announcement (toast) bar — fixed above the nav on every page ---- */
:root { --rd-toast-h: 44px; }
body { padding-top: var(--rd-toast-h); }
.navbar-wrapper { top: var(--rd-toast-h) !important; }   /* push the fixed nav below the toast */
.rd-toast {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1100;
  height: var(--rd-toast-h); display: flex; align-items: center; justify-content: center;
  padding: 0 20px; background: #143E75; color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
.rd-toast__inner { display: flex; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.rd-toast__msg { font-size: 14px; line-height: 1.3; }
.rd-toast__msg--short { display: none; }   /* desktop shows the full message */
.rd-toast__cta {
  color: #fff; font-weight: 600; font-size: 14px; white-space: nowrap;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.rd-toast__cta-text { text-decoration: underline; text-underline-offset: 3px; }
.rd-toast__arrow { font-size: 15px; transition: transform .2s ease; }
.rd-toast__cta:hover { opacity: .85; }
.rd-toast__cta:hover .rd-toast__arrow { transform: translateX(3px); }
.rd-toast__close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; opacity: .75; padding: 4px 8px;
}
.rd-toast__close:hover { opacity: 1; }
/* Dismissed: collapse the bar and remove its offset everywhere */
:root.rd-toast-dismissed { --rd-toast-h: 0px; }
.rd-toast-dismissed .rd-toast { display: none; }
@media (max-width: 720px) {
  .rd-toast { padding: 0 40px; }   /* symmetric padding keeps content centered, room for close */
  .rd-toast__msg--full { display: none; }
  .rd-toast__msg--short { display: inline; }
  .rd-toast__inner { gap: 8px; }
  .rd-toast__msg, .rd-toast__cta { font-size: 12px; }
}

/* ---- Headings: Space Grotesk, regular weight, tight tracking ----
   font-weight is intentionally NOT !important: this file loads after the legacy
   CSS, so source order still beats the legacy element-level h1{600}/h1..h6{bold}
   for plain content, while any redesign heading CLASS (.rd-h1, .sol-hero__title,
   .p26-*) can override the weight by specificity without needing its own
   !important. (font-family stays !important — brand normalization sitewide.) */
h1, h2 {
  font-family: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* ---- Redesigned nav: pinned globally so EVERY page gets the white bar + dark
   ink + hover states (previously these lived in redesign.css, homepage-only). ---- */
.navbar-wrapper, .nav-bar { background-color: #fff !important; }
.nav-bar { color: #14202c !important; border-bottom: 1px solid #e6e8eb; }
.brand-logo, .nav-link, .nav-bar a:not(.button), .nav-bar .menu-icon-bar { color: #14202c !important; }
.nav-bar .menu-icon-bar { background-color: #14202c !important; }
/* Brand logo: the SVG has no intrinsic size and was sized by the nav's layout
   height, so on load it rendered large until the nav settled (the flash). Pin an
   explicit render-blocking height (constant across breakpoints) + no transition
   so it paints at the right size immediately and never animates. */
.header-logo-wrapper, .header-logo, .header-logo-link, .brand-logo { transition: none !important; }
.brand-logo { height: 38px !important; width: auto !important; }

/* ---- Blue CTA buttons: directional wipe-fill to Midnight on hover ---- */
.button.button-base {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: #2941F3;
  color: #fff !important;   /* white copy on the cobalt fill (legacy defaults it to the link color) */
  white-space: nowrap;      /* keep "Get in touch" on one line at every screen size */
  font-size: 11.25px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 12.75px 22.5px;  /* match the redesign white-outline CTA sizing */
  border-radius: 3px;
  transition: color .35s ease, border-color .35s ease;
}
.button.button-base::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #0A1880;
  transform: translateX(-100%); transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}
.button.button-base:hover::before { transform: translateX(0); }
.button.button-base:hover { background-color: #2941F3; }  /* hold base; let the wipe do the work */

/* ---- Top nav CTA: outlined carbon-black with a light wipe-fill ---- */
.nav-bar .button.button-base {
  background-color: transparent !important;
  color: #040810 !important;
  border: 1px solid #040810 !important;
}
.nav-bar .button.button-base::before { background: #F0F4F8; }
.nav-bar .button.button-base:hover { color: #040810 !important; background-color: transparent !important; }

@media (prefers-reduced-motion: reduce) {
  .button.button-base::before { transition: none; }
}

/* ---- Tablet nav (992–1139px) ----
   The full desktop nav (logo + 5 menu items + search + Sign In + CTA) is too
   wide for this band: the logo gets pinned to the edge and the menu overlaps it.
   legacy only swaps in the hamburger at <=991px, so for the band just above
   that we tighten internal spacing and add a logo<->menu gap so everything fits
   without overlap. Above 1139px the default (roomier) desktop spacing resumes. */
@media (min-width: 992px) and (max-width: 1139px) {
  .nav-bar .container-nav { gap: 20px; padding-left: 28px; padding-right: 28px; }
  .nav-bar .flex-start-center { gap: 28px; }        /* breathing room between the logo and the menu */
  .nav-bar .nav-slot { column-gap: 10px; }          /* tighter spacing between menu items */
  .nav-bar .nav-slot-wrapper { gap: 18px; }         /* menu items <-> search/Sign In */
  .nav-bar .nav-dropdown-toggle { padding-right: 12px; }  /* trim the chevron gutter */
}

/* ===== Homepage footer — dark "abyss" treatment =====
   Recolours the shared legacy footer to #091628 with white copy, logo, and
   icons. Scoped to the homepage's data-mdl-page id so the same footer markup on
   other pages (who-we-serve, products, …) keeps its light styling. The social
   icons are inline SVGs with fill:currentColor, so `color` recolours them; the
   logo and arrow glyphs are <img> files, forced white with brightness(0) invert(1).
   !important is needed because some legacy link selectors carry the variant
   class (e.g. .nav-link.leagl-nav-link.nav-link-base) and outrank a plain class. */
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section {
  background-color: #091628;
}
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section,
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-link,
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-link-arrow,
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-link-arrow div,
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .text-legal,
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .leagl-nav-link,
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-social-icons a {
  color: #fff !important;
}
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-link:hover,
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-link-arrow:hover,
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .leagl-nav-link:hover {
  color: rgba(255, 255, 255, .72) !important;
}
/* Logo + arrow icons are image files (dark by default) — force them white. */
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-brand img,
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .arrow-link-icon {
  filter: brightness(0) invert(1);
}
/* Subtle divider above the legal bar (matches the layer-1/2 rule below). */
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal {
  border-color: rgba(255, 255, 255, .08);
}

/* ===== Homepage footer — compaction + hierarchy =====
   The legacy footer ships at body scale (20px links, 1.6 line-height, 16px
   margins, 64px section padding) so it stood ~1184px tall and read as sparse
   and flat. Tighten the rhythm and establish three clear tiers within each link
   column: column title → muted uppercase sub-label → compact link. Scoped to the
   homepage page-id like the dark treatment above. */

/* Section vertical rhythm: generous top on the content row, tight bottom before
   the legal bar, and a roomier gap below the legal bar to the footer edge. */
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .container.footer-section { padding-top: 80px !important; }
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .container.footer-section.footer-section-legal { margin-top: 0 !important; padding-top: 56px !important; padding-bottom: 64px !important; }
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-grid { gap: 36px !important; }

/* Tier 3 — base links: the actual destinations. Quiet, tight, 13.5px. */
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-link {
  font-size: 13.5px; font-weight: 400; line-height: 1.35;
  margin-bottom: 7px; color: rgba(255, 255, 255, .8) !important;
}
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-link:hover { color: #fff !important; }

/* Column section headers (Agent workflows / Platform / Industries we help /
   Company / Resources), plus the second group in the two "+"-columns. */
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-link.rd-foot-head {
  font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em;
  text-transform: none; margin-bottom: 14px; color: #fff !important;
}
/* Second group within a column (Who we help, Pricing): extra top gap to separate. */
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-link.rd-foot-subhead { margin-top: 26px; }

/* ===== Homepage footer — single content row =====
   newsletter (left) · 5 nav columns (right). The legal bar below carries the
   social icons, pushed to the far right. Scoped to the homepage page-id. */
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-main {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  grid-template-areas: "newsletter nav";
  column-gap: 28px;   /* same as the nav inter-column gap, so the newsletter's right padding matches */
  align-items: start;
  padding-bottom: 64px;   /* +7px link margin-bottom; roomier gap to the divider */
}
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-news { grid-area: newsletter; }
/* Footer brand lockup — Medallion wordmark + ™, top-left of the newsletter column. */
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-brand {
  display: inline-flex; align-items: flex-end; gap: 2px;
  color: #fff; text-decoration: none; margin: 0 0 28px;
}
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-logo {
  width: 150px; height: auto; display: block; color: #fff;   /* fill is currentColor → white on the dark footer */
}
/* Bottom-align the lockup, then nudge the ™ so its glyph rests on the "Medallion"
   baseline (the bottom of the "n"). The ™ glyph sits high within its own line box,
   so only a small upward lift is needed off the SVG's bottom edge. */
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-tm {
  font-size: 11px; line-height: 1; margin-bottom: 2px;
  color: rgba(255, 255, 255, .7);
}
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-nav {
  grid-area: nav; display: flex; gap: 28px;   /* tighter spacing between the 5 sections */
}
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-col {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
}
/* DOM order is Agent, Industries, Resources, Platform, Company (so the mobile
   multi-column balances into [Agent/Industries/Resources] + [Platform/Company]).
   On the desktop flex row, `order` restores the intended left-to-right sequence
   Agent · Platform · Industries · Company · Resources. */
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-nav .rd-foot-col:nth-child(1) { order: 1; }
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-nav .rd-foot-col:nth-child(2) { order: 3; }
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-nav .rd-foot-col:nth-child(3) { order: 5; }
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-nav .rd-foot-col:nth-child(4) { order: 2; }
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-nav .rd-foot-col:nth-child(5) { order: 4; }

/* The HubSpot embed carries a baked-in 2rem top margin (.u-embed.u-script);
   zero it so the newsletter content top-aligns with the nav column headers. */
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-news .code-embed { margin-top: 0 !important; }

/* Legal bar: single row, social icons pushed to the far right. Uses explicit
   right-margins (not flex `gap`) for spacing — a trailing gap was holding the
   auto-margin 20px short of the edge. */
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal {
  display: flex; align-items: center; flex-wrap: wrap; column-gap: 10px; row-gap: 8px;
}
/* Trademark notice sits beside the © in the legal bar; it carries the bulk of the
   text so it shrinks/wraps first rather than overflowing the row. */
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .rd-foot-trademark {
  flex: 1 1 320px; min-width: 0; margin: 0;
}
/* the legacy clearfix ::before/::after (content:" "; display:table) become stray
   flex items here — the leading one + column-gap shoved "Privacy" 10px right of
   the footer content edge. Remove them so Privacy aligns flush-left. */
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal::before,
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal::after { content: none; }
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .leagl-nav-link {
  margin: 0; padding: 0; border: 0;   /* drop the legacy .nav-link margin/padding + stray border-left so column-gap spacing is even */
}
/* "|" separators are real spans (.rd-foot-sep) spaced by the legal's column-gap →
   "Privacy Policy | Terms of Use | © 2026 Medallion" with even spacing. */
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .rd-foot-sep { color: rgba(255, 255, 255, .5); font-size: 12px; }
/* More subtle legal text; brighter on hover. */
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .text-legal,
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .leagl-nav-link { color: rgba(255, 255, 255, .5) !important; font-size: 12px; font-weight: 400; }
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .leagl-nav-link:hover { color: rgba(255, 255, 255, .8) !important; }
/* The © is a <p> with a legacy bottom margin; in the centered flex row that
   lifted it above the links. Zero its margins so it sits on the line. */
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .text-legal {
  margin: 0;
}
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .footer-social-icons {
  margin: 0 0 0 auto !important; display: flex; gap: 14px;
}
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .social-icon svg {
  width: 20px; height: 20px; display: block;
}
/* The legal bar carries a nav-shell class, so legacy appends an (unused) nav
   overlay as a trailing flex item — its gap held the icons 20px off the edge.
   Drop it from flow so the icons sit flush right. */
:is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .nav-overlay { display: none; }

/* Mobile: stack newsletter over the nav; let the 5 columns wrap. */
@media (max-width: 860px) {
  :is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-main {
    grid-template-columns: 1fr;
    grid-template-areas: "newsletter" "nav";
    column-gap: 0; row-gap: 28px;
  }
  /* Two independent, balanced columns (multi-column) so the short left-hand
     sections pack tightly instead of being stretched to the taller section
     beside them — keeps the left column's length close to the right. */
  :is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-nav { display: block; columns: 2; column-gap: 40px; }
  :is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-col { break-inside: avoid; margin-bottom: 26px; }
  /* Legal: ©/Privacy/Terms stay on one line; social icons drop below, left-aligned. */
  :is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal { flex-wrap: wrap; }
  :is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .text-legal,
  :is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .leagl-nav-link { margin-right: 0; flex: 0 0 auto; width: max-content; font-size: 11px; }
  :is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .rd-foot-sep { font-size: 11px; }
  :is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .footer-social-icons { margin: 26px 0 0 0 !important; flex-basis: 100%; }
  /* Trademark notice gets its own full-width line and wraps (overrides the
     .text-legal `width: max-content` above, which would otherwise overflow). */
  :is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .rd-foot-trademark { flex: 1 1 100%; width: auto; }
  /* Drop the "|" that would dangle at the end of the © line once the trademark wraps below. */
  :is([data-mdl-page="6877cbe9ead9a7e4d2035758"], [data-mdl-page="69f522a153847407f7d615cb"], [data-mdl-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .rd-foot-sep:has(+ .rd-foot-trademark) { display: none; }
}

/* Mobile: prevent typographic widows (a single word stranded alone on the last
   line) in any copy. `text-wrap: pretty` pulls a word down to the last line so
   it is never left by itself. Deliberately low-specificity element selectors so
   intentional per-component `text-wrap: balance` on headings (e.g. .pef-title,
   .p26 headings) still wins. Progressive enhancement — browsers without support
   simply wrap normally. */
@media (max-width: 767px) {
  h1, h2, h3, h4, h5, h6,
  p, li, blockquote, figcaption {
    text-wrap: pretty;
  }
}


/* ============================================================================
   Main nav — Gong-style mega-menu (desktop ≥ 992px)
   A single shared panel morphs/crossfades between sections on hover-intent.
   the legacy native per-dropdown panels are hidden; a custom controller (in
   footer.html) drives this. Mobile (≤991px) keeps the legacy accordion menu.
   ============================================================================ */
@media (min-width: 992px) {
  /* Hide the legacy native dropdown panels — we render one shared panel instead. */
  .nav-bar .nav-dropdown .nav-dropdown-wrap.dropdown-list { display: none !important; }

  /* Keep the nav above the scrim and give it a solid surface when open/scrolled.
     (The wrapper is already position:fixed below the toast — only bump z-index.) */
  .navbar-wrapper { z-index: 1001; }
  [md-navbar].js-scrolled {
    background: #fff;
    box-shadow: 0 1px 0 rgba(9, 22, 40, .08), 0 8px 24px -18px rgba(9, 22, 40, .25);
  }
  .nav-bar .nav-dropdown-toggle { cursor: pointer; }
  /* Persistent underline on the open top-level item (matches the hover wipe). */
  .nav-bar .nav-dropdown.is-open .nav-link::after { right: 0 !important; }
  /* Caret flips up on hover and while the section is open. */
  .nav-bar .nav-dropdown .chevron { transition: transform .25s ease; }
  .nav-bar .nav-dropdown-toggle:hover .chevron,
  .nav-bar .nav-dropdown.is-open .chevron { transform: rotate(180deg); }
  /* Top-level nav items always stay on one line; the text shrinks on tighter
     desktops (down to 12px) rather than ever wrapping to two lines. */
  .nav-bar .nav-slot { flex-wrap: nowrap; }
  .nav-bar .nav-link { white-space: nowrap; }
  .nav-bar .nav-dropdown .nav-link,
  .nav-bar a.nav-link.nav-link-base { font-size: clamp(12px, 1.15vw, 16px); }

  /* Backdrop scrim behind the open panel. */
  .rd-mega-scrim {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(9, 22, 40, .26);
    opacity: 0; visibility: hidden;
    transition: opacity .26s ease, visibility 0s linear .26s;
    pointer-events: none;
  }
  .rd-mega-scrim.is-open {
    opacity: 1; visibility: visible;
    transition: opacity .26s ease;
    pointer-events: auto;
  }

  /* Shared morphing panel. */
  /* The panel layer spans the viewport; the inner box is content-width and
     positioned (by JS) centered over the hovered top-level item. */
  .rd-mega {
    position: fixed; left: 0; right: 0; z-index: 1000;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .26s ease, transform .26s ease, visibility 0s linear .26s;
    pointer-events: none;
  }
  .rd-mega.is-open {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity .26s ease, transform .26s ease;
  }
  .rd-mega.is-open .rd-mega__inner { pointer-events: auto; }
  .rd-mega__inner {
    position: absolute; top: 10px; left: 0;
    width: max-content; max-width: calc(100vw - 32px);
    background: #fff;
    border: 1px solid #e7ebf3;
    border-radius: 6px;
    box-shadow: 0 28px 64px -26px rgba(9, 22, 40, .30);
    overflow: hidden;
    height: 0;
    pointer-events: none;
    transition: height .28s cubic-bezier(.4, 0, .2, 1);
  }
  .rd-mega__viewport {
    padding: 18px 22px 26px;
    opacity: 1;
    transition: opacity .15s ease;
  }
  .rd-mega.is-switching .rd-mega__viewport { opacity: 0; }

  /* Row hover states inside the panel. */
  .rd-mega .sub-nav-link {
    border-radius: 8px;
    transition: background .15s ease, transform .15s ease;
  }
  .rd-mega .sub-nav-link:hover { background: #eef2ff; transform: translateX(2px); }
  .rd-mega .sub-nav-link-title { transition: color .15s ease; }
  .rd-mega .sub-nav-link:hover .sub-nav-link-title { color: #2941f3; }
  /* Promo card lift on hover. */
  /* CTA hover: no pop/shadow — just turn the all-caps link cobalt + nudge the arrow. */
  .rd-mega .nav-card-link .text-block-2 { transition: color .15s ease; }
  .rd-mega .nav-card-link .arrow-link-icon { transition: transform .15s ease, color .15s ease; }
  .rd-mega .nav-card:hover .nav-card-link .text-block-2,
  .rd-mega .nav-card:hover .nav-card-link .arrow-link-icon { color: #2941f3; }
  .rd-mega .nav-card:hover .nav-card-link .arrow-link-icon { transform: translateX(3px); }
  /* Bound the promo graphic so a tall image neither blows out nor gets clipped by
     the panel — keeps the promo card roughly aligned with the menu columns. */
  /* Stack the CTA card vertically: copy on top, image below as a full-width banner. */
  .rd-mega .nav-card { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
  /* Top-align the CTA copy with the menu column headings (drop the legacy top offsets). */
  .rd-mega .nav-card-content { order: 0; margin-top: 0; }
  .rd-mega .nav-card-heading { margin-top: 0; }
  /* Locked promo-card image ratio — identical across all 4 menus (and mirrored
     on mobile below). Explicit aspect-ratio instead of a magic pixel height so
     the crop box stays consistent even if the card width changes. */
  .rd-mega .nav-card-image-wrapper { order: 1; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 6px; }
  .rd-mega .nav-card-image { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
  /* "Who we help" promo: keep the top of the image visible (crop from the bottom). */
  .rd-mega .nav-card-image[src*="Product_Nav"] { object-position: top center; }
  /* Lay the slot out as a flex row of natural-width text columns + a fixed-width
     promo card. This makes the panel width track the NUMBER of columns (1 vs 2),
     so smaller menus (Resources, Company) render a narrower box. */
  .rd-mega .sub-nav-grid-slot { display: flex !important; gap: 36px; align-items: flex-start; }
  .rd-mega .div-block-16 { flex: 0 0 auto; }
  .rd-mega .nav-card-wrap { flex: 0 0 360px; width: 360px; border-left: 1px solid #e3e8f0; padding-left: 28px; }
  /* Lighter grey for the vertical divider lines (between columns + left of CTA). */
  .rd-mega .sub-nav-slot-wrapper { border-left: 1px solid #e3e8f0; }
  /* ...but no line on the far-left edge (the first column). */
  .rd-mega .div-block-16:first-child .sub-nav-slot-wrapper { border-left: 0; }
}

/* Respect reduced-motion: no slide/height easing, just instant show/hide. */
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .rd-mega, .rd-mega__inner, .rd-mega__viewport, .rd-mega-scrim { transition: none !important; }
}

/* ============================================================================
   Main nav — mobile mega-menu (≤ 991px)
   legacy collapses the nav to a hamburger + accordion here, and the desktop
   Gong-style panel is gated to ≥992px. Out of the box the accordion lists the
   icon rows in one column, leaves a stray left rule/indent from the desktop
   multi-column layout, and HIDES the promo card. We restyle it to echo the
   desktop menu: grouped section labels, icon + title rows with a cobalt tap
   state, a caret that flips when open, and the promo card brought back as a
   stacked banner using the SAME locked image ratio as desktop.
   ============================================================================ */
@media (max-width: 991px) {
  /* NOTE: scope to .navbar-wrapper, not .nav-bar — when legacy opens the mobile
     menu it relocates the menu into a .nav-overlay that is a SIBLING of
     header.nav-bar (both inside .navbar-wrapper), so .nav-bar selectors miss. */

  /* Force a single column. the legacy mobile rule sets grid-template-columns:1fr,
     but the promo card's base `grid-column: span 2` creates a 2nd implicit
     column (sized by grid-auto-columns:1fr) and auto-placement drops the two
     section groups side-by-side. Flex column ignores grid placement entirely,
     so every group and nav item lands on its own line, full width. */
  .navbar-wrapper .sub-nav-grid-slot {
    display: flex; flex-direction: column;
    padding: 2px 2rem 14px;
  }
  .navbar-wrapper .div-block-16 { width: 100%; margin: 0; }

  /* Drop the vestigial left rule + indent that only made sense in the desktop
     multi-column panel. */
  .navbar-wrapper .sub-nav-slot-wrapper { border-left: 0; padding-left: 0; }

  /* Section heading → small uppercase group label, like a menu divider. */
  .navbar-wrapper .sub-nav-slot-heading {
    margin: 14px 0 4px;
    font-family: Inter, Arial, sans-serif;
    font-size: 11px; font-weight: 600; letter-spacing: .08em;
    line-height: 1.2; text-transform: uppercase; color: #5b6670;
  }
  .navbar-wrapper .div-block-16:first-child .sub-nav-slot-heading { margin-top: 4px; }
  /* Hide section headings that just repeat the parent toggle label (Resources,
     Company) — the toggle sits directly above them in the accordion. */
  .navbar-wrapper .sub-nav-slot-heading.rd-dupe-heading { display: none; }

  /* Icon + title rows: tap-friendly, with the desktop hover/active look. */
  .navbar-wrapper .sub-nav-slot { grid-row-gap: 2px; }
  .navbar-wrapper .sub-nav-link {
    border-radius: 6px; padding: 9px 10px;
    transition: background .15s ease, color .15s ease;
  }
  .navbar-wrapper .sub-nav-link:hover,
  .navbar-wrapper .sub-nav-link:active { background: #eef2ff; }
  .navbar-wrapper .sub-nav-link:hover .sub-nav-link-title,
  .navbar-wrapper .sub-nav-link:active .sub-nav-link-title { color: #2941f3; }
  .navbar-wrapper .sub-nav-link-grid { grid-column-gap: 12px; align-items: center; }
  .navbar-wrapper .sub-nav-link-title { font-size: 15px; }
  .navbar-wrapper .image-4 { width: 22px; height: 22px; }

  /* Caret flips when the section is open — mirrors the desktop caret flip.
     legacy tags the open toggle with .is-nav-dropdown-toggle-open in a
     collapsed nav (not .is-expanded). */
  .navbar-wrapper .nav-dropdown-toggle .chevron { transition: transform .25s ease; }
  .navbar-wrapper .nav-dropdown-toggle.is-nav-dropdown-toggle-open .chevron,
  .navbar-wrapper .nav-dropdown-toggle.is-expanded .chevron { transform: rotate(180deg); }

  /* Bring back the promo CTA (legacy hides BOTH the card and its wrapper on
     mobile) as a divider line + copy — no image (see below). The card-wrap is
     already inset by the grid's 2rem padding, so the card itself takes no extra
     horizontal margin (stays aligned with the link rows). */
  .navbar-wrapper .nav-dropdown-wrap .nav-card-wrap { display: block; margin: 0; }
  .navbar-wrapper .nav-dropdown-wrap .nav-card {
    display: flex; flex-direction: column; gap: 12px;
    grid-column-gap: 0; grid-row-gap: 0;
    margin: 16px 0 8px; padding-top: 16px;
    border-top: 1px solid #e3e8f0;
  }
  .navbar-wrapper .nav-dropdown-wrap .nav-card-content {
    order: 0; margin: 0; display: block;
  }
  .navbar-wrapper .nav-dropdown-wrap .nav-card-heading {
    margin: 0 0 8px; font-size: 18px; line-height: 1.3;
  }
  /* No promo image on mobile — just the divider line, then the CTA copy below. */
  .navbar-wrapper .nav-dropdown-wrap .nav-card-image-wrapper { display: none; }
  .navbar-wrapper .nav-dropdown-wrap .nav-card-link .text-block-2 { color: #2941f3; }

  /* Bound the open mobile menu to the remaining viewport height (below the
     toast + nav bar) and let IT scroll internally. the legacy own menu panel
     (.nav-slot-wrapper, tagged [data-nav-menu-open] when open) has no height
     cap out of the box — once an accordion section is expanded the panel can
     grow taller than the viewport, and since nothing inside it is a bounded
     scroll container, a touch-drag falls through to the page instead of
     scrolling the menu. --adjust-nav-height is the legacy own per-page nav-bar
     height var (set in each page's scraped <style>); --rd-toast-h is ours. */
  .navbar-wrapper .nav-slot-wrapper {
    max-height: calc(100vh - var(--adjust-nav-height, 93px) - var(--rd-toast-h, 44px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Collapsed menu: hidden until the hamburger sets [data-nav-menu-open], then
     drops as a white panel below the bar. */
  .navbar-wrapper .nav-slot-wrapper[data-nav-menu-open] {
    display: block !important;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid #e6e8eb;
    box-shadow: 0 16px 28px -20px rgba(9, 22, 40, .3);
    padding: 8px 0 20px;
  }
  /* Accordion sections start closed; the mobile controller (footer.html) toggles
     `.is-open` on the section when tapped. Reveal that section's panel here — the
     vendored `.dropdown-list { display: none }` needs an explicit override, and
     the desktop hide rule is min-width:992px so this stays mobile-only. */
  .navbar-wrapper .nav-dropdown .nav-dropdown-wrap { position: static; }
  /* The desktop mega-menu applies a `megamenu` (max-height 0→100svh) reveal animation
     to the panel. On mobile that animation never plays — the panel starts display:none —
     so it stays stuck at the 0% frame (max-height:0) and clips shut even once shown.
     Cancel the animation and reveal the open section in-flow. */
  .navbar-wrapper .nav-dropdown.is-open .dropdown-list {
    display: block;
    max-height: none;
    animation: none;
    overflow: visible;
  }
}

/* ===== Re-shelled resource detail pages (.rd-resource) =====
   Scraped article content wrapped in the 2026 chrome (see src/lib/reshellResource.mjs).
   These rules only apply on those pages (the .rd-resource wrapper doesn't exist on
   the homepage/listings that share the redesign page-id). */

/* Clear the fixed nav + toast (124px) so the article hero isn't tucked under it.
   Heroes vary: the .case-study-wrapper variant ships a built-in 160px top pad
   (blog/webinar), the plain hero ships 0 (guides). Zero the built-in one and set a
   single consistent clearance here so every detail hero starts at the same place. */
.rd-resource { padding-top: clamp(116px, 12vw, 140px); }
.rd-resource .case-study-wrapper { padding-top: 0; }

/* ── Article typography — the redesign type system applied to the scraped prose ── */
.rd-resource .container-content-well { max-width: 760px; margin-left: auto; margin-right: auto; }
.rd-resource h1 { font-weight: 300; letter-spacing: -0.02em; }
.rd-resource .rich-text-block { font-family: var(--rd-font); color: #2b3640; font-size: 18px; line-height: 1.72; }
.rd-resource .rich-text-block p { margin: 0 0 1.3em; }
.rd-resource .rich-text-block h2 { font-family: var(--rd-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -0.01em; color: var(--rd-ink); margin: 1.8em 0 0.5em; }
.rd-resource .rich-text-block h3 { font-family: var(--rd-display); font-weight: 400; font-size: clamp(20px, 2vw, 24px); line-height: 1.25; letter-spacing: -0.01em; color: var(--rd-ink); margin: 1.5em 0 0.4em; }
.rd-resource .rich-text-block h4 { font-family: var(--rd-display); font-weight: 500; font-size: 18px; color: var(--rd-ink); margin: 1.4em 0 0.4em; }
.rd-resource .rich-text-block a { color: var(--rd-blue); text-decoration: underline; text-underline-offset: 2px; }
.rd-resource .rich-text-block a:hover { color: var(--rd-blue-hover); }
.rd-resource .rich-text-block ul, .rd-resource .rich-text-block ol { padding-left: 1.3em; margin: 0 0 1.3em; }
.rd-resource .rich-text-block li { margin-bottom: 0.5em; line-height: 1.7; }
.rd-resource .rich-text-block li::marker { color: var(--rd-grey-2); }
.rd-resource .rich-text-block blockquote { margin: 1.6em 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--rd-blue); color: var(--rd-ink); font-size: 20px; line-height: 1.5; font-family: var(--rd-display); font-weight: 400; }
.rd-resource .rich-text-block figure { margin: 2em 0; }
.rd-resource .rich-text-block img { border-radius: 12px; max-width: 100%; }
.rd-resource .rich-text-block strong { font-weight: 600; color: var(--rd-ink); }
.rd-resource .rich-text-block > :first-child { margin-top: 0; }
.rd-resource .rich-text-block > :last-child { margin-bottom: 0; }

/* ══ Case study detail — Sierra-style layout (rebuilt in reshellResource.mjs) ══
   Hero with title + image + a stats band, then a two-column body: a STICKY meta
   sidebar beside the scrolling article copy. */
.rd-cs .cs-hero { max-width: var(--rd-maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.rd-cs .cs-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 4.5vw, 72px); align-items: center; }
.rd-cs .cs-hero__title { font-family: var(--rd-display); font-weight: 300; font-size: clamp(32px, 4vw, 50px); line-height: 1.08; letter-spacing: -0.02em; color: var(--rd-ink); margin: 0; }
.rd-cs .cs-hero__sub { margin: 20px 0 0; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: var(--rd-grey); max-width: 48ch; }
/* Square media (matches the photo case studies), corners clipped on the wrapper so
   all four round uniformly regardless of the image/thumbnail. */
.rd-cs .cs-hero__media { position: relative; border-radius: 16px; overflow: hidden; line-height: 0; aspect-ratio: 1 / 1; }
/* The hero photo only — scoped so it doesn't also grab the overlaid logo <img>. */
.rd-cs .cs-hero__media > img, .rd-cs .cs-hero__media .cs-video img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; padding: 0; margin: 0; }
/* White customer logo overlaid on the hero photo. The badge carries a soft radial
   scrim (transparent at the edges so the play button stays clear) for legibility on
   light photos; pointer-events:none lets video-hero clicks pass through to the button. */
.rd-cs .cs-hero__badge { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; background: radial-gradient(ellipse 60% 42% at 50% 50%, rgba(9, 22, 40, .45) 0%, rgba(9, 22, 40, 0) 72%); }
.rd-cs .cs-hero__badge .cs-hero__logo { height: clamp(44px, 12%, 68px); width: auto; max-width: 58%; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 2px 14px rgba(9, 22, 40, .55)); }

/* Video hero — clean thumbnail + a single bottom-left play button (matches the
   homepage "Your trusted AI operations partner" button: white triangle, drop-shadow,
   gentle scale-up on hover). Playback handled by Base.astro (data-video="true"). */
.rd-cs .cs-video { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--rd-navy); cursor: pointer; }
.rd-cs .cs-video img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.rd-cs .cs-video:hover img { transform: scale(1.02); }
.rd-cs .cs-video__play { position: absolute; z-index: 3; left: clamp(16px, 1.8vw, 24px); bottom: clamp(16px, 1.8vw, 24px); width: clamp(40px, 3.2vw, 52px); height: clamp(40px, 3.2vw, 52px); display: grid; place-items: center; color: #fff; pointer-events: none; filter: drop-shadow(0 2px 12px rgba(9, 22, 40, .5)); transform-origin: bottom left; transition: transform .3s cubic-bezier(.34, 1.25, .64, 1); }
.rd-cs .cs-video__play svg { width: 100%; height: 100%; fill: currentColor; }
.rd-cs .cs-video:hover .cs-video__play { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) { .rd-cs .cs-video__play { transition: none; } }

/* Stats band inside the hero. */
.rd-cs .cs-hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); margin-top: clamp(40px, 5vw, 68px); padding-top: clamp(28px, 3.5vw, 40px); border-top: 1px solid var(--rd-line); }
.rd-cs .cs-stat { display: flex; flex-direction: column; }
.rd-cs .cs-stat__num { font-family: var(--rd-display); font-weight: 300; font-size: clamp(40px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.02em; color: var(--rd-blue); }
.rd-cs .cs-stat__text { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--rd-grey); }

/* Two-column body: sticky meta sidebar + scrolling prose. */
.rd-cs .cs-layout { max-width: 1040px; margin: 0 auto; padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 40px) clamp(24px, 3vw, 40px); display: grid; grid-template-columns: 236px 1fr; gap: clamp(40px, 5vw, 72px); align-items: start; }
.rd-cs .cs-side { position: sticky; top: 176px; align-self: start; }
.rd-cs .cs-main { min-width: 0; }
/* Case studies whose body is split across several rich-text blocks — restore the
   paragraph rhythm at the seams (each block zeroes its own edge margins). */
.rd-cs .cs-main .rich-text-block + .rich-text-block { margin-top: 1.3em; }

/* Meta sidebar (reuses the scrape's details-list-* markup). */
.rd-cs .details-block.first.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.rd-cs .details-list-item { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.rd-cs .details-list-heading { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rd-grey-2); }
.rd-cs .details-list-content { font-size: 15px; line-height: 1.4; color: var(--rd-ink); }
.rd-cs .details-list-solutions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.rd-cs .details-list-solutions-item { font-size: 11px; font-weight: 500; line-height: 1.3; color: var(--rd-grey); background: var(--rd-bg-soft); border: 1px solid var(--rd-line); border-radius: 999px; padding: 4px 10px; }

/* Closing quote in the body column. */
.rd-cs .cs-quote { margin: clamp(32px, 4vw, 48px) 0 0; padding-left: 22px; border-left: 2px solid var(--rd-line); text-align: left; }
/* Kill the vendored blockquote's own 5px grey border/indent so only the figure's
   thin grey divider shows. */
.rd-cs .cs-quote__text { font-family: var(--rd-display); font-weight: 400; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.4; letter-spacing: -0.01em; color: var(--rd-ink); margin: 0; border-left: 0; padding-left: 0; }
.rd-cs .cs-quote__by { display: block; margin-top: 16px; text-align: left; }
.rd-cs .cs-quote__name { display: block; font-weight: 600; color: var(--rd-ink); font-size: 15px; }
.rd-cs .cs-quote__pos { display: block; color: var(--rd-grey); font-size: 14px; margin-top: 6px; }

/* In-line quotes inside the case study prose (scraped <blockquote>) — match the
   closing .cs-quote design: thin grey rule, Space Grotesk, no decorative glyph.
   Overrides the scrape's per-page blockquote::before quote-mark + blue border. */
.rd-cs .cs-main .rich-text-block blockquote { margin: clamp(32px, 4vw, 48px) 0; padding: 0 0 0 22px; border-left: 2px solid var(--rd-line); color: var(--rd-ink); font-family: var(--rd-display); font-weight: 400; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.4; letter-spacing: -0.01em; }
.rd-cs .cs-main .rich-text-block blockquote::before { content: none; display: none; }
.rd-cs .cs-main .rich-text-block blockquote strong { display: block; margin-top: 16px; font-weight: 600; font-size: 15px; color: var(--rd-ink); }
.rd-cs .cs-main .rich-text-block blockquote sub { display: block; margin-top: 2px; bottom: 0; font-weight: 400; font-size: 14px; color: var(--rd-grey); vertical-align: baseline; }

/* "More customer stories" — Sierra-style cards: customer logo (forced white) over a
   photo with a dark scrim. */
.rd-cs .cs-more { max-width: var(--rd-maxw); margin: 0 auto; padding: clamp(40px, 5vw, 72px) clamp(20px, 4vw, 40px) clamp(8px, 1vw, 16px); }
.rd-cs .cs-more__inner { }
.rd-cs .cs-more__title { font-family: var(--rd-display); font-weight: 300; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.02em; color: var(--rd-ink); margin: 0 0 clamp(24px, 3vw, 40px); }
.rd-cs .cs-more__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px); }
.rd-cs .cs-more__card { display: block; text-decoration: none; }
.rd-cs .cs-more__media { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--rd-navy); }
.rd-cs .cs-more__photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.rd-cs .cs-more__card:hover .cs-more__photo { transform: scale(1.04); }
/* dark scrim so the white logo reads on any photo */
.rd-cs .cs-more__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,22,40,.15), rgba(9,22,40,.5)); }
.rd-cs .cs-more__logo { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(120px, 42%, 200px); height: auto; max-height: 30%; object-fit: contain; object-position: center; filter: brightness(0) invert(1); }

/* Trusted-by CTA — centered white copy on a gradient card (matches CtaBanner);
   button is the shared .rd-btn--primary (uppercase, wipe hover). */
.rd-cs .cs-cta { position: relative; overflow: hidden; max-width: 1312px; margin: clamp(48px, 6vw, 80px) auto clamp(64px, 8vw, 104px); border-radius: 8px; color: #fff; background: var(--rd-grad-deep); display: flex; flex-direction: column; justify-content: center; min-height: clamp(280px, 30vw, 380px); }
.rd-cs .cs-cta__inner { position: relative; width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(48px, 6vw, 96px) clamp(24px, 4vw, 56px); text-align: center; }
.rd-cs .cs-cta__title { font-family: var(--rd-display); font-weight: 400; font-size: clamp(28px, 3vw, 44px); line-height: 1.2; margin: 0 auto 18px; max-width: 100%; color: #fff; }
.rd-cs .cs-cta__sub { font-family: var(--rd-font); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; color: rgba(255,255,255,.82); max-width: 640px; margin: 0 auto 32px; }

@media (max-width: 860px) {
  .rd-cs .cs-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .rd-cs .cs-hero__stats { grid-template-columns: 1fr; gap: 24px; }
  .rd-cs .cs-layout { grid-template-columns: 1fr; gap: 32px; }
  .rd-cs .cs-side { position: static; top: auto; }
  .rd-cs .cs-more__grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* "Get inspired to drive your organization forward" — balance the heading so the
   last word never sits alone on its own line. */
.rd-resource .module.last .heading { text-wrap: balance; }

/* Related-resource cards → match the Resource Library card style. */
.rd-resource .related-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 2.6vw, 36px); }
.rd-resource .resource-card { display: flex; flex-direction: column; background: none; border: 0; box-shadow: none; padding: 0; text-decoration: none; }
.rd-resource .resource-card-image-wrapper { overflow: hidden; border-radius: 12px; border: 1px solid var(--rd-line); background: var(--rd-bg-soft); margin-bottom: 14px; aspect-ratio: 16 / 10; }
.rd-resource .resource-card-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.rd-resource .resource-card:hover .resource-card-image { transform: scale(1.03); }
.rd-resource .resource-card .super-heading { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rd-grey); margin: 0 0 8px; }
.rd-resource .resource-card-heading { font-family: var(--rd-display); font-weight: 400; font-size: 18px; line-height: 1.3; color: var(--rd-ink); margin: 0 0 12px; }
.rd-resource .resource-card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--rd-blue); font-size: 14px; font-weight: 600; margin-top: auto; }
/* The arrow img's `src` now points at a pre-colored blue asset
   (/assets/redesign/icon-arrow-right-blue.svg) rather than the shared black
   vendored one — a CSS mask/background-color recolor was tried first, but
   `mask-image` compositing on a replaced <img> element is inconsistent
   across browsers (rendered correctly in Chromium, stayed black elsewhere),
   so a real pre-colored file is the reliable fix. Just reset the vendored
   `.arrow-link-icon { top: 3px }` relative offset here — tuned for a
   different context, it sat the icon visibly below the "Read" baseline. */
.rd-resource .resource-card-link .arrow-link-icon { position: static; }
@media (max-width: 900px) { .rd-resource .related-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rd-resource .related-list { grid-template-columns: 1fr; } }

/* Webinar hero video: a real play button over the thumbnail (the original legacy
   click handler was dropped in the re-shell; a small script in Base.astro now
   swaps in the Vimeo player on click). */
.rd-resource .video { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.rd-resource .video .video-image { display: block; width: 100%; height: auto; border-radius: 12px; }
.rd-resource .video::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; background: rgba(9, 22, 40, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transition: background .2s ease, transform .2s ease; }
.rd-resource .video::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); z-index: 1; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #fff; }
.rd-resource .video:hover::after { background: var(--rd-blue); transform: translate(-50%, -50%) scale(1.06); }

/* Video lightbox — full-window Vimeo player (mirrors the homepage p26-lightbox).
   Injected into re-shelled resource pages; opened by the handler in Base.astro. */
.rd-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(9, 22, 40, .9); display: none; align-items: center; justify-content: center; padding: clamp(16px, 3.5vw, 40px); }
.rd-lightbox.is-open { display: flex; }
.rd-lightbox__inner { position: relative; width: min(100%, calc((100svh - 120px) * 16 / 9)); max-width: 1600px; aspect-ratio: 16 / 9; }
.rd-lightbox__inner [data-lightbox-frame] { position: absolute; inset: 0; }
.rd-lightbox__inner iframe { width: 100%; height: 100%; border: 0; border-radius: 6px; }
.rd-lightbox__close { position: absolute; top: -44px; right: 0; background: transparent; border: 0; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }

/* The shared `#modal-video` popup (footer.html's MicroModal-based video
   player, used by elevate.astro and the why-medallion comparison pages) has
   `z-index: 1000` baked into the vendored legacy CSS — one point below the
   fixed nav's `z-index: 1001` (see the "Gong-style mega-menu" block above),
   so the nav visually sat on top of and clipped the video popup's top edge.
   Bumped to match .rd-lightbox's 9999 so it's unambiguously the top layer,
   like every other video overlay on the site. ID selector so it outranks the
   vendored `.modal { z-index: 1000 }` rule regardless of stylesheet order. */
#modal-video { z-index: 9999; }

/* Nav search dropdown — tone down the cobalt panel to a soft grey.
   The vendored legacy rule paints the open dropdown with the brand cobalt
   (`.search-dropdown-wrap.is-expanded { background-color: var(--mdl-colors-brand-brand); color: #fff }`),
   which reads as a jarring blue block on open. site.css loads after the legacy
   CSS, so this equal-specificity override wins. Grey panel + dark text keeps the
   inner white search box legible. */
.search-dropdown-wrap.is-expanded {
  /* Reveal the open search panel. The generic `.dropdown-list.is-expanded {
     display:block }` reveal only lives in elevate.css, so on every other page the
     search box added its open class but stayed display:none. Scoped to search here
     (loads on every page); nav dropdowns are unaffected. */
  display: block;
  /* The vendored `searchbar` reveal animation clamps the panel at max-height:0 and
     never plays (it starts display:none), so cancel it and let the panel size to
     its content — same fix as the mobile nav accordion. */
  max-height: none;
  animation: none;
  background-color: #eef0f2;
  color: #303542;
}

/* Elevate subtitle width — originally preserved during the legacy-CSS dedupe
   (Stage 2). The vendored legacy sheet set `.subtitle-hero-elevate` to 65%; the
   scrape needed 100%. That vendored sheet has since been DELETED (legacy-exit
   Stage 4 — every page is now native), and Elevate loads its own decoupled
   elevate.css. This override is harmless (used ONLY on /elevate) and kept as a
   belt-and-suspenders guarantee that the subtitle stays full-width. */
.subtitle-hero-elevate { width: 100%; }

/* "Be part of Elevate" — sticky-scroll split copying the AI page's "A different
   philosophy for AI in healthcare" (.rd-phil): the left heading column pins for
   the section while the right column of items scrolls past, each dimmed until it
   reaches the viewport centre. Desktop only; stacks normally below (QA row 59).
   Scoped to .elevate + the elevate-only .inner-be-part class. */
@media (min-width: 992px) {
  .elevate .inner-be-part { align-items: flex-start; gap: clamp(40px, 6vw, 96px); }
  /* Left heading — sticky, TOP-anchored to the first card's copy line (same calc
     as the first item below) so "Be part of Elevate" starts level with the first
     card instead of floating vertically centred. Mirrors .rd-phil__left. */
  .elevate .inner-be-part > .col-be-part:first-child {
    position: sticky; top: 0; height: 100vh; flex: 0 0 42%;
    justify-content: flex-start; padding-top: calc(50vh - 84px);
  }
  /* padding-bottom holds the header pinned until the last card centres on it
     before release (see .rd-phil__right derivation). */
  .elevate .inner-be-part > .col-be-part:last-child { padding-bottom: calc(24vh + 12px); }
  .elevate .inner-be-part .item-col-be-part {
    min-height: 52vh; display: flex; flex-direction: column; justify-content: center;
    padding-left: 0;   /* drop the legacy 80px icon gutter — icon now flows inline */
    opacity: 0.4; transition: opacity 0.4s ease;
  }
  /* First card top-anchored to the heading so the two line up on entry. */
  .elevate .inner-be-part .item-col-be-part:first-child {
    justify-content: flex-start; padding-top: calc(50vh - 84px);
  }
  .elevate .inner-be-part .item-col-be-part.is-active { opacity: 1; }
  /* Icon flows ABOVE its title (like .rd-phil__icon) instead of the legacy
     absolute top-left gutter, which detached from the vertically-centred copy. */
  .elevate .inner-be-part .icon-item-be-part {
    position: static; top: auto; left: auto;
    width: 56px; height: auto; margin-bottom: 22px; display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  .elevate .inner-be-part .item-col-be-part { transition: none; }
}