/*
  PortalCMS static launch homepage (PublicSite:StaticHomeOnly mode).
  Uses only the self-hosted WTW SDS tokens in wtw-sds-tokens.css (values pinned from
  gs-eas-member-extranet develop@95c958ff5ca72934671bf947a829cf15b7a282de) plus the extra
  ultraviolet/stratosphere values below, transcribed from the same _settings-color.css.
  No remote fonts, images or icons are referenced.
*/

:root {
  --wtw-brand-color-ultraviolet-25: #fbf7fe;
  --wtw-brand-color-ultraviolet-125: #eedbfc;
  --wtw-brand-color-ultraviolet-550: #8e4bbd;
  --wtw-brand-color-stratosphere-100: #dcecff;
  --wtw-sds-color-base-100: #e7eaee;
  --wtw-brand-color-ultraviolet-200: #e0bff8;
  --wtw-brand-color-ultraviolet-700: #611e90;
  --wtw-brand-color-stratosphere-25: #f4f9ff;
  --wtw-brand-color-stratosphere-825: #012452;

  --sh-max-width: 1700px;
  --sh-gutter: clamp(1rem, 3vw, 2.5rem);
  --sh-radius-lg: 1.5rem;
  --sh-radius-md: 0.875rem;
  --sh-focus-dark: var(--wtw-brand-color-ultraviolet-825);
  --sh-focus-light: #ffffff;
  /* EAS HR Extranet landing prototype callout overlay and shadow (gs-eas.css erh-c-hero / erh-c-image-callout). */
  --sh-callout-overlay: linear-gradient(90deg, rgb(82 19 128 / 85%) 0, rgb(53 3 90 / 85%) 50%, rgb(1 32 75 / 85%) 100%);
  --sh-callout-padding: 2.5rem;
  --sh-shadow-100: 0 0.125rem 0.5rem hsl(0deg 0% 0% / 20%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Prototype html: Inter stylistic sets (single-storey a, open digits). */
  font-feature-settings: "ss03", "ss04";
}

.sh-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--wtw-sds-font-family-sans-serif);
  /* Prototype type scale: base step 18px (font-size-md). */
  font-size: var(--wtw-sds-font-size-md);
  line-height: 1.5;
  color: var(--wtw-sds-color-base-825);
  /* Prototype erh-o-background--gradient: stratosphere-100 to ultraviolet-100 over the first viewport, stratosphere-50 below. */
  background-color: var(--wtw-sds-color-stratosphere-50);
  background-image: linear-gradient(to bottom, var(--wtw-brand-color-stratosphere-100) 0, var(--wtw-brand-color-ultraviolet-100) 100vh);
  background-repeat: no-repeat;
}

.sh-body svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
  flex: none;
}

.sh-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Focus: always visible for keyboard users, two-tone so it works on light and dark panels. */
.sh-body a:focus-visible {
  outline: 3px solid var(--sh-focus-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--sh-focus-light);
}

.sh-hero a:focus-visible,
.sh-promo a:focus-visible {
  outline-color: var(--sh-focus-light);
  box-shadow: 0 0 0 6px var(--sh-focus-dark);
}

.sh-skip {
  position: absolute;
  left: var(--sh-gutter);
  top: -100px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: var(--wtw-brand-color-ultraviolet-825);
  color: #ffffff;
  font-weight: var(--wtw-sds-font-weight-semibold);
  text-decoration: none;
}

.sh-skip:focus {
  top: 0.75rem;
}

/* Header */
.sh-header {
  background: #ffffff;
  border-bottom: 1px solid var(--wtw-sds-color-base-200);
}

.sh-header__inner {
  max-width: var(--sh-max-width);
  margin: 0 auto;
  padding: 0.75rem var(--sh-gutter);
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sh-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.sh-brand__logo {
  display: block;
  width: 78px;
  height: auto;
}

.sh-brand__divider {
  width: 1px;
  height: 1.75rem;
  background: var(--wtw-sds-color-base-200);
}

.sh-brand__name {
  font-size: var(--wtw-sds-font-size-md);
  font-weight: var(--wtw-sds-font-weight-semibold);
  color: var(--wtw-sds-color-base-825);
  white-space: nowrap;
}

.sh-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sh-lang__list {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-lang__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  color: var(--wtw-brand-color-ultraviolet-600);
  font-weight: var(--wtw-sds-font-weight-semibold);
  text-decoration: none;
}

.sh-lang__link:hover {
  background: var(--wtw-brand-color-ultraviolet-50);
  color: var(--wtw-brand-color-ultraviolet-750);
}

.sh-lang__link[aria-current="true"] {
  border-color: currentColor;
  background: var(--wtw-brand-color-ultraviolet-50);
  color: var(--wtw-brand-color-ultraviolet-825);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Prototype hr-c-button--header: transparent, 0.75em padding, 0.5rem radius, 3.125em tall, xs medium text. */
.sh-header__login {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 3.125em;
  padding: 0.75em;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background-color: transparent;
  color: var(--wtw-sds-color-base-825);
  font-size: var(--wtw-sds-font-size-xs);
  font-weight: var(--wtw-sds-font-weight-medium);
  line-height: var(--wtw-sds-line-height-min);
  text-decoration: none;
  white-space: nowrap;
  transition: all 100ms ease-in-out;
}

.sh-header__login:hover {
  background-color: var(--wtw-brand-color-ultraviolet-50);
  color: var(--wtw-brand-color-ultraviolet-825);
}

.sh-header__login-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background: var(--wtw-brand-color-ultraviolet-100);
  color: var(--wtw-brand-color-ultraviolet-825);
}

/* Main column */
.sh-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--sh-max-width);
  margin: 0 auto;
  padding: clamp(1rem, 2.5vw, 2rem) var(--sh-gutter) clamp(2rem, 4vw, 3.5rem);
  display: grid;
  align-content: start;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.sh-main:focus {
  outline: none;
}

/* Buttons */
.sh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Prototype wtw-c-button: 0.5em gap, 0.75em 1.25em padding, 1px border, border-radius-regular (0.5rem), medium weight. */
  gap: 0.5em;
  min-height: 44px;
  padding: 0.75em 1.25em;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: var(--wtw-sds-font-size-md);
  font-weight: var(--wtw-sds-font-weight-medium);
  line-height: var(--wtw-sds-line-height-min);
  text-decoration: none;
  text-shadow: none;
  transition: all 100ms ease-in-out;
}

/* Prototype wtw-c-button--brand-secondary: white with brand-550 border/text; hover brand-600 on brand-125. */
.sh-button--secondary {
  border: 1px solid var(--wtw-brand-color-ultraviolet-550);
  background: #ffffff;
  color: var(--wtw-brand-color-ultraviolet-550);
}

.sh-button--secondary:hover {
  border-color: var(--wtw-brand-color-ultraviolet-600);
  background: var(--wtw-brand-color-ultraviolet-125);
  color: var(--wtw-brand-color-ultraviolet-600);
}

.sh-button--secondary:active {
  border-color: var(--wtw-brand-color-ultraviolet-600);
  background: var(--wtw-brand-color-ultraviolet-200);
  color: var(--wtw-brand-color-ultraviolet-825);
}

.sh-button__icon {
  display: inline-flex;
}

.sh-button__icon svg {
  width: 1.5em;
  height: 1.5em;
}

/* 1. Hero */
/* Prototype erh-c-hero: content aligned to the bottom, 20em min height, 2.5rem padding, brand-700 photo fallback. */
.sh-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 20em;
  padding: var(--sh-callout-padding);
  border-radius: var(--sh-radius-lg);
  color: #ffffff;
  background-color: var(--wtw-brand-color-ultraviolet-700);
  isolation: isolate;
}

/* Supplied decorative photography sits under a navy-to-purple overlay so white copy keeps AA contrast. */
.sh-hero__bg,
.sh-promo__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sh-hero__bg {
  object-position: center;
}

.sh-hero::after,
.sh-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.sh-hero::after,
.sh-promo::after {
  border-radius: var(--sh-radius-lg);
  background: var(--sh-callout-overlay);
}

.sh-hero__content {
  position: relative;
  max-width: 90ch;
  text-shadow: 0 0 0.75em rgb(0 0 0 / 50%);
}

/* Prototype erh-c-hero__greeting: Playfair Display medium, font-size-5xl. */
.sh-hero__title {
  margin: 0;
  font-family: var(--wtw-sds-font-family-serif);
  font-size: var(--wtw-sds-font-size-5xl);
  font-weight: var(--wtw-sds-font-weight-medium);
  line-height: var(--wtw-sds-line-height-mid);
}

.sh-hero__subtitle {
  margin: 0.5em 0 2rem;
  max-width: 45ch;
  color: #ffffff;
}

/* 2. Benefits */
/* Prototype erh-c-icon-callout: ultraviolet-50 panel, ultraviolet-825 text, 1.5rem radius, 2.5rem padding, box-shadow-100. */
.sh-benefits {
  padding: var(--sh-callout-padding);
  border-radius: var(--sh-radius-lg);
  background: var(--wtw-brand-color-ultraviolet-50);
  color: var(--wtw-brand-color-ultraviolet-825);
  box-shadow: var(--sh-shadow-100);
}

/* Figma: centred heading, then four evenly distributed rows of [lilac icon tile | purple label]. */
.sh-benefits__title {
  margin: 0 auto clamp(1.75rem, 3.5vw, 3rem);
  /* Wide enough for the longest locale (FR) on one line at >=1440px; wraps naturally below. */
  max-width: 72rem;
  text-align: center;
  font-size: var(--wtw-sds-font-size-2xl);
  /* Prototype erh-c-icon-callout__heading: semibold. */
  font-weight: var(--wtw-sds-font-weight-semibold);
  line-height: var(--wtw-sds-line-height-mid);
  color: var(--wtw-brand-color-ultraviolet-825);
}

.sh-benefits__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem) clamp(1rem, 2.5vw, 2.5rem);
}

/* Icon always on the left and label on the right, at every breakpoint (never stacked). */
.sh-benefit {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.sh-benefit__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 0.5rem;
  background: var(--wtw-brand-color-ultraviolet-200);
  color: currentColor;
}

.sh-benefit__icon svg {
  width: 2rem;
  height: 2rem;
}

.sh-benefit__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: var(--wtw-sds-font-weight-semibold);
  line-height: 1.35;
  color: var(--wtw-brand-color-ultraviolet-825);
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* 3. Promotion */
.sh-promo {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(2rem, 4.5vw, 4.5rem);
  border-radius: var(--sh-radius-lg);
  color: #ffffff;
  background-color: var(--wtw-brand-color-ultraviolet-825);
  isolation: isolate;
}

.sh-promo__bg {
  object-position: center 40%;
}

.sh-promo__art,
.sh-promo__content {
  position: relative;
}

.sh-promo__art img {
  display: block;
  width: 100%;
  max-width: 27.6875rem;
  height: auto;
  aspect-ratio: 443 / 382;
  margin: 0 auto;
}

.sh-promo__content {
  max-width: 38rem;
}

/* Prototype erh-c-image-callout__heading: Playfair Display medium, font-size-3xl. */
.sh-promo__title {
  margin: 0;
  font-family: var(--wtw-sds-font-family-serif);
  font-size: var(--wtw-sds-font-size-3xl);
  font-weight: var(--wtw-sds-font-weight-medium);
  line-height: var(--wtw-sds-line-height-mid);
}

.sh-promo__body {
  margin: 0.5em 0 2rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  color: var(--wtw-brand-color-ultraviolet-50);
}

/* Footer: prototype wtw-c-footer (white, base-200 top border, xs text; logo and version on the left, link list pushed to the end). */
.sh-footer {
  background: #ffffff;
  border-top: 1px solid var(--wtw-sds-color-base-200);
  font-size: var(--wtw-sds-font-size-xs);
}

.sh-footer__inner {
  width: 100%;
  max-width: var(--sh-max-width);
  margin: 0 auto;
  padding: 1rem var(--sh-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.sh-footer__logo {
  display: block;
  width: auto;
  height: 16px;
}

.sh-footer__meta {
  margin: 0 auto 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  color: var(--wtw-sds-color-base-600);
}

.sh-footer__sep {
  color: var(--wtw-sds-color-base-275);
}

.sh-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

.sh-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: var(--wtw-sds-font-weight-medium);
  /* Prototype wtw-c-footer__link: ui-600, hover ui-700. */
  color: var(--wtw-sds-color-ui-600);
  text-decoration: none;
}

.sh-footer__nav a:hover {
  color: var(--wtw-sds-color-ui-700);
  text-decoration: underline;
}

/* Article pages (legal notice, privacy, complaints, cookies): prototype erh-c-notice-hero + table of contents layout. */
.sh-main--article {
  gap: 0;
}

.sh-article {
  min-width: 0;
}

.sh-article__hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 15em;
  padding: var(--sh-callout-padding);
  border-radius: var(--sh-radius-lg) var(--sh-radius-lg) 0 0;
  color: #ffffff;
  background-color: var(--wtw-brand-color-ultraviolet-700);
  isolation: isolate;
}

.sh-article__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

.sh-article__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sh-callout-overlay);
  pointer-events: none;
}

.sh-article__hero-content {
  position: relative;
  max-width: 90ch;
  text-shadow: 0 0 0.75em rgb(0 0 0 / 50%);
}

.sh-article__title {
  margin: 0;
  font-family: var(--wtw-sds-font-family-serif);
  font-size: var(--wtw-sds-font-size-5xl);
  font-weight: var(--wtw-sds-font-weight-medium);
  line-height: var(--wtw-sds-line-height-mid);
}

.sh-article__updated {
  margin: 0.5em 0 0;
}

.sh-article__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 1.5rem;
  align-items: start;
  padding: 1.5rem 1.5rem 4rem;
  border-radius: 0 0 0.5rem 0.5rem;
  background-color: #ffffff;
  box-shadow: var(--sh-shadow-100);
}

.sh-toc {
  position: sticky;
  top: 1em;
  padding: 1em 1.5em;
  font-size: var(--wtw-sds-font-size-sm);
}

.sh-toc__title {
  margin: 0;
  font-size: var(--wtw-sds-font-size-md);
  font-weight: var(--wtw-sds-font-weight-medium);
  line-height: var(--wtw-sds-line-height-mid);
}

.sh-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-toc__list li {
  padding-top: 0.5em;
}

.sh-toc__list .sh-toc__list {
  padding-left: 1em;
}

.sh-toc a,
.sh-article__content a {
  color: var(--wtw-sds-color-ui-600);
}

.sh-toc a {
  text-decoration: none;
}

.sh-toc a:hover,
.sh-article__content a:hover {
  color: var(--wtw-sds-color-ui-700);
  text-decoration: underline;
}

/* One type scale for the whole article body (TOC and content): 16px text; headings as prototype erh-content-management-page (H2 Playfair 3xl medium, H3 sans xl semibold). */
.sh-article__content {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--wtw-sds-font-size-sm);
}

.sh-article__content h2 {
  margin: 1.5em 0 0.5em;
  font-family: var(--wtw-sds-font-family-serif);
  font-size: var(--wtw-sds-font-size-3xl);
  font-weight: var(--wtw-sds-font-weight-medium);
  line-height: var(--wtw-sds-line-height-mid);
  scroll-margin-top: 1rem;
}

.sh-article__content h3 {
  margin: 1.5em 0 0.5em;
  font-size: var(--wtw-sds-font-size-xl);
  font-weight: var(--wtw-sds-font-weight-semibold);
  line-height: var(--wtw-sds-line-height-mid);
  scroll-margin-top: 1rem;
}

.sh-article__content > h2:first-child,
.sh-article__notice + h2 {
  margin-top: 0.25em;
}

.sh-article__content p,
.sh-article__content li {
  line-height: 1.4238;
}

.sh-article__content p {
  margin: 0 0 1em;
}

.sh-article__content ul {
  margin: 0 0 1em;
  padding-left: 1.5em;
}

.sh-article__content li + li {
  margin-top: 0.25em;
}

.sh-article__notice {
  padding: 0.75em 1em;
  border-left: 4px solid var(--wtw-brand-color-ultraviolet-600);
  border-radius: 0.25rem;
  background-color: var(--wtw-brand-color-ultraviolet-50);
  color: var(--wtw-brand-color-ultraviolet-825);
  font-size: var(--wtw-sds-font-size-sm);
}

@media (max-width: 45em) {
  .sh-article__hero {
    padding: 1.5rem;
  }

  .sh-article__body {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.5rem 1.25rem 3rem;
  }

  .sh-toc {
    position: static;
    padding: 0 0 1.25em;
    border-bottom: 1px solid var(--wtw-sds-color-base-200);
  }
}
/* Cookie consent: no-JS banner kept at the bottom of the viewport (sticky, so it rests above the footer
   at the end of the page) and the same form in the cookie page. Both choices share one button style. */
.sh-consent {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #ffffff;
  border-top: 1px solid var(--wtw-sds-color-base-200);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

.sh-consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1.25rem 2rem;
}

.sh-consent__text {
  flex: 1 1 32rem;
}

.sh-consent__title {
  margin: 0 0 0.25em;
  font-size: var(--wtw-sds-font-size-md);
  font-weight: var(--wtw-sds-font-weight-semibold);
  line-height: var(--wtw-sds-line-height-mid);
}

.sh-consent__text p {
  margin: 0;
  font-size: var(--wtw-sds-font-size-sm);
}

.sh-consent__link {
  color: var(--wtw-sds-color-ui-600);
}

.sh-consent__link:hover {
  color: var(--wtw-sds-color-ui-700);
}

.sh-consent__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

.sh-consent__button {
  cursor: pointer;
}

.sh-consent__button:focus-visible {
  outline: 3px solid var(--sh-focus-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--sh-focus-light);
}

.sh-article__content .sh-consent__form {
  margin-top: 1rem;
}

.sh-consent__status {
  font-weight: var(--wtw-sds-font-weight-semibold);
}

@media (max-width: 45em) {
  .sh-consent__inner {
    padding: 1rem var(--sh-gutter);
  }

  .sh-consent__text {
    flex-basis: 100%;
  }
}
/* Responsive: four columns down to 64em (1024px), then two (incl. ~720px), one below 30em; always icon-left. */
@media (max-width: 64em) {
  .sh-benefits__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 45em) {
  .sh-brand {
    gap: 0.625rem;
  }

  .sh-brand__logo {
    width: 62px;
  }

  .sh-header__login {
    padding-left: 0.5rem;
  }

  .sh-header__actions {
    gap: 0.5rem;
  }

  .sh-promo {
    grid-template-columns: minmax(0, 1fr);
  }

  .sh-promo__art img {
    max-width: 18rem;
  }

  .sh-footer__inner {
    padding: 1rem var(--sh-gutter);
  }

  .sh-footer__meta {
    margin-right: 0;
    flex-basis: 100%;
  }
}

@media (max-width: 30em) {
  .sh-benefits__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .sh-button {
    width: 100%;
  }

  .sh-brand__divider {
    display: none;
  }

  .sh-header__inner {
    gap: 0.5rem;
  }

  .sh-brand {
    gap: 0.5rem;
  }

  .sh-brand__name {
    font-size: var(--wtw-sds-font-size-sm);
  }

  .sh-header__actions,
  .sh-lang__list {
    gap: 0.125rem;
  }

  .sh-lang__link {
    padding: 0 0.25rem;
  }

  .sh-header__login > span:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }

}

@media (forced-colors: active) {
  .sh-hero,
  .sh-promo,
  .sh-benefits,
  .sh-article__hero,
  .sh-article__body,
  .sh-button,
  .sh-consent,
  .sh-header__login-icon,
  .sh-lang__link[aria-current="true"],
  .sh-benefit__icon {
    border: 1px solid CanvasText;
  }

  .sh-hero__bg,
  .sh-promo__bg,
  .sh-article__bg,
  .sh-hero::after,
  .sh-promo::after,
  .sh-article__hero::after {
    display: none;
  }
}