/* Shared decisions from the supplied Claude Design review, Paula rounds 1 and 2.
   Loaded for the EN/NL/DE redesign, after legacy styles and before demo.css.
   The current demo presentation remains the reviewed source of truth. */

/* Buttons share one primary and a quiet colour-only hover. */
.c-btn::before, .c-btn::after, .c-btn-round::before { display: none !important; }
.c-btn, .c-btn:hover {
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
}
body[data-brand] .c-btn:is(.c-btn-primary--blue, .c-btn-primary--dark-blue, .c-btn-primary--green),
body[data-brand] .c-subscription-form__button .c-btn:not(.c-btn-outline) {
  background: var(--ou-blue-500) !important;
  color: #fff !important;
  border-color: transparent !important;
}
body[data-brand] .c-btn:is(.c-btn-primary--blue, .c-btn-primary--dark-blue, .c-btn-primary--green):hover,
body[data-brand] .c-subscription-form__button .c-btn:not(.c-btn-outline):hover {
  background: var(--ou-blue-600) !important;
  color: #fff !important;
}
body[data-brand] .c-btn span { color: inherit !important; }
body[data-brand] .c-btn:is(.c-btn-outline, .c-btn-outline-primary--dark-blue, .c-btn-primary--white),
body[data-brand] .s-block-team__links .c-btn {
  background: #fff !important;
  border: 1.5px solid rgba(21,35,97,.22) !important;
  color: var(--ou-navy) !important;
}
body[data-brand] .c-btn:is(.c-btn-outline, .c-btn-outline-primary--dark-blue, .c-btn-primary--white):hover,
body[data-brand] .s-block-team__links .c-btn:hover {
  background: #F3F6FA !important;
  border-color: var(--ou-navy) !important;
  color: var(--ou-navy) !important;
}
body[data-brand] :is(.u-bg-primary-dark-blue, .u-bg-secondary-dark-blue, .s-block-cta, .s-steps-numerated, .s-embed-video)
  .c-btn:is(.c-btn-outline, .c-btn-primary--white) {
  background: transparent !important;
  border-color: rgba(255,255,255,.4) !important;
  color: #fff !important;
}
body[data-brand] :is(.u-bg-primary-dark-blue, .u-bg-secondary-dark-blue, .s-block-cta, .s-steps-numerated, .s-embed-video)
  .c-btn:is(.c-btn-outline, .c-btn-primary--white):hover {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.7) !important;
  color: #fff !important;
}
/* Hero dark variants now sit on mint, including their secondary controls. */
body[data-brand] :is(.b-hero-image-cta, .b-hero-background-image, .o-main-hero, .s-single-webinar, .s-webinar-hero-banner)
  .c-btn:is(.c-btn-outline, .c-btn-primary--white) {
  background: #fff !important;
  border-color: rgba(21,35,97,.22) !important;
  color: var(--ou-navy) !important;
}
body[data-brand] :is(.b-hero-image-cta, .b-hero-background-image, .o-main-hero, .s-single-webinar, .s-webinar-hero-banner)
  .c-btn:is(.c-btn-outline, .c-btn-primary--white):hover {
  background: #F3F6FA !important;
  border-color: var(--ou-navy) !important;
}

/* The original demo button keeps its approved treatment. */
html[data-cta="blue"] body[data-brand] :is(.nav, main, .footer) .btn:not(.demo .btn) {
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
}

/* Arrow links use the reviewed primary blue. Breadcrumbs are navy. */
.c-btn-link-primary--blue,
.b-cards-cta__slider__card-link.u-color-primary-blue,
.b-slider-client-stories__card-link.u-color-primary-blue,
.s-block-reviews__stats--link,
a.u-color-primary-blue { color: var(--ou-blue-500) !important; }
.c-btn-link-primary--blue:hover,
a.u-color-primary-blue:hover { color: var(--ou-navy) !important; }
.c-intro__caption, .s-calendly__text-suptitle span, .o-main-hero__caption {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.c-breadcrumbs, .c-breadcrumbs a, .c-breadcrumbs span, .c-breadcrumbs .breadcrumb_last {
  color: var(--ou-navy) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}
.c-breadcrumbs a { text-decoration: none !important; transition: color .15s ease; }
.c-breadcrumbs a:hover {
  color: var(--ou-blue-500) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.c-breadcrumbs a::before { display: none !important; }
.c-breadcrumbs .c-breadcrumb-separator { margin: 0 5px !important; display: inline-block; }
.b-post-hero .c-breadcrumbs span.c-breadcrumb-separator:nth-last-child(2) { display: none !important; }
.c-review-link__text { margin: 0 10px 0 6px !important; }
.nav-lang__globe { display: none !important; }

/* Hero product navigation: compact green icons and plain labels. */
.b-hero-image-cta__products { flex-wrap: wrap; gap: 12px 22px !important; padding: 6px 0 !important; border: 0 !important; }
.b-hero-image-cta .b-hero-image-cta__products-link {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  width: auto; max-width: 100%; white-space: nowrap; font-size: 14px; line-height: 24px;
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
  color: var(--ou-navy) !important; font-weight: 600 !important;
}
.b-hero-image-cta__products-link .c-icon { color: var(--ou-green-500) !important; width: 20px; height: 20px; flex: none; margin-right: 0 !important; }
.b-hero-image-cta__products-link span { white-space: nowrap; }
.b-hero-image-cta .b-hero-image-cta__products-link:hover {
  color: var(--ou-blue-500) !important; text-decoration: underline; text-underline-offset: 4px;
}

/* The page guide's mint hero dissolves into the white trust strip. */
body[data-brand] :is(.b-hero-image-cta, .b-post-hero, .s-hero-simple,
  .b-hero-background-image, .s-hero-background-image, .o-main-hero,
  .s-webinar-hero-banner, .s-hero-banner-curved__banner, .s-single-webinar,
  .s-single-webinar-registration, .s-hero-banner-notice, .s-hero-title-and-people,
  .o-notice-board__banner, .s-hero-with-notices__banner, .s-block-hero) {
  background: radial-gradient(66% 52% at 16% 34%, rgba(0,168,133,.10), rgba(0,168,133,0) 66%),
    linear-gradient(180deg, #F1F8F5 0%, #F4F9F7 40%, #FAFDFB 78%, #FFFFFF 100%) !important;
}
/* Put the initial desktop header over the hero without changing content position
   or the sticky navigation after scrolling. Case-study heroes sit in an article. */
@media (min-width: 1061px) {
  body[data-brand]:not(.home) main > :is(.b-hero-image-cta, .b-post-hero, .s-hero-simple, .b-hero-background-image, .o-main-hero, .s-single-webinar, .s-webinar-hero-banner, .s-block-hero):first-child,
  body[data-brand] main > .s-single-case-study:first-child > .s-hero-with-notices:first-child .s-hero-with-notices__banner,
  body[data-brand] main > .s-hero-banner-curved:first-child > .s-hero-banner-curved__banner {
    margin-top: -98px;
    border-top: 98px solid transparent;
    background-clip: border-box !important;
    background-origin: border-box !important;
  }
  /* The nav used to start transparent over a hero and turn into the white pill on
     the first scroll. QA read that as the pill "missing" on landing, so the pill
     shows from the first pixel on every page (the transparent rule is gone). */
}

/* Navigation and filter bar refinements from the completed Slack review. */
.nav .nav-links > .nav-item > .nav-link { font-weight: 600 !important; }
/* The language toggle is a nav label too, so it carries the same weight. */
.nav .nav-lang { font-weight: 600 !important; }
body[data-brand] .acf-section-team-cards-filters .c-filter__nav {
  background: #fff !important;
  border-top: 0 !important;
}

/* A rating stays together while the reviewer name may move to the next row. */
.b-slider-testimonial__reviewer-right { flex: 0 0 auto; }
.b-slider-testimonial__reviewer-score { white-space: nowrap; }

/* The existing homepage story panel also offers the full case study. */
.lp3-quote .cs-case-study {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lp3-quote .cs-case-study:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* Semantic H2 banners retain their original compact visual size. */
.s-block-cta__title.s-block-cta__title--compact {
  font-size: var(--text-s-large, 26px);
  line-height: var(--leading-40, 40px);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: normal;
}
/* The featured and listing Space titles share their original H6 typography. */
.de-lang .s-live-spaces__item-box .s-live-spaces__item__title-box {
  font-family: var(--font-sans, "Montserrat", sans-serif);
  letter-spacing: normal;
  font-size: var(--text-mid, 18px);
  font-weight: var(--font-weight-bold, 700);
}

/* Remove only the flattened white surround of the managers artwork. The photo
 * and phone UI remain the supplied pixels, with the original outer silhouette. */
body[data-brand="glass"] .b-hero-image-cta img[src$="/2025/08/Header-EN-768x541.jpg"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20768%20541%22%3E%3Crect%20width%3D%22520%22%20height%3D%22383%22%20rx%3D%2228%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M519%204%20L701%2020%20Q731%2022%20728%2053%20L689%20507%20Q687%20536%20656%20534%20L474%20518%20Q442%20516%20446%20484%20L486%2032%20Q489%201%20519%204Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20768%20541%22%3E%3Crect%20width%3D%22520%22%20height%3D%22383%22%20rx%3D%2228%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M519%204%20L701%2020%20Q731%2022%20728%2053%20L689%20507%20Q687%20536%20656%20534%20L474%20518%20Q442%20516%20446%20484%20L486%2032%20Q489%201%20519%204Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Legal pages carry no <main>: their hero is nested in the text column and
   full-bleeds out of it, but a tablet max-width clamp pulled it back to the
   column width, which cut the mint band off mid-page. Let it span the viewport,
   and run it behind the floating nav the way every other hero does. */
body .s-heavy-text-content .s-hero-simple { max-width: none; }
@media (min-width: 1061px) {
  body[data-brand] .s-heavy-text-content_text > .s-hero-simple:first-child {
    margin-top: -98px;
    border-top: 98px solid transparent;
    background-clip: border-box !important;
    background-origin: border-box !important;
  }
  html[data-copy="reworked"] body[data-brand]:not(.is-scrolled):has(.s-heavy-text-content_text > .s-hero-simple:first-child) .nav {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}