/* v420 — About principles, consent panel, and home editorial cards. */
html body:not([data-demo-family]) #main-content .creativeoAboutPage .creativeoStrengths {
  background: #f2f5f3 !important;
}
html body:not([data-demo-family]) #main-content .creativeoAboutPage .creativeoStrengths > .creativeoCardGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.6vw, 24px) !important;
  border: 0 !important;
}
html body:not([data-demo-family]) #main-content .creativeoAboutPage .creativeoStrengths .creativeoEditorialCard:nth-child(n) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-height: clamp(210px, 18vw, 270px) !important;
  padding: clamp(27px, 3vw, 42px) !important;
  border: 1px solid #d5e1e3 !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #ffffff, #f9fcfc) !important;
  color: #172c3a !important;
  box-shadow: 0 10px 30px rgba(11, 43, 58, .055) !important;
  transform: none !important;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease !important;
  overflow: hidden;
}
html body:not([data-demo-family]) #main-content .creativeoAboutPage .creativeoStrengths .creativeoEditorialCard:nth-child(n)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #176f8b, #8bd6df 56%, transparent 86%);
}
html body:not([data-demo-family]) #main-content .creativeoAboutPage .creativeoStrengths .creativeoEditorialCard:is(:hover,:focus-within) {
  transform: translateY(-5px) !important;
  border-color: #8bbfca !important;
  box-shadow: 0 20px 48px rgba(11, 43, 58, .12) !important;
}
html body:not([data-demo-family]) #main-content .creativeoAboutPage .creativeoStrengths .creativeoEditorialCard .creativeoCardNumber {
  display: inline-grid !important;
  place-items: center;
  width: 42px;
  height: 36px;
  margin: 0 0 auto !important;
  border-radius: 10px;
  background: #e5f3f5;
  color: #176481 !important;
  font: 750 .7rem/1 var(--display, "Helvetica Neue", sans-serif) !important;
  letter-spacing: .08em !important;
}
html body:not([data-demo-family]) #main-content .creativeoAboutPage .creativeoStrengths .creativeoEditorialCard h3 {
  margin: clamp(22px, 2vw, 32px) 0 10px !important;
  color: #172c3a !important;
  font-size: clamp(1.45rem, 1.7vw, 1.9rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -.035em !important;
}
html body:not([data-demo-family]) #main-content .creativeoAboutPage .creativeoStrengths .creativeoEditorialCard p {
  margin: 0 !important;
  max-width: 48ch;
  color: #526774 !important;
  font-size: clamp(.94rem, 1vw, 1.05rem) !important;
  line-height: 1.55 !important;
}

/* Consent stays readable, compact, and equally clear for both choices. */
html body:not([data-demo-family]) .vankpaCookiePanel {
  right: clamp(12px, 2vw, 24px) !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  width: min(420px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 32px) !important;
  padding: 24px !important;
  border: 1px solid #cbdde1 !important;
  border-radius: 20px !important;
  background: #f9fbfb !important;
  color: #142b39 !important;
  box-shadow: 0 22px 64px rgba(5, 27, 42, .25) !important;
}
html body:not([data-demo-family]) .vankpaCookieAccent {
  height: 3px !important;
  background: linear-gradient(90deg, #176f8b, #8bd6df) !important;
}
html body:not([data-demo-family]) .vankpaCookiePanel h2 {
  margin: 0 34px 10px 0 !important;
  color: #142b39 !important;
  font: 750 .95rem/1.3 var(--display, "Helvetica Neue", sans-serif) !important;
  letter-spacing: .045em !important;
  text-transform: none !important;
}
html body:not([data-demo-family]) .vankpaCookiePanel > p {
  margin: 0 !important;
  color: #4b616c !important;
  font-size: .83rem !important;
  line-height: 1.55 !important;
}
html body:not([data-demo-family]) .vankpaCookiePanel a {
  color: #176481 !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
html body:not([data-demo-family]) .vankpaCookieClose {
  top: 16px !important;
  right: 16px !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #355666 !important;
  font-size: 1.3rem !important;
}
html body:not([data-demo-family]) .vankpaCookieClose:is(:hover,:focus-visible) {
  background: #e7f1f3 !important;
  border-color: #b9d4da !important;
}
html body:not([data-demo-family]) .vankpaCookieActions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 18px !important;
}
html body:not([data-demo-family]) .vankpaCookiePanel :is(.vankpaCookiePrimary,.vankpaCookieSecondary,.vankpaCookiePreferencesButton) {
  min-height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font: 700 .72rem/1.2 var(--display, "Helvetica Neue", sans-serif) !important;
  letter-spacing: .035em !important;
  text-transform: none !important;
  box-shadow: none !important;
}
html body:not([data-demo-family]) .vankpaCookiePanel .vankpaCookiePrimary {
  border: 1px solid #176f8b !important;
  background: #176f8b !important;
  color: #fff !important;
}
html body:not([data-demo-family]) .vankpaCookiePanel .vankpaCookiePrimary:is(:hover,:focus-visible) {
  border-color: #0e526b !important;
  background: #0e526b !important;
  color: #fff !important;
}
html body:not([data-demo-family]) .vankpaCookiePanel .vankpaCookieSecondary {
  border: 1px solid #b8cdd3 !important;
  background: #edf4f5 !important;
  color: #173b4b !important;
}
html body:not([data-demo-family]) .vankpaCookiePanel .vankpaCookieSecondary:is(:hover,:focus-visible) {
  border-color: #78adb9 !important;
  background: #dcecef !important;
  color: #0e3444 !important;
}
html body:not([data-demo-family]) .vankpaCookiePanel .vankpaCookiePreferencesButton {
  grid-column: 1 / -1 !important;
  justify-self: start;
  min-height: 36px !important;
  padding: 6px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #176481 !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}
html body:not([data-demo-family]) .vankpaCookiePanel .vankpaCookiePreferencesButton:is(:hover,:focus-visible) {
  color: #0d4359 !important;
}
html body:not([data-demo-family]) .vankpaCookiePreferences label {
  border-top-color: #d5e2e5 !important;
}
html body:not([data-demo-family]) .vankpaCookiePreferences input {
  accent-color: #176f8b !important;
}

/* Home insights: editorial proportions, lighter cards, and teal metadata. */
html body:not([data-demo-family]) #main-content .creativeoHomePage--focused .creativeoEditorialSection .creativeoEditorialGrid {
  gap: clamp(16px, 1.7vw, 26px) !important;
  align-items: stretch !important;
}
html body:not([data-demo-family]) #main-content .creativeoHomePage--focused .creativeoEditorialSection .creativeoArticleCard {
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid #cbdce0 !important;
  border-radius: 20px !important;
  background: #fbfcfc !important;
  box-shadow: 0 12px 32px rgba(10, 43, 59, .06) !important;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}
html body:not([data-demo-family]) #main-content .creativeoHomePage--focused .creativeoEditorialSection .creativeoArticleCard:is(:hover,:focus-within) {
  transform: translateY(-5px) !important;
  border-color: #8cbfc9 !important;
  box-shadow: 0 22px 52px rgba(10, 43, 59, .13) !important;
}
html body:not([data-demo-family]) #main-content .creativeoHomePage--focused .creativeoEditorialSection .creativeoArticleMedia {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  border-radius: 0 !important;
  background: #dce7e9 !important;
  overflow: hidden !important;
}
html body:not([data-demo-family]) #main-content .creativeoHomePage--focused .creativeoEditorialSection .creativeoArticleMedia :is(picture,img) {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  object-position: center 18% !important;
}
html body:not([data-demo-family]) #main-content .creativeoHomePage--focused .creativeoEditorialSection .creativeoArticleCard:is(:hover,:focus-within) .creativeoArticleMedia img {
  transform: scale(1.025) !important;
}
html body:not([data-demo-family]) #main-content main.creativeoHomePage--focused section.creativeoEditorialSection article.creativeoArticleCard > div.creativeoArticleCopy {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 245px !important;
  height: auto !important;
  padding: clamp(22px, 2vw, 30px) !important;
  background: #fbfcfc !important;
  color: #172c3a !important;
  -webkit-text-fill-color: initial !important;
}
html body:not([data-demo-family]) #main-content main.creativeoHomePage--focused section.creativeoEditorialSection article.creativeoArticleCard > div.creativeoArticleCopy > small {
  padding-left: 10px !important;
  border-left: 3px solid #2b91aa !important;
  color: #176481 !important;
  -webkit-text-fill-color: #176481 !important;
  font-size: .68rem !important;
  letter-spacing: .085em !important;
}
html body:not([data-demo-family]) #main-content main.creativeoHomePage--focused section.creativeoEditorialSection article.creativeoArticleCard > div.creativeoArticleCopy > h3 {
  margin: 17px 0 10px !important;
  color: #172c3a !important;
  -webkit-text-fill-color: #172c3a !important;
  font-size: clamp(1.45rem, 1.75vw, 1.9rem) !important;
  line-height: 1.16 !important;
  letter-spacing: -.035em !important;
}
html body:not([data-demo-family]) #main-content main.creativeoHomePage--focused section.creativeoEditorialSection article.creativeoArticleCard > div.creativeoArticleCopy > p {
  margin: 0 0 22px !important;
  color: #526774 !important;
  -webkit-text-fill-color: #526774 !important;
  font-size: clamp(.93rem, .95vw, 1.02rem) !important;
  line-height: 1.55 !important;
}
html body:not([data-demo-family]) #main-content main.creativeoHomePage--focused section.creativeoEditorialSection article.creativeoArticleCard > div.creativeoArticleCopy > a {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: auto !important;
  padding: 0 0 4px !important;
  border: 0 !important;
  border-bottom: 1px solid #2b91aa !important;
  color: #176481 !important;
  -webkit-text-fill-color: #176481 !important;
  font-size: .72rem !important;
  letter-spacing: .08em !important;
}
html body:not([data-demo-family]) #main-content main.creativeoHomePage--focused section.creativeoEditorialSection article.creativeoArticleCard > div.creativeoArticleCopy > a:is(:hover,:focus-visible) {
  color: #0d4359 !important;
  -webkit-text-fill-color: #0d4359 !important;
  border-bottom-color: #0d4359 !important;
}
@media (max-width: 900px) {
  html body:not([data-demo-family]) #main-content .creativeoAboutPage .creativeoStrengths > .creativeoCardGrid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 767px) {
  html body:not([data-demo-family]) #main-content .creativeoAboutPage .creativeoStrengths .creativeoEditorialCard:nth-child(n) {
    min-height: 0 !important;
    padding: 25px !important;
  }
  html body:not([data-demo-family]) #main-content .creativeoAboutPage .creativeoStrengths .creativeoEditorialCard .creativeoCardNumber {
    margin-bottom: 6px !important;
  }
  html body:not([data-demo-family]) #main-content .creativeoHomePage--focused .creativeoEditorialSection .creativeoArticleMedia,
  html body:not([data-demo-family]) #main-content .creativeoHomePage--focused .creativeoEditorialSection .creativeoArticleMedia :is(picture,img) {
    aspect-ratio: 4 / 3 !important;
  }
  html body:not([data-demo-family]) .vankpaCookiePanel {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    padding: 20px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body:not([data-demo-family]) #main-content .creativeoAboutPage .creativeoStrengths .creativeoEditorialCard,
  html body:not([data-demo-family]) #main-content .creativeoHomePage--focused .creativeoEditorialSection .creativeoArticleCard,
  html body:not([data-demo-family]) #main-content .creativeoHomePage--focused .creativeoEditorialSection .creativeoArticleMedia img {
    transition: none !important;
  }
}

/* The earlier palette layer gives principle numbers a pale tone intended for dark cards. */
html body:not([data-demo-family]) #main-content .creativeoAboutPage .creativeoStrengths .creativeoEditorialCard .creativeoCardNumber:not(#vk):not(#vk):not(#vk):not(#vk):not(#vk) {
  color: #176481 !important;
  -webkit-text-fill-color: #176481 !important;
}
