/* ==========================================================================
   Shorthand Custom CSS (variable-based blacks)
   Reorganized + annotated
   Notes:
   - Consolidated duplicate “animate text” rules.
   - Added aliases for --black-5 style variables (your CSS uses --black-5, but
     you defined --black-05).
   - Fixed likely selector typos for .sh-technologies nth-of-type rules.
   ========================================================================== */

/* File map
   1–5   Theme tokens, typography, navigation, buttons and animation helpers
   6–17  Shared Shorthand page sections and utilities
   18    Applied AI link wheel and card variants
   19    Newsletter components and story compatibility
   20    Video thumbnail preview
   21    Core business wheel and Operational Innovation
   22    Insights banner, 3D motion and cursor physics
   23    October 14 newsletter overrides
   24    Meet Celeris article reading rhythm
   25    Applied AI homepage hub and conversation viewer

   Shared rules precede page-specific overrides. Keep each component's motion
   and responsive rules together; preserve override order within sections.
*/

/* ==========================================================================
   1) Story-scoped Variables / Theme Tokens
   ========================================================================== */
/* Keep shared tokens out of Shorthand’s editor UI. Include the published
   header and standalone wheel modules, which sit outside #article. */
:where(#article, .Theme-Story, .Theme-Header, .jpm-ai-wheel, .jpm-insights-banner) {
  --font-jpm: "Amplitude", "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --anim-shift-lg: 120px; /* try 30px, 40px, 60px */

  --black: #000000;
  --white: #ffffff;

  --tan: #d7ba9d;
  --dark-tan: #936846;
  --light-gray: #f5f7f8;

  --blue: #1a7b99;
  --dark-blue: #005075;

  /* Black opacity variants (5% steps) */
  --black-95: rgba(0, 0, 0, 0.95);
  --black-90: rgba(0, 0, 0, 0.9);
  --black-85: rgba(0, 0, 0, 0.85);
  --black-80: rgba(0, 0, 0, 0.8);
  --black-75: rgba(0, 0, 0, 0.75);
  --black-70: rgba(0, 0, 0, 0.7);
  --black-65: rgba(0, 0, 0, 0.65);
  --black-60: rgba(0, 0, 0, 0.6);
  --black-55: rgba(0, 0, 0, 0.55);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-45: rgba(0, 0, 0, 0.45);
  --black-40: rgba(0, 0, 0, 0.4);
  --black-35: rgba(0, 0, 0, 0.35);
  --black-30: rgba(0, 0, 0, 0.3);
  --black-25: rgba(0, 0, 0, 0.25);
  --black-20: rgba(0, 0, 0, 0.2);
  --black-15: rgba(0, 0, 0, 0.15);
  --black-10: rgba(0, 0, 0, 0.1);
  --black-05: rgba(0, 0, 0, 0.05);

  --white-95: rgba(255, 255, 255, 0.95);
  --white-90: rgba(255, 255, 255, 0.9);
  --white-85: rgba(255, 255, 255, 0.85);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-75: rgba(255, 255, 255, 0.75);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-65: rgba(255, 255, 255, 0.65);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-55: rgba(255, 255, 255, 0.55);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-45: rgba(255, 255, 255, 0.45);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-35: rgba(255, 255, 255, 0.35);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-25: rgba(255, 255, 255, 0.25);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-05: rgba(255, 255, 255, 0.05);

  /* Blue opacity variants (5% steps) */
  --blue-95: rgba(26, 123, 153, 0.95);
  --blue-90: rgba(26, 123, 153, 0.9);
  --blue-85: rgba(26, 123, 153, 0.85);
  --blue-80: rgba(26, 123, 153, 0.8);
  --blue-75: rgba(26, 123, 153, 0.75);
  --blue-70: rgba(26, 123, 153, 0.7);
  --blue-65: rgba(26, 123, 153, 0.65);
  --blue-60: rgba(26, 123, 153, 0.6);
  --blue-55: rgba(26, 123, 153, 0.55);
  --blue-50: rgba(26, 123, 153, 0.5);
  --blue-45: rgba(26, 123, 153, 0.45);
  --blue-40: rgba(26, 123, 153, 0.4);
  --blue-35: rgba(26, 123, 153, 0.35);
  --blue-30: rgba(26, 123, 153, 0.3);
  --blue-25: rgba(26, 123, 153, 0.25);
  --blue-20: rgba(26, 123, 153, 0.2);
  --blue-15: rgba(26, 123, 153, 0.15);
  --blue-10: rgba(26, 123, 153, 0.1);
  --blue-05: rgba(26, 123, 153, 0.05);

  /* Dark-blue opacity variants (5% steps) */
  --dark-blue-95: rgba(0, 80, 117, 0.95);
  --dark-blue-90: rgba(0, 80, 117, 0.9);
  --dark-blue-85: rgba(0, 80, 117, 0.85);
  --dark-blue-80: rgba(0, 80, 117, 0.8);
  --dark-blue-75: rgba(0, 80, 117, 0.75);
  --dark-blue-70: rgba(0, 80, 117, 0.7);
  --dark-blue-65: rgba(0, 80, 117, 0.65);
  --dark-blue-60: rgba(0, 80, 117, 0.6);
  --dark-blue-55: rgba(0, 80, 117, 0.55);
  --dark-blue-50: rgba(0, 80, 117, 0.5);
  --dark-blue-45: rgba(0, 80, 117, 0.45);
  --dark-blue-40: rgba(0, 80, 117, 0.4);
  --dark-blue-35: rgba(0, 80, 117, 0.35);
  --dark-blue-30: rgba(0, 80, 117, 0.3);
  --dark-blue-25: rgba(0, 80, 117, 0.25);
  --dark-blue-20: rgba(0, 80, 117, 0.2);
  --dark-blue-15: rgba(0, 80, 117, 0.15);
  --dark-blue-10: rgba(0, 80, 117, 0.1);
  --dark-blue-05: rgba(0, 80, 117, 0.05);

  /* Optional aliases (if you ever want to write --blue-5 etc.) */
  --blue-5: var(--blue-05);
  --dark-blue-5: var(--dark-blue-05);

  /* Aliases (you reference --black-5 in a few places) */
  --black-5: var(--black-05);
}

/* ==========================================================================
   Typography: Amplitude is the JPM font within story content. Shorthand sets Lato / PT Serif /
   CircularXXSub per element, so this is !important. Icon fonts are excluded so
   Shorthand's editor icons and Material Symbols keep their native fonts.
   ========================================================================== */
:where(#article, .Theme-Story, .Theme-Header, .jpm-ai-wheel)
  :not(:where(
    i, i *,
    [class*="icon" i], [class*="icon" i] *,
    [class*="material-symbols"], [class*="material-symbols"] *,
    [class*="material-icons"], [class*="material-icons"] *,
    [role="toolbar"], [role="toolbar"] *
  )) {
  font-family: var(--font-jpm) !important;
}
/* Do not force the story font onto ::before/::after: editor controls
   commonly render icon-font glyphs through these pseudo-elements. */

/* ==========================================================================
   2) Global Typography / Utility
   ========================================================================== */
:where(#article, .Theme-Story, .Theme-Header, .jpm-ai-wheel) :is(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}
/* p { text-wrap: pretty; line-height: 1.35 !important; } */

:where(#article, .Theme-Story, .Theme-Header, .jpm-ai-wheel) .centered {
  text-align: center;
}

/* ==========================================================================
   3) Navigation / Header
   ========================================================================== */

/* Keyframes */
@keyframes aai_fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes aai_scaleIn {
  from {
    opacity: 0;
    transform: scaleX(0.7);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes aai_slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* Home banner: preserve the original working selectors and timing. */
#section-Home-kE6c3H1qKc h1.Theme-StoryTitle,
#section-Home-kE6c3H1qKc hr.Theme-Layer-BodyText-Divider,
#section-Home-kE6c3H1qKc h4.Theme-Layer-BodyText-Heading-xs {
  opacity: 0;
  transform: translateY(18px);
  animation: aai_fadeUp 1s ease-out forwards;
  will-change: transform, opacity;
}

#section-Home-kE6c3H1qKc hr.Theme-Layer-BodyText-Divider {
  transform: scaleX(0.7);
  transform-origin: center;
  animation-name: aai_scaleIn;
  animation-duration: 650ms;
  animation-delay: 120ms;
}

#section-Home-kE6c3H1qKc h4.Theme-Layer-BodyText-Heading-xs {
  animation-delay: 220ms;
}

/* About banner uses the same entrance, scoped to its own Shorthand ID. */
#section-About-ZA5Cwar377 h1.Theme-StoryTitle,
#section-About-ZA5Cwar377 hr.Theme-Layer-BodyText-Divider,
#section-About-ZA5Cwar377 h4.Theme-Layer-BodyText-Heading-xs {
  opacity: 0;
  transform: translateY(18px);
  animation: aai_fadeUp 1s ease-out forwards;
  will-change: transform, opacity;
}

#section-About-ZA5Cwar377 hr.Theme-Layer-BodyText-Divider {
  transform: scaleX(0.7);
  transform-origin: center;
  animation-name: aai_scaleIn;
  animation-duration: 650ms;
  animation-delay: 120ms;
}

#section-About-ZA5Cwar377 h4.Theme-Layer-BodyText-Heading-xs {
  animation-delay: 220ms;
}

/* Key Innovations banner: title and subtitle enter from the left. */
#section-s02ONfPauP h1.Theme-StoryTitle,
#section-s02ONfPauP h4.Theme-Layer-BodyText-Heading-xs,
#section-hpFitsPD2L h1.Theme-StoryTitle,
#section-hpFitsPD2L .Theme-Title > p,
#section-Core-Business-Support-65RiwYdESS h1.Theme-StoryTitle,
#section-Core-Business-Support-65RiwYdESS .Theme-Title > h4 {
  opacity: 0;
  transform: translateX(-18px);
  animation: aai_slideInLeft 1s ease-out forwards;
  will-change: transform, opacity;
}

#section-s02ONfPauP h4.Theme-Layer-BodyText-Heading-xs,
#section-hpFitsPD2L .Theme-Title > p,
#section-Core-Business-Support-65RiwYdESS .Theme-Title > h4 {
  animation-delay: 220ms;
}

/* Blend the hero image into the following Operational Innovation wheel. */
#section-s02ONfPauP { position: relative; isolation: isolate; background: #03090b; }
#section-s02ONfPauP > .Theme-BackgroundMedia { z-index: 0; }
#section-s02ONfPauP > .Theme-Layer-TextBlock { position: relative; z-index: 2; }
#section-s02ONfPauP::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: clamp(120px, 20vw, 260px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(3, 9, 11, 0), #03090b);
}
#group-section-Capabilities-7PnbtEJNvC,
#section-Capabilities-7PnbtEJNvC { background: #03090b !important; }
#section-Capabilities-7PnbtEJNvC { padding-block: 0 !important; }
#section-Capabilities-7PnbtEJNvC > .Layer--one,
#section-Capabilities-7PnbtEJNvC .BlockHTML { margin: 0; padding: 0; }

/* DocAI banner: title + subtitle enter from the left. */
#section-DocAI-Nybeiq0Bqo
  .GridLayer
  > .GridCard:first-child
  h1.Theme-StoryTitle,
#section-DocAI-Nybeiq0Bqo
  .GridLayer
  > .GridCard:first-child
  .Theme-Layer-BodyText--inner
  > p {
  opacity: 0;
  transform: translateX(-18px);
  animation: aai_slideInLeft 1s ease-out forwards;
  will-change: transform, opacity;
}

/* Subtitle follows the DocAI title. */
#section-DocAI-Nybeiq0Bqo
  .GridLayer
  > .GridCard:first-child
  .Theme-Layer-BodyText--inner
  > p {
  animation-delay: 220ms;
}

/* Email AI banner: title + subtitle enter from the left. */
#section-Email-AI-ReTPBMySwD
  .GridLayer
  > .GridCard:first-child
  h1.Theme-StoryTitle,
#section-Email-AI-ReTPBMySwD
  .GridLayer
  > .GridCard:first-child
  .Theme-Layer-BodyText--inner
  > p {
  opacity: 0;
  transform: translateX(-18px);
  animation: aai_slideInLeft 1s ease-out forwards;
  will-change: transform, opacity;
}

/* Subtitle follows the Email AI title. */
#section-Email-AI-ReTPBMySwD
  .GridLayer
  > .GridCard:first-child
  .Theme-Layer-BodyText--inner
  > p {
  animation-delay: 220ms;
}

/* AOP Studio banner: title + subtitle enter from the left. */
#section-AOP-Studio-9QVM36iipM .GridCard__split-content h1.Theme-StoryTitle,
#section-AOP-Studio-9QVM36iipM
  .GridCard__split-content
  .GridCard__element:nth-child(2)
  p {
  opacity: 0;
  transform: translateX(-18px);
  animation: aai_slideInLeft 1s ease-out forwards;
  will-change: transform, opacity;
}

/* Subtitle follows the AOP Studio title. */
#section-AOP-Studio-9QVM36iipM
  .GridCard__split-content
  .GridCard__element:nth-child(2)
  p {
  animation-delay: 220ms;
}

/* CO&D banner: title, subtitle, and divider animate into view. */
#section-COandD-Weo560wThm h1.Theme-StoryTitle,
#section-COandD-Weo560wThm h4.Theme-Layer-BodyText-Heading-xs {
  opacity: 0;
  transform: translateY(18px);
  animation: aai_fadeUp 1s ease-out forwards;
  will-change: transform, opacity;
}

/* Divider scales into view after the title. */
#section-COandD-Weo560wThm hr.Theme-Layer-BodyText-Divider {
  opacity: 0;
  transform: scaleX(0.7);
  transform-origin: center;
  animation: aai_scaleIn 650ms ease-out 120ms forwards;
  will-change: transform, opacity;
}

/* Subtitle follows the CO&D title. */
#section-COandD-Weo560wThm h4.Theme-Layer-BodyText-Heading-xs {
  animation-delay: 220ms;
}

/* Markets banner: title, subtitle, and divider animate into view. */
#section-Markets-v1qgkS3ntO h1.Theme-StoryTitle,
#section-Markets-v1qgkS3ntO h4.Theme-Layer-BodyText-Heading-xs {
  opacity: 0;
  transform: translateY(18px);
  animation: aai_fadeUp 1s ease-out forwards;
  will-change: transform, opacity;
}

/* Divider scales into view after the title. */
#section-Markets-v1qgkS3ntO hr.Theme-Layer-BodyText-Divider {
  opacity: 0;
  transform: scaleX(0.7);
  transform-origin: center;
  animation: aai_scaleIn 650ms ease-out 120ms forwards;
  will-change: transform, opacity;
}

/* Subtitle follows the Markets title. */
#section-Markets-v1qgkS3ntO h4.Theme-Layer-BodyText-Heading-xs {
  animation-delay: 220ms;
}

/* Payments banner: title, subtitle, and divider animate into view. */
#section-Uj9ZkBxzRr h1.Theme-StoryTitle,
#section-Uj9ZkBxzRr h4.Theme-Layer-BodyText-Heading-xs {
  opacity: 0;
  transform: translateY(18px);
  animation: aai_fadeUp 1s ease-out forwards;
  will-change: transform, opacity;
}

/* Divider scales into view after the title. */
#section-Uj9ZkBxzRr hr.Theme-Layer-BodyText-Divider {
  opacity: 0;
  transform: scaleX(0.7);
  transform-origin: center;
  animation: aai_scaleIn 650ms ease-out 120ms forwards;
  will-change: transform, opacity;
}

/* Subtitle follows the Payments title. */
#section-Uj9ZkBxzRr h4.Theme-Layer-BodyText-Heading-xs {
  animation-delay: 220ms;
}

/* Securities Services banner: title, subtitle, and divider animate into view. */
#section-Securities-Services-ssPemZOYUH h1.Theme-StoryTitle,
#section-Securities-Services-ssPemZOYUH h4.Theme-Layer-BodyText-Heading-xs {
  opacity: 0;
  transform: translateY(18px);
  animation: aai_fadeUp 1s ease-out forwards;
  will-change: transform, opacity;
}

/* Divider scales into view after the title. */
#section-Securities-Services-ssPemZOYUH hr.Theme-Layer-BodyText-Divider {
  opacity: 0;
  transform: scaleX(0.7);
  transform-origin: center;
  animation: aai_scaleIn 650ms ease-out 120ms forwards;
  will-change: transform, opacity;
}

/* Subtitle follows the Securities Services title. */
#section-Securities-Services-ssPemZOYUH h4.Theme-Layer-BodyText-Heading-xs {
  animation-delay: 220ms;
}

/* Wholesale Lending banner: title, subtitle, and divider animate into view. */
#section-WLS-V1s9dtD7EV h1.Theme-StoryTitle,
#section-WLS-V1s9dtD7EV h4.Theme-Layer-BodyText-Heading-xs {
  opacity: 0;
  transform: translateY(18px);
  animation: aai_fadeUp 1s ease-out forwards;
  will-change: transform, opacity;
}

/* Divider scales into view after the title. */
#section-WLS-V1s9dtD7EV hr.Theme-Layer-BodyText-Divider {
  opacity: 0;
  transform: scaleX(0.7);
  transform-origin: center;
  animation: aai_scaleIn 650ms ease-out 120ms forwards;
  will-change: transform, opacity;
}

/* Subtitle follows the Wholesale Lending title. */
#section-WLS-V1s9dtD7EV h4.Theme-Layer-BodyText-Heading-xs {
  animation-delay: 220ms;
}

@media (min-width: 1100px) {
  .Theme-Navigation-ItemList {
    gap: 0.5rem;
  }
}

.Navigation__subMenu {
  background-color: var(--white);
}

.Header + #navigation {
  padding-block: 0.5rem;
  background: var(--light-gray) !important;
  opacity: 0.99 !important;
  border-top: 1px solid var(--black-5);
  border-bottom: 1px solid var(--black-5);
}

nav .Navigation__item {
  position: relative;
  color: var(--black);
  transition: color 180ms ease;
}

nav .Navigation__item,
nav .Navigation__item a {
  border-radius: 8px;
  transition: color 180ms ease, background-color 180ms ease,
    transform 180ms ease;
}

nav .Navigation__item a {
  color: var(--black);
  border: 1px solid transparent;
}

nav .Navigation__item a:hover {
  color: var(--black-90) !important;
}

.Project-Header ~ .Theme-NavigationBar .Theme-NavigationLink {
  color: var(--black);
}

nav .Navigation__item:hover {
  background-color: var(--black-5);
}

nav .Navigation__item.Theme-ActiveNavigationBarItem a {
  color: var(--white) !important;
  font-weight: 400 !important;
  background-color: var(--blue);
  border: 1px solid color-mix(in srgb, var(--blue) 90%, black 10%) !important;
  text-shadow: 0px 2px 6px var(--black-25);
}

nav .Navigation__item.Theme-ActiveNavigationBarItem:hover {
  background-color: var(--dark-tan);
  background: color-mix(in srgb, var(--blue) 90%, black 10%);
}

/* Top nav sizing/layout */
.sh-top-nav {
  min-height: 88px;
}

.sh-top-nav .Theme-Navigation-ItemList {
  display: flex;
  flex-direction: row;
  justify-content: start;
}

/* ==========================================================================
   4) Buttons / Inline Elements
   ========================================================================== */
.project-search-button {
  background-color: var(--black-05);
  border: 1px solid var(--black-15);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 4px;
  width: 3.24rem;
  margin-left: 1rem;
}

.sh-celeris-resources .InlineElement--Button {
  border: 1px solid var(--black);
}

:where(#article, .Theme-Story, .Theme-Header, .jpm-ai-wheel) a.InlineElement--Button:after {
  content: none;
}

/* ==========================================================================
   5) Animation Helpers (global)
   ========================================================================== */

/* Icon entrance animation */
:where(#article, .Theme-Story, .Theme-Header, .jpm-ai-wheel) section .material-symbols-outlined {
  --size: 3rem;
  width: var(--size);
  height: var(--size);
  display: flex;
  margin: 0 auto 0.5rem;
  align-items: center;
  justify-content: center;
  background: var(--black-5);
  border-radius: 50%;

  opacity: 0;
  transform: scale(0.5) translateY(-0.5rem);
  transition: opacity 2s ease, transform 2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

:where(#article, .Theme-Story, .Theme-Header, .jpm-ai-wheel) .animate .material-symbols-outlined {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Default state: hidden until section is in view.
   Scoped to #article.js-ready so text stays visible if the JS never runs.
   HTML modules manage their own animations; do not hide their content here. */
#article.js-ready section :is(p, li, h1, h2, h3, h4, h5, h6):not(:where(.cbw *, .jpm-ai-wheel *, .jpm-insights-banner *, .aai-hub *, .aai-scale *, .aai-problems *)) {
  opacity: 0;
  transform: translateY(15px);
}

/* When the section is in view: animate text in */
#article.js-ready section.animate :is(p, li, h1, h2, h3, h4, h5, h6):not(:where(.cbw *, .jpm-ai-wheel *, .jpm-insights-banner *, .aai-hub *, .aai-scale *, .aai-problems *)) {
  animation: textFadeInUp 700ms ease forwards;
}

/* Exceptions: keep text visible in these sections (no fade-in) */
#article.js-ready section .sh-leadership :is(p, li, h1, h2, h3, h4, h5, h6),
#article.js-ready section .sh-executive :is(p, li, h1, h2, h3, h4, h5, h6) {
  opacity: 1;
  transform: none;
  animation: none;
}

/* ==========================================================================
             5.1) Keyframes
   ========================================================================== */
@keyframes slideInTop {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes slideInBottom {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-10px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(10px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

/* “LG” = large shift */
@keyframes slideInTopLg {
  0% {
    transform: translateY(calc(var(--anim-shift-lg) * -1));
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInBottomLg {
  0% {
    transform: translateY(var(--anim-shift-lg));
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInLeftLg {
  0% {
    transform: translateX(calc(var(--anim-shift-lg) * -1));
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRightLg {
  0% {
    transform: translateX(var(--anim-shift-lg));
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeInTop {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes fadeInBottom {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes fadeInLeft {
  0% {
    transform: translateX(-10px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes fadeInRight {
  0% {
    transform: translateX(10px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes scaleIn {
  0% {
    transform: scale(0.98);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scaleInUp {
  0% {
    transform: translateY(10px) scale(0.98);
    opacity: 0;
  }
  100% {
    transform: translateY(0px) scale(1);
    opacity: 1;
  }
}

@keyframes scaleInDown {
  0% {
    transform: translateY(-10px) scale(0.98);
    opacity: 0;
  }
  100% {
    transform: translateY(0px) scale(1);
    opacity: 1;
  }
}

@keyframes textFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* ==========================================================================
   6) Blog
   ========================================================================== */

/* Tags in blog cards (you left this intentionally blank for now) */
.sh-blog .GridLayer {
  gap: clamp(20px, 2.5vw, 32px);
}
.sh-blog .GridCard {
  /* Shorthand's .GridsSection .GridLayer .GridCard subgrid rule has
     higher specificity; explicitly opt these cards out of subgrid. */
  display: flex !important;
  flex-direction: column;
  grid-template-rows: none !important;
  grid-row: auto !important;
  height: auto !important;
  gap: 18px !important;
  min-width: 0;
  border: 1px solid var(--black-10) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 4px 18px var(--black-05);
  overflow: hidden;
  transition: box-shadow 180ms ease, border-color 180ms ease;
}
.sh-blog .GridCard > .GridCard__element {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  height: auto !important;
  min-height: 0;
  grid-area: auto;
  margin: 0;
  padding: 0 24px;
}
.sh-blog .GridCard > .GridCard__element--first {
  padding: 0;
}
.sh-blog .GridCard .InlineMedia--image {
  display: block;
  margin: 0;
}
.sh-blog .GridCard .InlineMedia--image__inner {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  padding: 0;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none;
}
.sh-blog .GridCard .InlineMedia--image__inner img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0;
  transition: transform 350ms cubic-bezier(.22, 1, .36, 1);
}
.sh-blog .GridCard .InlineMedia--image__inner > .FullSize {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sh-blog .GridCard .InlineMedia--image__inner {
  position: relative;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .sh-blog .GridCard:hover .InlineMedia--image__inner img {
    transform: scale(1.06) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sh-blog .GridCard .InlineMedia--image__inner img {
    transition: none;
  }
}
.sh-blog .GridCard .InlineMedia--image__inner picture {
  display: block;
  width: 100%;
  height: 100%;
}
.sh-blog .GridCard p { margin: 0; line-height: 1.55; }
.sh-blog .GridCard p:empty { display: none; }
.sh-blog .GridCard p.Theme-TextSize-xxxsmall {
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
}
/* Explicit excerpt classification also handles empty blocks between title and copy. */
.sh-blog .GridCard :is(p.Theme-TextSize-default, p.blog-card-excerpt) {
  font-size: 1.25rem !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  color: #3d4b55 !important;
}
.sh-blog .GridCard :is(p.Theme-TextSize-default, p.blog-card-excerpt) * {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}
.sh-blog .GridCard > .GridCard__element.blog-card-empty { display: none !important; }
/* Hide editor-managed source buttons before JS creates the full-card links. */
.sh-blog .GridCard > .GridCard__element:has(a.InlineElement--Button[href]),
.sh-blog .GridCard > .GridCard__element:has(.blog-card-source-link) {
  display: none !important;
}
.sh-blog .GridCard > .GridCard__element--last {
  margin-top: auto;
  padding-bottom: 24px;
}
.sh-blog .GridCard p.blog-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 16px;
  border-top: 1px solid var(--black-10);
}
.sh-blog .blog-card-tag {
  display: inline-block;
  padding: 5px 9px;
  border: 1px solid var(--blue-15);
  border-radius: 999px;
  background: var(--blue-05);
  color: var(--dark-blue);
  font-size: .75rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.sh-blog .GridCard.has-blog-card-link :is(a, button).blog-card-tag {
  position: relative;
  z-index: 3;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none !important;
}
.sh-blog .GridCard :is(a, button).blog-card-tag:hover {
  background: var(--blue-15);
}
.sh-blog .GridCard :is(a, button).blog-card-tag:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.sh-blog .GridCard.has-blog-card-link {
  position: relative;
  isolation: isolate;
}
.sh-blog .GridCard .blog-card-source-link {
  display: none !important;
}
.sh-blog .GridCard > a.blog-card-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  border: 0 !important;
  border-radius: inherit;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}
.sh-blog .GridCard > a.blog-card-link:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: -3px;
}
/* Preserve separate image-credit links or other interactive controls. */
.sh-blog .GridCard.has-blog-card-link :is(a:not(.blog-card-link), button, input, select, textarea) {
  position: relative;
  z-index: 3;
}
.sh-blog .GridCard.has-blog-card-link:is(:hover, :focus-within) {
  box-shadow: 0 10px 28px var(--black-20);
}

.sh-blog .GridCard .InnerText p em {
  /* Example:
            color: var(--blue);
            font-style: normal;
            */
}

/* ==========================================================================
   7) Stats Section
   ========================================================================== */
.sh-stats .GridCard {
  background: var(--black-20);
  backdrop-filter: blur(10px);
}

.sh-stats .GridCard .Theme-Layer-BodyText--inner .stat {
  font-size: 2.75rem;
  display: block;
  width: 100%;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1.5rem;
}

.sh-stats .GridCard .Theme-Layer-BodyText--inner .stat-inline {
  display: inline;
}

/* ==========================================================================
   8) Leadership / Executive (cards, images, spacing)
   ========================================================================== */
section .sh-executive {
  padding-bottom: 8rem !important;
}

/* Image card styling */
:is(.sh-leadership, .sh-executive) .GridCard .InlineMedia--image {
  --imgSize: 600px;
  width: min(var(--imgSize), 100%) !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  border: 1px solid var(--black-15);
  box-shadow: 0px 3px 12px var(--black-25);
  transition: all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  /* filter: grayscale(1); */
  text-align: left;
  margin-bottom: 1rem !important;
  object-fit: cover;
}

:is(.sh-leadership, .sh-executive) .GridCard .InlineMedia--image:hover {
  box-shadow: 0px 3px 18px var(--black-35);
  border: 1px solid var(--black-20);
}

:is(.sh-leadership, .sh-executive) .GridCard .InlineMedia--image > * {
  border-radius: 8px !important;
}

:is(.sh-leadership, .sh-executive) .GridCard .InlineMedia--image__inner {
  max-width: var(--imgSize) !important;
}

:is(.sh-leadership, .sh-executive) .GridCard .InlineMedia--image img {
  overflow: hidden;
  border-radius: 8px;
}

/* First paragraph “role/title” color tweak */
:is(.sh-leadership, .sh-executive)
  .GridCard
  .Theme-Layer-BodyText--inner
  p:first-of-type
  span {
  color: var(--dark-tan) !important;
  font-size: 1.15rem !important;
}

/* Card entrance animation for these sections */
.animate :is(.sh-leadership, .sh-executive) .GridCard {
  /* animation: slideInLeft 700ms ease forwards; */
  animation: fadeIn 700ms ease forwards;
  opacity: 0;
  /* transform: translateX(10px); */
}

/* Leadership stagger (first 8) */
.animate .sh-leadership .GridCard:nth-of-type(1) {
  animation-delay: 0.4s;
}
.animate .sh-leadership .GridCard:nth-of-type(2) {
  animation-delay: 0.6s;
}
.animate .sh-leadership .GridCard:nth-of-type(3) {
  animation-delay: 0.8s;
}
.animate .sh-leadership .GridCard:nth-of-type(4) {
  animation-delay: 1s;
}
.animate .sh-leadership .GridCard:nth-of-type(5) {
  animation-delay: 1.2s;
}
.animate .sh-leadership .GridCard:nth-of-type(6) {
  animation-delay: 1.4s;
}
.animate .sh-leadership .GridCard:nth-of-type(7) {
  animation-delay: 1.6s;
}
.animate .sh-leadership .GridCard:nth-of-type(8) {
  animation-delay: 1.8s;
}

/* Executive stagger (first 4) */
.animate .sh-executive .GridCard:nth-of-type(1) {
  animation-delay: 0.4s;
}
.animate .sh-executive .GridCard:nth-of-type(2) {
  animation-delay: 0.6s;
}
.animate .sh-executive .GridCard:nth-of-type(3) {
  animation-delay: 0.8s;
}
.animate .sh-executive .GridCard:nth-of-type(4) {
  animation-delay: 1s;
}

.sh-vision .InlineMedia--image__inner {
  --size: 400px;
  width: var(--size) !important;
  height: var(--size) !important;
  border-radius: 50% !important;
  display: inline-block;
  margin: 0 auto;
  transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.06);
}

.sh-vision .InlineMedia--image__inner:hover {
  scale: 1.1;
}

/* ==========================================================================
   9) Our Work (About Page)
   ========================================================================== */
.sh-our-work .GridCard {
  border: 1px solid var(--black-15) !important;
  border-radius: 8px;
  overflow: hidden;
}

.sh-our-work .GridCard:nth-of-type(odd) {
  background: var(--blue-05) !important;
}

.sh-our-work .GridCard .GridCard__split-content {
  padding: 2rem;
}

.animate .sh-our-work .GridCard:nth-of-type(odd),
#section-Capabilities-and-Solutions-01ztPYVR7w
  .sh-our-work
  .GridCard:nth-of-type(odd) {
  transform: translateX(-10px);
  opacity: 0;
}

.animate .sh-our-work .GridCard:nth-of-type(even),
#section-Capabilities-and-Solutions-01ztPYVR7w
  .sh-our-work
  .GridCard:nth-of-type(even) {
  transform: translateX(10px);
  opacity: 0;
}

.animate .sh-our-work .GridCard:nth-of-type(odd) {
  animation: slideInLeft 0.6s forwards;
  transform: translateX(calc(10px) * -1);
  opacity: 0;
}

.animate .sh-our-work .GridCard:nth-of-type(even) {
  animation: slideInRight 0.6s forwards;
  transform: translateX(10px);
  opacity: 0;
}

.animate .sh-our-work .GridCard:nth-of-type(1) {
  animation-delay: 0.5s;
}
.animate .sh-our-work .GridCard:nth-of-type(2) {
  animation-delay: 1s;
}
.animate .sh-our-work .GridCard:nth-of-type(3) {
  animation-delay: 1.5s;
}
.animate .sh-our-work .GridCard:nth-of-type(4) {
  animation-delay: 2s;
}

/* .sh-solutions-targets .GridCard .GridCard__element:nth-of-type(3) {
            color: var(--blue);
          }
          
          .sh-solutions-targets .GridCard .GridCard__element:nth-of-type(5)  {
            color: var(--dark-blue);
          }
          
          .sh-solutions-targets .GridCard .GridCard__element:nth-of-type(8) {
            color: var(--white);
          } */

/* ==========================================================================
   10) Results (Home Page)
   ========================================================================== */
.sh-results {
  background: rgba(0, 0, 0, 0.01);
  background: radial-gradient(
      circle at 20% 10%,
      rgba(0, 0, 0, 0.015) 0%,
      rgba(0, 0, 0, 0) 55%
    ),
    linear-gradient(135deg, rgba(0, 0, 0, 0.008), rgba(0, 0, 0, 0.012));
}

.sh-results .GridCard {
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

.sh-results .GridCard .InlineMedia--image__inner {
  --size: 60px;
  width: var(--size) !important;
  height: var(--size) !important;
  filter: grayscale(1);
}

.animate .sh-results .GridCard {
  /* animation: fadeInLeft 1s forwards; */
  animation: fadeIn 1s forwards;
  opacity: 0;
  /* transform: translateX(-10px); */
}

.animate .sh-results .GridCard:nth-of-type(1) {
  animation-delay: 0.4s;
  background: rgba(0, 0, 0, 0.025);
}
.animate .sh-results .GridCard:nth-of-type(2) {
  animation-delay: 0.6s;
  background: rgba(0, 0, 0, 0.03);
}
.animate .sh-results .GridCard:nth-of-type(3) {
  animation-delay: 0.8s;
  background: rgba(0, 0, 0, 0.035);
}
.animate .sh-results .GridCard:nth-of-type(4) {
  animation-delay: 1s;
  background: rgba(0, 0, 0, 0.04);
}

.sh-results p {
  line-height: 1.45 !important;
}

.sh-delivering-impact .GridCard__element.GridCard--padding-horizontal-sm {
  margin-top: 1rem;
}

/* ==========================================================================
   11) Delivering Impact + Technologies (Home Page)
   ========================================================================== */

.sh-delivering-impact .GridCard,
.sh-technologies .GridCard {
  border: 1px solid var(--black-25);
  background: var(--white-85);
  backdrop-filter: blur(10px);
  text-wrap: balance;
}

#section-Core-Capabilities-WQfd6MhtsQ .GridCard {
  border: 1px solid var(--white-50) !important;
}

/* Shared primary button: newsletter cards and homepage Delivering Impact cards. */
:is(.Theme-Section:has(a.InlineElement--Button[href="http://Go/appliedai-celeris" i]), .Theme-Section:has(a.InlineElement--Button[href="https://Go/appliedai-celeris" i]), .Theme-Section:has(a.InlineElement--Button[href="https://jpmcinternal.jpmorgan.com/c8a7fcb3-e497-4cf2-854b-80518c798e8a/key-innovations/celeris/index.html" i]), .Theme-Section:has(a.InlineElement--Button[href="https://jpmcinternal.jpmorgan.com/workflow-intelligence/index.html" i]), .sh-event, .sh-delivering-impact .GridCard, .sh-new-features .GridCard, .sh-team-insights .GridCard, #section-Wh381q4rhT .GridCard, .sh-market-signals .GridCard) .InlineElement--Button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-width: 8rem;
  min-height: 52px;
  margin: 0;
  padding: 0.85rem 1.6rem 0.85rem 1.75rem;
  border: 1px solid var(--white-30) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, var(--blue), var(--dark-blue));
  background-color: var(--blue);
  color: var(--white) !important;
  box-shadow: 0 8px 20px var(--black-30), inset 0 1px 0 var(--white-30) !important;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

:is(.Theme-Section:has(a.InlineElement--Button[href="http://Go/appliedai-celeris" i]), .Theme-Section:has(a.InlineElement--Button[href="https://Go/appliedai-celeris" i]), .Theme-Section:has(a.InlineElement--Button[href="https://jpmcinternal.jpmorgan.com/c8a7fcb3-e497-4cf2-854b-80518c798e8a/key-innovations/celeris/index.html" i]), .Theme-Section:has(a.InlineElement--Button[href="https://jpmcinternal.jpmorgan.com/workflow-intelligence/index.html" i]), .sh-event, .sh-delivering-impact .GridCard, .sh-new-features .GridCard, .sh-team-insights .GridCard, #section-Wh381q4rhT .GridCard, .sh-market-signals .GridCard) .InlineElement--Button::after {
  content: "";
  -webkit-mask: none !important;
  mask: none !important;
  background: none !important;
  border-radius: 0;
  position: static;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 180ms ease;
}

:is(.Theme-Section:has(a.InlineElement--Button[href="http://Go/appliedai-celeris" i]), .Theme-Section:has(a.InlineElement--Button[href="https://Go/appliedai-celeris" i]), .Theme-Section:has(a.InlineElement--Button[href="https://jpmcinternal.jpmorgan.com/c8a7fcb3-e497-4cf2-854b-80518c798e8a/key-innovations/celeris/index.html" i]), .Theme-Section:has(a.InlineElement--Button[href="https://jpmcinternal.jpmorgan.com/workflow-intelligence/index.html" i]), .sh-delivering-impact .GridCard, .sh-new-features .GridCard, .sh-team-insights .GridCard) .InlineElement--Button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

.sh-team-insights .GridCard .InlineElement--Button {
  margin-top: 0.5rem;
}

:is(.sh-event, #section-Wh381q4rhT .GridCard, .sh-market-signals .GridCard) .InlineElement--Button:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 4px;
}

@media (hover: hover) {
  :is(.Theme-Section:has(a.InlineElement--Button[href="http://Go/appliedai-celeris" i]), .Theme-Section:has(a.InlineElement--Button[href="https://Go/appliedai-celeris" i]), .Theme-Section:has(a.InlineElement--Button[href="https://jpmcinternal.jpmorgan.com/c8a7fcb3-e497-4cf2-854b-80518c798e8a/key-innovations/celeris/index.html" i]), .Theme-Section:has(a.InlineElement--Button[href="https://jpmcinternal.jpmorgan.com/workflow-intelligence/index.html" i]), .sh-event, .sh-delivering-impact .GridCard, .sh-new-features .GridCard, .sh-team-insights .GridCard, #section-Wh381q4rhT .GridCard, .sh-market-signals .GridCard) .InlineElement--Button:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 12px 26px var(--black-40), inset 0 1px 0 var(--white-30) !important;
  }

  :is(.Theme-Section:has(a.InlineElement--Button[href="http://Go/appliedai-celeris" i]), .Theme-Section:has(a.InlineElement--Button[href="https://Go/appliedai-celeris" i]), .Theme-Section:has(a.InlineElement--Button[href="https://jpmcinternal.jpmorgan.com/c8a7fcb3-e497-4cf2-854b-80518c798e8a/key-innovations/celeris/index.html" i]), .Theme-Section:has(a.InlineElement--Button[href="https://jpmcinternal.jpmorgan.com/workflow-intelligence/index.html" i]), .sh-event, .sh-delivering-impact .GridCard, .sh-new-features .GridCard, .sh-team-insights .GridCard, #section-Wh381q4rhT .GridCard, .sh-market-signals .GridCard) .InlineElement--Button:hover::after {
    transform: translateX(3px) rotate(45deg);
  }
}

/* Reset the theme arrow so the homepage uses the same clean chevron. */
.sh-delivering-impact .GridCard .InlineElement--Button::after {
  position: static;
  display: block;
  flex: none;
  margin: 0;
  inset: auto;
  background: none;
  border-bottom: 0;
  border-left: 0;
  box-shadow: none;
}

/* Match the destination in both the editor and exported story; editor section
   IDs can differ. Override the theme's full-width and color button settings. */
a.InlineElement--Button:is(
  [href="http://Go/appliedai-celeris" i],
  [href="https://Go/appliedai-celeris" i],
  [href="https://jpmcinternal.jpmorgan.com/c8a7fcb3-e497-4cf2-854b-80518c798e8a/key-innovations/celeris/index.html" i],
  [href="https://jpmcinternal.jpmorgan.com/workflow-intelligence/index.html" i]
) {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100%;
  background: linear-gradient(135deg, #1a7b99, #005075) !important;
  color: #fff !important;
  text-transform: uppercase !important;
}

/* Newsletter: New Features from Applied AI. */
section.sh-new-features,
.sh-new-features.Theme-Section {
  background-color: #fff !important;
  background-image: none !important;
}

.sh-new-features .GridLayer {
  column-gap: clamp(1rem, 2.4vw, 2rem);
  row-gap: 1.25rem;
}

.sh-new-features .GridCard {
  min-width: 0;
  border: 0 !important;
  border-radius: 1.25rem;
  background-color: #f6f7f8 !important;
  background-image: linear-gradient(
    145deg,
    #fdfdfe 0%,
    #f8f9fa 50%,
    #eef0f2 100%
  ) !important;
  box-shadow: 0 8px 24px var(--black-10);
  overflow: hidden;
  text-wrap: pretty;
  transition: box-shadow 180ms ease;
}

.sh-new-features .GridCard:focus-within {
  box-shadow: 0 0 0 2px var(--blue-45), 0 12px 30px var(--black-15);
}

.sh-new-features .GridCard__element {
  position: relative;
  padding-inline: clamp(1.25rem, 2vw, 2rem);
  margin-top: 0;
}

.sh-new-features .GridCard__element--first {
  padding-top: 2rem;
}

.sh-new-features .GridCard__element--last {
  padding-bottom: 1.75rem;
}

/* Override the shared circular frame and Shorthand's inline corner values. */
.sh-new-features .GridCard .InlineMedia--image__inner {
  box-sizing: border-box;
  width: 104px !important;
  height: 104px !important;
  /* Shorthand caps media-size-100 at the source image width (80/160px).
     Override that cap so every icon gets the same square frame. */
  max-width: min(104px, 100%) !important;
  max-height: 104px !important;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border: 1px solid var(--black-15);
  border-radius: 1.125rem !important;
  background: var(--white-90);
  padding: 0.75rem;
  box-shadow: 0 5px 14px var(--black-10);
  animation: none;
  opacity: 1;
}

.sh-new-features .GridCard .InlineMedia--image__inner .FullSize {
  position: static;
  width: 100%;
  height: 100%;
}

.sh-new-features .GridCard .InlineMedia--image__inner picture {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.sh-new-features .GridCard .InlineMedia--image__inner img {
  position: static;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: min(80px, 100%) !important;
  max-height: min(80px, 100%) !important;
  border-radius: 0.75rem;
  object-fit: contain !important;
}

.sh-new-features .GridCard p {
  line-height: 1.5;
}

.sh-new-features .GridCard p:empty {
  display: none;
}

.sh-new-features .GridCard .Theme-Layer-BodyText-Divider {
  height: 1px;
  border: 0;
  background: var(--blue-25);
}

@media (hover: hover) {
  .sh-new-features .GridCard:hover {
    box-shadow: 0 12px 30px var(--black-15);
  }

}

/* Newsletter: Team Updates / New Hires & Promotions. */
.sh-new-hires .GridLayer {
  column-gap: clamp(1rem, 2.2vw, 1.75rem);
  row-gap: 1.25rem;
}

.sh-new-hires .GridCard {
  min-width: 0;
  border: 1px solid var(--black-15) !important;
  border-radius: 1.25rem;
  background: var(--white-85);
  box-shadow: 0 8px 24px var(--black-10);
  overflow: hidden;
  text-wrap: pretty;
  transition: box-shadow 180ms ease, border-color 180ms ease;
}

.sh-new-hires .GridCard:focus-within {
  border-color: var(--blue-45) !important;
  box-shadow: 0 12px 30px var(--black-15);
}

.sh-new-hires .GridCard__element {
  position: relative;
}

.sh-new-hires .GridCard__element:not(.Media--fullWidth) {
  padding-inline: clamp(1.25rem, 1.8vw, 1.75rem);
}

.sh-new-hires .GridCard__element.Media--fullWidth {
  padding: 0 !important;
}

.sh-new-hires .GridCard .InlineMedia,
.sh-new-hires .GridCard .InlineMedia--image__inner {
  margin: 0;
}

.sh-new-hires .GridCard .InlineMedia--image__inner {
  border-radius: 0 !important;
  animation: none;
  opacity: 1;
}

.sh-new-hires .GridCard .InlineMedia--image__inner img {
  object-fit: cover;
}

.sh-new-hires .GridCard h3 {
  margin-top: 0.15rem;
  margin-bottom: 0;
  line-height: 1.25;
}

.sh-new-hires .GridCard p {
  margin-top: 0.35rem;
  line-height: 1.45;
}

.sh-new-hires .GridCard__element--last {
  padding-bottom: 1.5rem;
}

@media (hover: hover) {
  .sh-new-hires .GridCard:hover {
    border-color: var(--blue-35) !important;
    box-shadow: 0 12px 30px var(--black-15);
  }
}

.sh-delivering-impact h4,
.sh-technologies h4 {
  display: block;
  margin-bottom: 1rem !important;
}

/* Icon/image wrapper styling */
.sh-delivering-impact .GridCard .InlineMedia--image__inner,
.sh-technologies .GridCard .InlineMedia--image__inner {
  border: 2px solid var(--black-25);
  background: var(--black-5);
  border-radius: 50% !important;
  padding: 0.75rem;
  /* animation: fadeInTop 1s forwards; */
  animation: fadeIn 1s forwards;
  opacity: 0;
  /* transform: translateY(-10px); */
}

#section-Core-Capabilities-WQfd6MhtsQ .GridCard .InlineMedia--image__inner {
  filter: saturate(1.5);
}

.Theme-Section-Dark.sh-delivering-impact .GridCard .InlineMedia--image__inner {
  border: 2px solid var(--white-25);
}

/* Technologies variant sizing */
.sh-technologies .GridCard .InlineMedia--image__inner {
  --imgSize: 5rem;
  width: var(--imgSize) !important;
  border: 1px solid var(--black-15);
}

.sh-technologies .GridCard .InlineMedia--image__inner img {
  --imgSize: 4rem;
  width: var(--imgSize) !important;
}

/* Stagger image wrapper fade-in (Delivering Impact) */
.animate
  .sh-delivering-impact
  .GridCard:nth-of-type(1)
  .InlineMedia--image__inner {
  animation-delay: 0.4s;
}
.animate
  .sh-delivering-impact
  .GridCard:nth-of-type(2)
  .InlineMedia--image__inner {
  animation-delay: 0.6s;
}
.animate
  .sh-delivering-impact
  .GridCard:nth-of-type(3)
  .InlineMedia--image__inner {
  animation-delay: 0.8s;
}
.animate
  .sh-delivering-impact
  .GridCard:nth-of-type(4)
  .InlineMedia--image__inner {
  animation-delay: 1s;
}

/* Stagger image wrapper fade-in (Technologies)
             FIX: added missing space between .sh-technologies and .GridCard */
.animate .sh-technologies .GridCard:nth-of-type(1) .InlineMedia--image__inner {
  animation-delay: 0.4s;
}
.animate .sh-technologies .GridCard:nth-of-type(2) .InlineMedia--image__inner {
  animation-delay: 0.6s;
}
.animate .sh-technologies .GridCard:nth-of-type(3) .InlineMedia--image__inner {
  animation-delay: 0.8s;
}
.animate .sh-technologies .GridCard:nth-of-type(4) .InlineMedia--image__inner {
  animation-delay: 1s;
}

.sh-delivering-impact .GridCard h2 {
  padding: 0.25rem 0 0.5rem;
}

/* Cards slide in (Delivering Impact) */
.animate .sh-delivering-impact .GridCard {
  animation: fadeIn 1s forwards;
  opacity: 0;
  /* transform: translateY(-10px); */
}

.animate .sh-delivering-impact .GridCard:nth-of-type(1) {
  animation-delay: 0.4s;
}
.animate .sh-delivering-impact .GridCard:nth-of-type(2) {
  animation-delay: 0.6s;
}
.animate .sh-delivering-impact .GridCard:nth-of-type(3) {
  animation-delay: 0.8s;
}
.animate .sh-delivering-impact .GridCard:nth-of-type(4) {
  animation-delay: 1s;
}
.animate .sh-delivering-impact .GridCard:nth-of-type(5) {
  animation-delay: 1.2s;
}

/* Images fade in (Delivering Impact) */
.sh-delivering-impact img {
  transition: all 1s ease;
  opacity: 0;
}

.animate .sh-delivering-impact img,
#section-Sub-LOBS-WQfd6MhtsQ.sh-delivering-impact img {
  opacity: 1;
}

.Navigation:has(.Navigation__itemList:empty) {
  display: none !important;
}

/* ==========================================================================
   12) About Section
   ========================================================================== */
.sh-meet-celeris {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* =========================================================
             Meet Celeris
             ========================================================= */

.animate .sh-meet-celeris .GridCard {
  animation: fadeIn 1s forwards;
  opacity: 0;
}

.animate .sh-meet-celeris .GridCard:nth-of-type(1) {
  animation-delay: 0.4s;
}
.animate .sh-meet-celeris .GridCard:nth-of-type(2) {
  animation-delay: 0.6s;
}
.animate .sh-meet-celeris .GridCard:nth-of-type(3) {
  animation-delay: 0.8s;
}
.animate .sh-meet-celeris .GridCard:nth-of-type(4) {
  animation-delay: 1s;
}

/* =========================================================
             Celeris Roadmap
             ========================================================= */

.animate .sh-celeris-roadmap .GridCard {
  animation: fadeIn 1s forwards;
  opacity: 0;
}

.animate .sh-celeris-roadmap .GridCard:nth-of-type(1) {
  animation-delay: 0.4s;
}
.animate .sh-celeris-roadmap .GridCard:nth-of-type(2) {
  animation-delay: 0.6s;
}
.animate .sh-celeris-roadmap .GridCard:nth-of-type(3) {
  animation-delay: 0.8s;
}
.animate .sh-celeris-roadmap .GridCard:nth-of-type(4) {
  animation-delay: 1s;
}

/* =========================================================
             Celeris Resources
             ========================================================= */

.animate .sh-celeris-resources .GridCard {
  animation: fadeIn 1s forwards;
  opacity: 0;
}

.animate .sh-celeris-resources .GridCard:nth-of-type(1) {
  animation-delay: 0.4s;
}
.animate .sh-celeris-resources .GridCard:nth-of-type(2) {
  animation-delay: 0.6s;
}
.animate .sh-celeris-resources .GridCard:nth-of-type(3) {
  animation-delay: 0.8s;
}
.animate .sh-celeris-resources .GridCard:nth-of-type(4) {
  animation-delay: 1s;
}
.animate .sh-celeris-resources .GridCard:nth-of-type(5) {
  animation-delay: 1.2s;
}
.animate .sh-celeris-resources .GridCard:nth-of-type(6) {
  animation-delay: 1.4s;
}
.animate .sh-celeris-resources .GridCard:nth-of-type(7) {
  animation-delay: 1.6s;
}
.animate .sh-celeris-resources .GridCard:nth-of-type(8) {
  animation-delay: 1.8s;
}

/* =========================================================
             Coming Soon
             ========================================================= */

.animate .sh-coming-soon .GridCard {
  animation: fadeIn 1s forwards;
  opacity: 0;
}

.animate .sh-coming-soon .GridCard:nth-of-type(1) {
  animation-delay: 0.4s;
}
.animate .sh-coming-soon .GridCard:nth-of-type(2) {
  animation-delay: 0.6s;
}
.animate .sh-coming-soon .GridCard:nth-of-type(3) {
  animation-delay: 0.8s;
}
.animate .sh-coming-soon .GridCard:nth-of-type(4) {
  animation-delay: 1s;
}
.animate .sh-coming-soon .GridCard:nth-of-type(5) {
  animation-delay: 1.2s;
}
.animate .sh-coming-soon .GridCard:nth-of-type(6) {
  animation-delay: 1.4s;
}
.animate .sh-coming-soon .GridCard:nth-of-type(7) {
  animation-delay: 1.6s;
}
.animate .sh-coming-soon .GridCard:nth-of-type(8) {
  animation-delay: 1.8s;
}

/* =========================================================
             DocAI Solutions
             ========================================================= */

.animate .sh-docai-solutions .GridCard {
  animation: fadeIn 1s forwards;
  opacity: 0;
}

.animate .sh-docai-solutions .GridCard:nth-of-type(1) {
  animation-delay: 0.4s;
}
.animate .sh-docai-solutions .GridCard:nth-of-type(2) {
  animation-delay: 0.6s;
}
.animate .sh-docai-solutions .GridCard:nth-of-type(3) {
  animation-delay: 0.8s;
}
.animate .sh-docai-solutions .GridCard:nth-of-type(4) {
  animation-delay: 1s;
}

/* =========================================================
             Intro Email AI
             ========================================================= */

.animate .sh-intro-email-ai .GridCard {
  animation: fadeIn 1s forwards;
  opacity: 0;
}

.animate .sh-intro-email-ai .GridCard:nth-of-type(1) {
  animation-delay: 0.4s;
}
.animate .sh-intro-email-ai .GridCard:nth-of-type(2) {
  animation-delay: 0.6s;
}
.animate .sh-intro-email-ai .GridCard:nth-of-type(3) {
  animation-delay: 0.8s;
}
.animate .sh-intro-email-ai .GridCard:nth-of-type(4) {
  animation-delay: 1s;
}

/* =========================================================
             Inbox Action
             ========================================================= */

.animate .sh-inbox-action .GridCard {
  animation: fadeIn 1s forwards;
  opacity: 0;
}

.animate .sh-inbox-action .GridCard:nth-of-type(1) {
  animation-delay: 0.4s;
}
.animate .sh-inbox-action .GridCard:nth-of-type(2) {
  animation-delay: 0.6s;
}
.animate .sh-inbox-action .GridCard:nth-of-type(3) {
  animation-delay: 0.8s;
}
.animate .sh-inbox-action .GridCard:nth-of-type(4) {
  animation-delay: 1s;
}

/* =========================================================
             Email AI Works
             ========================================================= */

.animate .sh-email-ai-works .GridCard {
  animation: fadeIn 1s forwards;
  opacity: 0;
}

.animate .sh-email-ai-works .GridCard:nth-of-type(1) {
  animation-delay: 0.4s;
}
.animate .sh-email-ai-works .GridCard:nth-of-type(2) {
  animation-delay: 0.6s;
}
.animate .sh-email-ai-works .GridCard:nth-of-type(3) {
  animation-delay: 0.8s;
}
.animate .sh-email-ai-works .GridCard:nth-of-type(4) {
  animation-delay: 1s;
}

/* =========================================================
             Welcome AOP Studio
             ========================================================= */

.animate .sh-welcome-aop-studio .GridCard {
  animation: fadeIn 1s forwards;
  opacity: 0;
}

.animate .sh-welcome-aop-studio .GridCard:nth-of-type(1) {
  animation-delay: 0.4s;
}
.animate .sh-welcome-aop-studio .GridCard:nth-of-type(2) {
  animation-delay: 0.6s;
}
.animate .sh-welcome-aop-studio .GridCard:nth-of-type(3) {
  animation-delay: 0.8s;
}
.animate .sh-welcome-aop-studio .GridCard:nth-of-type(4) {
  animation-delay: 1s;
}

/* =========================================================
             Design Through Deployment
             ========================================================= */

.animate .sh-design-through-deployment .GridCard {
  animation: fadeIn 1s forwards;
  opacity: 0;
}

.animate .sh-design-through-deployment .GridCard:nth-of-type(1) {
  animation-delay: 0.4s;
}
.animate .sh-design-through-deployment .GridCard:nth-of-type(2) {
  animation-delay: 0.6s;
}
.animate .sh-design-through-deployment .GridCard:nth-of-type(3) {
  animation-delay: 0.8s;
}
.animate .sh-design-through-deployment .GridCard:nth-of-type(4) {
  animation-delay: 1s;
}

/* =========================================================
             Getting Started AOP
             ========================================================= */

.animate .sh-getting-started-aop .GridCard {
  animation: fadeIn 1s forwards;
  opacity: 0;
}

.animate .sh-getting-started-aop .GridCard:nth-of-type(1) {
  animation-delay: 0.4s;
}
.animate .sh-getting-started-aop .GridCard:nth-of-type(2) {
  animation-delay: 0.6s;
}
.animate .sh-getting-started-aop .GridCard:nth-of-type(3) {
  animation-delay: 0.8s;
}
.animate .sh-getting-started-aop .GridCard:nth-of-type(4) {
  animation-delay: 1s;
}

/* ==========================================================================
   13) Roadmap Sections
   ========================================================================== */

/* Roadmap group title spacing */
#group-section-Roadmap-B5DnhrhZGi
  .Theme-Grids-Section-Padding.Theme-Section-PaddingTop--Large
  .GridsSection__title
  .Theme-Layer-BodyText {
  margin-bottom: 16px;
  padding: 0;
}

#section-Roadmap-B5DnhrhZGi .Theme-Layer-BodyText {
  padding-bottom: 24px;
}

/* Roadmap section padding adjustments */
#section-Roadmap-0PII3TWH7s {
  padding-top: 0;
  padding-bottom: 0;
}

#section-Roadmap-0PII3TWH7s .GridsSection {
  padding-bottom: 64px;
}

/* Roadmap cards: vertical rhythm */
#section-Roadmap-0PII3TWH7s .GridCard .Theme-Layer-BodyText--inner:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Roadmap “pill” label styling */
#section-Roadmap-0PII3TWH7s
  .GridCard
  .Theme-Layer-BodyText--inner:not(:empty)
  .Theme-TextSize-tiny.h-align-left:first-child {
  border: 1px solid var(--black-25);
  padding: 2px 4px;
  margin-bottom: 8px;
  border-radius: 4px;
  width: max-content;
}

/* Roadmap pt2 spacing */
.sh-celeris-roadmap-pt2 .Theme-Layer-BodyText {
  padding-top: 0;
}

.sh-celeris-roadmap-pt2 .Theme-Layer-BodyText--inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sh-celeris-roadmap-pt2 .Theme-Layer-BodyText p,
.Theme-Story p,
.sh-celeris-roadmap-pt2 .Theme-Layer-BodyText-Divider {
  margin: 0;
}

.aop-graph {
  width: min(1600px, 100%);
  margin: 0 auto 2rem;
  padding: 0 2rem;
  border: 1px solid var(--black-10);
  box-shadow: 0px 3px 12px var(--black-05);
  border-radius: 12px;
}

/* ==========================================================================
   14) Available Today Block
   ========================================================================== */
.available-today {
  display: flex;
  flex-direction: row;
  font-family: Sons;
  margin-top: 24px;
  margin-bottom: 24px;
}

.available-today .available-today-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 16px;
  background: var(--black);
  color: var(--white);
}

.available-today .available-today-details .tag {
  border: 1px solid var(--white);
  padding: 2px 4px;
  border-radius: 4px;
  width: max-content;
}

/* ==========================================================================
   15) Team / Meet Team
   ========================================================================== */
.team-lead {
  display: flex;
  flex-direction: row;
  gap: 24px;
  margin-top: 32px;
  font-family: Sons;
}

.team-lead-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.team-lead-details .role-quote {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sh-meet-team .Theme-Layer-BodyText {
  padding-bottom: 8px;
}

.sh-team .crop-circle.crop-circle {
  border-radius: 0px;
}

.sh-team .GridLayer {
  column-gap: 24px !important;
  row-gap: 30px !important;
}

.sh-team .GridCard__element.GridCard__element--last {
  margin-top: 16px;
}

/* ==========================================================================
   16) Coming Soon Layout (responsive grid widths)
   ========================================================================== */
@media (min-width: 620px) {
  .sh-coming-soon .GridsSection--Width-Plus .Layout {
    max-width: 900px;
  }
  .sh-coming-soon .GridsSection--Width-Plus .Layout .GridLayer {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .sh-coming-soon .GridsSection--Width-Plus .Layout {
    max-width: 1050px;
  }
  .sh-coming-soon .GridsSection--Width-Plus .Layout .GridLayer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .sh-coming-soon .GridsSection--Width-Plus .Layout {
    max-width: 1060px;
  }
  .sh-coming-soon .GridsSection--Width-Plus .Layout .GridLayer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  .sh-coming-soon .GridsSection--Width-Plus .Layout {
    max-width: 1360px;
  }
  .sh-coming-soon .GridsSection--Width-Plus .Layout .GridLayer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1750px) {
  .sh-coming-soon .GridsSection--Width-Plus .Layout {
    max-width: 1560px;
  }
  .sh-coming-soon .GridsSection--Width-Plus .Layout .GridLayer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 2000px) {
  .sh-coming-soon .GridsSection--Width-Plus .Layout {
    max-width: 1760px;
  }
  .sh-coming-soon .GridsSection--Width-Plus .Layout .GridLayer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   17) Utilities / Misc
   ========================================================================== */
.sh-code-images {
  visibility: hidden;
  height: 0;
}

/* ==========================================================================
   18) Applied AI Link Wheel / Card Variants
   ========================================================================== */
/* Custom properties are scoped to .jpm-ai-wheel (not :root) and prefixed
   --jpmai-*, so dropping this block into the site's shared stylesheet
   can't leak values onto, or collide with tokens from, anything outside
   this component. */
.jpm-ai-wheel{
  /* Palette matched to the Applied AI Shorthand site: near-black ink,
     the site's teal (used for "Insights", "10X", link and CTA accents)
     and its rust/terracotta (used for small category tags like
     "Doc AI" / "Celeris" / "AOP") — reserved here the same way, teal
     for interactive/brand accents, rust for the small tag label. */
  --jpmai-font: var(--font-jpm);
  --jpmai-ink: #14171c;
  --jpmai-body: #5b5f66;
  --jpmai-teal: #0c6b7e;
  --jpmai-teal-deep: #08414d;
  --jpmai-rust: #b85c2c;
  --jpmai-rust-deep: #8a4520;
  --jpmai-bg: #ffffff;
  --jpmai-surface: #f7f5f1;
  --jpmai-line: #e3e0d8;
  --jpmai-line-soft: #efece5;
  --jpmai-shadow: 30 15% 15%;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .jpm-ai-wheel{
    --jpmai-ink: #f3efe9;
    --jpmai-body: #b8b1a6;
    --jpmai-teal: #4fb8cc;
    --jpmai-teal-deep: #8fdbe0;
    --jpmai-rust: #d9925f;
    --jpmai-rust-deep: #eab183;
    --jpmai-bg: #14120e;
    --jpmai-surface: #1c1a15;
    --jpmai-line: #3a352c70;
    --jpmai-line-soft: #211e18;
    --jpmai-shadow: 20 30% 2%;
  }
}
:root[data-theme="dark"] .jpm-ai-wheel{
  --jpmai-ink: #f3efe9;
  --jpmai-body: #b8b1a6;
  --jpmai-teal: #4fb8cc;
  --jpmai-teal-deep: #8fdbe0;
  --jpmai-rust: #d9925f;
  --jpmai-rust-deep: #eab183;
  --jpmai-bg: #14120e;
  --jpmai-surface: #1c1a15;
  --jpmai-line: #3a352c70;
  --jpmai-line-soft: #211e18;
  --jpmai-shadow: 20 30% 2%;
}

.jpm-ai-wheel, .jpm-ai-wheel *{ box-sizing: border-box; }
.jpm-ai-wheel{
  font-family: var(--jpmai-font);
  color: var(--jpmai-ink);
  background: transparent;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 30px 0 0;
  container-type: inline-size;
}
.jpm-ai-wheel .row{
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}

/* ---------- left: intro text ---------- */
.jpm-ai-wheel .intro-eyebrow{
  font-family: var(--jpmai-font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jpmai-rust);
  margin: 0 0 14px;
}
.jpm-ai-wheel h1{
  font-family: var(--jpmai-font);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  text-wrap: balance;
  color: var(--jpmai-ink);
}
.jpm-ai-wheel .rule{
  width: 72px; height: 2px; background: var(--jpmai-teal);
  border: 0; margin: 0 0 26px; opacity: 0.55;
}
.jpm-ai-wheel p{
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--jpmai-body);
  max-width: 46ch;
  margin: 0 0 20px;
}
.jpm-ai-wheel p strong{ color: var(--jpmai-ink); font-weight: 700; }
.jpm-ai-wheel p u{
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--jpmai-line);
}
.jpm-ai-wheel .cta{
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 12px;
  background: var(--jpmai-teal-deep);
  color: #fff;
  font-family: var(--jpmai-font);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 6px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 1px 2px hsl(var(--jpmai-shadow) / 0.15);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .jpm-ai-wheel .cta{ color: #041016; } }
:root[data-theme="dark"] .jpm-ai-wheel .cta{ color: #041016; }
.jpm-ai-wheel .cta:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px hsl(var(--jpmai-shadow) / 0.22); }
.jpm-ai-wheel .cta svg{ width: 16px; height: 16px; transition: transform .18s ease; }
.jpm-ai-wheel .cta:hover svg{ transform: translateX(3px); }

/* ---------- right: the dial ---------- */
.jpm-ai-wheel .dial-col{
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 600px; min-width: 0; margin: 0 auto;
  container-type: inline-size;
}

.jpm-ai-wheel .dial-wrap{
  position: relative;
  width: min(600px, 100%);
  aspect-ratio: 1 / 1;
  /* Reserve only the label overhang beyond the square dial:
     half a 100px node + 14px gap + label height - node inset. */
  margin-top: max(0px, calc(64px + 1.3125rem - 13cqw));
  margin-bottom: max(0px, calc(64px + 2.625rem - 20.06cqw));
}

/* Slowly rotating dashed rings; wheel motion stays enabled for all preferences. */
.jpm-ai-wheel .dial-ring, .jpm-ai-wheel .dial-ring-outer{
  position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none;
}
.jpm-ai-wheel .dial-ring{
  background: repeating-conic-gradient(from 0deg, var(--jpmai-line) 0deg 1.1deg, transparent 1.1deg 7.2deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(50% - 15px), #000 calc(50% - 14px), #000 calc(50% - 3px), transparent calc(50% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(50% - 15px), #000 calc(50% - 14px), #000 calc(50% - 3px), transparent calc(50% - 2px));
  animation: jpmai-dial-rotate 220s linear infinite;
}
.jpm-ai-wheel .dial-ring-outer{
  background: repeating-conic-gradient(from 6deg, var(--jpmai-line-soft) 0deg 0.6deg, transparent 0.6deg 4.5deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(50% - 4px), #000 calc(50% - 3px), #000 50%, transparent calc(50% + 1px));
          mask: radial-gradient(farthest-side, transparent calc(50% - 4px), #000 calc(50% - 3px), #000 50%, transparent calc(50% + 1px));
  animation: jpmai-dial-rotate-rev 160s linear infinite;
}
@keyframes jpmai-dial-rotate{ to{ transform: rotate(360deg); } }
@keyframes jpmai-dial-rotate-rev{ to{ transform: rotate(-360deg); } }

.jpm-ai-wheel .dial-spokes{ position:absolute; inset:0; width:100%; height:100%; overflow: visible; }
.jpm-ai-wheel .dial-spokes line.spoke{
  stroke: var(--jpmai-line);
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: stroke .4s cubic-bezier(.22,1,.36,1), stroke-width .4s cubic-bezier(.22,1,.36,1);
}
/* Soft traveling pulse along each spoke — subtler than the original
   (slower, smaller, teal instead of a glowing brown) so it reads as a
   quiet ambient signal rather than an "AI dashboard" flourish. */
.jpm-ai-wheel .dial-spokes .flow-dot{ fill: var(--jpmai-teal); opacity: 0; }

.jpm-ai-wheel .dial-hub{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: 23%; aspect-ratio:1; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 32% 28%, var(--jpmai-teal) 0%, var(--jpmai-teal-deep) 68%);
  box-shadow: 0 0 0 1px hsl(var(--jpmai-shadow)/.08), 0 10px 28px hsl(var(--jpmai-shadow)/.28), 0 0 0 8px color-mix(in srgb, var(--jpmai-teal) 10%, transparent);
}
.jpm-ai-wheel .dial-hub svg{ width: 42%; height: 42%; fill: #fff; }

.jpm-ai-wheel .dial-node{
  /* Sized and centered to match .node-ring exactly, so the anchor's
     center (which the spoke lines target) lands on the ring itself —
     not on the midpoint of ring+label combined. The label is pulled
     out below via absolute positioning so it can't skew that center. */
  position:absolute; transform: translate(-50%,-50%);
  width: clamp(64px, 16.667cqw, 100px); height: clamp(64px, 16.667cqw, 100px);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  -webkit-tap-highlight-color: transparent;
}

/* Keep Shorthand's link fading from exposing spokes through the node circles. */
.jpm-ai-wheel a.dial-node,
.jpm-ai-wheel a.dial-node:is(:link, :visited, :hover, :focus, :active) {
  opacity: 1 !important;
}

/* Override Shorthand's text-link decoration, including dotted borders. */
.jpm-ai-wheel a.dial-node,
.jpm-ai-wheel a.dial-node:is(:link, :visited, :hover, :focus, :active),
.jpm-ai-wheel a.dial-node .node-label {
  text-decoration: none !important;
  border-bottom: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
}

.jpm-ai-wheel .dial-node .node-ring{
  width: clamp(64px, 16.667cqw, 100px); height: clamp(64px, 16.667cqw, 100px); border-radius: 50%;
  background: var(--jpmai-surface);
  border: 1.5px solid color-mix(in srgb, var(--jpmai-body) 55%, var(--jpmai-surface));
  display:flex; align-items:center; justify-content:center;
  transition: border-color .3s ease,
              box-shadow .3s ease,
              background .3s ease,
              transform .3s cubic-bezier(.22,1,.36,1);
}
.jpm-ai-wheel .dial-node .node-ring svg{
  width: 42.5px; height: 42.5px;
  stroke: var(--jpmai-body); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .25s ease;
}
.jpm-ai-wheel .dial-node .node-ring svg rect.icon-fill{ fill: var(--jpmai-body); stroke: none; transition: fill .25s ease; }
.jpm-ai-wheel .dial-node .node-label{
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%);
  /* Keep the side labels inside the dial at narrower module widths. */
  width: min(165px, 29.64cqw);
  font-family: var(--jpmai-font);
  font-size: clamp(0.8rem, 2.8cqw, 1.05rem); font-weight: 700; line-height: 1.25;
  color: var(--jpmai-ink); text-align:center;
  transition: color .25s ease;
}
/* Markets sits at the top of the dial, right against the hub — flip its
   label above the ring instead of into that cramped gap. */
.jpm-ai-wheel .dial-node--label-above .node-label{
  top: auto; bottom: calc(100% + 14px);
}

.jpm-ai-wheel .dial-node:hover .node-ring, .jpm-ai-wheel .dial-node:focus-visible .node-ring{
  border-color: var(--jpmai-teal);
  background: color-mix(in srgb, var(--jpmai-teal) 7%, var(--jpmai-surface));
  transform: scale(1.06);
  box-shadow: 0 12px 24px hsl(var(--jpmai-shadow)/.16);
}
.jpm-ai-wheel .dial-node:hover .node-ring svg, .jpm-ai-wheel .dial-node:focus-visible .node-ring svg{ stroke: var(--jpmai-teal); }
.jpm-ai-wheel .dial-node:hover .node-ring svg rect.icon-fill, .jpm-ai-wheel .dial-node:focus-visible .node-ring svg rect.icon-fill{ fill: var(--jpmai-teal); }
.jpm-ai-wheel .dial-node:hover .node-label, .jpm-ai-wheel .dial-node:focus-visible .node-label{ color: var(--jpmai-teal-deep); }
.jpm-ai-wheel .dial-node:active .node-ring{
  transform: scale(1.01);
  transition-duration: .1s;
}
.jpm-ai-wheel .dial-node:focus-visible{ outline: none; }
.jpm-ai-wheel .dial-node:focus-visible .node-ring{ outline: 2px solid var(--jpmai-teal); outline-offset: 3px; }

.jpm-ai-wheel [data-spoke].is-active{ stroke: var(--jpmai-teal); stroke-width: 2.25; }

.jpm-ai-wheel .dial-rail{
  visibility: hidden;
  margin: 37.5px 0 0; min-height: 72.5px;
  width: 100%; max-width: 550px; box-sizing: border-box;
  display: flex; align-items: flex-start; gap: 17.5px;
  text-align: left;
  font-family: var(--jpmai-font);
  font-size: 1.15rem; line-height: 1.55; color: var(--jpmai-body);
  background: var(--jpmai-bg);
  border: 1px solid color-mix(in srgb, var(--jpmai-body) 35%, var(--jpmai-bg));
  box-shadow: 0 3px 12px hsl(var(--jpmai-shadow) / .08);
  border-radius: 10px;
  padding: 20px 25px;
  transition: background .25s ease;
}
.jpm-ai-wheel .dial-rail.is-active{
  visibility: visible;
  background: var(--jpmai-bg);
}
.jpm-ai-wheel .dial-rail-icon{
  flex: none; display: flex;
  width: 42.5px; height: 42.5px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--jpmai-teal) 14%, var(--jpmai-surface));
}
.jpm-ai-wheel .dial-rail-icon svg{
  width: 24px; height: 24px;
  stroke: var(--jpmai-teal); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.jpm-ai-wheel .dial-rail-icon svg rect.icon-fill{ fill: var(--jpmai-teal); stroke: none; }
/* Official artwork keeps its viewBox and path stroke widths. Inherit the
   wheel's theme/state color instead of the source SVG's fixed teal. */
.jpm-ai-wheel svg.official-business-icon {
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.jpm-ai-wheel svg.official-business-icon path[stroke] {
  stroke: inherit;
}
.jpm-ai-wheel .dial-rail-text{ flex: 1; min-width: 0; padding-top: 2px; display: grid; }
.jpm-ai-wheel .dial-description{ grid-area: 1 / 1; visibility: hidden; }
.jpm-ai-wheel .dial-description.is-active{ visibility: visible; }
/* Keep Shorthand's paragraph/span colors from tinting the description. */
.jpm-ai-wheel p.dial-rail,
.jpm-ai-wheel .dial-rail .dial-rail-text,
.jpm-ai-wheel .dial-rail .dial-description {
  color: var(--jpmai-ink) !important;
}
.jpm-ai-wheel .dial-rail b{ color: var(--jpmai-ink); }

.jpm-ai-wheel .dial-node[data-spoke-ref="0"]{ left:50%; top:13%; }

.jpm-ai-wheel .dial-node[data-spoke-ref="1"]{ left:85.18%; top:38.56%; }

.jpm-ai-wheel .dial-node[data-spoke-ref="2"]{ left:71.76%; top:79.94%; }

.jpm-ai-wheel .dial-node[data-spoke-ref="3"]{ left:28.24%; top:79.94%; }

.jpm-ai-wheel .dial-node[data-spoke-ref="4"]{ left:14.82%; top:38.56%; }

/* The interactive rail manages its own visibility, including in late-loaded modules. */
.jpm-ai-wheel p.dial-rail {
  opacity: 1;
  transform: none;
  animation: none;
}

/* Card variant stays dark regardless of the surrounding site's theme. */
:root .jpm-ai-wheel.jpm-ai-wheel--cards {
  color-scheme: dark;
  --jpmai-ink: #f2f7f8;
  --jpmai-body: #beced2;
  --jpmai-teal: #58bfd0;
  --jpmai-teal-deep: #99e0e9;
  --jpmai-bg: #03090b;
  --jpmai-surface: #0c1a1e;
  --jpmai-line: #385057;
  --jpmai-line-soft: #1a2d33;
  --jpmai-shadow: 195 50% 1%;
  background: var(--jpmai-bg);
}

/* Card variant: centered wrapper with a 60/40 split after the gutter. */
.jpm-ai-wheel.jpm-ai-wheel--cards {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding: clamp(64px, 7vw, 96px) clamp(16px, 3vw, 40px);
  container-name: jpmai-cards;
}
.jpm-ai-wheel--cards .wheel-cards-layout {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
}
.jpm-ai-wheel--cards .wheel-cards-layout > * { min-width: 0; }
/* Stack for narrow HTML modules as well as narrow browser windows. */
@container jpmai-cards (max-width: 800px) {
  .jpm-ai-wheel--cards .wheel-cards-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 800px) {
  .jpm-ai-wheel--cards .wheel-cards-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
.jpm-ai-wheel--cards button.dial-node {
  appearance: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  cursor: pointer;
}
.jpm-ai-wheel--cards .dial-node,
.jpm-ai-wheel--cards .dial-node .node-ring {
  width: clamp(72px, 19cqw, 114px);
  height: clamp(72px, 19cqw, 114px);
}
.jpm-ai-wheel--cards .dial-node .node-ring svg {
  width: 48px;
  height: 48px;
}
.jpm-ai-wheel--cards .dial-node.is-preview .node-ring {
  border-color: var(--jpmai-teal);
}
.jpm-ai-wheel--cards .node-selected-badge {
  display: block;
  width: fit-content;
  margin: 6px auto 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--jpmai-teal);
  color: var(--jpmai-bg);
  font-size: .65rem;
  font-weight: 700;
  line-height: 1.2;
  visibility: hidden;
}
.jpm-ai-wheel--cards .dial-node.is-selected .node-selected-badge {
  visibility: visible;
}
.jpm-ai-wheel--cards .dial-node.is-selected .node-ring {
  border-color: var(--jpmai-teal);
  background: color-mix(in srgb, var(--jpmai-teal) 10%, var(--jpmai-surface));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--jpmai-teal) 15%, transparent);
}
.jpm-ai-wheel--cards .dial-node.is-selected .node-label { color: var(--jpmai-teal-deep); }
.jpm-ai-wheel--cards .dial-node.is-selected .node-ring svg { stroke: var(--jpmai-teal); }
.jpm-ai-wheel--cards .dial-node.is-selected .node-ring svg rect.icon-fill { fill: var(--jpmai-teal); }
.jpm-ai-wheel--cards .wheel-panels {
  min-width: 0;
  display: grid;
  isolation: isolate;
}
.jpm-ai-wheel--cards .dial-hub {
  width: 30%;
  background: radial-gradient(circle at 32% 28%, #167e93, #073c48 72%);
}
.jpm-ai-wheel--cards button.dial-hub {
  appearance: none;
  padding: 0;
  margin: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  color: var(--jpmai-ink);
}
.jpm-ai-wheel--cards button.dial-hub svg {
  width: 28%;
  height: 28%;
  flex-shrink: 0;
}
.jpm-ai-wheel--cards .dial-hub-title {
  font-family: var(--jpmai-font);
  font-size: clamp(12px, 3.2cqw, 20px);
  font-weight: 700;
  line-height: 1.1;
}
.jpm-ai-wheel--cards .dial-hub-subtitle {
  font-family: var(--jpmai-font);
  font-size: clamp(10px, 2.2cqw, 14px);
  line-height: 1.2;
  color: var(--jpmai-body);
}
.jpm-ai-wheel--cards button.dial-hub:focus-visible {
  outline: 3px solid var(--jpmai-teal);
  outline-offset: 6px;
}
.jpm-ai-wheel--cards .wheel-panel {
  grid-area: 1 / 1;
  position: relative;
  align-self: stretch;
  padding: clamp(24px, 3cqw, 40px);
  background: var(--jpmai-bg);
  border: 1px solid color-mix(in srgb, var(--jpmai-body) 35%, var(--jpmai-bg));
  border-radius: 14px;
  box-shadow: 0 6px 24px hsl(var(--jpmai-shadow) / .08);
}
/* Reserve the tallest card's space so switching never shifts the wheel.
   Visibility also excludes inactive content from focus and accessibility. */
.jpm-ai-wheel--cards .wheel-panel[hidden] {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}
.jpm-ai-wheel--cards .wheel-panel :is(h2, p) {
  opacity: 1;
  transform: none;
  animation: none;
  font-family: var(--jpmai-font);
  color: var(--jpmai-ink) !important;
  text-align: left;
  max-width: none;
}
.jpm-ai-wheel--cards .wheel-panel h2 {
  font-size: clamp(1.5rem, 2.8cqw, 2rem);
  line-height: 1.15;
  margin: 20px 0;
}
.jpm-ai-wheel--cards .wheel-panel p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 20px;
}
.jpm-ai-wheel--cards .wheel-panel p.wheel-card-tagline {
  font-weight: 700;
  color: var(--jpmai-teal-deep) !important;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--jpmai-line);
}
.jpm-ai-wheel--cards .wheel-panel .dial-rail-icon { width: 88px; height: 88px; }
.jpm-ai-wheel--cards .wheel-panel .dial-rail-icon svg { width: 52px; height: 52px; }
.jpm-ai-wheel--cards .wheel-panel .wheel-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  border: 0 !important;
  border-radius: 6px;
  background: var(--jpmai-ink);
  background-image: none !important;
  color: var(--jpmai-bg) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  font: 700 1rem/1.4 var(--jpmai-font);
}
.jpm-ai-wheel--cards .wheel-panel .wheel-card-cta:hover { background: var(--jpmai-teal-deep); }
.jpm-ai-wheel--cards .wheel-panel .wheel-card-cta:is(:link, :visited, :hover, :focus, :active) {
  opacity: 1 !important;
}
.jpm-ai-wheel--cards .wheel-card-cta:focus-visible,
.jpm-ai-wheel--cards .wheel-panel:focus-visible {
  outline: 2px solid var(--jpmai-teal);
  outline-offset: 4px;
}

/* Card choreography: entrance, staggered content, and a selection echo. */
@keyframes jpmai-card-enter {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes jpmai-content-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes jpmai-icon-enter {
  from { opacity: 0; transform: scale(.78) rotate(-12deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes jpmai-accent-enter {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes jpmai-selection-echo {
  from { opacity: .55; transform: scale(.95); }
  to { opacity: 0; transform: scale(1.32); }
}
.jpm-ai-wheel--cards .wheel-panel:not([hidden]) {
  animation: jpmai-card-enter 480ms cubic-bezier(.22, 1, .36, 1) both;
  background: linear-gradient(145deg,
    var(--jpmai-surface),
    var(--jpmai-bg) 55%,
    #08181d);
  box-shadow: 0 14px 40px hsl(var(--jpmai-shadow) / .12);
}
.jpm-ai-wheel--cards .wheel-panel::before {
  content: '';
  position: absolute;
  inset: 0 24px auto;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--jpmai-teal), color-mix(in srgb, var(--jpmai-teal) 12%, transparent));
  transform-origin: left;
  pointer-events: none;
}
.jpm-ai-wheel--cards .wheel-panel:not([hidden])::before {
  animation: jpmai-accent-enter 650ms 80ms cubic-bezier(.22, 1, .36, 1) both;
}
.jpm-ai-wheel--cards .wheel-panel:not([hidden]) > .dial-rail-icon {
  animation: jpmai-icon-enter 600ms 60ms cubic-bezier(.22, 1, .36, 1) both;
}
.jpm-ai-wheel--cards .wheel-panel:not([hidden]) > :is(h2, p, .wheel-card-cta) {
  animation: jpmai-content-enter 460ms cubic-bezier(.22, 1, .36, 1) both;
}
.jpm-ai-wheel--cards .wheel-panel:not([hidden]) > h2 { animation-delay: 100ms; }
.jpm-ai-wheel--cards .wheel-panel:not([hidden]) > p:nth-of-type(1) { animation-delay: 150ms; }
.jpm-ai-wheel--cards .wheel-panel:not([hidden]) > p:nth-of-type(2) { animation-delay: 200ms; }
.jpm-ai-wheel--cards .wheel-panel:not([hidden]) > p:nth-of-type(3) { animation-delay: 250ms; }
.jpm-ai-wheel--cards .wheel-panel:not([hidden]) > .wheel-card-cta { animation-delay: 300ms; }
.jpm-ai-wheel--cards .dial-node .node-ring { position: relative; }
.jpm-ai-wheel--cards .dial-node.is-selected .node-ring::after,
.jpm-ai-wheel--cards .dial-hub.is-selected::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid var(--jpmai-teal);
  border-radius: 50%;
  pointer-events: none;
  animation: jpmai-selection-echo 850ms ease-out both;
}
.jpm-ai-wheel--cards .wheel-panel .wheel-card-cta {
  transition: background 200ms ease;
}
.jpm-ai-wheel--cards .wheel-card-cta span {
  display: inline-block;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}
.jpm-ai-wheel--cards .wheel-card-cta:is(:hover, :focus-visible) span { transform: translateX(5px); }

/* A quiet, solid teal connection follows hover/focus or the selected card. */
/* Card wheels retain the traveling dots alongside the selected connection. */
.jpm-ai-wheel.is-pulsing:not(.jpm-ai-wheel--cards) .dial-spokes .flow-dot { visibility: hidden; }
.jpm-ai-wheel .dial-spokes line.spoke.is-highlighted {
  stroke: var(--jpmai-teal);
  stroke-width: 2.5;
  stroke-dasharray: none;
  animation: jpmai-spoke-breathe 3.6s ease-in-out infinite;
}
@keyframes jpmai-spoke-breathe {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: .82; }
}

/* ==========================================================================
   19) Newsletter Components / Story Compatibility
   ========================================================================== */

/* Newsletter: New Team Insights. */
.sh-team-insights .GridLayer {
  column-gap: clamp(1rem, 2vw, 1.5rem);
  row-gap: 1.25rem;
}

.sh-team-insights .GridCard {
  min-width: 0;
  border: 1px solid var(--black-15) !important;
  border-radius: 1.25rem;
  background: var(--white-85) !important;
  box-shadow: 0 8px 24px var(--black-10);
  overflow: hidden;
  text-wrap: balance;
  transition: box-shadow 180ms ease, border-color 180ms ease;
}

.sh-team-insights .GridCard__background {
  display: none;
}

.sh-team-insights .GridCard__element {
  position: relative;
  margin-top: 0;
}

.sh-team-insights .GridCard__element:not(.Media--fullWidth) {
  padding-inline: clamp(1.1rem, 1.6vw, 1.5rem);
}

.sh-team-insights .GridCard__element.Media--fullWidth {
  padding: 0 !important;
}

.sh-team-insights .GridCard .InlineMedia,
.sh-team-insights .GridCard .InlineMedia--image__inner {
  margin: 0;
  border-radius: 0 !important;
  animation: none;
  opacity: 1;
}

.sh-team-insights .GridCard .InlineMedia--image__inner img {
  object-fit: cover;
  transition: transform 300ms ease;
}

.sh-team-insights .GridCard h3 {
  margin-top: 1rem;
  margin-bottom: 0;
  line-height: 1.25;
}

.sh-team-insights .GridCard p {
  margin-top: 0.25rem;
  line-height: 1.4;
  opacity: 0.8;
}

.sh-team-insights .GridCard .Theme-Layer-BodyText-Divider {
  height: 1px;
  border: 0;
  background: transparent;
}

.sh-team-insights .GridCard__element--last {
  padding-bottom: 0.75rem;
}

@media (hover: hover) {
  .sh-team-insights .GridCard:hover {
    border-color: var(--blue-35) !important;
    box-shadow: 0 12px 30px var(--black-15);
  }

  .sh-team-insights .GridCard:hover .InlineMedia--image__inner img {
    transform: scale(1.04);
  }
}

/* Newsletter: frosted title wrappers keep text readable over monthly images. */
.Theme-TitleSection.Theme-Section-Position-1 {
  box-sizing: border-box;
  height: auto !important;
  padding-block: clamp(64px, 7vw, 112px) !important;
}
.Theme-TitleSection.Theme-Section-Position-1 .Theme-Layer-TextBlock {
  position: relative;
  flex: 0 0 auto;
  height: auto !important;
  min-height: 0 !important;
}
.Theme-TitleSection.Theme-Section-Position-1 .Theme-Layer-TextBlock-Inner {
  height: auto !important;
  min-height: 0 !important;
}
.Theme-TitleSection.Theme-Section-Position-1 .Theme-Layer-TextBlock-Inner > div {
  display: flow-root;
}

.Theme-TitleSection.Theme-Section-Position-1 .Theme-Layer-TextBlock-Inner > div,
:is(
  #section-Davids-Desk-m8IIcVhcBg,
  #section-AI-Spotlight-jIq6ZJm67D,
  #section-Releases-o5GoIVmWOR,
  #section-OOO-Series-Dslw3wWyZE,
  #section-Leader-Profile-CZbR3yLzyM,
  #section-Calendar-0X8d22G6fa,
  #section-Ideas-in-Motion-uQhVqUIQb1,
  #section-Market-Signals-G7n379dD0z
) .Theme-Layer-TextBlock-Inner > div {
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 0.5rem;
  background: var(--white-05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-shadow: 0 2px 6px var(--black-35);
}

/* Suppress exported title spacers when this CSS is pasted into Shorthand. */
:is(
  #section-Davids-Desk-m8IIcVhcBg,
  #section-AI-Spotlight-jIq6ZJm67D,
  #section-Releases-o5GoIVmWOR,
  #section-OOO-Series-Dslw3wWyZE,
  #section-Leader-Profile-CZbR3yLzyM,
  #section-Calendar-0X8d22G6fa,
  #section-Ideas-in-Motion-uQhVqUIQb1,
  #section-Market-Signals-G7n379dD0z
) .Theme-Layer-TextBlock-Inner .Theme-Layer-BodyText-Spacer.h-align-center.Theme-SpacerSize-10 {
  display: none !important;
}

/* Newsletter: Event banners (text over media). */
.sh-event .Theme-Layer-TextBlock-Underlay {
  max-width: 44rem;
  text-wrap: pretty;
}

/* One rhythm and one left edge for the whole event block. Shorthand sets its own
   margins/padding on these elements, so the selectors are prefixed to outrank it. */
.sh-event {
  --event-gap: 1.5rem;
  --event-inset: clamp(25px, 3vw, 40px);
  padding-block: clamp(1rem, 2vw, 2rem);
  border-bottom: 2px solid var(--dark-blue);
}

/* The calendar heading comes before the events, so count only event siblings. */
.sh-event:nth-child(1 of .sh-event) {
  border-top: 2px solid var(--dark-blue);
}

/* Single left edge: every child is flush inside .Theme-Title, which carries the inset. */
.sh-event .Theme-Layer-TextBlock-Inner .Theme-Title {
  padding-left: var(--event-inset);
  padding-right: var(--event-inset);
  text-align: left;
}

.sh-event .Theme-Layer-TextBlock-Inner .Theme-Title > * {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  text-align: left;
}

.sh-event .Theme-Layer-TextBlock-Inner .Theme-Title p {
  margin-block: 0;
  line-height: 1.55;
}

/* Title: accent rule beneath. */
.sh-event .Theme-Layer-TextBlock-Inner .Theme-Title h2 {
  margin-block: 0 1rem;
  padding-block: 0 var(--event-gap);
  border-bottom: 0;
  background: linear-gradient(90deg, var(--blue) 0 4.5rem, var(--white-30) 4.5rem 100%) bottom / 100% 3px no-repeat;
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-wrap: balance;
}

/* Event date: frosted pill with a blue dot, hugging the left edge. */
.sh-event .Theme-Layer-TextBlock-Inner .Theme-Title h2 + p {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-block: 0 var(--event-gap);
  padding: 0.5rem 1.15rem 0.5rem 0.95rem;
  border: 1px solid var(--white-30);
  border-radius: 999px;
  background: var(--white-15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.sh-event .Theme-Layer-TextBlock-Inner .Theme-Title h2 + p::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 35%, transparent);
}

.sh-event .Theme-Layer-TextBlock-Inner .Theme-Title .InlineElement--Divider__container {
  margin: 0;
  padding-block: 0;
}

.sh-event .Theme-Layer-TextBlock-Inner .Theme-Title .Theme-Layer-BodyText-Divider {
  width: 100%;
  height: 1px;
  margin-block: 0 var(--event-gap);
  border: 0;
  background: var(--white-30);
}

/* The editor's spacer would double the gap; the border handles separation. */
.sh-event .Theme-Layer-BodyText-Spacer {
  display: none;
}

/* Presenters: separated from the description above. */
.sh-event .Theme-Layer-TextBlock-Inner .Theme-Title p:has(> span > strong) {
  margin-top: var(--event-gap);
  padding-top: var(--event-gap);
  border-top: 1px solid var(--white-30);
}

/* Button wrapper (Shorthand HTML module or button container). */
.sh-event .Theme-Layer-TextBlock-Inner .Theme-Title .InlineHTML,
.sh-event .Theme-Layer-TextBlock-Inner .Theme-Title .InlineElement--Button__container {
  margin-top: calc(var(--event-gap) + 0.25rem);
  text-align: left;
}

/* The calendar group already contains the three event sections. Keep its
   heading full width and let each event occupy one desktop grid column. */
#article > section:has(> .sh-event) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
#article > section:has(> .sh-event) > :not(.sh-event) {
  grid-column: 1 / -1;
  min-width: 0;
}
#article > section:has(> .sh-event) > .sh-event {
  --event-gap: 1.25rem;
  --event-inset: clamp(20px, 2vw, 32px);
  position: relative;
  isolation: isolate;
  min-width: 0;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0;
  padding-block: clamp(40px, 4vw, 64px) !important;
  border: 1px solid var(--blue-45);
  border-top: 4px solid var(--blue);
  border-radius: 16px;
  box-shadow: 0 12px 32px var(--black-20);
  overflow: hidden;
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
@media (hover: hover) {
  #article > section:has(> .sh-event) > .sh-event:hover {
    border-color: var(--blue);
    box-shadow: 0 18px 40px var(--black-30);
  }
}
#article > section:has(> .sh-event) > .sh-event .Theme-Layer-TextBlock {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
}
#article > section:has(> .sh-event) > .sh-event .Theme-Layer-TextBlock-Underlay {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}
#article > section:has(> .sh-event) > .sh-event .Theme-Layer-TextBlock-Inner {
  height: auto !important;
  min-height: 0 !important;
}
#article > section:has(> .sh-event) > .sh-event .Theme-Title h2 {
  font-size: clamp(1.5rem, 2vw, 2rem);
}
#article > section:has(> .sh-event) > .sh-event .Theme-Title h2 + p {
  flex-wrap: wrap;
  font-size: .9rem;
  letter-spacing: .06em;
}
@media (min-width: 1000px) {
  #article > section:has(> .sh-event) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-inline: clamp(24px, 4vw, 64px);
  }
  #article > section:has(> .sh-event) > :not(.sh-event) {
    margin-inline: calc(-1 * clamp(24px, 4vw, 64px));
  }
}

/* Newsletter: Lightning Rounds list. */
.sh-lightning-rounds .GridLayer {
  column-gap: clamp(1rem, 2vw, 1.5rem);
  row-gap: 1.25rem;
}

.sh-lightning-rounds .GridCard {
  min-width: 0;
  border: 1px solid var(--black-15) !important;
  border-top: 4px solid var(--blue) !important;
  border-radius: 1rem !important;
  background: var(--white-85) !important;
  box-shadow: 0 8px 24px var(--black-10);
  overflow: hidden;
  text-wrap: balance;
  transition: box-shadow 180ms ease, border-color 180ms ease;
}

.sh-lightning-rounds .GridCard__element {
  padding-inline: clamp(1.1rem, 1.6vw, 1.5rem);
}

.sh-lightning-rounds .GridCard h3 {
  margin: 0;
  line-height: 1.25;
}

.sh-lightning-rounds .GridCard p {
  margin-top: 0.4rem;
  line-height: 1.45;
}

.sh-lightning-rounds .GridCard p em {
  opacity: 0.75;
}

.sh-lightning-rounds .GridCard .Theme-Layer-BodyText-Divider {
  height: 1px;
  border: 0;
  background: transparent;
}

@media (hover: hover) {
  .sh-lightning-rounds .GridCard:hover {
    border-color: var(--blue-35) !important;
    border-top-color: var(--blue) !important;
    box-shadow: 0 12px 30px var(--black-15);
  }
}

/* Newsletter: polish shared by New Hires, Team Insights, Lightning Rounds and Market Signals. */
:is(.sh-new-hires, .sh-team-insights, .sh-lightning-rounds, #section-Wh381q4rhT, .sh-market-signals) .GridsSection__title h2 {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Short accent rule under section titles (the dark Market Signals section has no title). */
:is(.sh-new-hires, .sh-team-insights, .sh-lightning-rounds) .GridsSection__title h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin: 0.9rem auto 0;
  border-radius: 2px;
  background: var(--blue);
}

/* Light cards: no border, soft shadow (matches New Features). */
:is(.sh-new-hires, .sh-team-insights, .sh-lightning-rounds) .GridCard {
  border: 0 !important;
  border-radius: 1rem !important;
}

:is(.sh-new-hires, .sh-team-insights) .GridCard:focus-within,
:is(.sh-lightning-rounds) .GridCard:focus-within {
  box-shadow: 0 0 0 2px var(--blue-45), 0 12px 30px var(--black-15);
}

@media (hover: hover) {
  :is(.sh-new-hires, .sh-team-insights) .GridCard:hover {
    border-color: transparent !important;
  }
}

/* New Hires: name over title with a clear hierarchy. */
.sh-new-hires .GridCard h3 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.005em;
}

.sh-new-hires .GridCard p {
  margin-top: 0.3rem;
  color: var(--dark-blue);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* Team Insights: author line reads as a byline. */
.sh-team-insights .GridCard p {
  color: var(--dark-blue);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

/* Lightning Rounds: blue top accent clipped cleanly by the card radius; drop the empty divider row. */
.sh-lightning-rounds .GridCard {
  background: linear-gradient(var(--blue) 0 4px, transparent 4px), var(--white-85) !important;
  box-shadow: 0 8px 24px var(--black-10);
}

.sh-lightning-rounds .GridCard__element--last:has(.Theme-Layer-BodyText-Divider) {
  display: none;
}

.sh-lightning-rounds .GridCard__element--first {
  padding-top: 1.5rem;
}

.sh-lightning-rounds .GridCard h3 {
  font-size: 1.2rem;
  font-weight: 800;
}

.sh-lightning-rounds .GridCard p {
  font-size: 1rem;
}

.sh-lightning-rounds .GridCard p em {
  display: block;
  margin-top: 0.5rem;
  color: var(--dark-blue);
  font-size: 0.9rem;
  opacity: 1;
}

.sh-lightning-rounds .GridCard__element:not(.GridCard__element--first):not(:last-child) {
  padding-bottom: 1.5rem;
}

/* Market Signals (section-Wh381q4rhT; add class sh-market-signals in Shorthand if preferred). */
:is(#section-Wh381q4rhT, .sh-market-signals) .GridCard {
  /* Use content-sized blocks instead of Shorthand's shared subgrid rows. */
  display: flex;
  flex-direction: column;
  grid-row: auto !important;
  gap: 1rem !important;
  border: 1px solid var(--white-20) !important;
  border-radius: 1rem !important;
  background: color-mix(in srgb, #000 50%, transparent) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px var(--black-30);
  overflow: hidden;
}

:is(#section-Wh381q4rhT, .sh-market-signals) .GridCard > .GridCard__element {
  height: auto;
  flex: none;
  margin-block: 0;
}

:is(#section-Wh381q4rhT, .sh-market-signals) .GridCard > .GridCard__element--last {
  margin-top: auto;
}

:is(#section-Wh381q4rhT, .sh-market-signals) .GridCard h3 {
  margin-block: 0;
  padding-block: 0;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.2;
}

:is(#section-Wh381q4rhT, .sh-market-signals) .GridCard p {
  margin-block: 0;
  padding-block: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.6;
}

:is(#section-Wh381q4rhT, .sh-market-signals) .GridCard p strong {
  display: block;
  margin-bottom: 0.4rem;
  color: #7fd0e6;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

:is(#section-Wh381q4rhT, .sh-market-signals) .GridCard .InlineElement--Button__container {
  margin-block: 0;
}

:is(#section-Wh381q4rhT, .sh-market-signals) .GridCard p:empty {
  display: none;
}

/* Newsletter: Team photo carousel. */
.sh-carousel.Theme-Section { padding-block: 0 !important; }
.sh-carousel .carousel-container { height: auto !important; }
.sh-carousel.is-carousel-wrapping :is(.carousel-inner, .carousel-captions) { transition: none !important; }
/* Visual copies fill the track beyond the final slide; native controls ignore them. */
.sh-carousel .carousel-loop-clone { pointer-events: none; }
.sh-carousel .carousel-loop-clone .carousel-image { opacity: 1 !important; }
.sh-carousel.is-carousel-loop-step .carousel-loop-clone.is-active { opacity: 1 !important; filter: none; transform: scale(1); }


.sh-carousel .carousel-cell-item {
  padding-inline: 0.5rem;
  transition: opacity 250ms ease, transform 250ms ease, filter 250ms ease;
}

.sh-carousel .carousel-image {
  border: 1px solid var(--black-15);
  border-radius: 1.25rem;
  box-shadow: 0 8px 24px var(--black-15);
  overflow: hidden;
  transition: box-shadow 250ms ease, outline-color 250ms ease;
}

/* Active slide (class set by app.js): the rest recede. */
.sh-carousel.has-active-slide .carousel-cell-item:not(.is-active) {
  opacity: 0.5;
  filter: grayscale(0.6);
  transform: scale(0.94);
}

.sh-carousel .carousel-cell-item.is-active {
  opacity: 1;
  filter: none;
  transform: scale(1);
}

.sh-carousel .carousel-cell-item.is-active .carousel-image {
  outline: 4px solid var(--blue);
  outline-offset: -4px;
  border-radius: 1.25rem;
  box-shadow: 0 14px 36px var(--black-20);
}

.sh-carousel .Theme-OverlayedCaption {
  background: linear-gradient(0deg, var(--black-50), transparent);
}

.sh-carousel .Theme-OverlayedCaption p {
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.sh-carousel .carousel-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 5;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  padding: 1rem;
  margin-inline: 1rem;
  border: 2px solid var(--white-50);
  border-radius: 50%;
  background: var(--black-50);
  color: #fff !important;
  box-shadow: 0 4px 12px var(--black-20);
  transition: background-color 180ms ease;
}

.sh-carousel .carousel-button svg,
.sh-carousel .carousel-button svg path {
  width: 100%;
  height: 100%;
  fill: #fff !important;
  color: #fff !important;
}

/* Keep endpoint arrows visible; Shorthand still controls their disabled state. */
.sh-carousel .carousel-button[aria-disabled="true"],
.sh-carousel .carousel-button:disabled { opacity: .45 !important; cursor: default; }

.sh-carousel .carousel-button:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

@media (hover: hover) {
  .sh-carousel .carousel-button:hover {
    background: var(--blue);
  }
}

/* Navigation scope compatibility: additive fix for navigation rendered outside
   the story/header. Original stylesheet above remains unchanged. */
:where(#navigation, .Theme-NavigationBar, .sh-top-nav) {
  --font-jpm: "Amplitude", "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --black: #000000;
  --white: #ffffff;
  --light-gray: #f5f7f8;
  --blue: #1a7b99;
  --dark-tan: #936846;
  --black-90: rgba(0, 0, 0, 0.9);
  --black-25: rgba(0, 0, 0, 0.25);
  --black-15: rgba(0, 0, 0, 0.15);
  --black-05: rgba(0, 0, 0, 0.05);
  --black-5: var(--black-05);
}

body :where(#navigation, .Theme-NavigationBar, .sh-top-nav) *:not(.material-symbols-outlined):not([class*="material-symbols"]),
body :where(#navigation, .Theme-NavigationBar, .sh-top-nav) *:not(.material-symbols-outlined):not([class*="material-symbols"])::before,
body :where(#navigation, .Theme-NavigationBar, .sh-top-nav) *:not(.material-symbols-outlined):not([class*="material-symbols"])::after {
  font-family: var(--font-jpm) !important;
}

.sh-core-business-wheel {
  background: var(--black);
}

/* Newsletter: more breathing room and lighter typography in New Features. */
.sh-new-features .GridsSection .GridLayer .GridCard {
  row-gap: 1.25rem !important;
}

.sh-new-features .GridsSection .GridLayer .GridCard .GridCard__element p {
  font-weight: 400;
  line-height: 1.7;
}

.sh-new-features .GridsSection .GridLayer .GridCard .GridCard__element :is(h2, h3, p) + p:not(:empty) {
  margin-top: 1rem;
}

.sh-new-features .GridsSection .GridLayer .GridCard .GridCard__element :is(h2, h3, p.Theme-TextSize-xxxsmall) {
  font-weight: 600;
  line-height: 1.3;
}

.sh-new-features .GridCard :is(h2, h3, p.Theme-TextSize-xxxsmall) strong {
  font-weight: inherit;
}

.sh-new-features .GridCard p:not(.Theme-TextSize-xxxsmall) strong {
  font-weight: 500;
}

/* Shorthand-branded preview header: match the JPM navigation background. */
.Theme-Header:has(.Theme-Logo a[href="https://shorthand.com/"], .Theme-Logo a[href="https://shorthand.com"]) .Theme-NavigationBar {
  background: var(--light-gray, #f5f7f8) !important;
}

/* Newsletter only: regular-weight headings, including titles authored as
   paragraphs and nested bold spans. Detect its existing section classes so
   shared site pages and navigation retain their original typography. */
#article:has(.sh-new-features)
  :is(h1, h2, h3, h4, h5, h6, .GridsSection__title p, .GridCard p.Theme-TextSize-xxxsmall),
#article:has(.sh-new-features)
  :is(h1, h2, h3, h4, h5, h6, .GridsSection__title p, .GridCard p.Theme-TextSize-xxxsmall)
  :is(span, strong, b) {
  font-weight: 400 !important;
}

/* Short editorial labels are also regular weight; button emphasis is retained. */
#article:has(.sh-new-features)
  .GridCard p > strong:only-child,
#article:has(.sh-new-features)
  :is(#section-Wh381q4rhT, .sh-market-signals) .GridCard p strong {
  font-weight: 400 !important;
}

/* Newsletter Market Signals: full-width images with a consistent crop. */
:is(#section-Wh381q4rhT, .sh-market-signals) .GridCard > .GridCard__element:has(.InlineMedia--image) {
  padding: 0 !important;
}

:is(#section-Wh381q4rhT, .sh-market-signals) .GridCard .InlineMedia--image {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

:is(#section-Wh381q4rhT, .sh-market-signals) .GridCard .InlineMedia--image__inner {
  position: relative;
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
}

:is(#section-Wh381q4rhT, .sh-market-signals) .GridCard .InlineMedia--image__inner > .FullSize {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100% !important;
}

:is(#section-Wh381q4rhT, .sh-market-signals) .GridCard .InlineMedia--image__inner :is(a.Theme-LinkedImage, picture, img) {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

:is(#section-Wh381q4rhT, .sh-market-signals) .GridCard .InlineMedia--image__inner img {
  object-fit: cover;
  object-position: center;
  border-radius: 0 !important;
}

/* ==========================================================================
   20) Video Thumbnail Preview
   ========================================================================== */

/* Video thumbnail: portrait artwork with a frosted editorial text panel. */
.video-thumb-preview {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 64px);
  box-sizing: border-box;
  background: #15191c;
}
.video-thumb-preview main { width: 100%; max-width: 1920px; }
.video-thumb-preview .video-thumb + .video-thumb { margin-top: 48px; }
.video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  font-family: "Amplitude", "Lato", Arial, sans-serif;
  color: #142b36;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .3);
}
.video-thumb-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-thumb-content {
  position: absolute;
  left: 51%;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  padding: 3cqw;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 1.2cqw;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 36px rgba(16, 41, 55, .12);
}
.video-thumb--alt .video-thumb-content {
  left: 50%;
  right: 4%;
  padding: 2.5cqw;
  border: 1px solid rgba(255, 255, 255, .24);
  border-top: .3cqw solid #d7ba9d;
  border-radius: .5cqw;
  color: #fff;
  background: linear-gradient(145deg, rgba(8, 38, 53, .78), rgba(8, 38, 53, .64));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(16, 41, 55, .2);
}
.video-thumb .video-thumb-name {
  margin: 0 0 .6cqw;
  color: #936846;
  font-size: 3.5cqw;
  line-height: 1.15;
  font-weight: 600;
}
.video-thumb--alt .video-thumb-name {
  color: #fff;
  font-size: 3cqw;
}
.video-thumb-divider {
  width: 4cqw;
  height: 3px;
  margin: 2cqw 0;
  background: #1a7b99;
}
.video-thumb .video-thumb-role {
  margin: 0;
  font-size: 2.6cqw;
  line-height: 1.3;
  font-weight: 600;
}
.video-thumb-speaker {
  margin-top: 2.4cqw;
  padding: .2cqw 0 .2cqw 1.2cqw;
  border-left: .25cqw solid #936846;
}
.video-thumb h1 {
  margin: 0;
  font-size: 4.8cqw;
  line-height: 1.12;
  letter-spacing: -.025em;
  font-weight: 700;
  text-wrap: balance;
}
.video-thumb--alt {
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 1.2cqw;
}
.video-thumb--alt .video-thumb-content {
  border-radius: 1.2cqw;
}
.video-thumb--alt h1 { font-size: 4.4cqw; font-weight: 400; }
.video-thumb--alt :is(.video-thumb-name, .video-thumb-role, .video-thumb-kicker) {
  font-weight: 400;
}
.video-thumb-keyword {
  display: block;
  color: #005075;
  font-size: 9.6cqw;
  line-height: .95;
  letter-spacing: -.045em;
  margin-bottom: 1cqw;
}
.video-thumb-headline-rest {
  display: block;
}
.video-thumb--alt .video-thumb-keyword { color: #d7ba9d; }
.video-thumb--alt .video-thumb-speaker {
  border-left: 0;
  border-top: 1px solid rgba(255, 255, 255, .3);
  padding: 1.5cqw 0 0;
  margin-top: 1.8cqw;
}
.video-thumb--alt .video-thumb-role { color: #d5e3e9; font-size: 2.3cqw; }
.video-thumb-kicker {
  display: flex;
  align-items: center;
  gap: 1cqw;
  margin: 0 0 1.8cqw;
  font-size: 1.1cqw;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.video-thumb-kicker span {
  border-left: 1px solid rgba(255, 255, 255, .4);
  padding-left: 1cqw;
  color: #d5e3e9;
}
/* Visual play cue for the thumbnail comp; no playback URL is supplied yet. */
.video-thumb-play {
  position: absolute;
  left: 35%;
  top: 75%;
  width: 7cqw;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: .15cqw solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: rgba(0, 80, 117, .9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 .6cqw rgba(255, 255, 255, .18), 0 8px 24px rgba(0, 0, 0, .25);
}
.video-thumb-play svg { width: 48%; height: 48%; fill: #fff; }

/* ==========================================================================
   21) Core Business Wheel / Operational Innovation
   ========================================================================== */

/* Core business wheel and Operational Innovation capabilities. */
.cbw-preview { margin:0; background:#03090b; }
.cbw { --cbw-teal:#62c5da; box-sizing:border-box; color:#f3f7f8; background:#03090b; font-family:"Amplitude","Lato",Arial,sans-serif; padding:56px clamp(20px,5vw,80px) 64px; }
.cbw * { box-sizing:border-box; }
.cbw .cbw-heading { max-width:1280px; margin:0 auto 36px; }
.cbw .cbw-eyebrow { color:var(--cbw-teal); font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.cbw h1 { font-size:clamp(30px,3.4vw,48px); line-height:1.12; margin:16px 0; font-weight:600; }
.cbw p { color:#b8c7cb; line-height:1.6; }
.cbw .cbw-layout { display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(24px,5vw,72px); align-items:center; max-width:1280px; margin:auto; }
.cbw .cbw-wheel { position:relative; width:100%; max-width:660px; aspect-ratio:1; margin:auto; }
.cbw--capabilities .cbw-heading { max-width:1440px; }
.cbw--capabilities .cbw-layout {
  max-width:1440px;
  grid-template-columns:minmax(0, 1.45fr) minmax(0, 1fr);
  gap:clamp(24px, 4vw, 56px);
}
.cbw--capabilities .cbw-wheel { max-width:800px; }
.cbw .cbw-segment { position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; background:#15272e; color:#e6eef1; cursor:pointer; transform-origin:center; transition:background 320ms ease, transform 440ms cubic-bezier(.16,1,.3,1), filter 320ms ease; font:inherit; }
.cbw .cbw-segment:hover, .cbw .cbw-segment.is-preview { background:#245465; }
.cbw .cbw-segment[aria-pressed="true"] { background:radial-gradient(circle at center,#19677e 24%,#227e96 72%,#62c5da 98%); color:#fff; z-index:1; transform:scale(1.012); }
.cbw .cbw-segment.is-preview, .cbw .cbw-segment:focus-visible { z-index:2; transform:scale(1.025); filter:brightness(1.12); }
@media(hover:hover) and (pointer:fine) {
  .cbw .cbw-segment:hover { z-index:2; transform:scale(1.025); filter:brightness(1.12); }
}
.cbw .cbw-segment:active { transform:scale(1.008); }
.cbw .cbw-segment[aria-pressed="true"] .cbw-label::after { content:"Selected"; position:absolute; top:calc(100% + 8px); color:#d0f6fc; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.cbw .cbw-segment[aria-pressed="true"] .cbw-label svg { filter:drop-shadow(0 0 7px #62c5da88); }
.cbw .cbw-segment:focus-visible { background:#326b80; }
.cbw .cbw-segment:focus-visible .cbw-label { outline:2px solid white; outline-offset:8px; border-radius:4px; }
.cbw .cbw-label { position:absolute; transform:translate(-50%,-50%); width:26%; display:flex; align-items:center; flex-direction:column; gap:12px; transition:transform 280ms cubic-bezier(.22,1,.36,1); pointer-events:none; font-weight:600; font-size:clamp(12px,1.25vw,17px); line-height:1.25; text-align:center; }
.cbw .cbw-label svg { transition:filter 220ms ease; width:clamp(28px,4vw,48px); height:clamp(28px,4vw,48px); }
/* Seven narrower wedges need compact labels, with room for the selected badge. */
.cbw--capabilities .cbw-label { width:23%; gap:8px; font-size:clamp(11px,1.1vw,15px); }
.cbw--capabilities .cbw-label svg { width:clamp(24px,3vw,36px); height:clamp(24px,3vw,36px); }
.cbw--capabilities .cbw-heading strong { color:var(--cbw-teal); }
.cbw--capabilities .cbw-icon-circle {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:clamp(36px,4.5vw,54px);
  aspect-ratio:1;
  flex-shrink:0;
  border:1px solid #62c5da66;
  border-radius:50%;
  background:#07121688;
  transition:transform 420ms cubic-bezier(.16,1,.3,1), background 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}
.cbw--capabilities .cbw-segment:is(.is-preview,:focus-visible,[aria-pressed="true"]) .cbw-icon-circle {
  transform:translateY(-3px);
  border-color:var(--cbw-teal);
  background:#0c3442;
  box-shadow:0 6px 18px #0003, 0 0 16px #62c5da22;
}
@media(hover:hover) and (pointer:fine) {
  .cbw--capabilities .cbw-segment:hover .cbw-icon-circle {
    transform:translateY(-3px);
    border-color:var(--cbw-teal);
    background:#0c3442;
    box-shadow:0 6px 18px #0003, 0 0 16px #62c5da22;
  }
}
.cbw--capabilities .cbw-label .cbw-icon-circle svg { width:62%; height:62%; }
.cbw--capabilities .dial-rail-icon .cbw-icon-circle { width:76px; }
.cbw--capabilities .dial-rail-icon .cbw-icon-circle svg { width:46px; height:46px; }
.cbw--capabilities .cbw-hub > span { max-width:85%; text-align:center; }
.cbw svg path[stroke] { stroke:currentColor; }
.cbw .cbw-hub { z-index:3; transition:transform 280ms cubic-bezier(.22,1,.36,1), box-shadow 280ms ease, border-color 220ms ease; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:43%; height:43%; border-radius:50%; border:1px solid #4a91a4; box-shadow:0 0 18px #62c5da12; background:#071216; color:#f4fafb; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; cursor:pointer; font:inherit; font-weight:600; font-size:clamp(14px,1.6vw,20px); }
.cbw .cbw-hub svg { width:30%; height:30%; fill:var(--cbw-teal); }
.cbw .cbw-hub small { font-size:12px; color:#9db4bd; font-weight:400; }
.cbw .cbw-hub[aria-pressed="true"] { border:2px solid var(--cbw-teal); box-shadow:0 0 24px #62c5da18; }
.cbw .cbw-hub svg { transition:filter 280ms ease; }
.cbw .cbw-hub:focus-visible { transform:translate(-50%,-50%) scale(1.035); }
@media(hover:hover) and (pointer:fine) {
  .cbw .cbw-hub:hover { transform:translate(-50%,-50%) scale(1.035); border-color:var(--cbw-teal); box-shadow:0 0 0 2px #62c5da24,0 0 30px #62c5da30; }
  .cbw .cbw-hub:hover svg { filter:drop-shadow(0 0 9px #62c5da66); }
}
.cbw .cbw-hub:active { transform:translate(-50%,-50%) scale(1.01); }
.cbw .cbw-hub:focus-visible, .cbw a:focus-visible { outline:3px solid white; outline-offset:4px; }
.cbw .cbw-hint { text-align:center; font-size:13px; margin:20px 0 0; }
.cbw .cbw-cards { display:grid; }
.cbw .cbw-card { position:relative; grid-area:1/1; padding:clamp(24px,3vw,44px); border:1px solid #24414c; border-radius:16px; background:linear-gradient(145deg,#10252d,#071216); align-self:stretch; }
.cbw .cbw-card[hidden] { display:block; visibility:hidden; pointer-events:none; }
.cbw .cbw-card h2 { color:#fff; font-size:clamp(26px,2.8vw,36px); font-weight:600; margin:24px 0 16px; line-height:1.15; }
.cbw .cbw-card p { font-size:16px; margin:16px 0; }
.cbw .cbw-card .wheel-card-tagline { color:var(--cbw-teal); font-size:19px; line-height:1.4; }
.cbw .dial-rail-icon { display:block; color:var(--cbw-teal); }
.cbw .dial-rail-icon svg { width:54px; height:54px; }
.cbw .wheel-card-cta { transition:background 220ms ease, box-shadow 220ms ease; display:inline-flex; gap:16px; margin-top:12px; padding:14px 20px; background:var(--cbw-teal); color:#031216; border-radius:6px; font-weight:700; text-decoration:none; }
.cbw .wheel-card-cta:hover { background:#a4e1ec; }
.cbw .cbw-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:760px) { .cbw { padding:32px 16px; } .cbw .cbw-layout { grid-template-columns:1fr; gap:28px; } .cbw .cbw-wheel { max-width:520px; } .cbw .cbw-label { font-size:clamp(11px,3vw,16px); gap:8px; } .cbw .cbw-label svg { transition:filter 220ms ease; width:32px; height:32px; } .cbw .cbw-hub { font-size:16px; } .cbw .cbw-card { padding:24px; } }
@media(max-width:760px) {
  .cbw--capabilities .cbw-layout { grid-template-columns:minmax(0, 1fr); }
  .cbw--capabilities .cbw-wheel { max-width:600px; }
  .cbw--capabilities .cbw-label { font-size:clamp(9px,2.5vw,14px); gap:5px; }
  .cbw--capabilities .cbw-label svg { width:clamp(20px,6vw,30px); height:clamp(20px,6vw,30px); }
  .cbw--capabilities .cbw-segment[aria-pressed="true"] .cbw-label::after { top:calc(100% + 4px); font-size:8px; }
}
/* Match the existing cards' entrance and stagger without moving the layout. */
@keyframes cbw-card-enter {
  from { opacity:0; transform:translateY(16px) scale(.985); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes cbw-content-enter {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes cbw-accent-enter {
  from { transform:scaleX(0); }
  to { transform:scaleX(1); }
}
.cbw .cbw-card:not([hidden]) { animation:cbw-card-enter 560ms cubic-bezier(.16,1,.3,1) both; }
.cbw .cbw-card::before { content:""; position:absolute; top:0; left:24px; right:24px; height:2px; background:linear-gradient(90deg,var(--cbw-teal),transparent); transform-origin:left; pointer-events:none; }
.cbw .cbw-card:not([hidden])::before { animation:cbw-accent-enter 650ms 80ms cubic-bezier(.22,1,.36,1) both; }
.cbw .cbw-card:not([hidden]) > * { animation:cbw-content-enter 520ms cubic-bezier(.16,1,.3,1) both; }
.cbw .cbw-card:not([hidden]) > :nth-child(2) { animation-delay:50ms; }
.cbw .cbw-card:not([hidden]) > :nth-child(3) { animation-delay:90ms; }
.cbw .cbw-card:not([hidden]) > :nth-child(4) { animation-delay:130ms; }
.cbw .cbw-card:not([hidden]) > :nth-child(5) { animation-delay:170ms; }
.cbw .cbw-card:not([hidden]) > :nth-child(6) { animation-delay:210ms; }
@keyframes cbw-icon-enter {
  from { opacity:0; transform:scale(.78) rotate(-12deg); }
  to { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes cbw-selection-echo {
  from { opacity:.55; transform:scale(.95); }
  to { opacity:0; transform:scale(1.32); }
}
.cbw .cbw-card:not([hidden]) > .dial-rail-icon {
  animation:cbw-icon-enter 600ms 60ms cubic-bezier(.22,1,.36,1) both;
  transform-origin:27px 27px;
}
.cbw .cbw-card:not([hidden]) > h2 { animation-delay:100ms; }
.cbw .cbw-card:not([hidden]) > .wheel-card-tagline { animation-delay:150ms; }
.cbw .cbw-card:not([hidden]) > .wheel-card-tagline + p { animation-delay:200ms; }
.cbw .cbw-segment.is-echoing .cbw-icon-circle::after,
.cbw .cbw-hub.is-echoing::after {
  content:"";
  position:absolute;
  border:2px solid var(--cbw-teal);
  border-radius:50%;
  pointer-events:none;
  animation:cbw-selection-echo 850ms ease-out both;
}
.cbw .cbw-segment.is-echoing .cbw-icon-circle::after {
  inset:-6px;
}
.cbw .cbw-hub.is-echoing::after { inset:-6px; }
.cbw .wheel-card-cta span { display:inline-block; transition:transform 220ms cubic-bezier(.22,1,.36,1); }
.cbw .wheel-card-cta:is(:hover,:focus-visible) span { transform:translateX(5px); }
/* Polygon strokes follow the clipped segment, including its curved edges. */
.cbw .cbw-edge { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.cbw .cbw-edge polygon { fill:none; stroke:#397083; stroke-width:.45; vector-effect:non-scaling-stroke; transition:stroke 220ms ease, stroke-width 220ms ease; }
.cbw .cbw-segment:is(:hover,:focus-visible,.is-preview,[aria-pressed="true"]) .cbw-edge polygon { stroke:var(--cbw-teal); stroke-width:2; }
.cbw .cbw-edge .cbw-crust {
  fill:none;
  stroke:var(--cbw-teal);
  stroke-width:10;
  vector-effect:non-scaling-stroke;
  opacity:0;
  transition:opacity 220ms ease;
}
.cbw .cbw-segment[aria-pressed="true"] .cbw-crust { opacity:1; }
.cbw-preview--light { background:#fff; }
/* Light palette follows wheel-preview: warm surfaces, blue hub, tan edges. */
.cbw.cbw--light { --cbw-teal:#0c6b7e; --cbw-blue-deep:#08414d; --cbw-tan:#d7ba9d; --cbw-warm-surface:#f7f5f1; color:#14171c; background:#fff; color-scheme:light; }
.cbw.cbw--links { padding:28px; }
.cbw--links .cbw-wheel { max-width:660px; }
.cbw--links a.cbw-segment { display:block; text-decoration:none; color:#08414d; }
.cbw--light .cbw-segment { background:linear-gradient(145deg,#faf8f4,#ede3d7); color:var(--cbw-blue-deep); }
.cbw--light .cbw-label svg { color:var(--cbw-teal); }
.cbw--light .cbw-segment:is(:hover,:focus-visible) { background:linear-gradient(145deg,#eaf3f4,#d1e4e8); color:var(--cbw-blue-deep); filter:none; }
.cbw--light .cbw-segment:active { background:#c4dde2; }
.cbw--light .cbw-edge polygon { stroke:var(--cbw-tan); stroke-width:1.5; }
.cbw--light .cbw-segment:is(:hover,:focus-visible) .cbw-edge polygon { stroke:var(--cbw-teal); stroke-width:2; }
.cbw--light .cbw-segment:focus-visible .cbw-label { outline-color:var(--cbw-blue-deep); }
.cbw--light .cbw-hub { background:radial-gradient(circle at 32% 28%,#fffefa,#f2eee7 78%); color:#42616a; border:1px solid #c8beb0; box-shadow:0 0 0 4px #d7ba9d24,0 6px 18px #08414d0d; }
.cbw--light .cbw-hub svg { fill:#537f8b; }
.cbw--light .cbw-hub small { color:#78736b; }
.cbw--links .cbw-hub { cursor:default; }
.cbw--links .cbw-hub:hover { transform:translate(-50%,-50%); border-color:#c8beb0; box-shadow:0 0 0 4px #d7ba9d24,0 6px 18px #08414d0d; }
.cbw--links .cbw-hub:hover svg { filter:none; }
@media(max-width:760px) { .cbw.cbw--links { padding:16px; } }

@media(prefers-reduced-motion:reduce) {
  .cbw *, .cbw *::before, .cbw *::after { transition:none!important; animation:none!important; }
  .cbw .cbw-segment:is(:hover,:focus-visible,:active,.is-preview,[aria-pressed="true"]) { transform:none; }
  .cbw--capabilities .cbw-segment .cbw-icon-circle { transform:none!important; }
  .cbw .cbw-hub:is(:hover,:focus-visible,:active) { transform:translate(-50%,-50%); }
  .cbw .cbw-hub:hover svg, .cbw .wheel-card-cta:is(:hover,:focus-visible) span { transform:none; }
}

/* ==========================================================================
   22) Insights Banner / 3D Motion / Cursor Physics
   ========================================================================== */

/* Insights HTML banner: scoped to avoid affecting Shorthand story styles.
   Tune the palette, height and letter opacity here. */
.jpm-insights-preview { margin: 0; background: #fff; }
.jpm-insights-banner {
  --insights-fall-distance: 600px;
  --insights-wave-width: 120px;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 37vw, 600px);
  padding: 88px max(24px, calc((100% - 1280px) / 2));
  overflow: hidden;
  color: #fff;
  background: url("https://media.shorthand.com/media/organisations/MXucp4CWyG/0NRGn2guDn/sh-unsplash_ompaz-dn-9i-2364x1576.webp") center bottom / cover no-repeat;
  font-family: "Amplitude", "Lato", Arial, sans-serif;
}
/* Clean centered type over the section background. */
.jpm-insights-content {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(24px, 3vw, 44px) clamp(24px, 4vw, 64px);
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: 0 2px 4px var(--black-25);
  text-align: center;
}
.jpm-insights-banner .jpm-insights-content h1 {
  margin: 0 0 8px;
  color: #fff;
  font: 300 clamp(48px, 5.4vw, 80px)/1.05 "Amplitude", "Lato", Arial, sans-serif;
  letter-spacing: -.035em;
}
.jpm-insights-banner .jpm-insights-content h1 em { font-style: italic; font-weight: 400; }
.jpm-insights-banner .jpm-insights-content h1 span { font-weight: 700; }
.jpm-insights-banner .jpm-insights-content p {
  margin: 0;
  color: #fff;
  font: 600 clamp(22px, 2.8vw, 40px)/1.25 "Amplitude", "Lato", Arial, sans-serif;
  text-wrap: balance;
}
.jpm-insights-letters { position: absolute; inset: 0; z-index: 0; pointer-events: none; perspective: 1000px; perspective-origin: 50% 45%; }
.jpm-insights-letter {
  position: absolute;
  top: -100px;
  color: #fff;
  opacity: var(--letter-opacity, .06);
  font-weight: 400;
  pointer-events: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1;
  user-select: none;
  animation: jpm-insights-fall var(--fall-duration) var(--fall-delay) linear infinite;
}
.jpm-insights-letter--cyan { color: #b9e5ef; }
/* Staggered curved paths form a flowing ribbon rather than straight rain. */
@keyframes jpm-insights-fall {
  0% { transform: translate3d(0, 0, var(--letter-depth, 0px)) rotate(-8deg); opacity: 0; }
  10%, 85% { opacity: var(--letter-opacity, .06); }
  12.5% { transform: translate3d(calc(var(--wave-sweep) * .7 + var(--letter-drift) * .125), calc(var(--insights-fall-distance) * .125), var(--letter-depth, 0px)) rotate(4deg); }
  25% { transform: translate3d(calc(var(--wave-sweep) + var(--letter-drift) * .25), calc(var(--insights-fall-distance) * .25), var(--letter-depth, 0px)) rotate(8deg); }
  37.5% { transform: translate3d(calc(var(--wave-sweep) * .7 + var(--letter-drift) * .375), calc(var(--insights-fall-distance) * .375), var(--letter-depth, 0px)) rotate(4deg); }
  50% { transform: translate3d(calc(var(--letter-drift) * .5), calc(var(--insights-fall-distance) * .5), var(--letter-depth, 0px)) rotate(-8deg); }
  62.5% { transform: translate3d(calc(var(--wave-sweep) * -.7 + var(--letter-drift) * .625), calc(var(--insights-fall-distance) * .625), var(--letter-depth, 0px)) rotate(-12deg); }
  75% { transform: translate3d(calc(var(--wave-sweep) * -1 + var(--letter-drift) * .75), calc(var(--insights-fall-distance) * .75), var(--letter-depth, 0px)) rotate(-8deg); }
  87.5% { transform: translate3d(calc(var(--wave-sweep) * -.7 + var(--letter-drift) * .875), calc(var(--insights-fall-distance) * .875), var(--letter-depth, 0px)) rotate(-4deg); }
  100% { transform: translate3d(var(--letter-drift), var(--insights-fall-distance), var(--letter-depth, 0px)) rotate(-8deg); opacity: 0; }
}

.jpm-insights-banner.is-motion-paused .jpm-insights-letter { animation-play-state: paused; }
@media (max-width: 600px) {
  .jpm-insights-banner { min-height: 400px; padding: 64px 24px; }
}

/* Darken the hosted image beneath the animated letter field. */
.jpm-insights-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, .5);
}
.jpm-insights-layer {
  position: absolute;
  inset: -24px;
  transform: translate3d(calc(var(--insights-pointer-x, 0px) * var(--depth)), calc(var(--insights-pointer-y, 0px) * var(--depth)), 0);
  --wave-sweep: calc(var(--insights-wave-width) * var(--depth));
  transform-style: preserve-3d;
  /* JS eases the shared cursor position for light and glyphs together. */
}
.jpm-insights-layer--far { --depth: .25; }
.jpm-insights-layer--middle { --depth: .65; }
.jpm-insights-layer--near { --depth: 1.4; }
/* Depth is expressed through perspective, tilt, size, and focus. */
.jpm-insights-layer--near .jpm-insights-glyph { font-weight: 500; }
.jpm-insights-glyph { text-shadow: none; }
@media (max-width: 600px) {
  .jpm-insights-layer--near .jpm-insights-letter { font-size: min(24px, 6vw) !important; }
}

/* Separate glyph tilt from the wave path so both motions stay smooth. */
.jpm-insights-glyph {
  display: inline-block;
  transform-origin: 50% 50%;
  animation: jpm-insights-glyph-turn calc(var(--fall-duration) * .7) var(--fall-delay) ease-in-out infinite alternate;
}
/* Distant letters use a static tilt to reduce compositing work on VMs. */
.jpm-insights-layer--far .jpm-insights-glyph {
  animation: none;
  transform: perspective(600px) rotateY(var(--glyph-tilt-y));
}
@keyframes jpm-insights-glyph-turn {
  0% { transform: perspective(600px) rotateX(var(--glyph-tilt-x)) rotateY(var(--glyph-tilt-y)) translateZ(-8px); }
  50% { transform: perspective(600px) rotateX(calc(var(--glyph-tilt-x) * -.5)) rotateY(calc(var(--glyph-tilt-y) * -.35)) translateZ(12px); }
  100% { transform: perspective(600px) rotateX(calc(var(--glyph-tilt-x) * -1)) rotateY(calc(var(--glyph-tilt-y) * -1)) translateZ(-8px); }
}
.jpm-insights-banner.is-motion-paused .jpm-insights-glyph { animation-play-state: paused; }

/* Physics displacement is independent of the wave path and 3D glyph tilt. */
.jpm-insights-particle { display: inline-block; }

/* ==========================================================================
   23) October 14 Newsletter Overrides
   ========================================================================== */

/* October 14 newsletter: stronger silver capability surfaces. */
#section-gajGIRgOy8 .GridCard {
  background: radial-gradient(ellipse at 20% 0%, #fff 0%, transparent 60%),
    linear-gradient(145deg, #eef1f4 0%, #dce2e8 55%, #cbd3dc 100%) !important;
  border: 1px solid #b8c3ce !important;
  box-shadow: 0 10px 26px var(--black-15), inset 0 1px 0 #fff;
}
#section-gajGIRgOy8 .GridCard__background { display: none; }
#section-gajGIRgOy8 .GridCard .Theme-Layer-BodyText--inner,
#section-gajGIRgOy8 .GridCard :is(h2, p, span, strong) { color: #243746 !important; }
#section-gajGIRgOy8 .GridCard .Theme-Layer-BodyText-Divider { background: #a9b7c5; }

/* The three event cards use self-contained gradients instead of exported images. */
#article:has(#section-YWZhrdUqlk) > section:has(> .sh-event) > .sh-event {
  --event-ink: #fff;
  --event-rule: rgba(255, 255, 255, .25);
  --event-pill: rgba(255, 255, 255, .10);
  --event-accent: #62c5da;
  border: 1px solid #38728c;
  border-top: 4px solid var(--blue);
  background:
    radial-gradient(ellipse at 95% 0%, #2b8da7 0%, transparent 55%),
    radial-gradient(ellipse at 0% 100%, #07384f 0%, transparent 65%),
    linear-gradient(145deg, #126781, #005075 55%, #063249) !important;
}
#article:has(#section-YWZhrdUqlk) > section:has(> .sh-event) > .sh-event:nth-child(2 of .sh-event) {
  --event-ink: #243746;
  --event-rule: #b1bdc8;
  --event-pill: rgba(255, 255, 255, .45);
  --event-accent: var(--blue);
  border-color: #b6c1cd;
  border-top-color: #8096ab;
  background:
    radial-gradient(ellipse at 10% 0%, #fff 0%, transparent 60%),
    radial-gradient(ellipse at 100% 100%, #bcc9d5 0%, transparent 65%),
    linear-gradient(145deg, #eef2f5, #dce4eb 60%, #c7d2dc) !important;
}
#article:has(#section-YWZhrdUqlk) > section:has(> .sh-event) > .sh-event:nth-child(3 of .sh-event) {
  --event-ink: #3d3026;
  --event-rule: #bda68e;
  --event-pill: rgba(255, 255, 255, .35);
  --event-accent: var(--dark-tan);
  border-color: #c0a88e;
  border-top-color: var(--dark-tan);
  background:
    radial-gradient(ellipse at 10% 0%, #fcf8f0 0%, transparent 60%),
    radial-gradient(ellipse at 100% 100%, #c8aa8b 0%, transparent 65%),
    linear-gradient(145deg, #f0e6d8, #e2ceb8 60%, var(--tan)) !important;
}
#article:has(#section-YWZhrdUqlk) .sh-event > .Theme-BackgroundMedia { display: none !important; }
#article:has(#section-YWZhrdUqlk) .sh-event .Theme-Layer-TextBlock-Container {
  --overlay-opacity: 0 !important;
  background: none !important;
}
#article:has(#section-YWZhrdUqlk) .sh-event .Theme-Layer-TextBlock-Underlay,
#article:has(#section-YWZhrdUqlk) .sh-event .Theme-Layer-TextBlock-Inner { background: none !important; }
#article:has(#section-YWZhrdUqlk) .sh-event .Theme-Title :is(h2, p, span, strong, em) {
  color: var(--event-ink) !important;
  text-shadow: none;
}
#article:has(#section-YWZhrdUqlk) .sh-event .Theme-Title h2 {
  background: linear-gradient(90deg, var(--event-accent) 0 4.5rem, var(--event-rule) 4.5rem 100%) bottom / 100% 3px no-repeat;
}
#article:has(#section-YWZhrdUqlk) .sh-event .Theme-Title h2 + p {
  background: var(--event-pill);
  border-color: var(--event-rule);
}
#article:has(#section-YWZhrdUqlk) .sh-event .Theme-Title h2 + p::before {
  background: var(--event-accent);
  box-shadow: none;
}
#article:has(#section-YWZhrdUqlk) .sh-event .Theme-Layer-BodyText-Divider { background: var(--event-rule); }
#article:has(#section-YWZhrdUqlk) .sh-event .Theme-Title p:has(> span > strong) { border-color: var(--event-rule); }
#article:has(#section-YWZhrdUqlk) .sh-event .InlineElement--Button:focus-visible { outline-color: var(--event-ink); }

/* October 14 capability icons must remain visible despite export animation state. */
#section-gajGIRgOy8 .GridCard .InlineMedia--image__inner {
  opacity: 1 !important;
  transform: none !important;
}
#section-gajGIRgOy8 .GridCard .newsletter-update-placeholder { text-align: center !important; margin-inline: auto; }

/* October newsletter: primary CTA spacing and equal-height event flow. */
#article a.InlineElement--Button[href="https://jpmcinternal.jpmorgan.com/c8a7fcb3-e497-4cf2-854b-80518c798e8a/key-innovations/celeris/index.html" i] {
  margin-top: 1.5rem;
}
#article a.InlineElement--Button[href="https://jpmcinternal.jpmorgan.com/workflow-intelligence/index.html" i] {
  margin-top: 1rem;
  letter-spacing: .025em;
  text-transform: none !important;
}
#article:has(#section-YWZhrdUqlk) > section:has(> .sh-event) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
}
@media (min-width: 1000px) {
  #article:has(#section-YWZhrdUqlk) > section:has(> .sh-event) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
#article:has(#section-YWZhrdUqlk) > section:has(> .sh-event) > .sh-event {
  display: flex !important;
  flex-direction: column;
  align-self: stretch !important;
}
#article:has(#section-YWZhrdUqlk) .sh-event .Theme-Layer-TextBlock {
  position: relative !important;
  display: block !important;
  flex: 1 0 auto;
}
#article:has(#section-YWZhrdUqlk) .sh-event :is(
  .Theme-Layer-TextBlock-Container,
  .Theme-Layer-TextBlock-Underlay,
  .Theme-Layer-TextBlock-Inner,
  .Theme-Layer-TextBlock-Inner > div,
  div.Theme-Title
) {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0;
  height: auto !important;
  min-height: 0 !important;
  margin-inline: 0 !important;
}
#article:has(#section-YWZhrdUqlk) .sh-event .Theme-Layer-TextBlock-Container { align-items: stretch; }
#article:has(#section-YWZhrdUqlk) .sh-event .Theme-Title > * { flex-shrink: 0; }
#article:has(#section-YWZhrdUqlk) .sh-event .Theme-Title h2 + p { align-self: flex-start; }
/* Direct card footers avoid Shorthand's nested text-wrapper height rules. */
#article:has(#section-YWZhrdUqlk) .sh-event > .sh-event-cta {
  flex: 0 0 auto;
  margin-top: auto;
  padding: calc(var(--event-gap) + .25rem) var(--event-inset) 0;
  position: relative;
  z-index: 2;
}
#article:has(#section-YWZhrdUqlk) .sh-event > .sh-event-cta .InlineHTML { margin: 0; }
#article:has(#section-YWZhrdUqlk) .sh-event .InlineElement--Button { min-height: 52px; box-sizing: border-box; }

/* One newsletter masthead panel contains title, subtitle, rule, and issue line. */
#section-September-2026-96et8G41BH .Theme-Layer-TextBlock-Container { --overlay-opacity: 0 !important; }
#section-September-2026-96et8G41BH .newsletter-masthead-content {
  padding: clamp(28px, 3vw, 48px) clamp(20px, 4vw, 56px);
}
#section-September-2026-96et8G41BH .newsletter-masthead-content > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#section-September-2026-96et8G41BH .newsletter-masthead-content .Theme-StoryTitle {
  margin: 0 !important;
  padding: 0 !important;
}
#section-September-2026-96et8G41BH .newsletter-masthead-content .Theme-StoryTitle + .Theme-StoryTitle { margin-top: .5rem !important; }
#section-September-2026-96et8G41BH .newsletter-masthead-content .InlineElement--Divider__container {
  width: min(75%, 40rem);
  margin: clamp(20px, 2vw, 28px) auto 12px !important;
  padding: 0 !important;
}
#section-September-2026-96et8G41BH .newsletter-masthead-content .Theme-Layer-BodyText-Divider {
  width: 100%;
  height: 1px;
  margin: 0 !important;
  border: 0 !important;
  background: #fff !important;
  opacity: .3;
}
#section-September-2026-96et8G41BH .newsletter-masthead-content .Theme-Byline,
#section-September-2026-96et8G41BH .newsletter-masthead-content .Theme-Byline p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5;
}

/* Newsletter masthead: keep native title and byline wrappers in one compact
   stack, including exports whose section ID changes each month. CSS only. */
#article .Theme-TitleSection[id^="section-September-2026-"]:has(.Theme-Byline) > .Layer--one {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0 !important;
  box-sizing: border-box;
  width: min(calc(100% - 48px), 1100px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: auto !important;
  padding: clamp(24px, 3vw, 40px) !important;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#article .Theme-TitleSection[id^="section-September-2026-"]:has(.Theme-Byline) > .Layer--one .Theme-Layer-TextBlock-Container {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  --overlay-opacity: 0 !important;
}
#article .Theme-TitleSection[id^="section-September-2026-"]:has(.Theme-Byline) .Theme-Layer-TextBlock-Underlay,
#article .Theme-TitleSection[id^="section-September-2026-"]:has(.Theme-Byline) .Theme-Layer-TextBlock-Inner,
#article .Theme-TitleSection[id^="section-September-2026-"]:has(.Theme-Byline) .Theme-Layer-TextBlock-Inner > div {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}
#article .Theme-TitleSection[id^="section-September-2026-"]:has(.Theme-Byline) .Theme-StoryTitle {
  margin: 0 !important;
  padding: 0 !important;
}
#article .Theme-TitleSection[id^="section-September-2026-"]:has(.Theme-Byline) .Theme-StoryTitle + .Theme-StoryTitle { margin-top: 8px !important; }
#article .Theme-TitleSection[id^="section-September-2026-"]:has(.Theme-Byline) .InlineElement--Divider__container {
  margin: 20px auto 12px !important;
  padding: 0 !important;
  width: min(75%, 40rem);
}
#article .Theme-TitleSection[id^="section-September-2026-"]:has(.Theme-Byline) .Theme-Layer-BodyText-Divider {
  margin: 0 !important;
  opacity: .3;
}
#article .Theme-TitleSection[id^="section-September-2026-"]:has(.Theme-Byline) .Theme-Byline,
#article .Theme-TitleSection[id^="section-September-2026-"]:has(.Theme-Byline) .Theme-Byline p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5;
  text-align: center;
}

/* October 14 capabilities intro: a composed reading width and paragraph rhythm. */
#section-gajGIRgOy8 .Layout > div:has(> .GridsSection__title) {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}
#section-gajGIRgOy8 .GridsSection__title {
  box-sizing: border-box;
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px) clamp(28px, 3vw, 44px);
}
#section-gajGIRgOy8 .GridsSection__title .Theme-Layer-BodyText,
#section-gajGIRgOy8 .GridsSection__title .Theme-Layer-BodyText--inner {
  margin: 0;
  padding: 0;
}
#section-gajGIRgOy8 .GridsSection__title .Theme-Layer-BodyText--inner p {
  margin: 0;
  padding: 0;
  color: #243746;
  font-size: clamp(20px, 1.8vw, 26px) !important;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.01em;
  text-align: center;
  text-wrap: balance;
}
#section-gajGIRgOy8 .GridsSection__title .Theme-Layer-BodyText--inner p + p {
  margin-top: 1rem;
  color: #52616b;
  font-size: clamp(16px, 1.3vw, 19px) !important;
  line-height: 1.6;
  letter-spacing: 0;
}

/* Newsletter contact CTA: white label and a contrasting teal surface. */
#article:has(.Theme-TitleSection[id^="section-September-2026-"]) a.InlineElement--Button[data-subject="Get in touch with our team"],
#article:has(.Theme-TitleSection[id^="section-September-2026-"]) a.InlineElement--Button[data-subject="Get in touch with our team"]:is(:link, :visited, :hover, :focus, :active),
#article:has(.Theme-TitleSection[id^="section-September-2026-"]) a.InlineElement--Button[data-subject="Get in touch with our team"] :is(span, strong, em) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
#article:has(.Theme-TitleSection[id^="section-September-2026-"]) a.InlineElement--Button[data-subject="Get in touch with our team"] {
  background: #007b93 !important;
  border: 1px solid #71bed0 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
#article:has(.Theme-TitleSection[id^="section-September-2026-"]) a.InlineElement--Button[data-subject="Get in touch with our team"]:hover { background: #00677d !important; }
#article:has(.Theme-TitleSection[id^="section-September-2026-"]) a.InlineElement--Button[data-subject="Get in touch with our team"]:focus-visible { outline: 2px solid #fff !important; outline-offset: 4px; }

/* Homepage contact CTA: retain white lettering on its black background. */
#section-Contact-R0PxBxSwdf a.InlineElement--Button[data-subject="Get in touch with our team"],
#section-Contact-R0PxBxSwdf a.InlineElement--Button[data-subject="Get in touch with our team"]:is(:link, :visited, :hover, :focus, :active),
#section-Contact-R0PxBxSwdf a.InlineElement--Button[data-subject="Get in touch with our team"] :is(span, strong, em) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ==========================================================================
   24) Meet Celeris Article / Reading Rhythm / Image Viewer
   ========================================================================== */
.aai-editorial { padding-block: clamp(40px, 5vw, 80px) !important; }
.aai-editorial .Layout { width: 100%; max-width: none; padding-inline: clamp(24px, 6vw, 88px); box-sizing: border-box; }
.aai-editorial .Layout__row { margin-inline: 0; }
.aai-editorial .Theme-Column {
  flex: 0 1 70rem !important;
  width: 100% !important;
  max-width: 70rem !important;
  margin-inline: auto !important;
  padding-inline: 0;
}
.aai-editorial .Theme-Layer-BodyText--inner { color: #344650; }
.aai-editorial .Theme-Layer-BodyText--inner > p {
  margin-block: 0 1.25rem !important;
  font-size: clamp(18px, 1.3vw, 20px) !important;
  line-height: 1.75;
}
.aai-editorial .Theme-Layer-BodyText--inner p span { color: inherit !important; font-size: inherit !important; }
.aai-editorial .Theme-Layer-BodyText--inner > .aai-article-title {
  max-width: 20ch;
  margin-bottom: 1rem !important;
  color: #153746;
  font-size: clamp(32px, 3.4vw, 48px) !important;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.aai-editorial :is(.aai-article-title, .aai-article-heading, .aai-article-insight),
.aai-editorial :is(.aai-article-title, .aai-article-heading, .aai-article-insight) :is(strong, b, span) {
  font-weight: 300 !important;
}
.aai-editorial .Theme-Layer-BodyText--inner > .aai-article-deck {
  color: #526775;
  font-size: clamp(20px, 1.7vw, 24px) !important;
  line-height: 1.5;
  margin-bottom: 1.5rem !important;
}
.aai-editorial .aai-article-author { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; margin: 0 0 2.25rem; padding-bottom: 1.5rem; border-bottom: 1px solid #dce4e8; }
.aai-editorial .aai-article-author > p { margin: 0 !important; color: #526775; font-size: 16px !important; }
.aai-editorial .aai-article-portrait { --portrait-size: clamp(112px, 12vw, 144px); width: var(--portrait-size) !important; flex: 0 0 auto; margin: 0 !important; }
.aai-editorial .aai-article-portrait .InlineMedia--image__inner { width: var(--portrait-size) !important; height: var(--portrait-size) !important; max-width: none !important; padding: 0 !important; border-radius: 20px !important; opacity: 1 !important; transform: none !important; }
.aai-editorial .aai-article-portrait img { width: var(--portrait-size) !important; height: var(--portrait-size) !important; object-fit: cover; }
.aai-editorial .aai-article-portrait.is-unavailable { display: block; }
.aai-editorial .aai-article-portrait-status { position: absolute; inset: 0; display: grid; place-items: center; width: var(--portrait-size); height: var(--portrait-size); border: 1px solid #dce4e8; border-radius: 20px; background: #edf3f5; color: #557481; font: 300 clamp(32px, 4vw, 40px)/1 "Amplitude", Arial, sans-serif; }
.aai-editorial .aai-article-portrait { position: relative; min-height: var(--portrait-size); }
.aai-editorial .aai-article-portrait img[hidden] { display: none !important; }
.aai-editorial .aai-article-portrait-status[hidden] { display: none; }
.aai-editorial .Theme-Layer-BodyText--inner > .aai-article-heading {
  margin: 2.5rem 0 1rem !important;
  color: #005075;
  font-size: clamp(23px, 2vw, 28px) !important;
  line-height: 1.3;
  text-wrap: balance;
}
.aai-editorial .Theme-Layer-BodyText--inner > .aai-article-insight {
  margin-block: 1.75rem !important;
  padding: 18px 24px;
  border-left: 3px solid #1a7b99;
  background: #f3f7f9;
  color: #153746;
}
.aai-editorial .Theme-Layer-BodyText--inner > p:empty,
.aai-editorial .Theme-Layer-BodyText-Spacer,
.aai-editorial .aai-article-empty { display: none !important; }
.aai-editorial .aai-article-figure { margin: 2rem 0 !important; width: 100%; max-width: 100%; }
.aai-editorial .aai-article-figure .InlineMedia--image__inner { opacity: 1 !important; transform: none !important; border-radius: 8px !important; border: 1px solid #dce4e8; }
.aai-editorial .aai-article-figure.is-ready .InlineMedia--image__inner { cursor: zoom-in; }
/* Reserve a compact status row rather than the full image height until loaded. */
.aai-editorial .aai-article-figure:not(.is-ready) .InlineMedia--image__inner { display: none !important; }
.aai-editorial .aai-article-media-status { display: block; padding: 16px 20px; border: 1px solid #dce4e8; border-radius: 8px; background: #f5f7f8; color: #637582; font: 400 14px/1.5 Arial, sans-serif; }
.aai-editorial .is-ready > .aai-article-media-status { display: none; }
.aai-editorial .aai-article-expand { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; border: 0; background: none; color: #005075; font: 400 14px/1.4 Arial, sans-serif; cursor: zoom-in; text-decoration: underline; text-underline-offset: 3px; }
.aai-editorial .aai-article-figure:not(.is-ready) .aai-article-expand { display: none; }
.aai-editorial .aai-article-expand:focus-visible,
.aai-image-dialog button:focus-visible { outline: 2px solid #1a7b99; outline-offset: 4px; }
.aai-image-dialog { box-sizing: border-box; width: min(96vw, 1500px); max-width: 96vw; max-height: 94vh; padding: 52px 24px 20px; border: 1px solid #dce4e8; border-radius: 12px; background: #fff; color: #243746; box-shadow: 0 24px 80px #0005; }
.aai-image-dialog::backdrop { background: #07151dd9; }
.aai-image-dialog img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; }
.aai-image-dialog .aai-image-close { position: absolute; top: 8px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f0f4f6; color: #243746; font: 400 28px/1 Arial, sans-serif; cursor: pointer; }

/* ==========================================================================
   25) Applied AI Hub / Featured Conversations / Homepage Module
   ========================================================================== */
.aai-hub-preview { margin: 0; background: #f4f2ef; }
.aai-hub-preview__nav { position: relative; inset: auto; height: auto; display: flex; justify-content: space-between; gap: 24px; padding: 20px clamp(24px, 5vw, 80px); border-bottom: 1px solid #e0ded9; background: #fff; font: 500 13px/1.5 "Helvetica Neue", Arial, sans-serif; }
.aai-hub-preview__nav a { color: #173b4a; text-decoration: none; }
.aai-hub-preview__nav span { color: #71808a; font-weight: 400; }
.aai-hub {
  --hub-ink: #173642;
  --hub-blue: #005075;
  --hub-teal: #1a7b99;
  --hub-muted: #63757e;
  --hub-line: #dde3e4;
  --hub-paper: #fff;
  position: relative;
  isolation: isolate;
  padding: clamp(40px, 5vw, 72px) clamp(20px, 4.5vw, 72px);
  background: #f4f2ef;
  color: var(--hub-ink);
  font: 400 16px/1.5 "Amplitude", "Helvetica Neue", Arial, sans-serif;
  text-align: left;
}
.aai-hub *, .aai-hub *::before, .aai-hub *::after { box-sizing: border-box; }
.aai-hub [hidden] { display: none !important; }
.aai-hub :is(h2, h3, p, blockquote) { margin: 0; padding: 0; color: inherit; font-family: inherit; }
.aai-hub a { color: inherit; text-decoration: none; }
.aai-hub button { appearance: none; font-family: inherit; cursor: pointer; }
.aai-hub button, .aai-hub a { -webkit-tap-highlight-color: transparent; }
.aai-hub :is(a, button):focus-visible { outline: 2px solid var(--hub-teal); outline-offset: 5px; }
.aai-hub svg { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.aai-hub__inner { max-width: 1440px; margin-inline: auto; }
.aai-hub__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 30px; }
.aai-hub .aai-hub__eyebrow { display: flex; align-items: center; gap: 10px; color: var(--hub-blue); font-size: 14px; font-weight: 600; letter-spacing: .15em; line-height: 1.5; text-transform: uppercase; }
.aai-hub__eyebrow > span { width: 6px; height: 6px; background: var(--hub-teal); border-radius: 50%; }
.aai-hub .aai-hub__heading h2 { margin: 9px 0 10px; font-size: clamp(38px, 4vw, 56px); font-weight: 300; line-height: 1.08; letter-spacing: -.035em; }
.aai-hub__heading h2 em { color: var(--hub-teal); font-weight: 300; }
.aai-hub .aai-hub__intro { color: var(--hub-muted); font-size: 19px; line-height: 1.5; }
.aai-hub__all { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; padding: 10px 0; color: var(--hub-blue) !important; border-bottom: 1px solid #b2c6cf; font-size: 17px; font-weight: 500; }
.aai-hub__all svg { width: 18px; height: 18px; }
.aai-hub__layout { display: grid; grid-template-columns: minmax(280px, .38fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.aai-hub__sidebar { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.aai-hub__spotlight { position: relative; display: flex; flex: 1; flex-direction: column; padding: clamp(22px, 2.5vw, 34px); border: 1px solid #e3e2dd; border-radius: 14px; background: var(--hub-paper); }
.aai-hub__card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aai-hub__card-top .aai-hub__eyebrow { font-size: 12px; letter-spacing: .12em; }
.aai-hub__read-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #e4e8e9; border-radius: 50%; color: #7c969e; }
.aai-hub__read-icon svg { width: 17px; height: 17px; }
.aai-hub .aai-hub__spotlight h3 { margin: 20px 0 14px; color: #193c4a; font-size: clamp(32px, 3vw, 44px); font-weight: 300; line-height: 1.08; letter-spacing: -.025em; }
.aai-hub .aai-hub__spotlight blockquote { padding: 0; border: 0; color: var(--hub-muted); font-size: 21px; font-style: normal; font-weight: 300; line-height: 1.45; }
.aai-hub .aai-hub__byline { display: flex; align-items: center; gap: 10px; margin: 22px 0; font-size: 16px; line-height: 1.4; }
.aai-hub__author-mark { position: relative; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 10px; background: #eaf1f3; color: #416a79; font-size: 14px; letter-spacing: .03em; }
.aai-hub__author-mark img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.aai-hub__author-mark img[hidden] { display: none; }
.aai-hub__byline strong { display: block; font-weight: 500; }
.aai-hub__byline small { display: block; margin-top: 2px; color: var(--hub-muted); font-size: 15px; }
.aai-hub__text-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid #e5eaec; color: var(--hub-blue) !important; font-size: 16px; font-weight: 500; }
.aai-hub__text-link svg { width: 18px; height: 18px; }
.aai-hub__resources { padding: 22px 24px 8px; border: 1px solid #e3e2dd; border-radius: 14px; background: #fbfaf8; }
.aai-hub .aai-hub__resources h3 { font-size: 19px; font-weight: 400; line-height: 1.3; letter-spacing: -.01em; }
.aai-hub__resources .aai-hub__card-top { display: block; margin-bottom: 8px; }
.aai-hub__tiny-label { display: block; margin-top: 4px; color: #8b9597; font-size: 14px; letter-spacing: .04em; }
.aai-hub__resource { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid #e7e7e2; }
.aai-hub__resource:first-of-type { border-top: 0; }
.aai-hub__resource-icon { display: grid; place-items: center; width: 30px; flex-shrink: 0; color: #5b899a; }
.aai-hub__resource-icon svg { width: 28px; height: 28px; }
.aai-hub__resource-icon svg path[stroke] { stroke: currentColor; }
.aai-hub__resource strong { display: block; color: var(--hub-blue); font-size: 17px; font-weight: 500; }
.aai-hub__resource small { display: block; margin-top: 3px; color: var(--hub-muted); font-size: 14px; line-height: 1.4; }
.aai-hub__resource-arrow { margin-left: auto; color: #7a969f; }
.aai-hub__resource-arrow svg { width: 16px; height: 16px; }
.aai-hub__watch { min-width: 0; display: flex; flex-direction: column; }
.aai-hub__stage { position: relative; overflow: hidden; aspect-ratio: 16/9; min-height: 420px; border-radius: 14px; background: #0c2633; }
.aai-hub__feature { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; animation: aai-hub-reveal 360ms ease-out both; }
.aai-hub__poster { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 68% center; }
.aai-hub__shade { position: absolute; inset: 0; background: linear-gradient(90deg, #0a2531 0%, rgba(10,37,49,.99) 36%, rgba(10,37,49,.55) 56%, transparent 78%), linear-gradient(0deg, #05151d66, transparent 35%); }
.aai-hub__feature-top { position: absolute; top: 24px; right: 24px; left: 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.aai-hub__series { padding-left: 10px; border-left: 2px solid #62c5da; color: #d3e8ef; font-size: 12px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; }
.aai-hub__preview-label { padding: 5px 9px; border: 1px solid #ffffff45; border-radius: 4px; background: #061c2880; color: #e3edf0; font-size: 12px; letter-spacing: .04em; }
.aai-hub__feature-copy { position: absolute; left: clamp(24px, 3vw, 44px); bottom: clamp(28px, 3vw, 46px); width: 45%; color: #fff; }
.aai-hub__feature-kicker { display: block; margin-bottom: 14px; color: #86b5c5; font-size: 12px; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; }
.aai-hub .aai-hub__feature h3 { max-width: 18ch; color: #fff; font-size: clamp(30px, 3.1vw, 46px); font-weight: 300; letter-spacing: -.025em; line-height: 1.08; text-wrap: balance; }
.aai-hub .aai-hub__feature-copy p { max-width: 27ch; margin-top: 18px; color: #bed2da; font-size: 16px; line-height: 1.55; }
.aai-hub__feature-copy p strong { font-weight: 500; color: #e4edf1; }
.aai-hub__play { display: inline-flex; align-items: center; gap: 11px; margin-top: 25px; padding: 0; border: 0; background: none; color: #fff; font-size: 16px; font-weight: 400; line-height: 1.3; text-align: left; }
.aai-hub__play-icon { display: grid; place-items: center; width: 35px; height: 35px; flex-shrink: 0; border: 1px solid #ffffff80; border-radius: 50%; transition: background 200ms ease, transform 200ms ease; }
.aai-hub__play-icon svg { width: 13px; height: 13px; margin-left: -2px; }
.aai-hub__play:hover .aai-hub__play-icon { background: #ffffff25; transform: scale(1.07); }
.aai-hub__story-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.aai-hub__story { position: relative; display: flex; align-items: center; gap: 11px; min-width: 0; padding: 10px; border: 1px solid transparent; border-radius: 9px; background: #eae7e2; color: var(--hub-ink); text-align: left; transition: background 180ms ease, border-color 180ms ease; }
.aai-hub__story.is-selected { border-color: #acc5cf; background: #fff; box-shadow: 0 3px 12px #17364206; }
.aai-hub__story:hover { border-color: #bdcdd3; background: #fff; }
.aai-hub__story-photo { position: relative; display: block; width: 68px; height: 64px; overflow: hidden; flex-shrink: 0; border-radius: 5px; background: #103341; }
.aai-hub__story-photo img { position: absolute; right: -28px; top: -1px; width: 170px; height: 95px; max-width: none; object-fit: cover; }
.aai-hub__story-copy { display: block; min-width: 0; }
.aai-hub__story-type { display: block; margin-bottom: 6px; color: #6d858e; font-size: 12px; font-weight: 400; letter-spacing: .03em; line-height: 1.3; }
.aai-hub__story-type > span { color: #8da0a7; }
.aai-hub__story-name { display: block; font-size: 16px; font-weight: 500; line-height: 1.3; }
.aai-hub__story-indicator { display: none; margin-left: auto; color: var(--hub-teal); }
.aai-hub__story-indicator svg { width: 12px; height: 12px; }
.aai-hub__story.is-selected .aai-hub__story-indicator { display: block; }
.aai-hub__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; }
.aai-hub__arrows { display: flex; gap: 6px; }
.aai-hub__control { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #d2d9d9; border-radius: 50%; background: transparent; color: #45616c; }
.aai-hub__control:hover { background: #fff; border-color: #93b5c1; }
.aai-hub__control svg { width: 14px; height: 14px; }
.aai-hub__control--previous svg { transform: rotate(180deg); }
.aai-hub .aai-hub__counter { display: flex; flex-shrink: 0; white-space: nowrap; align-items: center; gap: 11px; color: #7a8b92 !important; font-size: 14px; font-variant-numeric: tabular-nums; }
.aai-hub__counter > span:first-child { color: var(--hub-blue); font-weight: 600; }
.aai-hub__counter-line { display: inline-block; padding-inline: 3px; color: #8da0a7; }
.aai-hub__controls-label { color: #879398; font-size: 14px; white-space: nowrap; }
.aai-hub__reading { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; margin-top: 28px; padding-top: 24px; border-top: 1px solid #d9dedc; }
.aai-hub__reading-label { color: #7f8a8a; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.aai-hub__reading a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-right: 8px; }
.aai-hub__reading a + a { padding-left: 24px; border-left: 1px solid #d9dedc; }
.aai-hub__reading small { display: block; margin-bottom: 4px; color: var(--hub-muted); font-size: 14px; }
.aai-hub__reading strong { display: block; color: var(--hub-blue); font-size: 18px; font-weight: 400; }
.aai-hub__reading svg { width: 18px; height: 18px; color: #718e9b; }
.aai-hub__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes aai-hub-reveal { from { opacity: .4; } to { opacity: 1; } }
/* The native dialog keeps keyboard focus contained and supports Escape. */
.aai-hub-dialog { width: min(94vw, 1000px); max-width: 94vw; max-height: 92vh; padding: 0; overflow: auto; border: 1px solid #3e5b67; border-radius: 12px; background: #0a2531; color: #fff; font-family: "Amplitude", "Helvetica Neue", Arial, sans-serif; box-shadow: 0 32px 100px #0007; }
.aai-hub-dialog::backdrop { background: #04131ce6; }
.aai-hub-dialog__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px; }
.aai-hub-dialog__eyebrow { margin: 0 0 5px; color: #84b4c5; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.aai-hub-dialog__title { margin: 0; color: #fff; font-size: clamp(20px, 3vw, 28px); font-weight: 300; line-height: 1.2; }
.aai-hub-dialog__close { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid #ffffff50; border-radius: 50%; background: transparent; color: #fff; font: 300 26px/1 Arial, sans-serif; cursor: pointer; }
.aai-hub-dialog :is(video, iframe, img) { display: block; width: 100%; max-height: 65vh; aspect-ratio: 16/9; object-fit: contain; border: 0; background: #041720; }
.aai-hub-dialog__note { margin: 0; padding: 20px 24px 24px; color: #b7cdd7; font-size: 18px; line-height: 1.5; }
.aai-hub-dialog__note a { display: inline-block; margin-top: 12px; color: #fff; text-underline-offset: 4px; }
.aai-hub-dialog button:focus-visible, .aai-hub-dialog a:focus-visible { outline: 2px solid #62c5da; outline-offset: 4px; }
/* Balance the columns at their bottom edge without splitting the carousel
   into shared rows: thumbnails and controls stay together below the feature. */
@media (min-width: 901px) {
  .aai-hub__watch { align-self: stretch; }
  .aai-hub__stage { flex: 1 0 auto; }
  .aai-hub__story-rail, .aai-hub__controls { flex-shrink: 0; }
}
@media (min-width: 1600px) { .aai-hub__feature h3 { font-size: 46px; } }
@media (max-width: 1150px) {
  .aai-hub { padding-inline: 28px; }
  .aai-hub__layout { grid-template-columns: 270px minmax(0, 1fr); gap: 20px; }
  .aai-hub__story-photo { width: 48px; height: 58px; }
  .aai-hub__story-photo img { right: -16px; }
  .aai-hub__story { gap: 8px; padding: 8px; }
  .aai-hub__story-name { font-size: 15px; }
  .aai-hub__story-indicator { display: none !important; }
  .aai-hub__feature-copy { width: 48%; }
  .aai-hub .aai-hub__feature h3 { font-size: 30px; }
  .aai-hub__feature-kicker { font-size: 12px; }
  .aai-hub__resources { padding-inline: 18px; }
}
@media (max-width: 900px) {
  .aai-hub__layout { grid-template-columns: minmax(0, 1fr); }
  .aai-hub__watch { grid-row: 1; }
  .aai-hub__sidebar { display: grid; grid-template-columns: 1fr 1fr; }
  .aai-hub__stage { min-height: 0; }
  .aai-hub__feature-copy { width: 43%; }
  .aai-hub__spotlight { padding: 24px; }
  .aai-hub__resources { padding: 24px 24px 8px; }
  .aai-hub__reading { grid-template-columns: 1fr 1fr; }
  .aai-hub__reading-label { grid-column: 1/-1; }
  .aai-hub__reading a + a { padding-left: 24px; }
  .aai-hub__story-photo { width: 76px; }
  .aai-hub__story-photo img { right: 0; }
}
@media (max-width: 560px) {
  .aai-hub { padding: 32px 18px; }
  .aai-hub-preview__nav { padding: 14px 18px; font-size: 15px; }
  .aai-hub-preview__nav > a:first-child span { display: none; }
  .aai-hub__heading { display: block; margin-bottom: 22px; }
  .aai-hub .aai-hub__intro { font-size: 17px; max-width: 33ch; }
  .aai-hub__all { margin-top: 16px; padding-bottom: 6px; font-size: 16px; }
  .aai-hub__stage { aspect-ratio: 4/3; min-height: 360px; }
  .aai-hub__poster { object-position: 62% center; }
  .aai-hub__shade { background: linear-gradient(90deg, rgba(10,37,49,.99), rgba(10,37,49,.9) 40%, rgba(10,37,49,.2) 100%); }
  .aai-hub__feature-top { top: 18px; left: 20px; right: 18px; }
  .aai-hub__series, .aai-hub__preview-label { font-size: 12px; }
  .aai-hub__feature-copy { left: 20px; bottom: 24px; width: 61%; }
  .aai-hub .aai-hub__feature h3 { font-size: clamp(23px, 6vw, 30px); }
  .aai-hub__feature-kicker { display: none; }
  .aai-hub .aai-hub__feature-copy p { margin-top: 12px; font-size: 15px; }
  .aai-hub__play { margin-top: 16px; font-size: 15px; }
  .aai-hub__play-icon { width: 30px; height: 30px; }
  .aai-hub__story-rail { gap: 6px; margin-top: 10px; }
  .aai-hub__story { display: block; padding: 6px; border-radius: 7px; }
  .aai-hub__story-photo { width: 100%; height: 54px; margin-bottom: 8px; }
  .aai-hub__story-photo img { right: -5px; top: -6px; width: 176px; height: 99px; }
  .aai-hub__story-type { font-size: 11px; margin-bottom: 4px; }
  .aai-hub__story-type > span { display: none; }
  .aai-hub__story-name { font-size: 14px; min-height: 38px; }
  .aai-hub__controls { margin-top: 12px; }
  .aai-hub__controls-label { font-size: 12px; }
  .aai-hub__sidebar { grid-template-columns: 1fr; gap: 16px; }
  .aai-hub__spotlight { padding: 24px; }
  .aai-hub__spotlight h3 br { display: none; }
  .aai-hub .aai-hub__spotlight h3 { margin-top: 16px; }
  .aai-hub .aai-hub__spotlight blockquote { font-size: 20px; }
  .aai-hub__reading { grid-template-columns: 1fr; gap: 18px; margin-top: 24px; padding-top: 20px; }
  .aai-hub__reading a + a { border-left: 0; border-top: 1px solid #d9dedc; padding: 18px 0 0; }
  .aai-hub-dialog__top { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .aai-hub__feature { animation: none; }
  .aai-hub *, .aai-hub *::before, .aai-hub *::after { scroll-behavior: auto; transition: none; }
}

/* ==========================================================================
   26) Succeeding at Scale / Interactive Platform Results
   ========================================================================== */
.aai-scale { --scale-ink: #173642; --scale-teal: #087c96; position: relative; isolation: isolate; padding: clamp(48px,6vw,88px) clamp(20px,5vw,72px); background: #f7f9fa; color: var(--scale-ink); font: 400 18px/1.5 "Amplitude", "Helvetica Neue", Arial, sans-serif; text-align: left; }
.aai-scale *, .aai-scale *::before, .aai-scale *::after { box-sizing: border-box; }
.aai-scale :is(h2,h3,p) { margin: 0; padding: 0; font-family: inherit; color: inherit; }
.aai-scale [hidden] { display: none !important; }
.aai-scale__inner { max-width: 1320px; margin: auto; }
.aai-scale__heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 32px; }
.aai-scale .aai-scale__eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #557882; }
.aai-scale .aai-scale__heading h2 { margin-top: 12px; font-size: clamp(34px,3.7vw,52px); font-weight: 300; letter-spacing: -.03em; line-height: 1.12; }
.aai-scale__heading h2 em { font-style: normal; color: var(--scale-teal); }
.aai-scale .aai-scale__heading > p { max-width: 36ch; color: #60747c; font-size: 18px; }
.aai-scale__layout { display: grid; grid-template-columns: minmax(260px,.38fr) minmax(0,1fr); gap: 24px; }
.aai-scale__selectors { display: grid; gap: 12px; }
.aai-scale__select { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 24px; border: 1px solid #dce4e7; border-radius: 12px; background: #fff; color: var(--scale-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 180ms,background 180ms,box-shadow 180ms; }
.aai-scale__select:hover { border-color: #80b2bf; background: #f1f7f9; }
.aai-scale__select.is-active { border-color: #147c93; background: #edf5f7; box-shadow: inset 4px 0 #147c93; }
.aai-scale__select-top { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; color: #33778a; }
.aai-scale__number { color: #8a9ca3; font-variant-numeric: tabular-nums; }
.aai-scale__select > strong { font-size: 24px; line-height: 1.2; font-weight: 400; }
.aai-scale__select-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 20px; }
.aai-scale__select-bottom small { font-size: 14px; color: #637980; }
.aai-scale svg { width: 22px; height: 22px; flex-shrink: 0; }
.aai-scale__results { display: flex; min-width: 0; }
.aai-scale__panel { position: relative; overflow: hidden; width: 100%; display: flex; flex-direction: column; padding: clamp(28px,3.5vw,48px); border: 1px solid #214a59; border-radius: 16px; background: radial-gradient(ellipse at 100% 0%,#1b6576 0%,transparent 65%),#0b2c3b; color: #fff; }
.aai-scale__panel::before { content: ''; pointer-events: none; position: absolute; right: -140px; top: -180px; width: 500px; height: 500px; border: 1px solid #83c2d126; border-radius: 50%; box-shadow: 0 0 0 55px #83c2d10b,0 0 0 110px #83c2d108; }
.aai-scale__panel > * { position: relative; }
.aai-scale__panel-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.aai-scale .aai-scale__panel .aai-scale__eyebrow { color: #b6d7df; }
.aai-scale__live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; color: #bfdae2; }
.aai-scale__live > span { width: 5px; height: 5px; border-radius: 50%; background: #86cadb; }
.aai-scale__metric { padding-block: 42px 36px; }
.aai-scale__metric strong { display: block; font-size: clamp(88px,9vw,140px); line-height: 1; font-weight: 300; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.aai-scale__metric > span { display: block; margin-top: 14px; color: #bfdae2; font-size: 20px; }
.aai-scale__detail { display: grid; grid-template-columns: 1fr .6fr; gap: 32px; margin-top: auto; padding-top: 28px; border-top: 1px solid #ffffff26; }
.aai-scale .aai-scale__detail h3 { font-size: clamp(24px,2.4vw,32px); font-weight: 300; line-height: 1.2; }
.aai-scale .aai-scale__detail p { margin-top: 16px; font-size: 18px; color: #c0d3dc; }
.aai-scale a { display: inline-flex; align-items: center; gap: 14px; font-size: 16px; text-decoration: none; color: inherit; }
.aai-scale__detail a { margin-top: 24px; padding-bottom: 6px; border-bottom: 1px solid #ffffff50; }
.aai-scale__secondary { padding-left: 26px; border-left: 1px solid #ffffff26; }
.aai-scale__secondary span { display: block; font-size: 15px; color: #b6cfd8; }
.aai-scale__secondary strong { display: block; margin: 16px 0 8px; font-size: clamp(28px,3vw,42px); line-height: 1.15; font-weight: 300; white-space: nowrap; }
.aai-scale__footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; color: #617780; font-size: 16px; }
.aai-scale__footer a { padding: 12px 18px; border: 1px solid #b6cbd2; border-radius: 6px; color: #005075; background: #fff; }
.aai-scale__footer a:hover { background: #edf5f7; }
.aai-scale :is(button,a):focus-visible { outline: 3px solid #38a4c0; outline-offset: 5px; }
.aai-scale__panel.is-entering { animation: aai-scale-enter 260ms ease-out; }
.aai-scale__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes aai-scale-enter { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) { .aai-scale__layout { grid-template-columns: 1fr; } .aai-scale__selectors { grid-template-columns: repeat(3,minmax(0,1fr)); } .aai-scale__select { padding: 20px; } .aai-scale__select > strong { font-size: 21px; } .aai-scale__select-bottom small { display: block; } .aai-scale__heading { display: block; } .aai-scale .aai-scale__heading > p { margin-top: 18px; max-width: 52ch; } }
@media (max-width: 600px) { .aai-scale { padding: 40px 20px; } .aai-scale__selectors { gap: 8px; } .aai-scale__select { padding: 16px 10px; gap: 10px; } .aai-scale__select-top { font-size: 14px; } .aai-scale__number,.aai-scale__select-bottom small,.aai-scale__select-bottom svg { display: none; } .aai-scale__select > strong { font-size: 17px; } .aai-scale__select-bottom { font-size: 23px; } .aai-scale__panel { padding: 26px; } .aai-scale__panel-top { align-items: flex-start; } .aai-scale__live { font-size: 11px; } .aai-scale__metric { padding-block: 34px; } .aai-scale__detail { grid-template-columns: 1fr; gap: 26px; } .aai-scale__secondary { border-left: 0; border-top: 1px solid #ffffff26; padding: 22px 0 0; } .aai-scale__secondary strong { margin: 10px 0; } .aai-scale__footer { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .aai-scale__panel.is-entering { animation: none; } .aai-scale__select { transition: none; } }
/* Original editorial copy and platform artwork. Inline SVGs travel with the module. */
.aai-scale__select-top { justify-content: flex-start; align-items: center; gap: 14px; }
.aai-scale__platform-icon { display: grid; place-items: center; width: 52px; height: 52px; padding: 10px; border: 1px solid #c3d8df; border-radius: 12px; background: #fff; flex-shrink: 0; }
.aai-scale__platform-icon svg { width: 32px; height: 32px; }
.aai-scale__panel-icon { display: grid; place-items: center; width: 84px; height: 84px; border: 1px solid #8fc6d43d; border-radius: 20px; background: #ffffff08; color: #9bd6e4; }
.aai-scale__panel-icon svg { width: 52px; height: 52px; }
.aai-scale__panel-icon svg :is(path,g,rect)[stroke] { stroke: currentColor; }
.aai-scale__detail { grid-template-columns: 1fr; }
.aai-scale .aai-scale__detail p { max-width: 55ch; font-size: 20px; line-height: 1.6; }
.aai-scale__detail p strong { font-weight: 500; color: #fff; }
.aai-scale__footer { justify-content: flex-end; }
@media (max-width: 600px) {
 .aai-scale__select-top { flex-direction: column; align-items: flex-start; gap: 10px; }
 .aai-scale__platform-icon { width: 44px; height: 44px; padding: 8px; }
 .aai-scale__platform-icon svg { width: 28px; height: 28px; }
 .aai-scale__panel-icon { width: 64px; height: 64px; border-radius: 14px; }
 .aai-scale__panel-icon svg { width: 40px; height: 40px; }
 .aai-scale .aai-scale__detail p { font-size: 18px; }
}

/* Platform names have a clearer presence in selectors and featured panels. */
.aai-scale__select-top { font-size: 20px; }
.aai-scale .aai-scale__panel .aai-scale__eyebrow { font-size: 26px; line-height: 1.2; letter-spacing: .01em; text-transform: none; }
@media (max-width: 600px) {
  .aai-scale__select-top { font-size: 18px; }
  .aai-scale .aai-scale__panel .aai-scale__eyebrow { font-size: 24px; }
}

/* Featured platform artwork sits under its label, aligned with the copy. */
.aai-scale__panel-top { flex-direction: column; align-items: flex-start; gap: 22px; }
.aai-scale__panel-icon { width: 112px; height: 112px; border-radius: 20px; }
.aai-scale__panel-icon svg { width: 72px; height: 72px; }
@media (max-width: 600px) {
  .aai-scale__panel-icon { width: 92px; height: 92px; border-radius: 16px; }
  .aai-scale__panel-icon svg { width: 60px; height: 60px; }
}

/* Outcome-led hierarchy: figures remain in the original descriptive copy. */
.aai-scale__select-bottom { justify-content: flex-end; margin-top: auto; }
.aai-scale__detail { margin-block: auto; padding-block: 36px; border-top: 0; }
.aai-scale .aai-scale__detail h3 { max-width: 18ch; font-size: clamp(34px, 3.5vw, 50px); line-height: 1.12; }
.aai-scale .aai-scale__detail p { margin-top: 24px; max-width: 48ch; font-size: 21px; line-height: 1.6; }
.aai-scale__detail p strong { font-weight: 400; color: inherit; }
@media (max-width: 600px) {
  .aai-scale__detail { padding-block: 28px 12px; }
  .aai-scale .aai-scale__detail h3 { font-size: 32px; }
  .aai-scale .aai-scale__detail p { font-size: 18px; }
}

/* ==========================================================================
   27) Blog Back Navigation / Problems Article Reading Layout
   ========================================================================== */
.aai-article-back { position: relative; z-index: 2; box-sizing: border-box; width: 100%; padding: 24px max(clamp(20px,5vw,72px), calc((100% - 1200px) / 2)); background: #fff; font: 400 16px/1.4 "Amplitude", "Helvetica Neue", Arial, sans-serif; }
.aai-article-back a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid #cbdbe1; border-radius: 6px; color: #005075; background: #f8fafb; text-decoration: none; }
.aai-article-back svg { width: 20px; height: 20px; }
.aai-article-back a:hover { background: #eaf3f6; border-color: #7ba8b9; }
.aai-article-back a:focus-visible { outline: 2px solid #1688a6; outline-offset: 4px; }
/* Retain the native text-left / full-height media-right composition. */
#section-1C1HipLSeA.aai-problems { padding-block: 0 !important; background: #fff; }
.aai-problems > .Layer--one > .Theme-Layer-TextBlock-Container {
  padding: clamp(28px,4vw,56px) clamp(24px,4vw,64px) 64px !important;
}
.aai-problems .Theme-Layer-TextBlock-Underlay {
  flex: 0 1 100% !important; width: 100% !important; max-width: 44rem !important;
  margin-inline: auto !important; padding: 0 !important; background: none !important; box-shadow: none !important;
}
.aai-problems .Theme-Layer-TextBlock-Inner { padding: 0 !important; }
.aai-problems .Theme-Title { font-weight: 400; }
.aai-problems .Theme-Title > h3,
.aai-problems .Theme-Title > h3 strong { color: #173b49; font-size: clamp(34px,3.2vw,48px); line-height: 1.12; font-weight: 300 !important; letter-spacing: -.025em; margin: 0 0 22px; }
.aai-problems .Theme-Title > p { box-sizing: border-box; width: 100%; margin: 0 0 1.25em !important; font-size: clamp(18px,1.35vw,20px) !important; line-height: 1.7; color: #304751; text-align: left; }
.aai-problems .Theme-Title > p span { color: inherit !important; font-size: inherit !important; }
.aai-problems .Theme-Title > p.aai-problems__deck { font-size: clamp(20px,1.7vw,24px) !important; line-height: 1.45; color: #586e78; margin-bottom: 24px !important; }
.aai-problems .Theme-Title > p.aai-problems__byline { font-size: 17px !important; margin-bottom: 16px !important; }
.aai-problems .Theme-Title > p.aai-problems__subheading { margin-top: 2em !important; margin-bottom: .7em !important; font-size: clamp(25px,2.2vw,30px) !important; line-height: 1.25; }
.aai-problems__subheading :is(strong,span) { font-weight: 300 !important; color: #173b49; }
.aai-problems .aai-problems__empty { display: none; }
#article:has(#section-1C1HipLSeA) > .aai-article-back { padding-inline: clamp(24px,4vw,64px); }
/* Target the native portrait as well as its enhanced class: this works in
   Shorthand before JS runs and overrides media-size-30 percentage limits. */
#section-1C1HipLSeA figure:is(.media-size-30, .aai-problems__portrait) {
  --li-portrait-size: clamp(180px, 20vw, 240px);
  display: block !important;
  width: var(--li-portrait-size) !important;
  min-width: var(--li-portrait-size) !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin: 16px 0 24px !important;
}
#section-1C1HipLSeA figure:is(.media-size-30, .aai-problems__portrait) .InlineMedia--image__inner {
  width: var(--li-portrait-size) !important;
  height: var(--li-portrait-size) !important;
  min-width: var(--li-portrait-size) !important;
  max-width: none !important;
  padding: 0 !important;
  border-radius: 14px !important;
  opacity: 1 !important;
  transform: none !important;
}
#section-1C1HipLSeA figure:is(.media-size-30, .aai-problems__portrait) :is(.FullSize, picture) {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}
#section-1C1HipLSeA figure:is(.media-size-30, .aai-problems__portrait) img {
  width: var(--li-portrait-size) !important;
  height: var(--li-portrait-size) !important;
  max-width: none !important;
  object-fit: cover;
}
@media (max-width: 760px) {
 .aai-problems > .Layer--one > .Theme-Layer-TextBlock-Container { padding: 28px 24px 48px !important; }
}
/* A quieter right-hand image retains the split composition without occupying
   half the viewport. Its bounds are independent of the article's full length. */
@media (min-width: 901px) {
  #section-1C1HipLSeA.aai-problems {
    display: grid !important;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
    height: auto !important;
    overflow: visible !important;
  }
  #section-1C1HipLSeA.aai-problems > .Layer--one {
    width: 100% !important; height: auto !important; min-height: 0 !important;
  }
  #section-1C1HipLSeA.aai-problems > .SplitLayout--media {
    position: sticky !important; top: 100px !important; inset-inline: auto !important;
    width: auto !important; height: min(70vh, 680px) !important; min-height: 0 !important;
    margin: clamp(28px,4vw,56px) clamp(24px,4vw,64px) 40px 0;
    overflow: hidden !important; border-radius: 16px;
  }
  #section-1C1HipLSeA.aai-problems > .SplitLayout--media > div:first-child,
  #section-1C1HipLSeA.aai-problems > .SplitLayout--media picture,
  #section-1C1HipLSeA.aai-problems > .SplitLayout--media img {
    position: relative !important; inset: auto !important;
    width: 100% !important; height: 100% !important; min-height: 0 !important;
    max-height: none !important; transform: none !important;
  }
  #section-1C1HipLSeA.aai-problems > .SplitLayout--media picture { display: block; }
  #section-1C1HipLSeA.aai-problems > .SplitLayout--media img { display: block; object-fit: cover; }
  #section-1C1HipLSeA.aai-problems > .SplitLayout--media > .Theme-Overlay { display: none; }
  #article:has(#section-1C1HipLSeA) > .aai-article-back {
    padding-left: max(clamp(24px,4vw,64px), calc((60vw - 44rem) / 2));
  }
}
/* Remove the emptied HTML section after its navigation moves above the header. */
#article .aai-article-back-empty[hidden] { display: none !important; }