/* Decision Card Grid (.dcg) : reusable decision / navigation cards */
.dcg {
  --dcg-blue: #1270B0;
  --dcg-blue-dark: #0e5a8e;
  --dcg-sky: #00ADF0;
  --dcg-teal: #00C299;
  --dcg-teal-dark: #00a882;
  --dcg-cloud: #EDF7FF;
  --dcg-footer: #F7F7F7;
  --dcg-gap: 32px;          /* space between cards in a row */
  --dcg-line-gap: 40px;     /* space between rows of cards */
  --dcg-lift: 36px;         /* how far a featured card reaches above / below its row */
  --dcg-pad: 32px;          /* inner card padding */
  --dcg-curve: 7.1%;        /* depth of the curved top area (relative to card width) */
  position: relative;
  padding: 80px 0;
  scroll-margin-top: 100px;
  background-color: #fff;
}
.dcg--bg-cloud { background-color: var(--dcg-cloud); }
.dcg--bg-none { background-color: transparent; }
.dcg--space-compact { padding: 48px 0; }
.dcg--space-none { padding: 0; }

.dcg__container {
  margin: 0 auto;
  padding: 0 80px;
}

/* ---------- Section intro ---------- */
.dcg__intro { margin: 0 auto 56px; max-width: 1000px; }
.dcg__intro--center { text-align: center; }
.dcg__intro--left { margin-left: 0; text-align: left; }
.dcg__heading {
  color: var(--dcg-blue);
  margin: 0 0 16px;
}
.dcg__subheading {
  color: var(--dcg-blue);
  margin: 0;
}
.dcg__intro > :last-child { margin-bottom: 0; }

/* ---------- Grid ---------- */
.dcg__grid {
  display: grid;
  grid-template-columns: repeat(var(--dcg-cols, 3), minmax(0, 1fr));
  column-gap: var(--dcg-gap);
  row-gap: 0;
  align-items: stretch;
  margin: 0 auto calc(-1 * var(--dcg-line-gap));
  max-width: calc(var(--dcg-cols, 3) * 478px + (var(--dcg-cols, 3) - 1) * var(--dcg-gap));
}
.dcg__grid--cols-1 { max-width: 560px; }
.dcg__grid--badge { padding-top: 26px; }
.dcg__grid--lift { padding-top: var(--dcg-lift); padding-bottom: var(--dcg-lift); }
.dcg__grid--lift.dcg__grid--badge { padding-top: calc(var(--dcg-lift) + 26px); }

/* ---------- Card ---------- */
.dcg__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-bottom: var(--dcg-line-gap);
  background-color: #fff;
  border: 4px solid var(--dcg-blue);
  border-radius: 16px;
}

/* Line up the top area, text, bullets, buttons and notes across the cards in a row. */
@supports (grid-template-rows: subgrid) {
  .dcg__card:not(.dcg__card--featured) {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .dcg__card:not(.dcg__card--featured) > .dcg__footer {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .dcg__card:not(.dcg__card--featured) .dcg__list { grid-row: 1; }
  .dcg__card:not(.dcg__card--featured) .dcg__actions { grid-row: 2; margin-top: 0; }
  .dcg__card:not(.dcg__card--featured) .dcg__note { grid-row: 3; }
  .dcg__card--featured { grid-row: span 5; }
}

.dcg__card--featured {
  z-index: 1;
  box-shadow: 0 18px 40px rgba(18, 112, 176, 0.18);
}
.dcg__grid--lift .dcg__card--featured {
  margin-top: calc(-1 * var(--dcg-lift));
  margin-bottom: calc(var(--dcg-line-gap) - var(--dcg-lift));
}

/* ---------- Badge ---------- */
.dcg__badge {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  padding: 10px 22px;
  border-radius: 200px;
  background-color: var(--dcg-teal);
  color: #fff;
  font-family: var(--font-preview-tahoma, Tahoma, Verdana, sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 12px rgba(0, 194, 153, 0.25);
}
.dcg__badge-text { overflow: hidden; text-overflow: ellipsis; }
.dcg__badge-icon { flex-shrink: 0; width: 20px; height: 20px; }

/* ---------- Top area (icon / logo / photo) ---------- */
.dcg__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px var(--dcg-pad) calc(36px + var(--dcg-curve));
  border-radius: 12px 12px 0 0;
  background-color: var(--dcg-cloud);
  text-align: center;
}
/* Curved bottom edge: a white shape that sits on the bottom of the coloured area. */
.dcg__top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  aspect-ratio: 478 / 34;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 478 34' preserveAspectRatio='none'%3E%3Cpath d='M0 0C76.26 22.18 156.37 34 239 34S401.74 22.18 478 0V35H0Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center bottom / 100% 100%;
  pointer-events: none;
}
.dcg__top--blue { background-color: var(--dcg-blue); }
.dcg__top--white { background-color: #fff; }
.dcg__top--white::after { display: none; }
.dcg__top--empty {
  padding: 0;
  background: none;
}
.dcg__top--empty::after { display: none; }
.dcg__card--has-badge .dcg__top--empty { min-height: 24px; }

.dcg__card--featured .dcg__top:not(.dcg__top--empty):not(.dcg__top--photo) {
  padding-top: 88px;
  padding-bottom: calc(64px + var(--dcg-curve));
}

.dcg__icon {
  display: block;
  width: auto;
  height: 88px;
  max-width: 140px;
  object-fit: contain;
}
.dcg__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(318px, 82%);
  max-height: 96px;
}
.dcg__top--logo .dcg__logo[src$=".svg"] { width: min(318px, 82%); }

.dcg__top--photo {
  padding: 0;
  overflow: hidden;
  background-color: #d9e6f2;
}
.dcg__photo {
  display: block;
  width: 100%;
  aspect-ratio: 478 / 250;
  object-fit: cover;
}

/* ---------- Text ---------- */
.dcg__content {
  padding: 32px var(--dcg-pad) 36px;
}
.dcg__card-title {
  color: var(--dcg-blue);
  margin: 0 0 10px;
}
.dcg__eyebrow {
  color: var(--dcg-sky);
  font-weight: 700 !important;
  letter-spacing: 0.4px;
  line-height: 1.35 !important;
  margin: 0 0 16px;
  text-transform: uppercase;
}
.dcg__eyebrow--above { margin-bottom: 8px; }
.dcg__card--featured .dcg__eyebrow { color: var(--dcg-teal); }
.dcg__text { color: var(--dcg-blue); }
.dcg__text p { color: inherit; margin: 0 0 12px; }
.dcg__text > :last-child,
.dcg__content > :last-child { margin-bottom: 0; }
.dcg__text p:empty { display: none; }
.dcg__text a { color: inherit; text-decoration: underline; }

/* ---------- Grey footer: bullets + buttons ---------- */
.dcg__footer {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 26px var(--dcg-pad) 36px;
  border-radius: 0 0 12px 12px;
  background-color: var(--dcg-footer);
}
.dcg__footer--empty {
  padding: 0;
  background: none;
}

.dcg__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dcg__list-item {
  position: relative;
  margin: 0 0 14px;
  padding-left: 36px;
  color: var(--dcg-blue);
  font-size: 16px !important;
  line-height: 1.45 !important;
}
.dcg__list-item:last-child { margin-bottom: 0; }
.dcg__list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2300C299'/%3E%3Cpath d='M15.83 8.2a.69.69 0 0 1 .97 0 .69.69 0 0 1 0 .98l-6.39 6.42a1.37 1.37 0 0 1-1.94 0l-2.26-2.28a.69.69 0 0 1 0-.97.69.69 0 0 1 .97 0l2.26 2.27z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain;
}

.dcg__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 28px;
  container-type: inline-size;
}
.dcg__grid--no-lists .dcg__actions { padding-top: 0; }

.dcg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  min-height: 56px;
  padding: 14px 32px;
  border: 2px solid var(--dcg-blue);
  border-radius: 200px;
  background-color: var(--dcg-blue);
  color: #fff;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.dcg__btn:hover,
.dcg__btn:focus-visible {
  background-color: var(--dcg-blue-dark);
  border-color: var(--dcg-blue-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(18, 112, 176, 0.22);
}
.dcg__btn--teal { background-color: var(--dcg-teal); border-color: var(--dcg-teal); }
.dcg__btn--teal:hover,
.dcg__btn--teal:focus-visible { background-color: var(--dcg-teal-dark); border-color: var(--dcg-teal-dark); }
.dcg__btn--outline { background-color: transparent; color: var(--dcg-blue); }
.dcg__btn--outline:hover,
.dcg__btn--outline:focus-visible { background-color: var(--dcg-blue); border-color: var(--dcg-blue); color: #fff; }
.dcg__btn-arrow { flex-shrink: 0; transition: transform 0.25s ease; }
.dcg__btn:hover .dcg__btn-arrow { transform: translateX(3px); }
.dcg__btn:focus-visible,
.dcg__link:focus-visible {
  outline: 2px solid var(--dcg-blue);
  outline-offset: 3px;
}

.dcg__link {
  color: var(--dcg-blue);
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dcg__link:hover { color: var(--dcg-sky); }

.dcg__note {
  margin-top: 16px;
  color: #4b5d6b;
  text-align: center;
}
.dcg__note p,
.dcg__note {
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.dcg__note p { margin: 0 0 6px; }
.dcg__note > :last-child { margin-bottom: 0; }
.dcg__note a { color: var(--dcg-blue); text-decoration: underline; }

/* ---------- Responsive ---------- */
/* Narrow cards (4 across, or 3 across on small laptops): keep buttons on one line where possible. */
@container (max-width: 352px) {
  .dcg__btn {
    gap: 8px;
    padding: 12px 18px;
    font-size: 16px !important;
  }
}

@media (max-width: 1439px) {
  .dcg__container { padding: 0 60px; }
  /* Four-up becomes two-up below 1440px. */
  .dcg__grid--cols-4 { --dcg-cols: 2 !important; max-width: 1000px; }
}

@media (max-width: 1279px) {
  .dcg { --dcg-gap: 24px; --dcg-pad: 24px; }
}

@media (max-width: 1199px) {
  /* Three-up stacks into one centred column below 1200px. */
  .dcg__grid--cols-3 { --dcg-cols: 1 !important; max-width: 600px; }
  .dcg__grid--cols-3 .dcg__card--has-badge:not(:first-child) { margin-top: 16px; }
  .dcg__card--featured .dcg__top:not(.dcg__top--empty):not(.dcg__top--photo) {
    padding-top: 64px;
    padding-bottom: calc(44px + var(--dcg-curve));
  }
}

/* The featured card only reaches above / below its row when cards sit side by side in one row. */
@media (min-width: 1440px) {
  .dcg__grid--lift.dcg__grid--multi { --dcg-line-gap: 96px; }
}
@media (max-width: 1439px) {
  .dcg__grid--cols-4.dcg__grid--lift { padding-top: 0; padding-bottom: 0; }
  .dcg__grid--cols-4.dcg__grid--lift.dcg__grid--badge { padding-top: 26px; }
  .dcg__grid--cols-4.dcg__grid--lift .dcg__card--featured { margin-top: 0; margin-bottom: var(--dcg-line-gap); }
}
@media (min-width: 768px) and (max-width: 1439px) {
  .dcg__grid--cols-2.dcg__grid--lift.dcg__grid--multi { --dcg-line-gap: 96px; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .dcg__grid--cols-3.dcg__grid--lift.dcg__grid--multi { --dcg-line-gap: 96px; }
}
@media (max-width: 1199px) {
  .dcg__grid--cols-3.dcg__grid--lift { padding-top: 0; padding-bottom: 0; --dcg-line-gap: 40px; }
  .dcg__grid--cols-3.dcg__grid--lift.dcg__grid--badge { padding-top: 26px; }
  .dcg__grid--cols-3.dcg__grid--lift .dcg__card--featured { margin-top: 0; margin-bottom: var(--dcg-line-gap); }
}

@media (max-width: 1023px) {
  .dcg__container { padding: 0 40px; }
}

@media (max-width: 767px) {
  .dcg { --dcg-pad: 22px; padding: 56px 0; }
  .dcg--space-compact { padding: 36px 0; }
  .dcg--space-none { padding: 0; }
  .dcg__container { padding: 0 20px; }
  .dcg__intro { margin-bottom: 40px; }
  .dcg__grid,
  .dcg__grid--cols-2,
  .dcg__grid--cols-3,
  .dcg__grid--cols-4 { --dcg-cols: 1 !important; --dcg-line-gap: 28px !important; max-width: 560px; }
  .dcg__grid--lift { padding-top: 0; padding-bottom: 0; }
  .dcg__grid--lift.dcg__grid--badge { padding-top: 26px; }
  .dcg__grid--lift .dcg__card--featured { margin-top: 0; margin-bottom: var(--dcg-line-gap); }
  /* Leave room for a badge that sits on a stacked card's top edge. */
  .dcg__card--has-badge:not(:first-child) { margin-top: 16px; }
  .dcg__top { padding-top: 36px; padding-bottom: calc(28px + var(--dcg-curve)); }
  .dcg__icon { height: 72px; }
  .dcg__content { padding-top: 26px; padding-bottom: 28px; }
  .dcg__footer { padding-top: 22px; padding-bottom: 28px; }
  .dcg__actions { padding-top: 24px; }
  .dcg__grid--no-lists .dcg__actions { padding-top: 0; }
  .dcg__btn { width: 100%; padding-left: 20px; padding-right: 20px; }
}

/* ---------- Compact size (default) ---------- */
/* Smaller cards, type and spacing so the module sits comfortably next to other sections.
   Choose "Large" under Layout and style to get the original, bigger version. */
.dcg--compact {
  --dcg-gap: 24px;
  --dcg-pad: 24px;
  --dcg-lift: 24px;
  --dcg-line-gap: 32px;
}
.dcg--compact .dcg__intro { margin-bottom: 44px; }
.dcg--compact .dcg__grid { max-width: calc(var(--dcg-cols, 3) * 380px + (var(--dcg-cols, 3) - 1) * var(--dcg-gap)); }
.dcg--compact .dcg__grid--cols-1 { max-width: 480px; }
.dcg--compact .dcg__grid--badge { padding-top: 20px; }
.dcg--compact .dcg__grid--lift.dcg__grid--badge { padding-top: calc(var(--dcg-lift) + 20px); }
.dcg--compact .dcg__card { border-width: 3px; border-radius: 14px; }
.dcg--compact .dcg__card--featured { box-shadow: 0 12px 28px rgba(18, 112, 176, 0.16); }
.dcg--compact .dcg__badge { gap: 6px; padding: 7px 16px; font-size: 14px; }
.dcg--compact .dcg__badge-icon { width: 16px; height: 16px; }
.dcg--compact .dcg__top {
  padding: 30px var(--dcg-pad) calc(22px + var(--dcg-curve));
  border-radius: 11px 11px 0 0;
}
.dcg--compact .dcg__top--photo,
.dcg--compact .dcg__top--empty { padding: 0; }
.dcg--compact .dcg__card--featured .dcg__top:not(.dcg__top--empty):not(.dcg__top--photo) {
  padding-top: 52px;
  padding-bottom: calc(34px + var(--dcg-curve));
}
.dcg--compact .dcg__icon { height: 64px; max-width: 110px; }
.dcg--compact .dcg__logo { max-width: min(240px, 80%); max-height: 64px; }
.dcg--compact .dcg__top--logo .dcg__logo[src$=".svg"] { width: min(240px, 80%); }
.dcg--compact .dcg__photo { aspect-ratio: 478 / 200; }
.dcg--compact .dcg__content { padding: 22px var(--dcg-pad) 24px; }
.dcg--compact .dcg__card-title {
  margin-bottom: 8px;
  font-size: 21px !important;
  line-height: 1.3 !important;
}
.dcg--compact .dcg__eyebrow {
  margin-bottom: 12px;
  font-size: 15px !important;
  letter-spacing: 0.3px;
}
.dcg--compact .dcg__eyebrow--above { margin-bottom: 6px; }
.dcg--compact .dcg__text,
.dcg--compact .dcg__text p {
  font-size: 16px !important;
  line-height: 1.55 !important;
}
.dcg--compact .dcg__text p { margin-bottom: 10px; }
.dcg--compact .dcg__footer {
  padding: 20px var(--dcg-pad) 24px;
  border-radius: 0 0 11px 11px;
}
.dcg--compact .dcg__list-item {
  margin-bottom: 10px;
  padding-left: 30px;
  font-size: 15px !important;
  line-height: 1.4 !important;
}
.dcg--compact .dcg__list-item:last-child { margin-bottom: 0; }
.dcg--compact .dcg__list-item::before { width: 20px; height: 20px; }
.dcg--compact .dcg__actions { gap: 10px; padding-top: 22px; }
.dcg--compact .dcg__grid--no-lists .dcg__actions { padding-top: 0; }
.dcg--compact .dcg__btn {
  gap: 8px;
  min-height: 46px;
  padding: 10px 24px;
  font-size: 16px !important;
}
.dcg--compact .dcg__btn-arrow { width: 15px; height: 14px; }
.dcg--compact .dcg__link { font-size: 15px; }
.dcg--compact .dcg__note { margin-top: 12px; }
.dcg--compact .dcg__note,
.dcg--compact .dcg__note p {
  font-size: 13px !important;
  line-height: 1.45 !important;
}
@container (max-width: 300px) {
  .dcg--compact .dcg__btn { padding: 9px 16px; font-size: 15px !important; }
}
@media (max-width: 1199px) {
  .dcg--compact .dcg__grid--cols-3 { max-width: 480px; }
  .dcg--compact .dcg__card--featured .dcg__top:not(.dcg__top--empty):not(.dcg__top--photo) {
    padding-top: 46px;
    padding-bottom: calc(28px + var(--dcg-curve));
  }
}
@media (max-width: 767px) {
  .dcg--compact { --dcg-pad: 20px; --dcg-line-gap: 24px; }
  .dcg--compact .dcg__intro { margin-bottom: 32px; }
  .dcg--compact .dcg__grid,
  .dcg--compact .dcg__grid--cols-1 { max-width: 480px; }
  .dcg--compact .dcg__top { padding-top: 26px; padding-bottom: calc(18px + var(--dcg-curve)); }
  .dcg--compact .dcg__top--photo,
  .dcg--compact .dcg__top--empty { padding: 0; }
  .dcg--compact .dcg__icon { height: 56px; }
  .dcg--compact .dcg__card-title { font-size: 19px !important; }
  .dcg--compact .dcg__content { padding-top: 20px; padding-bottom: 22px; }
  .dcg--compact .dcg__footer { padding-top: 18px; padding-bottom: 22px; }
  .dcg--compact .dcg__actions { padding-top: 20px; }
  .dcg--compact .dcg__grid--no-lists .dcg__actions { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dcg__btn,
  .dcg__btn-arrow { transition: none; }
  .dcg__btn:hover,
  .dcg__btn:focus-visible { transform: none; }
  .dcg__btn:hover .dcg__btn-arrow { transform: none; }
}