/* ═══════════════════════════════════════════════
   Product Detail A — Accordion Layout
   Deel design system: rounded corners, pill buttons, soft shadows
   ═══════════════════════════════════════════════ */

/* ── Hero — Split panel with image ── */
.pd-hero { background: #041e41; color: #fff; font-family: "canada-type-gibson", "Gibson", sans-serif; }
.pd-hero__split { display: flex; width: 1200px; max-width: 100%; margin: 0 auto; }
.pd-hero__left { flex: 0 0 50%; max-width: 50%; display: flex; align-items: center; padding: 48px 0; }
.pd-hero__left-inner { max-width: 720px; width: 100%; padding-left: 24px; padding-right: 48px; }
/* Photo fills the right column with equal cropping top/bottom — keeps
 * faces / focal subjects visible regardless of column aspect ratio. */
.pd-hero__right { flex: 1; position: relative; overflow: hidden; background: #041e41; }
.pd-hero__photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pd-hero__focus-frame { position: absolute; top: 8%; left: 8%; width: 84%; height: 84%; pointer-events: none; z-index: 2; }
.pd-hero__corner { position: absolute; width: 88px; height: 88px; }
.pd-hero__corner--tl { top: 0; left: 0; }
.pd-hero__corner--tr { top: 0; right: 0; }
.pd-hero__corner--bl { bottom: 0; left: 0; }
.pd-hero__corner--br { bottom: 0; right: 0; }
.pd-hero__eyebrow { display: inline-block; font-size: 15px; font-weight: 600; letter-spacing: 1.5px; text-transform: capitalize; color: #28a7df; margin-bottom: 16px; }
/* Breadcrumb styles moved to mu-plugins/section-bg-variant.php so they
 * load on every page that renders a .pd-hero (product / PSL / account
 * type / charity-clubs) — regardless of which page-specific CSS file
 * happens to be enqueued. */
.pd-hero__title { font-size: 48px; font-weight: 600; line-height: 1.2; margin: 0 0 12px; color: #fff; font-family: "canada-type-gibson", "Gibson", sans-serif; }
.pd-hero__title-accent { color: rgba(255, 255, 255, 0.55); font-weight: 400; }
.pd-hero__rate { margin-bottom: 16px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.pd-hero__rate-prefix { font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.65); }
.pd-hero__rate-value { font-size: 42px; font-weight: 700; color: #28a7df; line-height: 1; }
/* No text-transform — editors control case (same fix as the features pills). */
.pd-hero__rate-type { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.5px; }
.pd-hero__subtitle { font-size: 16px; font-weight: 500; line-height: 1.55; color: #fff; margin: 0 0 32px; }
/* Flex wrapper so both CTAs share the same baseline regardless of the 2px
 * border on the outline variant. Wraps on narrow screens with a consistent
 * vertical gap. */
.pd-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.pd-hero__cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: #28a7df; color: #fff;
  font-size: 16px; font-weight: 500;
  padding: 14px 32px;
  /* Compensate for the outline variant's 2px border so both buttons have
   * the same outer height. */
  border: 2px solid transparent;
  border-radius: 100px;
  text-decoration: none;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
  transition: background 0.2s;
}
.pd-hero__cta:hover { background: #f9b236; color: #041e41; }
.pd-hero__cta--outline { background: transparent; border-color: rgba(255,255,255,0.3); color: #fff; }
.pd-hero__cta--outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; }
/* Stack at 1100px so iPad portrait (768) AND landscape (1024) both get the
 * stacked layout. On stacked sizes the right column sizes itself to the
 * photo's natural aspect ratio (no forced height, no cropping). */
@media (max-width: 1100px) {
  .pd-hero__split { flex-direction: column; }
  .pd-hero__left { flex: none; max-width: 100%; padding: 40px 24px 36px; }
  .pd-hero__left-inner { padding-left: 0; padding-right: 0; }
  .pd-hero__right { min-height: 0; height: auto; }
  /* Editor toggle: no photo on stacked sizes. */
  .pd-hero--hide-photo-mobile .pd-hero__right { display: none; }
  .pd-hero__photo { position: relative; width: 100%; height: auto; max-height: none; object-fit: contain; }
  .pd-hero__title { font-size: 38px; }
}
@media (max-width: 720px) {
  .pd-hero__title { font-size: 30px; }
}

/* ── Key Features Strip ── */
.pd-features {
  background: #fff;
  padding: 56px 0;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
}
.pd-features__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.pd-feature-card {
  background: #f3f5f7;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pd-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(4,30,65,0.08);
}
.pd-feature-card__icon {
  width: 48px;
  height: 48px;
  background: #041e41;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.pd-feature-card__icon svg {
  width: 24px;
  height: 24px;
  stroke: #f9b236;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pd-feature-card__label {
  font-size: 16px;
  font-weight: 500;
  color: #041e41;
}

/* ── Why Save — compact override ── */
/* Chained selector so this override beats the base `.deel-stats` rule that
 * comes later in this file (same specificity → source order wins by default). */
.deel-stats.deel-stats--icons { padding: 40px 0; }
.deel-stats.deel-stats--icons .deel-stats__title { margin-bottom: 24px; }

/* ── At a Glance — Bento Grid ── */
.pd-glance {
  background: #fff;
  /* 60px lead-in matching the sitewide section rhythm (client). */
  /* bottom balanced to the 60px top (client: bottom felt heavier). */
  padding: 60px 0 60px;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
}
.pd-glance__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
.pd-glance__header {
  text-align: center;
  margin-bottom: 48px;
}
.pd-glance__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #28a7df;
  margin-bottom: 12px;
}
.pd-glance__title {
  font-size: 32px;
  font-weight: 600;
  color: #041e41;
  margin: 0;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
}
/* ── Hero + Inline Pills (Option B) ── */
.pd-pills-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 32px;
  align-items: center;
  /* was 24px — doubled up with the section padding, making the bottom
     read heavier than the 60px top (client). */
  margin-bottom: 0;
}

/* Compact navy rate card on the left */
.pd-pills-rate {
  background: linear-gradient(135deg, #041e41 0%, #0a3978 100%);
  border-radius: 20px;
  padding: 36px 28px;
  text-align: center;
  color: #fff;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pd-pills-rate__value {
  font-size: 60px;
  font-weight: 700;
  color: #28a7df;
  line-height: 1;
  letter-spacing: -0.02em;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
}
/* text-transform removed so the editor's own casing is preserved
 * (Upper / lower / mixed) rather than being forced to uppercase. */
.pd-pills-rate__type {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
  margin-top: 14px;
}

/* Reward saver dual-rate breakdown inside the pd-pills-rate panel.
 * text-transform removed so the editor's own casing is preserved
 * (Upper / lower / mixed) rather than being forced to uppercase. */
.pd-pills-rate--reward .pd-pills-rate__prefix {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}
.pd-pills-rate--reward .pd-pills-rate__value {
  font-size: 52px;
}
.pd-pills-rate--reward .pd-pills-rate__type {
  font-size: 13px;
  margin-top: 6px;
  margin-bottom: 16px;
}
.pd-pills-rate__split {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
}
.pd-pills-rate__split-piece {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pd-pills-rate__split-piece strong {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
/* text-transform removed — editor's own casing (Upper / lower / mixed)
 * on the base_label + reward_label fields is preserved rather than being
 * forced to uppercase. */
.pd-pills-rate__split-piece span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
}
.pd-pills-rate__split-plus {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  color: #f9b236;
}

/* Pill grid on the right — 3 across, wraps to 2 rows */
.pd-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pd-pills > .pd-pill:nth-child(4),
.pd-pills > .pd-pill:nth-child(5) {
  /* second row centers visually with 5 items in a 3-col grid */
}

/* Individual pill — hairline outline, no fill */
.pd-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid #e1e6ec;
  border-radius: 999px;
  background: #fff;
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.pd-pill:hover {
  border-color: #28a7df;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(4, 30, 65, 0.08);
}
.pd-pill__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #28a7df;
}
.pd-pill__text {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  min-width: 0;
  /* Optical: value/label glyphs (caps + digits, no descenders) read ~1px
   * high against the icon ink; the bold row's lowercase reads level. */
  transform: translateY(1px);
}
.pd-pill__value {
  font-size: 15px;
  font-weight: 400 /* client round 2: 500 still read too bold (Gibson joins the i-dot) */;
  color: #041e41;
  white-space: nowrap;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
}
.pd-pill__label {
  font-size: 13px;
  color: #5a6a7a;
  white-space: nowrap;
}
.pd-pill__bold {
  font-size: 15px;
  font-weight: 400 /* matches pd-pill__value — rows sit stacked, mixed weights read as an error */;
  color: #041e41;
  white-space: nowrap;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
}
/* Reward bonus pill — mango accent to flag this as the conditional rate */
.pd-pill--reward {
  border-color: rgba(249, 178, 54, 0.55);
  background: rgba(249, 178, 54, 0.08);
}
.pd-pill--reward .pd-pill__icon {
  color: #f9b236;
}
.pd-pill--reward:hover {
  border-color: #f9b236;
}

@media (max-width: 1000px) {
  .pd-pills-layout {
    grid-template-columns: 1fr;
  }
  .pd-pills-rate {
    padding: 32px 24px;
  }
  .pd-pills {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .pd-pills-rate__value {
    font-size: 52px;
  }
  .pd-pills {
    grid-template-columns: 1fr;
  }
  .pd-pill {
    padding: 12px 16px;
  }
  .pd-pill__value,
  .pd-pill__label,
  .pd-pill__bold {
    white-space: normal;
  }
}

/* Bento layout: rate hero left, feature tiles right */
.pd-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}
/* Rate hero — spans full left column, both rows */
.pd-bento__rate {
  grid-row: 1 / 3;
  background: #041e41;
  border-radius: 20px;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 340px;
}
/* Decorative glow ring behind the rate */
.pd-bento__rate::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(40,167,223,0.15);
  pointer-events: none;
}
.pd-bento__rate::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(40,167,223,0.07);
  pointer-events: none;
}
.pd-bento__rate-value {
  font-size: 72px;
  font-weight: 700;
  color: #28a7df;
  line-height: 1;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
  position: relative;
  z-index: 1;
}
.pd-bento__rate-type {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-top: 8px;
  position: relative;
  z-index: 1;
}
.pd-bento__rate-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  margin-top: 8px;
  position: relative;
  z-index: 1;
}
.pd-bento__rate-earn {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  position: relative;
  z-index: 1;
  text-align: center;
}
.pd-bento__rate-earn-value {
  font-size: 24px;
  font-weight: 700;
  color: #f9b236;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
}
.pd-bento__rate-earn-label {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
}
/* Top-right: 2-col mini grid */
.pd-bento__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
/* Individual feature tile */
.pd-bento__tile {
  background: #f3f5f7;
  border-radius: 16px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.pd-bento__tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #f9b236;
  border-radius: 4px 0 0 4px;
}
.pd-bento__tile-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #5a6a7a;
  margin-bottom: 8px;
}
.pd-bento__tile-value {
  font-size: 22px;
  font-weight: 700;
  color: #041e41;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
}
/* Bottom-right: 3-col mini grid */
.pd-bento__trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
/* Full-width apply strip */
.pd-bento__apply {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #041e41 0%, #0a3264 100%);
  border-radius: 16px;
  padding: 28px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
/* Apply strip anchoring the bottom of the Summary Box gets more breathing
 * room from the accordion above it. */
.pd-summary__apply { margin-top: 32px; }
.pd-bento__apply-text {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pd-bento__apply-icon {
  width: 44px;
  height: 44px;
  background: rgba(40,167,223,0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pd-bento__apply-icon svg {
  width: 22px;
  height: 22px;
  stroke: #28a7df;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pd-bento__apply-label {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}
.pd-bento__apply-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.88);
  margin-top: 8px;
}
.pd-bento__apply-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #28a7df;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 28px;
  border-radius: 100px;
  text-decoration: none;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
  transition: background 0.2s;
  white-space: nowrap;
}
.pd-bento__apply-cta:hover {
  background: #f9b236;
  color: #041e41;
}
.pd-bento__apply-cta svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Suitability — Split panel ── */
.pd-suitability {
  background: #f3f5f7;
  /* 60px lead-in matching the sitewide section rhythm (client). */
  padding: 60px 0 72px;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
}
.pd-suitability__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
.pd-suitability__header {
  text-align: center;
  margin-bottom: 48px;
}
.pd-suitability__title {
  font-size: 32px;
  font-weight: 600;
  color: #041e41;
  margin: 0 0 8px;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
}
.pd-suitability__subtitle {
  font-size: 16px;
  color: #5a6a7a;
  margin: 0;
}
/* Single unified card with internal split */
.pd-suitability__card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(4,30,65,0.06);
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1000px;
  margin: 0 auto;
}
.pd-suitability__col {
  padding: 36px 36px 40px;
  position: relative;
}
/* Colored top accent bar */
.pd-suitability__col::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}
.pd-suitability__col--positive::before {
  background: linear-gradient(90deg, #28a7df, #5bbde8);
}
.pd-suitability__col--caution::before {
  background: linear-gradient(90deg, #f9b236, #fbc96a);
}
/* Center divider */
.pd-suitability__col--positive {
  border-right: 1px solid #f0f2f5;
}
.pd-suitability__col-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.pd-suitability__col-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pd-suitability__col-badge--positive {
  background: rgba(40,167,223,0.12);
}
.pd-suitability__col-badge--positive svg {
  stroke: #28a7df;
}
.pd-suitability__col-badge--caution {
  background: rgba(249,178,54,0.15);
}
.pd-suitability__col-badge--caution svg {
  stroke: #f9b236;
}
.pd-suitability__col-title {
  font-size: 18px;
  font-weight: 600;
  color: #041e41;
}
.pd-suitability__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd-suitability__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: #3a4a5a;
  padding: 12px 0;
  border-bottom: 1px solid #f0f2f5;
}
.pd-suitability__list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.pd-suitability__list-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.pd-suitability__list-icon--positive {
  background: rgba(40,167,223,0.12);
  color: #28a7df;
}
.pd-suitability__list-icon--caution {
  background: rgba(249,178,54,0.15);
  color: #f9b236;
}
.pd-suitability__list-icon svg {
  width: 12px;
  height: 12px;
}

@media (max-width: 900px) {
  .pd-bento {
    grid-template-columns: 1fr;
  }
  .pd-bento__rate {
    grid-row: auto;
    min-height: 240px;
    padding: 40px 24px;
  }
  .pd-bento__rate-value {
    font-size: 56px;
  }
  .pd-suitability__card {
    grid-template-columns: 1fr;
  }
  .pd-suitability__col--positive {
    border-right: none;
    border-bottom: 1px solid #f0f2f5;
  }
}
@media (max-width: 600px) {
  .pd-bento__pair {
    grid-template-columns: 1fr;
  }
  .pd-bento__trio {
    grid-template-columns: 1fr;
  }
  .pd-bento__apply {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 28px 24px;
  }
  .pd-bento__apply-text {
    flex-direction: column;
  }
}

/* ── Product Summary Accordion ── */
.pd-summary {
  background: #f3f5f7;
  /* 60px lead-in matching the sitewide section rhythm (client). */
  padding: 60px 0 64px;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
}
.pd-summary__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
.pd-summary__title {
  font-size: 32px;
  font-weight: 600;
  color: #041e41;
  margin: 0 0 8px;
  text-align: center;
}
.pd-summary__subtitle {
  font-size: 16px;
  color: #5a6a7a;
  text-align: center;
  margin: 0 0 40px;
}
.pd-accordion {
  max-width: 860px;
  margin: 0 auto;
}
.pd-accordion [data-reach-accordion-item] {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(4,30,65,0.06);
  overflow: hidden;
}
.pd-accordion [data-reach-accordion-button] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  color: #041e41;
  gap: 16px;
}
.pd-accordion [data-reach-accordion-button]:hover {
  background: #fafbfc;
}
.pd-accordion [data-reach-accordion-panel] {
  padding: 0 24px 24px;
  font-size: 15px;
  line-height: 1.7;
  color: #3a4a5a;
}
.pd-accordion [data-reach-accordion-panel] p {
  margin: 0 0 12px;
}
.pd-accordion [data-reach-accordion-panel] p:last-child {
  margin-bottom: 0;
}
.pd-accordion [data-reach-accordion-panel] ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.pd-accordion [data-reach-accordion-panel] li {
  margin-bottom: 6px;
}

/* Accordion chevron icon */
.pd-acc-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #f9b236;
  transition: transform 0.25s ease-out;
}
/* Animation handled by `details[open]` selector lower in this file — the
 * old `[data-state="open"]` rule was sticky because data-state is set
 * once by PHP and never cleared when the user toggles the <details>. */

/* ── Rate table inside accordion ── */
.pd-rate-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 15px;
}
.pd-rate-table th,
.pd-rate-table td {
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid #e8ecf0;
}
.pd-rate-table th {
  background: #f3f5f7;
  font-weight: 600;
  color: #041e41;
  font-size: 14px;
}
.pd-rate-table td {
  color: #3a4a5a;
}



/* ── Steps — horizontal process strip ── */
.pd-steps {
  background: #fff;
  /* 60px lead-in matching the sitewide section rhythm (client). */
  padding: 60px 0 64px;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
}
.pd-steps__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}
.pd-steps__title {
  font-size: 32px;
  font-weight: 600;
  color: #041e41;
  text-align: center;
  margin: 0 0 48px;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
}
.pd-steps__track {
  display: flex;
  align-items: flex-start;
  position: relative;
}
/* Connecting line behind the circles */
.pd-steps__track::before {
  content: "";
  position: absolute;
  top: 24px;
  left: calc(16.66%);
  right: calc(16.66%);
  height: 2px;
  background: linear-gradient(90deg, #28a7df, #f9b236);
  z-index: 0;
}
.pd-step {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
}
.pd-step__number {
  width: 48px;
  height: 48px;
  background: #041e41;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(4,30,65,0.12);
  /* Gibson tops out at weight 600 — stroke faux-bolds the numerals so they
   * read as strong as the demo intends. */
  -webkit-text-stroke: 0.6px currentColor;
}
.pd-step:first-child .pd-step__number {
  background: #28a7df;
}
.pd-step:last-child .pd-step__number {
  background: #f9b236;
  color: #041e41;
}
.pd-step__title {
  font-size: 16px;
  font-weight: 600;
  color: #041e41;
  margin-bottom: 6px;
}
.pd-step__desc {
  font-size: 14px;
  color: #5a6a7a;
  line-height: 1.5;
  max-width: 220px;
  margin: 0 auto;
}

/* ── FAQ ── */
.pd-faq {
  background: #fff;
  padding: 64px 0;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
}
.pd-faq__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}
.pd-faq__title {
  font-size: 28px;
  font-weight: 600;
  color: #041e41;
  text-align: center;
  margin: 0 0 8px;
}
.pd-faq__subtitle {
  font-size: 15px;
  color: #5a6a7a;
  text-align: center;
  margin: 0 0 32px;
  line-height: 1.6;
}

/* Historical rates table inside accordion */
.pd-rates-table {
  margin: 12px 0 16px;
  overflow-x: auto;
}
.pd-rates-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.pd-rates-table th,
.pd-rates-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e1e6ec;
}
.pd-rates-table th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5a6a7a;
  background: #f3f5f7;
}
.pd-rates-table td {
  color: #041e41;
  font-weight: 500;
}
.pd-rates-table tbody tr:last-child td {
  border-bottom: none;
}
.pd-faq__note {
  font-size: 13px;
  color: #5a6a7a;
  font-style: italic;
  margin-top: 8px;
}

/* Glossary (Key terms explained) */
.pd-glossary {
  margin: 4px 0 0;
}
.pd-glossary dt {
  font-size: 15px;
  font-weight: 600;
  color: #041e41;
  margin-top: 14px;
}
.pd-glossary dt:first-child {
  margin-top: 0;
}
.pd-glossary dd {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #3a4a5a;
}

/* Document download links inside accordion */
.pd-faq__doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.pd-faq__doc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #28a7df;
  border-radius: 100px;
  color: #28a7df;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.pd-faq__doc-link:hover {
  background: #28a7df;
  color: #fff;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .pd-features__inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .pd-steps__track {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .pd-steps__track::before {
    display: none;
  }
  .pd-step__desc {
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .pd-features__inner {
    grid-template-columns: 1fr;
  }
}

/* ── DeelStats no-heading variant ── */
.deel-stats--no-heading .deel-stats__grid {
  margin-top: 0;
}

/* ── Product Summary: PDF download cards ── */
.pd-summary__downloads {
  max-width: 860px;
  margin: 0 auto 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pd-doc-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e1e6ec;
  border-radius: 12px;
  text-decoration: none;
  color: #041e41;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.pd-doc-card:hover {
  border-color: #28a7df;
  box-shadow: 0 4px 14px rgba(4,30,65,0.08);
  transform: translateY(-1px);
}
.pd-doc-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(40,167,223,0.12);
  color: #28a7df;
  border-radius: 10px;
}
.pd-doc-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pd-doc-card__label {
  font-size: 16px;
  font-weight: 600;
  color: #041e41;
  line-height: 1.3;
}
.pd-doc-card__meta {
  font-size: 13px;
  font-weight: 500;
  color: #5a6a7a;
  letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .pd-summary__downloads {
    grid-template-columns: 1fr;
  }
}

/* ── FSCS protection strip ── */
.pd-fscs {
  background: linear-gradient(135deg, #041e41 0%, #0a3978 100%);
  padding: 56px 0;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
}
.pd-fscs__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 36px;
}
.pd-fscs__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-fscs__logo img {
  width: 120px;
  height: auto;
  display: block;
}
.pd-fscs__body {
  flex: 1;
  min-width: 0;
}
.pd-fscs__title {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.3;
}
.pd-fscs__copy {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 14px;
}
.pd-fscs__copy strong {
  color: #fff;
  font-weight: 600;
}
.pd-fscs__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #f9b236;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.pd-fscs__link:hover {
  color: #ffc658;
}
@media (max-width: 720px) {
  .pd-fscs {
    padding: 40px 0;
  }
  .pd-fscs__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .pd-fscs__logo img {
    width: 96px;
  }
}

/* ── Sticky Scroll CTA Bar ── */
.pd-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: linear-gradient(135deg, #041e41 0%, #0a3978 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: "canada-type-gibson", "Gibson", sans-serif;
  pointer-events: none;
}
.pd-sticky-cta--visible {
  transform: translateY(0);
  pointer-events: auto;
}
.deel-capture-mode .pd-sticky-cta {
  transform: translateY(0) !important;
  pointer-events: auto;
}
.pd-sticky-cta__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.pd-sticky-cta__product {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}
.pd-sticky-cta__rate-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;
}
.pd-sticky-cta__rate {
  font-size: 34px;
  font-weight: 700;
  color: #28a7df;
  line-height: 1;
  letter-spacing: -0.01em;
}
.pd-sticky-cta__rate-type {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}
.pd-sticky-cta__product-text {
  min-width: 0;
}
.pd-sticky-cta__name {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-sticky-cta__meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
}
.pd-sticky-cta__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.pd-sticky-cta__summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 100px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.pd-sticky-cta__summary:hover {
  border-color: #28a7df;
  color: #28a7df;
}
.pd-sticky-cta__apply {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #28a7df;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.pd-sticky-cta__apply:hover {
  background: #f9b236;
  color: #041e41;
  transform: translateY(-1px);
}
@media (max-width: 720px) {
  .pd-sticky-cta__inner {
    padding: 12px 16px;
    gap: 12px;
  }
  .pd-sticky-cta__rate {
    font-size: 26px;
  }
  .pd-sticky-cta__rate-type {
    font-size: 11px;
  }
  .pd-sticky-cta__name {
    font-size: 14px;
  }
  .pd-sticky-cta__meta,
  .pd-sticky-cta__summary {
    display: none;
  }
  .pd-sticky-cta__apply {
    padding: 11px 18px;
    font-size: 14px;
  }
}

/* ── Adjustments for the WP-side render ───────────────────────────────
   The demo uses @reach/accordion (data-reach-accordion-*) for the Summary
   Box and emits its own attribute set; the WP single-product template
   uses native <details>/<summary> elements, so port the same look to
   those selectors. */
.pd-accordion details.pd-accordion__item { background: #fff; border-radius: 12px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(4,30,65,0.06); overflow: hidden; }
.pd-accordion details.pd-accordion__item summary { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; cursor: pointer; list-style: none; font-family: inherit; font-size: 18px; font-weight: 600; color: #041e41; gap: 16px; }
.pd-accordion details.pd-accordion__item summary::-webkit-details-marker { display: none; }
.pd-accordion details.pd-accordion__item summary:hover { background: #fafbfc; }
.pd-accordion details.pd-accordion__item[open] summary .pd-acc-icon { color: #28a7df; transform: rotate(180deg); }
.pd-accordion .pd-acc-icon { flex-shrink: 0; width: 24px; height: 24px; color: #f9b236; transition: transform 0.25s ease-out; }
.pd-accordion .pd-accordion__body { padding: 0 24px 24px; font-size: 15px; line-height: 1.7; color: #3a4a5a; }
.pd-accordion .pd-accordion__body p { margin: 0 0 12px; }
.pd-accordion .pd-accordion__body p:last-child { margin-bottom: 0; }
.pd-accordion .pd-accordion__body ul { margin: 0 0 12px; padding-left: 20px; }
.pd-accordion .pd-accordion__body table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
.pd-accordion .pd-accordion__body th,
.pd-accordion .pd-accordion__body td { padding: 10px 16px; text-align: left; border-bottom: 1px solid #e8ecf0; }
.pd-accordion .pd-accordion__body th { background: #f3f5f7; font-weight: 600; color: #041e41; font-size: 14px; }
.pd-accordion .pd-accordion__body td { color: #3a4a5a; }

/* ── Doc downloads — outer section wrappers only.
   Card styles (.pd-doc-card and children) are defined above with the
   demo's white-card design and shared between this layout and pd_summary. */
.pd-doc-downloads { background: #fff; padding: 56px 0; font-family: "canada-type-gibson", "Gibson", sans-serif; }
.pd-doc-downloads__inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.pd-doc-downloads__title { font-size: 24px; font-weight: 600; color: #041e41; margin: 0 0 24px; }
.pd-doc-downloads__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

/* ── Final-CTA panel (pd_final_cta) — uses .final-cta-v2 classes shared with
   the hub-article template; rules duplicated here so this page doesn't need
   to enqueue hub-article.css. */
.v2-final-cta,
.final-cta-v2 {
  padding: 60px 0 64px; /* 60px lead-in matching the sitewide section rhythm (client) */
  text-align: center;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
}
.v2-final-cta .content-block,
.final-cta-v2 .content-block {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}
.v2-final-cta__heading,
.final-cta-v2__heading,
.v2-cta-heading h3,
.v2-cta-heading {
  font-size: 32px;
  font-weight: 600;
  color: #041e41;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.v2-final-cta__subtitle,
.final-cta-v2__subtitle,
.v2-cta-subtitle {
  font-size: 22px;
  line-height: 1.5;
  color: #041e41;
  margin: 0 auto 40px;
  max-width: 560px;
}
.v2-final-cta__cta,
.final-cta-v2__cta,
.v2-cta-button {
  margin: 0 0 24px;
}
.v2-final-cta__cta a,
.final-cta-v2__cta a,
.v2-cta-button a {
  display: inline-block;
  padding: 12px 40px;
  background: #28a7df;
  color: #fff;
  font-size: 20px;
  font-weight: 300;
  border-radius: 30px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}
.v2-final-cta__cta a:hover,
.final-cta-v2__cta a:hover,
.v2-cta-button a:hover {
  background: #1d8bbd;
  transform: translateY(-1px);
}
.v2-final-cta__disclaimer,
.final-cta-v2__disclaimer,
.v2-cta-disclaimer {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(4, 30, 65, 0.55);
  max-width: 640px;
  margin: 16px auto 0;
}
section.content.final-cta-v2,
section.content.v2-final-cta {
  padding-top: 60px !important; /* 60px lead-in (client) */
  padding-bottom: 64px !important;
}
@media (max-width: 720px) {
  .v2-final-cta,
  .final-cta-v2 { padding: 48px 0; }
  .v2-final-cta__heading,
  .final-cta-v2__heading,
  .v2-cta-heading { font-size: 24px; }
  section.content.final-cta-v2,
  section.content.v2-final-cta {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}


/* ── deel-stats (Trusted-by strip) — duplicated from personal-savings-v4.css
   so the existing deel_stats partial renders identically on single-product
   pages too. */
/* ── Awards section — dark blue gradient, white text ── */
.deel-page .deel-stats.deel-stats--awards {
  background: linear-gradient(135deg, #041e41 0%, #0a3978 100%);
}
.deel-page .deel-stats.deel-stats--awards .deel-stats__title {
  color: #fff;
}
.deel-page .deel-stats.deel-stats--awards .deel-stats__label {
  color: rgba(255, 255, 255, 0.88);
}
/* ============================================================================
   .deel-stats — ported from _campaign-landing-deel.scss (prototype's main SCSS)
   Used by the new `deel_stats` flex layout. Two variants: icons + awards.
   ========================================================================= */

.deel-stats {
  padding: 100px 0;
  background: #f3f5f7;
  margin: 0;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
}
.deel-stats .content-block {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
.deel-stats__eyebrow {
  display: block;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #28a7df;
  letter-spacing: 0.02em;
  text-align: center;
  margin-bottom: 12px;
}
.deel-stats__title {
  font-family: "canada-type-gibson", "Gibson", sans-serif;
  font-weight: 600;
  font-size: 40px;
  color: #041e41;
  text-align: center;
  margin: 0 0 64px;
  line-height: 1.15;
}
.deel-stats__intro {
  font-family: "canada-type-gibson", "Gibson", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(4, 30, 65, 0.45);
  text-align: center;
  max-width: 720px;
  margin: 54px auto -40px;
}
.deel-stats__icon {
  display: block;
  max-height: 48px;
  max-width: 120px;
  margin: 0 auto 16px;
  object-fit: contain;
  opacity: 0.85;
}
.deel-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
}
.deel-stats__value {
  display: block;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
  font-weight: 600;
  font-size: 72px;
  color: #041e41;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.deel-stats__label {
  font-size: 18px;
  font-weight: 600;
  color: rgba(4, 30, 65, 0.65);
  line-height: 1.4;
}
/* Icons variant — small SVG glyphs */
.deel-stats--icons .deel-stats__grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 48px 40px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.deel-stats--icons .deel-stats__icon {
  max-height: none;
  max-width: none;
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  filter: none;
  opacity: 1;
}
.deel-stats--icons .deel-stats__label {
  font-size: 17px;
  font-weight: 600;
  color: #041e41;
  line-height: 1.35;
}
/* Mobile: drop to 2x2 grid so labels don't get cut off when 4 columns
 * can't fit in the viewport. */
@media (max-width: 720px) {
  .deel-stats--icons .deel-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
    padding: 0 16px;
  }
  .deel-stats--icons .deel-stats__icon { width: 56px; height: 56px; }
  /* Awards is flex on desktop; on mobile bump each item to ~50% so the
   * row wraps to a 2×2 grid instead of cramming 4 logos at quarter size. */
  .deel-stats--awards .deel-stats__item {
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}
/* Awards variant — larger logos. Flex-based so 1–3 items stay centered
 * within the section instead of left-aligning. Each item gets a base
 * width close to 25% so four items render edge-to-edge as before. */
.deel-stats--awards .deel-stats__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 40px 32px;
  text-align: center;
}
/* Same width per item as the original 4-column grid: 25% minus the
 * gap allocation (3 × 32px ÷ 4 = 24px subtracted per cell). With fewer
 * items the row simply doesn't fill — flex `justify-content: center`
 * keeps them centered. */
.deel-stats--awards .deel-stats__item {
  flex: 0 0 calc(25% - 24px);
  max-width: calc(25% - 24px);
}
.deel-stats--awards .deel-stats__icon {
  display: block;
  width: 50%;
  max-width: none;
  max-height: none;
  height: auto;
  margin: 0 auto 14px;
  filter: none;
  opacity: 1;
  object-fit: contain;
}
.deel-stats--awards .deel-stats__label {
  font-size: 17px;
  font-weight: 600;
  color: #041e41;
  line-height: 1.35;
}
/* ============================================================================
   Awards stats — navy gradient override (matches the prototype's
   `.deel-page .deel-stats.deel-stats--awards` rule).
   ========================================================================= */

.deel-stats.deel-stats--awards {
  background: linear-gradient(135deg, #041e41 0%, #0a3978 100%);
}
.deel-stats.deel-stats--awards .deel-stats__title {
  color: #fff;
}
.deel-stats.deel-stats--awards .deel-stats__eyebrow {
  color: #28a7df;
}
.deel-stats.deel-stats--awards .deel-stats__label {
  color: rgba(255, 255, 255, 0.88);
}
/* Light-background variant — CMS-controlled via the "Background" select on
 * the at_awards layout. Eyebrow stays cyan; title/label flip to navy. */
.deel-stats.deel-stats--awards.deel-stats--bg-light {
  background: #fff;
}
.deel-stats.deel-stats--awards.deel-stats--bg-light .deel-stats__title { color: #041e41; }
.deel-stats.deel-stats--awards.deel-stats--bg-light .deel-stats__label { color: rgba(4, 30, 65, 0.7); }


/* ── Faqs flex layout (modern + classic variants, all-faqs-link CTA) —
   duplicated from style.css / personal-savings-v4.css so the existing
   include-faqs.php partial renders identically on single-product pages. */
.mixit-search .c-faq-question-holder:hover{background-color:#041e41;color:#f9b236}
.faq-list-container{display:block;position:relative;width:1160px;margin:auto}
.faq-list-container ul{-webkit-padding-start:0;padding-inline-start:0}
.faq-list-container ul li{list-style-type:none}
.c-faq-question-holder{display:block;position:relative;width:100%;padding:10px 30px;margin:0 0 30px;font-size:18px;line-height:35px;min-height:50px;text-align:left;color:#041e41;background-color:#fff;border-radius:30px;cursor:pointer}
.c-faq-question-holder button{font-size:18px;font-family:inherit;line-height:inherit}
.c-faq-question-holder.current .arrow{width:22px;height:14px;background-image:url(../img/sprites/sprite.png);background-position:-210px -263px}
.c-faq-question-holder.current,[data-state=open] .c-faq-question-holder{border-radius:30px 30px 0 0;font-weight:700}
.c-faq-question-holder [aria-expanded=true]{font-weight:700}
.c-faq-answer-container{width:100%;padding:10px 30px 10px 0;margin:-30px 0 30px;font-size:18px;text-align:left;color:#041e41;background-color:#fff;border-radius:0 0 30px 30px}
.c-faq-answer-holder{display:block;position:relative;width:65%;padding:0 30px 25px 30px}
.c-faq-answer-holder a{color:#f9b236;border-bottom:1px solid #f9b236}
.c-faq-answer-holder a:hover{opacity:.5}
ul.c-faq-answer-container li{display:block}
ul.c-faq-answer-container li .c-faq-answer-holder ul{padding:0 0 10px 17px}
.c-faq-answer-holder ul li::before{content:"\2022";color:#f9b236;font-weight:700;display:inline-block;width:16px;margin-left:-16px}
.all-faqs-link a{display:block;width:100%;padding:10px 30px;margin:40px 0 0;background-color:#041e41;color:#fff;font-family:Muli,sans-serif;font-weight:400;font-size:24px;text-align:center;border-radius:30px;border:0}
.all-faqs-link a:hover{background-color:#f9b236;color:#041e41}
.info-accordion-holder{display:block;position:relative;width:1160px;margin:auto}
.info-accordion-holder .centered-title-holder{padding:0}
.info-accordion-container{display:block;position:relative;padding:0;margin:0;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)}
.info-sub-heading-holder{display:inline-block;width:100%;position:relative;padding:25px 0 15px;margin:0;cursor:pointer}
.info-sub-heading{display:inline-block;position:relative;width:90%;padding:0;margin:0;font-size:28px;line-height:35px;color:#fff}
.very-light-blue-background .info-sub-heading,.very-light-blue-background .info-text{color:#041e41}
.very-light-blue-background .info-accordion-container{color:#041e41;border-bottom:1px solid rgba(4,30,65,.5)}
.info-text-link-container{display:none;list-style-type:none;padding:30px 0 0;margin:0;-webkit-padding-start:0;padding-inline-start:0}
.info-text{display:block;position:relative;padding:0 0 25px;width:560px;margin:0;font-size:18px;line-height:24px;color:#fff}
.info-text a{color:#fff;text-decoration:underline}
.info-text ul{padding-bottom:15px}
.info-text ul li{list-style-type:disc}
.info-text h2{font-size:20px;padding:0 0 20px}
.pir-container>ul li .c-faq-question-holder{padding:10px 20px;background-color:transparent}
.pir-container>ul li ul.c-faq-answer-container{padding:0;background-color:transparent}
.pir-container>ul li ul.c-faq-answer-container li div.interest-rate-table-container{margin:0}
.pir-container>ul li ul.c-faq-answer-container li div.interest-rate-table-container li{background-color:transparent}
.all-faqs-link a,.career-listing-blocks .full-half-flex-container img,.case-study-blocks .full-half-flex-container img,.cta-background .page-intro-half-container a,.cta-help-submit-holder input,.cta-not-what-link-holder ul li a,.download-holder .download-link-button,.download-holder .download-name,.find-out-more a,.footer-menu-container ul li a,.footer-secondary-menu-holder ul li a,.footer-social-list-holder ul li a,.for-select-dropdown-holder,.for-select-dropdown-holder ul li,.full-submit-holder input,.get-in-touch-mail a,.get-in-touch-tel a,.header-login-holder a,.header-login-holder a::after,.header-search-dropdown-container,.header-search-icon-holder,.header-search-submit-holder input,.header-secondary-menu-holder ul li a,.header-sub-links-container ul li a,.header-top-menu-holder ul li a,.help-search-form-submit-holder input,.im-select-dropdown-holder,.im-select-dropdown-holder ul li,.info-block-button a,.info-page-text a,.lastest-news-feed-list-holder ul li a,.menu-sitemap-container ul li a,.mixit-search .c-faq-question-holder,.mob-search-icon,.mobile-header-search-dropdown-container,.news-insights-blue-cover-holder,.news-insights-image-holder img,.news-insights-link-holder,.news-single-content blockquote p a,.news-single-content p a,.next-link-block,.next-link-holder h5,.next-link-holder span,.person-read-more,.personal-other-link a,.policy-download-container ul li a,.prev-link-block,.prev-link-holder h5,.prev-link-holder span,.product-calc-cta-link-holder a,.product-listing-button-status-holder,.product-listing-download-holder a,.product-listing-dropdown-links-holder ul li a,.product-listing-holder,.product-listing-label-holder,.product-listing-stat-holder,.product-listing-stat-val-holder,.product-listing-title-container,.product-listing-title-holder,.profile-image-holder img,.profile-title-container,.profile-title-container h3,.sign-post-half-container ul li a,.sign-up-form-submit-holder input,.slick-featured-card-blue-cover-holder,.slick-featured-card-link-holder span,.slick-link-holder a,.submit-details,.terms-link a,.tile-content-block a,.vacancy-form-holder label[for=picture],.vacancy-one-block-container .find-out-more,.vacancy-select-dropdown-holder,.vacancy-select-dropdown-holder ul li{transition:all .4s ease}
.absolute-bottom-link-holder,.back-to-top-container img,.breadcrumbs a,.c-faq-answer-holder a,.career-vacancy-details h4,.contact-department-holder a,.contact-location-holder a,.linkedin_person,.next-arrow,.prev-arrow,.products-list-block h3,.sticky-cta_para a{transition:opacity .4s ease}
.white-mango-status-icon{position:absolute;width:28px;height:28px;margin-top:-20px;right:20px}
.white-mango-status-icon::after,.white-mango-status-icon::before{content:"";position:absolute;background-color:#fff;transition:transform .25s ease-out}
.c-faq-question-holder .white-mango-status-icon{margin-top:5px}
.c-faq-question-holder .white-mango-status-icon::after,.c-faq-question-holder .white-mango-status-icon::before{background-color:#041e41}
.white-mango-status-icon::before{top:0;left:50%;width:8px;height:100%;margin-left:-4px;border-radius:4px}
.white-mango-status-icon::after{top:50%;left:0;width:100%;height:8px;margin-top:-4px;border-radius:4px}
.c-faq-question-holder.current .white-mango-status-icon::before,.white-mango-status-icon.is-open::before{transform:rotate(90deg);background-color:#f9b236}
.c-faq-question-holder.current .white-mango-status-icon::after,.white-mango-status-icon.is-open::after{transform:rotate(180deg);background-color:#f9b236}
/* ── deel-faq (verbatim port from campaign-landing-deel) ── */
.deel-faq .centered-title-holder + .eighty-spacer { display: none !important; }
.deel-faq button.info-sub-heading { background: transparent; border: 0; padding: 0; margin: 0; text-align: left; font-family: inherit; width: 100%; cursor: pointer; }
.deel-faq .centered-title-holder { margin-bottom: 32px; }
.deel-faq .info-text-link-container[data-state="open"],
.deel-faq .info-accordion-container.is-open + .info-text-link-container { padding: 16px 0 0; }
.deel-faq .info-text { padding: 0 0 12px; }
.deel-faq .deel-faq-icon { position: absolute; right: -10px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: #fff; }
.deel-faq .deel-faq-icon svg { transition: transform 0.25s ease-out; }
.deel-faq .info-sub-heading .white-mango-status-icon { display: none; }
.deel-faq [data-state="open"] .deel-faq-icon svg,
.deel-faq .info-accordion-container.is-open .deel-faq-icon svg { transform: rotate(180deg); }
.deel-faq [data-state="open"] .deel-faq-icon,
.deel-faq .info-accordion-container.is-open .deel-faq-icon { color: #f9b236; }
.deel-faq--light .centered-title-holder h3 { color: #041e41; }
.deel-faq--light .info-sub-heading { color: #041e41; }
.deel-faq--light .info-text { color: rgba(4, 30, 65, 0.7); }
.deel-faq--light .deel-faq-icon { color: #041e41; }
.deel-faq--light [data-state="open"] .deel-faq-icon,
.deel-faq--light .info-accordion-container.is-open .deel-faq-icon { color: #f9b236; }
/* Modern Faqs spacing + button tweaks */
.faq-list-container > .deel-faq { margin-top: 32px; }
.faq-list-container .all-faqs-link { text-align: center; margin-top: 32px; }
.faq-list-container .all-faqs-link a { display: inline-block; width: auto; padding: 14px 32px; margin: 0; font-size: 16px; font-weight: 500; border-radius: 100px; }

/* ============================================================================
   at_intro_copy — port of ExpandBenefitsV3 from campaign-landing-deel demo.
   Two-column intro band with numbered expand/collapse benefits.
   Variables: navy #041e41, mango #f9b236, azure #28a7df, black #2a2a2a.
   ========================================================================= */

.v3-expand-section { background: #fff; font-family: "canada-type-gibson", "Gibson", sans-serif; }
.v3-section-pad { padding: 60px 0 80px; /* 60px lead-in matching the sitewide section rhythm (client) */ }
.v3-expand-section .content-block { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.v3-expand-section .v3-expand-layout {
    display: grid;
    grid-template-columns: 58fr 42fr;
    gap: 60px;
    align-items: start;
}
.v3-expand-section .v3-expand-header { margin-bottom: 32px; }
.v3-expand-section .v3-expand-badge {
    display: inline-block;
    background: rgba(249, 178, 54, 0.15);
    color: #041e41;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}
.v3-expand-section .v3-expand-headline {
    font-size: 38px;
    font-weight: 200;
    color: #041e41;
    line-height: 1.1;
    margin: 0 0 12px;
    letter-spacing: -0.5px;
}
.v3-expand-section .v3-expand-empathy {
    font-size: 17px;
    color: #2a2a2a;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* Numbered expand/collapse list */
.v3-expand-section .v3-expand-item { border-bottom: 1px solid rgba(4, 30, 65, 0.08); }
.v3-expand-section .v3-expand-item.is-open .v3-expand-trigger { background: rgba(4, 30, 65, 0.03); }
.v3-expand-section .v3-expand-item.is-open .v3-expand-num { color: #28a7df; }

.v3-expand-section .v3-expand-trigger {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.2s ease;
}
.v3-expand-section .v3-expand-trigger:hover { background: rgba(4, 30, 65, 0.02); }

.v3-expand-section .v3-expand-num {
    font-size: 24px;
    font-weight: 700;
    color: #f9b236;
    min-width: 36px;
    transition: color 0.2s ease;
}
.v3-expand-section .v3-expand-trigger-title {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: #041e41;
    line-height: 1.3;
}
.v3-expand-section .v3-expand-icon {
    font-size: 24px;
    color: #041e41;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(4, 30, 65, 0.05);
    flex-shrink: 0;
}

.v3-expand-section .v3-expand-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1), padding 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 0 16px 0 68px;
}
.v3-expand-section .v3-expand-panel.is-open { max-height: 320px; padding: 0 16px 20px 68px; }
.v3-expand-section .v3-expand-desc {
    font-size: 16px;
    color: #2a2a2a;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

.v3-expand-section .v3-expand-cta { margin-top: 32px; }

/* Right column — image card + optional pull-quote testimonial */
.v3-expand-section .v3-expand-right {
    position: sticky;
    top: 100px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}
/* Desktop: image reduced from full width and hugging the right edge
   (client: ~1/3 smaller read too small, nudged back up a little). */
.v3-expand-section--image-right .v3-expand-right {
    max-width: 80%;
    margin-left: auto;
}
.v3-expand-section .v3-expand-right img { width: 100%; height: auto; display: block; }
.v3-expand-section .v3-expand-testimonial {
    background: #041e41;
    padding: 40px 44px 36px;
    position: relative;
    border-left: 4px solid #f9b236;
}
.v3-expand-section .v3-expand-quote-mark {
    font-family: Georgia, serif;
    font-size: 120px;
    line-height: 1;
    color: #f9b236;
    opacity: 0.5;
    position: absolute;
    top: 8px;
    left: 16px;
    pointer-events: none;
}
.v3-expand-section .v3-expand-quote {
    font-size: 18px;
    font-weight: 600;
    font-style: italic;
    color: #fff;
    line-height: 1.6;
    margin: 0 0 16px;
    padding: 0 0 0 28px;
    position: relative;
    z-index: 1;
}
.v3-expand-section .v3-expand-author {
    font-size: 14px;
    color: #f9b236;
    font-weight: 600;
    margin: 0;
    padding: 0 0 0 28px;
}

/* Buttons (only the azure variant used by this layout) */
.v3-btn {
    display: inline-block;
    padding: 16px 44px;
    font-size: 18px;
    font-weight: 500;
    border-radius: 40px;
    text-decoration: none;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
.v3-btn--azure { background: #28a7df; color: #fff; }
.v3-btn--azure:hover { background: #4dbce8; box-shadow: 0 8px 32px rgba(40, 167, 223, 0.3); color: #fff; }

/* Mobile: single column, image moves to top */
@media (max-width: 979px) {
    .v3-section-pad { padding: 56px 0; }
    .v3-expand-section .v3-expand-layout { grid-template-columns: 1fr; gap: 32px; }
    /* Image after the copy + CTA (was order:-1, i.e. above); full width and
       left-aligned again now the desktop shrink no longer applies (client). */
    .v3-expand-section .v3-expand-right { position: relative; top: auto; order: 0; }
    .v3-expand-section--image-right .v3-expand-right { max-width: 100%; margin-left: 0; }
    /* Editor toggle: drop the image entirely on mobile/tablet. */
    .v3-expand-section--hide-media-mobile .v3-expand-right { display: none; }
    .v3-expand-section .v3-expand-headline { font-size: 28px; }
}

/* "list-right" variant — when there's no image / testimonial, the right
 * column hosts the numbered benefits list and the left column holds the
 * header + CTA. Keeps the section compact instead of stacking everything. */
.v3-expand-section--list-right .v3-expand-layout--list-right {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}
.v3-expand-section--list-right .v3-expand-right--list {
    position: sticky;
    top: 100px;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}
@media (max-width: 979px) {
    .v3-expand-section--list-right .v3-expand-layout--list-right {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .v3-expand-section--list-right .v3-expand-right--list {
        position: relative;
        top: auto;
    }
}

/* Static numbered list (no accordion) — used in the at_intro_copy
 * "list-right" mode where all benefits are shown inline. */
.v3-static-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.v3-static-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(4, 30, 65, 0.08);
}
.v3-static-item:last-child { border-bottom: none; }
.v3-static-num {
    flex-shrink: 0;
    font-size: 24px;
    font-weight: 700;
    color: #28a7df;
    min-width: 36px;
    line-height: 1.1;
}
.v3-static-body { flex: 1; min-width: 0; }
.v3-static-title {
    font-size: 18px;
    font-weight: 600;
    color: #041e41;
    line-height: 1.3;
    margin: 0 0 4px;
}
.v3-static-desc {
    font-size: 15px;
    color: #2a2a2a;
    line-height: 1.55;
    margin: 0;
}

/* "centered" variant — no list, no media. Just badge / headline / lead
 * paragraph centered in a max-width column. */
.v3-expand-section--centered .v3-expand-layout--centered {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.v3-expand-section--centered .v3-expand-badge { margin-left: auto; margin-right: auto; }
.v3-expand-section--centered .v3-expand-empathy { margin-left: auto; margin-right: auto; }
/* Header's default 32px margin-bottom leaves an extra gap below the lead
 * paragraph when nothing follows it — kill it so top/bottom section padding
 * (80px from v3-section-pad) is symmetrical. */
.v3-expand-section--centered .v3-expand-header { margin-bottom: 0; }
.v3-expand-section--centered .v3-expand-cta { margin-top: 24px; }

/* ── Hero compliance line (under the CTAs) ──
   Editor-set wording + PDF links; sized/coloured a step up from the old
   design per compliance ask. */
.pd-hero__compliance {
  /* Takes layout height only when rendered: the hero grows by the line
   * plus its 14px gap, keeping the hero's full standard padding below
   * the link. With the field empty nothing renders and the hero is
   * untouched — no global padding change. */
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
/* Beat the theme's global paragraph margin (it was adding 16px of phantom
 * space under the sentence, growing the hero). */
.pd-hero .pd-hero__compliance p { margin: 0 !important; padding: 0 !important; }
.pd-hero__compliance a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pd-hero__compliance a:hover { color: #28a7df; }

/* Apply strip matches the summary content's width (client: bar slightly
 * narrower to align with the product summary spacing). */
.pd-summary__apply {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Anchor landing offset ──
   The sticky CTA bar (95px, fixed top) appears once scrolled; without an
   offset, #summary / #apply landings hide their section heading under it. */
#product-summary, #summary, #apply {
  scroll-margin-top: 110px;
}

/* ── Hero title issue number ──
   Lighter than the account name; on its own line by default. When the
   name itself wraps (long account names), the measuring script adds
   --name-wraps and the issue flows inline after the name instead. */
.pd-hero__title-issue {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.75);
  display: block;
}
.pd-hero__title--name-wraps .pd-hero__title-issue {
  display: inline;
}