/* ---------- hero ---------- */

.hero {
  overflow: hidden;
  position: relative;
}

.hero hgroup :nth-child(2),
.hero h1:only-child {
  margin-bottom: unset;
  position: relative;
}

.hero hgroup :nth-child(2)::before,
.hero h1:only-child::before {
  --padding: var(--spacing-130);
  background-color: rgba(255, 255, 255, 0.45);
  border-radius: var(--padding) var(--padding) 0 0;
  /* clip-path: xywh(0 calc(var(--padding) * -1) calc(100% + var(--padding) * 2) calc(var(--padding) * 2 + var(--heading-shift))); */
  -webkit-clip-path: inset(calc(var(--padding) * -1) calc(var(--padding) * -1) calc(var(--padding) - var(--heading-shift)) 0);
          clip-path: inset(calc(var(--padding) * -1) calc(var(--padding) * -1) calc(var(--padding) - var(--heading-shift)) 0);
  content: "";
  filter: blur(calc(var(--padding) / 2));
  margin: calc(var(--padding) * -1);
  padding: var(--padding);
  position: absolute;
  width: 100%;
  z-index: -1;
}

.brand-tertiary-02-800 .hero :nth-child(2)::before,
.brand-tertiary-03-800 .hero :nth-child(2)::before,
.brand-tertiary-02-800 .hero h1:only-child::before,
.brand-tertiary-03-800 .hero h1:only-child::before {
  background-color: rgba(0, 0, 0, 0.44);
}

@media (max-width: 639px) {
  .hero > div {
    margin-top: unset;
  }

  .hero h1:only-child {
    --heading-shift: 1.4375rem;
    margin-top: calc(var(--heading-shift) * -1);
  }

  .hero hgroup {
    --heading-shift: 3.0625rem;
    margin-top: calc(var(--heading-shift) * -1);
  }
}

@media (min-width: 640px) {
  .hero::after {
    /* fix alignment issue browser borders */
    background-color: var(--background-color);
    bottom: 0;
    content: "";
    left: var(--grid-padding-inline);
    position: absolute;
    top: 0;
    width: calc(var(--grid-column-width) * 4 + var(--grid-column-gap) * 4 + .00625rem);
    z-index: 0;
  }

  .hero > div > .heading {
    grid-column: 1/span 8;
  }

  .hero hgroup {
    display: block;
  }

  .hero hgroup :nth-child(2),
  .hero h1:only-child {
    anchor-name: --heading;
    display: inline;
  }

  .hero hgroup :nth-child(2)::before,
  .hero h1:only-child::before {
    --padding: var(--spacing-220);
    border-radius: var(--padding);
    /* clip-path: xywh(calc(var(--grid-column-width) * 4 + var(--grid-column-gap) * 4) calc(var(--padding) * -1) calc(100% + var(--padding) * 2) calc(100% + var(--padding) * 2)); */
    -webkit-clip-path: inset(calc(var(--padding) * -1) calc(var(--padding) * -1) calc(var(--padding) * -1) calc(var(--grid-column-width) * 4 + var(--grid-column-gap) * 4));
            clip-path: inset(calc(var(--padding) * -1) calc(var(--padding) * -1) calc(var(--padding) * -1) calc(var(--grid-column-width) * 4 + var(--grid-column-gap) * 4));
    color: transparent;
    content: attr(data-text)/"";
    margin-left: 0;
    min-width: anchor-size(--heading);
    padding-left: 0;
    width: auto;
  }

  .hero hgroup :first-child {
    margin-bottom: var(--spacing-5);
    max-width: calc(var(--grid-column-width) * 4 + var(--grid-column-gap) * 3);
  }
}

.hero > div > div p:has(.button) {
  margin-top: var(--spacing-50);
}



/* ---------- hero met dubbele images ---------- */

.hero figure:first-of-type {
  grid-column: 1/span 4;
  margin-inline: calc(var(--grid-padding-inline)*-1) calc(var(--grid-column-gap) * -1);
  z-index: 0;
}

@media (min-width: 640px) {
  .hero::after {
    content: none;
  }

  .hero hgroup :nth-child(2)::before,
  .hero h1:only-child::before {
    content: none;
  }

  .hero > div {
    grid-column: 5/span 8;
    margin-bottom: 0;
    margin-left: var(--spacing-40);
  }

  .hero > div::before {
    --padding: var(--spacing-130);
    background-color: rgba(255, 255, 255, 0.45);
    border-radius: var(--padding);
    /* clip-path: xywh(calc(var(--padding) * 1 - var(--spacing-40)) calc(var(--padding) * -1) calc(100% + var(--padding) * 2) calc(100% + var(--padding) * 2)); */
    -webkit-clip-path: inset(calc(var(--padding) * -1) calc(var(--padding) * -1) calc(var(--padding) * -1) calc(var(--padding) * 1 - var(--spacing-40)));
            clip-path: inset(calc(var(--padding) * -1) calc(var(--padding) * -1) calc(var(--padding) * -1) calc(var(--padding) * 1 - var(--spacing-40)));
    content: "";
    filter: blur(calc(var(--padding) / 2));
    inset: 0;
    margin: calc(var(--padding) * -1);
    padding: var(--padding);
    position: absolute;
    width: auto;
    z-index: -1;
  }

  .brand-tertiary-02-800 .hero > div::before,
  .brand-tertiary-03-800 .hero > div::before {
    background-color: rgba(0, 0, 0, 0.44);
  }

  .hero > div > * {
    grid-column: 1/-1;
  }
}

@media (min-width: 1280px) {
  .hero > div {
    grid-column: 5/span 6;
    margin-bottom: var(--spacing-80);
    margin-left: var(--spacing-130);
  }

  .hero > div::before {
    --padding: var(--spacing-220);
    /* clip-path: xywh(calc(var(--padding) * 1 - var(--spacing-130)) calc(var(--padding) * -1) calc(100% + var(--padding) * 2) calc(100% + var(--padding) * 2)); */
    -webkit-clip-path: inset(calc(var(--padding) * -1) calc(var(--padding) * -1) calc(var(--padding) * -1) calc(var(--padding) * 1 - var(--spacing-130)));
            clip-path: inset(calc(var(--padding) * -1) calc(var(--padding) * -1) calc(var(--padding) * -1) calc(var(--padding) * 1 - var(--spacing-130)));
  }
}

@media (min-width: 1680px) {
  .hero > div {
    grid-column: 5/span 5;
  }
}



/* ---------- scroll button ---------- */

.button.button--scroll {
  --cta-outline-width: .125rem;
  aspect-ratio: 1;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.46967 8.46967C4.76256 8.17678 5.23744 8.17678 5.53033 8.46967L12 14.9393L18.4697 8.46967C18.7626 8.17678 19.2374 8.17678 19.5303 8.46967C19.8232 8.76256 19.8232 9.23744 19.5303 9.53033L12.5303 16.5303C12.3897 16.671 12.1989 16.75 12 16.75C11.8011 16.75 11.6103 16.671 11.4697 16.5303L4.46967 9.53033C4.17678 9.23744 4.17678 8.76256 4.46967 8.46967Z' fill='%23fffbf8'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.46967 8.46967C4.76256 8.17678 5.23744 8.17678 5.53033 8.46967L12 14.9393L18.4697 8.46967C18.7626 8.17678 19.2374 8.17678 19.5303 8.46967C19.8232 8.76256 19.8232 9.23744 19.5303 9.53033L12.5303 16.5303C12.3897 16.671 12.1989 16.75 12 16.75C11.8011 16.75 11.6103 16.671 11.4697 16.5303L4.46967 9.53033C4.17678 9.23744 4.17678 8.76256 4.46967 8.46967Z' fill='%23f3f1ef'/%3E%3C/svg%3E");
  background-position: center 0.125rem;
  background-repeat: no-repeat;
  background-size: var(--spacing-50);
  border-radius: unset;
  bottom: var(--spacing-30);
  color: var(--colors-neutral-50);
  display: none;
  font-size: 0;
  height: 2.75rem;
  left: 50%;
  outline: 0.125rem solid transparent;
  outline-offset: -0.125rem;
  padding: unset;
  position: absolute;
  transform: translateX(-50%);
  transition: var(--transition-default);
  width: 2.75rem;
  z-index: 1;
}

.button.button--scroll:active,
.button.button--scroll:focus,
.button.button--scroll:hover {
  --cta-outline-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.46967 8.46967C4.76256 8.17678 5.23744 8.17678 5.53033 8.46967L12 14.9393L18.4697 8.46967C18.7626 8.17678 19.2374 8.17678 19.5303 8.46967C19.8232 8.76256 19.8232 9.23744 19.5303 9.53033L12.5303 16.5303C12.3897 16.671 12.1989 16.75 12 16.75C11.8011 16.75 11.6103 16.671 11.4697 16.5303L4.46967 9.53033C4.17678 9.23744 4.17678 8.76256 4.46967 8.46967Z' fill='%23f3f1ef'/%3E%3C/svg%3E");
  color: var(--colors-neutral-100);
  outline-width: var(--cta-outline-width);
}

.button.button--scroll:hover {
  background-position: center 0.5rem;
}

.button.button--scroll:focus-visible {
  --cta-outline-color: var(--colors-neutral-50);
  --cta-box-shadow-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.46967 8.46967C4.76256 8.17678 5.23744 8.17678 5.53033 8.46967L12 14.9393L18.4697 8.46967C18.7626 8.17678 19.2374 8.17678 19.5303 8.46967C19.8232 8.76256 19.8232 9.23744 19.5303 9.53033L12.5303 16.5303C12.3897 16.671 12.1989 16.75 12 16.75C11.8011 16.75 11.6103 16.671 11.4697 16.5303L4.46967 9.53033C4.17678 9.23744 4.17678 8.76256 4.46967 8.46967Z' fill='%23fffbf8'/%3E%3C/svg%3E");
  background-position: center 0.125rem;
  color: var(--colors-neutral-50);
}

@media (min-width: 1280px) {
  .button.button--scroll {
    display: block;
  }
}



/* ---------- #1669907 ---------- */

.hero {
  background-color: transparent;
}

@media (min-width: 640px) {
  .hero h1,
.hero hgroup {
    grid-column: 1/span 8;
  }
}



/* ---------- intro ---------- */

.direct-action {
  padding-block: var(--grid-section-padding-block);
}



/* ---------- hgroup ---------- */

main hgroup :first-child {
  color: var(--colors-body-brand);
  font-size: var(--body-large);
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  /* 25.2px */
  margin: 0;
}

main hgroup :nth-child(2) {
  color: var(--colors-heading-primary);
  font-size: var(--heading-3);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 100%;
  margin: 0;
  /* max-width: unset; */
}



/* ---------- poll ---------- */

#poll > section {
  margin-block: unset;
}

#poll > section[hidden] {
  display: none;
}

#poll > section > .container {
  padding: unset;
}

#poll > section > .container > .row > div {
  align-items: flex-end;
  display: flex;
}

#poll > #poll-form > .container > .row > div {
  align-items: flex-start;
}

@media (min-width: 640px) {
  #poll > section > .container > .row > div {
    --grid-columns: 12;
  }

  #poll > section > .container > .row > div.displaymode-half {
    --grid-columns: 12;
  }
}
@media (min-width: 1024px) {
  #poll > section > .container > .row > div.displaymode-half {
    --grid-columns: 6;
  }
}
@media (min-width: 1280px) {
  #poll > section > p {
    max-width: calc(var(--grid-column-width) * 8 + var(--grid-column-gap) * 7);
  }
}
#poll ul {
  list-style: none;
  padding: unset;
}

#poll #graph-preview,
#poll #graph-results {
  --bars-max-width: 7rem;
  --bars-line-width: .1875rem;
  aspect-ratio: 16/9;
  contain: layout;
  display: flex;
  flex-direction: row;
  height: auto;
  justify-content: center;
  list-style: none;
  margin-top: var(--spacing-130);
  margin-inline: auto;
  max-height: 22.5rem;
  padding: unset;
  width: 100%;
}

#poll #graph-preview::before,
#poll #graph-preview li:nth-child(2)::before,
#poll #graph-preview li:nth-child(2)::after,
#poll #graph-results::before,
#poll #graph-results li:nth-child(1)::after {
  content: "";
  left: 0;
  position: absolute;
  top: calc(var(--spacing-90) * -1);
  z-index: 1;
}

#poll #graph-preview::before,
#poll #graph-preview li:nth-child(2)::before,
#poll #graph-preview li:nth-child(2)::after,
#poll #graph-results li:nth-child(1)::after {
  height: calc(38% + var(--spacing-90));
}

#poll #graph-preview::before {
  border-left: var(--bars-line-width) solid var(--colors-neutral-800);
  border-bottom: var(--bars-line-width) solid var(--colors-neutral-800);
  width: max(calc(100% / 5), calc((100% - 5 * var(--bars-max-width)) / 2 + var(--bars-max-width)));
}

#poll #graph-results::before {
  width: var(--bars-line-width);
  box-sizing: border-box;
  height: calc(100% + var(--spacing-90));
  left: max(calc(100% / 5 / 2), calc((100% - 5 * var(--bars-max-width)) / 2 + var(--bars-max-width) / 2));
  z-index: -1;
  background-color: var(--colors-neutral-800);
  transform: translateX(-50%);
}

#poll #graph-preview li:nth-child(2)::before {
  border-bottom: var(--bars-line-width) solid var(--colors-neutral-50);
  width: 50%;
}

#poll #graph-preview li:nth-child(2)::after,
#poll #graph-results li:nth-child(1)::after {
  border: calc(var(--bars-line-width) * 2) solid var(--colors-neutral-50);
  border-radius: 50%;
  background-color: var(--colors-neutral-50);
  height: var(--bars-line-width);
  left: 50%;
  width: var(--bars-line-width);
  transform: translateX(-50%);
}

#poll #graph-preview li:nth-child(2)::after {
  top: calc(38% - var(--bars-line-width) * 2);
}

#poll #graph-results li:nth-child(1)::after {
  top: calc(100% - var(--bar-height) + .38 * var(--bar-height));
}

#poll #graph-results li:nth-child(1)::before {
  content: "";
  left: 50%;
  position: absolute;
  top: calc(100% - var(--bar-height));
  z-index: 1;
  border-right: var(--bars-line-width) solid var(--colors-neutral-50);
  height: calc(.38 * var(--bar-height));
  transform: translateX(-50%);
}

#poll #graph-preview li,
#poll #graph-results li {
  /* flex: 0 1 var(--bars-max-width); */
  height: 100%;
  max-height: 22.5rem;
  max-width: var(--bars-max-width);
  position: relative;
  width: 100%;
}

#poll #graph-preview li:nth-child(1) {
  --color: rgba(54, 82, 197, .3);
}

#poll #graph-preview li:nth-child(2),
#poll #graph-results li:nth-child(1),
#poll #graph-legend li:nth-child(1) {
  --color: rgba(54, 82, 197, 1);
}

#poll #graph-results li:nth-child(2),
#poll #graph-legend li:nth-child(2) {
  --color: rgba(54, 82, 197, .65);
}

#poll #graph-preview li:nth-child(3) {
  --color: rgba(54, 82, 197, .5);
}

#poll #graph-results li:nth-child(3),
#poll #graph-legend li:nth-child(3) {
  --color: rgba(54, 82, 197, .45);
}

#poll #graph-preview li:nth-child(3) {
  --color: rgba(54, 82, 197, .4);
}

#poll #graph-preview li:nth-child(4),
#poll #graph-results li:nth-child(4) {
  --color: rgba(54, 82, 197, .3);
}

#poll #graph-results li:nth-child(4),
#poll #graph-legend li:nth-child(4) {
  --color: rgba(54, 82, 197, .25);
}

#poll #graph-preview li:nth-child(5),
#poll #graph-results li:nth-child(5),
#poll #graph-legend li:nth-child(5) {
  --color: rgba(54, 82, 197, .2);
}

#poll #graph-results li:nth-child(5) ~ li {
  display: none;
}

#poll #graph-preview li meter,
#poll #graph-results li meter {
  background: rgba(54, 82, 197, 0);
  /* var(--colors-support-01-500) */
  border: 0 none;
  direction: rtl;
  height: 100%;
  inset: 0;
  margin: unset;
  position: absolute;
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform 3s ease-out;
  width: 100%;
  -ms-writing-mode: bt-lr;
  writing-mode: vertical-lr;
}

#poll #graph-preview li meter::-webkit-meter-bar,
#poll #graph-results li meter::-webkit-meter-bar {
  background: rgba(54, 82, 197, 0);
}

#poll #graph-preview li meter::-webkit-meter-inner-element,
#poll #graph-results li meter::-webkit-meter-inner-element {
  grid-template-rows: unset;
}

#poll #graph-preview li meter::-webkit-meter-optimum-value,
#poll #graph-results li meter::-webkit-meter-optimum-value {
  background: var(--color);
}

#poll #graph-preview li meter::-moz-meter-bar,
#poll #graph-results li meter::-moz-meter-bar {
  background: var(--color);
}

#poll #graph-preview li meter,
#poll #graph-results li meter {
  -webkit-animation: none;
  animation: none;
  opacity: 0;
  transform-origin: bottom;
}

#poll #graph-preview li meter.animate-in,
#poll #graph-results li meter.animate-in {
  -webkit-animation: growMeter 0.8s ease-out forwards;
  animation: growMeter 0.8s ease-out forwards;
}

#poll #graph-preview li meter.animate-out,
#poll #graph-results li meter.animate-out {
  -webkit-animation: shrinkMeter 0.6s ease-in forwards;
  animation: shrinkMeter 0.6s ease-in forwards;
}

@-webkit-keyframes growMeter {
  from {
    opacity: 0;
    transform: scaleY(0);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes growMeter {
  from {
    opacity: 0;
    transform: scaleY(0);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@-webkit-keyframes shrinkMeter {
  from {
    opacity: 1;
    transform: scaleY(1);
  }
  to {
    opacity: 0;
    transform: scaleY(0);
  }
}

@keyframes shrinkMeter {
  from {
    opacity: 1;
    transform: scaleY(1);
  }
  to {
    opacity: 0;
    transform: scaleY(0);
  }
}

#poll #graph-preview li output,
#poll #graph-results li output {
  position: absolute;
  bottom: var(--spacing-30);
  left: 50%;
  width: calc(100% - var(--spacing-20));
  text-align: center;
  color: var(--colors-neutral-50);
  font-variant-numeric: lining-nums tabular-nums;
  transform: translateX(-50%);
}

#poll #graph-preview li output {
  font-size: var(--body-xl);
  font-weight: 700;
}

#poll #graph-results li output {
  font-size: 1.5rem;
  font-weight: 700;
}

#poll #graph-results li:nth-child(1) output {
  visibility: var(--output-visibility);
}

#poll #graph-results li:nth-child(2) ~ li output {
  color: var(--colors-support-01-500);
}

#poll #graph-legend {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-15);
}

@media (min-width: 640px) {
  #poll #graph-legend {
    margin-left: calc(var(--grid-column-width) + var(--grid-column-gap));
  }
}
@media (min-width: 1280px) {
  #poll #graph-legend {
    margin-left: unset;
  }
}
#poll #graph-legend li {
  display: flex;
  gap: var(--spacing-10);
}

#poll #graph-legend li::before {
  aspect-ratio: 1;
  background-color: var(--color, var(--colors-neutral-100));
  content: "";
  border-radius: 50%;
  height: var(--spacing-30);
  width: var(--spacing-30);
}

#poll form {
  margin-top: var(--spacing-30);
}

#poll form fieldset {
  border: 0 none;
  margin: 0 0 var(--spacing-50);
  padding: unset;
}

#poll form fieldset legend {
  font-size: var(--heading-5);
  font-weight: 600;
  line-height: 105%;
  letter-spacing: -0.02em;
  width: 100%;
}

#poll form fieldset ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-15);
}

#poll form fieldset ul li {
  min-height: var(--spacing-40);
}

#poll form fieldset input {
  position: absolute;
  height: var(--spacing-40);
  margin-top: calc(var(--spacing-5) * -1);
  width: var(--spacing-40);
  -webkit-appearance: unset;
  -moz-appearance: unset;
  appearance: unset;
  opacity: 0;
}

#poll form fieldset label {
  background-color: transparent;
  display: block;
  font-size: var(--body-large);
  line-height: 140%;
  padding: var(--spacing-5) 0 var(--spacing-5) calc(var(--spacing-40) + var(--spacing-15));
  position: relative;
}

#poll form fieldset input:checked + label {
  --radio-background-color: var(--colors-input-active, #3BA478);
  --radio-border-color: var(--colors-input-active, #3BA478);
  --radio-border-width: .125rem;
}

#poll form fieldset input:focus-visible + label {
  --radio-border-color: var(--colors-brand-primary-500);
  --radio-border-width: .125rem;
  --radio-outline-color: var(--colors-brand-primary-100a);
}

#poll form fieldset input:checked:focus-visible + label {
  --radio-border-color: var(--colors-input-active, #3BA478);
  --radio-outline-color: var(--colors-input-activeoutline, #C4E4D7);
}

#poll form fieldset label::before {
  border-radius: 50%;
  box-sizing: border-box;
  content: "";
  display: block;
  outline-offset: 0;
  position: absolute;
  left: 0;
  top: 0.0625rem;
}

#poll form fieldset label::before {
  background-color: var(--radio-background-color, var(--colors-neutral-50, #FFFBF8));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cg clip-path='url(%23clip0_12190_2929)'%3E%3Cpath d='M2.5 7.5L7.5 12.5L15 2.5' stroke='%23FFFCF9' stroke-width='2'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_12190_2929'%3E%3Crect width='16' height='16' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--spacing-20);
  border: var(--radio-border-width, 0.0625rem) solid var(--radio-border-color, var(--colors-input-default));
  height: var(--spacing-40);
  outline: 0.375rem solid var(--radio-outline-color, transparent);
  width: var(--spacing-40);
}

#poll form fieldset input:checked + label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.6512 3.21967C13.9441 3.51256 13.9441 3.98744 13.6512 4.28033L6.58016 11.3514C6.28727 11.6443 5.81239 11.6443 5.5195 11.3514L2.21967 8.05157C1.92678 7.75867 1.92678 7.2838 2.21967 6.99091C2.51256 6.69801 2.98744 6.69801 3.28033 6.99091L6.04983 9.76041L12.5906 3.21967C12.8835 2.92678 13.3583 2.92678 13.6512 3.21967Z' fill='%23FFFCF9'/%3E%3C/svg%3E");
}

#poll form fieldset textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid var(--colors-input-default);
  border-radius: var(--radius-20);
  color: inherit;
  field-sizing: content;
  font: inherit;
  margin-top: var(--spacing-30);
  max-width: 100%;
  outline: 0.375rem solid transparent;
  outline-offset: 0;
  padding: var(--spacing-25) var(--spacing-30);
  transition: border-color 0.1s ease-out;
  width: 100%;
  min-width: 100%;
  height: auto;
  min-height: 7rem;
}

#poll form fieldset textarea:user-invalid:not(:focus) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg clip-path='url(%23clip0_5626_1314)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1.65385C4.49512 1.65385 1.65385 4.49512 1.65385 8C1.65385 11.5049 4.49512 14.3462 8 14.3462C11.5049 14.3462 14.3462 11.5049 14.3462 8C14.3462 4.49512 11.5049 1.65385 8 1.65385ZM0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8Z' fill='%23DB0512'/%3E%3Cpath d='M8.5 11C8.5 11.2761 8.27614 11.5 8 11.5C7.72386 11.5 7.5 11.2761 7.5 11C7.5 10.7239 7.72386 10.5 8 10.5C8.27614 10.5 8.5 10.7239 8.5 11Z' fill='%23DB0512'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 9.5C7.72386 9.5 7.5 9.2417 7.5 8.92308L7.5 5.07692C7.5 4.7583 7.72386 4.5 8 4.5C8.27614 4.5 8.5 4.7583 8.5 5.07692L8.5 8.92308C8.5 9.2417 8.27614 9.5 8 9.5Z' fill='%23DB0512'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5626_1314'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center left 1.125rem;
  background-size: 1rem;
  border-color: var(--colors-input-error);
  padding-left: var(--spacing-70);
}

#poll #ambition9-explanation {
  display: none;
}

#poll #ambition9-radio:checked ~ #ambition9-explanation {
  display: block;
}

#poll form .error {
  color: var(--colors-body-input-error);
  display: none;
  font-size: var(--body-medium);
  margin-bottom: var(--spacing-50);
}

#poll form:has(input[type=radio]:user-invalid) #ambition-error {
  display: block;
}

#poll form textarea + .error {
  margin-bottom: unset;
}

#poll form textarea:user-invalid + .error {
  display: block;
}

#tinymce #poll section[hidden],
#tinymce #poll dl[hidden] {
  display: block;
}

#tinymce #poll #ambition-list {
  margin-top: var(--spacing-70);
}

#tinymce #poll #graph-results,
#tinymce #poll #graph-legend {
  display: none;
}



/* ---------- Videos ---------- */

section > .container:has(.videosblock) {
  display: block;
  padding: unset;
}

section > .container:has(.videosblock) > .row > .paragraphblock {
  max-width: unset;
}

.videosblock {
  --colors-body-brand: #81440A;
  /* fix contrast */
  --video-column-gap: max(var(--spacing-30), var(--grid-column-gap));
  --video-play-button-background-color: var(--colors-brand-secondary-500);
  --video-play-button-box-shadow-width: .125rem;
  --video-play-button-box-shadow-color-focus: var(--colors-neutral-800);
  --video-play-button-box-shadow: inset 0 0 0 var(--video-play-button-box-shadow-width) var(--video-play-button-box-shadow-color,transparent);
  --video-play-button-size: var(--spacing-50);
  --video-play-button-outline-width: .375rem;
  --video-play-button-outline-color-hover: var(--colors-neutral-300a);
  --video-play-button-outline: var(--video-play-button-outline-width) solid var(--video-play-button-outline-color,transparent);
  --video-play-button-icon-size: calc(var(--video-play-button-size)/4);
  display: grid;
  gap: var(--grid-row-gap) var(--video-column-gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-inline: auto;
  max-width: var(--grid-width);
  padding-inline: var(--grid-padding-inline);
}

.videosblock h2 {
  --grid-columns: 8;
  font-size: var(--heading-4, 1.5rem);
  font-weight: 600;
  grid-column: span var(--grid-columns);
  line-height: 100%;
  letter-spacing: -0.02em;
  margin-bottom: unset;
  max-width: calc(var(--grid-column-width)*var(--grid-columns) + var(--video-column-gap)*(var(--grid-columns) - 1));
  width: 100%;
}

.videosblock .right-aligned {
  --grid-columns: 4;
  -moz-column-gap: var(--spacing-10);
  column-gap: var(--spacing-10);
  display: none;
  grid-column: span var(--grid-columns)/-1;
  grid-row: 1;
}

.videosblock:has(li:nth-child(3):is(:last-child)) .right-aligned {
  display: flex;
}

@media (min-width: 1024px) {
  .videosblock h2 {
    --grid-columns: 5;
    grid-column: span var(--grid-columns)/-4;
  }

  .videosblock > .right-aligned {
    --grid-columns: 3;
    grid-column: span var(--grid-columns)/-1;
  }
}

.videosblock ul {
  --grid-columns: 4;
  display: flex;
  gap: var(--video-column-gap);
  grid-column: span 12;
  list-style: none;
  margin-block: unset;
  margin-inline: calc(var(--grid-padding-inline)*-1);
  max-width: unset;
  overflow-x: scroll;
  overflow-y: hidden;
  padding-inline: var(--grid-padding-inline);
  padding-bottom: unset;
  position: relative;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--grid-padding-inline);
  scrollbar-width: none;
}

@media (min-width: 1024px) {
  .videosblock ul {
    --grid-columns: 12;
    grid-column: span var(--grid-columns)/-1;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    margin-left: 0;
    padding-left: 0;
    scroll-padding-left: 0;
  }
}
@media (min-width: 1280px) {
  .videosblock ul {
    display: flex;
    margin-left: unset;
    padding-left: unset;
    scroll-padding-left: unset;
  }
}
.videosblock ul li {
  --grid-columns: 8;
  flex: 0 0 100%;
  scroll-snap-align: start;
  width: 100%;
}

@media (min-width: 640px) {
  .videosblock ul li {
    flex: 0 0 calc((100vw - var(--grid-padding-inline)*2 - var(--video-column-gap))/2);
    max-width: calc((100% - var(--grid-padding-inline)) / 2);
  }
}

.videosblock ul li > div {
  grid-row-gap: unset;
}

.videosblock ul li hgroup {
  margin-block: var(--spacing-40) var(--spacing-10);
}

.videosblock ul li hgroup p {
  font-size: var(--body-large);
  font-weight: 700;
  color: var(--colors-body-brand);
}

.videosblock ul li h3 {
  font-size: var(--heading-3);
  font-weight: 700;
  line-height: 100%;
  margin-block: var(--spacing-10) var(--spacing-30);
}

.videosblock ul li p {
  margin: unset;
  font-size: var(--body-large);
  letter-spacing: -0.02em;
  line-height: 140%;
}



/* ---------- modal ---------- */

dialog {
  background-color: var(--colors-brand-primary-50);
  border: 1px solid var(--colors-neutral-200);
  box-shadow: var(--shadow-md);
  display: none;
  height: auto;
  margin-block: var(--spacing-50);
  max-width: min(calc(100% - var(--spacing-50)), 864px);
  opacity: 0;
  padding: 0 var(--spacing-25) var(--spacing-40);
  transition: opacity 0.5s ease-out;
  width: 100%;
}

dialog[open] {
  display: block;
  opacity: 1;
}

@media (min-width: 640px) {
  dialog {
    padding: 0 var(--spacing-40) var(--spacing-40);
  }
}
dialog::-webkit-backdrop {
  background-color: rgba(10, 10, 10, 0.5);
  -webkit-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}

dialog::backdrop {
  background-color: rgba(10, 10, 10, 0.5);
  transition: background-color 0.5s ease-out;
}

dialog .button--close {
  aspect-ratio: 1;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 5.46967C5.76256 5.17678 6.23744 5.17678 6.53033 5.46967L18.5303 17.4696C18.8232 17.7625 18.8232 18.2374 18.5303 18.5303C18.2374 18.8232 17.7625 18.8232 17.4696 18.5303L5.46967 6.53033C5.17678 6.23744 5.17678 5.76256 5.46967 5.46967Z' fill='%23002D36'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5303 5.46967C18.8232 5.76256 18.8232 6.23744 18.5303 6.53033L6.5303 18.5304C6.23741 18.8233 5.76253 18.8233 5.46964 18.5304C5.17675 18.2375 5.17675 17.7626 5.46964 17.4697L17.4697 5.46967C17.7626 5.17678 18.2374 5.17678 18.5303 5.46967Z' fill='%23002D36'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--spacing-30);
  border-radius: 0;
  display: block;
  font-size: 0;
  left: auto;
  margin-left: auto;
  min-height: 2.75rem;
  outline: 0.125rem solid transparent;
  outline-offset: -0.125rem;
  padding: 0;
  position: absolute;
  right: calc(var(--spacing-15) * -1 - .125rem);
  top: var(--spacing-10);
  width: auto;
  z-index: 2;
}

@media (min-width: 640px) {
  dialog .button--close {
    right: calc(var(--spacing-30) * -1 - .125rem);
  }
}
dialog .button--close:active,
dialog .button--close:focus,
dialog .button--close:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 5.46967C5.76256 5.17678 6.23744 5.17678 6.53033 5.46967L18.5303 17.4696C18.8232 17.7625 18.8232 18.2374 18.5303 18.5303C18.2374 18.8232 17.7625 18.8232 17.4696 18.5303L5.46967 6.53033C5.17678 6.23744 5.17678 5.76256 5.46967 5.46967Z' fill='%23547277'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5303 5.46967C18.8232 5.76256 18.8232 6.23744 18.5303 6.53033L6.5303 18.5304C6.23741 18.8233 5.76253 18.8233 5.46964 18.5304C5.17675 18.2375 5.17675 17.7626 5.46964 17.4697L17.4697 5.46967C17.7626 5.17678 18.2374 5.17678 18.5303 5.46967Z' fill='%23547277'/%3E%3C/svg%3E");
}

dialog .button--close:focus-visible {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 5.46967C5.76256 5.17678 6.23744 5.17678 6.53033 5.46967L18.5303 17.4696C18.8232 17.7625 18.8232 18.2374 18.5303 18.5303C18.2374 18.8232 17.7625 18.8232 17.4696 18.5303L5.46967 6.53033C5.17678 6.23744 5.17678 5.76256 5.46967 5.46967Z' fill='%23002D36'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5303 5.46967C18.8232 5.76256 18.8232 6.23744 18.5303 6.53033L6.5303 18.5304C6.23741 18.8233 5.76253 18.8233 5.46964 18.5304C5.17675 18.2375 5.17675 17.7626 5.46964 17.4697L17.4697 5.46967C17.7626 5.17678 18.2374 5.17678 18.5303 5.46967Z' fill='%23002D36'/%3E%3C/svg%3E");
  outline-color: var(--colors-neutral-800);
}

dialog .box-header {
  background-color: inherit;
  padding-block: var(--spacing-40);
  padding-right: var(--spacing-50);
  position: sticky;
  top: 0;
  z-index: 1;
}

dialog .box-header > h3,
dialog .box-header > h4 {
  margin: unset;
}

dialog > form :is(p, ul, ol, dl) {
  color: var(--colors-body-primary);
  font-size: var(--body-medium);
  margin: unset;
}



/* ---------- pensioencoach ---------- */

#pensioencoach {
  --delay: .6s;
}

#pensioencoach ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  list-style: none;
  margin: unset;
  padding: unset;
}

#pensioencoach form li {
  align-self: flex-start;
  background-color: var(--colors-brand-primary-100);
  border-radius: var(--radius-20) var(--radius-20) var(--radius-20) 0;
  gap: var(--spacing-10);
  margin-left: calc(var(--spacing-40) + var(--spacing-10));
  padding: var(--spacing-20);
  position: relative;
  width: auto;
}

@media (min-width: 640px) {
  #pensioencoach form li {
    margin-left: calc(var(--spacing-70) + var(--spacing-20));
    max-width: 70%;
    padding: var(--spacing-20) var(--spacing-30);
  }
}

#pensioencoach form li:first-child::before,
#pensioencoach form li[data-answer] + li:not([data-answer])::before {
  align-items: center;
  aspect-ratio: 1;
  background-color: var(--colors-brand-secondary-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M55.2072 29.8199C55.2072 23.4205 50.02 18.2333 43.6207 18.2327L48.4213 13.4321C43.8965 8.90665 36.5595 8.90665 32.0347 13.4321C32.0336 13.4326 32.0326 13.4335 32.0321 13.4347C32.0304 13.4324 32.0285 13.4302 32.0264 13.4283C27.5016 8.90346 20.1646 8.90346 15.6398 13.4283L20.4443 18.2328C14.045 18.2334 8.8584 23.4213 8.8584 29.82H19.1458C15.597 33.3777 15.5995 39.1377 19.1535 42.6923L29.2015 32.6443L28.4373 54.5035C30.8217 54.8508 33.2439 54.8508 35.6283 54.5035L34.8641 32.6455L44.9076 42.689C48.4608 39.1358 48.4641 33.3777 44.9185 29.8199H55.2071H55.2072Z' fill='white'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--spacing-40);
  border-radius: 50%;
  content: "";
  flex: 1 0 var(--spacing-40);
  height: auto;
  justify-content: stretch;
  left: calc((var(--spacing-40) + var(--spacing-10)) * -1);
  margin-bottom: auto;
  position: absolute;
  text-align: center;
  top: var(--spacing-5);
  width: var(--spacing-40);
}

@media (min-width: 640px) {
  #pensioencoach form li:first-child::before,
#pensioencoach form li[data-answer] + li:not([data-answer])::before {
    background-size: var(--spacing-70);
    flex: 1 0 var(--spacing-70);
    left: calc((var(--spacing-70) + var(--spacing-20)) * -1);
    top: 0;
    width: var(--spacing-70);
  }
}

#pensioencoach form li[data-answer] {
  align-self: flex-end;
  background-color: var(--colors-brand-tertiary-01-100);
  border-radius: var(--radius-20) var(--radius-20) 0 var(--radius-20);
  margin-left: auto;
  max-width: 70%;
}

#pensioencoach form li .button-container,
#pensioencoach form li fieldset {
  border: 0 none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-10);
  justify-content: flex-start !important;
  list-style: none;
  margin: unset;
  padding: unset;
}

#pensioencoach form li fieldset {
  display: flex;
  flex-direction: column;
}

#pensioencoach form li p + fieldset {
  margin-top: var(--spacing-10);
}

#pensioencoach form li fieldset legend {
  margin-bottom: var(--spacing-20);
}

#pensioencoach form li fieldset input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#pensioencoach form li p {
  margin: unset;
}

#pensioencoach form li p:not(:first-child) {
  margin-top: var(--spacing-10);
}

#pensioencoach form li p + .button {
  margin-top: var(--spacing-15);
}

#pensioencoach form li .button-container {
  margin-block: var(--spacing-30) var(--spacing-10);
}

#pensioencoach form li .button-container li::before {
  content: none;
}

#pensioencoach form li .button-container li {
  all: unset;
}

#pensioencoach form li .button-container button,
#pensioencoach form li fieldset label {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--colors-brand-primary-50);
  border: 0.125rem solid transparent;
  border-radius: var(--spacing-30);
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  margin-right: auto;
  outline: 0.25rem solid transparent;
  outline-offset: 0;
  overflow: visible;
  padding: calc(var(--spacing-15) - .1875rem) var(--spacing-30);
  text-align: left;
  text-wrap: balance;
  text-wrap: pretty;
  transition: var(--transition-default);
}

#pensioencoach form li .button-container:has(button:active) button:not(:active),
#pensioencoach form li .button-container:has(button:focus) button:not(:focus),
#pensioencoach form li .button-container:has(button:hover) button:not(:hover),
#pensioencoach form li fieldset:has(input:active) input:not(:active),
#pensioencoach form li fieldset:has(input:focus) input:not(:focus),
#pensioencoach form li fieldset:has(label:hover) label:not(:hover) {
  color: var(--colors-body-secondary);
}

#pensioencoach form li .button-container button:active,
#pensioencoach form li .button-container button:focus,
#pensioencoach form li .button-container button:hover,
#pensioencoach form li fieldset label:has(input:active),
#pensioencoach form li fieldset label:has(input:focus),
#pensioencoach form li fieldset label:hover {
  border-color: var(--colors-brand-primary-500);
  outline-color: var(--colors-brand-primary-100a);
}

#pensioencoach form li .button-container button:focus-visible,
#pensioencoach form li fieldset label:has(:focus-visible) {
  border-color: var(--colors-neutral-800);
  outline-color: var(--colors-brand-primary-100a);
}

#pensioencoach form li p {
  margin: unset;
}

@-webkit-keyframes chat-bubble {
  0% {
    opacity: 0;
    transform: translateY(1.5rem) scale(0.98);
    filter: saturate(0.5);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
}

@keyframes chat-bubble {
  0% {
    opacity: 0;
    transform: translateY(1.5rem) scale(0.98);
    filter: saturate(0.5);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  #pensioencoach form li {
    --animation-delay-base: 2s;
    -webkit-animation: chat-bubble var(--animation-speed, 0.4s) ease-out var(--animation-delay, var(--animation-delay-base)) both;
    animation: chat-bubble var(--animation-speed, 0.4s) ease-out var(--animation-delay, var(--animation-delay-base)) both;
    will-change: transform, opacity;
  }

  #pensioencoach form li[data-answer] {
    --animation-delay: calc(var(--animation-delay-base) / 2);
  }

  #pensioencoach form li[data-answer] + li {
    --animation-delay: var(--animation-delay-base);
  }

  #pensioencoach form li[data-answer] + li + li:not([data-answer]) {
    --animation-delay: calc(var(--animation-delay-base) * 1.5);
  }

  #pensioencoach form li:first-child {
    --animation-delay: calc(var(--animation-delay-base) / 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  #pensioencoach form li {
    --animation-speed: 0s;
  }
}

#pensioencoach form li:first-child,
#pensioencoach form li:has([name="0"]) {
  display: list-item;
}

#pensioencoach form li:has(:valid) ~ li,
#pensioencoach form li:has([name="1"]:not([value=e]):checked) ~ [data-answer="4"] ~ li {
  display: list-item;
}

#pensioencoach form li:has(:invalid) ~ li,
#pensioencoach form li:has([name="1"]:not([value=e]):checked) ~ [data-answer="4"] ~ li:has(:invalid) ~ li {
  display: none;
}

#pensioencoach form li:has([name="1"]:not([value=e]):checked) + li ~ li {
  display: none;
}

#pensioencoach form li:has(:valid) ~ li[data-result],
#pensioencoach form li:has([name="1"]:not([value=e]):checked) ~ [data-answer="4"] ~ li[data-result] {
  display: none;
}

#pensioencoach form li:has(input[name="1"][value=a]:checked) ~ li:has(input[name="5"][value="1"]:checked) ~ li[data-result=a1],
#pensioencoach form li:has(input[name="1"][value=a]:checked) ~ li:has(input[name="5"][value="2"]:checked) ~ li[data-result=a2],
#pensioencoach form li:has(input[name="1"][value=a]:checked) ~ li:has(input[name="5"][value="3"]:checked) ~ li[data-result=a3],
#pensioencoach form li:has(input[name="1"][value=a]:checked) ~ li:has(input[name="5"][value="4"]:checked) ~ li[data-result=a4],
#pensioencoach form li:has(input[name="1"][value=b]:checked) ~ li:has(input[name="5"][value="1"]:checked) ~ li[data-result=b1],
#pensioencoach form li:has(input[name="1"][value=b]:checked) ~ li:has(input[name="5"][value="2"]:checked) ~ li[data-result=b2],
#pensioencoach form li:has(input[name="1"][value=b]:checked) ~ li:has(input[name="5"][value="3"]:checked) ~ li[data-result=b3],
#pensioencoach form li:has(input[name="1"][value=b]:checked) ~ li:has(input[name="5"][value="4"]:checked) ~ li[data-result=b4],
#pensioencoach form li:has(input[name="1"][value=c]:checked) ~ li:has(input[name="5"][value="1"]:checked) ~ li[data-result=c1],
#pensioencoach form li:has(input[name="1"][value=c]:checked) ~ li:has(input[name="5"][value="2"]:checked) ~ li[data-result=c2],
#pensioencoach form li:has(input[name="1"][value=c]:checked) ~ li:has(input[name="5"][value="3"]:checked) ~ li[data-result=c3],
#pensioencoach form li:has(input[name="1"][value=c]:checked) ~ li:has(input[name="5"][value="4"]:checked) ~ li[data-result=c4],
#pensioencoach form li:has(input[name="1"][value=d]:checked) ~ li:has(input[name="5"][value="1"]:checked) ~ li[data-result=d1],
#pensioencoach form li:has(input[name="1"][value=d]:checked) ~ li:has(input[name="5"][value="2"]:checked) ~ li[data-result=d2],
#pensioencoach form li:has(input[name="1"][value=d]:checked) ~ li:has(input[name="5"][value="3"]:checked) ~ li[data-result=d3],
#pensioencoach form li:has(input[name="1"][value=d]:checked) ~ li:has(input[name="5"][value="4"]:checked) ~ li[data-result=d4] {
  display: list-item;
}

#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[name="5"]:checked) ~ li[data-result=e] {
  display: list-item;
}

#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=a]:checked) ~ li:has(input[value=a]:checked) ~ li[data-result=e],
#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=b]:checked) ~ li:has(input[value=b]:checked) ~ li[data-result=e],
#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=c]:checked) ~ li:has(input[value=c]:checked) ~ li[data-result=e],
#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=d]:checked) ~ li:has(input[value=d]:checked) ~ li[data-result=e] {
  display: none;
}

#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=a]:checked) ~ li:has(input[value=a]:checked) ~ li:has(input[name="5"][value="1"]:checked) ~ li[data-result=a1],
#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=a]:checked) ~ li:has(input[value=a]:checked) ~ li:has(input[name="5"][value="2"]:checked) ~ li[data-result=a2],
#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=a]:checked) ~ li:has(input[value=a]:checked) ~ li:has(input[name="5"][value="3"]:checked) ~ li[data-result=a3],
#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=a]:checked) ~ li:has(input[value=a]:checked) ~ li:has(input[name="5"][value="4"]:checked) ~ li[data-result=a4],
#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=b]:checked) ~ li:has(input[value=b]:checked) ~ li:has(input[name="5"][value="1"]:checked) ~ li[data-result=b1],
#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=b]:checked) ~ li:has(input[value=b]:checked) ~ li:has(input[name="5"][value="2"]:checked) ~ li[data-result=b2],
#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=b]:checked) ~ li:has(input[value=b]:checked) ~ li:has(input[name="5"][value="3"]:checked) ~ li[data-result=b3],
#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=b]:checked) ~ li:has(input[value=b]:checked) ~ li:has(input[name="5"][value="4"]:checked) ~ li[data-result=b4],
#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=c]:checked) ~ li:has(input[value=c]:checked) ~ li:has(input[name="5"][value="1"]:checked) ~ li[data-result=c1],
#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=c]:checked) ~ li:has(input[value=c]:checked) ~ li:has(input[name="5"][value="2"]:checked) ~ li[data-result=c2],
#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=c]:checked) ~ li:has(input[value=c]:checked) ~ li:has(input[name="5"][value="3"]:checked) ~ li[data-result=c3],
#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=c]:checked) ~ li:has(input[value=c]:checked) ~ li:has(input[name="5"][value="4"]:checked) ~ li[data-result=c4],
#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=d]:checked) ~ li:has(input[value=d]:checked) ~ li:has(input[name="5"][value="1"]:checked) ~ li[data-result=d1],
#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=d]:checked) ~ li:has(input[value=d]:checked) ~ li:has(input[name="5"][value="2"]:checked) ~ li[data-result=d2],
#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=d]:checked) ~ li:has(input[value=d]:checked) ~ li:has(input[name="5"][value="3"]:checked) ~ li[data-result=d3],
#pensioencoach form li:has(input[name="1"][value=e]:checked) ~ li:has(input[value=d]:checked) ~ li:has(input[value=d]:checked) ~ li:has(input[name="5"][value="4"]:checked) ~ li[data-result=d4] {
  display: list-item;
}

@media (min-width: 1024px) {
  .paragraphblock:has(#pensioencoach-image) {
    --grid-columns: 7;
    grid-column-end: -1;
  }
}

#pensioencoach-image {
  background: linear-gradient(180deg, rgba(205, 214, 216, 0.7) 38%, var(--colors-brand-tertiary-03-100) 100%);
  margin: unset;
  text-align: center;
}

#pensioencoach-image button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: unset;
  border: unset;
  cursor: pointer;
  display: block;
  margin-inline: auto;
  overflow: visible;
  padding: unset;
  width: 100%;
}

#pensioencoach-image img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: min(100%, 854px);
}



/* ---------- downloadable ---------- */

#form-downloadable {
  --input-background-color: var(--colors-neutral-50);
}

#form-downloadable section {
  display: grid;
  grid-template-areas: "heading" "input" "consent" "privacy" "submit";
  gap: var(--spacing-20);
  margin: unset;
  padding: unset;
}

#form-downloadable:invalid section {
  grid-template-areas: "heading" "error" "input" "consent" "privacy" "submit";
}

@media (min-width: 640px) {
  #form-downloadable section {
    grid-template-columns: 1fr auto;
    grid-template-areas: "heading heading" "input submit" "consent consent" "privacy privacy";
  }

  #form-downloadable:invalid section {
    grid-template-areas: "heading heading" "error error" "input submit" "consent consent" "privacy privacy";
  }
}
#form-downloadable h2 {
  grid-area: heading;
  margin-inline: auto;
  text-align: center;
  max-width: 36ch;
}

#form-downloadable fieldset {
  align-items: baseline;
  border: unset;
  display: flex;
  gap: var(--spacing-15);
  margin: unset;
  padding: unset;
}

#form-downloadable fieldset:nth-of-type(1) {
  grid-area: input;
}

#form-downloadable fieldset:nth-of-type(2) {
  grid-area: consent;
}

#form-downloadable fieldset + p {
  grid-area: privacy;
  margin-block: unset;
  max-width: 90ch;
  padding-left: 2.25rem;
}

#form-downloadable fieldset input[type=email] {
  align-items: center;
  align-self: stretch;
  background-color: var(--input-background-color, transparent);
  border: 0.0625rem solid var(--colors-input-default);
  border-radius: var(--radius-full);
  color: var(--colors-body-input-filled);
  display: flex;
  font-family: inherit;
  height: var(--spacing-70);
  justify-content: space-between;
  outline: 0.375rem solid transparent;
  padding-inline: var(--spacing-30);
  text-align: left;
  width: 100%;
  font-family: inherit;
  font-size: var(--cta-default, 1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 105%;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

#form-downloadable fieldset input[type=email]:hover {
  border-color: var(--colors-input-hover);
}

#form-downloadable fieldset input[type=email]:focus,
#form-downloadable fieldset input[type=email]:focus-visible {
  border: 0.125rem solid #fcbd31;
  outline-color: lch(80.36% 82.85 77.93/19%);
}

#form-downloadable fieldset input[type=email]:user-invalid:not(:focus) {
  border-color: var(--colors-input-error);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg clip-path='url(%23clip0_5626_1314)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1.65385C4.49512 1.65385 1.65385 4.49512 1.65385 8C1.65385 11.5049 4.49512 14.3462 8 14.3462C11.5049 14.3462 14.3462 11.5049 14.3462 8C14.3462 4.49512 11.5049 1.65385 8 1.65385ZM0.5 8C0.5 3.85786 3.85786 0.5 8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.1421 12.1421 15.5 8 15.5C3.85786 15.5 0.5 12.1421 0.5 8Z' fill='%23DB0512'/%3E%3Cpath d='M8.5 11C8.5 11.2761 8.27614 11.5 8 11.5C7.72386 11.5 7.5 11.2761 7.5 11C7.5 10.7239 7.72386 10.5 8 10.5C8.27614 10.5 8.5 10.7239 8.5 11Z' fill='%23DB0512'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 9.5C7.72386 9.5 7.5 9.2417 7.5 8.92308L7.5 5.07692C7.5 4.7583 7.72386 4.5 8 4.5C8.27614 4.5 8.5 4.7583 8.5 5.07692L8.5 8.92308C8.5 9.2417 8.27614 9.5 8 9.5Z' fill='%23DB0512'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5626_1314'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-position: center left 1rem;
  background-repeat: no-repeat;
  padding-inline: var(--spacing-70);
}

#form-downloadable fieldset input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  aspect-ratio: 1/1;
  background-color: var(--colors-neutral-50);
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--spacing-20);
  border: 0.0625rem solid var(--colors-input-default);
  /* box-shadow: inset 0 0 0 0.125rem var(--box-shadow-color, transparent); */
  height: var(--spacing-30);
  outline: 0.375rem solid transparent;
  outline-offset: 0;
  position: relative;
  top: 0.375rem;
  width: var(--spacing-30);
  opacity: 1;
  transition: all 0.1s ease-out;
}

#form-downloadable fieldset input[type=checkbox] {
  border-radius: var(--radius-5);
}

#form-downloadable fieldset input[type=checkbox]:hover {
  border-color: var(--colors-input-hover);
}

#form-downloadable fieldset input[type=checkbox]:focus {
  /* --box-shadow-color: var(--colors-brand-primary-500); */
  border: 0.125rem solid var(--colors-brand-primary-500);
  outline-color: var(--colors-brand-primary-100a);
}

#form-downloadable fieldset input[type=checkbox]:user-invalid:not(:focus) {
  border-color: var(--colors-input-error);
}

#form-downloadable fieldset input[type=checkbox]:checked {
  background-color: var(--colors-input-active);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg clip-path='url(%23clip0_6901_1962)'%3E%3Cpath d='M2 7.5L7 12.5L14.5 2.5' stroke='%23FFFCF9' stroke-width='2'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_6901_1962'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  border-color: transparent;
}

#form-downloadable fieldset input[type=checkbox]:checked:focus {
  /* --box-shadow-color: var(--colors-input-active); */
  border: 0.125rem solid var(--colors-input-active);
  outline-color: var(--colors-input-activeoutline);
}

#form-downloadable fieldset input[type=checkbox] + label {
  color: var(--colors-body-secondary);
}

#form-downloadable button {
  grid-area: submit;
  min-width: min(20rem, 19vw);
}

#form-downloadable .error {
  color: var(--colors-body-input-error);
  display: none;
  font-size: var(--body-medium);
  grid-area: error;
  margin: unset;
}

#form-downloadable:has(:user-invalid) .error {
  display: block;
}

#form-downloadable:has(input[type=email]:user-invalid) .error {
  display: block;
}

#form-downloadable:has(input[type=checkbox]:user-invalid) .error {
  display: block;
}

#form-downloadable .error strong {
  color: inherit;
  font-weight: inherit;
}

#form-downloadable img {
  display: block;
  height: auto;
  margin-inline: auto;
  max-width: min(38%, 15rem);
}

#form-downloadable section[hidden] {
  display: none;
}

#form-downloadable section#downloadable-step-2 {
  display: unset;
}

#form-downloadable section#downloadable-step-2[hidden] {
  display: none;
}

#form-downloadable section#downloadable-step-2 p {
  text-align: center;
  max-width: unset;
}



/* ---------- share ---------- */

main section .container > .row:has(.shareonsocialmediablock) {
  grid-row-gap: var(--spacing-30);
}

.shareonsocialmediablock {
  --colors-whatsapp: #25D366;
  --colors-whatsapp-outline: rgba(37,211,102,.2);
  --colors-whatsapp-box-shadow: #103928;
  --cta-icon-whatsapp: url("data:image/svg+xml,%3Csvg width='360' height='362' viewBox='0 0 360 362' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M307.546 52.5655C273.709 18.685 228.706 0.0171895 180.756 0C81.951 0 1.53846 80.404 1.50408 179.235C1.48689 210.829 9.74646 241.667 25.4319 268.844L0 361.736L95.0236 336.811C121.203 351.096 150.683 358.616 180.679 358.625H180.756C279.544 358.625 359.966 278.212 360 179.381C360.017 131.483 341.392 86.4547 307.546 52.5741V52.5655ZM180.756 328.354H180.696C153.966 328.346 127.744 321.16 104.865 307.589L99.4242 304.358L43.034 319.149L58.0834 264.168L54.5423 258.53C39.6304 234.809 31.749 207.391 31.7662 179.244C31.8006 97.1036 98.6334 30.2707 180.817 30.2707C220.61 30.2879 258.015 45.8015 286.145 73.9665C314.276 102.123 329.755 139.562 329.738 179.364C329.703 261.513 262.871 328.346 180.756 328.346V328.354ZM262.475 216.777C257.997 214.534 235.978 203.704 231.869 202.209C227.761 200.713 224.779 199.966 221.796 204.452C218.814 208.939 210.228 219.029 207.615 222.011C205.002 225.002 202.389 225.372 197.911 223.128C193.434 220.885 179.003 216.158 161.891 200.902C148.578 189.024 139.587 174.362 136.975 169.875C134.362 165.389 136.7 162.965 138.934 160.739C140.945 158.728 143.412 155.505 145.655 152.892C147.899 150.279 148.638 148.406 150.133 145.423C151.629 142.432 150.881 139.82 149.764 137.576C148.646 135.333 139.691 113.287 135.952 104.323C132.316 95.5909 128.621 96.777 125.879 96.6309C123.266 96.5019 120.284 96.4762 117.293 96.4762C114.302 96.4762 109.454 97.5935 105.346 102.08C101.238 106.566 89.6691 117.404 89.6691 139.441C89.6691 161.478 105.716 182.785 107.959 185.776C110.202 188.767 139.544 234.001 184.469 253.408C195.153 258.023 203.498 260.782 210.004 262.845C220.731 266.257 230.494 265.776 238.212 264.624C246.816 263.335 264.71 253.786 268.44 243.326C272.17 232.866 272.17 223.893 271.053 222.028C269.936 220.163 266.945 219.037 262.467 216.794L262.475 216.777Z' fill='white'/%3E%3C/svg%3E");
  --colors-email: var(--colors-brand-tertiary-03-700);
  --colors-email-outline: rgba(39, 66, 84,.2);
  --colors-email-box-shadow: var(--colors-neutral-50);
  --cta-icon-email: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.44531C3 6.34074 3.89543 5.44531 5 5.44531H19C20.1046 5.44531 21 6.34074 21 7.44531V17.4453C21 18.5499 20.1046 19.4453 19 19.4453H5C3.89543 19.4453 3 18.5499 3 17.4453V7.44531Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 7.44531L12 13.4453L3 7.44531' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  text-align: center;
}

.shareonsocialmediablock .social-share ul li a.icon-whatsapp {
  --cta-background-image: var(--cta-icon-whatsapp);
  --cta-background-color: var(--colors-whatsapp);
  --cta-icon-size: 1.5rem;
}

.shareonsocialmediablock .social-share ul li a.icon-whatsapp:active,
.shareonsocialmediablock .social-share ul li a.icon-whatsapp:focus,
.shareonsocialmediablock .social-share ul li a.icon-whatsapp:hover {
  --cta-outline-color: var(--colors-whatsapp-outline);
}

.shareonsocialmediablock .social-share ul li a.icon-whatsapp:focus-visible {
  --cta-outline-color: var(--colors-whatsapp-outline);
  --cta-box-shadow-color: var(--colors-whatsapp-box-shadow);
}

.shareonsocialmediablock .social-share ul li a.icon-email {
  --cta-background-image: var(--cta-icon-email);
  --cta-background-color: var(--colors-email);
  --cta-icon-size: 1.5rem;
}

.shareonsocialmediablock .social-share ul li a.icon-email:active,
.shareonsocialmediablock .social-share ul li a.icon-email:focus,
.shareonsocialmediablock .social-share ul li a.icon-email:hover {
  --cta-outline-color: var(--colors-email-outline);
}

.shareonsocialmediablock .social-share ul li a.icon-email:focus-visible {
  --cta-outline-color: var(--colors-email-outline);
  --cta-box-shadow-color: var(--colors-email-box-shadow);
}

.shareonsocialmediablock a:not(:hover):not(:focus) {
  --colors-social: var(--colors-brand-tertiary-03-700);
  --colors-social-outline: rgba(39, 66, 84,.2);
  --colors-social-box-shadow: var(--colors-neutral-800);
  --colors-facebook: var(--colors-social, #1877f2);
  --colors-facebook-outline: var(--colors-social-outline, rgba(24,119,242,.2));
  --colors-facebook-box-shadow: var(--colors-social-box-shadow, var(--colors-neutral-800));
  --colors-x: var(--colors-social, #2a343e);
  --colors-x-outline: var(--colors-social-outline, rgba(42,52,62,.2));
  --colors-x-box-shadow: var(--colors-social-box-shadow, var(--colors-neutral-50));
  --colors-linkedin: var(--colors-social, #0a66c2);
  --colors-linkedin-outline: var(--colors-social-outline, rgba(10,102,194,.2));
  --colors-linkedin-box-shadow: var(--colors-social-box-shadow, var(--colors-neutral-800));
  --colors-whatsapp: var(--colors-social, #25D366);
  --colors-whatsapp-outline: var(--colors-social-outline, rgba(37,211,102,.2));
  --colors-whatsapp-box-shadow: var(--colors-social-box-shadow, #103928);
  --colors-email: var(--colors-social, var(--colors-brand-tertiary-03-700));
  --colors-email-outline: var(--colors-social-outline, rgba(39, 66, 84,.2));
  --colors-email-box-shadow: var(--colors-social-box-shadow, var(--colors-neutral-50));
  --cta-background-color: var(--colors-social, var(--colors-cta-secondary-default));
  --cta-outline-color-hover: var(--colors-social-outline, var(--colors-cta-secondary-hover));
  --cta-box-shadow-color-focus: var(--colors-social-box-shadow, var(--colors-neutral-50));
}

.shareonsocialmediablock p:empty {
  display: none;
}

.shareonsocialmediablock .social-share ul {
  justify-content: center;
}



/* ---------- popover ---------- */

main button[popovertarget] {
  anchor-name: --popover-dfn;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: unset;
  border: 0 none;
  font: inherit;
  letter-spacing: inherit;
  overflow: visible;
  padding: unset;
}

main dfn,
main [popover] a {
  color: var(--colors-support-01-500);
}

main dfn:active,
main dfn:focus,
main dfn:hover,
main [popover] a:active,
main [popover] a:focus,
main [popover] a:hover {
  color: var(--colors-support-01-800);
}

main dfn:hover:focus-visible,
main [popover] a:focus-visible {
  color: var(--colors-support-01-800);
  outline-color: var(--colors-support-01-800);
}

main dfn {
  font-style: normal;
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
  -webkit-text-decoration-style: dotted;
  text-decoration-style: dotted;
  text-decoration-thickness: 12.5%;
}

main [popover] {
  --popover-button-size: var(--spacing-30);
  --popover-gap: var(--spacing-15);
  --popover-inset: var(--grid-padding-inline);
  --popover-margin-top: var(--spacing-10);
  --popover-padding: var(--spacing-20);
  background: var(--colors-brand-tertiary-01-100);
  border: 0 none;
  border-radius: var(--radius-5);
  box-shadow: var(--shadow-sm);
  color: var(--colors-body-primary);
  display: none;
  font-size: var(--body-medium);
  max-inline-size: min(calc(100vw - var(--grid-padding-inline) * 2), 640px);
  opacity: 0;
  padding: var(--popover-padding) calc(var(--popover-padding) + var(--popover-button-size) + var(--popover-gap)) var(--popover-padding) var(--popover-padding);
  transition: opacity 0.3s ease-out, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}

main [popover]::-webkit-backdrop {
  background-color: transparent;
  -webkit-transition: background-color 0.3s ease-out, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
  transition: background-color 0.3s ease-out, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}

main [popover]::backdrop {
  background-color: transparent;
  transition: background-color 0.3s ease-out, display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}

main [popover]:popover-open {
  display: block;
  opacity: 1;
}

main [popover]:popover-open::-webkit-backdrop {
  background-color: rgba(0, 0, 0, 0.3);
}

main [popover]:popover-open::backdrop {
  background-color: rgba(0, 0, 0, 0.3);
}

@starting-style {
  main [popover]:popover-open {
    opacity: 0;
  }

  main [popover]:popover-open::-webkit-backdrop {
    background-color: transparent;
  }

  main [popover]:popover-open::backdrop {
    background-color: transparent;
  }
}

@supports (anchor-name: --popover-dfn) {
  main [popover] {
    bottom: auto;
    left: auto;
    margin: var(--spacing-10) var(--grid-padding-inline);
    position-anchor: --popover-dfn;
    position-try-fallbacks: flip-block;
    position: absolute;
    right: auto;
    top: anchor(bottom);
  }

  main [popover]::-webkit-backdrop, main [popover]:popover-open::-webkit-backdrop {
    background-color: unset;
  }

  main [popover]::backdrop,
main [popover]:popover-open::backdrop {
    background-color: unset;
  }
}

@media (min-width: 640px) {
  @supports (anchor-name: --popover-dfn) {
    main [popover] {
      left: anchor(left);
      margin-inline: unset;
      position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
    }
  }
}

main [popover] button[popovertargetaction=hide] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 5.46967C5.76256 5.17678 6.23744 5.17678 6.53033 5.46967L18.5303 17.4696C18.8232 17.7625 18.8232 18.2374 18.5303 18.5303C18.2374 18.8232 17.7625 18.8232 17.4696 18.5303L5.46967 6.53033C5.17678 6.23744 5.17678 5.76256 5.46967 5.46967Z' fill='%23002D36'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5304 5.46967C18.8233 5.76256 18.8233 6.23744 18.5304 6.53033L6.53033 18.5304C6.23744 18.8233 5.76256 18.8233 5.46967 18.5304C5.17678 18.2375 5.17678 17.7626 5.46967 17.4697L17.4697 5.46967C17.7626 5.17678 18.2375 5.17678 18.5304 5.46967Z' fill='%23002D36'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--popover-button-size);
  height: var(--popover-button-size);
  position: absolute;
  right: var(--popover-padding);
  top: var(--popover-padding);
  width: var(--popover-button-size);
}

main [popover] button[popovertargetaction=hide]:active,
main [popover] button[popovertargetaction=hide]:focus,
main [popover] button[popovertargetaction=hide]:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 5.46967C5.76256 5.17678 6.23744 5.17678 6.53033 5.46967L18.5303 17.4696C18.8232 17.7625 18.8232 18.2374 18.5303 18.5303C18.2374 18.8232 17.7625 18.8232 17.4696 18.5303L5.46967 6.53033C5.17678 6.23744 5.17678 5.76256 5.46967 5.46967Z' fill='%23547277'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5304 5.46967C18.8233 5.76256 18.8233 6.23744 18.5304 6.53033L6.53033 18.5304C6.23744 18.8233 5.76256 18.8233 5.46967 18.5304C5.17678 18.2375 5.17678 17.7626 5.46967 17.4697L17.4697 5.46967C17.7626 5.17678 18.2375 5.17678 18.5304 5.46967Z' fill='%23547277'/%3E%3C/svg%3E");
}