/* ============================================================
   WSD GLOBAL — rebuild design tokens + rem base
   Theme: rc-wsd. Loaded AFTER style.min.css so it overrides legacy.
   Convention: 1rem = 10px. Figma px ÷ 10 = rem.
   ============================================================ */

/* ---------- REM BASE (1rem = 10px) ----------
   1440px desktop -> 10/1440 = 0.694vw
   360px mobile   -> 10/360  = 2.77vw
   Lock to 10px at/above 1440px so it stops scaling up. */
html {
  font-size: 0.694vw;
  scroll-padding-top: 4.4rem;
  scroll-behavior: smooth;
}
@media (min-width: 1440px) {
  html { font-size: 10px; }
}
@media (max-width: 767px) {
  html { font-size: 2.77vw; }
}

:root {

  /* ---------- BRAND / NAVY (primary) ---------- */
  --wsd-navy:            #052A56; /* PRIMARY. usage x3845 — body text + brand */
  --wsd-navy-2:          #182C55; /* x816 — secondary navy panels */
  --wsd-navy-deep:       #051B32; /* x306 — darkest bg */
  --wsd-navy-deep-2:     #071D37; /* x118 — dark bg alt (≈ navy-deep, alias if you can) */
  --wsd-navy-mid:        #13234E; /* x88 */
  --wsd-yale-blue:       #002454; /* x68 — "Yale Blue" per handoff report */

  /* ---------- TEAL / CYAN (accent) ---------- */
  --wsd-teal:            #1DBCB9; /* x308 — primary accent */
  --wsd-teal-light:      #8BD2D1; /* x76. ALIAS: #8AD1D0 (x37) is the same teal — use this one */
  --wsd-teal-bright:     #77ECE0; /* x42 — bright accent */
  /* drop #08F9DC (x12) neon — one-off, fold into --wsd-teal-bright */

  /* ---------- NEUTRALS ---------- */
  --wsd-white:           #FFFFFF; /* x2480 */
  --wsd-black:           #000000; /* x780 */
  --wsd-off-white:       #FCFCFC; /* x22. ALIAS: #F4F4F4 (x14) — near-same, use this */
  --wsd-bg-grey:         #F0F4F8; /* x94 — "Wireframe Light Grey" page bg */
  --wsd-border:          #E2E7EC; /* x385. ALIAS: #E1E4ED (x24) — same border, use this */
  --wsd-blue-grey:       #B5C4D4; /* x103 — muted */
  --wsd-slate:           #65778C; /* x15 */
  --wsd-grey:            #888888; /* x62 — secondary text/placeholder */
  --wsd-taupe:           #706359; /* x21 */

  /* ---------- FEEDBACK ---------- */
  --wsd-error:           #F03D3E; /* x36. ALIAS: #E74B37 (x33) warm-red — confirm which is error vs accent */

  /* ---------- FONT FAMILIES ---------- */
  --wsd-font-body:       "Nunito Sans", sans-serif;  /* primary UI — 400/600/700/800 */
  --wsd-font-display:    "acumin-variable", sans-serif; /* hero headlines (900) — Typekit acumin-variable (kit ekt2oak) */
  --wsd-font-footer:     "Agenda", sans-serif;        /* mobile footer body */
  --wsd-font-legal:      "Inter", sans-serif;         /* legal / fine print */
  /* "Font Awesome 6 Pro" appears as text = icon font, NOT a type token */

}

/* Legacy style.min.css sets body{display:flex;flex-direction:row}, which
   lays header / main / footer side-by-side. Restore normal document flow
   so page content stacks below the header. */
body {
  display: block;
}

/* Anchor jumps land below the sticky jump-link nav, animated. The legacy
   layout scrolls the BODY element, so body needs these too. */
body {
  scroll-padding-top: 4.4rem;
}
@media (prefers-reduced-motion: no-preference) {
  body {
    scroll-behavior: smooth;
  }
}

/* ============================================================
   SITE HEADER — pixel match (Figma desktop 57:6807, mobile 1:1552)
   Desktop 1440x196, mobile 360x137. 1rem = 10px.
   ============================================================ */
.wsd-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
}
.wsd-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  max-width: 144rem; /* 1440px content cap, centered */
  margin: 0 auto;
  min-height: 19.6rem;
  padding: 0 8rem;
}

.wsd-header__logo {
  display: flex;
  align-items: center;
  padding: 0 0 2rem; /* no top padding — logo svg carries its own top space */
  flex: 0 0 auto;
}
.wsd-header__logo img {
  width: 16.3rem;
  height: auto;
  display: block;
}

/* desktop nav cluster (links + CTA) */
.wsd-header__nav {
  display: flex;
  align-items: center;
}
.wsd-nav {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wsd-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 3.2rem 1.5rem;
  font-family: var(--wsd-font-body);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.8rem;
  color: var(--wsd-navy);
  text-decoration: none;
  white-space: nowrap;
}
/* underline bar spans the label text only (excludes the dropdown caret) */
.wsd-nav__label {
  position: relative;
  display: inline-block;
}
.wsd-nav__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.5rem;
  height: 0.3rem;
  background-color: var(--wsd-navy);
  opacity: 0;
}
.wsd-nav__caret {
  width: 1.2rem;
  height: 0.8rem;
  transition: transform 0.25s ease;
}
.wsd-nav__link:hover,
.wsd-nav__link:focus,
.wsd-nav__link:focus-visible,
.wsd-nav__link.is-active {
  color: var(--wsd-navy); /* :focus overrides legacy a:focus teal after a click */
}
.wsd-nav__link:hover .wsd-nav__label::after,
.wsd-nav__link:focus-visible .wsd-nav__label::after,
.wsd-nav__link.is-active .wsd-nav__label::after {
  opacity: 1;
}
/* dropdown open -> parent underline off (the navy panel replaces it) */
.wsd-nav__item--has-children:hover .wsd-nav__link .wsd-nav__label::after,
.wsd-nav__item--has-children:focus-within .wsd-nav__link .wsd-nav__label::after {
  opacity: 0;
}
.wsd-nav__link:hover .wsd-nav__caret,
.wsd-nav__link:focus-visible .wsd-nav__caret {
  transform: rotate(180deg);
}

/* dropdown panel for items with sub-items */
.wsd-nav__item--has-children {
  position: relative;
}
/* Figma 2442:7911 — 168px navy stack, 2px white strip on top, rounded
   bottom corners, soft shadow; centered under the parent nav item. */
.wsd-nav__submenu {
  position: absolute;
  top: calc(100% - 1.7rem); /* attach just below the label underline */
  left: 50%;
  transform: translateX(-50%);
  width: 16.8rem;
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--wsd-navy);
  border: 0;
  border-radius: 0 0 1.6rem 1.6rem;
  box-shadow: 0.1rem 0.2rem 0.6rem 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 1001;
}
.wsd-nav__item--has-children:hover .wsd-nav__submenu,
.wsd-nav__item--has-children:focus-within .wsd-nav__submenu {
  display: flex;
}
.wsd-nav__subitem {
  margin: 0;
}
.wsd-nav__sublink {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 0.6rem;
  background-color: var(--wsd-navy);
  color: var(--wsd-white);
  text-align: center;
  font-family: var(--wsd-font-body);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
}
/* .is-active marks the current page so the dropdown shows where you are,
   using the same underline as hover. */
.wsd-nav__sublink:hover,
.wsd-nav__sublink:focus-visible,
.wsd-nav__sublink.is-active {
  color: var(--wsd-white);
  text-decoration: underline;
}

.wsd-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 1.6rem;
  height: 4.8rem;
  padding: 1.5rem 2.4rem;
  border: 0.2rem solid var(--wsd-navy); /* reserves space for the hover border */
  border-radius: 4.8rem;
  background-color: var(--wsd-navy);
  color: var(--wsd-white);
  font-family: var(--wsd-font-body);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.8rem;
  text-decoration: none;
  white-space: nowrap;
}
.wsd-header__cta:hover,
.wsd-header__cta:focus-visible {
  background-color: var(--wsd-white);
  border: 0.2rem solid #052A56;
  color: #052A56;
  text-decoration: none;
}

/* mobile "Menu" pill — hidden on desktop */
.wsd-header__menu {
  display: none;
  align-items: center;
  gap: 1rem;
  height: 4.1rem;
  padding: 0.3rem 0.9rem 0.3rem 1.4rem;
  border: 0;
  border-radius: 1.1rem;
  background-color: var(--wsd-navy);
  color: var(--wsd-white);
  font-family: var(--wsd-font-body);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.8rem;
  cursor: pointer;
}
.wsd-header__menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
}
.wsd-header__menu-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

/* switch to mobile pill below desktop nav width */
@media (max-width: 1199.98px) {
  .wsd-header__nav { display: none; }
  .wsd-header__menu { display: inline-flex; }
  .wsd-header__inner { padding: 2rem 4rem; min-height: 0; }
}

@media (max-width: 767px) {
  .wsd-header__inner { padding: 2rem; min-height: 13.7rem; }
  .wsd-header__logo { padding: 0; }
  /* Figma mobile 1:1552 — 101.373x96.9, matching the 102x97 mobile lockup. */
  .wsd-header__logo img { width: 10.1373rem; height: 9.69rem; }
}

/* ============================================================
   MOBILE OFFCANVAS MENU — navy panel (restored)
   ============================================================ */
/* Freeze the page behind an open overlay. Set by js/wsd-scroll-lock.js. */
.wsd-scroll-locked {
  overflow: hidden;
}

/* Touch only — iOS ignores overflow:hidden, so the body is pinned instead. The
   `top` offset that keeps the scroll position is set by the same script. */
body.wsd-scroll-locked--pinned {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

/* Figma 2442:8251 — full-width navy panel, white-bubble logo top-left,
   centered white 18px bold links (2.7rem rhythm), white Sign Up pill. */
.offcanvas.mainMenu {
  width: 100%;
  background-color: var(--wsd-navy);
  color: var(--wsd-white);
}
.offcanvas.mainMenu .offcanvas-header {
  align-items: flex-start;
  padding: 2rem 2rem 0;
}
/* wsd-logo-mobile.svg is already the white bubble mark — no filter */
.offcanvas.mainMenu .offcanvas-header img {
  width: 10.1rem;
  height: auto;
  display: block;
}
.offcanvas.mainMenu .offcanvas-body {
  padding: 4.4rem 2rem 2rem;
}
.offcanvas.mainMenu .navbar-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.offcanvas.mainMenu .nav-item {
  text-align: center;
}
.offcanvas.mainMenu .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--wsd-white);
  font-family: var(--wsd-font-body);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.8rem;
  text-align: center;
  text-decoration: none;
}
.offcanvas.mainMenu .nav-link:hover,
.offcanvas.mainMenu .nav-link:focus-visible,
.offcanvas.mainMenu .nav-link.is-active {
  color: var(--wsd-white);
  text-decoration: underline;
  text-underline-offset: 0.35rem;
}
/* sub-items: hidden until the caret is tapped (.is-open on the li) */
.offcanvas.mainMenu .wsd-nav__submenu {
  position: static;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 2.7rem;
  width: auto;
  min-width: 0;
  transform: none;
  margin: 2.7rem 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
/* open only on caret tap (.is-open) */
.offcanvas.mainMenu .nav-item.is-open .wsd-nav__submenu {
  display: flex;
}
/* caret = toggle target; padded hit area, flips when open */
/* separate caret toggle button beside the parent link */
.offcanvas.mainMenu .wsd-nav__caretBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;   /* finger-size tap zone */
  height: 4.4rem;
  margin: -1.3rem 0 -1.3rem 0.4rem; /* no layout shift next to the 1.8rem link */
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wsd-white);
  cursor: pointer;
  vertical-align: middle;
}
.offcanvas.mainMenu .wsd-nav__caret {
  transition: transform 0.25s ease;
}
.offcanvas.mainMenu .nav-item.is-open .wsd-nav__caret {
  transform: rotate(180deg);
}
/* hover-open only on devices with a real pointer — on touch, sticky hover
   would keep the submenu stuck open and block the caret toggle */
@media (hover: hover) {
  .offcanvas.mainMenu .nav-item:hover .wsd-nav__submenu {
    display: flex;
  }
  .offcanvas.mainMenu .nav-item:hover .wsd-nav__caret {
    transform: rotate(180deg);
  }
}
.offcanvas.mainMenu .wsd-nav__sublink {
  padding: 0;
  background: transparent;
  color: var(--wsd-white);
  font-family: var(--wsd-font-body);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.8rem;
  text-align: center;
  text-decoration: none;
}
.offcanvas.mainMenu .wsd-nav__sublink:hover,
.offcanvas.mainMenu .wsd-nav__sublink:focus-visible,
.offcanvas.mainMenu .wsd-nav__sublink.is-active {
  color: var(--wsd-white);
  text-decoration: underline;
  text-underline-offset: 0.35rem;
}

/* WP marks the parent item active too when a sub-item is current; only the
   sub-item should show the underline in that case. */
.offcanvas.mainMenu .nav-item:has(.wsd-nav__sublink.is-active) > .nav-link.is-active {
  text-decoration: none;
}

/* Sign Up pill: white on navy (Figma: 48px radius, 15/24 padding) */
.offcanvas.mainMenu .hasBtn .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 2.4rem;
  border: 0;
  border-radius: 4.8rem;
  background-color: var(--wsd-white);
  color: var(--wsd-navy);
  font-family: var(--wsd-font-body);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.8rem;
}
/* close button: plain white X */
.offcanvas.mainMenu .btn-close {
  background-image: none;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  opacity: 1;
}
.offcanvas.mainMenu .btn-close .i,
.offcanvas.mainMenu .btn-close i {
  color: var(--wsd-white);
  font-size: 2.4rem; /* Figma X ~25px tall */
}
.offcanvas.mainMenu .btn-close .i-clear::before {
  content: "\e999";
  font-size: 3.6rem;
  top: -0.6rem;
  position: relative;
}

/* ============================================================
   SITE FOOTER — pixel match (Figma desktop 19:5600, mobile 82:16098)
   Desktop 1440x331, mobile 360x459. bg Yale Blue. 1rem = 10px.
   ============================================================ */
.wsd-footer {
  background-color: var(--wsd-yale-blue);
  padding: 6.3rem 0 5.7rem;
}

/* Sticky footer, site-wide. Keeps the footer pinned to the bottom of the
   viewport when the page content is shorter than the screen — otherwise tall
   viewports (4K, tablet portrait) show white space below the footer.
   Modals/snackbars/dialogs are position:absolute|fixed, so they stay out of
   this flex flow. */
html {
  background-color: var(--wsd-yale-blue); /* covers overscroll below footer */
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--wsd-white);
}
body > main {
  flex: 1 0 auto;
}
body > .wsd-footer,
body > footer {
  flex-shrink: 0;
  margin-top: auto;
}
.wsd-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 144rem; /* 1440px content cap, centered */
  margin: 0 auto;
  padding: 0 16.1rem;
}

/* links — horizontal row on desktop */
.wsd-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5.6rem;
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.1rem;
}
.wsd-footer__item {
  margin: 0;
}
.wsd-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--White, #FFF);
  leading-trim: both;
  text-edge: cap;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: Agenda, sans-serif;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.4rem;
  text-decoration: none;
}
.wsd-footer__link.ot-sdk-show-settings::after {
  background-image: url("/wp-content/uploads/2026/09/wsd-onetrust-icon.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  flex: 0 0 3.2rem;
  height: 1.5rem;
  width: 3.2rem;
}
.wsd-footer__link:hover,
.wsd-footer__link:focus-visible {
  color: var(--wsd-white);
  text-decoration: underline;
}

.wsd-footer__divider {
  width: 109.8rem;
  max-width: 100%;
  height: 0;
  margin: 3rem 0 0;
  border: 0;
  border-top: 0.2rem solid #FFFFFF;
  opacity: 1;
}

.wsd-footer__logo {
  display: block;
  margin-top: 3rem;
}
.wsd-footer__logo img {
  width: 25rem;
  height: auto;
  display: block;
}

.wsd-footer__legal {
  margin: 2.6rem 0 0;
  max-width: 73rem;
  color: var(--wsd-white);
  font-family: var(--wsd-font-legal);
  font-size: 1.3rem;
  line-height: 2rem;
}

@media (max-width: 767px) {
  .wsd-footer {
    padding: 3rem 0 3.4rem;
    height: auto;
  }
  .wsd-footer__inner {
    align-items: center;
    gap: 1.6rem;
    padding: 0 1rem;
  }
  /* links stack + center, Agenda type */
  .wsd-footer__links {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    padding-left: 0; /* desktop-only nudge */
  }
  .wsd-footer__link {
    font-family: var(--wsd-font-footer);
    font-size: 1.8rem;
    line-height: 2.4rem;
    white-space: normal;
    text-align: center;
  }
  .wsd-footer__divider {
    width: 25.2rem;
    margin: 0;
  }
  .wsd-footer__logo {
    margin: 0.5rem 0 0;
  }
  .wsd-footer__logo img {
    width: 20.2rem;
  }
  .wsd-footer__legal {
    margin: 0.2rem 0 0;
    max-width: 34rem;
    font-family: var(--wsd-font-footer);
    font-size: 1.8rem;
    line-height: 2.4rem;
    text-align: center;
  }
}

/* ============================================================
   HOME HERO block (Figma desktop 1:1472, mobile 36:7299)
   Full-bleed composed hero image + overlaid left copy column.
   min-height in vw so the image scales identically on all screens.
   ============================================================ */
.wsd-hero {
  position: relative;
  min-height: var(--hh-h-d, 36.18vw); /* ACF: desktop min-height */
  background-color: #1DBCB9; /* placeholder until hero image loads */
  background-image: url("image/inner-hero-bg.jpg"); /* shared with inner hero */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: stretch; /* inner spans full hero height so media hits the true bottom */
  overflow: hidden; /* negative image offsets bleed-clip at the viewport edge */
}
.wsd-hero__inner {
  position: relative; /* media anchors here — stays aligned with the 144rem header cap */
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 144rem;
  margin: 0 auto;
  margin-top: var(--hh-inner-mt-d, 0); /* ACF: desktop top margin */
  padding: 0 8rem;
}
/* foreground image — bottom-right of the 144rem container; negative right
   offset pushes it past the container (cut off at 1440px, revealed wider) */
.wsd-hero__media {
  position: absolute;
  right: var(--hh-img-right, 0);
  bottom: 0;
}
.wsd-hero__image {
  display: block;
  width: var(--hh-img-w, auto); /* ACF: desktop image width; height stays auto */
  height: auto;
}
.wsd-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  max-width: 57.2rem;
  margin-left: var(--hh-content-left-d, 20rem); /* ACF: desktop content offset */
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .wsd-hero__content {
    margin-left: var(--hh-content-left-t, 5rem); /* ACF: tablet content offset */
  }
}

.wsd-hero__eyebrow {
  margin: 0;
  font-family: var(--wsd-font-display);
  font-weight: 800;
  font-variation-settings: "wght" 800, "wdth" 85, "slnt" 0;
  font-size: 2.2rem;
  line-height: 2.2rem;
  text-transform: uppercase;
  color: var(--wsd-navy);
}
.wsd-hero__title {
  margin: -2.3rem 0 0; /* tight to eyebrow per Figma (gap -6) */
  font-family: var(--wsd-font-display);
  font-weight: 900;
  font-size: 7.8rem;
  line-height: 6.6rem;
  text-transform: uppercase; /* match inner-hero title rendering */
  color: var(--wsd-navy);
}
.wsd-hero__intro {
  max-width: 48rem;
  font-family: var(--wsd-font-body);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 2.7rem;
  color: var(--wsd-navy);
  margin-top: -0.4rem;
}
.wsd-hero__intro p { margin-block-end: 0; }
.wsd-hero__copy {
  max-width: 43.6rem;
  font-family: var(--wsd-font-body);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: var(--wsd-navy);
}
.wsd-hero__copy p { margin-block-end: 0; }
.wsd-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4.8rem;
  padding: 1.5rem 3.8rem;
  border: 0.2rem solid var(--wsd-navy); /* reserves space for the hover border */
  border-radius: 4.8rem;
  background-color: var(--wsd-navy);
  color: var(--wsd-white);
  font-family: var(--wsd-font-body);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.8rem;
  text-decoration: none;
  white-space: nowrap;
}
.wsd-hero__button:hover,
.wsd-hero__button:focus-visible {
  background-color: var(--wsd-white);
  border: 0.2rem solid #052A56;
  color: #052A56;
  text-decoration: none;
}
.wsd-hero__disclaimer {
  max-width: 39.4rem;
  margin: 0;
  font-family: var(--wsd-font-body);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: var(--wsd-navy);
}

@media (max-width: 767px) {
  .wsd-hero {
    min-height: var(--hh-h-m, unset); /* ACF: mobile min-height; default follows content */
    background-image: url("image/inner-hero-bg-mobile.webp"); /* shared with inner hero */
    align-items: stretch; /* inner spans full height so media hits the true bottom */
  }
  .wsd-hero__inner {
    display: flex;
    flex-direction: column;
    margin-top: var(--hh-inner-mt-m, 0); /* ACF: mobile top margin */
    padding: 13.7rem 2rem 0; /* clear the overlay header */
  }
  .wsd-hero__content {
    position: relative;
    z-index: 3; /* above the photo so the absolute disclaimer stays readable */
    align-items: center;
    text-align: center;
    max-width: none;
    gap: 2rem;
    margin-left: 0; /* content offset is desktop/tablet only */
  }
  .wsd-hero__eyebrow {
    margin-left: -0.1rem;
    margin-top: 0.1rem;
    font-variation-settings: "wght" 800, "wdth" 90, "slnt" 0;
  }
  .wsd-hero__title {
    margin-top: -1.4rem;
  }
  /* foreground image pinned to the hero's bottom-right edge (no padding) */
  .wsd-hero__media {
    position: absolute;
    z-index: 2;
    right: var(--hh-img-right-m, 0);
    bottom: 0;
    margin-top: 0;
  }
  .wsd-hero__image {
    width: 100%;
    height: auto;
    max-height: none;
    max-width: 100%;
  }
  .wsd-hero__eyebrow {
    font-size: 1.8rem;
  }
  .wsd-hero__title {
    font-size: 4.4rem;
    line-height: 3.8rem;
  }
  .wsd-hero__intro {
    max-width: none;
    font-size: 1.8rem;
    line-height: 2.2rem;
    margin-top: 1.2rem;
  }
  .wsd-hero__button {
    padding: 1.5rem 4rem;
    align-items: start;
  }
  /* Figma 36:7305 — copy sits in a white rounded card on mobile */
  .wsd-hero__copy {
    max-width: none;
    width: 100%;
    background-color: var(--wsd-white);
    border: 0.2rem solid #f0f4f8;
    border-radius: 3.3rem;
    padding: 2.2rem 1.6rem;
    text-align: center;
  }
  /* Figma 47:5960 — narrow disclaimer column beside the image */
  .wsd-hero__disclaimer {
    position: absolute;
    top: var(--hh-disc-top-m, 44rem);
    left: var(--hh-disc-left-m, 2rem);
    width: var(--hh-disc-w-m, 8.7rem);
    max-width: 8rem;
    margin: -6rem 0 0 -1.4rem; /* pixel nudge against the photo */
    z-index: 3; /* above the full-width photo */
    text-align: left;
    font-size: 1.1rem;
    line-height: 1.5rem;
  }
}

/* ============================================================
   INNER HERO block (Figma desktop 1:1608 / 78:6862, mobile 36:7181 / 78:7120)
   Fixed full-bleed background + left copy + right foreground image.
   Heights + image right margin are authored in vw via ACF.
   NOTE: background art is a fixed theme asset — replace the filenames
   below with the actual uploaded files in /image/.
   ============================================================ */
.wsd-inner-hero {
  position: relative;
  min-height: var(--ih-h-d, 33vw);
  display: flex;
  background-color: #1DBCB9; /* placeholder until hero image loads */
  background-image: url("image/inner-hero-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.wsd-inner-hero__inner {
  position: relative;
  width: 100%;
  max-width: 144rem;
  margin: 0 auto;
  margin-top: var(--ih-inner-mt-d, 0); /* ACF: desktop top margin */
  padding: 0 32.5rem 0 36.9rem; /* Figma Hero Inner: left 369 / right 325 */
  display: flex;
  align-items: flex-start;
}
.wsd-inner-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
  max-width: 57.6rem;
}
.wsd-inner-hero__title {
  margin: 0;
  font-family: var(--wsd-font-display);
  font-weight: 900;
  font-size: 7.8rem;
  line-height: 6.6rem;
  text-transform: uppercase;
  color: var(--wsd-navy);
}
.wsd-inner-hero__subhead {
  margin: 0;
  font-family: var(--wsd-font-body);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 2.2rem;
  color: var(--wsd-navy);
}
.wsd-inner-hero__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}
.wsd-inner-hero__desc {
  font-family: var(--wsd-font-body);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: var(--wsd-navy);
}
.wsd-inner-hero__desc p { margin: 0; }
.wsd-inner-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4.8rem;
  padding: 1.5rem 4rem;
  border-radius: 4.8rem;
  background-color: var(--wsd-navy);
  color: var(--wsd-white);
  font-family: var(--wsd-font-body);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.8rem;
  text-decoration: none;
  white-space: nowrap;
}
.wsd-inner-hero__button:hover,
.wsd-inner-hero__button:focus-visible {
  background-color: var(--wsd-navy-2);
  color: var(--wsd-white);
  text-decoration: none;
}
.wsd-inner-hero__disclaimer {
  margin: 0;
  max-width: 47.2rem;
  font-family: var(--wsd-font-body);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: var(--wsd-navy);
}
.wsd-inner-hero__disclaimer p {
  margin: 0;
  font-size: 1.4rem;
  line-height: 2.2rem;
}
/* right foreground image — right margin is per-page (vw) */
.wsd-inner-hero__media {
  position: absolute;
  right: var(--ih-img-right, 5vw);
  bottom: 0;
}

@media (min-width: 1920px) {
  .wsd-inner-hero__media {
    right: 0;
  }
}

@media (min-width: 2000px) {
  .meet-emeet .wsd-inner-hero__media {
    --ih-img-right: 4vw;
  }
}
.wsd-inner-hero__image {
  display: block;
  width: auto;
  height: auto;
  max-height: var(--ih-h-d, 33vw);
}

@media (min-width: 768px) {
  .sign-up .wsd-inner-hero__image {
    max-width: 65rem !important;
  }

  .meet-emeet .wsd-inner-hero__image {
    width: 39.5rem !important;
  }

  .treatment .wsd-inner-hero__image {
    width: 54rem;
    margin-bottom: -0.1rem;
  }
}

@media (max-width: 767px) {
  .wsd-inner-hero {
    min-height: unset; /* mobile height follows content */
    background-image: url("image/inner-hero-bg-mobile.webp");
  }
  .wsd-inner-hero__inner {
    flex-direction: column;
    align-items: center;
    margin-top: var(--ih-inner-mt-m, 0); /* ACF: mobile top margin */
    padding: 13.7rem 2rem 0; /* clear overlay header */
  }
  .wsd-inner-hero__copy {
    position: relative;
    z-index: 1; /* below the foreground image layer */
    align-items: center;
    text-align: center;
    max-width: none;
    gap: 2rem;
  }

  .treatment .wsd-inner-hero__copy {
    gap: 1.6rem;
  }

  .sign-up .wsd-inner-hero__copy {
    gap: 1.6rem !important;
  }

  .wsd-inner-hero__title {
    font-size: 4.4rem;
    line-height: 3.8rem;
    max-width: 43.4rem;
  }
  /* mobile: description + button sit in a white rounded card */
  .wsd-inner-hero__card {
    align-items: center;
    background-color: var(--wsd-white);
    border: 0.2rem solid #f0f4f8; /* Figma 36:8338 */
    border-radius: 3.3rem;
    padding: 2.4rem 1.6rem;
    text-align: center;
  }
  /* Figma 36:8341 — narrow 11px column beside the image, not above it */
  .wsd-inner-hero__disclaimer {
    position: absolute;
    top: var(--ih-disc-top-m, 35.2rem);
    right: var(--ih-disc-right-m, 4rem);
    width: var(--ih-disc-w-m, 8rem);
    max-width: none;
    margin: 0;
    z-index: 1;
    text-align: left;
    font-size: 1.1rem;
    line-height: 1.5rem;
  }
  .wsd-inner-hero__disclaimer p {
    font-size: 1.1rem;
    line-height: 1.5rem;
  }
  /* foreground image: layered above the copy card (Figma 36:8441 overlaps
     the card by ~26px); pull-up amount is per-page via ACF */
  .wsd-inner-hero__media {
    position: relative;
    z-index: 2;
    margin-top: var(--ih-img-mt-m, -2.6rem);
    right: var(--ih-img-right-m, 0); /* ACF: mobile image right offset */
    align-self: center;
  }
  .wsd-inner-hero__image {
    max-height: none;
    max-width: 100%;
  }
}

/* wide mobiles: pull the disclaimer up 20px */
@media (min-width: 600px) and (max-width: 767.98px) {
  .wsd-inner-hero__disclaimer {
    top: calc(var(--ih-disc-top-m, 35.2rem) - 20px);
  }
}

@media (min-width: 367px) and (max-width: 767px) {
  .sign-up .wsd-inner-hero__image {
    position: relative;
    left: -1rem;
  }
}

@media (min-width: 400px) and (max-width: 440px) {
  .sign-up .wsd-inner-hero__image {
    position: relative;
    left: -3rem;
  }
}

@media (min-width: 660px) and (max-width: 767px) {
  .meet-emeet .wsd-inner-hero__disclaimer {
    --ih-disc-top-m: 25.3rem;
    top: 25.3rem !important;
  }
}

@media (max-width: 340px) {
  .meet-emeet .wsd-inner-hero__disclaimer {
    width: 9rem !important;
    right: 0 !important;
  }
}

/* WNB Resource block (Figma: 104:16559 desktop, 1:1576 mobile) */
.wnbResource {
  background-color: var(--wsd-bg-grey);
  padding: 8.8rem 18.8rem;
  text-align: center;
}

.wnbResource--bg-grey {
  background-color: var(--wsd-bg-grey);
}

.wnbResource--bg-white {
  background-color: var(--wsd-white);
}

.wnbResource--bg-navy {
  background-color: var(--wsd-navy);
}

.wnbResource__intro {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.wnbResource__title {
  color: var(--wsd-navy);
  font-family: var(--wsd-font-body);
  font-size: 4.2rem;
  font-weight: 600;
  line-height: 4.2rem;
  margin: 0;
}

.wnbResource__body {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  justify-content: center;
  width: 100%;
}

.wnbResource__copy {
  color: var(--wsd-navy);
  font-family: var(--wsd-font-body);
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.8rem;
  margin: 0;
  text-align: center;
  width: 100%;
}

.wnbResource__button {
  align-items: center;
  background: var(--wsd-navy);
  border: 0.2rem solid var(--wsd-navy); /* reserves space for the hover border */
  border-radius: 4.8rem;
  color: var(--wsd-white);
  display: inline-flex;
  font-family: var(--wsd-font-body);
  font-size: 1.8rem;
  font-weight: 700;
  height: 4.8rem;
  justify-content: center;
  line-height: 1.8rem;
  min-width: 29.7333rem;
  padding: 1.5rem 4rem;
  text-decoration: none;
}

.wnbResource__button:hover,
.wnbResource__button:focus {
  background: var(--wsd-white);
  border: 0.2rem solid #052A56;
  color: #052A56;
  text-decoration: none;
}

.wnbResource--bg-navy .wnbResource__title,
.wnbResource--bg-navy .wnbResource__copy {
  color: var(--wsd-white);
}

.wnbResource--bg-navy .wnbResource__button {
  background: var(--wsd-white);
  color: var(--wsd-navy);
}

@media (max-width: 767px) {
  .wnbResource {
    padding: 4.4rem 2rem;
  }

  .wnbResource__intro {
    gap: 2.2rem;
    padding-left: 0;
    padding-right: 0;
  }

  .wnbResource__title {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  .wnbResource__button {
    min-width: 0;
  }
}

/* ============================================================
   CTA Block (Figma: 21:5813 desktop, 1:1582 mobile)
   Two-column image + intro with optional disclaimer.
   ============================================================ */
.ctaBlock {
  background-color: #fff;
  width: 100%;
}

.ctaBlock--bg-white { background-color: #fff; }
.ctaBlock--bg-grey  { background-color: var(--wsd-bg-grey, #F0F4F8); }
.ctaBlock--bg-navy  { background-color: var(--Dark-Blue, #052A56); }

.ctaBlock__grid {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  width: 100%;
}

@media (min-width: 768px) {
  .ctaBlock[style*="--ctaBlock-max-height"] {
    max-height: var(--ctaBlock-max-height);
    overflow: hidden;
  }

  .ctaBlock[style*="--ctaBlock-max-height"] .ctaBlock__grid,
  .ctaBlock[style*="--ctaBlock-max-height"] .ctaBlock__media,
  .ctaBlock[style*="--ctaBlock-max-height"] .ctaBlock__intro {
    height: var(--ctaBlock-max-height);
    min-height: 0;
  }

  .ctaBlock[style*="--ctaBlock-max-height"] .ctaBlock__media {
    aspect-ratio: auto;
  }
}

.ctaBlock--image-right .ctaBlock__grid {
  flex-direction: row-reverse;
}

.ctaBlock--image-left .ctaBlock__intro {
  align-items: flex-start;
  text-align: left;
}

.ctaBlock--image-right .ctaBlock__intro {
  align-items: flex-end;
  text-align: right;
}

.ctaBlock--image-right .ctaBlock__inner,
.ctaBlock--image-right .ctaBlock__body {
  align-items: flex-start;
  text-align: left;
}

.ctaBlock__media {
  align-self: stretch;
  aspect-ratio: auto;
  flex: 0 0 50%;
  max-width: 50%;
  min-height: auto;
  overflow: hidden;
  position: relative;
  width: 50%;
}

.ctaBlock__image {
  display: block;
  height: 100% !important;
  object-fit: cover;
  object-position: bottom center;
  width: 100%;
}

@media (min-width: 768px) {
  .custom-img .ctaBlock__image {
    height: 101% !important;
  }
}

.ctaBlock__image--mobile { display: none; }

.ctaBlock__intro {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 50%;
  flex-direction: column;
  justify-content: center;
  max-width: 50%;
  min-height: auto;
  padding: 3rem 13.4rem;
  width: 50%;
}

.ctaBlock__inner {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2rem; /* 20px: title -> body, body -> disclaimer */
  max-width: 45.2rem;
  width: 100%;
}

.ctaBlock__title {
  color: var(--wsd-navy);
  font-family: var(--wsd-font-body);
  font-size: 4.2rem;
  font-weight: 600;
  line-height: 4.2rem;
  margin: 0;
  width: 100%;
}

.ctaBlock__body {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 3rem; /* 30px: description -> button */
  width: 100%;
}

.ctaBlock__copy,
.ctaBlock__copy p {
  color: var(--wsd-navy);
  font-family: var(--wsd-font-body);
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.8rem;
  margin: 0;
}

.ctaBlock__copy p + p { margin-top: 1.4rem; }

.ctaBlock__button {
  align-items: center;
  background: var(--wsd-navy);
  border: 0.2rem solid var(--wsd-navy); /* reserves space for the hover border */
  border-radius: 4.8rem;
  color: var(--wsd-white);
  display: inline-flex;
  font-family: var(--wsd-font-body);
  font-size: 1.8rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1.8rem;
  padding: 1.5rem 4rem;
  text-decoration: none;
}

.ctaBlock__button:hover,
.ctaBlock__button:focus {
  background: var(--wsd-white);
  border: 0.2rem solid #052A56;
  color: #052A56;
  text-decoration: none;
}

/* primary buttons share the CTA hover treatment: white fill, navy border/text */
.btn-primary {
  --bs-btn-hover-bg: var(--wsd-white);
  --bs-btn-hover-color: #052A56;
  --bs-btn-hover-border-color: #052A56;
}

/* Button cleanup: prevent inherited pseudo-element bars and inline line-box artifacts. */
.btn,
.ctaBlock__button,
.cardiomyopathyCare__ctaButton,
.jumpLinkNav__link {
  vertical-align: middle;
}

.btn::before,
.btn::after,
.ctaBlock__button::before,
.ctaBlock__button::after,
.cardiomyopathyCare__ctaButton::before,
.cardiomyopathyCare__ctaButton::after,
.jumpLinkNav__link::before,
.jumpLinkNav__link::after {
  content: none !important;
  display: none !important;
}




.ctaBlock__disclaimer,
.ctaBlock__disclaimer p {
  color: var(--wsd-navy);
  font-family: var(--wsd-font-body);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.2rem;
  margin: 0;
  width: 100%;
}

.ctaBlock__disclaimer {
  padding-right: 1px;
}

.ctaBlock__disclaimer p + p { margin-top: 0.6rem; }

.ctaBlock--bg-navy .ctaBlock__title,
.ctaBlock--bg-navy .ctaBlock__copy,
.ctaBlock--bg-navy .ctaBlock__copy p,
.ctaBlock--bg-navy .ctaBlock__disclaimer,
.ctaBlock--bg-navy .ctaBlock__disclaimer p {
  color: var(--wsd-white);
}

.ctaBlock--bg-navy .ctaBlock__button {
  background: var(--wsd-white);
  color: var(--wsd-navy);
}

.custom-cta-block a.ctaBlock__button {
  background: transparent !important;
  border: 1px solid;
  color: #fff !important;
}

/* Navy CTA blocks only: hover flips the outline button to a white fill with
   navy text. !important + extra specificity are needed to beat the
   .custom-cta-block rest-state rule above. */
.ctaBlock--bg-navy a.ctaBlock__button:hover,
.ctaBlock--bg-navy a.ctaBlock__button:focus {
  background: var(--wsd-white) !important;
  border-color: var(--wsd-white);
  color: var(--wsd-navy) !important;
  text-decoration: none;
}

@media (min-width: 768px) {
  .custom-cta-block .ctaBlock__intro {
    padding-left: 8rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ctaBlock__image {
    height: auto !important; /* base rule uses height: 100% !important */
  }
}

@media (max-width: 767px) {
  .ctaBlock__grid,
  .ctaBlock--image-right .ctaBlock__grid {
    flex-direction: column;
  }

  .ctaBlock__disclaimer {
    text-align: center;
  }

  .ctaBlock__media {
    aspect-ratio: auto;
    flex: 0 0 auto;
    height: auto;
    max-width: 100%;
    min-height: 0;
    width: 100%;
  }

  .ctaBlock__image {
    height: auto !important; /* base rule uses height: 100% !important */
  }

  .ctaBlock__image--desktop { display: none; }
  .ctaBlock__image--mobile  { display: block; }

  .ctaBlock__intro,
  .ctaBlock--image-left .ctaBlock__intro,
  .ctaBlock--image-right .ctaBlock__intro {
    align-items: center;
    flex: 0 0 auto;
    height: auto;
    justify-content: flex-end;
    max-width: 100%;
    min-height: 0;
    padding: 4.4rem 2rem;
    text-align: center;
    width: 100%;
  }

  .ctaBlock__inner,
  .ctaBlock--image-right .ctaBlock__inner,
  .ctaBlock--image-right .ctaBlock__body {
    align-items: center;
    max-width: 100%;
  }

  .ctaBlock__inner {
    gap: 2.2rem;
  }

  .ctaBlock__title {
    font-size: 3.2rem;
    line-height: 3.2rem;
    text-align: center;
  }

  .custom-cta-block .ctaBlock__title {
    text-align: left;
  }

  .custom-cta-block .ctaBlock__body {
    align-items: flex-start;
    justify-content: flex-end;
  }

  .ctaBlock__body {
    align-items: center;
    justify-content: flex-end;
  }

  .ctaBlock__copy,
  .ctaBlock__copy p {
    text-align: center;
  }

  .ctaBlock__disclaimer {
    text-align: left;
  }
}

/* ============================================================
   Tabs Component (Figma: 57:7671 desktop, 1:2646 mobile)
   Desktop: horizontal tabs + content panel.
   Mobile : accordion. Mobile-only and desktop-only panels share data.
   ============================================================ */
.tabsComponent {
  background-color: var(--wsd-bg-grey);
  width: 100%;
}

.tabsComponent--bg-grey  { background-color: var(--wsd-bg-grey); }
.tabsComponent--bg-white { background-color: #fff; }
.tabsComponent--bg-navy  { background-color: var(--Dark-Blue, #052A56); }

.tabsComponent__inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4.4rem;
  justify-content: center;
  margin: 0 auto;
  max-width: 144rem;
  padding: var(--tabsComponent-padding-top-desktop, 8.8rem) 18.8rem var(--tabsComponent-padding-bottom-desktop, 8.8rem);
  width: 100%;
}

.tabsComponent__intro {
  align-items: center;
  color: var(--wsd-navy);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 0 10.8rem;
  text-align: center;
  width: 100%;
}

@media (min-width: 768px) {
  .treatment .tabsComponent__intro {
    padding: 0;
    text-align: left;
  }

  .treatment .tabsComponent__nav {
    padding: 0 10.3rem;
  }

  .treatment .wsd-inner-hero__title {
    min-width: 70rem;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .treatment .wsd-inner-hero__inner {
    padding: 0 32.5rem 0 32.9rem;
  }
}

.tabsComponent__title {
  color: var(--wsd-navy);
  font-family: var(--wsd-font-body);
  font-size: 4.2rem;
  font-weight: 600;
  line-height: 4.2rem;
  margin: 0;
  width: 100%;
}

.tabsComponent__lede,
.tabsComponent__lede p {
  color: var(--wsd-navy);
  font-family: var(--wsd-font-body);
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.8rem;
  margin: 0;
}

.tabsComponent__tabs {
  display: flex;
  flex-direction: column;
  max-width: 106.4rem;
  width: 100%;
}

.tabsComponent__nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 3.5rem;
  justify-content: center;
  padding: 0 2.7rem;
  padding-right: 3rem;
  position: relative;
  z-index: 2;
}

.tabsComponent__tab {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--wsd-navy);
  cursor: pointer;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2.2rem;
  padding: 0;
  position: relative;
  text-align: center;
}

.tabsComponent__tabIcon {
  align-items: center;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  flex-shrink: 0;
  height: 8.8rem;
  justify-content: center;
  overflow: hidden;
  width: 8.8rem;
}

.tabsComponent__tabIcon--mobile {
  display: none;
}

.tabsComponent__tabIcon img {
  display: block;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
}

.tabsComponent__tabLabel {
  color: var(--wsd-navy);
  font-family: var(--wsd-font-body);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 2.2rem;
  padding: 0 1.1rem;
  white-space: nowrap;
}

/*
 * Reserve the bold width on every tab so switching the active tab does not
 * resize the flex items and shift the icons above them.
 */
.tabsComponent__tabLabel::after {
  content: attr(data-label);
  display: block;
  font-weight: 700;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.tabsComponent__tabIndicator {
  background-color: var(--wsd-navy);
  border-radius: 1rem;
  display: block;
  height: 0.6rem;
  opacity: 0;
  transition: opacity 0.18s ease;
  width: 100%;
}

.tabsComponent__tab.is-active .tabsComponent__tabLabel {
  font-weight: 700;
}

.tabsComponent__tab.is-active .tabsComponent__tabIndicator {
  opacity: 1;
}

.tabsComponent__tabPlus {
  display: none;
}

.tabsComponent__panels {
  background-color: #fff;
  border: 1px solid var(--wsd-teal);
  border-radius: 3.3rem;
  margin-top: -0.3rem;
  padding: 6.6rem;
  position: relative;
  z-index: 1;
}

.tabsComponent__panel,
.tabsComponent__panel p {
  color: var(--wsd-navy);
  font-family: var(--wsd-font-body);
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.8rem;
  margin: 0;
}

.tabsComponent__panel p + p { margin-top: 1.4rem; }

.tabsComponent__panel--mobile { display: none; }

.tabsComponent__panel[hidden] { display: none !important; }

.tabsComponent__footer,
.tabsComponent__footer p {
  color: var(--wsd-navy);
  font-family: var(--wsd-font-body);
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.8rem;
  margin: 0;
  text-align: center;
  width: 100%;
}

/* Dark-blue background overrides */
.tabsComponent--bg-navy .tabsComponent__title,
.tabsComponent--bg-navy .tabsComponent__lede,
.tabsComponent--bg-navy .tabsComponent__lede p,
.tabsComponent--bg-navy .tabsComponent__footer,
.tabsComponent--bg-navy .tabsComponent__footer p,
.tabsComponent--bg-navy .tabsComponent__tabLabel {
  color: #fff;
}

.tabsComponent--bg-navy .tabsComponent__tabIndicator {
  background-color: #fff;
}

@media (max-width: 767px) {
  .tabsComponent__inner {
    gap: 4.4rem;
    padding: 4.4rem 2rem;
  }

  .tabsComponent__intro {
    padding: 0;
  }

  .tabsComponent__title {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  /* Switch tabs to accordion */
  .tabsComponent__tabs {
    max-width: 100%;
  }

  .tabsComponent__nav {
    background-color: #fff;
    border: 1px solid var(--wsd-teal);
    border-radius: 3.3rem;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
  }

  .tabsComponent__tab {
    align-items: center;
    border-top: 1px solid var(--wsd-teal);
    flex: 0 0 auto;
    flex-direction: row;
    gap: 1.5rem;
    padding: 2.2rem 2rem;
    text-align: left;
    width: 100%;
  }

  .tabsComponent__tab.is-active {
    padding: 2.2rem 2rem 0.9rem;
  }

  .tabsComponent__tab:first-of-type {
    border-top: 0;
  }

  .tabsComponent__tabIcon {
    background-color: transparent;
    border-radius: 0;
    height: 6.3rem;
    overflow: visible;
    width: 6.2rem;
  }

  .tabsComponent__tabIcon--desktop {
    display: none;
  }

  .tabsComponent__tabIcon--mobile {
    display: flex;
  }

  /* Fallback: when only a desktop icon exists, still show it on mobile. */
  .tabsComponent__tab:not(:has(.tabsComponent__tabIcon--mobile)) .tabsComponent__tabIcon--desktop {
    display: flex;
  }

  .tabsComponent__tabIcon img {
    max-height: 100%;
    max-width: 100%;
  }

  .tabsComponent__tabLabel {
    flex: 1 1 auto;
    font-size: 2.1rem;
    line-height: 2.1rem;
    padding: 0;
    white-space: normal;
    word-break: break-word;
  }

  /* Accordion layout is full width, so no bold-width reservation is needed. */
  .tabsComponent__tabLabel::after {
    content: none;
  }

  .tabsComponent__tab.is-active .tabsComponent__tabLabel {
    font-weight: 700;
  }

  .tabsComponent__tabIndicator {
    display: none;
  }

  .tabsComponent__tabPlus {
    color: var(--wsd-navy);
    display: inline-block;
    flex-shrink: 0;
    font-family: var(--wsd-font-body);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.8rem;
    transition: transform 0.2s ease;
  }

  .tabsComponent__tab.is-active .tabsComponent__tabPlus {
    transform: rotate(45deg);
  }

  /* Hide the desktop panel set on mobile */
  .tabsComponent__panels {
    display: none;
  }

  /* Mobile accordion panels live inside the nav, right after each tab button */
  .tabsComponent__panel--mobile {
    background-color: #fff;
    color: var(--wsd-navy);
    display: block;
    padding: 0 2rem 2.2rem;
    width: 100%;
  }

  .tabsComponent__panel--mobile[hidden] {
    display: none !important;
  }

  .tabsComponent__panel--mobile,
  .tabsComponent__panel--mobile p {
    font-size: 1.6rem;
    line-height: 2.2rem;
  }

  .tabsComponent__footer,
  .tabsComponent__footer p {
    font-size: 2rem;
    line-height: 2.8rem;
  }

  .tabsComponent--bg-navy .tabsComponent__nav,
  .tabsComponent--bg-navy .tabsComponent__panel--mobile {
    background-color: #fff;
    color: var(--wsd-navy);
  }
  .tabsComponent--bg-navy .tabsComponent__tab,
  .tabsComponent--bg-navy .tabsComponent__tabLabel,
  .tabsComponent--bg-navy .tabsComponent__tabPlus,
  .tabsComponent--bg-navy .tabsComponent__panel--mobile,
  .tabsComponent--bg-navy .tabsComponent__panel--mobile p {
    color: var(--wsd-navy);
  }
}

/* ============================================================
   Resource Cards 1 (Figma: 1:2848 desktop, 1:2686 mobile)
   White-bg 4-col card row with dynamic title/desc/button/subtext.
   ============================================================ */

.resourceCards1 {
  background-color: #fff;
  padding: var(--resourceCards1-padding-top-desktop, 10.8rem) 18.8rem var(--resourceCards1-padding-bottom-desktop, 8.8rem);
  width: 100%;
}

.resourceCards1--bg-grey {
  background-color: var(--wsd-bg-grey, #F0F4F8);
}

.resourceCards1--bg-navy {
  background-color: var(--Dark-Blue, #052A56);
}

.resourceCards1__container {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin: 0 auto;
  max-width: 120rem;
  width: 100%;
}

.resourceCards1__intro {
  color: var(--Dark-Blue, #052A56);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  text-align: center;
  width: 100%;
  word-break: break-word;
}

#resources-page-cards-1 .resourceCards1__intro {
  gap: 2.2rem;
}

/* Desktop-only so the ID selector doesn't override the mobile breakpoint rules. */
@media (min-width: 768px) {
  #resources-page-cards-1 .resourceCards1__container {
    gap: 4.4rem;
  }

  #resources-page-cards-1 .resourceCards1__card {
    padding: 3.3rem 2.2rem;
  }

  #resources-page-cards-1 .resourceCards1__cardButton {
    margin-top: 2rem;
    width: 100%;
  }
}

@media (max-width: 767px) {
  #resources-page-cards-1 .resourceCards1__cardTitle {
    font-size: 2.6rem;
    line-height: 2.6rem;
  }

  #resources-page-cards-1 .resourceCards1__grid {
    gap: 4rem;
  }
}

.resourceCards1--bg-navy .resourceCards1__intro,
.resourceCards1--bg-navy .resourceCards1__introTitle,
.resourceCards1--bg-navy .resourceCards1__introDesc,
.resourceCards1--bg-navy .resourceCards1__introDesc p {
  color: #fff;
}

.resourceCards1__introTitle {
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 4.2rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 4.2rem;
  margin: 0;
}

.resourceCards1__introDesc,
.resourceCards1__introDesc p {
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2.8rem;
  margin: 0;
}

.resourceCards1__introDesc > *:not(:last-child) {
  margin-bottom: 1.2rem;
}

.resourceCards1__grid {
  column-gap: 2.2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto;
  row-gap: 0;
  width: 100%;
  gap: 2.2rem;
}

.resourceCards1__grid--hasSubtext {
  grid-template-rows: auto auto auto;
}

.resourceCards1--cols-1 .resourceCards1__grid {
  grid-template-columns: minmax(0, 1fr);
}

.resourceCards1--cols-2 .resourceCards1__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resourceCards1--cols-3 .resourceCards1__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.resourceCards1--cols-4 .resourceCards1__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Keep a three-card result centered when one card is removed from a four-card layout. */
@media (min-width: 768px) {
  .resourceCards1--cols-4 .resourceCards1__grid:has(> .resourceCards1__card:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-left: auto;
    margin-right: auto;
    max-width: 75%;
  }
}

.resourceCards1--cols-5 .resourceCards1__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.resourceCards1__card {
  background-color: #fff;
  border: 1px solid var(--wsd-teal, #1DBCB9);
  border-radius: 3.3rem;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  justify-items: stretch;
  padding: 2.2rem 1.5rem;
  row-gap: 0;
  width: 100%;
}

.resourceCards1__grid--hasSubtext .resourceCards1__card {
  grid-row: span 3;
}

.resourceCards1__cardText {
  color: var(--Dark-Blue, #052A56);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  justify-self: stretch;
  text-align: center;
  width: 100%;
  word-break: break-word;
}

.resourceCards1__cardTitle {
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 3.2rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 3.2rem;
  margin: 0;
}

.resourceCards1__cardDesc,
.resourceCards1__cardDesc p {
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2.2rem;
  margin: 0;
}

.resourceCards1__cardDesc > *:not(:last-child) {
  margin-bottom: 0.8rem;
}

.resourceCards1__cardButton {
  align-items: center;
  align-self: start;
  background: var(--Dark-Blue, #052A56);
  border: 0.2rem solid var(--Dark-Blue, #052A56); /* reserves space for the hover border */
  border-radius: 4.8rem;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  justify-self: center;
  padding: 1.3rem 5.5rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  width: auto;
  margin-top: 1.1rem;
}

.resourceCards1__cardButton:hover,
.resourceCards1__cardButton:focus {
  background: var(--wsd-white, #fff);
  border-color: #052A56;
  color: #052A56;
  text-decoration: none;
}

.resourceCards1__cardButton:hover .resourceCards1__cardButtonLabel,
.resourceCards1__cardButton:focus .resourceCards1__cardButtonLabel {
  color: #052A56;
}

.resourceCards1__cardButtonLabel {
  color: #fff;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.8rem;
  transition: color 0.2s ease;
  white-space: nowrap;
  word-break: break-word;
}

/* ============================================================
   THANK YOU BLOCK — Figma nodes: 1:4128 (desktop), 1:4779 (mobile)
   ============================================================ */
.wsdThankYou {
  padding: 8.8rem 0;
}

.wsdThankYou--bg-white {
  background-color: var(--wsd-white);
}

.wsdThankYou--bg-grey {
  background-color: var(--wsd-bg-grey);
}

.wsdThankYou--bg-navy {
  background-color: var(--wsd-navy);
}

.wsdThankYou__inner {
  max-width: 144rem;
  margin: 0 auto;
  padding: 0 29.7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}

.wsdThankYou__frame {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2.2rem;
  color: var(--wsd-navy);
  text-align: left;
}

.wsdThankYou__title {
  margin: 0;
  font-family: var(--wsd-font-body);
  font-size: 4.2rem;
  font-style: normal;
  font-weight: 600;
  line-height: 4.2rem;
  letter-spacing: 0;
  color: inherit;
}

.wsdThankYou__description {
  width: 69.5rem;
  max-width: 100%;
  margin: 0;
  color: inherit;
}

.wsdThankYou__description p {
  margin: 0;
  font-family: var(--wsd-font-body);
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.8rem;
  letter-spacing: 0;
  color: inherit;
}

.wsdThankYou__description p + p {
  margin-top: 2.2rem;
}

.wsdThankYou__description strong,
.wsdThankYou__description b {
  font-weight: 700;
}

.wsdThankYou__note {
  margin: 0;
  font-family: var(--wsd-font-body);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.8rem;
  letter-spacing: 0;
  color: inherit;
  padding-top: 0.5rem;
}

.wsdThankYou__actions {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wsdThankYou__button {
  display: inline-flex;
  align-items: center;
  padding: 0 0 0.6rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--wsd-teal);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.wsdThankYou__buttonLabel {
  font-family: var(--wsd-font-body);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.2rem;
  color: inherit;
  white-space: nowrap;
}

.wsdThankYou__buttonLabel::after {
  background-color: currentColor;
  content: "";
  display: inline-block;
  height: 1.2rem;
  margin-left: 0.6rem;
  vertical-align: middle;
  width: 1.6rem;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12' fill='none'%3E%3Cpath d='M9.6 0.4L8.44 1.56L12.06 5.2H0V6.8H12.06L8.44 10.44L9.6 11.6L15.2 6L9.6 0.4Z' fill='black'/%3E%3C/svg%3E");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12' fill='none'%3E%3Cpath d='M9.6 0.4L8.44 1.56L12.06 5.2H0V6.8H12.06L8.44 10.44L9.6 11.6L15.2 6L9.6 0.4Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.wsdThankYou__buttonIcon {
  display: none;
}

.wsdThankYou__button:hover,
.wsdThankYou__button:focus-visible {
  color: var(--wsd-navy);
  text-decoration: none;
  outline: none;
}

.wsdThankYou--bg-navy .wsdThankYou__frame,
.wsdThankYou--bg-navy .wsdThankYou__title,
.wsdThankYou--bg-navy .wsdThankYou__description,
.wsdThankYou--bg-navy .wsdThankYou__description p,
.wsdThankYou--bg-navy .wsdThankYou__note {
  color: var(--wsd-white);
}

.wsdThankYou--bg-navy .wsdThankYou__button:hover,
.wsdThankYou--bg-navy .wsdThankYou__button:focus-visible {
  color: var(--wsd-white);
}

@media (max-width: 767px) {
  .wsdThankYou {
    padding: 4.4rem 0;
  }

  .wsdThankYou__inner {
    padding: 0 2rem;
    align-items: flex-start;
    gap: 2.2rem;
  }

  .wsdThankYou__note {
    padding-top: 0 !important;
  }

  .wsdThankYou__frame {
    gap: 2.2rem;
  }

  .wsdThankYou__title {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  .wsdThankYou__description {
    width: 100%;
  }

  .wsdThankYou__actions {
    justify-content: flex-start;
    width: 100%;
  }

  .wsdThankYou__button {
    max-width: 100%;
  }

  .wsdThankYou__buttonLabel {
    white-space: normal;
    overflow-wrap: break-word;
  }
}

.resourceCards1__cardSubtextSlot {
  align-self: start;
  justify-self: stretch;
  margin-top: 0;
  width: 100%;
}

.resourceCards1__card--hasSubtext .resourceCards1__cardSubtextSlot {
  margin-top: 1.1rem;
}

.resourceCards1__cardSubtext,
.resourceCards1__cardSubtext p,
.resourceCards1__cardSubtext a {
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2.2rem;
  margin: 0;
  text-align: center;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.resourceCards1__cardSubtext {
  width: 101%;
}

.resourceCards1__cardSubtext--navy,
.resourceCards1__cardSubtext--navy p,
.resourceCards1__cardSubtext--navy a {
  color: #052A56;
}

.resourceCards1__cardSubtext--pink,
.resourceCards1__cardSubtext--pink p,
.resourceCards1__cardSubtext--pink a {
  color: #FF00C8;
}

/* Subgrid fallback for older browsers: cards become flex columns with reserved subtext space. */
@supports not (grid-template-rows: subgrid) {
  .resourceCards1__card {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
  }

  .resourceCards1__grid--hasSubtext .resourceCards1__cardSubtextSlot {
    min-height: 6.6rem;
  }
}

@media (max-width: 1199px) {
  .resourceCards1 {
    padding: 8.8rem 6rem 6.4rem;
  }
}

@media (max-width: 991px) {
  .resourceCards1 {
    padding: 6.4rem 4rem;
  }
}

@media (max-width: 767px) {
  .resourceCards1 {
    padding: 4.4rem 2rem;
  }

  .resourceCards1__container {
    gap: 2.2rem;
  }

  .resourceCards1__intro {
    gap: 2.2rem;
  }

  .resourceCards1__introTitle {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  .resourceCards1__introDesc,
  .resourceCards1__introDesc p {
    font-size: 2rem;
    line-height: 2.8rem;
  }

  .resourceCards1__grid,
  .resourceCards1--cols-1 .resourceCards1__grid,
  .resourceCards1--cols-2 .resourceCards1__grid,
  .resourceCards1--cols-3 .resourceCards1__grid,
  .resourceCards1--cols-4 .resourceCards1__grid,
  .resourceCards1--cols-5 .resourceCards1__grid {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    grid-template-columns: none;
    grid-template-rows: none;
  }

  .resourceCards1__card {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-row: auto;
    grid-template-rows: none;
    padding: 2.2rem;
    padding-top: 3.3rem;
  }

  .resourceCards1__cardText {
    flex: 0 1 auto;
  }

  .resourceCards1__cardButton {
    align-self: center;
    border-radius: 4.8rem;
    display: inline-flex;
    margin-top: 2rem;
    padding: 1.3rem 3.8rem;
    width: auto;
  }

  .resourceCards1__cardButtonLabel {
    font-size: 1.8rem;
    line-height: 1.8rem;
  }

  .resourceCards1__cardSubtextSlot {
    min-height: 0;
  }

  .resourceCards1__cardSubtext {
    width: 100%;
  }
}

/* ============================================================
   Story Video Player (Figma: 1:3693 desktop, 1:3880 mobile)
   Video placeholder block with play overlay + adjacent text.
   ============================================================ */

.storyVideoPlayer {
  background-color: var(--wsd-bg-grey, #F0F4F8);
  padding: 8.8rem 18.8rem;
  width: 100%;
}

.storyVideoPlayer--bg-grey {
  background-color: var(--wsd-bg-grey, #F0F4F8);
}

.storyVideoPlayer--bg-white {
  background-color: #fff;
}

.storyVideoPlayer--bg-navy {
  background-color: var(--Dark-Blue, #052A56);
}

.storyVideoPlayer__container {
  margin: 0 auto;
  max-width: 112.4rem;
  width: 100%;
}

.storyVideoPlayer__main {
  align-items: center;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 73.7rem) minmax(0, 1fr);
}

.storyVideoPlayer__mediaWrap {
  width: 100%;
}

.storyVideoPlayer__mediaLink {
  display: block;
  text-decoration: none;
}

.storyVideoPlayer__media {
  aspect-ratio: 16 / 9;
  border-radius: 1.1rem;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.storyVideoPlayer__image {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.storyVideoPlayer__image--mobile {
  display: none;
}

.storyVideoPlayer__play {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  display: none;
  height: 7.2rem;
  justify-content: center;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 7.2rem;
}

.storyVideoPlayer__playIcon {
  border-bottom: 1.8rem solid transparent;
  border-left: 2.9rem solid #A5AEC7;
  border-top: 1.8rem solid transparent;
  height: 0;
  margin-left: 0.9rem;
  width: 0;
}

.storyVideoPlayer__content {
  color: var(--Dark-Blue, #052A56);
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  min-width: 0;
  padding-left: 2rem;
}

.storyVideoPlayer__title {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 4.2rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 4.2rem;
  margin: 0;
}

.storyVideoPlayer__description,
.storyVideoPlayer__description p {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2.8rem;
  margin: 0;
}

.storyVideoPlayer__description > *:not(:last-child) {
  margin-bottom: 1.1rem;
}

.storyVideoPlayer--bg-navy .storyVideoPlayer__title,
.storyVideoPlayer--bg-navy .storyVideoPlayer__description,
.storyVideoPlayer--bg-navy .storyVideoPlayer__description p {
  color: #fff;
}

@media (min-width: 768px) {
  #custom-video-player.storyVideoPlayer {
    padding: 8.8rem 12.65rem !important;
  }

  #custom-video-player .storyVideoPlayer__container {
    max-width: 118.7rem !important;
  }
}

.meet-colin-card .storyVideoPlayer__description {
  padding-right: 1rem;
}

#custom-video-player .storyVideoPlayer__description p:nth-of-type(2) {
  padding-top: 1.7rem;
}

#custom-video-player span.storyVideoPlayer__play {
  display: none;
}

@media (max-width: 767px) {
  #custom-video-player .storyVideoPlayer__description p:nth-of-type(1) {
    padding-right: 0.2rem;
  }

  #custom-video-player .storyVideoPlayer__description > *:not(:last-child) {
    margin-bottom: 1.4rem;
  }
}

@media (max-width: 1199px) {
  .storyVideoPlayer {
    padding: 8.8rem 10rem;
  }
}

@media (max-width: 991px) {
  .storyVideoPlayer {
    padding: 6.4rem 6rem;
  }

  .storyVideoPlayer__main {
    grid-template-columns: minmax(0, 1fr);
  }

  .storyVideoPlayer__content {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .storyVideoPlayer {
    padding: 4.4rem 2rem;
  }

  .storyVideoPlayer__main {
    gap: 2rem;
  }

  .storyVideoPlayer__image--desktop {
    display: none;
  }

  .storyVideoPlayer__image--mobile {
    display: block;
  }

  .storyVideoPlayer__title {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  .storyVideoPlayer__description,
  .storyVideoPlayer__description p {
    font-size: 2rem;
    line-height: 2.8rem;
  }
}

/* ============================================================
   Family Support (Figma: 1:3785 desktop, 1:3846 mobile)
   Text-only story support section.
   ============================================================ */

.familySupport {
  background-color: var(--wsd-bg-grey, #F0F4F8);
  padding: 8.8rem 18.8rem;
  width: 100%;
}

.familySupport--bg-grey {
  background-color: var(--wsd-bg-grey, #F0F4F8);
}

.familySupport--bg-white {
  background-color: #fff;
}

.familySupport--bg-navy {
  background-color: var(--Dark-Blue, #052A56);
}

.familySupport__container {
  margin: 0 auto;
  max-width: 106.4rem;
  width: 100%;
}

.familySupport__content {
  color: var(--Dark-Blue, #052A56);
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.familySupport__title,
.familySupport__secondaryTitle {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}

.familySupport__title {
  font-size: 4.2rem;
  line-height: 4.2rem;
}

.familySupport__secondaryTitle {
  font-size: 3.2rem;
  line-height: 3.2rem;
}

.familySupport__description,
.familySupport__description p,
.familySupport__secondaryDescription,
.familySupport__secondaryDescription p {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2.8rem;
  margin: 0;
}

.familySupport__description > *:not(:last-child),
.familySupport__secondaryDescription > *:not(:last-child) {
  margin-bottom: 2.2rem;
}

.familySupport--bg-navy .familySupport__content,
.familySupport--bg-navy .familySupport__title,
.familySupport--bg-navy .familySupport__secondaryTitle,
.familySupport--bg-navy .familySupport__description,
.familySupport--bg-navy .familySupport__description p,
.familySupport--bg-navy .familySupport__secondaryDescription,
.familySupport--bg-navy .familySupport__secondaryDescription p {
  color: #fff;
}

@media (max-width: 1199px) {
  .familySupport {
    padding: 8.8rem 10rem;
  }
}

@media (max-width: 991px) {
  .familySupport {
    padding: 6.4rem 6rem;
  }
}

@media (max-width: 767px) {
  .familySupport {
    padding: 4.4rem 2rem;
  }

  .familySupport__container {
    max-width: 32rem;
  }

  .familySupport__title,
  .familySupport__secondaryTitle {
    font-size: 2.6rem;
    line-height: 2.6rem;
  }
}

/* ============================================================
   Life With DMD (Figma: 1:3780 desktop, 1:3841 mobile)
   Text-only story section.
   ============================================================ */

.lifeWithDmd {
  background-color: var(--wsd-bg-grey, #F0F4F8);
  padding: 8.8rem 18.8rem;
  width: 100%;
}

.lifeWithDmd--bg-grey {
  background-color: var(--wsd-bg-grey, #F0F4F8);
}

.lifeWithDmd--bg-white {
  background-color: #fff;
}

.lifeWithDmd--bg-navy {
  background-color: var(--Dark-Blue, #052A56);
}

.lifeWithDmd__container {
  margin: 0 auto;
  max-width: 106.4rem;
  width: 100%;
}

.lifeWithDmd__main {
  align-items: center;
  display: grid;
  gap: 6rem;
  grid-template-columns: minmax(0, 50.2rem) minmax(0, 50.2rem);
}

.lifeWithDmd__mediaWrap {
  width: 100%;
}

.lifeWithDmd__image {
  display: block;
  height: auto;
  width: 100%;
}

.lifeWithDmd__image--mobile {
  display: none;
}

.lifeWithDmd__content {
  color: var(--Dark-Blue, #052A56);
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.lifeWithDmd__title {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 4.2rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 4.2rem;
  margin: 0;
}

.lifeWithDmd__description,
.lifeWithDmd__description p {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2.8rem;
  margin: 0;
}

.lifeWithDmd__description > *:not(:last-child) {
  margin-bottom: 2.2rem;
}

.lifeWithDmd--bg-navy .lifeWithDmd__content,
.lifeWithDmd--bg-navy .lifeWithDmd__title,
.lifeWithDmd--bg-navy .lifeWithDmd__description,
.lifeWithDmd--bg-navy .lifeWithDmd__description p {
  color: #fff;
}

@media (min-width: 768px) {
  .lifeWithDmd__description p:nth-of-type(2) {
    padding-top: 0.5rem;
    padding-right: 1rem;
  }
}

@media (max-width: 1199px) {
  .lifeWithDmd {
    padding: 8.8rem 10rem;
  }

  .lifeWithDmd__main {
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 991px) {
  .lifeWithDmd {
    padding: 6.4rem 6rem;
  }

  .lifeWithDmd__main {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .lifeWithDmd {
    padding: 4.4rem 2rem;
  }

  .lifeWithDmd__container {
    max-width: 32rem;
  }

  .lifeWithDmd__main {
    gap: 2rem;
  }

  .lifeWithDmd__image--desktop {
    display: none;
  }

  .lifeWithDmd__image--mobile {
    display: block;
  }

  .lifeWithDmd__title {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  .lifeWithDmd__description p:nth-of-type(2) {
    padding-top: 0.6rem;
  }
}

/* ============================================================
   Sign Up Forms Selector (CF7)
   Figma: 1:4099, 1:4761, 1:5010, 1:4787
   ============================================================ */

.wsdSignupForm {
  background: var(--wsd-bg-grey, #F0F4F8);
  padding: 8.8rem 0;
}

.wsdSignupForm__container {
  margin: 0 auto;
  max-width: 84.6rem;
  width: calc(100% - 4rem);
}

.wsdSignupForm__intro {
  margin-bottom: 4rem;
}

.wsdSignupForm__title {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 4.2rem;
  font-weight: 600;
  line-height: 4.2rem;
  margin: 0;
}

.wsdSignupForm__description {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.8rem;
  margin: 2.2rem 0 0;
}

.wsdSignupForm__selector {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 2rem;
}

.wsdSignupForm__tab {
  align-items: center;
  background: #fff;
  border: 0.1rem solid #C4CEDA;
  border-radius: 1.2rem;
  color: var(--Dark-Blue, #052A56);
  cursor: pointer;
  display: flex;
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  justify-content: center;
  line-height: 2.4rem;
  min-height: 6rem;
  padding: 1.2rem 1.6rem;
  text-align: center;
  transition: all 0.2s ease;
}

.wsdSignupForm__tab:hover,
.wsdSignupForm__tab:focus-visible {
  border-color: #052A56;
}

.wsdSignupForm__tab.is-active {
  background: #052A56;
  border-color: #052A56;
  color: #fff;
}

.wsdSignupForm__selectWrap {
  display: none;
}

.wsdSignupForm__selectLabel {
  color: var(--Dark-Blue, #052A56);
  display: block;
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2.2rem;
  margin-bottom: 0.8rem;
}

.wsdSignupForm__select {
  appearance: none;
  background: #fff;
  background-image: linear-gradient(45deg, transparent 50%, #052A56 50%), linear-gradient(135deg, #052A56 50%, transparent 50%);
  background-position: calc(100% - 2rem) calc(50% - 0.2rem), calc(100% - 1.4rem) calc(50% - 0.2rem);
  background-repeat: no-repeat;
  background-size: 0.7rem 0.7rem, 0.7rem 0.7rem;
  border: 0.1rem solid #C4CEDA;
  border-radius: 1rem;
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 2.4rem;
  min-height: 5.6rem;
  padding: 1.4rem 4.4rem 1.4rem 1.6rem;
  width: 100%;
}

.wsdSignupForm__panels {
  background: #fff;
  border: 0.1rem solid #D7DFEA;
  border-radius: 1.6rem;
  padding: 2.4rem;
}

.wsdSignupForm__panel {
  display: none;
}

.wsdSignupForm__panel.is-active {
  display: block;
}

.wsdSignupForm__helper {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.8rem;
  line-height: 2.6rem;
  margin: 0;
}

.wsdSignupForm .wpcf7-form {
  display: grid;
  gap: 1.6rem;
}

.wsdSignupForm .wpcf7-form p {
  margin: 0;
}

.wsdSignupForm .wpcf7-form-control-wrap {
  display: block;
  margin-top: 0.8rem;
}

.wsdSignupForm .wpcf7-form label {
  color: var(--Dark-Blue, #052A56);
  display: block;
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2.2rem;
}

.wsdSignupForm .wpcf7-form input[type="text"],
.wsdSignupForm .wpcf7-form input[type="email"],
.wsdSignupForm .wpcf7-form input[type="tel"],
.wsdSignupForm .wpcf7-form input[type="number"],
.wsdSignupForm .wpcf7-form input[type="date"],
.wsdSignupForm .wpcf7-form select,
.wsdSignupForm .wpcf7-form textarea {
  background: #fff;
  border: 0.1rem solid #C4CEDA;
  border-radius: 1rem;
  color: #052A56;
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.7rem;
  line-height: 2.4rem;
  min-height: 5.6rem;
  padding: 1.4rem 1.6rem;
  width: 100%;
}

.wsdSignupForm .wpcf7-form textarea {
  min-height: 12rem;
}

.wsdSignupForm .wpcf7-form input[type="submit"] {
  background: #052A56;
  border: 0;
  border-radius: 999rem;
  color: #fff;
  cursor: pointer;
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.4rem;
  min-height: 5.4rem;
  padding: 1.2rem 2.4rem;
}

.wsdSignupForm .wpcf7-form input[type="submit"]:hover,
.wsdSignupForm .wpcf7-form input[type="submit"]:focus-visible {
  background: #031f40;
}

.wsdSignupForm .wpcf7-not-valid-tip {
  align-items: flex-start;
  color: var(--wsd-error, #F03D3E);
  font-size: 1.4rem;
  font-weight: 600;
  gap: 0.8rem;
  line-height: 2rem;
  margin-top: 0.8rem;
}

.wsdSignupForm .wpcf7-not-valid-tip::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='16' viewBox='0 0 19 16' fill='none'%3E%3Cpath d='M18.1758 13.7812C18.7383 14.7656 18.0352 15.9961 16.875 15.9961H1.86328C0.703125 15.9961 0 14.7656 0.5625 13.7812L8.08594 0.984375C8.64844 0 10.0898 0 10.6875 0.984375L18.1758 13.7812ZM8.54297 5.02734V9.52734C8.54297 10.0195 8.96484 10.3711 9.38672 10.3711C9.84375 10.3711 10.2305 10.0195 10.2305 9.52734V5.02734C10.2305 4.57031 9.84375 4.18359 9.38672 4.18359C8.89453 4.18359 8.54297 4.57031 8.54297 5.02734ZM9.38672 13.7461C9.98438 13.7461 10.4766 13.2539 10.4766 12.6562C10.4766 12.0586 9.98438 11.5664 9.38672 11.5664C8.75391 11.5664 8.26172 12.0586 8.26172 12.6562C8.26172 13.2539 8.75391 13.7461 9.38672 13.7461Z' fill='%23F03D3E'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  flex: 0 0 1.9rem;
  height: 1.6rem;
  margin-top: 0.1rem;
  width: 1.9rem;
}

.wsdSignupForm .wpcf7-response-output {
  font-size: 1.5rem;
  margin: 1.2rem 0 0;
}

.wsdSignupForm [data-role-section] {
  display: none;
}

.wsdSignupForm [data-role-section].is-visible {
  display: block;
}

/* ============================================================
   Role-based CF7 form  (.wsdRoleForm)
   Figma variants: 1:5022 (Patient), 1:5073 (Caregiver),
                   1:5125 (Someone),  1:5177 (HCP)
   ============================================================ */

.wsdRoleForm,
.wsdRoleForm .wpcf7-form {
  background: #fff;
  border: 0.1rem solid #B5C4D4;
  border-radius: 3.3rem;
  color: var(--Dark-Blue, #052A56);
  display: block;
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  padding: 4rem;
}

.wsdRoleForm .wpcf7-form {
  border: 0;
  padding: 0;
}

form.wpcf7-form.wsdRoleForm br:first-of-type {
  display: none !important;
}


.wsdRoleForm__required,
.wsdRoleForm p:first-of-type,
.wsdRoleForm .wpcf7-form > p:first-of-type {
  color: var(--Dark-Blue, #052A56);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.2rem;
  margin: 0 0 3.3rem;
}

.wsdRoleForm__placeholder {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.8rem;
  margin: 0;
}

p.wsdRoleForm__placeholder {
  font-size: 2rem !important;
  line-height: 2.8rem !important;
  margin: 0 !important;
}

.wsdRoleForm__legend,
.wsdRoleForm__label,
.wsdRoleForm label {
  color: var(--Dark-Blue, #052A56);
  display: flex;
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  gap: 0.8rem;
  letter-spacing: 0;
  line-height: 2.2rem;
}

label.wsdRoleForm__legend {
  margin-bottom: 1.1rem;
}

label.wsdRoleForm__label {
  margin-bottom: 1.1rem;
}

.wsdRoleForm__sectionHeading {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 3.2rem;
  margin: 0 0 3.3rem;
}

.wsdRoleForm hr,
.wsdRoleForm__divider {
  background: #B5C4D4;
  border: 0;
  height: 0.1rem;
  margin: 3.3rem 0;
  width: 100%;
  display: none;
}

.wsdRoleForm [data-role-section] {
  display: none;
}

.wsdRoleForm [data-role-section].is-visible,
.wsdRoleForm [data-role-section~="always"],
.wsdRoleForm [data-role-section~="all"],
.wsdRoleForm [data-role-section="none"],
.wsdRoleForm [data-role-section="empty"] {
  display: block;
}

.wsdRoleForm__row {
  display: grid;
  gap: 2.2rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-bottom: 2.2rem;
}

@media (min-width: 768px) {
  .wsdRoleForm__row.is-visible {
    display: flex !important;
    gap: 2rem;
    margin: 0;
  }
}

.wsdRoleForm__field {
  display: block;
  margin-bottom: 2.2rem;
}

.wsdRoleForm__actions.is-visible{
  display: flex !important;
  gap: 2.4rem !important;
}

p:has(.first-options) {
  padding-bottom: 3.3rem;
  border-bottom: 1px solid #B5C4D4;
  margin-bottom: 3.3rem;
}

.wsdRoleForm__field.custom-hcp-input.is-visible {
  width: 20.7rem;
}

.wsdRoleForm input[type="text"],
.wsdRoleForm input[type="email"] {
  background: var(--White, #FFF);
  border: 0.1rem solid var(--Dark-Blue, #052A56);
  border-radius: 0.8rem;
  box-sizing: border-box;
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.6rem;
  height: 4.6rem;
  line-height: 2.4rem;
  min-height: 4.6rem;
  padding: 1.1rem 1.6rem;
  width: 100%;
}

.wsdRoleForm input[type="tel"],
.wsdRoleForm input[type="number"] {
  background: #fff;
  border: 0.1rem solid #C4CEDA;
  border-radius: 1rem;
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.6rem;
  line-height: 2.2rem;
  min-height: 5rem;
  padding: 1.3rem 1.6rem;
  width: 100%;
}

/* HCP custom field sizing (Figma 1:5207) */
.wsdRoleForm div[data-role-section~="hcp"] .wsdRoleForm__label {
  margin-bottom: 1.1rem;
}

.wsdRoleForm input[name="npiNumber"] {
  background: var(--White, #FFF);
  border: 0.1rem solid var(--Dark-Blue, #052A56);
  border-radius: 0.8rem;
  box-sizing: border-box;
  height: 4.6rem;
  max-width: 100%;
  min-height: 4.6rem;
  padding: 1.1rem 1.6rem;
  width: 20.7rem;
}

.wsdRoleForm input::placeholder {
  color: #6E7A8A;
  opacity: 1;
}

.wsdRoleForm input:focus-visible {
  border-color: var(--Dark-Blue, #052A56);
  outline: none;
}

/* CF7 wraps radio / checkbox in span.wpcf7-list-item ; style natively */
.wsdRoleForm .wpcf7-list-item {
  align-items: center;
  display: flex;
  margin: 0;
}

span.wpcf7-form-control.wpcf7-radio {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

span.wpcf7-form-control.wpcf7-checkbox.wpcf7-validates-as-required {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.wsdRoleForm .wpcf7-list-item.last {
  margin-bottom: 0;
}

.wsdRoleForm .wpcf7-list-item-label {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.2rem;
}

.wsdRoleForm input[type="radio"],
.wsdRoleForm input[type="checkbox"] {
  height: 2rem;
  margin: 0;
  width: 2rem;
}

.wsdRoleForm input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='1' y='1' width='18' height='18' rx='9' stroke='%23052A56' stroke-width='2'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.wsdRoleForm input[type="radio"]:checked {
  background-image: radial-gradient(circle at center, #052A56 0 0.6rem, transparent 0.61rem), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='1' y='1' width='18' height='18' rx='9' stroke='%23052A56' stroke-width='2'/%3E%3C/svg%3E");
}

.wsdRoleForm input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(5, 42, 86, 0.22);
  outline: 0;
}

.wsdRoleForm input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='3.5' stroke='%23052A56'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
  border-radius: 0.4rem;
  cursor: pointer;
}

.wsdRoleForm input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='3.5' fill='%23052A56' stroke='%23052A56'/%3E%3Cpath d='M5.2 10.3L8.3 13.3L14.8 6.8' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.wsdRoleForm input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(5, 42, 86, 0.22);
  outline: 0;
}

.wsdRoleForm__terms,
.wsdRoleForm .wpcf7-acceptance .wpcf7-list-item-label {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.2rem;
}

.wsdRoleForm .wpcf7-acceptance .wpcf7-list-item,
.wsdRoleForm .wpcf7-checkbox .wpcf7-list-item {
  align-items: flex-start;
  display: flex;
  gap: 1.2rem;
  margin: 0;
}

.wsdRoleForm .wpcf7-acceptance .wpcf7-list-item-label {
  display: block;
  flex: 1;
}

.wsdRoleForm .wpcf7-acceptance input[type="checkbox"],
.wsdRoleForm .wpcf7-checkbox input[type="checkbox"] {
  flex-shrink: 0;
}

.wsdRoleForm .wsdCheckboxGroup .wpcf7-form-control-wrap > .wpcf7-not-valid-tip {
  display: none !important;
}

.wsdRoleForm .wsdCheckboxGroup .wpcf7-not-valid-tip.wsdGroupNotValid {
  display: none;
}

.wsdRoleForm .wsdCheckboxGroup .wpcf7-not-valid-tip.wsdGroupNotValid.is-visible {
  display: flex;
}

.wsdRoleForm__field.wsdCheckboxGroup.is-visible.is-invalid:has(.wpcf7-not-valid-tip.wsdGroupNotValid.is-visible) .mail-input p:last-of-type {
  margin-bottom: 0 !important;
}

.wsdRoleForm .wpcf7-form-control-wrap[data-name="diagnosisTimeframe"] > .wpcf7-not-valid-tip {
  display: none !important;
}

.wsdRoleForm .wpcf7-not-valid-tip {
  align-items: flex-start;
  color: var(--Dark-Blue, #052A56);
  font-family: var(--Primary-Font, "Nunito Sans"), sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  gap: 1rem;
  line-height: 2.2rem;
  margin-top: 1.1rem;
}

.wsdSignupForm .wpcf7-not-valid-tip,
.wsdRoleForm .wpcf7-not-valid-tip {
  display: none;
}

.wsdSignupForm .wpcf7-form-control.wpcf7-not-valid ~ .wpcf7-not-valid-tip,
.wsdRoleForm .wpcf7-form-control.wpcf7-not-valid ~ .wpcf7-not-valid-tip,
.wsdRoleForm .wsdCheckboxGroup .wpcf7-not-valid-tip.wsdGroupNotValid.is-visible {
  display: flex;
}

span.wpcf7-not-valid-tip {
  background: rgba(240, 61, 62, 0.10);
  border-radius: 0.8rem;
}

.wsdRoleForm .wpcf7-not-valid-tip::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='16' viewBox='0 0 19 16' fill='none'%3E%3Cpath d='M18.1758 13.7812C18.7383 14.7656 18.0352 15.9961 16.875 15.9961H1.86328C0.703125 15.9961 0 14.7656 0.5625 13.7812L8.08594 0.984375C8.64844 0 10.0898 0 10.6875 0.984375L18.1758 13.7812ZM8.54297 5.02734V9.52734C8.54297 10.0195 8.96484 10.3711 9.38672 10.3711C9.84375 10.3711 10.2305 10.0195 10.2305 9.52734V5.02734C10.2305 4.57031 9.84375 4.18359 9.38672 4.18359C8.89453 4.18359 8.54297 4.57031 8.54297 5.02734ZM9.38672 13.7461C9.98438 13.7461 10.4766 13.2539 10.4766 12.6562C10.4766 12.0586 9.98438 11.5664 9.38672 11.5664C8.75391 11.5664 8.26172 12.0586 8.26172 12.6562C8.26172 13.2539 8.75391 13.7461 9.38672 13.7461Z' fill='%23F03D3E'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  flex: 0 0 1.9rem;
  height: 1.6rem;
  margin-top: 0.1rem;
  width: 1.9rem;
}

.wsdRoleForm .wpcf7-response-output {
  border-radius: 0.8rem;
  font-size: 1.5rem;
  margin: 2rem 0 0;
  padding: 1.2rem 1.4rem;
}

/* Figma error message sizing (node 1:5242 = 766x44) */
.wsdSignupForm .wpcf7-not-valid-tip,
.wsdRoleForm .wpcf7-not-valid-tip {
  align-items: center;
  box-sizing: border-box;
  max-width: 76.6rem;
  min-height: 4.4rem;
  padding: 1.1rem;
  width: 100%;
}

.wsdSignupForm .wpcf7-not-valid-tip::before,
.wsdRoleForm .wpcf7-not-valid-tip::before {
  margin-top: 0;
}

.wsdRoleForm input[type="submit"],
.wsdRoleForm button[type="submit"],
.wsdRoleForm .wpcf7-submit {
  background: var(--Dark-Blue, #052A56) !important;
  border: 0;
  border-radius: 999rem;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.8rem;
  min-height: 4.8rem;
  min-width: 14rem;
  padding: 1.5rem 4rem;
  text-transform: capitalize;
  transition: background-color 0.2s ease;
}

.wsdRoleForm input[type="submit"]:hover,
.wsdRoleForm button[type="submit"]:hover,
.wsdRoleForm .wpcf7-submit:hover {
  background: #031f40;
}

/* CF7 wraps submit inside a <p> — form itself is .wsdRoleForm */
.wsdRoleForm > p:has(.wpcf7-submit),
.wsdRoleForm p:has(.wpcf7-submit) {
  margin: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 767px) {
  .wsdSignupForm .wpcf7-not-valid-tip,
  .wsdRoleForm .wpcf7-not-valid-tip {
    gap: 1rem;
    line-height: 2.2rem;
    max-width: none;
  }

  .wsdRoleForm .wpcf7-not-valid-tip {
    align-items: flex-start;
  }

  .wsdSignupForm .wpcf7-not-valid-tip::before,
  .wsdRoleForm .wpcf7-not-valid-tip::before {
    flex-basis: 1.9rem;
    height: 1.6rem;
    width: 1.9rem;
  }

  .wsdRoleForm .wpcf7-not-valid-tip::before {
    align-self: flex-start;
    margin-top: 0.1rem;
  }

  span.wpcf7-form-control.wpcf7-radio {
    gap: 2.2rem;
  }

  .wsdRoleForm input[name="npiNumber"] {
    width: 100%;
  }

  .custom-radio span.wpcf7-form-control.wpcf7-radio {
    gap: 1.1rem !important;
  }

  .wsdRoleForm .wpcf7-radio input[type="radio"] {
    background-size: 2rem 2rem;
    flex: 0 0 2rem;
    height: 2rem;
    max-width: 2rem;
    min-height: 2rem;
    min-width: 2rem;
    width: 2rem;
  }

  .wsdRoleForm__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
    margin-bottom: 1.6rem;
  }

  .wsdRoleForm__row.is-visible p {
    margin-bottom: 2rem !important;
  }

  .wsdRoleForm[data-role-selected="hcp"] .mail-input p,
  .wsdRoleForm .wpcf7-form[data-role-selected="hcp"] .mail-input p {
    margin-bottom: 2rem !important;
  }

  .wsdRoleForm__field {
    margin-bottom: 1.6rem;
  }

  .wsdRoleForm__actions.is-visible {
    display: flex !important;
    gap: 3.3rem !important;
    flex-direction: column;
  }

  .wsdRoleForm__sectionHeading {
    font-size: 2.6rem;
    line-height: 2.6rem;
  }
}

@media (min-width: 350px) and (max-width: 375px) {
  span.wpcf7-list-item.first.last {
    padding-right: 2rem;
  }
}

/* ============================================================
   Generic Form Block
   ============================================================ */

.wsdFormBlock {
  background: var(--wsd-bg-grey, #F0F4F8);
  padding: 8.8rem 0;
}

.wsdFormBlock--bg-grey {
  background: var(--wsd-bg-grey, #F0F4F8);
}

.wsdFormBlock--bg-white {
  background: #FFFFFF;
}

.wsdFormBlock--bg-navy {
  background: var(--Dark-Blue, #052A56);
}

.wsdFormBlock--bg-navy .wsdFormBlock__title,
.wsdFormBlock--bg-navy .wsdFormBlock__description,
.wsdFormBlock--bg-navy .wsdFormBlock__description * {
  color: #FFFFFF;
}

.wsdFormBlock--bg-navy .wsdFormBlock__description a {
  color: #FFFFFF;
  text-decoration: underline;
}

.wsdFormBlock__container {
  margin: 0 auto;
  max-width: 84.8rem;
  width: calc(100% - 4rem);
}

.wsdFormBlock__title {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 4.2rem;
  font-weight: 600;
  line-height: 4.2rem;
  margin: 0 0 2.2rem;
}

.wsdFormBlock__description {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.8rem;
  margin: 0 0 4rem;
}

.wsdFormBlock__description p {
  margin: 0 0 1.2rem;
}

.wsdFormBlock__description p:last-child {
  margin-bottom: 0;
}

.wsdFormBlock__description a {
  color: var(--Dark-Blue, #052A56);
  text-decoration: underline;
}

.wsdFormBlock__content {
  background: #fff;
  border: 0.1rem solid #D7DFEA;
  border-radius: 1.6rem;
  padding: 2.4rem;
}

.wsdFormBlock__content--flush {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.wsdFormBlock--bg-white .wsdFormBlock__content {
  background: #fff;
  border-color: #B5C4D4;
}

.wsdFormBlock--bg-white .wsdFormBlock__content--flush {
  background: transparent;
  border-color: transparent;
}

@media (max-width: 767px) {
  .wsdFormBlock {
    padding: 4.4rem 0;
  }

  .wsdFormBlock__container {
    max-width: none;
    padding: 0 2rem;
    width: 100%;
  }

  .wsdFormBlock__title {
    font-size: 3.2rem;
    line-height: 3.2rem;
    margin-bottom: 1.2rem;
  }

  .wsdFormBlock__description {
    font-size: 2rem;
    line-height: 2.8rem;
    margin-bottom: 2.2rem;
  }

  .wsdFormBlock__description br {
    display: none;
  }

  .wsdFormBlock__content {
    border-radius: 1.2rem;
    padding: 1.6rem;
  }

  .wsdFormBlock__content--flush {
    border-radius: 0;
    padding: 0;
  }
}

@media (max-width: 767px) {
  .wsdSignupForm {
    padding: 4.4rem 0;
  }

  .wsdSignupForm__container {
    max-width: 32rem;
    width: calc(100% - 4rem);
  }

  .wsdSignupForm__intro {
    margin-bottom: 2.2rem;
  }

  .wsdSignupForm__title {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  .wsdSignupForm__description {
    font-size: 2rem;
    line-height: 2.8rem;
    margin-top: 1.1rem;
  }

  .wsdSignupForm__selector {
    display: none;
  }

  .wsdSignupForm__selectWrap {
    display: block;
    margin-bottom: 1.6rem;
  }

  .wsdSignupForm__panels {
    border-radius: 1.2rem;
    padding: 1.6rem;
  }

  .wsdSignupForm .wpcf7-form {
    gap: 1.4rem;
  }
}

/* ============================================================
   Story Diagnosis (Figma: 78:6889 desktop, 78:7143 mobile)
   Two-column diagnosis + quote section with divider.
   ============================================================ */

.storyDiagnosis {
  background-color: var(--Dark-Blue, #052A56);
  padding: 8.8rem 18.8rem;
  width: 100%;
}

.storyDiagnosis--bg-navy {
  background-color: var(--Dark-Blue, #052A56);
}

.storyDiagnosis--bg-white {
  background-color: #fff;
}

.storyDiagnosis--bg-grey {
  background-color: var(--wsd-bg-grey, #F0F4F8);
}

.storyDiagnosis__container {
  margin: 0 auto;
  max-width: 106.4rem;
  width: 100%;
}

.storyDiagnosis__main {
  align-items: stretch;
  display: grid;
  gap: 4rem;
  grid-template-columns: minmax(0, 1fr) 0.2rem minmax(0, 1fr);
}

.storyDiagnosis__content,
.storyDiagnosis__quoteWrap {
  color: #fff;
  display: flex;
  flex-direction: column;
}

.storyDiagnosis__content {
  gap: 2.2rem;
}

.storyDiagnosis__quoteWrap {
  gap: 0.5rem;
}

.storyDiagnosis__title {
  color: #fff;
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 4.2rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 4.2rem;
  margin: 0;
}

.storyDiagnosis__description,
.storyDiagnosis__description p {
  color: #fff;
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2.8rem;
  margin: 0;
}

.storyDiagnosis__description > *:not(:last-child) {
  margin-bottom: 1.1rem;
}

.storyDiagnosis__divider {
  background-color: #77ECE0;
  width: 0.2rem;
}

.storyDiagnosis__quote {
  color: #fff;
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 3.2rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
}

.storyDiagnosis__quote,
.storyDiagnosis__quote p {
  line-height: 4.5rem;
  margin: 0;
}

.storyDiagnosis__quoteAuthor {
  color: #fff;
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 4.5rem;
}

.storyDiagnosis--bg-white .storyDiagnosis__content,
.storyDiagnosis--bg-white .storyDiagnosis__quoteWrap,
.storyDiagnosis--bg-white .storyDiagnosis__title,
.storyDiagnosis--bg-white .storyDiagnosis__description,
.storyDiagnosis--bg-white .storyDiagnosis__description p,
.storyDiagnosis--bg-white .storyDiagnosis__quote,
.storyDiagnosis--bg-white .storyDiagnosis__quote p,
.storyDiagnosis--bg-white .storyDiagnosis__quoteAuthor,
.storyDiagnosis--bg-grey .storyDiagnosis__content,
.storyDiagnosis--bg-grey .storyDiagnosis__quoteWrap,
.storyDiagnosis--bg-grey .storyDiagnosis__title,
.storyDiagnosis--bg-grey .storyDiagnosis__description,
.storyDiagnosis--bg-grey .storyDiagnosis__description p,
.storyDiagnosis--bg-grey .storyDiagnosis__quote,
.storyDiagnosis--bg-grey .storyDiagnosis__quote p,
.storyDiagnosis--bg-grey .storyDiagnosis__quoteAuthor {
  color: var(--Dark-Blue, #052A56);
}

@media (min-width: 768px) {
  .custom-padding .storyDiagnosis__description {
    padding-right: 2.5rem;
  }
}

@media (max-width: 1199px) {
  .storyDiagnosis {
    padding: 8.8rem 10rem;
  }

  .storyDiagnosis__quote {
    font-size: 2.8rem;
    line-height: 3.8rem;
  }

  .storyDiagnosis__quoteAuthor {
    font-size: 1.8rem;
    line-height: 3.8rem;
  }
}

@media (max-width: 991px) {
  .storyDiagnosis {
    padding: 6.4rem 6rem;
  }
}

@media (max-width: 767px) {
  .storyDiagnosis {
    padding: 4.4rem 2rem;
  }

  .storyDiagnosis__main {
    gap: 4.4rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .storyDiagnosis__title {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  .storyDiagnosis__description,
  .storyDiagnosis__description p {
    font-size: 2rem;
    line-height: 2.6rem;
  }

  .storyDiagnosis__divider {
    height: 0.2rem;
    width: 100%;
  }

  .storyDiagnosis__quote {
    font-size: 2.6rem;
  }

  .storyDiagnosis__quote,
  .storyDiagnosis__quote p {
    line-height: 3.2rem;
  }

  .storyDiagnosis__quoteWrap {
    gap: 0.5rem;
  }

  .storyDiagnosis__quoteAuthor {
    font-size: 1.8rem;
    line-height: 3.2rem;
  }
}

/* ============================================================
   Cell Therapy (Figma: 1:2968 desktop, 1:2735 mobile)
   Centered informational copy + 3 key benefit items.
   ============================================================ */

.cellTherapy {
  background-color: var(--wsd-bg-grey, #F0F4F8);
  padding: 8.8rem 18.8rem;
  width: 100%;
}

.cellTherapy--bg-grey {
  background-color: var(--wsd-bg-grey, #F0F4F8);
}

.cellTherapy--bg-white {
  background-color: #fff;
}

.cellTherapy--bg-navy {
  background-color: var(--Dark-Blue, #052A56);
}

.cellTherapy__container {
  align-items: center;
  color: var(--Dark-Blue, #052A56);
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 103.5rem;
  text-align: center;
  width: 100%;
}

@media (min-width: 1350px) and (max-width: 1500px) {
  .cellTherapy__container {
    margin-left: 0;
  }
}

.cellTherapy__title {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 4.2rem;
  font-weight: 600;
  line-height: 3.2rem;
  margin: 0;
  width: 100%;
}

.cellTherapy__introDesc,
.cellTherapy__introDesc p,
.cellTherapy__description,
.cellTherapy__description p {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.8rem;
  margin: 0;
  width: 100%;
}

.cellTherapy__introDesc {
  margin-top: 2.2rem;
}

.cellTherapy__subTitle {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 3.2rem;
  margin: 6rem 0 2.2rem;
  width: 100%;
}

.cellTherapy__notice {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.8rem;
  margin: 2.9rem 0 0;
  width: 100%;
}

.cellTherapy__noticeBracket {
  color: #F200FF;
}

.cellTherapy__includes {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.8rem;
  margin-bottom: 0;
  width: 100%;
}

.cellTherapy__items {
  display: grid;
  gap: 3.1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.6rem;
  width: 100%;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .cellTherapy__items {
    padding: 0 10rem;
  }
}

@media (min-width: 1200px) {
  .cellTherapy__items {
    padding: 0 18.7rem;
  }
}

.cellTherapy__item {
  align-items: center;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .cellTherapy__item {
    width: 18.8rem;
  }
}

.cellTherapy__itemIconImage {
  display: block;
  height: 8.8rem;
  object-fit: contain;
  object-position: center;
  width: 8.8rem;
}

.cellTherapy__itemIcon {
  color: #8AD7D8;
  display: inline-block;
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 5.8rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: -0.3rem 0.3rem 0 #052A56;
}

.cellTherapy__itemText,
.cellTherapy__itemText p {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.8rem;
  margin: 0;
  width: 100%;
  margin-top: -1rem;
}

.cellTherapy__description > *:not(:last-child),
.cellTherapy__itemText > *:not(:last-child) {
  margin-bottom: 1.1rem;
}

.cellTherapy--bg-navy .cellTherapy__title,
.cellTherapy--bg-navy .cellTherapy__introDesc,
.cellTherapy--bg-navy .cellTherapy__introDesc p,
.cellTherapy--bg-navy .cellTherapy__subTitle,
.cellTherapy--bg-navy .cellTherapy__description,
.cellTherapy--bg-navy .cellTherapy__description p,
.cellTherapy--bg-navy .cellTherapy__notice,
.cellTherapy--bg-navy .cellTherapy__includes,
.cellTherapy--bg-navy .cellTherapy__itemText,
.cellTherapy--bg-navy .cellTherapy__itemText p {
  color: #fff;
}

@media (max-width: 1199px) {
  .cellTherapy {
    padding: 8.8rem 10rem;
  }
}

@media (max-width: 991px) {
  .cellTherapy {
    padding: 6.4rem 4rem;
  }
}

@media (max-width: 767px) {
  .cellTherapy {
    padding: 4.4rem 2rem;
  }

  .cellTherapy__title {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  .cellTherapy__introDesc {
    margin-top: 2.2rem;
  }

  .cellTherapy__subTitle {
    font-size: 2.6rem;
    line-height: 3rem;
    margin: 2.2rem 0;
  }

  .cellTherapy__includes {
    margin-top: 0;
  }

  .cellTherapy__description br {
    display: none;
  }

  .cellTherapy__items {
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .cellTherapy__itemText,
  .cellTherapy__itemText p {
    margin-top: -1rem;
  }
}

/* ============================================================
   Therapy Works (Figma: 1:3016 desktop, 1:2763 mobile)
   Exon-skipping visual explainer with desktop/mobile images.
   ============================================================ */

.therapyWorks {
  background-color: var(--wsd-bg-grey, #F0F4F8);
  padding: 8.8rem 18.8rem;
  width: 100%;
}

.therapyWorks--bg-grey {
  background-color: var(--wsd-bg-grey, #F0F4F8);
}

.therapyWorks--bg-white {
  background-color: #fff;
}

.therapyWorks--bg-navy {
  background-color: var(--Dark-Blue, #052A56);
}

.therapyWorks__container {
  color: var(--Dark-Blue, #052A56);
  margin: 0 auto;
  max-width: 106.4rem;
  width: 100%;
}

.therapyWorks__title {
  color: var(--Dark-Blue, #052A56);
  text-align: center;
  font-family: var(--Primary-Font, "Nunito Sans"), sans-serif;
  font-size: 4.2rem;
  font-style: normal;
  font-weight: 600;
  line-height: 4.2rem;
  margin: 0;
}

.therapyWorks__title sup {
  font-size: 0.55em;
  position: relative;
  top: -1.4rem;
}

.therapyWorks__topGrid {
  display: grid;
  gap: 4.4rem 2.1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 4.8rem;
}

.therapyWorks__step {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2.55rem;
}

.therapyWorks__media {
  border-radius: 1.1rem;
  overflow: hidden;
  width: 100%;
}

@media (min-width: 768px) {
  .therapyWorks__media {
    width: 48.2rem;
    height: 27.1rem;
  }
}

.therapyWorks__image {
  display: block;
  height: auto;
  width: auto;
}

.therapyWorks__image--mobile {
  display: none;
}

.therapyWorks__copy,
.therapyWorks__copy p,
.therapyWorks__summary,
.therapyWorks__summary p {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.8rem;
  margin: 0;
}

.therapyWorks__copy p + p,
.therapyWorks__summary p + p {
  margin-top: 2.3rem;
}

.therapyWorks__copy strong,
.therapyWorks__copy b,
.therapyWorks__summary strong,
.therapyWorks__summary b {
  font-weight: 700;
}

@media (min-width: 768px) {
  .therapyWorks__topGrid .therapyWorks__step:first-child .therapyWorks__copy {
    padding-right: 1rem;
  }
}

.therapyWorks__divider {
  background-color: var(--wsd-teal, #1DBCB9);
  height: 0.1rem;
  margin: 4.3rem 0 4.8rem;
  width: 100%;
}

.therapyWorks__bottomFlow {
  display: grid;
  gap: 2.2rem 2.1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.therapyWorks__media--bottomLeft {
  grid-column: 1;
  grid-row: 1;
}

.therapyWorks__media--bottomRight {
  grid-column: 2;
  grid-row: 1;
}

.therapyWorks__summary {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 0.3rem;
}

.therapyWorks__footnote {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.2rem;
  margin: 2rem 0 0;
}

.therapyWorks--bg-navy .therapyWorks__title,
.therapyWorks--bg-navy .therapyWorks__copy,
.therapyWorks--bg-navy .therapyWorks__copy p,
.therapyWorks--bg-navy .therapyWorks__summary,
.therapyWorks--bg-navy .therapyWorks__summary p,
.therapyWorks--bg-navy .therapyWorks__footnote {
  color: #fff;
}

@media (max-width: 1199px) {
  .therapyWorks {
    padding: 8.8rem 10rem;
  }
}

@media (max-width: 991px) {
  .therapyWorks {
    padding: 6.4rem 4rem;
  }
}

@media (max-width: 767px) {
  .therapyWorks {
    padding: 4.4rem 2rem;
  }

  .therapyWorks__media {
    display: flex;
    justify-content: center;
  }

  .therapyWorks__title {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  .therapyWorks__title sup {
    top: -1.1rem;
  }

  .therapyWorks__topGrid {
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 3.3rem;
  }

  .therapyWorks__step {
    border-bottom: 0.1rem solid var(--wsd-teal, #1DBCB9);
    gap: 2.2rem;
    padding-bottom: 3.3rem;
    padding-top: 3.3rem;
  }

  .therapyWorks__step:first-child {
    border-top: 0.1rem solid var(--wsd-teal, #1DBCB9);
  }

  .therapyWorks__image--desktop {
    display: none;
  }

  .therapyWorks__image--mobile {
    display: block;
  }

  .therapyWorks__divider {
    display: none;
  }

  .therapyWorks__bottomFlow {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    margin-top: 3.3rem;
  }

  .therapyWorks__footnote {
    margin-top: 2.2rem;
  }
}

/* ============================================================
   Little Dystrophin (Figma: 1:3063 desktop, 1:2803 mobile)
   Icon + centered copy with highlighted sub-section.
   ============================================================ */

.littleDystrophin {
  background-color: var(--wsd-bg-grey, #F0F4F8);
  padding: 8.8rem 18.8rem;
  width: 100%;
}

.littleDystrophin--bg-grey {
  background-color: var(--wsd-bg-grey, #F0F4F8);
}

.littleDystrophin--bg-white {
  background-color: #fff;
}

.littleDystrophin--bg-navy {
  background-color: var(--Dark-Blue, #052A56);
}

.littleDystrophin__container {
  align-items: center;
  color: var(--Dark-Blue, #052A56);
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 106.4rem;
  text-align: center;
  width: 100%;
}

.littleDystrophin__iconWrap {
  align-items: center;
  display: flex;
  justify-content: center;
}

.littleDystrophin__icon {
  display: block;
  height: 8.8rem;
  object-fit: contain;
  object-position: center;
  width: 8.8rem;
}

.littleDystrophin__icon--mobile {
  display: none;
}

.littleDystrophin__title {
  color: var(--Dark-Blue, #052A56);
  text-align: center;
  font-family: var(--Primary-Font, "Nunito Sans"), sans-serif;
  font-size: 4.2rem;
  font-style: normal;
  font-weight: 600;
  line-height: 4.2rem;
  margin: 0;
  width: 100%;
}

h2.littleDystrophin__title {
  margin-top: 3.2rem;
}

.littleDystrophin__description,
.littleDystrophin__description p,
.littleDystrophin__highlightText,
.littleDystrophin__highlightText p {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.8rem;
  margin: 0;
  width: 100%;
}

.littleDystrophin__description strong,
.littleDystrophin__description b,
.littleDystrophin__highlightText strong,
.littleDystrophin__highlightText b {
  font-weight: 700;
}

.littleDystrophin__description {
  margin-top: 2.2rem;
}

.littleDystrophin__highlight {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: 100%;
}

.littleDystrophin__highlightTitle {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 3.2rem;
  margin: 0;
  max-width: 88.3rem;
}

h3.littleDystrophin__highlightTitle {
  margin-top: 3.3rem;
}

.littleDystrophin--bg-navy .littleDystrophin__title,
.littleDystrophin--bg-navy .littleDystrophin__description,
.littleDystrophin--bg-navy .littleDystrophin__description p,
.littleDystrophin--bg-navy .littleDystrophin__highlightTitle,
.littleDystrophin--bg-navy .littleDystrophin__highlightText,
.littleDystrophin--bg-navy .littleDystrophin__highlightText p {
  color: #fff;
}

@media (max-width: 1199px) {
  .littleDystrophin {
    padding: 8.8rem 10rem;
  }
}

@media (max-width: 991px) {
  .littleDystrophin {
    padding: 6.4rem 4rem;
  }
}

@media (max-width: 767px) {
  .littleDystrophin {
    padding: 4.6rem 2rem 4.4rem;
  }

  .littleDystrophin__container {
    padding: 0 2rem;
  }

  .littleDystrophin__icon--desktop {
    display: none;
  }

  .littleDystrophin__icon--mobile {
    display: block;
  }

  .littleDystrophin__icon {
    height: 6.4rem;
    width: 6.3rem;
  }

  .littleDystrophin__title {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  h2.littleDystrophin__title {
    margin-top: 3.3rem;
  }

  .littleDystrophin__description {
    margin-top: 1.1rem;
  }

  .littleDystrophin__highlight {
    gap: 1.3rem;
  }

  .littleDystrophin__highlightTitle {
    font-size: 2.5rem;
    line-height: 3.2rem;
  }
}

/* ============================================================
   Exon-Skipping Therapy (Figma: 1:2998 desktop, 1:2760 mobile)
   Centered title and copy block.
   ============================================================ */

.exonSkippingTherapy {
  background-color: var(--wsd-bg-grey, #F0F4F8);
  padding: 8.8rem 18.8rem;
  width: 100%;
}

.exonSkippingTherapy--bg-grey {
  background-color: var(--wsd-bg-grey, #F0F4F8);
}

.exonSkippingTherapy--bg-white {
  background-color: #fff;
}

.exonSkippingTherapy--bg-navy {
  background-color: var(--Dark-Blue, #052A56);
}

.exonSkippingTherapy__container {
  align-items: center;
  color: var(--Dark-Blue, #052A56);
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  margin: 0 auto;
  max-width: 106.4rem;
  text-align: center;
  width: 100%;
}

.exonSkippingTherapy__title {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 4.2rem;
  font-weight: 600;
  line-height: 4.2rem;
  margin: 0;
  width: 100%;
}

.exonSkippingTherapy__content,
.exonSkippingTherapy__content p {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.8rem;
  margin: 0;
  width: 100%;
}

.exonSkippingTherapy__content p + p {
  margin-top: 2.8rem;
}

.exonSkippingTherapy__content strong,
.exonSkippingTherapy__content b {
  font-weight: 700;
}

.exonSkippingTherapy--bg-navy .exonSkippingTherapy__title,
.exonSkippingTherapy--bg-navy .exonSkippingTherapy__content,
.exonSkippingTherapy--bg-navy .exonSkippingTherapy__content p {
  color: #fff;
}

@media (max-width: 1199px) {
  .exonSkippingTherapy {
    padding: 8.8rem 10rem;
  }
}

@media (max-width: 991px) {
  .exonSkippingTherapy {
    padding: 6.4rem 4rem;
  }
}

@media (max-width: 767px) {
  .exonSkippingTherapy {
    padding: 4.4rem 2rem;
  }

  .exonSkippingTherapy__container {
    gap: 2.2rem;
  }

  .treatment .exonSkippingTherapy__container {
    gap: 1.1rem;
  }

  .exonSkippingTherapy__title {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }
}

/* ============================================================
   Story Cards (Figma: 1:3495 desktop, 1:3529 mobile)
   Dynamic card grid with configurable columns + width mode.
   ============================================================ */

.storyCards {
  background-color: var(--wsd-bg-grey, #F0F4F8);
  padding: 8.8rem 16rem;
  width: 100%;
}

.storyCards--bg-white {
  background-color: #fff;
}

.storyCards--bg-grey {
  background-color: var(--wsd-bg-grey, #F0F4F8);
}

.storyCards--bg-navy {
  background-color: var(--Dark-Blue, #052A56);
}

.storyCards__container {
  margin: 0 auto;
  max-width: 112rem;
  width: 100%;
}

.storyCards__container,
.storyCards__intro {
  display: flex;
  flex-direction: column;
}

.storyCards__container {
  gap: 4rem;
}

.storyCards__container.storyCards__container--withIntroDesc {
  gap: 3.3rem;
}

.storyCards__intro {
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}

.storyCards__introTitle {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 4.2rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 4.2rem;
  margin: 0;
  width: 100%;
}

.storyCards__introDesc,
.storyCards__introDesc p {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2.8rem;
  margin: 0;
  width: 100%;
}

.storyCards__introDesc > *:not(:last-child) {
  margin-bottom: 1.1rem;
}

.storyCards__cards {
  align-items: stretch;
  display: grid;
  gap: 4rem;
  grid-auto-rows: 1fr;
  width: 100%;
}

.storyCards--width-fit.storyCards--cols-1 .storyCards__cards {
  grid-template-columns: minmax(0, 1fr);
}

.storyCards--width-fit.storyCards--cols-2 .storyCards__cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.storyCards--width-fit.storyCards--cols-3 .storyCards__cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.storyCards--width-fit.storyCards--cols-4 .storyCards__cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.storyCards--width-fixed .storyCards__cards {
  grid-template-columns: repeat(var(--storyCards-columns, 2), minmax(0, var(--storyCards-card-width, 34.6667rem)));
  justify-content: center;
}

.storyCards__card {
  background-color: #fff;
  border: 1px solid var(--wsd-teal, #1DBCB9);
  border-radius: 3.3rem;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  height: 100%;
  min-width: 0;
  padding: 2.2rem;
  width: 100%;
}

.storyCards__media {
  aspect-ratio: 16 / 9;
  border-radius: 1.1rem;
  overflow: hidden;
  width: 100%;
}

.storyCards__cardImage {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.storyCards__cardImage--mobile {
  display: none;
}

.storyCards__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2.2rem;
  width: 100%;
}

.storyCards__text {
  color: var(--Dark-Blue, #052A56);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1.1rem;
  text-align: center;
  width: 100%;
}

.storyCards__cardTitle {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 3.2rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 3.2rem;
  margin: 0;
}

.storyCards__cardDesc,
.storyCards__cardDesc p {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2.2rem;
  margin: 0;
}

.storyCards__button {
  align-items: center;
  background: #052a56;
  border: 0.2rem solid var(--Dark-Blue, #052A56); /* reserves space for the hover border */
  border-radius: 4.8rem;
  box-sizing: border-box;
  color: #fff;
  display: inline-flex;
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1.8rem;
  margin-top: auto;
  min-height: 4.8rem;
  padding: 1.3rem 3.8rem;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  width: 100%;
}

.storyCards__button:hover,
.storyCards__button:focus {
  background: var(--wsd-white, #fff);
  border-color: #052A56;
  color: #052A56;
  text-decoration: none;
}

.storyCards--bg-navy .storyCards__introTitle,
.storyCards--bg-navy .storyCards__introDesc,
.storyCards--bg-navy .storyCards__introDesc p,
.storyCards--bg-navy .storyCards__cardTitle,
.storyCards--bg-navy .storyCards__cardDesc,
.storyCards--bg-navy .storyCards__cardDesc p {
  color: #fff;
}

@media (min-width: 768px) {
  .custom-cards .storyCards__cards .storyCards__card:nth-last-child(2) .storyCards__cardTitle {
    margin-right: -2px !important;
  }

  .custom-cards .storyCards__cards .storyCards__card:last-child .storyCards__cardDesc {
    margin-right: -2px !important;
  }

  .custom-single-page .storyCards__card:first-child .storyCards__cardDesc {
    margin-right: -2px;
  }

  .meet-brantely .storyCards__card:nth-child(2) .storyCards__cardDesc {
    margin-right: -2px;
  }
}

@media (max-width: 1199px) {
  .storyCards {
    padding: 8.8rem 8rem;
  }
}

@media (max-width: 991px) {
  .storyCards {
    padding: 6.4rem 4rem;
  }

  .storyCards--width-fit.storyCards--cols-3 .storyCards__cards,
  .storyCards--width-fit.storyCards--cols-4 .storyCards__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .storyCards {
    padding: 4.4rem 2rem;
  }

  .storyCards__container {
    gap: 3.3rem;
  }

  .storyCards__cards,
  .storyCards--width-fit.storyCards--cols-1 .storyCards__cards,
  .storyCards--width-fit.storyCards--cols-2 .storyCards__cards,
  .storyCards--width-fit.storyCards--cols-3 .storyCards__cards,
  .storyCards--width-fit.storyCards--cols-4 .storyCards__cards,
  .storyCards--width-fixed .storyCards__cards {
    gap: 2rem;
    grid-auto-rows: auto;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }

  .storyCards__card {
    height: auto;
  }

  .storyCards__introTitle {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  .storyCards__cardTitle {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }

  .storyCards__cardImage--desktop {
    display: none;
  }

  .storyCards__cardImage--mobile {
    display: block;
  }
}

/* ============================================================
   Card Item Component (Figma: 1:4285 desktop, 1:4650 mobile)
   Sectioned list with logo + title + description + optional link.
   ============================================================ */

.cardItemComponent {
  background-color: var(--wsd-bg-grey, #F0F4F8);
  padding: 8.8rem 29.7rem;
  width: 100%;
}

.cardItemComponent--bg-white {
  background-color: #fff;
}

.cardItemComponent--bg-grey {
  background-color: var(--wsd-bg-grey, #F0F4F8);
}

.cardItemComponent--bg-navy {
  background-color: var(--Dark-Blue, #052A56);
}

.cardItemComponent__container {
  margin: 0 auto;
  max-width: 84.6rem;
  width: 100%;
}

.cardItemComponent__group {
  color: var(--Dark-Blue, #052A56);
  width: 100%;
}

.cardItemComponent__group + .cardItemComponent__group {
  margin-top: 6rem;
}

.cardItemComponent__intro {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
}

.cardItemComponent__introTitle {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 4.2rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 4.2rem;
  margin: 0;
}

.cardItemComponent__introDesc,
.cardItemComponent__introDesc p {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2.8rem;
  margin: 0;
}

.cardItemComponent__introDesc > *:not(:last-child) {
  margin-bottom: 1.1rem;
}

.cardItemComponent__introDesc {
  margin-bottom: 3.5rem;
}

.cardItemComponent__items {
  display: flex;
  flex-direction: column;
  gap: 3.4rem;
  padding-left: 1.3rem;
  width: 100%;
}

.cardItemComponent__item {
  align-items: start;
  display: grid;
  gap: 4.55rem;
  grid-template-columns: 15.6rem minmax(0, 1fr);
  width: 100%;
}

.cardItemComponent__itemLogo {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 6rem;
  width: 15.6rem;
}

@media (min-width: 768px) {
  .cardItemComponent__itemLogo {
    margin-top: var(--logo-mt, 0);
  }
}

.cardItemComponent__itemLogoImage {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  width: 15.6rem;
}

.cardItemComponent__itemLogoImage--mobile {
  display: none;
}

.cardItemComponent__itemBody {
  color: var(--Dark-Blue, #052A56);
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.cardItemComponent__itemTitle + .cardItemComponent__itemDesc {
  margin-top: 0.6rem;
}


.cardItemComponent__itemBody > .cardItemComponent__itemDesc + .cardItemComponent__itemLink {
  margin-top: 0;
}

.cardItemComponent__itemTitle {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 2.2rem;
  margin: 0;
}

.cardItemComponent__itemDesc,
.cardItemComponent__itemDesc p {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2.2rem;
  margin: 0;
}

.cardItemComponent__itemDesc > *:not(:last-child) {
  margin-bottom: 0.8rem;
}

.cardItemComponent__itemLink {
  color: var(--wsd-teal, #1DBCB9);
  display: inline-block;
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 2.2rem;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  word-break: break-word;
}

.cardItemComponent__itemLink:hover,
.cardItemComponent__itemLink:focus-visible {
  color: var(--wsd-teal, #1DBCB9);
}

.cardItemComponent--bg-navy .cardItemComponent__group,
.cardItemComponent--bg-navy .cardItemComponent__introTitle,
.cardItemComponent--bg-navy .cardItemComponent__introDesc,
.cardItemComponent--bg-navy .cardItemComponent__introDesc p,
.cardItemComponent--bg-navy .cardItemComponent__itemTitle,
.cardItemComponent--bg-navy .cardItemComponent__itemDesc,
.cardItemComponent--bg-navy .cardItemComponent__itemDesc p {
  color: #fff;
}

@media (max-width: 1199px) {
  .cardItemComponent {
    padding: 8.8rem 10rem;
  }
}

@media (max-width: 991px) {
  .cardItemComponent {
    padding: 6.4rem 6rem;
  }
}

@media (max-width: 767px) {
  .cardItemComponent {
    padding: 4.4rem 2rem;
  }

  .cardItemComponent__group + .cardItemComponent__group {
    margin-top: 4.4rem;
  }

  .cardItemComponent__intro {
    align-items: center;
    text-align: center;
  }

  .cardItemComponent__introTitle {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  .cardItemComponent__introDesc,
  .cardItemComponent__introDesc p {
    font-size: 2rem;
    line-height: 2.8rem;
  }

  .cardItemComponent__introDesc {
    margin-bottom: 0;
  }

  .cardItemComponent__items {
    margin-top: 2.8rem;
    padding-left: 0;
  }

  .cardItemComponent__item {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .cardItemComponent__itemLogo {
    min-height: 0;
    width: auto;
  }

  .cardItemComponent__itemBody {
    width: 100%;
  }

  .cardItemComponent__itemLogoImage--desktop {
    display: none;
  }

  .cardItemComponent__itemLogoImage--mobile {
    display: block;
    width: 15.6rem;
  }
}

/* ============================================================
   Accordion Component (Figma: 1:4191 desktop, 1:4574 mobile)
   Intro + dynamic question/answer accordion list.
   ============================================================ */

.accordionComponent {
  background-color: #fff;
  padding: 8.8rem 29.7rem 0;
  width: 100%;
}

@media (min-width: 1200px) {
  #faq-accordion-last {
    padding-bottom: 8.8rem;
  }
}

.accordionComponent--bg-grey {
  background-color: var(--wsd-bg-grey, #F0F4F8);
}

.accordionComponent--bg-navy {
  background-color: var(--Dark-Blue, #052A56);
}

.accordionComponent__container {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 3.3rem;
  margin: 0 auto;
  max-width: 86rem;
  width: 100%;
}

.accordionComponent__intro {
  color: var(--Dark-Blue, #052A56);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  text-align: left;
  width: 100%;
  word-break: break-word;
}

.accordionComponent--align-center .accordionComponent__intro {
  text-align: left;
}

.accordionComponent--align-right .accordionComponent__intro {
  text-align: right;
}

.accordionComponent--bg-navy .accordionComponent__intro,
.accordionComponent--bg-navy .accordionComponent__introTitle,
.accordionComponent--bg-navy .accordionComponent__introDesc,
.accordionComponent--bg-navy .accordionComponent__introDesc p {
  color: #fff;
}

.accordionComponent__introTitle {
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 4.2rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 4.2rem;
  margin: 0;
}

.accordionComponent__introDesc,
.accordionComponent__introDesc p {
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2.8rem;
  margin: 0;
}

.accordionComponent__introDesc > *:not(:last-child) {
  margin-bottom: 1.2rem;
}

.accordionComponent__list {
  background-color: #fff;
  border: 1px solid var(--wsd-teal, #1DBCB9);
  border-radius: 3.3rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}

.accordionComponent__item {
  border-top: 1px solid var(--wsd-teal, #1DBCB9);
  display: flex;
  flex-direction: column;
  width: 100%;
}

.accordionComponent__item:first-child {
  border-top: 0;
}

.accordionComponent__trigger {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--Dark-Blue, #052A56);
  cursor: pointer;
  display: flex;
  gap: 1.5rem;
  padding: 2.2rem 2rem;
  text-align: left;
  width: 100%;
}

.accordionComponent__trigger:focus-visible {
  outline: 2px solid var(--wsd-teal, #1DBCB9);
  outline-offset: -4px;
}

.accordionComponent__question {
  color: var(--Dark-Blue, #052A56);
  flex: 1 1 auto;
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 3rem;
  min-width: 0;
  padding: 1.9rem 0;
  text-align: left;
  word-break: break-word;
}

.accordionComponent__icon {
  align-items: center;
  background-color: var(--wsd-teal, #1DBCB9);
  border-radius: 5rem;
  color: var(--Dark-Blue, #052A56);
  display: flex;
  flex-shrink: 0;
  height: 2.8rem;
  justify-content: center;
  width: 2.8rem;
}

.accordionComponent__iconSign {
  display: block;
  font-size: 0;
  height: 1.5rem;
  position: relative;
  width: 1.5rem;
}

.accordionComponent__iconSign::before,
.accordionComponent__iconSign::after {
  background-color: var(--Dark-Blue, #052A56);
  border-radius: 0.3rem;
  content: '';
  height: 0.3rem;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
}

.accordionComponent__iconSign::after {
  transform: translateY(-50%) rotate(90deg);
}

.accordionComponent__item.is-open .accordionComponent__iconSign::after {
  display: none;
}

.accordionComponent__panel {
  padding: 0 2rem 2.2rem;
  width: 100%;
}

.accordionComponent__panel[hidden] {
  display: none;
}

.accordionComponent__answer,
.accordionComponent__answer p {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 3rem;
  margin: 0;
}

.accordionComponent__answer p {
  max-width: 76.3rem;
}

.accordionComponent__answer > *:not(:last-child) {
  margin-bottom: 3rem;
}

.accordionComponent .accordionComponent__answer ul {
  margin-bottom: 0;
  margin-left: 0.8rem;
  max-width: 73rem;
}

.accordionComponent__answer a {
  color: var(--Dark-Blue, #052A56);
  text-decoration: underline;
}

.accordionComponent--bg-navy .accordionComponent__list {
  background-color: #fff;
}

@media (min-width: 768px) {
  .faq-accordion .accordionComponent__item {
    padding: 3.8rem 2rem;
  }

  .faq-accordion .accordionComponent__trigger {
    padding: 0;
  }

  .faq-accordion .accordionComponent__question {
    padding: 0;
  }

  .faq-accordion .accordionComponent__panel {
    padding: 0;
  }
}

@media (max-width: 1199px) {
  .accordionComponent {
    padding: 8.8rem 8rem;
  }

  .faq-accordion.accordionComponent {
    padding: 8.8rem 8rem 0;
  }

  #faq-accordion-last {
    padding-bottom: 8.8rem;
  }
}

@media (max-width: 991px) {
  .accordionComponent {
    padding: 6.4rem 4rem;
  }

  .faq-accordion.accordionComponent {
    padding: 6.4rem 4rem 0;
  }

  #faq-accordion-last {
    padding-bottom: 6.4rem;
  }
}

@media (max-width: 767px) {
  .accordionComponent {
    padding: 4.4rem 2rem;
  }

  .faq-accordion.accordionComponent {
    padding: 4.4rem 2rem 0;
  }

  #faq-accordion-last {
    padding-bottom: 4.4rem;
  }

  .accordionComponent__container {
    gap: 2.2rem;
  }

  .accordionComponent__intro,
  .accordionComponent--align-left .accordionComponent__intro,
  .accordionComponent--align-center .accordionComponent__intro,
  .accordionComponent--align-right .accordionComponent__intro {
    gap: 1.1rem;
    text-align: center;
  }

  .accordionComponent__introTitle {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  .accordionComponent__introDesc,
  .accordionComponent__introDesc p {
    font-size: 2rem;
    line-height: 2.8rem;
  }

  .accordionComponent__trigger {
    padding: 2.2rem 2rem;
  }

  .accordionComponent__question {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 2.2rem;
    padding: 0.8rem 0;
  }

  .accordionComponent__answer,
  .accordionComponent__answer p {
    font-size: 1.6rem;
    line-height: 2.2rem;
  }

  .accordionComponent__answer p {
    max-width: 33rem;
  }

  .accordionComponent__answer > *:not(:last-child) {
    margin-bottom: 2.2rem;
  }

  .accordionComponent__panel {
    padding: 0 2rem 2.2rem;
  }

  .faq-accordion .accordionComponent__item {
    padding: 3rem 2rem 2.2rem;
  }

  .faq-accordion .accordionComponent__trigger {
    padding: 0;
  }

  .faq-accordion .accordionComponent__question {
    padding: 0;
  }

  .faq-accordion .accordionComponent__panel {
    padding: 1.8rem 0 0;
  }
}

#accordion-component-519-5 {
  padding-bottom: 9rem;
}

@media (max-width: 767px) {
  #accordion-component-519-5 {
    padding-bottom: 4.4rem;
  }
}

/* ============================================================
   TYPE SCALE — desktop px from Figma (÷10 for rem).
   Ranked by usage. Role names are inferred — confirm in Figma.
   Mobile sizes handled by rem html scaling, not separate tokens.
   ------------------------------------------------------------
   ROLE        FAMILY        WEIGHT  SIZE      LINE-HEIGHT   rem (size/lh)   USAGE
   hero-xl     Acumin VF     900     78px      66px          7.8 / 6.6       x15  (home hero)
   hero        Acumin VF     900     44px      38px          4.4 / 3.8       x15  (mobile/section hero)
   h1          Nunito Sans   600     42px      42px          4.2 / 4.2       x80
   h2          Nunito Sans   600     32px      32px          3.2 / 3.2       x228 (most common heading)
   h3          Nunito Sans   600     26px      26px          2.6 / 2.6       x51
   h4          Nunito Sans   600     22px      22px          2.2 / 2.2       x68
   body-lg     Nunito Sans   400     20px      28px          2.0 / 2.8       x225
   body        Nunito Sans   400     16px      22px          1.6 / 2.2       x684 (BASE)
   body-bold   Nunito Sans   700     16px      22px          1.6 / 2.2       x189
   label       Nunito Sans   700     18px      18px          1.8 / 1.8       x595 (buttons/labels)
   body-sm     Nunito Sans   400     14px      22px          1.4 / 2.2       x50
   caption     Nunito Sans   400     11px      15px          1.1 / 1.5       x15
   footer-body Agenda        400     18px      24px          1.8 / 2.4       x91
   legal       Inter         400     13px      20px          1.3 / 2.0       x15
   ------------------------------------------------------------
   IGNORED AS NOISE (Figma markers / one-offs, do NOT tokenize):
   #9747FF (component-set purple), #FF00C8 (redline magenta),
   #FCB53B / #F7B334 (single use yellow), #EE8266, #D85729, #7EB293,
   #0071D0 / #0082CA, #C9DEF4, #636467 / #666666.
   "Acumin Variable Concept" / "Futura PT" = stray fonts, ignore.
   ============================================================ */

/* Main container width — override Bootstrap's 1060px cap with a rem value
   (loads last, so it wins over the Bootstrap rule of the same breakpoint). */
@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 106rem;
  }
}

/* Opedia search bar — updated spacing, control sizing, and button type
   (overrides the compiled style.css rules; loads last). */
.searchBar {
  top: 0;
  left: 0;
  padding: 8.7rem 0 3.3rem;
  position: sticky;
  background: #fff;
}
@media (max-width: 1199.98px) {
  .duchenneOpediaPage .searchBar .searchForm {
    margin-top: 1.5rem;
  }
}
@media (max-width: 767.98px) {
  .searchBar {
    padding-top: 4.3rem;
    padding-bottom: 2.3rem;
  }
  .searchBar .searchForm .form-control {
    padding: 0.6rem 1.1rem;
  }
  #searchButton .i.i-search {
    font-size: 2.1rem;
  }
}
.searchBar .searchForm .form-control {
  width: 100%;
  min-width: 48.2rem;
  padding: 0.6rem 1.3rem;
  border-radius: 10px;
  border-color: #052a56;
}
.searchBar .searchForm .ico {
  padding-left: 0.4rem;
  border-radius: 0 10px 10px 0;
  color: #fff;
  background-color: #052a56;
}

/* ============================================================
   JUMP LINK NAV block (desktop Figma: 1:1623)
   Sticky top section nav with author-defined anchor links.
   ============================================================ */
.jumpLinkNav {
  position: sticky;
  top: var(--jumpLinkNav-sticky-top, 0);
  z-index: 40;
  width: 100%;
  background-color: var(--wsd-navy);
}

.jumpLinkNav__inner {
  padding-left: 16.4rem;
  padding-right: 16.4rem;
}

.jumpLinkNav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.jumpLinkNav__item {
  display: flex;
}

.jumpLinkNav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3.3rem 1.5rem;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: var(--wsd-white);
  font-family: var(--wsd-font-body);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.8rem;
}

.jumpLinkNav__link:hover,
.jumpLinkNav__link:focus-visible {
  color: var(--wsd-white);
  text-decoration: underline;
  text-underline-offset: 0.35rem;
}

.jumpLinkNav__link.is-active,
.jumpLinkNav__link[aria-current="true"] {
  color: #1DBCB9;
  text-decoration: underline;
  text-underline-offset: 0.35rem;
}

@media (max-width: 1199.98px) {
  .jumpLinkNav__inner {
    padding-left: 2rem;
    padding-right: 2rem;
    overflow-x: auto;
  }

  .jumpLinkNav__list {
    justify-content: center;
    min-width: max-content;
  }
}

@media (max-width: 767.98px) {
  .jumpLinkNav {
    display: none;
  }
}

/* ============================================================
   ABOUT DUCHENNE INTRO block (desktop Figma: 1:1629, mobile: 1:2451)
   Intro text + statistic cards.
   ============================================================ */
.aboutDuchenneIntro {
  background-color: var(--wsd-white);
  color: var(--wsd-navy);
  padding: 8.8rem 18.8rem;
}

.aboutDuchenneIntro__inner {
  max-width: 106.4rem;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4rem;
}

.aboutDuchenneIntro__content {
  width: 49.6rem;
  padding-right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.aboutDuchenneIntro__title {
  margin: 0;
  font-family: var(--wsd-font-body);
  font-weight: 600;
  font-size: 4.2rem;
  line-height: 4.2rem;
  color: var(--wsd-navy);
}

.aboutDuchenneIntro__description {
  font-family: var(--wsd-font-body);
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.8rem;
  color: var(--wsd-navy);
}

.aboutDuchenneIntro__description p {
  margin-block-end: 2.8rem;
}

.aboutDuchenneIntro__description p:last-child {
  margin-block-end: 0;
}

.aboutDuchenneIntro__stats {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  text-align: center;
}

.aboutDuchenneIntro__stat {
  border: 0.3rem solid var(--wsd-teal);
  border-radius: 3.3rem;
  padding: 3.1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}

.aboutDuchenneIntro__statTitle {
  width: 100%;
  margin: 0;
  font-family: var(--wsd-font-body);
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 3.2rem;
  color: var(--wsd-navy);
}

.aboutDuchenneIntro__statBody {
  width: 100%;
  margin: 0;
  font-family: var(--wsd-font-body);
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.8rem;
  color: var(--wsd-navy);
}

@media (max-width: 1199.98px) {
  .aboutDuchenneIntro {
    padding: 6rem 4rem;
  }

  .aboutDuchenneIntro__inner {
    max-width: none;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .aboutDuchenneIntro__content {
    width: auto;
    flex: 1 1 40rem;
    padding-right: 0;
  }

  .aboutDuchenneIntro__stats {
    flex: 1 1 30rem;
  }
}

@media (max-width: 767px) {
  .aboutDuchenneIntro {
    padding: 4.4rem 2rem;
  }

  .aboutDuchenneIntro__inner {
    flex-direction: column;
    gap: 2.2rem;
  }

  .aboutDuchenneIntro__content {
    width: 100%;
    padding-right: 0;
    align-items: center;
    text-align: center;
  }

  .aboutDuchenneIntro__title {
    font-size: 3.2rem;
    line-height: 3.2rem;
    text-align: center;
  }

  .aboutDuchenneIntro__description {
    text-align: center;
  }

  .aboutDuchenneIntro__stat {
    border-width: 0.1rem;
    padding: 3.2rem;
    gap: 1.2rem;
  }

  .aboutDuchenneIntro__statTitle,
  .aboutDuchenneIntro__statBody {
    max-width: 25.4rem;
  }
}

/* ============================================================
   UNDERSTANDING DUCHENNE block (desktop Figma: 1:1640, mobile: 1:2460)
   Dark section with divider, illustration, and explanatory text groups.
   ============================================================ */
.understandingDuchenne {
  background-color: var(--wsd-navy);
  padding: 8.8rem 18.8rem;
}

.understandingDuchenne__inner {
  max-width: 106.4rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4.4rem;
}

.understandingDuchenne__title {
  margin: 0;
  width: 100%;
  color: var(--wsd-white);
  text-align: center;
  font-family: var(--wsd-font-body);
  font-weight: 600;
  font-size: 4.2rem;
  line-height: 4.2rem;
}

.understandingDuchenne__divider {
  width: 100%;
  height: 0.1rem;
  background-color: #77ece0;
}

.understandingDuchenne__content {
  display: flex;
  align-items: flex-start;
  gap: 4.4rem;
  width: 100%;
}

.understandingDuchenne__media {
  width: 34.3rem;
  flex-shrink: 0;
}

.understandingDuchenne__image {
  display: block;
  width: 100%;
  height: auto;
}

.understandingDuchenne__image--mobile {
  display: none;
}

.understandingDuchenne__copy {
  min-width: 0;
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.understandingDuchenne__group {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  margin-top: 2.8rem;
}

.understandingDuchenne__subTitle {
  margin: 0;
  color: var(--wsd-white);
  font-family: var(--wsd-font-body);
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 3.2rem;
}

.understandingDuchenne__text,
.understandingDuchenne__text p {
  margin: 0;
  color: var(--wsd-white);
  font-family: var(--wsd-font-body);
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.8rem;
}

.understandingDuchenne__text strong,
.understandingDuchenne__text b {
  font-weight: 700;
}

.understandingDuchenne__text > *:not(:last-child) {
  margin-bottom: 2.2rem;
}

@media (max-width: 1199.98px) {
  .understandingDuchenne {
    padding: 7rem 4rem;
  }

  .understandingDuchenne__content {
    gap: 3rem;
  }

  .understandingDuchenne__media {
    width: 28rem;
  }
}

@media (max-width: 767px) {
  .understandingDuchenne {
    padding: 4.4rem 2rem;
  }

  .understandingDuchenne__inner {
    gap: 3.3rem;
  }

  .understandingDuchenne__title {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  .understandingDuchenne__content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4rem;
  }

  .understandingDuchenne__media {
    width: 32rem;
    max-width: 100%;
  }

  .understandingDuchenne__image--desktop {
    display: none;
  }

  .understandingDuchenne__image--mobile {
    display: block;
  }

  .understandingDuchenne__copy {
    width: 100%;
  }

  .understandingDuchenne__subTitle {
    font-size: 2.6rem;
    line-height: 2.6rem;
  }

  .understandingDuchenne__group {
    margin-top: 0;
  }
}

/* ============================================================
   CARDIOMYOPATHY CARE block (desktop: 1:1843, mobile: 2561:12980)
   Two image/text cards and a dark CTA panel.
   ============================================================ */
.cardiomyopathyCare {
  padding: 8.8rem 18.8rem;
}

.cardiomyopathyCare--bg-grey {
  background-color: var(--wsd-bg-grey, #f0f4f8);
}

.cardiomyopathyCare--bg-white {
  background-color: var(--wsd-white);
}

.cardiomyopathyCare__inner {
  max-width: 106.4rem;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

.cardiomyopathyCare__item {
  display: flex;
  align-items: stretch; /* media pins top, content centers itself */
  gap: 4.4rem;
  width: 100%;
}

.cardiomyopathyCare__media {
  width: 30.5rem;
  flex-shrink: 0;
}

.cardiomyopathyCare__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1.1rem;
}

.cardiomyopathyCare__image--mobile {
  display: none;
}

.cardiomyopathyCare__content {
  min-width: 0;
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center; /* text vertically centered next to top-aligned image */
  gap: 2.2rem;
  color: var(--wsd-navy);
}

.cardiomyopathyCare__title {
  margin: 0;
  font-family: var(--wsd-font-body);
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 3.2rem;
  color: var(--wsd-navy);
}

.cardiomyopathyCare__body,
.cardiomyopathyCare__body p,
.cardiomyopathyCare__body li {
  margin: 0;
  font-family: var(--wsd-font-body);
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.8rem;
  color: var(--wsd-navy);
}

.cardiomyopathyCare__body strong,
.cardiomyopathyCare__body b {
  font-weight: 700;
}

.cardiomyopathyCare__body ul,
.cardiomyopathyCare__body ol {
  margin: 0;
  padding-left: 3rem;
}

.cardiomyopathyCare__body li:not(:last-child) {
  margin-bottom: 2.8rem; /* one line-height, desktop + mobile */
}

.cardiomyopathyCare__body > *:not(:last-child) {
  margin-bottom: 2.8rem; /* one line-height */
}

.cardiomyopathyCare__cta {
  background-color: var(--wsd-navy);
  border-radius: 3.3rem;
  padding: 4.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  width: 100%;
}

.cardiomyopathyCare__ctaText {
  margin: 0;
  max-width: 95.9rem;
  width: 100%;
  text-align: center;
  color: var(--wsd-white);
  font-family: var(--wsd-font-body);
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1.8rem;
}

.cardiomyopathyCare__ctaButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 4rem;
  border: 0.2rem solid var(--wsd-white);
  border-radius: 4.8rem;
  color: var(--wsd-white);
  text-decoration: none;
  font-family: var(--wsd-font-body);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.8rem;
  white-space: nowrap;
}

.cardiomyopathyCare__ctaButton:hover,
.cardiomyopathyCare__ctaButton:focus-visible {
  background: var(--wsd-white);
  border-color: var(--wsd-white);
  color: var(--wsd-navy);
  text-decoration: none;
}

@media (max-width: 1199.98px) {
  .cardiomyopathyCare {
    padding: 7rem 4rem;
  }

  .cardiomyopathyCare__item {
    gap: 3rem;
  }

  .cardiomyopathyCare__media {
    width: 24rem;
  }
}

@media (max-width: 767px) {
  .cardiomyopathyCare {
    padding: 0;
  }

  .cardiomyopathyCare__inner {
    gap: 0;
    max-width: none;
  }

  .cardiomyopathyCare__item {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }

  .cardiomyopathyCare__media {
    width: 100%;
  }

  .cardiomyopathyCare__image {
    border-radius: 0;
  }

  .cardiomyopathyCare__image--desktop {
    display: none;
  }

  .cardiomyopathyCare__image--mobile {
    display: block;
  }

  .cardiomyopathyCare__content {
    padding: 4.4rem 2rem;
  }

  .cardiomyopathyCare__title {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  .cardiomyopathyCare__item + .cardiomyopathyCare__item {
    margin-top: 0;
  }

  .cardiomyopathyCare__cta {
    border-radius: 0;
    padding: 4.4rem 2rem;
    gap: 4.4rem;
  }

  .cardiomyopathyCare__ctaText {
    font-size: 2rem;
    line-height: 2.8rem;
  }

  .cardiomyopathyCare__ctaButton {
    width: 100%;
  }
}

/* ============================================================
   SYMPTOMS STAGES block (desktop: 1:1653, mobile: 1:2479)
   Intro, divider, subhead, and 4 stage cards.
   ============================================================ */
.symptomsStages {
  padding: 8.8rem 18.8rem;
}

.symptomsStages--bg-grey {
  background-color: var(--wsd-bg-grey, #f0f4f8);
}

.symptomsStages--bg-white {
  background-color: var(--wsd-white);
}

.symptomsStages__inner {
  max-width: 106.4rem;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6.2rem;
}

.symptomsStages__intro {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  text-align: center;
  color: var(--wsd-navy);
}

.symptomsStages__introTitle {
  margin: 0;
  font-family: var(--wsd-font-body);
  font-weight: 600;
  font-size: 4.2rem;
  line-height: 4.2rem;
  color: var(--wsd-navy);
}

.symptomsStages__introText,
.symptomsStages__introText p {
  margin: 0;
  font-family: var(--wsd-font-body);
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.8rem;
  color: var(--wsd-navy);
}

.symptomsStages__divider {
  width: 100%;
  height: 0.1rem;
  background-color: var(--wsd-teal-bright, #77ece0);
}

.symptomsStages__body {
  display: flex;
  flex-direction: column;
  gap: 3.3rem;
  padding-top: 2.2rem;
}

.symptomsStages__subhead {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  text-align: center;
  color: var(--wsd-navy);
}

.symptomsStages__subheadTitle {
  margin: 0;
  font-family: var(--wsd-font-body);
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 3.2rem;
  color: var(--wsd-navy);
}

.symptomsStages__subheadText,
.symptomsStages__subheadText p {
  margin: 0;
  font-family: var(--wsd-font-body);
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.8rem;
  color: var(--wsd-navy);
}

.symptomsStages__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  column-gap: 0;
  row-gap: 4rem;
}
/* right-column cards nudge */
.symptomsStages__card:nth-child(even) {
  margin-left: -0.5rem;
}

.symptomsStages__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 47rem;
  max-width: 100%;
}

.symptomsStages__media {
  width: 9.95rem;
  height: 9.95rem;
}

.symptomsStages__image {
  width: 100%;
  height: auto;
  display: block;
}

.symptomsStages__image--mobile {
  display: none;
}

.symptomsStages__content {
  width: 100%;
}

.symptomsStages__cardTitle {
  margin: 0;
  font-family: var(--wsd-font-body);
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.8rem;
  color: var(--wsd-navy);
}

.symptomsStages__cardText,
.symptomsStages__cardText p,
.symptomsStages__cardText li {
  margin: 0;
  font-family: var(--wsd-font-body);
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.8rem;
  color: var(--wsd-navy);
}

.symptomsStages__cardText strong,
.symptomsStages__cardText b {
  font-weight: 700;
}

.symptomsStages__cardText ul,
.symptomsStages__cardText ol {
  margin: 0;
  padding-left: 3rem;
}
/* nested lists keep the same solid marker as the parent level */
.symptomsStages__cardText ul ul,
.symptomsStages__cardText ul ul li {
  list-style-type: disc;
}

.symptomsStages__cardText > *:not(:last-child) {
  margin-bottom: 0.6rem;
}

@media (max-width: 1199.98px) {
  .symptomsStages {
    padding: 7rem 4rem;
  }

  .symptomsStages__grid {
    column-gap: 4rem;
  }
  .symptomsStages__card {
    width: 100%; /* fixed 47rem is desktop-only */
  }
  .symptomsStages__card:nth-child(even) {
    margin-left: 0; /* nudge is desktop-only */
  }
}

@media (max-width: 767px) {
  .symptomsStages {
    padding: 4.4rem 2rem;
  }

  .symptomsStages__inner {
    gap: 4.4rem;
  }

  .symptomsStages__intro {
    gap: 1.2rem;
  }

  .symptomsStages__card {
    gap: 2.2rem;
  }

  .symptomsStages__introTitle {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  .symptomsStages__divider {
    background-color: var(--wsd-teal, #1dbcb9);
  }

  .symptomsStages__body {
    padding-top: 0;
    gap: 3rem;
  }

  .symptomsStages__subhead {
    gap: 1.6rem;
  }

  .symptomsStages__subheadTitle {
    font-size: 2.6rem;
    line-height: 2.6rem;
  }

  .symptomsStages__grid {
    grid-template-columns: 1fr;
    row-gap: 3rem;
  }

  .symptomsStages__card {
    align-items: center;
    width: 100%;
  }

  .symptomsStages__media {
    width: 8rem;
    height: 8rem;
  }

  .symptomsStages__image--desktop {
    display: none;
  }

  .symptomsStages__image--mobile {
    display: block;
  }
}

/* ============================================================
   CARDIOMYOPATHY block (desktop: 1:1765, mobile: 1:2554)
   Intro copy + symptom icon list + closing note.
   ============================================================ */
.cardiomyopathyBlock {
  padding: 8.8rem 18.8rem;
}

.cardiomyopathyBlock--bg-grey {
  background-color: var(--wsd-bg-grey, #f0f4f8);
}

.cardiomyopathyBlock--bg-white {
  background-color: var(--wsd-white);
}

.cardiomyopathyBlock__inner {
  max-width: 106.4rem;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6.6rem;
}

.cardiomyopathyBlock__intro {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  color: var(--wsd-navy);
}

.cardiomyopathyBlock__introTitle {
  margin: 0;
  font-family: var(--wsd-font-body);
  font-weight: 600;
  font-size: 4.2rem;
  line-height: 4.2rem;
  color: var(--wsd-navy);
}

.cardiomyopathyBlock__lead {
  margin: 0;
  font-family: var(--wsd-font-body);
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.8rem;
  color: var(--wsd-navy);
}

.cardiomyopathyBlock__introBody,
.cardiomyopathyBlock__introBody p {
  margin: 0;
  font-family: var(--wsd-font-body);
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.8rem;
  color: var(--wsd-navy);
}

.cardiomyopathyBlock__introBody strong,
.cardiomyopathyBlock__introBody b {
  font-weight: 700;
}

.cardiomyopathyBlock__introBody > *:not(:last-child) {
  margin-bottom: 2.2rem;
}

.cardiomyopathyBlock__divider {
  width: 100%;
  height: 0.1rem;
  background-color: var(--wsd-teal-bright, #77ece0);
}

.cardiomyopathyBlock__symptomsWrap {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  padding: 0 7.24rem;
  align-items: center;
}

.cardiomyopathyBlock__symptomsTitle {
  margin: 0;
  text-align: center;
  color: var(--wsd-navy);
  font-family: var(--wsd-font-body);
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 4.8rem;
}

.cardiomyopathyBlock__symptomsGrid {
  display: grid;
  grid-template-columns: 37rem 48.9rem; /* left / right symptom widths (desktop) */
  justify-content: center;
  column-gap: 6rem;
  row-gap: 3rem;
}

.cardiomyopathyBlock__symptom {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.cardiomyopathyBlock__iconWrap {
  width: 8.8rem;
  height: 8.8rem;
  flex-shrink: 0;
}

.cardiomyopathyBlock__icon {
  width: 100%;
  height: auto;
  display: block;
}

.cardiomyopathyBlock__icon--mobile {
  display: none;
}

.cardiomyopathyBlock__symptomText {
  min-width: 0;
  color: var(--wsd-navy);
}

.cardiomyopathyBlock__symptomTitle {
  margin: 0;
  font-family: var(--wsd-font-body);
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.4rem;
  color: var(--wsd-navy);
}

.cardiomyopathyBlock__symptomDesc,
.cardiomyopathyBlock__symptomDesc p {
  margin: 0;
  font-family: var(--wsd-font-body);
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.4rem;
  color: var(--wsd-navy);
}

.cardiomyopathyBlock__symptomDesc > *:not(:last-child) {
  margin-bottom: 0.6rem;
}

.cardiomyopathyBlock__note {
  margin: 0;
  text-align: center;
  color: var(--wsd-navy);
  font-family: var(--wsd-font-body);
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.8rem;
}

@media (max-width: 1199.98px) {
  .cardiomyopathyBlock {
    padding: 7rem 4rem;
  }

  .cardiomyopathyBlock__symptomsWrap {
    padding: 0; /* fixed side padding is desktop-only */
  }
  .cardiomyopathyBlock__symptomsGrid {
    grid-template-columns: 50% 50%; /* fixed widths are desktop-only */
    column-gap: 4rem;
  }
}

@media (max-width: 767px) {
  .cardiomyopathyBlock {
    padding: 4.4rem 2rem;
  }

  .cardiomyopathyBlock__inner {
    gap: 4.4rem;
  }

  .cardiomyopathyBlock__intro {
    gap: 1.1rem;
    text-align: center;
  }

  .cardiomyopathyBlock__introTitle {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  .cardiomyopathyBlock__divider {
    background-color: var(--wsd-teal, #1dbcb9);
  }

  .cardiomyopathyBlock__symptomsWrap {
    gap: 3rem;
  }

  .cardiomyopathyBlock__symptom {
    align-items: stretch; /* icon pins top, text centers itself */
  }

  .cardiomyopathyBlock__iconWrap {
    align-self: flex-start;
  }

  .cardiomyopathyBlock__symptomText {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .cardiomyopathyBlock__symptomsTitle {
    font-size: 2.6rem;
    line-height: 3.2rem;
  }

  .cardiomyopathyBlock__symptomsGrid {
    grid-template-columns: 1fr;
    row-gap: 3rem;
  }

  .cardiomyopathyBlock__icon--desktop {
    display: none;
  }

  .cardiomyopathyBlock__icon--mobile {
    display: block;
  }
}
.searchBar .wrap .btn {
  --bs-btn-padding-x: 1.75rem;
  --bs-btn-padding-y: 0.85rem;
  /* Pressed state must stay navy/white: the theme's transparent active-bg plus
     the white hover text below made the button go blank while clicked. */
  --bs-btn-active-bg: #052a56;
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: #052a56;
  /* Mobile hover keeps the inactive teal text — a tap leaves :hover stuck on
     touch, which made unselected filters look selected. Tablet and desktop
     restore the white hover below. */
  --bs-btn-hover-color: var(--wsd-teal);
  color: var(--wsd-teal); /* Figma: inactive filter text = teal */
  text-align: center;
  font-family: "Nunito Sans";
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.searchBar .wrap .btn.active {
  color: #fff; /* Figma: active = white on navy */
}
.searchBar .wrap .btn:active {
  background-color: #052a56;
  color: #fff;
}

/* Figma: hover = white on navy. Tablet and desktop only. */
@media (min-width: 768px) {
  .searchBar .wrap .btn {
    --bs-btn-hover-color: #fff;
  }
  .searchBar .wrap .btn:hover {
    color: #fff;
  }
}

/* Search submit button (magnifier) */
button#searchButton {
  color: #fff;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (max-width: 767.98px) {
  button#searchButton {
    padding-left: 1.3rem;
    padding-right: 1.3rem;
  }
}

/* Letter-filter buttons (A-F, G-M, N-T, U-Z). Fixed Figma sizing; scoped to
   .duchenneOpediaPage to override the existing per-page mobile rules. */
.duchenneOpediaPage .searchBar .wrap .L {
  display: flex;
  gap: 1.146rem;
}
.duchenneOpediaPage .searchBar .wrap .L .btn {
  width: 7.1307rem;   /* 71.307px */
  height: 3.9rem;     /* 39px */
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media (max-width: 767.98px) {
  .duchenneOpediaPage .searchBar .wrap .L .btn {
    width: 7.1405rem;   /* 71.405px */
    height: 3.4194rem;  /* 34.194px */
  }
}

/* ============================================================
   DUCHENNE-OPEDIA GLOSSARY — Figma 1:4151 (desktop) / 1:4498 (mobile)
   Full-width navy section band; navy Nunito title + body, 20px.
   ============================================================ */
.duchenneOpediaPage .glossary .sectionHeading {
  display: flex;
  align-items: center;
  min-height: 4.4942rem; /* 44.942px band */
  margin: 0;
  padding: 0.6rem 2rem;  /* desktop left/right pad */
  background-color: #052a56;
  color: #fff;
  font-family: var(--wsd-font-body);
  font-size: 2rem;
  font-weight: 700;
  line-height: normal;
  border-radius: 0;
}
.duchenneOpediaPage .glossary {
  margin: 0 0 6.2rem;
}
.duchenneOpediaPage .glossary ul {
  margin: 2.7rem 0;
  font-size: 2rem; /* was 20px */
}
.duchenneOpediaPage .glossary ul li {
  margin-bottom: 2.6rem;
}
.duchenneOpediaPage .glossary ul li:last-child {
  margin-bottom: 0;
}
.duchenneOpediaPage .glossary ul .title {
  font-family: var(--wsd-font-body);
  font-size: 2rem;
  font-weight: 700;
  line-height: normal;
  color: #052a56;
  margin-bottom: 0.1rem;
}
.duchenneOpediaPage .glossary ul .description,
.duchenneOpediaPage .glossary ul .description p {
  font-family: var(--wsd-font-body);
  font-size: 2rem;
  font-weight: 400;
  line-height: normal;
  color: #052a56;
  margin-bottom: 0;
}
@media (max-width: 767.98px) {
  .duchenneOpediaPage .glossary {
    margin-bottom: 2.9rem;
  }
  .duchenneOpediaPage .glossary ul {
    margin: 2.4rem 0;
  }
  .duchenneOpediaPage .glossary .sectionHeading {
    min-height: 3.939rem; /* 39.39px band */
    padding: 0.6rem 1rem; /* mobile left/right pad */
  }
}

/* ============================================================
   RESPONSIVE UTILITIES — line breaks + nowrap (breakpoint 768px)
   .br-desktop  -> <br> only on desktop (>=768px)
   .br-mobile   -> <br> only on mobile  (<=767.98px)
   .nowrap          -> never wrap (all sizes)
   .nowrap-desktop  -> never wrap on desktop only
   .nowrap-mobile   -> never wrap on mobile only
   .mob-bold        -> font-weight 700 on mobile only
   ============================================================ */
.nowrap { white-space: nowrap; }

.br-desktop { display: none; }
.br-mobile  { display: inline; }

@media (min-width: 768px) {
  .br-desktop { display: inline; }
  .br-mobile  { display: none; }
  .nowrap-desktop { white-space: nowrap; }
}

@media (max-width: 767.98px) {
  .nowrap-mobile { white-space: nowrap; }
  .mob-bold { font-weight: 700; }
}

/* ============================================================
   Resource Cards 2 (Figma: 1:3970 desktop, 1:4045 mobile)
   Intro + grid of link cards with image on top, no card title.
   ============================================================ */

.resourceCards2 {
  background-color: var(--Dark-Blue, #052A56);
  padding: var(--resourceCards2-padding-top-desktop, 8.8rem) 18.8rem var(--resourceCards2-padding-bottom-desktop, 8.8rem);
  width: 100%;
}

.resourceCards2--bg-white {
  background-color: #fff;
}

.resourceCards2--bg-grey {
  background-color: var(--wsd-bg-grey, #F0F4F8);
}

.resourceCards2--bg-navy {
  background-color: var(--Dark-Blue, #052A56);
}

.resourceCards2__container {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4.4rem;
  margin: 0 auto;
  max-width: 106.4rem;
  width: 100%;
}

.resourceCards2__intro {
  color: var(--Dark-Blue, #052A56);
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  text-align: center;
  width: 100%;
  word-break: break-word;
}

.resourceCards2--bg-navy .resourceCards2__intro,
.resourceCards2--bg-navy .resourceCards2__introTitle,
.resourceCards2--bg-navy .resourceCards2__introDesc,
.resourceCards2--bg-navy .resourceCards2__introDesc p {
  color: #fff;
}

.resourceCards2__introTitle {
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 4.2rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 4.2rem;
  margin: 0;
}

.resourceCards2__introDesc,
.resourceCards2__introDesc p {
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2.8rem;
  margin: 0;
}

.resourceCards2__introDesc > *:not(:last-child) {
  margin-bottom: 1.2rem;
}

.resourceCards2__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  row-gap: 0;
  column-gap: 2rem;
  width: 100%;
}

.resourceCards2__grid--hasSubtext {
  grid-template-rows: auto auto auto auto;
}

.resourceCards2--cols-1 .resourceCards2__grid {
  grid-template-columns: minmax(0, 1fr);
}

.resourceCards2--cols-2 .resourceCards2__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resourceCards2--cols-3 .resourceCards2__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.resourceCards2--cols-4 .resourceCards2__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.resourceCards2--cols-5 .resourceCards2__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.resourceCards2__card {
  background-color: #fff;
  border: 1px solid var(--wsd-teal, #1DBCB9);
  border-radius: 3.3rem;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  justify-items: stretch;
  padding: 4rem 2.2rem;
  row-gap: 0;
  width: 100%;
}

.resourceCards2__grid--hasSubtext .resourceCards2__card {
  grid-row: span 4;
}

.resourceCards2__cardMedia {
  align-items: flex-start;
  display: flex;
  justify-content: center;
  width: 100%;
}

.resourceCards2__cardImage {
  display: block;
  height: 14.2rem;
  object-fit: contain;
  width: 14.2rem;
}

.resourceCards2__cardBody {
  color: var(--Dark-Blue, #052A56);
  display: flex;
  flex-direction: column;
  justify-self: stretch;
  margin-top: 2.2rem;
  text-align: center;
  width: 100%;
  word-break: break-word;
}

.resourceCards2__cardText {
  color: var(--Dark-Blue, #052A56);
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 2.6rem;
  margin: 0;
}

.resourceCards2__cardButton {
  align-items: center;
  align-self: start;
  background: var(--Dark-Blue, #052A56);
  border: 0.2rem solid var(--Dark-Blue, #052A56); /* reserves space for the hover border */
  border-radius: 4.8rem;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  justify-self: center;
  margin-top: 3.3rem;
  padding: 1.3rem 3.8rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  width: auto;
}

.resourceCards2__cardButton:hover,
.resourceCards2__cardButton:focus {
  background: var(--wsd-white, #fff);
  border-color: #052A56;
  color: #052A56;
  text-decoration: none;
}

.resourceCards2__cardButton:hover .resourceCards2__cardButtonLabel,
.resourceCards2__cardButton:focus .resourceCards2__cardButtonLabel {
  color: #052A56;
}

.resourceCards2__cardButtonLabel {
  color: #fff;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.8rem;
  transition: color 0.2s ease;
  white-space: nowrap;
  word-break: break-word;
}

.resourceCards2__cardSubtextSlot {
  align-self: start;
  justify-self: stretch;
  margin-top: 0;
  width: 100%;
}

.resourceCards2__card--hasSubtext .resourceCards2__cardSubtextSlot {
  margin-top: 1.1rem;
}

.resourceCards2__cardSubtext,
.resourceCards2__cardSubtext p,
.resourceCards2__cardSubtext a {
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2.2rem;
  margin: 0;
  text-align: center;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.resourceCards2__cardSubtext--navy,
.resourceCards2__cardSubtext--navy p,
.resourceCards2__cardSubtext--navy a {
  color: #052A56;
}

.resourceCards2__cardSubtext--pink,
.resourceCards2__cardSubtext--pink p,
.resourceCards2__cardSubtext--pink a {
  color: #FF00C8;
}

/* Desktop-only so the ID selector doesn't override the mobile breakpoint rules. */
@media (min-width: 768px) {
  #resources-page-cards-2 .resourceCards2__cardText {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 2.9rem;
    margin: 0;
  }

  #resources-page-cards-2 .resourceCards2__cardBody {
    padding: 0 0.7rem;
  }

  #resources-page-cards-2 .resourceCards2__cardButton {
    margin-top: 3rem;
  }
}

/* Subgrid fallback for older browsers: cards become flex columns with reserved subtext space. */
@supports not (grid-template-rows: subgrid) {
  .resourceCards2__card {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
  }

  .resourceCards2__card .resourceCards2__cardButton {
    margin-top: auto;
    padding-top: 0;
  }

  .resourceCards2__grid--hasSubtext .resourceCards2__cardSubtextSlot {
    min-height: 4.4rem;
  }
}

@media (max-width: 1199px) {
  .resourceCards2 {
    padding: 8.8rem 6rem 6.4rem;
  }
}

@media (max-width: 991px) {
  .resourceCards2 {
    padding: 6.4rem 4rem;
  }
}

@media (max-width: 767px) {
  .resourceCards2 {
    padding: 4.4rem 2rem;
  }

  .resourceCards2__container {
    gap: 4.4rem;
  }

  .resourceCards2__intro {
    gap: 2.2rem;
    text-align: start;
  }

  .resourceCards2__introTitle {
    font-size: 3.2rem;
    line-height: 3.2rem;
  }

  .resourceCards2__introDesc,
  .resourceCards2__introDesc p {
    font-size: 2rem;
    line-height: 2.8rem;
  }

  .resourceCards2__grid,
  .resourceCards2--cols-1 .resourceCards2__grid,
  .resourceCards2--cols-2 .resourceCards2__grid,
  .resourceCards2--cols-3 .resourceCards2__grid,
  .resourceCards2--cols-4 .resourceCards2__grid,
  .resourceCards2--cols-5 .resourceCards2__grid {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    grid-template-columns: none;
    grid-template-rows: none;
  }

  .resourceCards2__card {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-row: auto;
    grid-template-rows: none;
    padding: 2.2rem;
  }

  .resourceCards2__cardBody {
    flex: 0 1 auto;
    margin-top: 3.1rem;
  }

  .resourceCards2__cardButton {
    align-self: center;
    margin-top: 2rem;
  }

  .resourceCards2__cardSubtextSlot {
    min-height: 0;
  }
}

/* ============================================================
   Leave-site (exit) modal — Figma 2442:8920
   836px white card, centered copy, pill buttons.
   Yes/No hover states swap into each other's resting look.
   width/height !important needed: popup lib writes inline px.
   ============================================================ */
.popup.popupLeaveSite {
  border: 0;
  height: auto !important;
  width: min(83.6rem, calc(100vw - 3rem)) !important;
}

.popup.popupLeaveSite .popContent {
  height: auto !important;
  padding: 5.35rem 2rem;
}

.popup.popupLeaveSite .popContent .wrap .heading {
  color: #052A56;
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 2.6rem;
}

.popup.popupLeaveSite .popContent .wrap .action {
  align-items: center;
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 1.6rem;
}

.popup.popupLeaveSite .popContent .wrap .action .btn {
  border-radius: 4.8rem;
  border-width: 0.2rem;
  font-family: var(--wsd-font, "Nunito Sans"), sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.8rem;
  margin: 0;
  min-width: 0;
  padding: 1.3rem 2.2rem;
}

.popup.popupLeaveSite .btnContinue {
  --bs-btn-bg: #052A56;
  --bs-btn-color: #FFF;
  --bs-btn-border-color: #052A56;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-color: #052A56;
  --bs-btn-hover-border-color: #052A56;
}

.popup.popupLeaveSite .btnCancel {
  --bs-btn-bg: transparent;
  --bs-btn-color: #052A56;
  --bs-btn-border-color: #052A56;
  --bs-btn-hover-bg: #052A56;
  --bs-btn-hover-color: #FFF;
  --bs-btn-hover-border-color: #052A56;
}

.popup.popupLeaveSite .close {
  display: none;
}

.popup.popupLeaveSite {
  border: none;
  border-radius: 0;
}

/* style.css forces .wrap .action .btn { color:#fff } — needs explicit overrides */
.popup.popupLeaveSite .popContent .wrap .action .btnContinue:hover {
  color: #052A56;
}

.popup.popupLeaveSite .popContent .wrap .action .btnCancel {
  color: #052A56;
}

.popup.popupLeaveSite .popContent .wrap .action .btnCancel:hover {
  color: #FFF;
}

/* OneTrust banner: widen the button group so the CTAs sit on one row at desktop.
   OneTrust's own CDN stylesheet loads after this one, so these need !important */
@media only screen and (min-width: 1280px) {
  #onetrust-banner-sdk:not(.ot-iab-2) #onetrust-button-group-parent {
    width: 44% !important;
    padding-left: 2% !important;
    padding-right: 5% !important;
  }
}