/* ============================================================
   Site-wide redesign overrides (loaded on every page, after the
   Webflow CSS). Brings headings and CTA buttons in line with the
   redesigned homepage hero / agent-workflows section.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ---- 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 Webflow
   CSS, so source order still beats Webflow's 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.w-button {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: #2941F3;
  color: #fff !important;   /* white copy on the cobalt fill (Webflow 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.w-button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #0A1880;
  transform: translateX(-100%); transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}
.button.w-button:hover::before { transform: translateX(0); }
.button.w-button: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.w-button {
  background-color: transparent !important;
  color: #040810 !important;
  border: 1px solid #040810 !important;
}
.nav-bar .button.w-button::before { background: #F0F4F8; }
.nav-bar .button.w-button:hover { color: #040810 !important; background-color: transparent !important; }

@media (prefers-reduced-motion: reduce) {
  .button.w-button::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.
   Webflow 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 Webflow footer to #091628 with white copy, logo, and
   icons. Scoped to the homepage's data-wf-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 Webflow link selectors carry the variant
   class (e.g. .nav-link.leagl-nav-link.w-nav-link) and outrank a plain class. */
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section {
  background-color: #091628;
}
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section,
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-link,
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-link-arrow,
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-link-arrow div,
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .text-legal,
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .leagl-nav-link,
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-social-icons a {
  color: #fff !important;
}
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-link:hover,
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-link-arrow:hover,
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-brand img,
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal {
  border-color: rgba(255, 255, 255, .08);
}

/* ===== Homepage footer — compaction + hierarchy =====
   The Webflow 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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .container.footer-section { padding-top: 80px !important; }
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .container.footer-section.footer-section-legal { margin-top: 0 !important; padding-top: 56px !important; padding-bottom: 64px !important; }
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-grid { gap: 36px !important; }

/* Tier 3 — base links: the actual destinations. Quiet, tight, 13.5px. */
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-news { grid-area: newsletter; }
/* Footer brand lockup — Medallion wordmark + ™, top-left of the newsletter column. */
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-tm {
  font-size: 11px; line-height: 1; margin-bottom: 2px;
  color: rgba(255, 255, 255, .7);
}
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-nav {
  grid-area: nav; display: flex; gap: 28px;   /* tighter spacing between the 5 sections */
}
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-nav .rd-foot-col:nth-child(1) { order: 1; }
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-nav .rd-foot-col:nth-child(2) { order: 3; }
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-nav .rd-foot-col:nth-child(3) { order: 5; }
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-nav .rd-foot-col:nth-child(4) { order: 2; }
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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 (.w-embed.w-script);
   zero it so the newsletter content top-aligns with the nav column headers. */
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .rd-foot-trademark {
  flex: 1 1 320px; min-width: 0; margin: 0;
}
/* Webflow's 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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal::before,
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal::after { content: none; }
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .leagl-nav-link {
  margin: 0; padding: 0; border: 0;   /* drop the Webflow .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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .text-legal,
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .leagl-nav-link:hover { color: rgba(255, 255, 255, .8) !important; }
/* The © is a <p> with a Webflow bottom margin; in the centered flex row that
   lifted it above the links. Zero its margins so it sits on the line. */
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .text-legal {
  margin: 0;
}
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .footer-social-icons {
  margin: 0 0 0 auto !important; display: flex; gap: 14px;
}
:is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .social-icon svg {
  width: 20px; height: 20px; display: block;
}
/* The legal bar carries a w-nav class, so Webflow 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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .w-nav-overlay { display: none; }

/* Mobile: stack newsletter over the nav; let the 5 columns wrap. */
@media (max-width: 860px) {
  :is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .rd-foot-nav { display: block; columns: 2; column-gap: 40px; }
  :is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal { flex-wrap: wrap; }
  :is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .text-legal,
  :is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-page="68defe83461f7615c6673e01"]) footer.section .footer-section-legal .rd-foot-sep { font-size: 11px; }
  :is([data-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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-wf-page="6877cbe9ead9a7e4d2035758"], [data-wf-page="69f522a153847407f7d615cb"], [data-wf-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.
   Webflow's native per-dropdown panels are hidden; a custom controller (in
   footer.html) drives this. Mobile (≤991px) keeps Webflow's accordion menu.
   ============================================================================ */
@media (min-width: 992px) {
  /* Hide Webflow's native dropdown panels — we render one shared panel instead. */
  .nav-bar .nav-dropdown .nav-dropdown-wrap.w-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.w-nav-link { 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 Webflow's 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)
   Webflow 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 Webflow opens the mobile
     menu it relocates the menu into a .w-nav-overlay that is a SIBLING of
     header.nav-bar (both inside .navbar-wrapper), so .nav-bar selectors miss. */

  /* Force a single column. Webflow's 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.
     Webflow tags the open toggle with .w--nav-dropdown-toggle-open in a
     collapsed nav (not .w--open). */
  .navbar-wrapper .nav-dropdown-toggle .chevron { transition: transform .25s ease; }
  .navbar-wrapper .nav-dropdown-toggle.w--nav-dropdown-toggle-open .chevron,
  .navbar-wrapper .nav-dropdown-toggle.w--open .chevron { transform: rotate(180deg); }

  /* Bring back the promo CTA (Webflow 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. Webflow's 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 Webflow's 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;
  }
}

/* ===== 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: 140px; 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 Webflow
   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 Webflow 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; }