/* ============================================================
   dynamic-pages.css
   Styles for HubDB-driven, fully-coded page templates (no dnd_area) —
   e.g. school/daycamp.html. These pages render pd_page_content +
   pd_page_sections directly, so they cannot rely on module-scoped CSS
   (a module's CSS only loads when that module actually renders).
   This file owns every pd-* class those coded templates use:
     - hero image bg + overlays + treatment   [ported from hero-banner.module]
     - centered-content blocks                 [ported from centered-content.module]
     - hero typography pd-h1 / pd-lede         [authored, brand-matched]
     - pd-btn-row, pd-rich-text, pd-main-content, pd-fc-video
   Load via:
     
   ============================================================ */

/* ---- Main content wrapper ---- */
.pd-main-content { display: block; }

/* ---- Hero: image background + overlays (ported from hero-banner.module) ---- */
.pd-hero-module {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pd-hero-module--image {
  background-color: var(--pd-navy);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.pd-hero-module__overlay,
.pd-hero-module__treatment-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
/* teal corner accent */
.pd-hero-module--image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 6px;
  background: var(--pd-teal);
  border-radius: 0 0 6px 0;
  z-index: 3;
}
/* Hero owns its vertical rhythm; keep content above the overlays */
.pd-section.pd-hero-module {
  padding-top: 0;
  padding-bottom: 0;
}
.pd-hero-module > .pd-container {
  position: relative;
  z-index: 2;
  padding-top: clamp(80px, 10vw, 132px);
  padding-bottom: clamp(64px, 8vw, 104px);
}

/* ---- Hero typography (authored; hero sits on a dark/photo background) ---- */
.pd-hero-module .pd-eyebrow {
  color: var(--pd-teal);
  margin-bottom: 16px;
}
.pd-h1 {
  font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif;
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  font-weight: 800;
  line-height: 1.14;
  color: var(--pd-white);
  margin: 0 0 18px;
  text-shadow: 0 2px 14px rgba(2, 45, 65, 0.45);
}
.pd-lede {
  font-family: 'Montserrat','Montserrat Fallback', Helvetica, Arial, sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  max-width: 680px;
  margin: 0 0 26px;
  text-shadow: 0 1px 8px rgba(2, 45, 65, 0.4);
}
.pd-lede > :last-child { margin-bottom: 0; }

/* ---- Button row ---- */
.pd-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

/* ---- Centered-content blocks (ported from centered-content.module) ---- */
.pd-centered-content { display: grid; gap: 18px; }
.pd-centered-content--left { justify-items: start; }
/* BF1 (D1): a --left body must read LEFT-aligned. The variant carried NO
   text-align of its own and relied on the inherited default; when any ancestor
   resolves to text-align:center (a --center wrapper, a stored inline center, a
   centered price/video row) it bled down and rendered the whole --left body
   centered. Pin it left so the class contract is explicit. Specificity 0-2-0:
   the deliberate center ledes (compare > p, pullquote/photoband/price/video)
   target their own paragraphs at 0-2-1+ and still win; stored inline
   style="text-align:center" (1,0,0,0) also still wins -- content preserved. */
.pd-centered-content--left > .pd-centered-content__body { text-align: left; }
.pd-centered-content--center { justify-items: center; text-align: center; }
.pd-centered-content__eyebrow { margin-bottom: -4px; }
.pd-centered-content__body > :last-child { margin-bottom: 0; }
.pd-section--navy .pd-centered-content__body,
.pd-section--gradient .pd-centered-content__body {
  color: rgba(255, 255, 255, 0.88);
}

/* ---- Rich text (FAQ block + the dynamic section bodies from HubDB) ---- */
.pd-rich-text {
  font-family: 'Montserrat','Montserrat Fallback', Helvetica, Arial, sans-serif;
  color: var(--pd-slate-grey, #3D4C53);
  line-height: 1.7;
}
.pd-rich-text h2, .pd-rich-text h3, .pd-rich-text h4 {
  font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif;
  color: var(--pd-navy);
  font-weight: 700;
  margin: 1.4em 0 0.5em;
}
.pd-rich-text > :last-child { margin-bottom: 0; }

/* Shared list/paragraph/link rhythm for both the FAQ and the section bodies */
.pd-rich-text p,
.pd-centered-content__body p { margin: 0 0 1em; }
.pd-rich-text ul, .pd-rich-text ol,
.pd-centered-content__body ul, .pd-centered-content__body ol {
  margin: 0 0 1em;
  padding-left: 1.25em;
}
.pd-rich-text li,
.pd-centered-content__body li { margin-bottom: 0.5em; }
.pd-rich-text strong,
.pd-centered-content__body strong { color: inherit; font-weight: 700; }
.pd-rich-text a,
.pd-centered-content__body a {
  color: var(--pd-teal-accessible);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pd-rich-text a:hover,
.pd-centered-content__body a:hover { color: var(--pd-navy); }
/* Links stay legible on navy bands */
.pd-section--navy .pd-centered-content__body a { color: var(--pd-yellow); }

/* ---- Legibility safety on navy sections (e.g. final CTA heading) ---- */
.pd-section--navy .pd-section-heading { color: var(--pd-white); }

/* ---- "What is DayCamp" video facade fallback (JS also sets inline styles) ---- */
.pd-fc-video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: 12px;
  background: var(--pd-navy);
  cursor: pointer;
}

/* ============================================================
   SECTION VARIANT: .pd-sec--compare
   A two-up, side-by-side comparison built generically from the
   HubDB richtext structure inside .pd-centered-content__body /
   .pd-rich-text:  an intro <p> followed by a <ul> of EXACTLY two
   <li> items, each shaped as  <strong>Lead</strong> — copy <a>…</a>.
   The <ul> becomes a responsive 2-col grid of premium cards; each
   <li>'s bold lead becomes a header chip, the rest becomes body,
   and an optional <a> becomes a pill button. The two cards are
   visually differentiated (card 1 = teal, card 2 = navy/yellow).
   Generic + reusable: no IDs, no content-specific selectors.
   ============================================================ */

.pd-sec--compare .pd-centered-content__body,
.pd-sec--compare .pd-rich-text {
  display: block;
}

/* Intro paragraph above the two cards reads as a centered lede */
.pd-sec--compare .pd-centered-content__body > p,
.pd-sec--compare .pd-rich-text > p {
  max-width: 60ch;
  margin: 0 auto clamp(22px, 3vw, 32px);
  text-align: center;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.65;
  color: var(--pd-slate-grey, #3D4C53);
}

/* The list itself -> equal-height 2-up grid (overrides default ul) */
.pd-sec--compare .pd-centered-content__body > ul,
.pd-sec--compare .pd-rich-text > ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 28px);
  align-items: stretch;
}

/* Each <li> becomes a card (site card recipe).
   The <li> carries the HORIZONTAL body padding, which insets the
   bare description text node + anchor (both un-wrappable in richtext).
   The colored header <strong> then breaks out to full bleed via
   negative margins that cancel this padding — wrapper-free. */
.pd-sec--compare .pd-centered-content__body > ul > li,
.pd-sec--compare .pd-rich-text > ul > li {
  position: relative;
  margin: 0 !important;
  padding: 0 clamp(20px, 3vw, 28px) clamp(22px, 3vw, 28px);
  list-style: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--pd-white, #fff);
  border: 1px solid rgba(11, 45, 58, 0.08);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(2, 45, 65, 0.12);
  font-family: 'Montserrat','Montserrat Fallback', Helvetica, Arial, sans-serif;
  font-size: 0.99rem;
  line-height: 1.64;
  color: var(--pd-slate-grey, #3D4C53);
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}

/* Colored top band per card: the <strong> lead becomes a full-bleed
   header chip. Negative horizontal margins cancel the li padding so
   the band reaches the card edges; bottom margin spaces the body. */
.pd-sec--compare .pd-centered-content__body > ul > li > strong:first-child,
.pd-sec--compare .pd-rich-text > ul > li > strong:first-child {
  display: block;
  position: relative;
  font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(1.18rem, 1.9vw, 1.48rem);
  letter-spacing: 0.2px;
  line-height: 1.2;
  color: var(--pd-navy, #022D41);
  margin: 0 calc(-1 * clamp(20px, 3vw, 28px)) clamp(16px, 2.4vw, 22px);
  padding: clamp(20px, 3vw, 26px) clamp(20px, 3vw, 28px) clamp(16px, 2.2vw, 20px);
}

/* Header accent underline rule under the chip */
.pd-sec--compare .pd-centered-content__body > ul > li > strong:first-child::after,
.pd-sec--compare .pd-rich-text > ul > li > strong:first-child::after {
  content: '';
  position: absolute;
  left: clamp(20px, 3vw, 28px);
  bottom: -2px;
  width: 46px;
  height: 4px;
  border-radius: 999px;
  background: var(--pd-teal, #34C6B9);
}

/* Optional icon badge in the header — wired by background-image.
   Graceful when the asset is absent: an empty tinted badge that
   still reads as an intentional design element. */
.pd-sec--compare .pd-centered-content__body > ul > li > strong:first-child::before,
.pd-sec--compare .pd-rich-text > ul > li > strong:first-child::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 34px;
  height: 34px;
  margin-right: 12px;
  border-radius: 11px;
  background-color: rgba(52, 198, 185, 0.14);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}

/* Suppress any stray <br> the editor may inject between lead + copy */
.pd-sec--compare .pd-centered-content__body > ul > li > br,
.pd-sec--compare .pd-rich-text > ul > li > br { display: none; }

/* Inline emphasis inside the body copy: navy, slightly lighter weight */
.pd-sec--compare .pd-centered-content__body > ul > li strong:not(:first-child),
.pd-sec--compare .pd-rich-text > ul > li strong:not(:first-child) {
  color: var(--pd-navy, #022D41);
  font-weight: 700;
}

/* Optional anchor -> pill button. margin-top:auto pins it to the
   bottom so unequal copy lengths still align the CTAs. */
.pd-sec--compare .pd-centered-content__body > ul > li > a,
.pd-sec--compare .pd-rich-text > ul > li > a {
  align-self: flex-start;
  margin: clamp(16px, 2.4vw, 20px) 0 0;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Roboto','Roboto Fallback', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1;
  text-decoration: none;
  color: #fff !important;
  background: #0a7d73;
  padding: 11px 18px;
  border-radius: 999px;
  text-shadow: 0 1px 2px rgba(2, 45, 65, 0.35);
  box-shadow: 0 6px 16px rgba(2, 45, 65, 0.22);
  transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.pd-sec--compare .pd-centered-content__body > ul > li > a::after,
.pd-sec--compare .pd-rich-text > ul > li > a::after {
  content: '\2192';
  font-size: 1.02em;
  line-height: 1;
  transition: transform 200ms ease;
}
.pd-sec--compare .pd-centered-content__body > ul > li > a:hover,
.pd-sec--compare .pd-rich-text > ul > li > a:hover {
  color: var(--pd-navy, #022D41) !important;
  background: var(--pd-yellow, #FFDE59);
  text-shadow: none;
  box-shadow: 0 10px 22px rgba(2, 45, 65, 0.18);
  transform: translateY(-1px);
}
.pd-sec--compare .pd-centered-content__body > ul > li > a:hover::after,
.pd-sec--compare .pd-rich-text > ul > li > a:hover::after {
  transform: translateX(3px);
}

/* Card hover lift */
.pd-sec--compare .pd-centered-content__body > ul > li:hover,
.pd-sec--compare .pd-rich-text > ul > li:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 56px rgba(6, 27, 37, 0.13);
  border-color: rgba(52, 198, 185, 0.35);
}

/* ---- Card 1 :: DaySchool — teal-tinted header ---- */
.pd-sec--compare .pd-centered-content__body > ul > li:nth-child(1) > strong:first-child,
.pd-sec--compare .pd-rich-text > ul > li:nth-child(1) > strong:first-child {
  background: linear-gradient(135deg, rgba(52, 198, 185, 0.16) 0%, rgba(52, 198, 185, 0.05) 100%);
  border-bottom: 1px solid rgba(52, 198, 185, 0.22);
}
.pd-sec--compare .pd-centered-content__body > ul > li:nth-child(1) > strong:first-child::after,
.pd-sec--compare .pd-rich-text > ul > li:nth-child(1) > strong:first-child::after {
  background: var(--pd-teal, #34C6B9);
}
.pd-sec--compare .pd-centered-content__body > ul > li:nth-child(1) > strong:first-child::before,
.pd-sec--compare .pd-rich-text > ul > li:nth-child(1) > strong:first-child::before {
  background-color: rgba(52, 198, 185, 0.18);
  /* Optional brand icon — graceful if file is missing */
  background-image: url("../images/icons/icon-dayschool.svg");
}
.pd-sec--compare .pd-centered-content__body > ul > li:nth-child(1)::before,
.pd-sec--compare .pd-rich-text > ul > li:nth-child(1)::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  z-index: 2;
  background: var(--pd-teal, #34C6B9);
}

/* ---- Card 2 :: DayCamp — navy header with yellow accent ---- */
.pd-sec--compare .pd-centered-content__body > ul > li:nth-child(2) > strong:first-child,
.pd-sec--compare .pd-rich-text > ul > li:nth-child(2) > strong:first-child {
  background: linear-gradient(135deg, var(--pd-navy, #022D41) 0%, #053a52 100%);
  color: var(--pd-white, #fff);
  border-bottom: 1px solid rgba(255, 222, 89, 0.35);
}
.pd-sec--compare .pd-centered-content__body > ul > li:nth-child(2) > strong:first-child::after,
.pd-sec--compare .pd-rich-text > ul > li:nth-child(2) > strong:first-child::after {
  background: var(--pd-yellow, #FFDE59);
  width: 56px;
}
.pd-sec--compare .pd-centered-content__body > ul > li:nth-child(2) > strong:first-child::before,
.pd-sec--compare .pd-rich-text > ul > li:nth-child(2) > strong:first-child::before {
  background-color: rgba(255, 222, 89, 0.18);
  /* Optional brand icon — graceful if file is missing */
  background-image: url("../images/icons/icon-behavior-camp.svg");
}
.pd-sec--compare .pd-centered-content__body > ul > li:nth-child(2)::before,
.pd-sec--compare .pd-rich-text > ul > li:nth-child(2)::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  z-index: 2;
  background: var(--pd-yellow, #FFDE59);
}
.pd-sec--compare .pd-centered-content__body > ul > li:nth-child(2):hover,
.pd-sec--compare .pd-rich-text > ul > li:nth-child(2):hover {
  border-color: rgba(255, 222, 89, 0.5);
}

/* Card 2 anchor leans navy->yellow as its resting accent */
.pd-sec--compare .pd-centered-content__body > ul > li:nth-child(2) > a,
.pd-sec--compare .pd-rich-text > ul > li:nth-child(2) > a {
  background: var(--pd-navy, #022D41);
  color: var(--pd-yellow, #FFDE59) !important;
  text-shadow: none;
  box-shadow: 0 6px 16px rgba(2, 45, 65, 0.22);
}
.pd-sec--compare .pd-centered-content__body > ul > li:nth-child(2) > a:hover,
.pd-sec--compare .pd-rich-text > ul > li:nth-child(2) > a:hover {
  background: var(--pd-yellow, #FFDE59);
  color: var(--pd-navy, #022D41) !important;
}

/* ---- Responsive: stack to single column on tablet/mobile ---- */
@media (max-width: 768px) {
  .pd-sec--compare .pd-centered-content__body > ul,
  .pd-sec--compare .pd-rich-text > ul {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .pd-btn-row { gap: 10px; }
  .pd-btn-row .pd-btn { width: 100%; text-align: center; }
}

/* ============================================================
   SECTION VARIANT: .pd-sec--cards  (design-team generated)
   ============================================================ */
/* ============================================================
   .pd-sec--cards  —  Feature-card grid variant
   Transforms a generic HubDB richtext <ul> (inside
   .pd-centered-content__body) into a responsive grid of premium
   feature cards. Each <li> = one card; <strong> lead = card title,
   trailing text = description, optional <a> = card link/affordance.
   Generic + reusable: no page IDs, no content-specific selectors.
   Optional per-card brand icon via --pd-card-icon (set inline or
   on a wrapper); degrades gracefully when absent.
   ============================================================ */

/* Outer rhythm so the grid breathes within its container */
.pd-sec--cards .pd-centered-content,
.pd-sec--cards.pd-centered-content {
  gap: clamp(20px, 3vw, 30px);
}

/* ---- The <ul> becomes the responsive grid ------------------ */
.pd-sec--cards .pd-centered-content__body ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: clamp(16px, 2vw, 22px);
  align-items: stretch;
}

/* Cap at ~3 across on wide viewports for a balanced 3x2 layout */
@media (min-width: 980px) {
  .pd-sec--cards .pd-centered-content__body ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Each <li> is a card ----------------------------------- */
.pd-sec--cards .pd-centered-content__body ul > li {
  position: relative;
  isolation: isolate;
  margin: 0 !important;
  padding: clamp(20px, 3vw, 28px);
  padding-top: clamp(24px, 3.2vw, 32px);
  background: var(--pd-white, #fff);
  border: 1px solid rgba(11, 45, 58, 0.08);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(2, 45, 65, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--pd-slate-grey, #3D4C53);
  font-family: 'Montserrat','Montserrat Fallback', Helvetica, Arial, sans-serif;
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}

/* Teal top-accent bar spanning the card head */
.pd-sec--cards .pd-centered-content__body ul > li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--pd-teal, #34C6B9) 0%, var(--pd-teal, #34C6B9) 62%, var(--pd-yellow, #FFDE59) 100%);
  transform: scaleX(1);
  transform-origin: left center;
  transition: height 280ms ease;
  z-index: 2;
}

/* Soft yellow corner glow that warms on hover (decorative) */
.pd-sec--cards .pd-centered-content__body ul > li::after {
  content: '';
  position: absolute;
  top: -38px;
  right: -38px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 222, 89, 0.30) 0%, rgba(255, 222, 89, 0) 70%);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
  z-index: 0;
}

/* ---- Hover lift -------------------------------------------- */
.pd-sec--cards .pd-centered-content__body ul > li:hover,
.pd-sec--cards .pd-centered-content__body ul > li:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(2, 45, 65, 0.14);
  border-color: rgba(52, 198, 185, 0.42);
}

.pd-sec--cards .pd-centered-content__body ul > li:hover::before,
.pd-sec--cards .pd-centered-content__body ul > li:focus-within::before {
  height: 6px;
}

.pd-sec--cards .pd-centered-content__body ul > li:hover::after,
.pd-sec--cards .pd-centered-content__body ul > li:focus-within::after {
  opacity: 1;
}

/* ---- Card title (the <strong> lead) ------------------------ */
.pd-sec--cards .pd-centered-content__body ul > li > strong:first-child {
  position: relative;
  z-index: 1;
  display: block;
  font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif;
  font-weight: 800 !important;
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  line-height: 1.25;
  color: var(--pd-navy, #022D41) !important;
  letter-spacing: -0.01em;
  /* room for an optional left accent bar */
  padding-left: 16px;
}

/* Teal left bar anchoring the title */
.pd-sec--cards .pd-centered-content__body ul > li > strong:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.16em;
  bottom: 0.16em;
  width: 4px;
  border-radius: 999px;
  background: var(--pd-teal, #34C6B9);
}

/* ---- Optional brand icon (opt-in via --pd-card-icon) -------
   Set --pd-card-icon to a url(...) inline on the <li> (or a parent)
   to surface a brand glyph; absent = clean text-only card.
   e.g. style="--pd-card-icon:url('.../icon-rehabilitation.svg')" */
.pd-sec--cards .pd-centered-content__body ul > li[style*="--pd-card-icon"] {
  padding-top: clamp(70px, 8vw, 84px);
}

.pd-sec--cards .pd-centered-content__body ul > li[style*="--pd-card-icon"]::after {
  content: '';
  position: absolute;
  top: clamp(20px, 3vw, 26px);
  left: clamp(20px, 3vw, 28px);
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background-color: rgba(52, 198, 185, 0.12);
  background-image: var(--pd-card-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
  opacity: 1;
  z-index: 1;
  transition: transform 280ms ease, background-color 280ms ease;
}

.pd-sec--cards .pd-centered-content__body ul > li[style*="--pd-card-icon"]:hover::after,
.pd-sec--cards .pd-centered-content__body ul > li[style*="--pd-card-icon"]:focus-within::after {
  transform: scale(1.06);
  background-color: rgba(52, 198, 185, 0.18);
}

/* ---- Description text (everything after the lead) ---------- */
.pd-sec--cards .pd-centered-content__body ul > li {
  font-size: 0.95rem;
  line-height: 1.62;
}

/* Trailing nested lists, if any, stay readable inside a card */
.pd-sec--cards .pd-centered-content__body ul > li ul {
  display: block;
  margin: 6px 0 0 !important;
  padding-left: 16px !important;
}

.pd-sec--cards .pd-centered-content__body ul > li ul > li {
  all: unset;
  display: list-item;
  list-style: disc;
  margin: 2px 0 !important;
  padding: 0 !important;
  font-size: 0.9rem;
  color: var(--pd-slate-grey, #3D4C53);
}

.pd-sec--cards .pd-centered-content__body ul > li ul > li::before,
.pd-sec--cards .pd-centered-content__body ul > li ul > li::after {
  content: none;
}

/* ---- Inline link inside a card becomes a button affordance - */
.pd-sec--cards .pd-centered-content__body ul > li a {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Roboto','Roboto Fallback', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--pd-navy, #022D41);
  text-decoration: none;
  border-bottom: 0;
}

.pd-sec--cards .pd-centered-content__body ul > li a::after {
  content: '\2192';
  font-size: 1.02em;
  line-height: 1;
  color: var(--pd-teal-600, #147468); /* AA: arrow on white card */
  transition: transform 220ms ease;
}

.pd-sec--cards .pd-centered-content__body ul > li a:hover,
.pd-sec--cards .pd-centered-content__body ul > li a:focus-visible {
  color: var(--pd-teal-600, #147468); /* AA: link text on white card */
}

.pd-sec--cards .pd-centered-content__body ul > li a:hover::after,
.pd-sec--cards .pd-centered-content__body ul > li a:focus-visible::after {
  transform: translateX(4px);
}

/* ---- Tablet ------------------------------------------------ */
@media (max-width: 979px) {
  .pd-sec--cards .pd-centered-content__body ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Mobile: single column, lighter shadow ----------------- */
@media (max-width: 600px) {
  .pd-sec--cards .pd-centered-content__body ul {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .pd-sec--cards .pd-centered-content__body ul > li {
    box-shadow: 0 12px 30px rgba(6, 27, 37, 0.10);
  }

  /* Soften the hover lift on touch to avoid jumpiness */
  .pd-sec--cards .pd-centered-content__body ul > li:hover,
  .pd-sec--cards .pd-centered-content__body ul > li:focus-within {
    transform: translateY(-3px);
  }
}

/* ---- Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pd-sec--cards .pd-centered-content__body ul > li,
  .pd-sec--cards .pd-centered-content__body ul > li::before,
  .pd-sec--cards .pd-centered-content__body ul > li::after,
  .pd-sec--cards .pd-centered-content__body ul > li a,
  .pd-sec--cards .pd-centered-content__body ul > li a::after {
    transition: none;
  }

  .pd-sec--cards .pd-centered-content__body ul > li:hover,
  .pd-sec--cards .pd-centered-content__body ul > li:focus-within {
    transform: none;
  }
}


/* ============================================================
   SECTION VARIANT: .pd-sec--timeline  (design-team generated)
   ============================================================ */
/* =====================================================================
   SECTION VARIANT: .pd-sec--timeline
   Vertical day-flow timeline for HubDB-driven dynamic pages.
   Generic + reusable: targets the standard HubDB richtext structure
   inside .pd-centered-content__body (sibling <p> blocks, each usually
   "<strong>Lead</strong> — text", plus inline <a>). No page IDs, no
   content-specific selectors. Lead <strong> becomes the step title;
   each <p> is a node on a connecting teal line. Single column on mobile.
   Optional per-step icon hook: set --pd-step-icon on a <p> to swap the
   node dot for a brand icon; graceful (dot) when absent.
   ===================================================================== */

.pd-sec--timeline {
  --pd-tl-rail: 18px;          /* x-center of the connecting line */
  --pd-tl-node: 18px;          /* node diameter */
  --pd-tl-gap: clamp(16px, 2.4vw, 26px); /* gap between rail and text */
  --pd-tl-pad-y: clamp(16px, 2.2vw, 22px); /* vertical rhythm per step */
}

/* Headline framing for the section ------------------------------------ */
.pd-sec--timeline .pd-centered-content__eyebrow,
.pd-sec--timeline .pd-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Roboto','Roboto Fallback', Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--pd-teal-600, #147468); /* AA: eyebrow on light band; navy/gradient override keeps teal-500 */
}
.pd-sec--timeline .pd-centered-content__eyebrow::before,
.pd-sec--timeline .pd-section-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--pd-teal, #34C6B9);
}

.pd-sec--timeline .pd-section-heading,
.pd-sec--timeline .pd-centered-content__heading {
  font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: var(--pd-navy, #022D41);
  line-height: 1.15;
}

/* =====================================================================
   THE TIMELINE BODY
   The richtext container becomes the rail track. Each child <p> is a
   step row, indented to clear the rail, carrying a node + connector.
   ===================================================================== */
.pd-sec--timeline .pd-centered-content__body {
  position: relative;
  margin: 0;
  padding: 0;
}

/* Continuous connecting line down the node column.
   Fades in at top + out at bottom so the rail reads as a clean spine. */
.pd-sec--timeline .pd-centered-content__body::before {
  content: "";
  position: absolute;
  top: var(--pd-tl-pad-y);
  bottom: var(--pd-tl-pad-y);
  left: var(--pd-tl-rail);
  width: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(52, 198, 185, 0) 0%,
    rgba(52, 198, 185, 0.55) 12%,
    rgba(52, 198, 185, 0.55) 88%,
    rgba(52, 198, 185, 0) 100%
  );
  pointer-events: none;
}

/* --- Each <p> = one timeline step ----------------------------------- */
.pd-sec--timeline .pd-centered-content__body > p {
  position: relative;
  margin: 0;
  padding: var(--pd-tl-pad-y) 0 var(--pd-tl-pad-y)
           calc(var(--pd-tl-rail) + var(--pd-tl-node) / 2 + var(--pd-tl-gap));
  color: var(--pd-slate-grey, #3D4C53);
  line-height: 1.7;
}

/* Hairline divider between steps for scannability (skip the last) */
.pd-sec--timeline .pd-centered-content__body > p + p {
  border-top: 1px solid rgba(11, 45, 58, 0.07);
}

/* The node dot sitting on the rail.
   Ring + teal core; reads as a checkpoint along the day. */
.pd-sec--timeline .pd-centered-content__body > p::before {
  content: "";
  position: absolute;
  top: calc(var(--pd-tl-pad-y) + 0.18em);
  left: var(--pd-tl-rail);
  width: var(--pd-tl-node);
  height: var(--pd-tl-node);
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--pd-teal, #34C6B9);
  border: 3px solid var(--pd-white, #fff);
  box-shadow:
    0 0 0 2px rgba(52, 198, 185, 0.35),
    0 6px 14px rgba(6, 27, 37, 0.14);
  z-index: 1;
  transition: transform 200ms ease, box-shadow 200ms ease,
              background-color 200ms ease;
}

/* Optional brand icon inside the node.
   A <p style="--pd-step-icon:url(.../icon-progress.svg)"> swaps the
   solid dot for an icon chip; absent => clean teal dot (graceful). */
.pd-sec--timeline .pd-centered-content__body > p[style*="--pd-step-icon"]::before {
  background-color: var(--pd-white, #fff);
  background-image: var(--pd-step-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 56%;
  width: calc(var(--pd-tl-node) + 16px);
  height: calc(var(--pd-tl-node) + 16px);
  border-width: 2px;
  box-shadow:
    0 0 0 2px rgba(52, 198, 185, 0.45),
    0 8px 18px rgba(6, 27, 37, 0.16);
}

/* Hover: gentle lift on the row + node bloom (desktop pointers only) */
@media (hover: hover) {
  .pd-sec--timeline .pd-centered-content__body > p:hover::before {
    transform: translateX(-50%) scale(1.12);
    background-color: var(--pd-navy, #022D41);
    box-shadow:
      0 0 0 3px rgba(52, 198, 185, 0.40),
      0 8px 18px rgba(6, 27, 37, 0.18);
  }
}

/* --- Step title = the leading <strong> ------------------------------ */
.pd-sec--timeline .pd-centered-content__body > p > strong:first-child {
  display: block;
  margin-bottom: 4px;
  font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 1.12rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--pd-navy, #022D41);
}

/* <strong> used mid-sentence (emphasis, not a title) stays inline */
.pd-sec--timeline .pd-centered-content__body > p strong {
  color: var(--pd-navy, #022D41);
  font-weight: 700;
}
.pd-sec--timeline .pd-centered-content__body > p > strong:first-child {
  font-weight: 800;
}

/* Intro paragraph (no leading <strong>) reads as the day's overview:
   slightly larger, navy node already differentiates it as the start. */
.pd-sec--timeline .pd-centered-content__body > p:first-child {
  font-size: 1.06rem;
  color: var(--pd-slate-grey, #3D4C53);
}
.pd-sec--timeline .pd-centered-content__body > p:first-child::before {
  background: var(--pd-yellow, #FFDE59);
  box-shadow:
    0 0 0 2px rgba(255, 222, 89, 0.45),
    0 6px 14px rgba(6, 27, 37, 0.14);
}
@media (hover: hover) {
  .pd-sec--timeline .pd-centered-content__body > p:first-child:hover::before {
    background: var(--pd-yellow, #FFDE59);
  }
}

/* Scroll-activated node glow: the touch/no-hover equivalent of :hover.
   theme.js (initTimelineScrollGlow) toggles .pd-tl-in as each step crosses
   the viewport center, so the dots light up as you scroll past them.
   Applies on all devices; respects prefers-reduced-motion (JS opts out). */
.pd-sec--timeline .pd-centered-content__body > p.pd-tl-in::before {
  transform: translateX(-50%) scale(1.12);
  background-color: var(--pd-navy, #022D41);
  box-shadow:
    0 0 0 3px rgba(52, 198, 185, 0.40),
    0 8px 18px rgba(6, 27, 37, 0.18);
}
.pd-sec--timeline .pd-centered-content__body > p:first-child.pd-tl-in::before {
  background: var(--pd-yellow, #FFDE59);
  transform: translateX(-50%) scale(1.12);
  box-shadow:
    0 0 0 3px rgba(255, 222, 89, 0.45),
    0 8px 18px rgba(6, 27, 37, 0.18);
}

/* --- Inline links inside steps -------------------------------------- */
.pd-sec--timeline .pd-centered-content__body > p a {
  color: var(--pd-teal-600, #147468); /* AA: inline link on light band */
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(52, 198, 185, 0.4);
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.pd-sec--timeline .pd-centered-content__body > p a:hover {
  color: var(--pd-navy, #022D41);
  text-decoration-color: var(--pd-navy, #022D41);
}

/* =====================================================================
   THEME-BAND SAFETY
   On navy / gradient bands, lift text + rail for contrast. Generic:
   relies only on the section band classes already used site-wide.
   ===================================================================== */
.pd-section--navy.pd-sec--timeline .pd-centered-content__body > p,
.pd-section--gradient.pd-sec--timeline .pd-centered-content__body > p,
.pd-section--navy .pd-sec--timeline .pd-centered-content__body > p,
.pd-section--gradient .pd-sec--timeline .pd-centered-content__body > p {
  color: rgba(255, 255, 255, 0.86);
}
.pd-section--navy.pd-sec--timeline .pd-centered-content__body > p > strong:first-child,
.pd-section--gradient.pd-sec--timeline .pd-centered-content__body > p > strong:first-child,
.pd-section--navy .pd-sec--timeline .pd-centered-content__body > p > strong:first-child,
.pd-section--gradient .pd-sec--timeline .pd-centered-content__body > p > strong:first-child,
.pd-section--navy.pd-sec--timeline .pd-centered-content__body > p strong,
.pd-section--gradient.pd-sec--timeline .pd-centered-content__body > p strong,
.pd-section--navy .pd-sec--timeline .pd-centered-content__body > p strong,
.pd-section--gradient .pd-sec--timeline .pd-centered-content__body > p strong {
  color: var(--pd-white, #fff);
}
.pd-section--navy.pd-sec--timeline .pd-centered-content__body > p + p,
.pd-section--gradient.pd-sec--timeline .pd-centered-content__body > p + p,
.pd-section--navy .pd-sec--timeline .pd-centered-content__body > p + p,
.pd-section--gradient .pd-sec--timeline .pd-centered-content__body > p + p {
  border-top-color: rgba(255, 255, 255, 0.14);
}
.pd-section--navy.pd-sec--timeline .pd-centered-content__body > p::before,
.pd-section--gradient.pd-sec--timeline .pd-centered-content__body > p::before,
.pd-section--navy .pd-sec--timeline .pd-centered-content__body > p::before,
.pd-section--gradient .pd-sec--timeline .pd-centered-content__body > p::before {
  border-color: var(--pd-navy, #022D41);
}
.pd-section--navy.pd-sec--timeline .pd-centered-content__body > p a,
.pd-section--gradient.pd-sec--timeline .pd-centered-content__body > p a,
.pd-section--navy .pd-sec--timeline .pd-centered-content__body > p a,
.pd-section--gradient .pd-sec--timeline .pd-centered-content__body > p a {
  color: var(--pd-yellow, #FFDE59);
  text-decoration-color: rgba(255, 222, 89, 0.5);
}
.pd-section--navy.pd-sec--timeline .pd-centered-content__body > p a:hover,
.pd-section--gradient.pd-sec--timeline .pd-centered-content__body > p a:hover,
.pd-section--navy .pd-sec--timeline .pd-centered-content__body > p a:hover,
.pd-section--gradient .pd-sec--timeline .pd-centered-content__body > p a:hover {
  color: var(--pd-white, #fff);
  text-decoration-color: var(--pd-white, #fff);
}

/* =====================================================================
   RESPONSIVE — tighten the rail + rhythm on smaller screens
   ===================================================================== */
@media (max-width: 768px) {
  .pd-sec--timeline {
    --pd-tl-rail: 15px;
    --pd-tl-node: 16px;
    --pd-tl-gap: 16px;
    --pd-tl-pad-y: 16px;
  }
  .pd-sec--timeline .pd-centered-content__body > p > strong:first-child {
    font-size: 1.05rem;
  }
  .pd-sec--timeline .pd-centered-content__body > p:first-child {
    font-size: 1rem;
  }
  /* Icon chips shrink so they don't crowd a narrow rail */
  .pd-sec--timeline .pd-centered-content__body > p[style*="--pd-step-icon"]::before {
    width: calc(var(--pd-tl-node) + 12px);
    height: calc(var(--pd-tl-node) + 12px);
  }
}

@media (max-width: 480px) {
  .pd-sec--timeline {
    --pd-tl-gap: 14px;
    --pd-tl-pad-y: 14px;
  }
  .pd-sec--timeline .pd-centered-content__body > p {
    line-height: 1.65;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .pd-sec--timeline .pd-centered-content__body > p::before {
    transition: none;
  }
  .pd-sec--timeline .pd-centered-content__body > p:hover::before {
    transform: translateX(-50%);
  }
}

/* =====================================================================
   SECTION VARIANT: .pd-sec--timeline.pd-sec--rail
   Opt-in HORIZONTAL variant of the timeline. Same HubDB richtext body
   (sibling <p> steps); the vertical spine becomes a left-to-right rail
   of fixed-width step cards you scroll through. CSS-only + progressive:
   with no JS it is a native scroll-snap row with a peek of the next
   card; no arrows/dots (those need the .pd-rail wrapper markup, which
   ds2_richtext can add later if wanted). Compound selector so the
   vertical default is untouched. Flip via s.container e.g.
   "pd-container pd-sec--timeline pd-sec--rail".
   Card width + gap deliberately match .pd-rail__track children so a
   timeline reads the same as the program/pricing rails on the page.
   ===================================================================== */
.pd-sec--timeline.pd-sec--rail .pd-centered-content__body {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(16px, 2vw, 24px);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x proximity;
  scroll-padding-inline: clamp(16px, 4vw, 28px);
  padding: 6px 2px 20px;
  margin: 8px 0 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(52, 198, 185, 0.55) transparent;
  /* soft edge fade so the row reads as "more to the right" */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
}
.pd-sec--timeline.pd-sec--rail .pd-centered-content__body::-webkit-scrollbar {
  height: 8px;
}
.pd-sec--timeline.pd-sec--rail .pd-centered-content__body::-webkit-scrollbar-thumb {
  background: rgba(52, 198, 185, 0.55);
  border-radius: 999px;
}
.pd-sec--timeline.pd-sec--rail .pd-centered-content__body::-webkit-scrollbar-track {
  background: transparent;
}

/* Vertical spine is meaningless horizontally -> drop it. */
.pd-sec--timeline.pd-sec--rail .pd-centered-content__body::before {
  content: none;
}

/* Each <p> becomes a fixed-width step card. Width + snap match the JS
   rail so mixed rails on one page line up. */
.pd-sec--timeline.pd-sec--rail .pd-centered-content__body > p {
  flex: 0 0 clamp(258px, 80vw, 320px);
  scroll-snap-align: start;
  margin: 0;
  /* generous top pad clears the corner node; reset the vertical variant's
     big left indent back to normal card padding */
  padding: clamp(44px, 5vw, 52px) clamp(20px, 2.4vw, 26px) clamp(20px, 2.4vw, 26px);
  background: var(--pd-white, #fff);
  border: 1px solid rgba(11, 45, 58, 0.08);
  border-radius: var(--pd-radius-lg, 16px);
  box-shadow: 0 8px 20px rgba(2, 45, 65, 0.08);
  line-height: 1.6;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
/* No inter-step hairline in card mode (gap separates them). */
.pd-sec--timeline.pd-sec--rail .pd-centered-content__body > p + p {
  border-top: 0;
}

/* Node dot -> accent in the card's top-left corner (no vertical-rail math). */
.pd-sec--timeline.pd-sec--rail .pd-centered-content__body > p::before {
  top: clamp(18px, 2vw, 22px);
  left: clamp(20px, 2.4vw, 26px);
  transform: none;
}
.pd-sec--timeline.pd-sec--rail .pd-centered-content__body > p[style*="--pd-step-icon"]::before {
  top: clamp(16px, 1.8vw, 20px);
}

/* Card hover lift (desktop pointers); dot bloom without the translateX. */
@media (hover: hover) {
  .pd-sec--timeline.pd-sec--rail .pd-centered-content__body > p:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(2, 45, 65, 0.14);
  }
  .pd-sec--timeline.pd-sec--rail .pd-centered-content__body > p:hover::before {
    transform: scale(1.12);
  }
}
/* Scroll-glow (theme.js .pd-tl-in) keeps working, minus the translateX. */
.pd-sec--timeline.pd-sec--rail .pd-centered-content__body > p.pd-tl-in::before,
.pd-sec--timeline.pd-sec--rail .pd-centered-content__body > p:first-child.pd-tl-in::before {
  transform: scale(1.12);
}

/* On navy/gradient bands the cards need their own surface, not the band. */
.pd-section--navy.pd-sec--timeline.pd-sec--rail .pd-centered-content__body > p,
.pd-section--gradient.pd-sec--timeline.pd-sec--rail .pd-centered-content__body > p,
.pd-section--navy .pd-sec--timeline.pd-sec--rail .pd-centered-content__body > p,
.pd-section--gradient .pd-sec--timeline.pd-sec--rail .pd-centered-content__body > p {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .pd-sec--timeline.pd-sec--rail .pd-centered-content__body { scroll-behavior: auto; }
  .pd-sec--timeline.pd-sec--rail .pd-centered-content__body > p { transition: none; }
}


/* ============================================================
   SECTION VARIANT: .pd-sec--checklist  (design-team generated)
   ============================================================ */
/* ============================================================
   SECTION VARIANT: .pd-sec--checklist
   Forward-progression milestone checklist for HubDB richtext.
   Sits on the section container; targets the generic
   .pd-centered-content__body structure (<p>, <ul><li>, <a>).
   Generic + reusable site-wide. No page IDs, no content hooks.
   ============================================================ */

.pd-sec--checklist {
  --pdck-accent: var(--pd-teal, #34C6B9);
  --pdck-ink: var(--pd-navy, #022D41);
  --pdck-body: var(--pd-slate-grey, #3D4C53);
  --pdck-surface: var(--pd-white, #fff);
  --pdck-line: rgba(11, 45, 58, 0.08);
  --pdck-shadow: 0 8px 20px rgba(2, 45, 65, 0.12);
  --pdck-shadow-hover: 0 16px 40px rgba(2, 45, 65, 0.14);
  --pdck-badge: 30px;
}

/* ---- Heading + eyebrow framing ---- */
.pd-sec--checklist .pd-section-eyebrow,
.pd-sec--checklist .pd-centered-content__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Roboto','Roboto Fallback', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pdck-accent);
}
.pd-sec--checklist .pd-section-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--pdck-accent);
}

.pd-sec--checklist .pd-section-heading {
  font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif;
  color: var(--pdck-ink);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.5rem);
  margin: 10px 0 0;
}

/* ---- Body wrapper ---- */
.pd-sec--checklist .pd-centered-content__body {
  font-family: 'Montserrat','Montserrat Fallback', Helvetica, Arial, sans-serif;
  color: var(--pdck-body);
  line-height: 1.7;
  margin-top: 22px;
}

/* Paragraphs around the list. The paragraph that introduces the
   list (the one immediately preceding the <ul>) reads as a label. */
.pd-sec--checklist .pd-centered-content__body p {
  margin: 0 0 1em;
  font-size: 1.02rem;
}
.pd-sec--checklist .pd-centered-content__body p:has(+ ul) {
  font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: var(--pdck-ink);
  font-size: 1.08rem;
  margin-bottom: 16px;
}
/* Trailing paragraph after the track: a soft "pace" note panel */
.pd-sec--checklist .pd-centered-content__body ul + p {
  margin: 26px 0 0;
  padding: 16px 20px;
  border-left: 4px solid var(--pdck-accent);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, rgba(52, 198, 185, 0.10), rgba(52, 198, 185, 0.02));
  color: var(--pdck-ink);
  font-size: 0.98rem;
}
.pd-sec--checklist .pd-centered-content__body > :last-child {
  margin-bottom: 0;
}

/* ============================================================
   THE CHECKLIST TRACK
   Reset the inherited <ul>/<li> marker + padding, then rebuild
   each <li> as a connected milestone card row.
   ============================================================ */
.pd-sec--checklist .pd-centered-content__body ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  gap: 14px;
  counter-reset: pdck-step;
}

.pd-sec--checklist .pd-centered-content__body ul li {
  list-style: none !important;
  position: relative;
  margin: 0 !important;
  padding: clamp(16px, 2.4vw, 20px) clamp(18px, 3vw, 26px) clamp(16px, 2.4vw, 20px) calc(var(--pdck-badge) + 30px);
  background: var(--pdck-surface);
  border: 1px solid var(--pdck-line);
  border-radius: 16px;
  box-shadow: var(--pdck-shadow);
  color: var(--pdck-body);
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 500;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  counter-increment: pdck-step;
}

/* Teal circular CHECK badge */
.pd-sec--checklist .pd-centered-content__body ul li::before {
  content: "";
  position: absolute;
  top: clamp(16px, 2.4vw, 20px);
  left: clamp(16px, 2.2vw, 22px);
  width: var(--pdck-badge);
  height: var(--pdck-badge);
  border-radius: 50%;
  background-color: var(--pdck-accent);
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  box-shadow: 0 6px 14px rgba(52, 198, 185, 0.38);
  z-index: 1;
}

/* The checkmark glyph, centered on the badge */
.pd-sec--checklist .pd-centered-content__body ul li::after {
  content: "";
  position: absolute;
  top: calc(clamp(16px, 2.4vw, 20px) + (var(--pdck-badge) * 0.31));
  left: calc(clamp(16px, 2.2vw, 22px) + (var(--pdck-badge) * 0.30));
  width: calc(var(--pdck-badge) * 0.42);
  height: calc(var(--pdck-badge) * 0.24);
  border-left: 2.5px solid var(--pd-white, #fff);
  border-bottom: 2.5px solid var(--pd-white, #fff);
  transform: rotate(-45deg);
  z-index: 2;
}

/* Progress SPINE — connector linking each badge to the next,
   conveying forward momentum down the track. Hidden on the
   final item via the gap (drawn from badge center downward). */
.pd-sec--checklist .pd-centered-content__body ul li:not(:last-child) {
  margin-bottom: -2px !important;
}
.pd-sec--checklist .pd-centered-content__body ul {
  position: relative;
}
.pd-sec--checklist .pd-centered-content__body ul::before {
  content: "";
  position: absolute;
  top: clamp(28px, 3.2vw, 36px);
  bottom: clamp(28px, 3.2vw, 36px);
  left: calc(clamp(16px, 2.2vw, 22px) + (var(--pdck-badge) / 2) - 1px);
  width: 2px;
  background: linear-gradient(180deg,
    rgba(52, 198, 185, 0.55) 0%,
    rgba(52, 198, 185, 0.22) 100%);
  border-radius: 2px;
  z-index: 0;
  pointer-events: none;
}

/* Hover lift + accent intensifies */
.pd-sec--checklist .pd-centered-content__body ul li:hover {
  transform: translateY(-3px);
  box-shadow: var(--pdck-shadow-hover);
  border-color: rgba(52, 198, 185, 0.45);
}

/* Inline links inside a milestone (e.g. cross-link to another page) */
.pd-sec--checklist .pd-centered-content__body ul li a {
  color: var(--pdck-ink);
  font-weight: 700;
  text-decoration: none;
  background-image: linear-gradient(var(--pdck-accent), var(--pdck-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  padding-bottom: 1px;
  transition: color 180ms ease, background-size 180ms ease;
}
.pd-sec--checklist .pd-centered-content__body ul li a:hover {
  color: var(--pdck-accent);
  background-size: 100% 100%;
  background-image: linear-gradient(rgba(52, 198, 185, 0.14), rgba(52, 198, 185, 0.14));
}

/* Optional <strong> lead pattern, if a milestone uses one */
.pd-sec--checklist .pd-centered-content__body ul li strong {
  color: var(--pdck-ink);
  font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif;
  font-weight: 700;
}

/* ---- OPTIONAL icon hook ----
   Add a brand icon to the track header by setting --pdck-icon
   on the section (inline or via a wrapper), e.g.
   style="--pdck-icon:url('/.../icon-progress.svg')".
   Graceful no-op when the variable is absent. */
.pd-sec--checklist .pd-centered-content__body p:has(+ ul)::before {
  content: var(--pdck-icon, none);
  display: var(--pdck-icon-display, none);
}
.pd-sec--checklist[style*="--pdck-icon"] .pd-centered-content__body p:has(+ ul) {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pd-sec--checklist[style*="--pdck-icon"] .pd-centered-content__body p:has(+ ul)::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  background-image: var(--pdck-icon);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .pd-sec--checklist {
    --pdck-badge: 28px;
  }
  .pd-sec--checklist .pd-centered-content__body ul {
    gap: 12px;
  }
  .pd-sec--checklist .pd-centered-content__body ul li {
    font-size: 0.96rem;
  }
}

@media (max-width: 480px) {
  .pd-sec--checklist .pd-centered-content__body ul li {
    padding-right: 16px;
  }
  .pd-sec--checklist .pd-centered-content__body ul + p {
    padding: 14px 16px;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .pd-sec--checklist .pd-centered-content__body ul li {
    transition: none;
  }
  .pd-sec--checklist .pd-centered-content__body ul li:hover {
    transform: none;
  }
}


/* ============================================================
   SECTION VARIANT: .pd-sec--infocards  (design-team generated)
   ============================================================ */
/* ============================================================
   .pd-sec--infocards — HubDB section layout variant
   Turns a richtext body of "<strong>Label:</strong> value" <p>
   blocks (or <ul><li><strong>Lead</strong> — text</li>) into a
   responsive GRID OF INFO CARDS. Label renders as a small teal
   eyebrow; value sits below. Optional per-card icon supported.

   Generic + reusable: scoped under .pd-sec--infocards, targets the
   stock .pd-centered-content__body structure only. No page IDs, no
   content-specific selectors. Append to dynamic-pages.css.
   ============================================================ */

/* The variant class lands on the .pd-container element. Give the
   block a touch more breathing room than a plain text section and
   keep the inner stack rhythm tidy. */
.pd-sec--infocards {
  /* TEXT-safe teal: label chips, links + eyebrow read on white and must pass
     WCAG AA. teal-500 (#34C6B9) is 2.12:1 (fail); teal-600 (#147468) is 5.6:1.
     The decorative 4px accent bar keeps vibrant teal-500 via its own stops. */
  --pd-infocard-accent: var(--pd-teal-600, #147468);
  --pd-infocard-radius: 16px;
  --pd-infocard-shadow: 0 8px 20px rgba(2, 45, 65, 0.12);
  --pd-infocard-shadow-hover: 0 16px 40px rgba(2, 45, 65, 0.14);
  --pd-infocard-border: 1px solid rgba(11, 45, 58, 0.08);
}

/* ---- Header (eyebrow + heading) framing above the grid ---- */
.pd-sec--infocards .pd-centered-content {
  gap: clamp(18px, 2.4vw, 26px);
}

.pd-sec--infocards .pd-centered-content__eyebrow,
.pd-sec--infocards .pd-eyebrow {
  color: var(--pd-infocard-accent);
  font-family: 'Roboto','Roboto Fallback', Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pd-sec--infocards .pd-section-heading {
  font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: var(--pd-navy, #022D41);
  letter-spacing: -0.01em;
}

/* ============================================================
   THE GRID — .pd-centered-content__body becomes the card track.
   Each direct <p> (or <li>) is one info card.
   ============================================================ */
.pd-sec--infocards .pd-centered-content__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
  width: 100%;
  margin: 0;
  /* neutralize inherited rich-text rhythm so cards control spacing */
  line-height: 1.6;
}

/* Each card: stock site recipe — white, soft shadow, hairline
   border, generous padding, rounded corners, hover lift. Targets
   the two structures HubDB richtext produces (paragraphs and list
   items) so the variant is reusable across pages. */
.pd-sec--infocards .pd-centered-content__body > p,
.pd-sec--infocards .pd-centered-content__body > ul > li,
.pd-sec--infocards .pd-centered-content__body > ol > li {
  position: relative;
  /* block flow, NOT flex column: a flex column stacks every inline child
     (leading <strong>, text runs, inline <a> links) onto its own line, which
     fragmented sentences like "Start with our <a>Pre-School Puppy classes</a>,
     then come to camp". The leading <strong>:first-child rule below already
     renders the card's label as a block title; the rest of the value flows as
     normal inline text so links stay inline. */
  display: block;
  margin: 0;
  padding: clamp(20px, 3vw, 28px);
  background: var(--pd-white, #fff);
  border: var(--pd-infocard-border);
  border-radius: var(--pd-infocard-radius);
  box-shadow: var(--pd-infocard-shadow);
  color: var(--pd-slate-grey, #3D4C53);
  font-family: 'Montserrat','Montserrat Fallback', Helvetica, Arial, sans-serif;
  font-size: 0.98rem;
  list-style: none;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 300ms ease,
    box-shadow 300ms ease,
    border-color 300ms ease;
}

/* When a <ul>/<ol> is used instead of stacked <p>, make it the grid
   so its <li> children flow as cards rather than the list itself. */
.pd-sec--infocards .pd-centered-content__body > ul,
.pd-sec--infocards .pd-centered-content__body > ol {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Top accent bar — full-bleed teal cap that brightens on hover. */
.pd-sec--infocards .pd-centered-content__body > p::after,
.pd-sec--infocards .pd-centered-content__body > ul > li::after,
.pd-sec--infocards .pd-centered-content__body > ol > li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--pd-teal, #34C6B9) 0%,
    var(--pd-teal, #34C6B9) 62%,
    var(--pd-yellow, #FFDE59) 100%
  );
  transform: scaleX(0.34);
  transform-origin: left center;
  transition: transform 320ms ease;
  z-index: 2;
}

/* Hover lift + deeper shadow + teal-tinted border + accent grows. */
.pd-sec--infocards .pd-centered-content__body > p:hover,
.pd-sec--infocards .pd-centered-content__body > ul > li:hover,
.pd-sec--infocards .pd-centered-content__body > ol > li:hover {
  transform: translateY(-4px);
  box-shadow: var(--pd-infocard-shadow-hover);
  border-color: rgba(52, 198, 185, 0.42);
}

.pd-sec--infocards .pd-centered-content__body > p:hover::after,
.pd-sec--infocards .pd-centered-content__body > ul > li:hover::after,
.pd-sec--infocards .pd-centered-content__body > ol > li:hover::after {
  transform: scaleX(1);
}

/* ============================================================
   LABEL → teal eyebrow.  The leading <strong> ("Pricing:",
   "Hours:", or an <li> "Lead") becomes a small uppercase teal
   heading sitting above the value text.
   ============================================================ */
.pd-sec--infocards .pd-centered-content__body > p > strong:first-child,
.pd-sec--infocards .pd-centered-content__body > ul > li > strong:first-child,
.pd-sec--infocards .pd-centered-content__body > ol > li > strong:first-child {
  display: block;
  margin-bottom: 2px;
  color: var(--pd-infocard-accent);
  font-family: 'Roboto','Roboto Fallback', Helvetica, Arial, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Value text reads as the card body. Strong tags that appear inside
   the value (not the leading label) stay navy + bold for emphasis. */
.pd-sec--infocards .pd-centered-content__body > p {
  color: var(--pd-slate-grey, #3D4C53);
  line-height: 1.62;
}

.pd-sec--infocards .pd-centered-content__body > p > strong:not(:first-child),
.pd-sec--infocards .pd-centered-content__body > ul > li > strong:not(:first-child),
.pd-sec--infocards .pd-centered-content__body > ol > li > strong:not(:first-child) {
  color: var(--pd-navy, #022D41);
  font-weight: 700;
}

/* ---- Inline links inside a card value ---- */
.pd-sec--infocards .pd-centered-content__body a {
  color: var(--pd-navy, #022D41);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(52, 198, 185, 0.5);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  border-radius: 3px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.pd-sec--infocards .pd-centered-content__body a:hover {
  color: var(--pd-infocard-accent);
  text-decoration-color: var(--pd-infocard-accent);
}

.pd-sec--infocards .pd-centered-content__body a:focus-visible {
  outline: 2px solid var(--pd-infocard-accent);
  outline-offset: 2px;
}

/* ============================================================
   OPTIONAL ICON LAYER  (graceful when absent)
   A card shows an icon only when one is supplied via the
   --pd-card-icon custom property — set globally on the variant,
   or per-position through the .pd-sec--infocards--icons modifier
   + the --pd-card-icon-N vars below. With no icon set, nothing
   renders (the ::before collapses to zero) and layout is unchanged.
   ============================================================ */
.pd-sec--infocards .pd-centered-content__body > p::before,
.pd-sec--infocards .pd-centered-content__body > ul > li::before,
.pd-sec--infocards .pd-centered-content__body > ol > li::before {
  content: "";
  display: none;            /* hidden unless an icon variable is provided */
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 12px;
  background-color: rgba(52, 198, 185, 0.12);
  background-image: var(--pd-card-icon, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
  flex: 0 0 auto;
}

/* Reveal the icon chip whenever an icon source exists. */
.pd-sec--infocards[style*="--pd-card-icon"] .pd-centered-content__body > p::before,
.pd-sec--infocards[style*="--pd-card-icon"] .pd-centered-content__body > ul > li::before,
.pd-sec--infocards[style*="--pd-card-icon"] .pd-centered-content__body > ol > li::before,
.pd-sec--infocards--icons .pd-centered-content__body > p::before,
.pd-sec--infocards--icons .pd-centered-content__body > ul > li::before,
.pd-sec--infocards--icons .pd-centered-content__body > ol > li::before {
  display: block;
}

/* Per-position icon mapping for the --icons modifier. A template can
   set --pd-card-icon-1..4 to get_asset_url() of any brand SVG, e.g.
   --pd-card-icon-1: url('.../icon-membership.svg'). Maps onto the
   first four cards generically — no content coupling. */
.pd-sec--infocards--icons .pd-centered-content__body > p:nth-of-type(1)::before,
.pd-sec--infocards--icons .pd-centered-content__body > ul > li:nth-of-type(1)::before { background-image: var(--pd-card-icon-1, var(--pd-card-icon, none)); }
.pd-sec--infocards--icons .pd-centered-content__body > p:nth-of-type(2)::before,
.pd-sec--infocards--icons .pd-centered-content__body > ul > li:nth-of-type(2)::before { background-image: var(--pd-card-icon-2, var(--pd-card-icon, none)); }
.pd-sec--infocards--icons .pd-centered-content__body > p:nth-of-type(3)::before,
.pd-sec--infocards--icons .pd-centered-content__body > ul > li:nth-of-type(3)::before { background-image: var(--pd-card-icon-3, var(--pd-card-icon, none)); }
.pd-sec--infocards--icons .pd-centered-content__body > p:nth-of-type(4)::before,
.pd-sec--infocards--icons .pd-centered-content__body > ul > li:nth-of-type(4)::before { background-image: var(--pd-card-icon-4, var(--pd-card-icon, none)); }

/* ============================================================
   THEME-BAND SAFETY — keep cards readable if the section is
   placed on a navy/gradient band (cards stay white, eyebrow/label
   stay teal, value text darkens for contrast on the white card).
   ============================================================ */
.pd-section--navy .pd-sec--infocards .pd-centered-content__body > p,
.pd-section--gradient .pd-sec--infocards .pd-centered-content__body > p,
.pd-section--navy .pd-sec--infocards .pd-centered-content__body > ul > li,
.pd-section--gradient .pd-sec--infocards .pd-centered-content__body > ul > li {
  color: var(--pd-slate-grey, #3D4C53);
}

.pd-section--navy .pd-sec--infocards .pd-centered-content__body a,
.pd-section--gradient .pd-sec--infocards .pd-centered-content__body a {
  color: var(--pd-navy, #022D41);
}

.pd-section--navy .pd-sec--infocards .pd-section-heading {
  color: var(--pd-white, #fff);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .pd-sec--infocards .pd-centered-content__body {
    grid-template-columns: 1fr;   /* single column on mobile */
  }
  .pd-sec--infocards .pd-centered-content__body > p,
  .pd-sec--infocards .pd-centered-content__body > ul > li,
  .pd-sec--infocards .pd-centered-content__body > ol > li {
    padding: 20px;
  }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .pd-sec--infocards .pd-centered-content__body > p,
  .pd-sec--infocards .pd-centered-content__body > ul > li,
  .pd-sec--infocards .pd-centered-content__body > ol > li,
  .pd-sec--infocards .pd-centered-content__body > p::after,
  .pd-sec--infocards .pd-centered-content__body > ul > li::after,
  .pd-sec--infocards .pd-centered-content__body > ol > li::after {
    transition: none;
  }
  .pd-sec--infocards .pd-centered-content__body > p:hover,
  .pd-sec--infocards .pd-centered-content__body > ul > li:hover,
  .pd-sec--infocards .pd-centered-content__body > ol > li:hover {
    transform: none;
  }
}


/* ============================================================
   SECTION VARIANT: .pd-sec--proglinks  (design-team generated)
   ============================================================ */
/* ==========================================================================
   SECTION VARIANT: .pd-sec--proglinks
   "Program link cards" — a <ul> of program links rendered as a responsive
   grid of clickable cards. Generic: targets the HubDB richtext structure
   inside .pd-centered-content__body
       <ul><li><a>Program</a> — description text</li></ul>
   The <a> becomes the bold card title; the trailing text node becomes the
   description; the whole <li> is the clickable card surface (via a stretched
   ::after overlay on the link). Reusable site-wide — no page/content IDs.
   ========================================================================== */

/* --- Scoped tokens (overridable per-section/per-card) -------------------- */
.pd-sec--proglinks {
  --proglinks-card-bg: var(--pd-white, #fff);
  --proglinks-card-radius: 16px;
  --proglinks-card-pad: clamp(20px, 3vw, 28px);
  --proglinks-card-border: 1px solid rgba(11, 45, 58, 0.08);
  --proglinks-card-shadow: 0 8px 20px rgba(2, 45, 65, 0.12);
  --proglinks-card-shadow-hover: 0 16px 40px rgba(2, 45, 65, 0.14);
  --proglinks-accent: var(--pd-teal, #34C6B9);
  --proglinks-accent-2: var(--pd-yellow, #FFDE59);
  --proglinks-min: 240px; /* min card width before the grid wraps */
}

/* Let the cards breathe within the narrow container without feeling cramped */
.pd-sec--proglinks .pd-centered-content__body,
.pd-sec--proglinks.pd-centered-content__body {
  width: 100%;
}

/* --- Grid: the <ul> -------------------------------------------------------
   Reset the inherited richtext list rhythm (padding-left, bullets) and lay
   the items out as an auto-fit grid that collapses to one column on mobile. */
.pd-sec--proglinks ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--proglinks-min), 1fr));
  gap: clamp(16px, 2.4vw, 22px);
  align-items: stretch;
}

/* Guard against any nested lists inside a description (keep them inline-ish) */
.pd-sec--proglinks ul ul {
  display: block;
  gap: 0;
  margin: 8px 0 0 !important;
  padding-left: 1.1em !important;
  list-style: disc !important;
}
.pd-sec--proglinks ul ul li {
  display: list-item;
  all: revert;
  margin: 0 0 2px !important;
}

/* --- Card: each top-level <li> -------------------------------------------- */
.pd-sec--proglinks > ul > li,
.pd-sec--proglinks ul > li {
  position: relative;
  isolation: isolate;
  margin: 0 !important;
  padding: var(--proglinks-card-pad);
  padding-right: calc(var(--proglinks-card-pad) + 18px); /* room for the arrow */
  background: var(--proglinks-card-bg);
  border: var(--proglinks-card-border);
  border-radius: var(--proglinks-card-radius);
  box-shadow: var(--proglinks-card-shadow);
  /* Description text styling (the trailing text node) */
  font-family: 'Montserrat','Montserrat Fallback', Helvetica, Arial, sans-serif;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--pd-slate-grey, #3D4C53);
  overflow: hidden;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 280ms ease;
}

/* Top accent bar — teal, slides/brightens on hover */
.pd-sec--proglinks ul > li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--proglinks-accent) 0%, var(--proglinks-accent-2) 140%);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 280ms ease, transform 280ms ease;
  z-index: 2;
}

/* Teal "→" affordance, bottom-right of the card */
.pd-sec--proglinks ul > li::after {
  content: "\2192"; /* → */
  position: absolute;
  right: clamp(16px, 2.2vw, 22px);
  bottom: clamp(16px, 2.2vw, 22px);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto','Roboto Fallback', Helvetica, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  color: var(--proglinks-accent);
  background: rgba(52, 198, 185, 0.12);
  border-radius: 999px;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
              background-color 280ms ease, color 280ms ease;
  z-index: 2;
  pointer-events: none;
}

/* Hover / focus-within lift */
.pd-sec--proglinks ul > li:hover,
.pd-sec--proglinks ul > li:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--proglinks-card-shadow-hover);
  border-color: rgba(52, 198, 185, 0.55);
}
.pd-sec--proglinks ul > li:hover::before,
.pd-sec--proglinks ul > li:focus-within::before {
  opacity: 1;
  transform: translateY(0);
}
.pd-sec--proglinks ul > li:hover::after,
.pd-sec--proglinks ul > li:focus-within::after {
  transform: translateX(4px);
  background: var(--proglinks-accent);
  color: var(--pd-navy, #022D41);
}

/* --- Title: the <a> -------------------------------------------------------
   The link is the program name. Render it as a strong block title and let it
   span the whole card (stretched ::after overlay) so the card is clickable. */
.pd-sec--proglinks ul > li > a:first-child,
.pd-sec--proglinks ul > li a {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(1.12rem, 1.6vw, 1.28rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--pd-navy, #022D41) !important;
  text-decoration: none !important;
  transition: color 200ms ease;
}

/* Stretch the first link to cover the whole card → entire card is clickable */
.pd-sec--proglinks ul > li > a:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--proglinks-card-radius);
  z-index: 1;
}

/* Keep the description text (and the em-dash) above the overlay but
   non-interactive, while the title link stays the click target. */
.pd-sec--proglinks ul > li > a:first-child {
  position: static;
}

.pd-sec--proglinks ul > li:hover > a:first-child,
.pd-sec--proglinks ul > li:focus-within > a:first-child {
  color: var(--proglinks-accent) !important;
}

/* Visible keyboard focus ring on the card */
.pd-sec--proglinks ul > li a:focus-visible {
  outline: none;
}
.pd-sec--proglinks ul > li:focus-within {
  outline: 2px solid var(--proglinks-accent);
  outline-offset: 3px;
}

/* Any secondary links inside a description fall back to a normal inline link */
.pd-sec--proglinks ul > li > a:not(:first-child) {
  display: inline;
  width: auto;
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: 'Montserrat','Montserrat Fallback', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: inherit;
  color: var(--proglinks-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* --- Optional brand icon (graceful when absent) ---------------------------
   Wire an icon per card by setting --pd-icon on the <li>, e.g. in HubL:
     style="--pd-icon:url('')"
   With no --pd-icon set, nothing renders and layout is unchanged. */
.pd-sec--proglinks ul > li[style*="--pd-icon"] {
  padding-top: calc(var(--proglinks-card-pad) + 50px);
}
.pd-sec--proglinks ul > li[style*="--pd-icon"] > a:first-child {
  /* keep the click overlay clearing the icon nicely */
}
.pd-sec--proglinks ul > li[style*="--pd-icon"]::after {
  /* leave arrow as-is */
}
.pd-sec--proglinks ul > li[style*="--pd-icon"] > a:first-child + ::before {
  /* no-op safeguard */
}
.pd-sec--proglinks ul > li[style*="--pd-icon"] {
  background-image: var(--pd-icon);
  background-repeat: no-repeat;
  background-position: var(--proglinks-card-pad) var(--proglinks-card-pad);
  background-size: 36px 36px;
}

/* --- Navy / gradient band legibility safety ------------------------------- */
.pd-section--navy .pd-sec--proglinks ul > li,
.pd-section--gradient .pd-sec--proglinks ul > li {
  background: rgba(255, 255, 255, 0.96);
  color: var(--pd-slate-grey, #3D4C53);
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 768px) {
  .pd-sec--proglinks ul {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .pd-sec--proglinks ul > li {
    padding: 20px;
    padding-right: 50px;
    font-size: 0.9rem;
  }
  .pd-sec--proglinks ul > li::after {
    right: 14px;
    bottom: 14px;
    width: 30px;
    height: 30px;
    font-size: 1.05rem;
  }
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pd-sec--proglinks ul > li,
  .pd-sec--proglinks ul > li::before,
  .pd-sec--proglinks ul > li::after,
  .pd-sec--proglinks ul > li > a:first-child {
    transition: none;
  }
  .pd-sec--proglinks ul > li:hover,
  .pd-sec--proglinks ul > li:focus-within {
    transform: none;
  }
}



/* ---- Polish: hide optional compare icon badges (theme-relative image URLs
   don't resolve in HubSpot's minified CSS; headers read cleaner without them) ---- */
.pd-sec--compare .pd-centered-content__body > ul > li > strong:first-child::before,
.pd-sec--compare .pd-rich-text > ul > li > strong:first-child::before { display: none; }

/* ============================================================
   DYNAMIC FAQ ACCORDION  (.pd-faq-dynamic)
   Generated client-side from a HubDB `faq` rich-text field
   (<h3>/<p> pairs) by the progressive-enhancement script in the
   coded templates. Inherits the canonical .pd-faq base from
   theme.css / main.css (M PLUS Rounded heads, teal "+" icon that
   rotates to "×", max-height transition, single-expand JS).
   This block re-skins those items as rounded brand cards so the
   accordion matches the site instead of the thin underlined rows.
   Reusable on any HubDB page that renders [data-pd-faq-enhance].
   ============================================================ */
.pd-faq-dynamic-section .pd-section-heading { margin-bottom: 1.75rem; }

.pd-faq-dynamic {
  max-width: 820px;
  margin: 0 auto;
}

/* Before the script runs, the raw rich text sits inside .pd-faq —
   neutralize the inherited 800px/auto centering so it reads as normal copy
   and isn't clipped. (Removed from the DOM once enhanced.) */
.pd-faq-dynamic__source { max-width: none; }

/* Each Q/A becomes a rounded card. Override the inherited hairline-row look. */
.pd-faq-dynamic .pd-faq__item {
  background: #fff;
  border: 1px solid var(--pd-lightest-grey, #ebeded);
  border-radius: 14px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(2, 45, 65, 0.04);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Cancel the base .pd-faq__item / :first-of-type divider borders */
.pd-faq-dynamic .pd-faq__item:first-of-type { border-top: 1px solid var(--pd-lightest-grey, #ebeded); }
.pd-faq-dynamic .pd-faq__item:last-of-type { margin-bottom: 0; }

.pd-faq-dynamic .pd-faq__item:hover {
  border-color: var(--pd-teal, #34C6B9);
  box-shadow: 0 6px 18px rgba(2, 45, 65, 0.08);
}

/* Question button: keep the brand font/weight from base .pd-faq__question,
   add card padding + reserve room for the icon. */
.pd-faq-dynamic .pd-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  margin: 0;
  font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: var(--pd-navy, #022D41);
}
.pd-faq-dynamic .pd-faq__question-text { flex: 1 1 auto; }

.pd-faq-dynamic .pd-faq__question[aria-expanded="true"] { color: var(--pd-teal-accessible, #147468); }

/* Keyboard focus ring (brand teal) */
.pd-faq-dynamic .pd-faq__question:focus-visible {
  outline: 2px solid var(--pd-teal, #34C6B9);
  outline-offset: -2px;
  border-radius: 12px;
}

/* Icon: circular teal chip with a "+" that rotates to "×" when open.
   Re-position from the base (which absolutely-positions the icon) to sit
   inline at the end of the flex row. */
.pd-faq-dynamic .pd-faq__icon {
  position: static;
  transform: none;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pd-teal, #34C6B9);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.3s ease, background-color 0.2s ease;
}
.pd-faq-dynamic .pd-faq__question[aria-expanded="true"] .pd-faq__icon {
  transform: rotate(45deg);
  background: var(--pd-navy, #022D41);
}

/* Answer: inherits the max-height transition from base .pd-faq__answer /
   .is-open. Just pad the inner copy to the card gutter. */
.pd-faq-dynamic .pd-faq__answer-inner {
  padding: 2px 22px 22px;
  font-family: 'Montserrat','Montserrat Fallback', Helvetica, Arial, sans-serif;
  color: var(--pd-slate-grey, #3D4C53);
  line-height: 1.7;
}
.pd-faq-dynamic .pd-faq__answer-inner > :first-child { margin-top: 0; }
.pd-faq-dynamic .pd-faq__answer-inner > :last-child { margin-bottom: 0; }
.pd-faq-dynamic .pd-faq__answer-inner a {
  color: var(--pd-teal-accessible, #147468);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pd-faq-dynamic .pd-faq__answer-inner a:hover { color: var(--pd-navy, #022D41); }

/* Taller open allowance for long answers (base caps at 600px) */
.pd-faq-dynamic .pd-faq__answer.is-open { max-height: 1200px; }

@media (max-width: 768px) {
  .pd-faq-dynamic .pd-faq__question { padding: 16px 16px; font-size: 0.98rem; }
  .pd-faq-dynamic .pd-faq__answer-inner { padding: 2px 16px 18px; }
}

/* Respect reduced-motion: drop the expand/icon transitions. */
@media (prefers-reduced-motion: reduce) {
  .pd-faq-dynamic .pd-faq__answer,
  .pd-faq-dynamic .pd-faq__icon,
  .pd-faq-dynamic .pd-faq__item { transition: none; }
}

/* ============================================================
   DYNAMIC FAQ ACCORDION v2 — native <details>/<summary> (.pd-faqd)
   No JS toggle => cannot conflict with theme.js. Generic + reusable.
   ============================================================ */
.pd-faqd__item { background:#fff; border:1px solid var(--pd-lightest-grey,#ebeded); border-radius:14px; margin-bottom:14px; box-shadow:0 1px 2px rgba(2,45,65,.04); overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease; }
.pd-faqd__item:last-child { margin-bottom:0; }
.pd-faqd__item:hover { border-color:var(--pd-teal,#34C6B9); }
.pd-faqd__item[open] { border-color:var(--pd-teal,#34C6B9); box-shadow:0 6px 18px rgba(2,45,65,.08); }
.pd-faqd__q { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; cursor:pointer; list-style:none; font-family:'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback',Helvetica,Arial,sans-serif; font-weight:700; font-size:1.02rem; color:var(--pd-navy,#022D41); }
.pd-faqd__q::-webkit-details-marker { display:none; }
.pd-faqd__q::marker { content:''; }
.pd-faqd__q:focus-visible { outline:2px solid var(--pd-teal,#34C6B9); outline-offset:-2px; border-radius:12px; }
.pd-faqd__q-text { flex:1 1 auto; }
.pd-faqd__icon { position:relative; flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--pd-teal,#34C6B9); transition:transform .3s ease, background-color .2s ease; }
.pd-faqd__icon::before, .pd-faqd__icon::after { content:''; position:absolute; top:50%; left:50%; width:12px; height:2px; border-radius:2px; background:#fff; transform:translate(-50%,-50%); }
.pd-faqd__icon::after { transform:translate(-50%,-50%) rotate(90deg); transition:transform .3s ease; }
.pd-faqd__item[open] .pd-faqd__icon { background:var(--pd-navy,#022D41); }
.pd-faqd__item[open] .pd-faqd__icon::after { transform:translate(-50%,-50%) rotate(0deg); }
.pd-faqd__a { padding:0 22px 20px; font-family:'Montserrat','Montserrat Fallback',Helvetica,Arial,sans-serif; color:var(--pd-slate-grey,#3D4C53); line-height:1.7; }
.pd-faqd__a > :first-child { margin-top:0; }
.pd-faqd__a > :last-child { margin-bottom:0; }
.pd-faqd__a a { color:var(--pd-teal-accessible,#1A8F85); text-decoration:underline; text-underline-offset:2px; }
.pd-faqd__a a:hover { color:var(--pd-navy,#022D41); }
@media (max-width:768px){ .pd-faqd__q{ padding:16px; font-size:.98rem; } .pd-faqd__a{ padding:0 16px 16px; } }

/* ---- CLS guards (REDUCE_LAYOUT_SHIFT: /pricing /financing /referral-program /contact-us) ----
   1. Pre-collapse the raw FAQ source: hide everything except the question
      headings until the enhancer swaps in the closed <details> accordion, so
      the pre-enhance layout already matches the post-enhance height and the
      big downward collapse never happens. The template emits a <noscript>
      override that restores the answers when JS is off.
   2. Reserve space for embed-section iframes (forms/schedulers/maps) so they
      do not push content down as they load. */
[data-pd-faq-enhance]:not([data-pd-faq-enhanced="true"]) [data-pd-faq-source] > :not(h2):not(h3):not(h4) { display: none; }
.pd-embed-host { min-height: 480px; }

/* ---- Contrast guarantees (scoped to coded HubDB pages) ---- */
.pd-section--navy .pd-centered-content__body,
.pd-section--navy .pd-centered-content__body p { color: rgba(255,255,255,0.92) !important; }
.pd-section--navy .pd-centered-content__body a,
.pd-section--navy .pd-rich-text a { color: var(--pd-yellow,#FFDE59) !important; }

/* Link contrast (AA): deep teal #117A6F = 5.2:1 on white; !important beats the
   variant-specific link colors. Navy bands keep yellow links (set above). */
.pd-centered-content__body a,
.pd-rich-text a,
.pd-faqd__a a { color: #117A6F !important; }
.pd-section--navy .pd-centered-content__body a,
.pd-section--navy .pd-rich-text a { color: var(--pd-yellow,#FFDE59) !important; }

/* ============================================================
   MEDIA SECTION VARIANTS  (built 2026-06-18)
   Reusable, HubDB-driven media blocks that give coded pages a holistic,
   photographic feel — matching the live homepage / theme-module aesthetic
   (text-image-split, image-card-grid, photo-banner, video-gallery).
   Nothing is page-specific: each variant is selected by a pd_page_sections
   row's `section_type` (media | photoband | video) or `container` variant
   (pd-sec--photocards), with images/video supplied by the row's
   image_url / image_alt / media_position / video_id fields.
     1. .pd-sec--media       image + text feature row, alternating sides
     2. .pd-sec--photocards  card grid with a real photo header (ul transform)
     3. .pd-sec--video       click-to-play video facade (single or grid)
     4. .pd-sec--photoband   full-bleed background-image band with overlay
   Design tokens (--space/--radius/--shadow/--text/--transition) come from the
   globally-loaded main.css; brand colors from --pd-*. All have literal
   fallbacks so they degrade safely if a token is ever missing.
   ============================================================ */

/* ------------------------------------------------------------
   1. .pd-sec--media  —  image + text feature row (alternating)
      Template renders: .pd-sec--media > (.pd-sec--media__text, .pd-sec--media__figure>img)
      Default = image RIGHT, text LEFT. Add .pd-sec--media--reverse
      (media_position == "left") to put the image on the LEFT.
   ------------------------------------------------------------ */
.pd-sec--media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}
.pd-sec--media__text { min-width: 0; }
.pd-sec--media__text .pd-section-heading { margin-top: 0; }
.pd-sec--media__figure {
  position: relative;
  isolation: isolate;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(11, 45, 58, 0.08);
  box-shadow: 0 8px 20px rgba(2, 45, 65, 0.12);
  background: var(--pd-navy, #022D41);
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
/* teal->yellow top accent bar — same brand frame as .pd-sec--cards */
.pd-sec--media__figure::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--pd-teal,#34C6B9) 0%, var(--pd-teal,#34C6B9) 62%, var(--pd-yellow,#FFDE59) 100%);
  z-index: 2; transition: height 280ms ease;
}
.pd-sec--media__figure:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(2, 45, 65, 0.14);
  border-color: rgba(52, 198, 185, 0.42);
}
.pd-sec--media__figure:hover::before { height: 6px; }
.pd-sec--media__figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  max-height: 460px;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.pd-sec--media__figure:hover img { transform: scale(1.04); }
.pd-sec--media__caption {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--pd-soft-grey, #9ea5a9);
  font-style: italic;
  text-align: center;
}
/* Reverse: image on the left. Place figure first visually. */
.pd-sec--media--reverse .pd-sec--media__figure { order: -1; }
/* On navy media sections, keep body text legible */
.pd-section--navy .pd-sec--media__text .pd-centered-content__body,
.pd-section--navy .pd-sec--media__text .pd-centered-content__body p { color: rgba(255,255,255,0.92); }
@media (max-width: 860px) {
  .pd-sec--media { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 30px); }
  /* Always show the photo first when stacked, regardless of reverse */
  .pd-sec--media__figure,
  .pd-sec--media--reverse .pd-sec--media__figure { order: -1; }
  .pd-sec--media__figure img { min-height: 240px; max-height: 360px; }
}

/* ------------------------------------------------------------
   2. .pd-sec--photocards  —  card grid with a photo header
      Author writes a plain <ul> in the section body; each <li> =
      one card and MUST start with an <img> (the photo header),
      then a <strong> lead (title), then description text, and an
      optional trailing <a> (link). Mirrors how .pd-sec--cards
      transforms a list, so it is equally generic + reusable.
   ------------------------------------------------------------ */
.pd-sec--photocards .pd-centered-content__body ul,
.pd-sec--photocards .pd-rich-text ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(24px, 2.6vw, 34px);
  align-items: stretch;
}
@media (min-width: 980px) {
  .pd-sec--photocards .pd-centered-content__body ul,
  .pd-sec--photocards .pd-rich-text ul { grid-template-columns: repeat(3, 1fr); }
}
.pd-sec--photocards .pd-centered-content__body ul > li,
.pd-sec--photocards .pd-rich-text ul > li {
  position: relative;
  isolation: isolate;
  margin: 0 !important;
  padding: 0 28px 30px;
  background: var(--pd-white, #fff);
  border: 1px solid rgba(11, 45, 58, 0.08);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(2, 45, 65, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--pd-slate-grey, #3D4C53);
  font-family: 'Montserrat','Montserrat Fallback', Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.62;
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
/* Teal->yellow top accent bar, identical to .pd-sec--cards (sits above the photo) */
.pd-sec--photocards .pd-centered-content__body ul > li::before,
.pd-sec--photocards .pd-rich-text ul > li::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--pd-teal,#34C6B9) 0%, var(--pd-teal,#34C6B9) 62%, var(--pd-yellow,#FFDE59) 100%);
  z-index: 2; transition: height 280ms ease;
}
/* Soft yellow corner glow that warms on hover, matching .pd-sec--cards */
.pd-sec--photocards .pd-centered-content__body ul > li::after,
.pd-sec--photocards .pd-rich-text ul > li::after {
  content: '';
  position: absolute; top: -38px; right: -38px; width: 92px; height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 222, 89, 0.30) 0%, rgba(255, 222, 89, 0) 70%);
  opacity: 0; transition: opacity 320ms ease; pointer-events: none; z-index: 1;
}
/* The first <img> becomes a flush photo header (bleeds past card padding) */
.pd-sec--photocards .pd-centered-content__body ul > li > img:first-child,
.pd-sec--photocards .pd-rich-text ul > li > img:first-child {
  display: block;
  width: calc(100% + 56px);
  max-width: none;
  margin: 0 -28px 22px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--pd-lightest-grey, #ebeded);
  transition: transform 0.5s ease;
}
.pd-sec--photocards .pd-centered-content__body ul > li:hover,
.pd-sec--photocards .pd-rich-text ul > li:hover,
.pd-sec--photocards .pd-centered-content__body ul > li:focus-within,
.pd-sec--photocards .pd-rich-text ul > li:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(2, 45, 65, 0.14);
  border-color: rgba(52, 198, 185, 0.42);
}
.pd-sec--photocards .pd-centered-content__body ul > li:hover::before,
.pd-sec--photocards .pd-rich-text ul > li:hover::before { height: 6px; }
.pd-sec--photocards .pd-centered-content__body ul > li:hover::after,
.pd-sec--photocards .pd-rich-text ul > li:hover::after,
.pd-sec--photocards .pd-centered-content__body ul > li:focus-within::after,
.pd-sec--photocards .pd-rich-text ul > li:focus-within::after { opacity: 1; }
.pd-sec--photocards .pd-centered-content__body ul > li:hover > img:first-child,
.pd-sec--photocards .pd-rich-text ul > li:hover > img:first-child { transform: scale(1.04); }
/* Card title = the lead <strong>, with the same teal left-bar as .pd-sec--cards */
.pd-sec--photocards .pd-centered-content__body ul > li > strong:first-of-type,
.pd-sec--photocards .pd-rich-text ul > li > strong:first-of-type {
  position: relative;
  display: block;
  font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif;
  font-weight: 800 !important;
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--pd-navy, #022D41) !important;
  padding-left: 16px;
  margin: 0 0 10px;
}
.pd-sec--photocards .pd-centered-content__body ul > li > strong:first-of-type::before,
.pd-sec--photocards .pd-rich-text ul > li > strong:first-of-type::before {
  content: '';
  position: absolute; left: 0; top: 0.16em; bottom: 0.16em;
  width: 4px; border-radius: 999px; background: var(--pd-teal, #34C6B9);
}
.pd-sec--photocards .pd-centered-content__body ul > li > a,
.pd-sec--photocards .pd-rich-text ul > li > a {
  margin-top: auto;
  padding-top: 16px;
  font-family: 'Roboto','Roboto Fallback', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--pd-teal-accessible, #147468) !important;
}
.pd-sec--photocards .pd-centered-content__body ul > li > a::after,
.pd-sec--photocards .pd-rich-text ul > li > a::after {
  content: ' \2192'; transition: transform 0.2s ease; display: inline-block;
}
.pd-sec--photocards .pd-centered-content__body ul > li > a:hover::after,
.pd-sec--photocards .pd-rich-text ul > li > a:hover::after { transform: translateX(4px); }

/* ------------------------------------------------------------
   3. .pd-sec--video  —  click-to-play video facade
      Template renders one (or more) .pd-sec--video__item[data-video-id];
      a generic enhancer swaps the poster for an autoplay iframe on click.
      Lightweight (no embed until clicked) and reusable on any HubDB page.
   ------------------------------------------------------------ */
.pd-sec--video {
  display: grid;
  gap: clamp(18px, 2.2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.pd-sec--video--single { max-width: 860px; margin-left: auto; margin-right: auto; }
.pd-sec--video__item {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0;
  background: var(--pd-navy, #022D41);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-md, 0 4px 16px rgba(2,45,65,0.08));
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.pd-sec--video__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg, 0 12px 32px rgba(2,45,65,0.12)); }
.pd-sec--video__thumbnail {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 400ms ease;
}
.pd-sec--video__item:hover .pd-sec--video__thumbnail { transform: scale(1.05); }
.pd-sec--video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 52px; padding: 0; border: 0; cursor: pointer;
  background: var(--pd-teal, #34C6B9); border-radius: 14px;
  box-shadow: 0 6px 18px rgba(2, 45, 65, 0.35);
  display: flex; align-items: center; justify-content: center;
  transition: transform 220ms ease, background-color 220ms ease;
  z-index: 2;
}
.pd-sec--video__item:hover .pd-sec--video__play { transform: translate(-50%, -50%) scale(1.08); background: #2aa99e; }
.pd-sec--video__play-icon {
  display: block; width: 0; height: 0;
  border-style: solid; border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}
.pd-sec--video__item::after { /* subtle scrim so the play button always pops */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(2, 45, 65, 0.18);
  transition: background-color 220ms ease;
}
.pd-sec--video__item:hover::after { background: rgba(2, 45, 65, 0.10); }
.pd-sec--video__item iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.pd-sec--video__caption { margin-top: 14px; text-align: center; color: var(--pd-soft-grey, #9ea5a9); font-size: 0.9rem; }

/* ------------------------------------------------------------
   4. .pd-sec--photoband  —  full-bleed background-image band
      Its own section_type; rendered WITHOUT .pd-section padding (the
      band owns its rhythm). Modifiers via the row `container` field:
      sizing  pd-sec--photoband--wide|--banner|--tall|--short
      overlay pd-sec--photoband--overlay-light|--overlay-dark|--overlay-gradient
      align   pd-sec--photoband--align-left|--align-center|--align-right
   ------------------------------------------------------------ */
.pd-sec--photoband {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-color: var(--pd-navy, #022D41);
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  min-height: 360px;
  aspect-ratio: 16 / 9;
}
.pd-sec--photoband--wide  { aspect-ratio: 21 / 9; min-height: 300px; }
.pd-sec--photoband--banner{ aspect-ratio: 16 / 9; min-height: 360px; }
.pd-sec--photoband--tall  { aspect-ratio: 4 / 3;  min-height: 440px; }
.pd-sec--photoband--short { aspect-ratio: 3 / 1;  min-height: 220px; }
/* Band photo is a real lazy <img> (was a CSS background, which can never
   lazy-load). It fills the section under the overlay (z1) and content (z2);
   the section keeps sizing via the aspect-ratio modifiers above. !important
   hardens height/object-fit against HubSpot's injected img styles (the same
   hidden style block that once squished .pd-dyn media images). */
.pd-sec--photoband__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100% !important;
  max-width: none;
  object-fit: cover !important;
  object-position: center center;
}
/* default overlay: medium navy wash for legible white text */
.pd-sec--photoband__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(2, 45, 65, 0.52);
}
.pd-sec--photoband--overlay-light .pd-sec--photoband__overlay { background: rgba(2, 45, 65, 0.32); }
.pd-sec--photoband--overlay-dark  .pd-sec--photoband__overlay { background: rgba(2, 45, 65, 0.66); }
.pd-sec--photoband--overlay-gradient .pd-sec--photoband__overlay {
  background: linear-gradient(180deg, rgba(2,45,65,0.20) 0%, rgba(2,45,65,0.72) 100%);
}
/* teal corner accent, echoing the hero + theme modules */
.pd-sec--photoband::after {
  content: ''; position: absolute; top: 0; left: 0; width: 96px; height: 6px;
  background: var(--pd-teal, #34C6B9); border-radius: 0 0 6px 0; z-index: 3;
}
.pd-sec--photoband__inner { position: relative; z-index: 2; width: 100%; }
.pd-sec--photoband__content { max-width: 680px; }
.pd-sec--photoband--align-center .pd-sec--photoband__content { max-width: 760px; margin: 0 auto; text-align: center; }
.pd-sec--photoband--align-right  .pd-sec--photoband__content { margin-left: auto; text-align: right; }
.pd-sec--photoband__eyebrow {
  margin: 0 0 10px; color: #fff;
  font-family: 'Roboto','Roboto Fallback', Helvetica, Arial, sans-serif; font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(2, 45, 65, 0.5);
}
.pd-sec--photoband__heading {
  margin: 0 0 14px; color: #fff;
  font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif; font-weight: 800;
  font-size: clamp(1.7rem, 4.2vw, 2.85rem); line-height: 1.14;
  text-shadow: 0 2px 16px rgba(2, 45, 65, 0.55);
}
.pd-sec--photoband__body {
  color: rgba(255, 255, 255, 0.95);
  font-family: 'Montserrat','Montserrat Fallback', Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6;
  text-shadow: 0 1px 10px rgba(2, 45, 65, 0.5);
}
.pd-sec--photoband__body > :last-child { margin-bottom: 0; }
.pd-sec--photoband__actions { margin-top: 22px; }
.pd-sec--photoband--align-center .pd-sec--photoband__actions { display: flex; justify-content: center; }
@media (max-width: 768px) {
  .pd-sec--photoband,
  .pd-sec--photoband--wide,
  .pd-sec--photoband--banner { aspect-ratio: auto; min-height: 340px; }
  .pd-sec--photoband__content,
  .pd-sec--photoband--align-center .pd-sec--photoband__content { text-align: left; margin: 0; }
  .pd-sec--photoband--align-center .pd-sec--photoband__actions { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-sec--media__figure img,
  .pd-sec--video__thumbnail,
  .pd-sec--video__play,
  .pd-sec--photocards ul > li,
  .pd-sec--photocards ul > li > img:first-child { transition: none !important; }
}

/* ===================================================================
   .pd-dyn EDITORIAL LAYER  —  "The Field Journal"  (additive, scoped)
   -------------------------------------------------------------------
   Every rule below is gated behind .pd-dyn, which is added to
   .pd-main-content on the dynamic-page template ONLY. Core pages never
   receive .pd-dyn, so theme.css / main.css behavior is untouched.
   Master on/off switch: delete the class to fully revert the redesign.
   =================================================================== */

/* 1 ── Tokens + editorial measures on the wrapper */
.pd-dyn {
  --dyn-pad: clamp(20px, 5vw, 64px);
  --dyn-content: 1140px;
  --dyn-wide: 1380px;
  --pd-teal-accessible: #117A6F;
  --dyn-radius: 20px;
  --dyn-shadow: 0 8px 20px rgba(2, 45, 65, 0.12);
  --dyn-shadow-hover: 0 16px 40px rgba(2, 45, 65, 0.14);
}

/* 2 ── Breakout grid: each section is a named-line grid so children opt
   into content / wide / full bands with no negative-margin math. The
   section background still spans full width (bands are free); only the
   CONTENT is inset by the grid tracks. */
.pd-dyn .pd-section {
  display: grid;
  padding-inline: 0;
  padding-block: clamp(56px, 8vw, 112px);
  position: relative;
  grid-template-columns:
    [full-start] minmax(var(--dyn-pad), 1fr)
    [wide-start] minmax(0, calc((var(--dyn-wide) - var(--dyn-content)) / 2))
    [content-start] min(var(--dyn-content), 100% - var(--dyn-pad) * 2)
    [content-end] minmax(0, calc((var(--dyn-wide) - var(--dyn-content)) / 2))
    [wide-end] minmax(var(--dyn-pad), 1fr)
    [full-end];
}
/* Route existing markup automatically. padding-inline:0 (not padding:0)
   so the hero container keeps its vertical padding. */
.pd-dyn .pd-section > .pd-container,
.pd-dyn .pd-section > .pd-container--narrow {
  grid-column: content;
  max-width: none;
  width: 100%;
  padding-inline: 0;
}
/* Wide track for card grids + anything flagged --wide */
.pd-dyn .pd-section > .pd-sec--cards,
.pd-dyn .pd-section > .pd-sec--infocards,
.pd-dyn .pd-section > .pd-sec--proglinks,
.pd-dyn .pd-section > .pd-sec--photocards,
.pd-dyn .pd-section > .pd-sec--stat,
.pd-dyn .pd-section > .pd-container--wide { grid-column: wide; }
/* Media feature spreads use the wide track (figure is nested in .pd-container) */
.pd-dyn .pd-section:has(.pd-sec--media) > .pd-container { grid-column: wide; }
/* Full-bleed escape hatch + readable prose column inside a wide section */
.pd-dyn .pd-bleed { grid-column: full; }
.pd-dyn .pd-measure { max-width: 68ch; }
/* Hero owns its vertical rhythm via its container; keep section padding 0 */
.pd-dyn .pd-section.pd-hero-module { padding-block: 0; }

/* 3 ── Heading system: kill the floating centered bar, add an intentional
   left block-rule + an authored one-word highlighter. */
.pd-dyn .pd-section-heading--underline { display: block; padding-bottom: 0; }
.pd-dyn .pd-section-heading--underline::after { content: none; }
.pd-dyn .pd-section-heading {
  position: relative;
  text-align: left;
  font-size: clamp(1.8rem, 1.05rem + 2.6vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.pd-dyn .pd-section-heading::before {
  content: "";
  display: block;
  width: 52px;
  height: 5px;
  border-radius: 999px;
  margin: 0 0 18px;
  background: linear-gradient(90deg, var(--pd-teal, #34C6B9), var(--pd-yellow, #FFDE59));
}
/* The deliberate one-word highlight: author wraps it in <em> or <mark> */
.pd-dyn .pd-section-heading em,
.pd-dyn .pd-section-heading mark,
.pd-dyn .pd-h1 em,
.pd-dyn .pd-h1 mark {
  font-style: normal;
  position: relative;
  color: inherit;
  background: linear-gradient(transparent 60%, rgba(255, 222, 89, 0.55) 60%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.06em;
  border-radius: 2px;
}
.pd-dyn .pd-section--navy .pd-section-heading em,
.pd-dyn .pd-section--gradient .pd-section-heading em,
.pd-dyn .pd-section--navy .pd-h1 em,
.pd-dyn .pd-section--gradient .pd-h1 em {
  background: linear-gradient(transparent 60%, rgba(52, 198, 185, 0.45) 60%);
}
/* Eyebrow = magazine kicker with a leading tick */
.pd-dyn .pd-eyebrow,
.pd-dyn .pd-centered-content__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Roboto','Roboto Fallback', Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.76rem;
  color: var(--pd-teal-accessible, #147468);
}
.pd-dyn .pd-eyebrow::before,
.pd-dyn .pd-centered-content__eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.pd-dyn .pd-section--navy .pd-eyebrow,
.pd-dyn .pd-section--gradient .pd-eyebrow,
.pd-dyn .pd-section--navy .pd-centered-content__eyebrow,
.pd-dyn .pd-section--gradient .pd-centered-content__eyebrow { color: var(--pd-teal, #34C6B9); }
/* Centered exception (deliberate only): intro lede, CTA closers, FAQ */
.pd-dyn .is-centered .pd-section-heading,
.pd-dyn .pd-centered-content--center .pd-section-heading,
.pd-dyn .pd-text-section--centered .pd-section-heading,
.pd-dyn .pd-section-heading.pd-text-center { text-align: center; }
.pd-dyn .is-centered .pd-section-heading::before,
.pd-dyn .pd-centered-content--center .pd-section-heading::before,
.pd-dyn .pd-text-section--centered .pd-section-heading::before,
.pd-dyn .pd-section-heading.pd-text-center::before { margin-inline: auto; }

/* 4 ── Color-cadence helper: a thin teal seam so transitions read intentional */
.pd-dyn .pd-section + .pd-section { box-shadow: 0 -1px 0 rgba(52, 198, 185, 0.16); }

/* 5 ── Hero upgrade */
.pd-dyn .pd-h1 { font-size: clamp(2.3rem, 4vw + 1rem, 4rem); max-width: 18ch; letter-spacing: -0.02em; }
.pd-dyn .pd-hero-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-family: 'Roboto','Roboto Fallback', Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.92);
}
.pd-dyn .pd-hero-ribbon span { display: flex; flex-direction: column; font-size: 0.82rem; letter-spacing: 0.04em; }
.pd-dyn .pd-hero-ribbon b {
  font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--pd-yellow, #FFDE59);
  line-height: 1;
  margin-bottom: 3px;
}

/* 6 ── Media feature spread: asymmetric 7/5, taller editorial photo */
.pd-dyn .pd-sec--media { grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.pd-dyn .pd-sec--media--reverse { grid-template-columns: 5fr 7fr; }
.pd-dyn .pd-sec--media__figure img { aspect-ratio: 4 / 5; min-height: 0; max-height: none; object-fit: cover !important; }
@media (max-width: 860px) {
  .pd-dyn .pd-sec--media,
  .pd-dyn .pd-sec--media--reverse { grid-template-columns: 1fr; }
  .pd-dyn .pd-sec--media__figure img { aspect-ratio: 4 / 3; }
}

/* 7 ── Photoband chapter break */
.pd-dyn .pd-sec--photoband { min-height: clamp(400px, 55vh, 600px); }
.pd-dyn .pd-sec--photoband__heading { font-size: clamp(1.9rem, 4.5vw, 3.1rem); max-width: 20ch; }
.pd-dyn .pd-sec--photoband--overlay-gradient .pd-sec--photoband__overlay {
  background: linear-gradient(110deg, rgba(2, 45, 65, 0.80), rgba(2, 45, 65, 0.30) 70%);
}

/* 8 ── NEW recognizers (no new section_type, pure CSS over existing structure) */
/* --stat : a <ul> of <strong>Number</strong> label -> oversized numbers row */
.pd-dyn .pd-sec--stat .pd-centered-content__body ul,
.pd-dyn .pd-sec--stat .pd-rich-text ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(20px, 3vw, 40px); text-align: center;
}
.pd-dyn .pd-sec--stat li {
  margin: 0; border-top: 3px solid var(--pd-teal, #34C6B9); padding-top: 14px;
  font-family: 'Roboto','Roboto Fallback', Helvetica, Arial, sans-serif; color: var(--pd-slate-grey, #3D4C53); font-size: 0.92rem;
}
.pd-dyn .pd-sec--stat li > strong:first-child {
  display: block; font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif; font-weight: 800;
  font-size: clamp(2.2rem, 1.4rem + 2vw, 3.3rem); line-height: 1; color: var(--pd-navy, #022D41); margin-bottom: 6px;
}
.pd-dyn .pd-section--navy .pd-sec--stat li > strong:first-child,
.pd-dyn .pd-section--gradient .pd-sec--stat li > strong:first-child { color: var(--pd-yellow, #FFDE59); }
.pd-dyn .pd-section--navy .pd-sec--stat li,
.pd-dyn .pd-section--gradient .pd-sec--stat li { color: rgba(255, 255, 255, 0.88); }
/* --pullquote : a <blockquote> -> oversized centered editorial statement */
.pd-dyn .pd-sec--pullquote .pd-centered-content__body { max-width: 920px; margin-inline: auto; text-align: center; }
.pd-dyn .pd-sec--pullquote blockquote {
  font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif; font-weight: 800;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.4rem); line-height: 1.22; color: var(--pd-navy, #022D41);
  position: relative; padding-top: 0.7em; margin: 0;
}
.pd-dyn .pd-sec--pullquote blockquote::before {
  content: '\201C'; position: absolute; top: -0.18em; left: 50%; transform: translateX(-50%);
  font-size: 2.4em; line-height: 1; color: var(--pd-teal, #34C6B9); opacity: 0.5;
}
.pd-dyn .pd-section--navy .pd-sec--pullquote blockquote,
.pd-dyn .pd-section--gradient .pd-sec--pullquote blockquote { color: #fff; }
.pd-dyn .pd-sec--pullquote blockquote cite,
.pd-dyn .pd-sec--pullquote blockquote em {
  display: block; margin-top: 0.7em; font-size: 0.6em; font-style: normal; font-weight: 600;
  font-family: 'Roboto','Roboto Fallback', Helvetica, Arial, sans-serif; color: var(--pd-teal-accessible, #147468);
}
.pd-dyn .pd-section--navy .pd-sec--pullquote blockquote cite,
.pd-dyn .pd-section--navy .pd-sec--pullquote blockquote em,
.pd-dyn .pd-section--gradient .pd-sec--pullquote blockquote cite,
.pd-dyn .pd-section--gradient .pd-sec--pullquote blockquote em { color: var(--pd-yellow, #FFDE59); }

/* 9 ── Cohesion: one shared radius across card-like surfaces */
.pd-dyn :is(.pd-sec--cards, .pd-sec--infocards, .pd-sec--proglinks, .pd-sec--photocards) li,
.pd-dyn .pd-sec--media__figure,
.pd-dyn .pd-sec--video__item { border-radius: var(--dyn-radius); }
.pd-dyn :is(.pd-sec--cards, .pd-sec--photocards) li:hover { box-shadow: var(--dyn-shadow-hover); }

/* 10 ── Timeline / checklist: clean single editorial column
   (a sticky 2-col variant is deferred to a later polish pass to avoid
   fragile flat-sibling grid placement). */

/* 11 ── (Scroll motion intentionally OMITTED. Scroll-reveal animation and
   photoband parallax were removed per owner direction — motion/effects are a
   separate session. This layer is static formatting/design/structure only.) */

/* 12 ── Optional sticky mobile CTA bar (uniquely named; this template only) */
.pd-dyn-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px clamp(16px, 4vw, 24px);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(2, 45, 65, 0.97);
  box-shadow: 0 -6px 24px rgba(2, 45, 65, 0.22);
  transform: translateY(110%); transition: transform 0.3s ease;
}
body.dyn-cta-show .pd-dyn-cta-bar { transform: translateY(0); }
.pd-dyn-cta-bar__label { color: #fff; font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.pd-dyn-cta-bar .pd-btn { box-shadow: none; white-space: nowrap; }
@media (min-width: 900px) { .pd-dyn-cta-bar { display: none; } }
@media (prefers-reduced-motion: reduce) { .pd-dyn-cta-bar { transition: none; } }

/* 13 ── Responsive tail + focus visibility */
@media (max-width: 860px) {
  .pd-dyn .pd-section-heading::before { margin-bottom: 14px; }
}
.pd-dyn :is(.pd-sec--cards, .pd-sec--photocards, .pd-sec--proglinks) a:focus-visible,
.pd-dyn-cta-bar a:focus-visible { outline: 3px solid var(--pd-teal, #34C6B9); outline-offset: 2px; }

/* 14 ── Refinements: keep plain narrative prose at a readable measure (so it
   doesn't run the full 1140px), and tighten thin trust/utility bands so they
   don't float in excess navy. Card/list grids (ul) are untouched. */
/* BF1 (D1 measure cap): unify the plain-prose cap with the DS2 body token
   var(--pd-measure) (= 68ch) so the v1 and DS2 renders agree on one measure. */
.pd-dyn .pd-section > .pd-container:not([class*="pd-sec--"]) .pd-centered-content--left > .pd-centered-content__body > p { max-width: var(--pd-measure, 68ch); }
.pd-dyn .pd-section:has(> .pd-sec--trust) { padding-block: clamp(30px, 4vw, 52px); }
/* ===================== end .pd-dyn editorial layer ===================== */



/* ------------------------------------------------------------
   Touch devices: neutralize sticky :hover card states.
   On touch, tapping a link inside a card leaves :hover applied,
   leaving one lone lifted/teal-bordered card. Disable the hover
   lift, border tint, shadow, and accent-bar growth where there
   is no real hover pointer. (owner-reported mobile bug 2026-06-22)
   ------------------------------------------------------------ */
@media (hover: none) {
  .pd-dyn .pd-sec--cards .pd-centered-content__body ul > li:hover,
  .pd-dyn .pd-sec--cards .pd-rich-text ul > li:hover,
  .pd-dyn .pd-sec--infocards .pd-centered-content__body > p:hover,
  .pd-dyn .pd-sec--infocards .pd-centered-content__body > ul > li:hover,
  .pd-dyn .pd-sec--infocards .pd-centered-content__body > ol > li:hover,
  .pd-dyn .pd-sec--photocards .pd-centered-content__body ul > li:hover,
  .pd-dyn .pd-sec--photocards .pd-rich-text ul > li:hover,
  .pd-dyn .pd-sec--proglinks ul > li:hover,
  .pd-dyn .pd-sec--compare .pd-centered-content__body > ul > li:hover,
  .pd-dyn .pd-sec--compare .pd-rich-text > ul > li:hover,
  .pd-dyn .pd-sec--checklist .pd-centered-content__body ul li:hover,
  .pd-dyn .pd-sec--media__figure:hover {
    transform: none !important;
    border-color: rgba(11, 45, 58, 0.08) !important;
    box-shadow: 0 8px 20px rgba(2, 45, 65, 0.12) !important;
  }
  .pd-dyn .pd-sec--infocards .pd-centered-content__body > p:hover::after,
  .pd-dyn .pd-sec--infocards .pd-centered-content__body > ul > li:hover::after,
  .pd-dyn .pd-sec--infocards .pd-centered-content__body > ol > li:hover::after {
    transform: scaleX(0.34) !important;
  }
  .pd-dyn .pd-sec--photocards .pd-centered-content__body ul > li:hover::before,
  .pd-dyn .pd-sec--photocards .pd-rich-text ul > li:hover::before,
  .pd-dyn .pd-sec--media__figure:hover::before {
    height: 4px !important;
  }
}


/* ------------------------------------------------------------
   Compare-card images: frame to a consistent aspect with cover,
   so mismatched source dimensions (a landscape room shot vs a
   portrait dog) render uniformly instead of breaking card height
   and text alignment. (owner-reported daycamp mismatch 2026-06-22)
   ------------------------------------------------------------ */
.pd-sec--compare .pd-centered-content__body > ul > li > img:first-child,
.pd-sec--compare .pd-rich-text > ul > li > img:first-child {
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 0 clamp(14px, 2vw, 18px);
  background: var(--pd-lightest-grey, #ebeded);
}


/* ------------------------------------------------------------
   Trust-band links -> graphical pill CTAs (site-wide).
   The trust strip's inline text links read as plain underlined
   text; render them as branded pills instead. Theme-aware so they
   work on navy (28 bands) and white/light (2 bands). The middot
   separators are removed from the row bodies. (owner-requested 2026-06-22)
   ------------------------------------------------------------ */
.pd-dyn .pd-sec--trust .pd-centered-content__body a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 8px 5px 0;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  font-family: 'Roboto','Roboto Fallback', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.15;
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.pd-dyn .pd-sec--trust .pd-centered-content__body a::after {
  content: "\2192";
  font-weight: 700;
  opacity: .55;
  transition: transform .18s ease, opacity .18s ease;
}
.pd-dyn .pd-sec--trust .pd-centered-content__body a:hover::after {
  transform: translateX(2px);
  opacity: 1;
}
.pd-dyn .pd-section--navy .pd-sec--trust .pd-centered-content__body a {
  border-color: rgba(52, 198, 185, 0.6);
  background: rgba(52, 198, 185, 0.10);
  color: #ffffff !important;
}
.pd-dyn .pd-section--navy .pd-sec--trust .pd-centered-content__body a:hover {
  background: var(--pd-teal, #34C6B9);
  border-color: var(--pd-teal, #34C6B9);
  color: var(--pd-navy, #022D41) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(52, 198, 185, 0.28);
}
.pd-dyn .pd-section--white .pd-sec--trust .pd-centered-content__body a,
.pd-dyn .pd-section--light .pd-sec--trust .pd-centered-content__body a {
  border-color: rgba(2, 45, 65, 0.28);
  background: rgba(2, 45, 65, 0.04);
  color: var(--pd-navy, #022D41) !important;
}
.pd-dyn .pd-section--white .pd-sec--trust .pd-centered-content__body a:hover,
.pd-dyn .pd-section--light .pd-sec--trust .pd-centered-content__body a:hover {
  background: var(--pd-navy, #022D41);
  border-color: var(--pd-navy, #022D41);
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(2, 45, 65, 0.18);
}
@media (hover: none) {
  .pd-dyn .pd-sec--trust .pd-centered-content__body a:hover {
    transform: none;
    box-shadow: none;
  }
  .pd-dyn .pd-sec--trust .pd-centered-content__body a:hover::after {
    transform: none;
  }
}


/* ------------------------------------------------------------
   Mobile CTA buttons: a HubSpot-injected rule was collapsing the
   dynamic-page CTA buttons to content width, so a long label (the
   phone number) wrapped inside a tiny round button. Force them
   full-width and stacked on phones so they read as proper buttons.
   (owner-reported boarding CTAs 2026-06-23)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .pd-dyn .pd-btn-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .pd-dyn .pd-btn-row .pd-btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* ------------------------------------------------------------
   Reviews section (.pd-dyn-reviews): lightweight 2-up frame for the
   review-widget feeds on dynamic pages. The widget renders its own
   review cards; this supplies the location headers + card framing.
   ------------------------------------------------------------ */
.pd-dyn-reviews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
  margin-top: 8px;
  align-items: start;
}
.pd-dyn-reviews__col {
  background: var(--pd-white, #fff);
  border-radius: 16px;
  padding: clamp(16px, 2.4vw, 26px);
  box-shadow: 0 4px 16px rgba(2, 45, 65, 0.08);
}
.pd-dyn-reviews__loc {
  font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: var(--pd-navy, #022D41);
  text-align: center;
  margin: 0 0 14px;
  font-size: 1.15rem;
}
.pd-dyn-reviews__feed { min-height: 80px; }
@media (max-width: 768px) {
  .pd-dyn-reviews { grid-template-columns: 1fr; }
}


/* ==============================================================
   STAGED CSS - NOT DEPLOYED. Prepared by Claude for lead review +
   deploy (drift race active; per task instructions Claude does not
   push CSS/templates directly). See docs/refactor-2026-07/staging/
   progcard-markup-reference.html for the paired markup pattern and
   per-camp-page rollout notes.

   INSERTION POINT: partners-dogs-theme/css/dynamic-pages.css
   Replace the existing block that runs from the comment
     "Pricing cards (.pd-price-grid / .pd-price-card) + loyalty ladder."
   (currently ~line 2818) through the end of
     ".pd-breakdown__note { ... }"
   (currently ~line 2906), i.e. everything currently between the
   "Pricing cards" section header comment and the
   "---- Camp page support: single pricing card + value stack ----"
   comment. That block is REPLACED WHOLESALE by everything below.
   Do not touch .pd-price-grid--1 / .pd-value-stack (camp single-card
   legacy support) or anything after it - those stay as-is.

   WHY A REPLACE, NOT AN APPEND: several existing selectors
   (.pd-price-card, .pd-price-card__name, .pd-price-card__price,
   .pd-price-card__value li::before, .pd-price-card__details, etc.)
   are redefined here with new rules. Appending after the old block
   would work via cascade (same specificity, later wins) but leaves
   dead CSS in the file; a clean replace is preferred. If the lead
   prefers a zero-risk append instead of a replace, that also works
   unmodified - every selector below has equal-or-higher specificity
   than its old counterpart, so it always wins appended-last.

   WHAT'S NEW vs the current .pd-price-card (owner brief: "more
   experiential and beautiful, more graphics, more engagement"):
     1. .pd-price-card__photo   - program photo header, navy gradient
        scrim, lazy + dimensioned (no CLS), optional emoji/icon badge
        pinned bottom-left of the photo.
     2. .pd-price-card__valuehr - the "$X/hr" value-hook, a distinct
        pill/badge (not buried in body copy).
     3. .pd-price-card__incl    - inclusions list upgraded from plain
        checkmarks to small inline SVG icons (nights/lessons/classes/
        days), each wrapped so the icon sits in a soft teal chip.
     4. .pd-price-card--featured gets a stronger gradient border +
        depth treatment (was a flat 2px border before).
     5. Hover lift + image zoom via the already-live motion hooks
        (.pd-hover-raise, .pd-img-zoom, data-pd-reveal) - CSS-only,
        reduced-motion safe, no JS added by this change (motion.js
        already drives data-pd-reveal site-wide).
     6. Cards with NO photo (e.g. membership tiers, which have no
        canon photo asset - see progcard-markup-reference.html notes)
        get a graphic icon-medallion header instead via
        .pd-price-card__icon-header, so the component still reads as
        "elevated" without forcing an unrelated stock photo.

   Everything below is additive-compatible with the existing
   .pd-price-card__nightly / __meta / __details / __anchor / .pd-breakdown
   selectors already used by staged/legacy copy - those are UNCHANGED
   from the current file and are simply carried forward verbatim so
   old markup (e.g. any card that hasn't been upgraded to the new photo
   header yet) keeps rendering correctly. New selectors are strictly
   additive on top of the old skeleton class names.
   ============================================================== */

/* ------------------------------------------------------------
   Pricing cards (.pd-price-grid / .pd-price-card) + loyalty ladder.
   Value-first, experiential pricing tiles: photo header, value-hour
   badge, icon inclusions, expandable full breakdown, CTA per card.
   Mobile-first (auto-fit grid). Reusable across /pricing AND every
   program/camp page (training-camp, behavior-camp, transform-camp).
   (progcard redesign 2026-07-02, supersedes pricing overhaul 2026-06-23)
   ------------------------------------------------------------ */
.pd-price-grid { display: grid; gap: clamp(18px, 2.4vw, 28px); margin: 8px 0 4px; }
.pd-price-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px) { .pd-price-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pd-price-grid--3 { grid-template-columns: 1fr; } }
/* The generic .pd-centered-content wrapper (a grid with justify-items:start)
   shrink-wraps + left-aligns its body, which broke the card grid. When it holds
   a price grid, stretch the body to the full section width and center the heading. */
.pd-dyn .pd-centered-content:has(.pd-price-grid) { justify-items: stretch; text-align: center; }
.pd-dyn .pd-centered-content:has(.pd-price-grid) .pd-centered-content__body { width: 100%; justify-self: stretch; }

.pd-price-card { text-align: left; }
.pd-price-card .pd-btn { text-decoration: none; }
.pd-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--pd-white, #fff);
  border: 1px solid rgba(2, 45, 65, 0.10);
  border-radius: 16px; /* canonical --pd-radius-card (was 18) */
  overflow: hidden; /* clip the photo header to the card's rounded corners */
  box-shadow: 0 8px 20px rgba(2, 45, 65, 0.12); /* canonical shadow-md */
  transition: transform 250ms cubic-bezier(0.2, 0, 0, 1), box-shadow 250ms cubic-bezier(0.2, 0, 0, 1), border-color 250ms cubic-bezier(0.2, 0, 0, 1);
}
/* Engagement: hover lift, layered on top of the shared .pd-hover-raise hook
   so cards behave consistently with the rest of the site's motion system
   and respect prefers-reduced-motion / .pd-no-motion automatically (see
   motion.css lines ~127-149, ~284-296). No new JS required. */
.pd-price-card.pd-hover-raise:hover,
.pd-price-card.pd-hover-raise:focus-within {
  box-shadow: 0 16px 40px rgba(2, 45, 65, 0.14); /* canonical shadow-lg */
}
/* Card body area gets its own padding now that the photo header (if present)
   bleeds edge-to-edge above it. */
.pd-price-card__body { padding: clamp(20px, 2.4vw, 26px) clamp(22px, 2.6vw, 30px) clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; flex: 1; }
/* Cards with no photo header (e.g. membership tiers) keep the old
   flat padding on the card itself since .pd-price-card__body is optional. */
.pd-price-card > .pd-price-card__name:first-child,
.pd-price-card > .pd-price-card__icon-header + * { }
.pd-price-card:not(:has(.pd-price-card__photo)):not(:has(.pd-price-card__icon-header)) { padding: clamp(22px, 2.6vw, 30px); }

.pd-price-card--featured {
  border: 2px solid var(--pd-teal, #34C6B9);
  box-shadow: 0 16px 42px rgba(2, 45, 65, 0.15);
  background:
    linear-gradient(var(--pd-white, #fff), var(--pd-white, #fff)) padding-box,
    linear-gradient(135deg, var(--pd-teal, #34C6B9) 0%, var(--pd-yellow, #FFDE59) 100%) border-box;
}
.pd-price-card--featured.pd-hover-raise:hover,
.pd-price-card--featured.pd-hover-raise:focus-within {
  box-shadow: 0 24px 56px rgba(2, 45, 65, 0.22);
}

.pd-price-card__badge {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  background: var(--pd-yellow, #FFDE59); color: var(--pd-navy, #022D41); /* canonical: yellow reserved for the popular/featured badge (navy on yellow = AA) */
  font-family: 'Roboto','Roboto Fallback', sans-serif; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  padding: 5px 14px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(2, 45, 65, 0.22);
}
/* Cards without a photo header keep the badge floating above the top edge,
   matching the previous (pre-redesign) placement. */
.pd-price-card:not(:has(.pd-price-card__photo)) .pd-price-card__badge {
  top: -13px;
}
.pd-price-card__badge--alt { background: rgba(2, 45, 65, 0.9); color: #fff; } /* secondary badge: navy-scrim to differentiate from the yellow popular badge */

/* ---- 1. Visual header: program photo, gradient scrim, icon badge ---- */
/* Fixed-ratio box (16:10) reserves layout space before the image loads,
   so there is zero CLS regardless of network speed. width/height attrs
   on the <img> itself are the primary CLS guard; aspect-ratio is the
   CSS-side backstop for any markup that omits them. */
.pd-price-card__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--pd-navy, #022D41); /* shows while the image lazy-loads */
}
.pd-price-card__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Image zoom on hover, reusing the site's shared .pd-img-zoom hook so the
   easing/duration/reduced-motion handling stays centralized in motion.css
   (see motion.css lines ~207-220). Wrap the <img> in .pd-img-zoom. */
.pd-price-card__photo.pd-img-zoom { transform: none; } /* photo box itself doesn't move, only the img inside does */
/* Navy-to-transparent gradient overlay for text legibility + brand feel */
.pd-price-card__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2, 45, 65, 0.05) 0%, rgba(2, 45, 65, 0.15) 55%, rgba(2, 45, 65, 0.82) 100%);
  pointer-events: none;
}
/* Program icon/emoji badge, bottom-left on the photo, above the scrim */
.pd-price-card__icon {
  position: absolute; left: 16px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 12px;
  font-size: 1.4rem; line-height: 1;
  box-shadow: 0 4px 14px rgba(2, 45, 65, 0.28);
}
.pd-price-card__icon svg { width: 24px; height: 24px; color: var(--pd-navy, #022D41); }

/* Program name sits on the photo (bottom, above the icon's baseline) when a
   photo header is present, for a magazine-style masthead treatment. */
.pd-price-card__photo .pd-price-card__name-on-photo {
  position: absolute; left: 72px; right: 16px; bottom: 14px; z-index: 2;
  color: #fff; font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif;
  font-weight: 800; font-size: 1.22rem; line-height: 1.15;
  text-shadow: 0 2px 8px rgba(2, 45, 65, 0.55);
  margin: 0;
}

/* ---- Icon-medallion header (cards with no photo asset, e.g. memberships) ---- */
.pd-price-card__icon-header {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 26px 0 6px;
  background: linear-gradient(135deg, rgba(52, 198, 185, 0.12) 0%, rgba(2, 45, 65, 0.05) 100%);
}
.pd-price-card__icon-header .pd-price-card__medallion {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--pd-navy, #022D41);
  box-shadow: 0 8px 20px rgba(2, 45, 65, 0.22);
}
.pd-price-card__icon-header .pd-price-card__medallion svg { width: 30px; height: 30px; color: var(--pd-yellow, #FFDE59); }

.pd-price-card__name {
  font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif; font-weight: 800;
  color: var(--pd-navy, #022D41); font-size: 1.3rem; margin: 6px 0 2px;
}
/* When the name lives on the photo, hide the redundant in-body heading
   visually but keep it for a11y/SEO (one real <h3> per card either way). */
.pd-price-card__photo + .pd-price-card__body > .pd-price-card__name,
.pd-price-card__photo ~ .pd-price-card__name {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.pd-price-card__price {
  font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif; font-weight: 800;
  color: var(--pd-navy, #022D41); font-size: 2.2rem; line-height: 1; margin: 8px 0;
}
.pd-price-card__price span { font-size: 1rem; font-weight: 600; color: var(--pd-soft-grey, #9ea5a9); }

/* ---- 2. Value hook: prominent "effective value" badge/pill ---- */
/* Distinct from the plain-text .pd-price-card__nightly line already in use;
   this is a standalone pill so the $/hr number reads as a headline claim,
   not a footnote. Numbers must trace to docs/refactor-2026-07/
   pricing-value-model.md section "v3 direction" (honest documented figures:
   Foundation ~$11/hr, Behavior ~$17.50/hr, Transform ~$17.80/hr). */
.pd-price-card__valuehr {
  /* block flowing text, NOT inline-flex: flex turned each text run ("About",
     the <strong>, the trailing clause) + the icon into separate shrinking flex
     items, which columnized/garbled the sentence on narrow (quiz) cards. Block
     lets the whole "About $X an hour ..." wrap as one readable sentence. */
  display: block;
  background: rgba(52, 198, 185, 0.14);
  border: 1px solid rgba(52, 198, 185, 0.45);
  color: var(--pd-teal-accessible, #147468);
  font-family: 'Roboto','Roboto Fallback', sans-serif; font-weight: 700; font-size: 0.86rem;
  line-height: 1.45;
  padding: 8px 15px; border-radius: 14px;
  margin: 2px 0 12px;
}
.pd-price-card__valuehr svg { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; margin-right: 6px; }
.pd-price-card__valuehr strong { font-weight: 800; color: var(--pd-navy, #022D41); }
/* Featured card gets a slightly bolder value pill to match its premium border */
.pd-price-card--featured .pd-price-card__valuehr {
  background: rgba(2, 45, 65, 0.92);
  border-color: transparent;
  color: var(--pd-yellow, #FFDE59);
}
.pd-price-card--featured .pd-price-card__valuehr strong { color: #fff; }

/* ---- 3. Price + outcome tagline (sell the outcome, not the commodity) ---- */
.pd-price-card__outcome {
  color: var(--pd-navy, #022D41); font-size: 0.98rem; font-weight: 600;
  line-height: 1.4; margin: 0 0 14px;
}
.pd-price-card__meta { color: var(--pd-slate-grey, #3D4C53); font-size: 0.94rem; margin: 0 0 16px; }

/* ---- 4. Inclusions with small icons (upgraded from plain checkmarks) ---- */
.pd-price-card__incl { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 11px; }
.pd-price-card__incl li {
  display: flex; align-items: flex-start; gap: 11px;
  color: var(--pd-slate-grey, #3D4C53); font-size: 0.95rem; line-height: 1.35;
}
.pd-price-card__incl-ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-top: 1px;
  background: rgba(52, 198, 185, 0.14); border-radius: 8px;
}
.pd-price-card__incl-ico svg { width: 16px; height: 16px; color: var(--pd-teal-accessible, #147468); }
.pd-price-card__incl li strong { color: var(--pd-navy, #022D41); }

/* Legacy plain-checkmark list stays supported for any not-yet-upgraded card
   markup (unchanged behavior from the pre-redesign CSS). */
.pd-price-card__value { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 9px; }
.pd-price-card__value li { position: relative; padding-left: 26px; color: var(--pd-slate-grey, #3D4C53); font-size: 0.95rem; line-height: 1.4; }
.pd-price-card__value li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--pd-teal-600, #147468); font-weight: 800; /* AA: checkmark on white card */
}
.pd-price-card__value li strong { color: var(--pd-navy, #022D41); }

.pd-price-card__anchor { font-size: 0.84rem; color: var(--pd-soft-grey, #9ea5a9); margin: 0 0 18px; }
.pd-price-card .pd-btn { margin-top: auto; width: 100%; text-align: center; }

/* Loyalty ladder (rendered on a navy section) - unchanged */
.pd-loyalty-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 12px; margin-top: 24px; }
.pd-loyalty-tier {
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(52, 198, 185, 0.30);
  border-radius: 12px; padding: 16px 10px; text-align: center;
}
.pd-loyalty-tier--top { border-color: var(--pd-yellow, #FFDE59); background: rgba(255, 222, 89, 0.12); }
.pd-loyalty-pts { display: block; color: #fff; font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif; font-weight: 800; font-size: 1.02rem; }
.pd-loyalty-val { display: block; color: var(--pd-teal-600, #147468); font-weight: 700; margin-top: 4px; }
.pd-loyalty-tier--top .pd-loyalty-val { color: var(--pd-yellow, #FFDE59); }

/* Pricing card: nightly rate + value-breakdown accordion (native <details>) - unchanged */
.pd-price-card__nightly { color: #1f8f85; font-weight: 600; font-size: 0.9rem; margin: -2px 0 10px; }

/* ---- 6. "What's included" native <details> expand ---- */
.pd-price-card__details { margin: 2px 0 16px; border-top: 1px solid rgba(2, 45, 65, 0.10); padding-top: 12px; }
.pd-price-card__details > summary {
  cursor: pointer; list-style: none; font-family: 'Roboto','Roboto Fallback', sans-serif; font-weight: 600;
  font-size: 0.9rem; color: var(--pd-navy, #022D41); display: flex; align-items: center;
  justify-content: space-between; gap: 8px; -webkit-tap-highlight-color: transparent;
}
.pd-price-card__details > summary::-webkit-details-marker { display: none; }
.pd-price-card__details > summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--pd-teal-600, #147468); font-weight: 700; /* AA: toggle glyph on white card */ transition: transform 0.2s ease; }
.pd-price-card__details[open] > summary::after { content: "\2212"; }
.pd-breakdown { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.88rem; }
.pd-breakdown td, .pd-breakdown th { padding: 7px 0; border-bottom: 1px solid rgba(2, 45, 65, 0.07); color: var(--pd-slate-grey, #3D4C53); vertical-align: top; }
.pd-breakdown th[scope="row"] { text-align: left; font-weight: 400; }
.pd-breakdown td:last-child { text-align: right; white-space: nowrap; font-weight: 600; color: var(--pd-navy, #022D41); padding-left: 10px; }
.pd-breakdown__total td, .pd-breakdown__total th { border-top: 2px solid rgba(2, 45, 65, 0.16); border-bottom: none; padding-top: 9px; font-weight: 700; color: var(--pd-navy, #022D41); }
.pd-breakdown__price td, .pd-breakdown__price th { border-bottom: none; padding-top: 2px; }
.pd-breakdown__save td, .pd-breakdown__save th { border-bottom: none; color: #1f8f85; font-weight: 800; }
.pd-breakdown__note { font-size: 0.78rem; color: var(--pd-soft-grey, #9ea5a9); margin: 10px 0 0; line-height: 1.4; }

/* ---- Reduced motion / kill-switch parity ----
   .pd-hover-raise and .pd-img-zoom already degrade gracefully via
   motion.css's own @media (prefers-reduced-motion) and .pd-no-motion
   rules, so no card-specific override is needed here. The card's own
   box-shadow transition is a simple opacity/shadow change (not a
   transform), so it is left active even under reduced motion - only
   the translate/scale motion effects are the ones users are opting
   out of. */

/* ---- Mobile tuning ---- */
@media (max-width: 600px) {
  .pd-price-card__photo { aspect-ratio: 16 / 9; }
  .pd-price-card__name-on-photo { font-size: 1.08rem; left: 64px; }
  .pd-price-card__icon { width: 38px; height: 38px; left: 12px; bottom: 12px; }
  .pd-price-card__icon svg { width: 20px; height: 20px; }
}

/* ---- Camp page support: single pricing card + value stack ---- */
.pd-price-grid--1 { grid-template-columns: minmax(0, 520px); justify-content: center; }
.pd-value-stack { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--pd-lightest-grey); border-radius: 16px; padding: 32px 36px; box-shadow: 0 4px 20px rgba(2,45,65,0.06); text-align: left; }
.pd-value-stack > p:first-child { font-size: 1.05rem; }
.pd-value-stack h4 { font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', sans-serif; color: var(--pd-navy); margin: 22px 0 8px; font-size: 1.02rem; text-transform: uppercase; letter-spacing: .03em; }
.pd-value-stack ul { margin: 0 0 6px; padding-left: 20px; }
.pd-value-stack li { margin: 5px 0; color: var(--pd-slate-grey); }
.pd-value-stack p { color: var(--pd-slate-grey); margin: 10px 0 0; }
.pd-value-stack strong { color: var(--pd-navy); }

/* ---- Camp page support: single pricing card + value stack ---- */
.pd-price-grid--1 { grid-template-columns: minmax(0, 520px); justify-content: center; }
.pd-value-stack { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--pd-lightest-grey); border-radius: 16px; padding: 32px 36px; box-shadow: 0 4px 20px rgba(2,45,65,0.06); text-align: left; }
.pd-value-stack > p:first-child { font-size: 1.05rem; }
.pd-value-stack h4 { font-family: 'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback', sans-serif; color: var(--pd-navy); margin: 22px 0 8px; font-size: 1.02rem; text-transform: uppercase; letter-spacing: .03em; }
.pd-value-stack ul { margin: 0 0 6px; padding-left: 20px; }
.pd-value-stack li { margin: 5px 0; color: var(--pd-slate-grey); }
.pd-value-stack p { color: var(--pd-slate-grey); margin: 10px 0 0; }
.pd-value-stack strong { color: var(--pd-navy); }

/* ---- Tour video 2-up: branded frame + side-by-side on desktop, stacked on mobile ---- */
.pd-dyn .pd-centered-content:has(.pd-sec--video) { text-align: center; }
.pd-dyn .pd-centered-content:has(.pd-sec--video) .pd-centered-content__body { width: 100%; justify-self: stretch; }
.pd-sec--video { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 1000px; margin-left: auto; margin-right: auto; }
.pd-sec--video--single { grid-template-columns: minmax(0, 860px); justify-content: center; }
@media (max-width: 760px) { .pd-sec--video { grid-template-columns: 1fr; } }
.pd-sec--video__item { border: 3px solid var(--pd-teal, #34C6B9); box-shadow: 0 8px 28px rgba(2,45,65,0.20); }
.pd-dyn .pd-sec--video__item { border-radius: var(--dyn-radius); }

.pd-hero-ribbon:empty { display: none; }

/* ---- Legibility: outline-white CTAs are invisible on light sections -> make them navy there ---- */
.pd-section--white .pd-btn--outline-white, .pd-section--light .pd-btn--outline-white { color: var(--pd-navy, #022D41); border-color: var(--pd-navy, #022D41); }
.pd-section--white .pd-btn--outline-white:hover, .pd-section--light .pd-btn--outline-white:hover { background: var(--pd-navy, #022D41); color: #fff; }

/* === Owner button + CTA legibility fixes (2026-06-23) === */
/* Gradient buttons: force WHITE text (beats the accessible deep-teal link override) */
a.pd-btn--gradient,
.pd-centered-content__body a.pd-btn--gradient,
.pd-rich-text a.pd-btn--gradient,
.pd-sec--compare .pd-centered-content__body a.pd-btn--gradient { color: #fff !important; text-shadow: 0 1px 2px rgba(2,45,65,0.40); }
a.pd-btn--gradient:hover,
.pd-centered-content__body a.pd-btn--gradient:hover { color: #fff !important; }
/* Back-to-back navy CTA sections: give the SECOND a teal background so stacked CTAs read as distinct */
.pd-section--navy:has(.pd-text-section--centered) + .pd-section--navy:has(.pd-text-section--centered) {
  background: linear-gradient(135deg, #0c8275 0%, #064e46 100%) !important;
}

/* === Program cards + location hours/contact (2026-06-23) === */
.pd-progcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:24px;margin-top:30px}
.pd-progcards__intro{max-width:740px;margin:0 auto 4px;text-align:center}
.pd-progcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--pd-grey-200,#dde3e5);border-radius:16px;overflow:hidden;box-shadow:0 2px 8px rgba(2,45,65,.06);transition:transform 250ms cubic-bezier(.2,0,0,1),box-shadow 250ms cubic-bezier(.2,0,0,1),border-color 250ms cubic-bezier(.2,0,0,1)}
.pd-progcard:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(2,45,65,.14);border-color:rgba(52,198,185,.42)}
.pd-progcard__media{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--pd-navy,#022D41)}
.pd-progcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.pd-progcard:hover .pd-progcard__media img{transform:scale(1.05)}
.pd-progcard__tag{position:absolute;left:14px;top:14px;background:rgba(2,45,65,.85);color:#fff;font-family:'Roboto','Roboto Fallback',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:999px;backdrop-filter:saturate(1.2)}
.pd-progcard__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.pd-progcard__title{font-family:'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback',sans-serif;font-size:1.25rem;line-height:1.2;margin:0 0 8px;color:var(--pd-navy,#022D41)}
.pd-progcard__title a{color:inherit;text-decoration:none}
.pd-progcard__title a:hover{color:var(--pd-teal-600,#147468)}
.pd-progcard__desc{font-size:.92rem;line-height:1.55;color:var(--pd-slate-grey,#3D4C53);margin:0 0 18px;flex:1}
.pd-progcard__btn{width:100%;text-align:center}
@media(max-width:820px){.pd-progcards{gap:18px}}

.pd-loccontact{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px;align-items:stretch}
.pd-loccontact__card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--pd-lightest-grey,#ebeded);border-radius:18px;padding:28px 26px;box-shadow:0 6px 20px rgba(2,45,65,.06)}
.pd-loccontact__icon{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:rgba(52,198,185,.16);color:var(--pd-teal-accessible,#0f7d72);margin-bottom:14px}
.pd-loccontact__title{font-family:'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback',sans-serif;font-size:1.25rem;margin:0 0 14px;color:var(--pd-navy,#022D41)}
.pd-loccontact__rows{display:flex;flex-direction:column;gap:14px}
.pd-loccontact__hrow{display:flex;flex-direction:column;gap:2px}
.pd-loccontact__lbl{font-family:'Roboto','Roboto Fallback',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--pd-teal-accessible,#0f7d72)}
.pd-loccontact__val{font-size:.96rem;line-height:1.5;color:var(--pd-slate-grey,#3D4C53)}
.pd-loccontact__addr{font-size:1rem;line-height:1.55;color:var(--pd-slate-grey,#3D4C53);margin-bottom:16px}
.pd-loccontact__contact{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.pd-loccontact__contact a{display:flex;align-items:baseline;gap:8px;font-size:1rem;color:var(--pd-navy,#022D41);text-decoration:none;font-weight:600}
.pd-loccontact__contact a:hover{color:var(--pd-teal-accessible,#117A6F)}
.pd-loccontact__clbl{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--pd-soft-grey,#9ea5a9);min-width:42px}
.pd-loccontact__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.pd-loccontact__btn{align-self:flex-start}
@media(max-width:860px){.pd-loccontact{grid-template-columns:1fr;gap:16px}}

/* === Stat band + feature grid (2026-06-23) === */
.pd-statband{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:26px}
.pd-statband__heading{color:#fff}
.pd-section--navy .pd-statband__eyebrow{color:var(--pd-teal,#34C6B9)}
.pd-statband__item{text-align:center;padding:16px 12px}
.pd-statband__num{display:block;font-family:'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback',sans-serif;font-size:2.6rem;line-height:1;color:var(--pd-yellow,#FFDE59);font-weight:800}
.pd-statband__label{display:block;margin-top:10px;font-family:'Roboto','Roboto Fallback',sans-serif;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.86)}
@media(max-width:680px){.pd-statband{grid-template-columns:repeat(2,1fr);gap:14px}.pd-statband__num{font-size:2.1rem}}

.pd-featuregrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.pd-feat{background:#fff;border:1px solid var(--pd-lightest-grey,#ebeded);border-radius:16px;padding:26px 24px;box-shadow:0 6px 20px rgba(2,45,65,.06)}
.pd-feat__icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:rgba(52,198,185,.16);color:var(--pd-teal-accessible,#0f7d72);margin-bottom:14px}
.pd-feat h3{font-family:'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback',sans-serif;font-size:1.16rem;margin:0 0 8px;color:var(--pd-navy,#022D41)}
.pd-feat p{font-size:.94rem;line-height:1.55;color:var(--pd-slate-grey,#3D4C53);margin:0}
@media(max-width:900px){.pd-featuregrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pd-featuregrid{grid-template-columns:1fr}}

/* === Floating stats card + curriculum grade ladder (2026-06-23) === */
.pd-stats-float{position:relative;z-index:6;margin-top:clamp(-86px,-7vw,-48px);margin-bottom:8px}
.pd-stats-float__card{position:relative;background:#fff;border-radius:20px;box-shadow:0 18px 50px rgba(2,45,65,.18);padding:30px 26px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1000px;margin:0 auto;overflow:hidden}
.pd-stats-float__card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--pd-teal,#34C6B9),var(--pd-yellow,#FFDE59))}
.pd-stats-float__item{text-align:center;padding:6px 10px;border-right:1px solid var(--pd-lightest-grey,#ebeded)}
.pd-stats-float__item:last-child{border-right:0}
.pd-stats-float__num{display:block;font-family:'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback',sans-serif;font-size:2.2rem;font-weight:800;line-height:1;color:var(--pd-navy,#022D41)}
.pd-stats-float__label{display:block;margin-top:8px;font-family:'Roboto','Roboto Fallback',sans-serif;font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;color:var(--pd-teal-accessible,#0f7d72)}
@media(max-width:680px){.pd-stats-float__card{grid-template-columns:repeat(2,1fr);gap:18px 12px}.pd-stats-float__item:nth-child(2n){border-right:0}.pd-stats-float__num{font-size:1.8rem}}

.pd-ladder{list-style:none;margin:34px 0 0;padding:14px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pd-ladder__step{position:relative;background:#fff;border:1px solid var(--pd-lightest-grey,#ebeded);border-radius:16px;padding:22px 18px 20px;text-align:center;box-shadow:0 6px 18px rgba(2,45,65,.06);display:flex;flex-direction:column;align-items:center}
.pd-ladder__num{position:absolute;top:-13px;left:50%;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#34C6B9,#0f7d72);color:#fff;font-family:'Roboto','Roboto Fallback',sans-serif;font-weight:700;font-size:.82rem;display:flex;align-items:center;justify-content:center}
.pd-ladder__icon{font-size:1.9rem;line-height:1;margin:6px 0 8px}
.pd-ladder__name{font-family:'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback',sans-serif;font-size:1.05rem;font-weight:700;color:var(--pd-navy,#022D41);margin-bottom:6px}
.pd-ladder__desc{font-size:.82rem;line-height:1.45;color:var(--pd-slate-grey,#3D4C53)}
@media(max-width:900px){.pd-ladder{grid-template-columns:repeat(2,1fr);gap:22px 14px}}
@media(max-width:520px){.pd-ladder{grid-template-columns:1fr}}

/* === Home round 1: multi-button cards, hero phone, sticky mobile CTA, ladder links (2026-06-23) === */
.pd-progcard__btns{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.pd-hero-phone{margin-top:14px;font-family:'Roboto','Roboto Fallback',sans-serif;font-size:.95rem;color:rgba(255,255,255,.92)}
.pd-hero-phone a{color:#fff;font-weight:700;text-decoration:underline}
.pd-ladder__link{display:flex;flex-direction:column;align-items:center;text-decoration:none;height:100%}
.pd-ladder__more{margin-top:10px;font-family:'Roboto','Roboto Fallback',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--pd-teal-accessible,#0f7d72)}
.pd-ladder__step{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.pd-ladder__step:hover{border-color:var(--pd-teal,#34C6B9);box-shadow:0 12px 28px rgba(2,45,65,.12);transform:translateY(-3px)}

/* === Grade ladder: graphical badge instead of redundant numbers (2026-06-23) === */
.pd-ladder{padding-top:4px}
.pd-ladder__badge{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#34C6B9,#0f7d72);color:#fff;margin-bottom:12px;box-shadow:0 6px 16px rgba(15,125,114,.28)}
.pd-ladder__level{font-family:'Roboto','Roboto Fallback',sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pd-teal-accessible,#0f7d72);margin-bottom:4px}

/* === Premium bento (Why Partners) + learning journey (curriculum) (2026-06-23) === */
.pd-bento{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,minmax(158px,auto));gap:16px;grid-template-areas:"hero hero stat" "hero hero fac" "real coach fin";margin-top:34px}
.pd-bento__tile{position:relative;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;min-height:158px;box-shadow:0 8px 24px rgba(2,45,65,.08);background-size:cover;background-position:center}
.pd-bento__tile--hero{grid-area:hero;min-height:340px}
.pd-bento__tile--stat{grid-area:stat;background:linear-gradient(135deg,#022D41,#064e46);align-items:flex-start;justify-content:center}
.pd-bento__tile--fac{grid-area:fac}.pd-bento__tile--real{grid-area:real}
.pd-bento__tile--icon{grid-area:coach;background:#eef6f5;justify-content:flex-start}
.pd-bento__tile--accent{grid-area:fin;background:linear-gradient(135deg,#FFDE59,#ffd02e);justify-content:flex-start}
.pd-bento__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover !important;z-index:0}
.pd-bento__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,45,65,0) 28%,rgba(2,45,65,.84) 100%)}
.pd-bento__body{position:relative;z-index:1;color:#fff}
.pd-bento__eyebrow{display:block;font-family:'Roboto','Roboto Fallback',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pd-yellow,#FFDE59);margin-bottom:8px}
.pd-bento__lead{display:block;font-family:'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback',sans-serif;font-size:1.18rem;line-height:1.4;font-weight:700}
.pd-bento__title{display:block;font-family:'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback',sans-serif;font-size:1.12rem;font-weight:700;line-height:1.25}
.pd-bento__sub{display:block;font-size:.86rem;line-height:1.45;margin-top:4px;opacity:.92}
.pd-bento__num{font-family:'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback',sans-serif;font-size:2.6rem;font-weight:800;line-height:1;color:var(--pd-yellow,#FFDE59)}
.pd-bento__statlabel{display:block;font-family:'Roboto','Roboto Fallback',sans-serif;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;color:rgba(255,255,255,.88);margin-top:8px}
.pd-bento__tile--icon .pd-bento__title,.pd-bento__tile--accent .pd-bento__title{color:var(--pd-navy,#022D41)}
.pd-bento__tile--icon .pd-bento__sub,.pd-bento__tile--accent .pd-bento__sub{color:var(--pd-slate-grey,#3D4C53)}
.pd-bento__icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;margin-bottom:12px}
.pd-bento__tile--icon .pd-bento__icon{background:rgba(52,198,185,.18);color:var(--pd-teal-accessible,#0f7d72)}
.pd-bento__tile--accent .pd-bento__icon{background:rgba(2,45,65,.12);color:var(--pd-navy,#022D41)}
@media(max-width:860px){.pd-bento{grid-template-columns:1fr 1fr;grid-template-rows:auto;grid-template-areas:"hero hero" "stat fac" "real real" "coach fin"}.pd-bento__tile--hero{min-height:260px}}
@media(max-width:560px){.pd-bento{grid-template-columns:1fr;grid-template-areas:"hero" "stat" "fac" "real" "coach" "fin"}}

.pd-journey{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:start;margin-top:8px}
.pd-journey__intro{position:sticky;top:96px}
.pd-journey__media{margin:0 0 22px;border-radius:18px;overflow:hidden;box-shadow:0 16px 40px rgba(2,45,65,.16)}
.pd-journey__media img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.pd-journey__path{list-style:none;margin:0;padding:0;position:relative}
.pd-journey__path::before{content:"";position:absolute;left:25px;top:26px;bottom:26px;width:3px;background:linear-gradient(180deg,#34C6B9,#FFDE59);border-radius:3px}
.pd-journey__link{display:flex;gap:18px;align-items:flex-start;text-decoration:none;padding:12px 14px;border-radius:14px;transition:background .16s ease,box-shadow .16s ease,transform .16s ease}
.pd-journey__link:hover{background:#fff;box-shadow:0 10px 26px rgba(2,45,65,.10);transform:translateX(3px)}
.pd-journey__node{flex:none;position:relative;z-index:1;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 14px rgba(2,45,65,.22);border:3px solid #fff}
.pd-journey__info{display:flex;flex-direction:column;padding-top:3px}
.pd-journey__level{font-family:'M PLUS Rounded 1c','M PLUS Rounded 1c Fallback',sans-serif;font-size:1.12rem;font-weight:700;color:var(--pd-navy,#022D41);margin-bottom:4px}
.pd-journey__desc{font-size:.92rem;line-height:1.5;color:var(--pd-slate-grey,#3D4C53);margin-bottom:6px}
.pd-journey__more{font-family:'Roboto','Roboto Fallback',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--pd-teal-accessible,#0f7d72)}
@media(max-width:860px){.pd-journey{grid-template-columns:1fr;gap:24px}.pd-journey__intro{position:static}.pd-journey__media img{aspect-ratio:16/9}}

/* polish: node icon contrast on light level colors + stronger bento hero scrim */
.pd-journey__node svg{filter:drop-shadow(0 1px 1px rgba(2,45,65,.5))}
.pd-bento__tile--hero .pd-bento__scrim{background:linear-gradient(180deg,rgba(2,45,65,0) 12%,rgba(2,45,65,.5) 55%,rgba(2,45,65,.9) 100%)}
.pd-bento__tile--coach{grid-area:coach}.pd-bento__tile--fin{grid-area:fin}


/* ==========================================================================
   TRACK B1 — BOARDING MEDIA MOSAIC
   Variant treatment for partners-dogs-theme/css/dynamic-pages.css
   --------------------------------------------------------------------------
   Turns the plain vertical <div class="pd-gallery"> photo stack (rendered by
   the ds2_richtext macro from a pd_page_sections row body) into the DS 2.0
   "mosaic formation": one hero tile + satellites on a CSS grid.

   HOOK  — the row's `container` column carries the class
           `pd-sec--photoband--mosaic`, which the ds2_richtext macro emits
           verbatim on the section's inner container <div>. The gallery already
           lives inside .pd2-rich__body as <div class="pd-gallery"> with
           <figure><img></figure> children, so NO template change and NO body
           edit is needed. See retag.md for the exact one-field HubDB PATCH.

   SOURCE — CSS lifted verbatim from the DS 2.0 canon
            (tools/design-system-overhaul/hubspot/pd-effects-2.0.css
             §.pd-mosaic / .pd-mosaic__hero, lines 171-177), re-anchored onto
            the .pd-gallery figure structure and given the 3-tier responsive
            grid the design brief specifies (390 / 768 / 1280).

   SCOPE  — every rule is gated behind .pd-sec--photoband--mosaic, so it only
            activates on rows explicitly re-tagged to the mosaic. Untagged
            .pd-gallery blocks anywhere else on the site are untouched.

   A11Y / PERF
     - Images keep the macro-injected loading="lazy" decoding="async".
     - No opacity:0 initial state and no JS dependency: the mosaic is fully
       visible with JavaScript disabled (fail-safe; no CLS, no content flash).
     - Motion is hover-only image zoom (transform/opacity only). Fully removed
       under prefers-reduced-motion: reduce and under the site kill-switch
       html.pd-no-motion, matching the DS 2.0 motion contract.
     - No horizontal body scroll at 390px (single column, width:100%).
   ========================================================================== */

/* --- Base: the gallery becomes the mosaic grid ------------------------------
   Mobile-first single column (390px): a simple stacked run of rounded tiles,
   each with a reserved aspect-ratio so nothing reflows as images decode. */
.pd-sec--photoband--mosaic .pd-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: clamp(20px, 4vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}

.pd-sec--photoband--mosaic .pd-gallery > figure {
  margin: 0;
  border-radius: var(--pd-radius-lg, 16px);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 3;            /* reserves height -> zero CLS on decode */
  background: var(--pd-lightest-grey, #ebeded);  /* placeholder while loading */
  box-shadow: var(--pd-shadow-md, 0 6px 18px rgba(2, 45, 65, 0.09));
}

.pd-sec--photoband--mosaic .pd-gallery > figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--pd-dur-slow, 400ms) var(--pd-ease-standard, cubic-bezier(0.2, 0, 0, 1));
}

/* Gentle image lift on hover/focus-within — the only motion, pointer-driven. */
.pd-sec--photoband--mosaic .pd-gallery > figure:hover img,
.pd-sec--photoband--mosaic .pd-gallery > figure:focus-within img {
  transform: scale(1.05);
}

/* --- Tablet (>=768px): two columns; the hero (first figure) spans both ------
   The lead photo gets width; the remaining four pair up beneath it. */
@media (min-width: 768px) {
  .pd-sec--photoband--mosaic .pd-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .pd-sec--photoband--mosaic .pd-gallery > figure {
    aspect-ratio: 3 / 2;
  }
  .pd-sec--photoband--mosaic .pd-gallery > figure:first-child {
    grid-column: 1 / -1;          /* hero spans the full width */
    aspect-ratio: 21 / 9;
  }
}

/* --- Desktop (>=1024px): true hero + satellites mosaic ----------------------
   4-column grid, fixed 120px rows (per the canon .pd-mosaic block). The first
   figure is the 2x2 hero; the next four satellites fill the right column and
   the row beneath. Works cleanly for the 5-image boarding gallery and degrades
   gracefully for 4 or 6 images (auto-placement wraps to new 120px rows). */
@media (min-width: 1024px) {
  .pd-sec--photoband--mosaic .pd-gallery {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 120px;
    gap: 14px;
  }
  .pd-sec--photoband--mosaic .pd-gallery > figure {
    aspect-ratio: auto;           /* grid rows own the height now */
  }
  .pd-sec--photoband--mosaic .pd-gallery > figure:first-child {
    grid-column: span 2;
    grid-row: span 2;             /* the hero: 2 cols x 2 rows */
    aspect-ratio: auto;
  }
}

/* Slightly taller rows on wide desktops so the hero reads as a feature. */
@media (min-width: 1280px) {
  .pd-sec--photoband--mosaic .pd-gallery {
    grid-auto-rows: 148px;
  }
}

/* --- Motion opt-out ---------------------------------------------------------
   Reduced-motion users and the site kill-switch get no image zoom at all. */
@media (prefers-reduced-motion: reduce) {
  .pd-sec--photoband--mosaic .pd-gallery > figure img {
    transition: none !important;
  }
  .pd-sec--photoband--mosaic .pd-gallery > figure:hover img,
  .pd-sec--photoband--mosaic .pd-gallery > figure:focus-within img {
    transform: none !important;
  }
}

html.pd-no-motion .pd-sec--photoband--mosaic .pd-gallery > figure img {
  transition: none !important;
}
html.pd-no-motion .pd-sec--photoband--mosaic .pd-gallery > figure:hover img,
html.pd-no-motion .pd-sec--photoband--mosaic .pd-gallery > figure:focus-within img {
  transform: none !important;
}

/* --- .pd-ds2 scoped mirror --------------------------------------------------
   The live bundle is generated with a .pd-ds2 prefix by
   tools/design-system-overhaul/build-scoped-css.py. When this treatment is
   merged into dynamic-pages.css the generator will re-emit these rules under
   .pd-ds2 automatically; the block above is the un-prefixed source of truth.
   No hand-edit of pd-ds2-scoped.css is required (that file is generated). */

/* ============================================================
   SECTION MODIFIER: .pd-sec--leadercards  (DS 2.0)
   ------------------------------------------------------------
   Layers ON TOP of .pd-sec--cards (which keeps the responsive
   grid + flex-column shell). Turns each campus-leader
   <li class="pd-leader"> into a DS-compliant PHOTO card:
     circular headshot (top) -> name+role title -> bio ->
     separate footer "View Profile" CTA pinned to the bottom
     (equal-height cards via flex-column + margin-top:auto),
     trailing arrow supplied by ::after (NO inline glyph in body).
   Canonical <li> contract:
     <li class="pd-leader">
       <img class="pd-leader__photo" ...>
       <strong>Name, Role.</strong>
       {bio}
       <a class="pd-leader__cta" href="{profile}">View Profile</a>
     </li>
   HARD RULE: every selector below is .pd-sec--leadercards-scoped
   AND further qualified to li.pd-leader, so NO other
   .pd-sec--cards page is affected. Because <img> is now the
   :first-child, the base `li > strong:first-child` title rule +
   its left-accent no longer match; we re-provide title styling
   and neutralize the base ::before top-bar, ::after glow, and the
   title's ::before left-accent here.
   Canon fonts: M PLUS Rounded 1c (title) + Montserrat (body+CTA).
   Adherence rule 3 (Source Serif 4 / Inter allow-list) is a known
   mockup substitution and is deliberately NOT followed for fonts.
   Token-only colors + lengths (adherence rules 1-2, 4-5).
   ============================================================ */

/* ---- Card shell: center column, DS surface, equal height ---- */
.pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--pd-space-3, 12px);
  padding: var(--pd-space-6, 24px);
  padding-top: var(--pd-space-8, 32px);
  border: 1px solid var(--pd-border, #EBEDED);
  border-radius: var(--pd-radius-card, 16px);
  box-shadow: var(--pd-shadow-sm, 0 2px 8px rgba(2, 45, 65, 0.06));
  font-family: 'Montserrat', 'Montserrat Fallback', Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--pd-grey-700, #3D4C53);
  transition:
    transform var(--pd-dur-base, 250ms) var(--pd-ease-standard, cubic-bezier(0.2, 0, 0, 1)),
    box-shadow var(--pd-dur-base, 250ms) var(--pd-ease-standard, cubic-bezier(0.2, 0, 0, 1)),
    border-color var(--pd-dur-base, 250ms) var(--pd-ease-standard, cubic-bezier(0.2, 0, 0, 1));
}

/* Neutralize the base top-accent bar (::before) — the photo card
   leads with the headshot, not a bar. */
.pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader::before {
  content: none !important;
  display: none !important;
}

/* Neutralize the base yellow corner-glow (::after) so it can't
   collide with the headshot or footer CTA. */
.pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader::after {
  content: none !important;
  display: none !important;
}

/* ---- DS hover lift + shadow (tokenized) -------------------- */
.pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader:hover,
.pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader:focus-within {
  transform: translateY(var(--pd-lift-card, -4px));
  box-shadow: var(--pd-shadow-lg, 0 14px 34px rgba(2, 45, 65, 0.13));
  border-color: var(--pd-teal-200, #C5EEEA);
}

/* Visible focus ring on the CARD itself (keyboard tab-in) */
.pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader:focus-within {
  outline: none;
  box-shadow:
    var(--pd-focus-ring, 0 0 0 3px rgba(52, 198, 185, 0.45)),
    var(--pd-shadow-lg, 0 14px 34px rgba(2, 45, 65, 0.13));
}

/* ---- Circular headshot (top, centered) --------------------- */
.pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader > .pd-leader__photo {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 auto;
  width: clamp(104px, 12vw, 120px);
  height: clamp(104px, 12vw, 120px);
  aspect-ratio: 1 / 1;
  max-width: 100%;
  margin: 0 auto var(--pd-space-2, 8px);
  border-radius: var(--pd-radius-pill, 999px);
  object-fit: cover;
  object-position: center top;
  background: var(--pd-teal-100, #EBF9F8);
  border: var(--pd-space-1, 4px) solid var(--pd-white, #FFFFFF);
  box-shadow:
    0 0 0 var(--pd-space-1, 4px) var(--pd-teal-200, #C5EEEA),
    var(--pd-shadow-sm, 0 2px 8px rgba(2, 45, 65, 0.06));
  transition:
    box-shadow var(--pd-dur-base, 250ms) var(--pd-ease-standard, cubic-bezier(0.2, 0, 0, 1)),
    transform var(--pd-dur-base, 250ms) var(--pd-ease-standard, cubic-bezier(0.2, 0, 0, 1));
}

/* Ring deepens + gentle scale on card hover/focus */
.pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader:hover > .pd-leader__photo,
.pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader:focus-within > .pd-leader__photo {
  box-shadow:
    0 0 0 var(--pd-space-1, 4px) var(--pd-teal-300, #8DDDD5),
    var(--pd-shadow-md, 0 8px 20px rgba(2, 45, 65, 0.10));
  transform: scale(1.03);
}

/* ---- Card title = the <strong> (Name, Role.) ---------------
   Re-provide title styling now that <img> is :first-child, and
   cancel the base teal left-accent gutter + its ::before bar. */
.pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader > strong:first-of-type {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 auto;
  margin: 0;
  padding-left: 0;
  font-family: 'M PLUS Rounded 1c', 'M PLUS Rounded 1c Fallback', Helvetica, Arial, sans-serif;
  font-weight: 700 !important;
  font-size: clamp(1.06rem, 1.5vw, 1.25rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--pd-navy, #022D41) !important;
  text-wrap: balance;
}

/* Kill the base teal left-accent bar on the title */
.pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader > strong:first-of-type::before {
  content: none !important;
  display: none !important;
}

/* ---- Footer CTA slot: "View Profile" (pinned to card bottom)
   Full-width DS quiet-link footer, separated by a top divider,
   pushed to the card floor via margin-top:auto -> equal-height
   cards. Trailing arrow lives ONLY in ::after; body carries none. */
.pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader > .pd-leader__cta {
  position: relative;
  z-index: 1;
  align-self: stretch;
  width: 100%;
  margin-top: auto;
  margin-bottom: 0;
  padding: var(--pd-space-3, 12px) var(--pd-space-2, 8px) 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pd-space-1, 4px);
  min-height: 44px; /* tap target */
  border-top: 1px solid var(--pd-border, #EBEDED);
  font-family: 'Montserrat', 'Montserrat Fallback', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #147468; /* AA link teal on white (hardcoded: --pd-teal-600 resolves to sub-AA #1A8F85 in main.css depending on cascade order) */
  text-decoration: none;
  border-bottom: 0;
  transition: color var(--pd-dur-base, 250ms) var(--pd-ease-standard, cubic-bezier(0.2, 0, 0, 1));
}

/* Trailing arrow via ::after — pseudo is aria-hidden by nature */
.pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader > .pd-leader__cta::after {
  content: '\2192';
  font-size: 1.02em;
  line-height: 1;
  color: currentColor;
  transition: transform var(--pd-dur-fast, 180ms) var(--pd-ease-standard, cubic-bezier(0.2, 0, 0, 1));
}

/* Hover / focus: deepen to navy + underline label, slide arrow */
.pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader > .pd-leader__cta:hover,
.pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader > .pd-leader__cta:focus-visible {
  color: var(--pd-navy, #022D41);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader > .pd-leader__cta:hover::after,
.pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader > .pd-leader__cta:focus-visible::after {
  transform: translateX(3px);
}

/* Visible focus ring on the CTA itself (keyboard) */
.pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader > .pd-leader__cta:focus-visible {
  outline: none;
  border-radius: var(--pd-radius-sm, 8px);
  box-shadow: var(--pd-focus-ring, 0 0 0 3px rgba(52, 198, 185, 0.45));
}

/* ============================================================
   RESPONSIVE — 390 / 768 / 1280
   The base .pd-sec--cards grid governs column counts; here we
   only tune photo-card ergonomics + the 390px single-column CTA.
   ============================================================ */

/* 390px band — single column, comfortable photo, filled CTA */
@media (max-width: 600px) {
  .pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader {
    padding: var(--pd-space-6, 24px) var(--pd-space-5, 20px);
  }
  .pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader > .pd-leader__photo {
    width: clamp(104px, 32vw, 116px);
    height: clamp(104px, 32vw, 116px);
  }
  .pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader > .pd-leader__cta {
    background: var(--pd-teal-100, #EBF9F8);
    border-top-color: transparent;
    border-radius: var(--pd-radius-pill, 999px);
    padding: var(--pd-space-3, 12px) var(--pd-space-4, 16px);
  }
}

/* ---- Reduced motion: honor the DS kill-switch -------------- */
@media (prefers-reduced-motion: reduce) {
  .pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader,
  .pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader > .pd-leader__photo,
  .pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader > .pd-leader__cta,
  .pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader > .pd-leader__cta::after {
    transition: none !important;
  }
  .pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader:hover,
  .pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader:focus-within,
  .pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader:hover > .pd-leader__photo,
  .pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader:focus-within > .pd-leader__photo {
    transform: none !important;
  }
  .pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader > .pd-leader__cta:hover::after,
  .pd-sec--leadercards .pd-centered-content__body ul > li.pd-leader > .pd-leader__cta:focus-visible::after {
    transform: none !important;
  }
}

/* ===== RAIL CSS ===== */
/* ============================================================================
   PD RAIL — shared, container-agnostic horizontal-scroll rail (DS2)
   Generalized from grade-level-rail.module. OPT-IN ONLY: chrome applies inside
   .pd-rail; wrapping ANY horizontal flex/grid track in the .pd-rail markup turns
   it into a snap rail without restyling that track globally. Does NOT touch
   .pd-progcards / .pd-price-grid / .pd-sec--cards outside a .pd-rail wrapper.
   No-JS: the viewport alone stays natively horizontally scrollable (arrows/dots
   are hidden until .pd-rail--js is added). Reduced-motion safe.
   ========================================================================== */
.pd-rail {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 8px;
  /* Non-text UI-indicator teal. Raw --pd-teal (#34C6B9 = 2.12:1 on white) fails
     WCAG 1.4.11's 3:1 for focus/state indicators; --pd-teal-700 (#0E6D67, 6.17:1)
     passes, with a 4.24:1 fallback. Used for every focus/active/state indicator. */
  --pd-rail-indicator: var(--pd-teal-700, #0F8A7E);
  --pd-rail-fade: 36px; /* edge-fade width; also arrow gutter reference */
}

/* Viewport: the horizontal scroller. Scrollbar hidden but content stays reachable
   by keyboard (tabindex="0" + arrow handling) and pointer. Edge-fade masks hint at
   off-screen content on both ends; masks retract at the true ends via the JS-set
   data-at-start / data-at-end attributes. */
.pd-rail__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 6px 2px 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pd-rail-fade), #000 calc(100% - var(--pd-rail-fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--pd-rail-fade), #000 calc(100% - var(--pd-rail-fade)), transparent 100%);
}
.pd-rail__viewport::-webkit-scrollbar { display: none; height: 0; }
.pd-rail__viewport[data-at-start] {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--pd-rail-fade)), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--pd-rail-fade)), transparent 100%);
}
.pd-rail__viewport[data-at-end] {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pd-rail-fade), #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--pd-rail-fade), #000 100%);
}
.pd-rail__viewport[data-at-start][data-at-end] { -webkit-mask-image: none; mask-image: none; }
.pd-rail__viewport:focus-visible {
  outline: 2px solid var(--pd-rail-indicator);
  outline-offset: 3px;
  border-radius: var(--radius-md, 12px);
}
/* Smooth scroll only when motion is allowed (JS also honors reduced-motion). */
.pd-rail__viewport { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) {
  .pd-rail__viewport { scroll-behavior: smooth; }
}
/* Drag-to-scroll on desktop: JS toggles .is-grabbing. */
.pd-rail--js .pd-rail__viewport { cursor: grab; }
.pd-rail--js .pd-rail__viewport.is-grabbing { cursor: grabbing; scroll-snap-type: none; }
.pd-rail--js .pd-rail__viewport.is-grabbing a { pointer-events: none; }

/* Track: the horizontal row. Author supplies the layout (flex/grid) on their own
   class; the rail only guarantees a row context, a gap, and end padding for peek.
   Using display:flex here means an unstyled child track still lays out in a row. */
.pd-rail__track {
  display: flex;
  gap: var(--pd-rail-gap, 16px);
  margin: 0;
  padding: 0 var(--pd-rail-peek, 2px);
  list-style: none;
}
/* Every direct child becomes a snap stop and stops shrinking so it keeps its
   intended width in the scroller. Authors set width via their own child class. */
.pd-rail__track > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* ---- arrow buttons (prev / next) ---- */
.pd-rail__arrow {
  flex: 0 0 auto;
  align-self: center;
  width: 44px;            /* 44px tap target */
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pd-grey-200, #dde3e5);
  border-radius: var(--radius-full, 999px);
  background: #fff;
  color: var(--pd-navy, #022D41);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(2,45,65,0.06));
  transition: background var(--transition-fast, 160ms) ease,
              transform var(--transition-fast, 160ms) ease,
              box-shadow var(--transition-fast, 160ms) ease,
              opacity var(--transition-fast, 160ms) ease;
}
.pd-rail__arrow:hover:not(:disabled) {
  background: var(--pd-navy, #022D41);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 8px 20px rgba(2,45,65,0.12));
}
.pd-rail__arrow:focus-visible { outline: 2px solid var(--pd-rail-indicator); outline-offset: 2px; }
/* Disabled = at that edge: hidden (kept in flow so the rail doesn't reflow). */
.pd-rail__arrow:disabled { opacity: 0; visibility: hidden; cursor: default; pointer-events: none; }
/* No-JS: arrows are inert scroll aids (viewport scrolls natively), so hide them
   until JS wires them up to avoid dead controls. */
.pd-rail:not(.pd-rail--js) .pd-rail__arrow { display: none; }

/* ---- dot pagination ---- */
.pd-rail__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px auto 0;
  max-width: 640px;
}
.pd-rail:not(.pd-rail--js) .pd-rail__dots { display: none; }
.pd-rail__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full, 999px);
  background: rgba(2,45,65,0.18);
  cursor: pointer;
  transition: background var(--transition-fast, 160ms) ease,
              transform var(--transition-fast, 160ms) ease,
              width var(--transition-fast, 160ms) ease;
}
.pd-rail__dot:hover { background: rgba(2,45,65,0.4); transform: scale(1.2); }
.pd-rail__dot:focus-visible { outline: 2px solid var(--pd-rail-indicator); outline-offset: 3px; }
/* Active dot: AA-passing teal + width bump so it reads non-color-only. */
.pd-rail__dot.is-active { background: var(--pd-rail-indicator); width: 22px; }

/* ---- dark / navy context override (opt-in via .pd-rail--navy on the wrapper) ---- */
.pd-rail--navy .pd-rail__arrow {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
  box-shadow: none;
}
.pd-rail--navy .pd-rail__arrow:hover:not(:disabled) {
  background: var(--pd-teal, #34C6B9);
  color: var(--pd-navy, #022D41);
}
.pd-rail--navy .pd-rail__dot { background: rgba(255,255,255,0.28); }
.pd-rail--navy .pd-rail__dot:hover { background: rgba(255,255,255,0.5); }

/* ---- responsive: on mobile lean on touch scroll + dots; arrows optional ---- */
@media (max-width: 768px) {
  /* Arrows are hidden by default on mobile; opt back in with .pd-rail--arrows-mobile. */
  .pd-rail:not(.pd-rail--arrows-mobile) .pd-rail__arrow { display: none; }
  .pd-rail { gap: 0; }
}

/* ---- reduced motion: no transitions / transforms, instant scroll ---- */
@media (prefers-reduced-motion: reduce) {
  .pd-rail__arrow,
  .pd-rail__dot { transition: none; }
  .pd-rail__arrow:hover:not(:disabled),
  .pd-rail__dot:hover { transform: none; }
  .pd-rail__viewport { scroll-behavior: auto !important; }
}

/* ---- print: linear, chrome hidden ---- */
@media print {
  .pd-rail__arrow, .pd-rail__dots { display: none !important; }
  .pd-rail__viewport {
    overflow: visible !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .pd-rail__track { flex-wrap: wrap; }
}

/* ---- rail item default width (flex track items need an explicit basis; grid
   sections auto-sized their cards, so give a mobile-peek / desktop-card size) ---- */
.pd-rail__track > * { flex: 0 0 clamp(258px, 80vw, 340px); max-width: 340px; }
@media (min-width: 769px){ .pd-rail__track > * { flex-basis: 320px; } }

I have everything I need. I understand the structure:
- `.pd-sec--cards` cards are `.pd-centered-content__body ul > li`
- `.pd-sec--infocards` cards are `.pd-centered-content__body > p`, `> ul > li`, `> ol > li`
- Media figure is `.pd-sec--media__figure`
- Base radius 16, tokens exist (`--pd-teal-200`, `--pd-shadow-*`), and the DS soft glow is `0 10px 24px rgba(52,198,185,0.28)`.

Here is the opt-in glow-card CSS block.

/* ============================================================
   GLOW-CARD VARIANT  (opt-in, additive)
   White cards floating on a teal color-glow shadow. Layers on
   top of .pd-sec--cards / .pd-sec--infocards without touching
   their default (navy-shadow) look — every rule is scoped to a
   --glow modifier so non-glow cards are never affected.

   Tokens (with DS fallbacks):
     rest glow   0 10px 24px rgba(52,198,185,0.28)   (pd-effects soft glow)
     deep glow   0 22px 48px rgba(52,198,185,0.36)   (hover/lift)
     radius      16px  (--pd-radius-card)
   AA: glow is purely decorative; text keeps navy/slate on white.
   ============================================================ */
:root {
  --pd-glow-rest: 0 10px 24px rgba(52, 198, 185, 0.28);
  --pd-glow-hover: 0 22px 48px rgba(52, 198, 185, 0.36), 0 6px 16px rgba(52, 198, 185, 0.22);
  --pd-glow-radius: var(--pd-radius-card, 16px);
  /* hard-offset flavor reuses the effects-2.0 token */
  --pd-glow-offset: 8px 8px 0 var(--pd-teal-200, #C5EEEA);
  --pd-glow-offset-hover: 12px 12px 0 var(--pd-teal-200, #C5EEEA), 0 14px 30px rgba(52, 198, 185, 0.22);
}

/* ---- .pd-sec--cards--glow -------------------------------------
   Feature-card grid: white bg + teal soft-glow at rest, deeper
   glow + lift on hover / focus-within. Overrides the default
   navy box-shadow only when the --glow modifier is present. ---- */
.pd-sec--cards--glow .pd-centered-content__body ul > li {
  background: var(--pd-white, #fff);
  border-color: rgba(52, 198, 185, 0.20);
  border-radius: var(--pd-glow-radius);
  box-shadow: var(--pd-glow-rest);
}
.pd-sec--cards--glow .pd-centered-content__body ul > li:hover,
.pd-sec--cards--glow .pd-centered-content__body ul > li:focus-within {
  transform: translateY(-5px);
  border-color: rgba(52, 198, 185, 0.42);
  box-shadow: var(--pd-glow-hover);
}

/* ---- .pd-sec--infocards--glow --------------------------------
   Same treatment for the HubDB info-card grid (<p>, <li>). ---- */
.pd-sec--infocards--glow {
  --pd-infocard-shadow: var(--pd-glow-rest);
  --pd-infocard-shadow-hover: var(--pd-glow-hover);
}
.pd-sec--infocards--glow .pd-centered-content__body > p,
.pd-sec--infocards--glow .pd-centered-content__body > ul > li,
.pd-sec--infocards--glow .pd-centered-content__body > ol > li {
  background: var(--pd-white, #fff);
  border-color: rgba(52, 198, 185, 0.20);
  border-radius: var(--pd-glow-radius);
  box-shadow: var(--pd-glow-rest);
}
.pd-sec--infocards--glow .pd-centered-content__body > p:hover,
.pd-sec--infocards--glow .pd-centered-content__body > p:focus-within,
.pd-sec--infocards--glow .pd-centered-content__body > ul > li:hover,
.pd-sec--infocards--glow .pd-centered-content__body > ul > li:focus-within,
.pd-sec--infocards--glow .pd-centered-content__body > ol > li:hover,
.pd-sec--infocards--glow .pd-centered-content__body > ol > li:focus-within {
  transform: translateY(-5px);
  border-color: rgba(52, 198, 185, 0.42);
  box-shadow: var(--pd-glow-hover);
}

/* ---- .pd-glow-card -------------------------------------------
   Generic single-element utility for one media card / image /
   figure (e.g. a .pd-sec--media__figure or a lone <img> wrapper).
   White frame + teal glow, deeper on hover. Self-contained so it
   works outside the cards/infocards sections too. ---- */
.pd-glow-card {
  background: var(--pd-white, #fff);
  border: 1px solid rgba(52, 198, 185, 0.20);
  border-radius: var(--pd-glow-radius);
  box-shadow: var(--pd-glow-rest);
  overflow: hidden;
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
.pd-glow-card:hover,
.pd-glow-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(52, 198, 185, 0.42);
  box-shadow: var(--pd-glow-hover);
}
/* When applied to the media figure, keep its image framing intact.
   Covers both the v1 template class (.pd-sec--media__figure) and the DS2
   renderer's figure (.pd2-media__figure). The DS2 renderer drops its inline
   box-shadow when the glow flag is set so this class rule can take over. */
.pd-sec--media__figure.pd-glow-card,
.pd2-media__figure.pd-glow-card {
  box-shadow: var(--pd-glow-rest);
}
.pd-sec--media__figure.pd-glow-card:hover,
.pd2-media__figure.pd-glow-card:hover {
  box-shadow: var(--pd-glow-hover);
}

/* ---- .pd-sec--cards--glow-offset -----------------------------
   Hard 8px teal offset flavor (the .pd-elev-offset look) instead
   of the soft radial glow. Playful, sticker-like. Opt-in on top
   of the base cards grid. ---- */
.pd-sec--cards--glow-offset .pd-centered-content__body ul > li {
  background: var(--pd-white, #fff);
  border-color: rgba(52, 198, 185, 0.28);
  border-radius: var(--pd-glow-radius);
  box-shadow: var(--pd-glow-offset);
}
.pd-sec--cards--glow-offset .pd-centered-content__body ul > li:hover,
.pd-sec--cards--glow-offset .pd-centered-content__body ul > li:focus-within {
  transform: translate(-2px, -2px);
  border-color: rgba(52, 198, 185, 0.5);
  box-shadow: var(--pd-glow-offset-hover);
}

/* ---- Mobile: scale the glow down so it doesn't overflow ------ */
@media (max-width: 640px) {
  :root {
    --pd-glow-rest: 0 6px 16px rgba(52, 198, 185, 0.26);
    --pd-glow-hover: 0 12px 28px rgba(52, 198, 185, 0.32);
    --pd-glow-offset: 5px 5px 0 var(--pd-teal-200, #C5EEEA);
    --pd-glow-offset-hover: 7px 7px 0 var(--pd-teal-200, #C5EEEA), 0 8px 18px rgba(52, 198, 185, 0.20);
  }
}

/* ---- Reduced motion: keep the color transition, drop the lift ---- */
@media (prefers-reduced-motion: reduce) {
  .pd-sec--cards--glow .pd-centered-content__body ul > li:hover,
  .pd-sec--cards--glow .pd-centered-content__body ul > li:focus-within,
  .pd-sec--infocards--glow .pd-centered-content__body > p:hover,
  .pd-sec--infocards--glow .pd-centered-content__body > p:focus-within,
  .pd-sec--infocards--glow .pd-centered-content__body > ul > li:hover,
  .pd-sec--infocards--glow .pd-centered-content__body > ul > li:focus-within,
  .pd-sec--infocards--glow .pd-centered-content__body > ol > li:hover,
  .pd-sec--infocards--glow .pd-centered-content__body > ol > li:focus-within,
  .pd-glow-card:hover,
  .pd-glow-card:focus-within,
  .pd-sec--cards--glow-offset .pd-centered-content__body ul > li:hover,
  .pd-sec--cards--glow-offset .pd-centered-content__body ul > li:focus-within {
    transform: none;
  }
}

Notes for whoever wires this in:
- Source files read: `/Users/christopher/Downloads/design-system-overhaul/project/hubspot/pd-effects-2.0.css` (glow/offset tokens) and `/Users/christopher/Partners Dogs HS Website/.claude/worktrees/laughing-mclaren-dbfe33/partners-dogs-theme/css/dynamic-pages.css` (base card selectors this layers over).
- Apply by adding the modifier alongside the base class in the section markup: `class="pd-sec--cards pd-sec--cards--glow"`, `class="pd-sec--infocards pd-sec--infocards--glow"`, or the offset flavor `pd-sec--cards--glow-offset`. `.pd-glow-card` is standalone (drop on a `.pd-sec--media__figure` or any single image wrapper).
- Both base grids already declare `transition: transform/box-shadow/border-color`, so the glow inherits smooth hover transitions; `.pd-glow-card` declares its own since it can be used bare.
- The `.pd-dyn` reduced-motion block already caps base cards, but the `--glow` selectors are more specific for `box-shadow`, so the added reduced-motion rule here explicitly zeroes the lift for the glow variants. Text colors are untouched (navy/slate on white), so AA contrast is unchanged.