@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* One type family and one heading hierarchy across the combined portfolio. */
html.site-typography {
  --font-heading: 'Manrope', sans-serif;
  --font-body: 'Manrope', sans-serif;
}

html.site-typography body,
html.site-typography body :is(div, h1, h2, h3, h4, h5, h6, p, span, a, button, label, li, small, strong, em, b, blockquote, figcaption, time, input, textarea, select) {
  font-family: 'Manrope', sans-serif !important;
}

html.site-typography body h1 {
  font-weight: 400 !important;
  letter-spacing: -.04em !important;
}

html.site-typography body h1.ty-hero:not(.avatar-hero__title):not(.about-hero__title),
html.site-typography body h1[data-r="ct-hero-title"] {
  font-size: clamp(44px, 5.2vw, 76px) !important;
  line-height: 1.07 !important;
  font-weight: 400 !important;
  letter-spacing: -.04em !important;
  text-transform: none !important;
  white-space: normal !important;
}

html.site-typography body h2 {
  font-size: clamp(30px, 3.4vw, 46px) !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}

html.site-typography body h3 {
  font-size: 24px !important;
  line-height: 1.28 !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
}

html.site-typography body h4 {
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
}

html.site-typography body .cs-camptitle {
  font-size: 24px !important;
  line-height: 1.16 !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
}

html.site-typography body .cs-blocktitle {
  font-size: 20px !important;
  line-height: 1.24 !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
}

html.site-typography body .ty-ctitle {
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
}

html.site-typography body .ty-label {
  font-weight: 600 !important;
  letter-spacing: .12em !important;
}

/* Marketing case heroes use dark photography; keep their copy and nav legible. */
html.marketing-case [data-r="cs-herotext"] h1,
html.marketing-case [data-r="cs-herotext"] h1 span,
html.marketing-case [data-r="wh-herotext"] h1,
html.marketing-case [data-r="wh-herotext"] h1 span {
  color: #f7f9ff !important;
}

html.marketing-case [data-r="cs-herotext"] [data-r="herocred"],
html.marketing-case [data-r="wh-herotext"] [data-r="herocred"] {
  color: #dce6f5 !important;
}

html.marketing-case :is(section[style*="background:#111111"], section[style*="background: rgb(17, 17, 17)"]) :is(h2.ty-stitle, h3.cs-blocktitle, h3.cs-camptitle) {
  color: #f7f9ff !important;
}

html.marketing-case :is(section[style*="background:#111111"], section[style*="background: rgb(17, 17, 17)"]) p.cs-body {
  color: #dce6f5 !important;
}

html.marketing-case header > div:first-child a,
html.marketing-case header > div:first-child a div,
html.marketing-case header > div:first-child button,
html.marketing-case header > div:first-child [data-r="cs-role"] {
  color: #f7f9ff !important;
}

html.marketing-case header > div:first-child svg path {
  fill: #f7f9ff !important;
}

html.marketing-case header > div:first-child [data-r="cs-sep-m"] {
  background: #aebfda !important;
}

@media (max-width: 767px) {
  html.site-typography body h1.ty-hero:not(.avatar-hero__title):not(.about-hero__title),
  html.site-typography body h1[data-r="ct-hero-title"] {
    font-size: clamp(38px, 9vw, 50px) !important;
    line-height: 1.1 !important;
  }

  html.site-typography body h2 {
    font-size: clamp(30px, 7vw, 36px) !important;
    line-height: 1.15 !important;
  }

  html.site-typography body .ty-ctitle {
    font-size: 21px !important;
    line-height: 1.28 !important;
  }

  html.site-typography body h3,
  html.site-typography body .cs-camptitle {
    font-size: 21px !important;
  }
}

/* Shared Product / Marketing transition on the home and Work pages. */
.work-switch { position: relative; isolation: isolate; }
.work-switch__thumb {
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: var(--work-thumb-width, 124px);
  border-radius: 999px;
  background: #17345c;
  box-shadow: 0 3px 10px rgba(23, 52, 92, .16);
  transform: translateX(var(--work-thumb-left, 5px));
  pointer-events: none;
}
.work-switch.is-ready .work-switch__thumb {
  transition: transform .82s cubic-bezier(.45, 0, .25, 1), width .82s cubic-bezier(.45, 0, .25, 1);
}
.work-switch button,
.work-switch button[aria-selected="true"] {
  position: relative;
  z-index: 1;
  background: transparent;
  box-shadow: none;
  transition: color .4s ease .18s;
}
.work-switch button[aria-selected="true"] { color: #fff; }
.work-panels { position: relative; }
.work-panels.is-switching { overflow: hidden; }
.work-panels.is-switching [data-work-panel] { pointer-events: none; }
.work-panels.is-switching [data-work-panel].is-leaving {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
}
.work-panels.is-switching [data-work-panel].is-entering {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .work-switch.is-ready .work-switch__thumb,
  .work-switch button { transition: none; }
}

/* Legacy eToro/William Hill page rules must follow the same section hierarchy. */
html.site-typography.marketing-case body h2.ty-stitle {
  font-size:clamp(30px,3.4vw,46px) !important;
  line-height:1.08 !important;
}
@media (max-width:767px) {
  html.site-typography.marketing-case body h2.ty-stitle {
    font-size:clamp(30px,7vw,36px) !important;
    line-height:1.15 !important;
  }
}
html.site-typography :is(a,button,input,select,textarea):focus-visible {
  outline:3px solid #17345c;
  outline-offset:4px;
  box-shadow:0 0 0 7px #fff;
}