/* ============================================================
   REVIEW-ONLY DEMO: the v7 design system applied to the LIVE
   pages. Loaded after every legacy sheet so it wins the cascade;
   markup and content stay byte-identical, only styling changes.
   Consumes the tokens from design-system.css. Never merge: the
   real rollout re-styles per template with design review.
   ============================================================ */

/* ---------------- 1. Header: the floating white nav bar (legacy header, ES only) ---------------- */
.ou-o-header__wrapper { background: transparent !important; padding: 12px 0; }
.ou-o-header__wrapper > .container > .row {
  background: var(--ou-white);
  border-radius: 22px;
  border: var(--ou-line);
  box-shadow: var(--ou-shadow-1);
  padding: 8px 20px;
}
/* links read navy on the white bar, whatever header variant the page uses */
.ou-o-header .ou-c-main-menu > li > a,
.ou-o-header .ou-c-main-menu__link,
.ou-o-header .ou-c-main-menu > li > span {
  color: var(--ou-navy) !important;
}
.ou-o-header .c-icon { color: var(--ou-navy); }
/* dark-header pages recolor everything white for a navy backdrop (logo via filter,
   links, language switcher, outline CTA). The bar is white on every page now, so
   normalize all variants to the light treatment or they vanish white-on-white. */
.ou-o-header--dark .ou-o-header__logo img,
.ou-o-header--dark.keep-bg-on--mobile .ou-o-header__logo img { filter: none !important; }
.ou-o-header--dark .ou-c-main-menu__link,
.ou-o-header--dark .ou-c-main-menu__item,
.ou-o-header--dark .c-nav-language-switcher { color: var(--ou-navy) !important; }
.ou-o-header--dark .ou-c-main-menu__item--has-submenu .ou-c-main-menu__link:after,
.ou-o-header--dark .c-nav-language-switcher .c-nav-language-switcher__current:after { border-color: var(--ou-navy) !important; }
.ou-o-header .ou-c-main-menu__cta .c-btn-outline {
  border-color: var(--ou-navy) !important;
  color: var(--ou-navy) !important;
}
.ou-o-header .ou-c-main-menu__cta .c-btn-outline:hover {
  background-color: var(--ou-navy) !important;
  color: var(--ou-white) !important;
}

/* ---------------- 2. Buttons: the primary CTA stays the live light blue (decision 2 Sep) ---------------- */
/* text links: the light blue fails contrast on white and on the tints (2.3:1), so text
   links and breadcrumbs use the same-hue dark step from the token sheet; the light blue
   stays reserved for filled buttons */
.c-btn-link-primary--blue, .c-breadcrumbs a,
.s-block-reviews__stats--link, .s-single-space__back-btn { color: var(--ou-blue-a11y) !important; }
.c-btn-link-primary--blue:hover, .c-breadcrumbs a:hover { color: var(--ou-navy) !important; }

/* ---------------- 3. Navy surfaces: one flat navy, three on-navy text roles ---------------- */
.u-bg-primary-dark-blue { background: #152361 !important; }
.u-bg-secondary-dark-blue { background: #152361 !important; }
.u-bg-primary-dark-blue .c-wysiwyg,
.u-bg-secondary-dark-blue .c-wysiwyg,
.u-bg-primary-dark-blue p:not([class]),
.u-bg-secondary-dark-blue p:not([class]) { color: var(--ou-on-navy-body); }

/* ---------------- 4. Cards: see 9e (one glass recipe for every card) ---------------- */

/* ---------------- 5. FAQ accordion: glass cards (9e), green chevron ---------------- */
.c-accordion__btn .c-icon-chevron-down { color: var(--ou-green-600) !important; }

/* ---------------- 6. Typography polish ---------------- */
h1, h2, .c-intro__title { letter-spacing: var(--ls-tight); }
body { color: var(--ou-text); }
/* secondary copy reads slate, not grey-on-grey (the thema card body was 300-weight light grey) */
.c-intro__author-meta, .c-intro__author-date,
.b-post-content__sidebar-section-title { color: var(--ou-text-muted); }
.c-thema-card__description, .c-thema-card__description p { color: var(--ou-text-muted) !important; font-weight: 400 !important; }

/* ---------------- 7. Legacy footer (ES pages) on flat navy with quiet roles ---------------- */
.o-footer { background: #152361 !important; }
.o-footer a { color: var(--ou-on-navy-body); }
.o-footer a:hover { color: var(--ou-on-navy-strong); }
.o-footer .o-footer__social-text,
.o-footer h4, .o-footer .widget-title { color: var(--ou-on-navy-quiet); }
/* The retained social strip and review badge have their own light surfaces. */
.o-footer .o-footer__top :is(.o-footer__social-text, .o-footer__social-link),
.o-footer .c-review-link { color: var(--ou-navy); }
.o-footer .o-footer__top .o-footer__social-link:hover,
.o-footer .c-review-link:hover { color: var(--ou-blue-a11y); }

/* ---------------- 8. Inputs: v7 radii ---------------- */
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  border-radius: var(--ou-radius-sm) !important;
}

/* ================================================================
   9. FRESH LOOK (2 Sep, Paula's review): what carries the homepage's
   feel onto the legacy pages without touching copy or images:
   the glass surface (page mesh + translucent section washes), glass
   cards, the blue CTA glow, green eyebrows, no wave dividers or blob
   decorations, and the demo/CTA sections as the v7 panel and band.
   ================================================================ */

/* 9a. page mesh: white with the faint green whisper in the top-right corner. Painted as the
   body's own scrolling background instead of glass.css's fixed body::before layer: full-page
   screenshot tools rendered that fixed layer's edges as a border on the right and bottom and
   a tint boundary one viewport down (Paula, 4 Sep). Same look on load, nothing fixed. */
body { background: #FFFFFF radial-gradient(52% 44% at 92% -4%, rgba(0,168,133,.08), transparent 60%) no-repeat top / 100% 100vh !important; }
body::before { content: none !important; }

/* 9b. section surfaces: the reference palette (see 12 for the full mapping) */
.u-bg-primary-skin, .s-wave--primary-skin { background: #F7FAF9 !important; }   /* reference tint, no beige */
.u-bg-secondary-skin, .s-wave--secondary-skin { background: transparent !important; }   /* white with the page mesh */
section.u-bg-primary-white, section.u-bg-secondary-white, .s-wave--primary-white { background: transparent !important; }
.b-hero-image-cta, .b-post-hero, .s-hero-simple, .s-hero-background-image { background: #F6FAF8 !important; }   /* the reference hero mint */

/* 9c. no wave dividers, no blob decorations (v7 has neither) */
.s-wave__inner-wrapper { display: none !important; }

/* 9d. eyebrows and headings: one eyebrow (green, 11.5px, tracked uppercase) */
.c-intro__caption, .s-calendly__text-suptitle span, .o-main-hero__caption {
  color: var(--ou-green-500) !important; font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; }
.c-intro__title { text-wrap: balance; }
.b-hero-image-cta__products-link {
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.82)) !important;
  border: 1px solid rgba(21,35,97,.08) !important; border-radius: 999px !important;
  padding: 8px 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); color: var(--ou-navy) !important; }

/* 9e. glass cards: translucent fill, hairline, soft shadow, frosted blur, lift */
.b-cards-cta__slider__card, .c-image-card, .b-slider-testimonial__card, .c-card-review,
.c-team-card, .c-card-team, .thema-card, .c-media-card, .c-card-space,
.b-employee-impact__wrapper, .b-themes-title-desc-link__item, .c-accordion__card {
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.82)) !important;
  border: 1px solid rgba(21,35,97,.08) !important;
  border-radius: 24px !important;
  box-shadow: 0 1px 2px rgba(21,35,97,.04), 0 8px 20px -14px rgba(21,35,97,.2), inset 0 1px 0 rgba(255,255,255,.5) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  transition: transform .28s cubic-bezier(.16,.84,.44,1), box-shadow .28s !important; }
/* the stats card overhangs its section on live (margin-bottom 65px), so a translucent
   fill shows the section edge running through it: this card is solid white */
.b-employee-impact__wrapper { padding: 28px 24px; background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.b-employee-impact__item-title, .b-employee-impact__item-description { color: var(--ou-navy) !important; }
a.b-cards-cta__slider__card:hover, a.thema-card:hover, .c-media-card:hover, .c-team-card:hover, .c-card-team:hover {
  transform: translateY(-4px); box-shadow: 0 26px 52px -30px rgba(6,16,38,.45) !important; }
.b-cards-cta__slider__card img, .b-image-and-highlights__item-image img, .b-hero-image-cta img,
.c-media-card img, .thema-card__img img, .b-post-hero__image img { border-radius: 20px !important; }

/* 9f. primary CTA: the light blue with the v7 glow */
.c-btn-primary--blue { box-shadow: 0 10px 24px -12px rgba(72,180,255,.55); transition: transform .2s, box-shadow .2s, background-color .2s; }
.c-btn-primary--blue:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(72,180,255,.7); }

/* 9g. the demo section as the v7 navy panel (homepage #demo). Blocks with a form are
   rebuilt as the demo component (11); the text-only "internal" blocks keep their legacy
   markup and get the same panel here */
.s-calendly { background: transparent !important; padding: 40px 0 80px !important; }
.s-calendly > .container {
  background: linear-gradient(135deg, var(--ou-navy), var(--ou-navy-2)) !important;
  border: 1px solid rgba(255,255,255,.14); border-radius: 28px;
  padding: 56px 48px !important;
  box-shadow: var(--ou-shadow-2), inset 0 1px 0 rgba(255,255,255,.28); }
@media (max-width: 640px) { .s-calendly > .container { padding: 32px 22px !important; border-radius: 22px; } }
/* legacy calendly blocks use white copy on some pages and dark copy on others: the panel is navy everywhere */
.s-calendly .c-intro__title, .s-calendly .s-calendly__description, .s-calendly .s-calendly__text-content-box,
.s-calendly .c-subscription__list-item, .s-calendly .c-subscription__list-item p,
.s-calendly h2, .s-calendly h3, .s-calendly p, .s-calendly li { color: #fff !important; }
.s-calendly .s-calendly__text-suptitle span { color: rgba(255,255,255,.85) !important; }
.s-calendly .s-calendly__partners-image { background: #fff; border-radius: 50%; }
/* the legacy check bullet (theme svg icon on a blue disc) is drawn in CSS so it matches the demo component's check */
.s-calendly:not(.demo) .c-subscription__list-item::after { background: rgba(255,255,255,.16) !important; }
.s-calendly:not(.demo) .c-subscription__list-item::before { background: none !important; width: 7px !important; height: 12px !important; left: 11px !important; top: 11px !important;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }

/* 9h. CTA bands (newsletter, demo, referral): the reference's closing band, a quiet navy
   panel on the page's own ground (the bright blue gradient read as a second hero and its
   white copy failed contrast on the light end) */
.s-block-cta { background: transparent !important; padding: 24px 0 64px !important; margin-top: 0 !important; }
.s-block-cta > .container {
  position: relative; overflow: hidden; border-radius: 24px;
  padding: clamp(28px,3.2vw,40px) clamp(26px,3vw,44px) !important;
  background: #152361;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: var(--ou-shadow-2); }
.s-block-cta .s-block-cta__title, .s-block-cta h2, .s-block-cta h3, .s-block-cta h5 { color: #fff !important; }
.s-block-cta .s-block-cta__description, .s-block-cta p { color: rgba(255,255,255,.85) !important; }
.s-block-cta .c-btn-primary--dark-blue, .s-block-cta .c-btn-primary--green {
  background: #fff !important; color: #152361 !important; font-weight: 700; box-shadow: none !important; }
.s-block-cta .c-btn-outline { border-color: #fff !important; color: #fff !important; }

/* 9i. decorative blobs and clip-path shapes drawn on legacy sections (v7 has none) */
.b-slider-testimonial::before, .acf-section-slider-testimonial::before,
.b-image-and-highlights::before, .b-cards-cta::before, .s-block-reviews::before,
.b-partners-reviews::before, .b-themes-title-desc-link::before,
.b-post-hero::after, .s-single-space::after, .s-single-webinar::before, .b-slider-client-stories::before, .b-slider-client-stories::after,
.u-ellipsis-primary-white::after, .u-ellipsis-primary-skin::after, .u-ellipsis-primary-skin::before,
.u-ellipsis-primary-dark-blue::after, .u-ellipsis-primary-dark-blue::before, .u-ellipsis-primary-green::after { display: none !important; }
.s-hero-banner-curved__banner, .o-main-hero.o-main-hero--ellipsis { clip-path: none !important; }
/* the impact section's heading reads navy on the tint and white on the navy variant */
.b-employee-impact:not(.u-bg-primary-dark-blue) .c-intro__title, .b-employee-impact:not(.u-bg-primary-dark-blue) .c-intro { color: var(--ou-navy) !important; }
.b-employee-impact.u-bg-primary-dark-blue .c-intro__title, .b-employee-impact.u-bg-primary-dark-blue .c-intro__description { color: #fff !important; }

/* ================================================================
   10. DESIGN DECISIONS for the blocks the v7 system never defined
   (design/launch-preview-designed). Same vocabulary as the homepage:
   glass card, navy panel, blue band, pill chips, green eyebrow, one
   soft shadow. Nothing here touches copy, images or links.
   ================================================================ */

/* 10a. comparison table: wash instead of flat green, two glass cards, "With OpenUp" on navy */
.b-comparison-table.u-bg-secondary-green { background: radial-gradient(70% 90% at 50% 0%, rgba(0,168,133,.14), rgba(72,180,255,.06) 60%, transparent 100%) !important; }
.b-comparison-table .b-comparison-table__info-title, .b-comparison-table .b-comparison-table__info-description,
.b-comparison-table .b-comparison-table__info-description p { color: var(--ou-navy) !important; }
.b-comparison-table.u-bg-primary-dark-blue .b-comparison-table__info-title, .b-comparison-table.u-bg-primary-dark-blue .b-comparison-table__info-description,
.b-comparison-table.u-bg-primary-dark-blue .b-comparison-table__info-description p { color: #fff !important; }
.b-comparison-table__item {
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.86)) !important;
  border: 1px solid rgba(21,35,97,.08) !important; border-radius: 24px !important;
  box-shadow: var(--ou-shadow-1), inset 0 1px 0 rgba(255,255,255,.5) !important; }
.b-comparison-table__item:last-child { background: #152361 !important; border-color: rgba(255,255,255,.16) !important; box-shadow: var(--ou-shadow-2) !important; }
.b-comparison-table.u-bg-primary-dark-blue .b-comparison-table__item:last-child { background: #0E1949 !important; }
.b-comparison-table__item:last-child, .b-comparison-table__item:last-child * { color: #fff !important; }
.b-comparison-table__item:last-child .b-comparison-table__item-feature-status svg { color: #7FE3CF !important; fill: currentColor; }
.b-comparison-table__item:first-child .b-comparison-table__item-feature-status svg { color: var(--ou-slate) !important; }
.b-comparison-table__item-header-title { font-family: var(--ou-font-serif) !important; font-weight: 900 !important; }

/* 10b. tables inside articles: a card with a navy header row, zebra rows, sticky first column */
.entry-content figure.wp-block-table { border: 1px solid rgba(21,35,97,.10) !important; border-radius: 16px !important; overflow: auto; box-shadow: var(--ou-shadow-1); background: #fff; }
.entry-content figure.wp-block-table table { width: 100%; min-width: 560px; border-collapse: separate !important; border-spacing: 0; font-size: 14.5px; line-height: 1.45; margin: 0; }
.entry-content figure.wp-block-table thead th, .entry-content figure.wp-block-table table:not(:has(thead)) tr:first-child th, .entry-content figure.wp-block-table table:not(:has(thead)) tr:first-child td {
  background: #152361 !important; color: #fff !important; font-weight: 700; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; padding: 13px 16px; border: 0 !important; text-align: left; }
.entry-content figure.wp-block-table td, .entry-content figure.wp-block-table th { padding: 12px 16px; border: 0 !important; border-top: 1px solid rgba(21,35,97,.07) !important; vertical-align: top; }
.entry-content figure.wp-block-table tbody tr:nth-child(even) td { background: #F7FAF9; }
.entry-content figure.wp-block-table tbody td:first-child { font-weight: 600; color: var(--ou-navy); }
.entry-content figure.wp-block-table td:first-child, .entry-content figure.wp-block-table th:first-child { position: sticky; left: 0; background: #fff; }
.entry-content figure.wp-block-table tbody tr:nth-child(even) td:first-child { background: #F7FAF9; }

/* 10c. accordion with image: the FAQ glass cards plus a framed image */
.cc_how_will_you_openup_section img { border-radius: 24px !important; box-shadow: var(--ou-shadow-2); }
.cc_how_will_you_openup_section .c-accordion__card { margin-bottom: 12px; }

/* 10d. tabbed block: navy active pill, glass inactive pills, framed media, horizontal scroll on phones */
.s-tabbed-img-desc-link__nav { display: flex; flex-wrap: wrap; gap: 8px; }
.s-tabbed-img-desc-link__btn { background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.82)) !important; border: 1px solid rgba(21,35,97,.10) !important;
  border-radius: 999px !important; color: var(--ou-navy) !important; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); transition: background .2s, color .2s; }
.s-tabbed-img-desc-link__btn.active-tab-btn { background: var(--ou-navy) !important; color: #fff !important; border-color: transparent !important; }
.s-tabbed-img-desc-link__content img { border-radius: 24px !important; box-shadow: var(--ou-shadow-1); }
@media (max-width: 767px) { .s-tabbed-img-desc-link__nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } }

/* 10e. standalone forms: the demo-panel treatment instead of a flat colour block (every colour variant) */
.s-simple-form.s-wave { background: transparent !important; padding: 40px 0 80px !important; }
.s-simple-form.s-wave > .container { background: linear-gradient(135deg, var(--ou-navy), var(--ou-navy-2)) !important; border: 1px solid rgba(255,255,255,.14); border-radius: 28px; padding: 56px 48px !important; box-shadow: var(--ou-shadow-2), inset 0 1px 0 rgba(255,255,255,.28); }
.s-simple-form .c-intro__title, .s-simple-form .c-intro__description, .s-simple-form .c-intro__description p, .s-simple-form label, .s-simple-form legend, .s-simple-form p { color: #fff !important; }
.s-simple-form input:not([type="submit"]):not([type="checkbox"]), .s-simple-form select, .s-simple-form textarea {
  background: #fff !important; border: 1px solid rgba(255,255,255,.25) !important; border-radius: 14px !important; color: var(--ou-navy) !important; }
.s-simple-form input[type="submit"], .s-simple-form button[type="submit"], .s-simple-form .hs-button {
  background: var(--ou-blue-500) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 14px 26px; font-weight: 600; box-shadow: 0 10px 24px -12px rgba(72,180,255,.55); }
@media (max-width: 640px) { .s-simple-form.s-wave > .container { padding: 32px 22px !important; border-radius: 22px; } }

/* 10f. video: one frame for every embed, on a fading tint or flat navy */
.c-embed__container { border-radius: 24px !important; overflow: hidden; box-shadow: var(--ou-shadow-2); border: 1px solid rgba(21,35,97,.08); }
.c-embed__container iframe { border-radius: 24px; }
.s-embed-video .s-embed-video__copy-link { border: 1px solid rgba(255,255,255,.35) !important; border-radius: 999px !important; color: #fff !important; background: transparent !important; }
.s-video .c-cookie-content { background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.82)); border: 1px solid rgba(21,35,97,.08); border-radius: 24px; }

/* 10g. the approximated blocks, tightened: sliders, quotes, article type */
.c-btn-round.c-btn-primary--white { background: rgba(255,255,255,.92) !important; border: 1px solid rgba(21,35,97,.10) !important; box-shadow: var(--ou-shadow-1) !important; color: var(--ou-navy) !important; }
.swiper-pagination-bullet-active { background: var(--ou-blue-500) !important; }
/* the theme paints article blockquotes and callouts beige (#FFF8ED, retired): tint card with a green rule */
.entry-content blockquote { margin: 1.8em 0; padding: 18px 24px !important; border-left: 3px solid var(--ou-green-500) !important; background: #F7FAF9 !important;
  border: 1px solid rgba(21,35,97,.08); border-left-width: 3px; border-left-color: var(--ou-green-500);
  border-radius: 0 16px 16px 0 !important; font-family: var(--ou-font-serif); font-size: 1.15rem; line-height: 1.45; color: var(--ou-navy); }
.entry-content blockquote p { color: var(--ou-navy); }
.entry-content blockquote em { font-style: normal; }
.entry-content h2 { font-size: clamp(1.45rem, 2.1vw, 1.8rem); line-height: 1.2; letter-spacing: -.012em; margin-top: 2em; }
.entry-content h3 { font-size: 1.2rem; line-height: 1.3; margin-top: 1.6em; }
.entry-content > p, .entry-content > ul, .entry-content > ol { font-size: 17px; line-height: 1.65; }
.entry-content li::marker { color: var(--ou-green-500); }
.b-slider-testimonial__reviewer-photo img { border-radius: 999px !important; }

.b-comparison-table::before, .b-comparison-table::after, .b-comparison-table__row::before, .b-comparison-table__row::after,
.b-comparison-table__items::before, .b-comparison-table__items::after, .b-comparison-table__items-container::before, .b-comparison-table__items-container::after { display: none !important; }
.b-comparison-table__row, .b-comparison-table__items, .b-comparison-table__items-container, .b-comparison-table__items-inner, .b-comparison-table > div { background: transparent !important; clip-path: none !important; }

/* ================================================================
   11. DEMO COMPONENT: legacy calendly blocks with a form render as the
   homepage's .demo component (see lib/sections/demo-upgrade.ts). The
   HubSpot form element is kept verbatim; these rules give its fields
   the homepage's look.
   ================================================================ */
.demo.demo--page { padding: 40px 0 80px !important; background: transparent !important; }
.demo.demo--page .demo-info h2 { font-family: var(--ou-font-serif); }
.demo.demo--page .demo-info h2 + .demo-list { margin-top: 18px !important; }   /* blocks without a meta line otherwise butt the list against the title */
.demo-form--legacy form { display: block; }
.demo-form--legacy .c-subscription-form__fieldset { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 14px; padding: 0; border: 0; }
.demo-form--legacy .c-subscription-form__fieldset:has(.md\:w-1\/2) { grid-template-columns: 1fr 1fr; }
.demo-form--legacy .c-subscription-form__field { width: auto !important; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.demo-form--legacy label { font-size: 12.5px; font-weight: 600; color: var(--ou-navy); }
.demo-form--legacy input:not([type="hidden"]), .demo-form--legacy select, .demo-form--legacy textarea {
  width: 100%; background: #fff !important; border: 1px solid rgba(21,35,97,.14) !important; border-radius: 14px !important;
  padding: 12px 14px; font: inherit; font-size: 15px; color: var(--ou-navy) !important; }
.demo-form--legacy input:not([type="hidden"]):focus, .demo-form--legacy select:focus, .demo-form--legacy textarea:focus {
  outline: 2px solid var(--ou-green-500); outline-offset: 1px; border-color: var(--ou-green-500) !important; }
.demo-form--legacy textarea { min-height: 48px; resize: vertical; }
.demo-form--legacy .iti { width: 100%; }
.demo-form--legacy .c-subscription-form__button { display: flex; justify-content: flex-end; margin-top: 8px; }
.demo-form--legacy .c-btn-primary--blue { border-radius: 999px !important; padding: 14px 28px; font-weight: 600; box-shadow: 0 10px 24px -12px rgba(72,180,255,.55); }
.demo-form--legacy .c-subscription-form__error, .demo-form--legacy .error-message, .demo-form--legacy .is-invalid + * { color: #B3261E; font-size: 12.5px; }
.demo-form--legacy .is-invalid, .demo-form--legacy .error { border-color: #B3261E !important; }
@media (max-width: 640px) { .demo-form--legacy .c-subscription-form__fieldset:has(.md\:w-1\/2) { grid-template-columns: 1fr; } }

/* cards-cta: the reference card recipe. Live had no card surface here (image + text on the
   page), so the legacy zero padding put the text on the new hairline; the card gets one 20px
   inset all round, with the tile set inside it. Media: the homepage pattern for app screens,
   the whole image visible inside the green tile with a little air, instead of a fixed crop */
.b-cards-cta .b-cards-cta__slider__card { display: block; padding: 20px !important; }   /* the ES non-clickable cards are inline anchors: block, or the padding notches the tile */
.b-cards-cta .b-cards-cta__slider__card-media { margin-bottom: 18px !important; }
.b-cards-cta .b-cards-cta__slider__card-media { border-radius: 16px !important; padding: 26px 26px 0 !important; background: linear-gradient(135deg, #00A885, #0C8E77) !important; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; box-sizing: border-box; }
.b-cards-cta .b-cards-cta__slider__card-media img, .b-cards-cta .b-cards-cta__slider__card:hover .b-cards-cta__slider__card-media img { scale: 1 !important; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 14px 14px 0 0; }
.b-cards-cta .b-cards-cta__slider__card-media picture { display: contents; }
/* demo component: win over the legacy form styles and the v7 mono logo wall */
.demo.demo--page .demo-form--legacy label, .demo.demo--page .demo-form--legacy .c-subscription-form__field label { color: var(--ou-navy) !important; opacity: 1 !important; font-size: 12.5px !important; font-weight: 600 !important; margin: 0 0 6px !important; }

/* demo component: colour logo badges on white circles, the homepage's badge size. The
   homepage's logo wall is a grid sized for its own mono logos; here it is a plain block */
.demo.demo--page:has(.demo-form--legacy) .demo-logowall { display: block !important; background: none !important; padding: 0 !important; border-radius: 0 !important; }
.demo.demo--page .demo-logos--page { display: flex; flex-wrap: wrap; gap: 12px; }
.demo.demo--page .demo-logos--page .logo-badge { width: 72px; height: 72px; padding: 6px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 18px -12px rgba(0,0,0,.6); }
.demo.demo--page .demo-logos--page .logo-badge { overflow: hidden; }
/* the legacy 200px logo PNGs carry a wide transparent margin, so the mark is enlarged inside the circle (asset fix pending) */
.demo.demo--page .demo-logos--page .logo-badge img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; filter: none; opacity: 1; scale: 1.3; }
.demo.demo--page .demo-trust > p { color: rgba(255,255,255,.75); font-size: 13.5px; margin: 0 0 12px; }
@media (max-width: 640px) { .demo.demo--page .demo-logos--page .logo-badge { width: 56px; height: 56px; } }
/* on phones the homepage drops the white form card and sets its labels white; the legacy form follows */
@media (max-width: 900px) {
  .demo.demo--page .demo-form--legacy label, .demo.demo--page .demo-form--legacy .c-subscription-form__field label { color: #fff !important; }
  .demo-form--legacy .c-subscription-form__error, .demo-form--legacy .error-message { color: #FFD1D1; }
}

/* ================================================================
   12. REFERENCE PALETTE (Paula's v7 employees page): white with the mesh,
   #F6FAF8 heroes, #F7FAF9 tint sections, flat #152361 navy sections,
   green-gradient image tiles. Beige (#FFF8ED) is retired everywhere.
   ================================================================ */
.c-image-card.u-bg-secondary-skin, .c-image-card { background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.84)) !important; }
.b-image-and-highlights.u-bg-primary-skin, .b-slider-testimonial.u-bg-primary-skin { background: #F7FAF9 !important; }
.b-employee-impact.u-bg-primary-green { background: #F7FAF9 !important; }
.b-post-content, .b-post-content.u-bg-secondary-skin, main.u-bg-secondary-skin { background: transparent !important; }
.thema-card.u-bg-secondary-skin, .thema-card { background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.84)) !important; }
.b-faq.u-bg-secondary-skin { background: #F7FAF9 !important; }
.b-post-content .b-faq { background: transparent !important; }   /* inside an article column the tinted box adds nothing */
[class*="u-bg-primary-skin"]:not(.b-hero-image-cta):not(.b-post-hero), [class*="u-bg-secondary-skin"]:not(.c-accordion__card) { background-color: transparent; }
/* 12a. trust strips (partner logos, logo sliders) sit on white between hairlines, as on the reference */
.b-partners-reviews, .b-partners-reviews.u-bg-primary-skin, .b-partners-reviews.u-bg-secondary-skin, .b-slider-media-logo-row {
  background: #fff !important; border-top: var(--ou-line); border-bottom: var(--ou-line); }
/* 12b. every hero variant is the same mint hero with navy copy (dark, background-image,
   archive, spaces, resources, webinar and event heroes included); the shapes are hidden in 9i */
.b-hero-image-cta.u-bg-primary-dark-blue, .b-hero-background-image, .o-main-hero, .s-webinar-hero-banner,
.s-webinar-hero-banner.u-bg-primary-green, .s-hero-banner-curved__banner.u-bg-primary-dark-blue, .s-single-webinar, .s-single-webinar-registration,
.s-hero-banner-notice, .s-hero-banner-notice__banner::after, .s-hero-title-and-people, .o-notice-board__banner, .s-hero-with-notices__banner, .s-block-hero { background: #F6FAF8 !important; clip-path: none !important; }
.s-hero-banner-notice__wrapper :is(h1, h2, p, div), .o-notice-board__wrapper :is(h1, h2, p, div, li), .s-hero-with-notices__title { color: #152361 !important; }
.o-notice-board__wrapper::after, .s-hero-with-notices__wrapper::after { display: none !important; }
.b-hero-image-cta.u-bg-primary-dark-blue :is(h1, h2, h3, p, li, span:not(.c-btn__text), a:not(.c-btn)), .b-hero-image-cta.u-bg-primary-dark-blue .c-intro__title,
.b-hero-background-image :is(h1, h2, h3, p, li), .s-webinar-hero-banner :is(h1, h2, h3, p, li, span, a:not(.c-btn)),
.s-webinar-hero-banner.u-color-primary-white, .o-main-hero :is(h1, h2, h3, p, li, span, a:not(.c-btn), div),
.s-hero-banner-curved__banner :is(h1, h2, h3, p, li, div), .s-single-webinar :is(h1, h2, h3, p, li, span, div, a:not(.c-btn)),
.s-hero-title-and-people :is(h1, h2, h3, p, li) { color: #152361 !important; }
.s-single-webinar div.s-single-webinar__speaker-name { color: #fff !important; }   /* the name tag sits on a dark chip over the photo */
.b-hero-image-cta.u-bg-primary-dark-blue .c-intro__caption, .b-hero-background-image .c-intro__caption, .s-webinar-hero-banner .c-intro__caption { color: var(--ou-green-500) !important; }
.b-hero-image-cta.u-bg-primary-dark-blue .c-btn:is(.c-btn-outline, .c-btn-primary--white), .b-hero-background-image .c-btn:is(.c-btn-outline, .c-btn-primary--white),
.o-main-hero .c-btn-outline, .o-main-hero .c-btn-primary--outline, .s-single-webinar .c-btn-outline, .s-webinar-hero-banner .c-btn-outline, .s-hero-banner-notice .c-btn-outline { color: #152361 !important; border-color: #152361 !important; }
.o-main-hero .c-btn-outline:hover, .o-main-hero .c-btn-primary--outline:hover, .s-single-webinar .c-btn-outline:hover { background: #152361 !important; color: #fff !important; }
.o-main-hero::before, .o-main-hero::after, .o-main-hero--bg-left-skin::before, .o-main-hero--bg-right-skin::after, .o-main-hero__bg, .o-main-hero__shape,
.s-webinar-hero-banner::before, .s-webinar-hero-banner::after, .s-webinar-hero-banner__shape, .b-hero-background-image::after, .b-hero-background-image::before { display: none !important; }
/* the background-image hero: the photo becomes a framed tile with air instead of bleeding to the edge under the headline */
@media (min-width: 992px) {
  .b-hero-background-image__image { left: 52% !important; right: 40px !important; top: 24px !important; bottom: 24px !important; height: auto !important; width: auto !important; border-radius: 24px; overflow: hidden; box-shadow: var(--ou-shadow-2); }
  .b-hero-background-image__image img { width: 100%; height: 100%; object-fit: cover; }
}
/* FAQ search: white field instead of the tinted one */
.c-search-filter, .c-search-filter__input { background: #fff !important; }
.c-search-filter { border: 1px solid rgba(21,35,97,.12) !important; border-radius: 999px !important; box-shadow: 0 6px 18px rgba(21,35,97,.06); }

/* 12c. saturated green, blue and tertiary sections become the reference's flat navy section;
   light green becomes the tint. Heroes and the impact stats are excluded (they are mint) */
.s-block-reviews.u-bg-primary-green, section.u-bg-primary-green:not(.b-employee-impact):not(.s-webinar-hero-banner),
.s-wave--primary-green:not(.s-block-cta):not(.s-simple-form), .s-wave--primary-dark-blue:not(.s-block-cta):not(.s-simple-form),
.s-wave--primary-blue:not(.s-block-cta):not(.s-simple-form), .s-single-space.u-bg-tertiary-dark-blue, .b-slider-client-stories.u-bg-tertiary-green,
.b-podcast-cta.u-bg-primary-blue, .s-testimonials__client .s-testimonials__slide { background: #152361 !important; }
.s-testimonials__client .s-testimonials__slide::before, .s-testimonials__client .s-testimonials__slide::after { display: none !important; }
.s-block-reviews .s-block-reviews__stats--link, .s-block-reviews .s-block-reviews__stats--link.u-color-primary-dark-blue { color: #8FD0FF !important; }
section.u-bg-secondary-green, .u-bg-secondary-green.s-wave { background: #F7FAF9 !important; }
section.u-bg-secondary-green :is(h1, h2, h3, p, li) { color: #152361; }
/* 12d. Spanish home: tab illustration panel */
.s-tabbed-img-desc-link__content-media { background: #F7FAF9 !important; border-radius: 20px; }
/* 12e. fade sliders (quotes): legacy CSS keeps inactive slides at 30% opacity, which stacks ghost quotes */
.swiper-fade .swiper-slide:not(.swiper-slide-active) { opacity: 0 !important; pointer-events: none; }

/* 12f. simple heroes (events/campaign pages) follow the mint hero too */
.s-hero-simple.u-color-primary-white, .s-hero-simple :is(h1, h2, h3, p, li, a:not(.c-btn)) { color: #152361 !important; }
.s-hero-simple .c-btn:not(.c-btn--primary) { color: #152361 !important; border-color: #152361 !important; }
/* 12g. in-article CTA box: navy panel instead of green */
.s-lessons__cta-wrapper, .s-lessons__cta-wrapper.u-bg-secondary-green { background: #152361 !important; border-radius: 20px; }
/* 12h. review cards on the navy reviews section stay white with navy copy */
.s-block-reviews .c-card-review { background: #fff !important; color: #152361 !important; border-radius: 18px; box-shadow: 0 16px 40px rgba(0,0,0,.18); }
.s-block-reviews .c-card-review :is(div, p, span):not([class*="stars"]) { color: #152361 !important; }
.s-lessons__cta, .s-lessons__cta-container { background: transparent !important; }
.s-lessons__cta-wrapper::before, .s-lessons__cta-wrapper::after, .s-lessons__cta-container::before, .s-lessons__cta-container::after, .s-lessons__cta-content-box::before, .s-lessons__cta-content-box::after { display: none !important; }
.s-lessons__cta-wrapper { overflow: hidden; }
/* 12i. course pages: the "explore more courses" grid lives in flexible-content.css, which the
   courses template does not load, so the cards stacked in one column */
.s-related-posts.s-related-courses .related-courses-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.s-related-posts.s-related-courses .c-media-card--column { max-width: 100%; min-height: 100%; }
@media (max-width: 991px) { .s-related-posts.s-related-courses .related-courses-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .s-related-posts.s-related-courses .related-courses-items { grid-template-columns: minmax(0, 1fr); }
  .s-related-posts.s-related-courses :is(.c-media-card, .c-media-card__content, .c-media-card__footer) { min-width: 0; overflow-wrap: anywhere; }
}

/* Preserve the quote panel while giving phone text the normal content gutter. */
@media (max-width: 575px) {
  .s-decorated-text .s-decorated-text__wave-panel { padding: 32px 24px; overflow-wrap: anywhere; }
}

/* Long compound words may break only when they do not fit their text column at all.
   Automatic hyphenation split ordinary words in headings ("blei-ben", "meis-ten")
   whenever a line could be filled a little better, so it is off; a word breaks
   only when it is wider than the line, or at a soft hyphen an editor placed. */
:is(html[lang^="nl"], html[lang^="de"]) :is(h1, h2, h3, h4, h5, h6, .c-wysiwyg, .s-heavy-text-content_text) {
  overflow-wrap: anywhere;
  hyphens: manual;
}

/* The nested legal hero inherits a fixed tablet container width otherwise. */
.s-heavy-text-content .s-hero-simple,
.s-heavy-text-content .s-hero-simple > .container { max-width: 100%; }

/* The homepage inlines its deck CSS. Fit the full fan at the tablet endpoints,
   and stack the impact heading above the stats that caused document overflow. */
@media (min-width: 761px) and (max-width: 900px) {
  .home .pdeck-stack { transform: scale(.72); transform-origin: 50% 0; margin-bottom: -110px; }
  html[data-copy="reworked"] body.home[data-brand="glass"] .lp3-impact__head { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 390px) {
  html[lang^="de"] body.home .hero h1 .hl { white-space: normal; display: inline; }
}
/* The skew adds 15px on either side. Reserve that inside the image width at
   tablet sizes while retaining the existing shadow shape and transform. */
@media (min-width: 768px) and (max-width: 1279px) {
  .o-main-hero .o-main-hero__img.shadow-image::after,
  .b-post-hero .b-post-hero__image::after { left: 15px; right: 15px; width: auto; }
  .s-related-posts .c-slider__nav-button--prev { left: 16px; }
  .s-related-posts .c-slider__nav-button--next { right: 16px; }
}

/* A retained desktop negative margin cancelled the press card's top padding. */
@media (min-width: 992px) {
  .s-calendly .c-subscription-form--press { margin-top: 0; }
}

/* Keep the tablet view switch and translated filters inside their toolbar. */
@media (min-width: 768px) and (max-width: 991px) {
  .s-live-spaces.thema-styled-section .spaces-filter__nav-box { flex-wrap: wrap; gap: 16px; }
}

/* These headings/links sit on the light surfaces retained by their sections. */
.s-hero-with-notices__banner .s-hero-with-notices__interviewer,
.c-thema-card.u-bg-secondary-skin :is(.c-thema-card__title, a:not(.c-btn)) { color: var(--ou-navy) !important; }

/* ES home omits the cards block sheet. Restore its viewport and pagination
   contract without changing the cards or the existing Swiper initialization. */
.es-lang .b-cards-cta__slider { overflow: hidden; }
/* Legacy journey markup lacks the generic Swiper viewport class. */
.s-journey__slider { overflow: hidden; }
.s-journey.s-wave--primary-blue .s-journey__slider { color: #fff; }
@media (max-width: 575px) {
  .s-hero-title-and-people .o-notice-board__img:first-child { left: 0; }
  .s-hero-title-and-people .o-notice-board__img:nth-child(2) { right: 0; }
}
/* The native 304px widget needs a small layout scale in the narrow phone form. */
@media (max-width: 350px) {
  .acf-section-recruitment-form .g-recaptcha { zoom: .9; }
}
.es-lang .b-cards-cta .swiper-wrapper { box-sizing: border-box; }
.es-lang .b-cards-cta .swiper-slide { height: auto; padding: 10px 16px; }
.es-lang .b-cards-cta .swiper-pagination {
  position: static; left: auto; margin: 14px auto 0; transform: none; translate: none;
}
.es-lang .b-cards-cta .swiper-pagination-bullet { width: 8px; height: 8px; border: 0; margin: 0 8px; }
.es-lang .b-cards-cta .swiper-pagination-bullet-active { background-color: #152361; }
@media (max-width: 767px) {
  .es-lang .b-cards-cta .c-slider__nav-button { display: none; }
}
/* The captured 20px negative gutters exceed the tablet's 15px page gutter. */
@media (min-width: 768px) and (max-width: 1024px) {
  .b-slider-testimonial .b-slider-testimonial__slider,
  .es-lang .s-tabbed-img-desc-link__nav { margin-inline: 0; }
}

/* The captured ES blog block has this grid in the original mirror's
   acf-section-post-cards-with-filters-style-inline-css. */
.es-lang .section-post-cards-with-filters__content {
  display: grid; gap: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 48px;
}
.es-lang .section-post-cards-with-filters__content.no-items-to-render { display: block; }
@media (max-width: 991px) {
  .es-lang .section-post-cards-with-filters__content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .es-lang .section-post-cards-with-filters__content { grid-template-columns: minmax(0, 1fr); margin: 24px 0 32px; }
}

/* Native filter buttons keep the captured control's component styling. */
[data-ou-filter-toggle] { appearance: none; border: 0; background: transparent; font: inherit; color: inherit; text-align: inherit; }
.filter .filter-option {
  display: block !important; position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden;
}
.filter .filter-option:focus-visible + label,
:is(.filter-toggle, .js--faq-accordion-card-btn, .js--tab-btn):focus-visible {
  outline: 2px solid #177bbf; outline-offset: 3px;
}

/* HR impact figures use a full navy section before the pale quality-of-care section.
   There is no separate CTA below this card, so it needs no reserved bottom gap. */
:is(.page-id-149962, .page-id-149966, .page-id-149970) .b-employee-impact .b-employee-impact__wrapper { margin-bottom: 0; }

/* Form sections that embed a third-party form (Livestorm iframe) keep their
   light card: the iframe brings its own dark text, unreadable on the navy
   treatment the other simple-form sections get. */
.s-simple-form.s-wave:has(iframe[src*="livestorm"]) > .container { background: #fff !important; border-color: rgba(21,35,97,.12) !important; }
.s-simple-form.s-wave:has(iframe[src*="livestorm"]) :is(.c-intro__title, .c-intro__description, .c-intro__description p, p) { color: #152361 !important; }

/* Links inside a hero intro (release notes: "get in touch") read as links in
   the brand blue, the way the site's hover state shows them, instead of navy
   text with a navy underline that hides among the copy. */
.o-main-hero__description.c-wysiwyg a { color: var(--ou-blue-a11y, #1f8fe0) !important; border-bottom: 0 !important; text-decoration: underline; text-underline-offset: 3px; }
.o-main-hero__description.c-wysiwyg a:hover { color: #152361 !important; }

/* Event hero (AI advice page): the intro copy had a doubled line height and read
   as scattered; body rhythm and a readable measure instead. */
.s-block-hero .c-intro__description.c-wysiwyg, .s-block-hero .c-intro__description.c-wysiwyg p { line-height: 1.6 !important; font-size: 17px !important; max-width: 56ch; }
.s-block-hero .c-intro__description.c-wysiwyg p + p { margin-top: 12px; }
.s-block-hero .c-intro__description.c-wysiwyg br + br { display: none; }

/* Cards on a navy wave section: the copy is white, as the block was designed. */
.s-image-card.s-wave--primary-blue :is(h2, h3, h4, p, li, .c-intro__title, .c-intro__description) { color: #fff !important; }

/* Webinar "Die menschliche Seite der KI-Transformation": Estella's photo is a wide
   shot with the face in the lower half; the square speaker card and the bio card
   zoom in on her instead of on the cactus behind her. Replace the upload in
   WordPress with a portrait crop and this rule can go. */
.s-single-webinar__speaker-card-image img[src*="Webinar-SoSafe_-Die-menschliche-Seite-von-KI-Transformation-300x246"],
.horizontal-card-extended__img img[src*="Webinar-SoSafe_-Die-menschliche-Seite-von-KI-Transformation-768x630"] { object-fit: cover; object-position: 50% 30%; }
/* The landscape source is shorter than the square, rounded image box; let it fill the box (cover) so all four corners stay rounded. */
.horizontal-card-extended__img-box-container:has(img[src*="Webinar-SoSafe_-Die-menschliche-Seite-von-KI-Transformation-768x630"]) :is(.horizontal-card-extended__images-box, .horizontal-card-extended__img-box, .horizontal-card-extended__img) { aspect-ratio: auto !important; height: 100% !important; }
.horizontal-card-extended__img-box-container:has(img[src*="Webinar-SoSafe_-Die-menschliche-Seite-von-KI-Transformation-768x630"]) img { width: 100%; height: 100%; }

/* ---------- Feedback round 2 (Sep 2026) ---------- */

/* FAQ accordion: the whole card row opens the answer, not only the title and
   the chevron. The card's own padding moves onto the button and the content.
   The chevron centres whatever its size (10px theme icon, 24px on some pages).
   The content padding stays below !important so jQuery's slideDown/slideUp can
   animate it with the height instead of popping it in and out. */
.c-accordion__card { padding: 0 !important; }
.c-accordion__btn { padding: 24px 60px 24px 24px !important; cursor: pointer; }
.c-accordion__btn .icon { right: 24px !important; top: 0 !important; bottom: 0 !important; margin-top: auto !important; margin-bottom: auto !important; }
.c-accordion__card .c-accordion__content,
.c-accordion__card .c-accordion__content.c-accordion__content--full { padding: 0 24px 24px; }
.c-accordion__content .c-accordion__content-box { padding-top: 0; }

/* Single Space page: one palette on every breakpoint (the captured mobile
   variant switched to green with unreadable blue text), the rotated speaker
   photo can no longer push the page into horizontal scroll, the selected date
   badge is visibly selected, and the date arrows stay hidden until the slider
   has decided it needs them. */
.s-single-space { overflow-x: clip !important; }
.s-single-space.u-bg-primary-green,
.s-single-space.u-bg-primary-green .s-single-space__content::after { background: #152361 !important; }
/* White back link on the navy variants only: the skin variant stays light and
   keeps its blue link. */
.s-single-space:is(.u-bg-primary-green, .u-bg-tertiary-dark-blue) .s-single-space__back-btn { color: #fff !important; }
.s-single-space:is(.u-bg-primary-green, .u-bg-tertiary-dark-blue) .s-single-space__back-btn span::after { border-color: #fff !important; }
.s-single-space .s-single-space__event-slider-item { background: #fff !important; color: #152361 !important; }
.s-single-space .active-slide-link .s-single-space__event-slider-item,
.s-single-space .active-slide-link .s-single-space__event-slider-item:hover { background: #48b4ff !important; color: #fff !important; }
.s-single-space .s-single-space__media { transform: none !important; }
.s-single-space__event-slider:not(.swiper-initialized) .c-slider__nav-wrapper { opacity: 0; }
.s-single-space__event-slider .c-slider__nav-wrapper { transition: opacity .2s ease; }

/* Webinar overview, "We don't just meet online": muted grey on the skin
   background fell below readable contrast. */
.c-thema-card.u-bg-secondary-skin .c-thema-card__description,
.c-thema-card.u-bg-secondary-skin .c-thema-card__description p { color: #5b6590 !important; }
.c-thema-card.u-bg-secondary-skin .c-thema-card__description a { color: #152361 !important; }

/* Single webinar: "what you'll learn" is a plain bullet list, not a grid of
   cards with a stray marker in the corner. */
.s-single-webinar-registration__full-description ul { display: block !important; grid-template-columns: none !important; list-style: disc !important; padding-left: 1.25em !important; margin: 0 0 24px !important; }
.s-single-webinar-registration__full-description ul li { list-style: disc !important; background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 0 8px !important; font-size: 18px !important; line-height: 1.7 !important; color: #333 !important; font-weight: 400 !important; }
.s-single-webinar-registration__full-description ul li::before { content: none !important; display: none !important; }

/* Slider pagination (quotes slider): bullets sit centred between the arrows
   with real spacing instead of overlapping. The logo row has none (below). */
.c-slider-navigation { display: flex; align-items: center; justify-content: center; gap: 12px; }
.c-slider-navigation .swiper-pagination { display: inline-flex !important; align-items: center; gap: 8px; position: static !important; width: auto !important; margin: 0 !important; transform: none !important; }
.c-slider-navigation .swiper-pagination-bullet { width: 8px !important; height: 8px !important; margin: 0 !important; border: 0 !important; background: #cfd4e6 !important; opacity: 1 !important; }
.c-slider-navigation .swiper-pagination-bullet-active { background: #48b4ff !important; }

/* Resources mega menu: the featured-article card hugs its content instead of
   stretching to the height of the topic columns. */
.nav-mega .nav-mega-aside { align-self: flex-start !important; height: auto !important; }

/* Cards: hover scale eases in and out instead of snapping. Colour changes keep
   easing too, and reduced-motion visitors get no animation. */
.c-team-card, .c-media-card, .thema-card, .c-card-media, .c-card-space, .c-card-team,
.c-card-space-extended, .c-card-webinar, .c-card-space-overlay,
.s-single-webinar__speakers-grid .s-single-webinar__speaker-card > a {
  transition: scale .22s ease, transform .22s ease, box-shadow .22s ease,
    background-color .22s ease, border-color .22s ease, color .22s ease, opacity .22s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  .c-team-card, .c-media-card, .thema-card, .c-card-media, .c-card-space, .c-card-team,
  .c-card-space-extended, .c-card-webinar, .c-card-space-overlay,
  .s-single-webinar__speakers-grid .s-single-webinar__speaker-card > a { transition: none !important; }
}

/* Space cards: the body copy took the large-card size everywhere. */
.c-card-space .c-card-space__data-content,
.c-card-space.c-card-space--large .c-card-space__data-content { font-size: 14px !important; line-height: 22px !important; }

/* Simple-form sections (referral and quiz forms): intro links read on the navy
   card, and blank captured paragraphs leave no gap. */
.s-simple-form .c-intro__description a { color: #48b4ff !important; text-decoration: underline; }
.s-simple-form .c-intro__description p:empty, .s-simple-form .c-intro__description p:has(> br:only-child) { display: none; }

/* Careers hero: the captured page lost the theme rules that placed the two
   illustrations at the sides, so they rendered as two full-width images
   stacked above the title. Illustrations sit low at the left and right edges,
   the title and button in the middle; on phones only the first illustration
   shows, small, above the title. */
.s-hero-title-and-people { padding: 98px 0 0 !important; margin-top: -98px !important; }
.s-hero-title-and-people__banner { position: relative; min-height: 560px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 96px 0 72px; overflow: hidden; }
.s-hero-title-and-people__img { position: absolute; bottom: 72px; width: 17%; max-width: 240px; z-index: 1; pointer-events: none; }
/* The artwork is cropped on its outer side, so it sits flush with the page edge and bleeds off it. */
.s-hero-title-and-people__img:first-child { left: 0; }
.s-hero-title-and-people__img:nth-child(2) { right: 0; }
.s-hero-title-and-people__img img { display: block; width: 100%; height: auto; }
.s-hero-title-and-people__banner > .s-hero-title-and-people__wrapper,
.s-hero-title-and-people__banner > .container { position: relative; z-index: 2; width: 100%; max-width: 760px !important; margin: 0 auto; padding: 0 20px; }
.s-hero-title-and-people__banner > .container > .flex > div { width: 100% !important; max-width: 100% !important; text-align: center; }
.s-hero-title-and-people__container { max-width: 720px; margin: 0 auto; }
.s-hero-title-and-people__btn { margin-top: 24px; }
@media (max-width: 1023px) {
  /* Phones and tablets keep both figures, as the live page does: they sit at
     the edges behind the title, bleeding off the sides where the artwork is cropped. */
  .s-hero-title-and-people__banner { min-height: 0; padding: 72px 0 40px; gap: 16px; }
  .s-hero-title-and-people__img { position: absolute; bottom: auto; top: 96px; width: 36%; max-width: 190px; z-index: 1; }
  .s-hero-title-and-people__img:first-child { left: -4%; }
  .s-hero-title-and-people__img:nth-child(2) { right: -4%; }
  .s-hero-title-and-people__banner > .s-hero-title-and-people__wrapper,
  .s-hero-title-and-people__banner > .container { padding: 0 24px; }
  .s-hero-title-and-people__container { padding: 0 8%; }
}
}

/* Logo row slider: eighteen pagination dots under six logos said nothing;
   the row scrolls with its arrows and swipe. */
.b-slider-media-logo-row .swiper-pagination { display: none !important; }

/* Comparison table: the radial highlight faded to transparent, which on
   phones left the page colour showing in the four corners between the
   neighbouring sections. It fades to the section's own light ground now. */
.b-comparison-table.u-bg-secondary-green { background: radial-gradient(70% 90% at 50% 0%, rgba(0,168,133,.14), rgba(72,180,255,.06) 60%, #F7FAF9 100%) !important; }

/* Hero tags are labels: nothing happens on hover. */
.b-hero-image-cta__products-link.u-cursor-default,
.b-hero-image-cta__products-link.u-cursor-default:hover,
.b-hero-image-cta__products-link.u-cursor-default:focus,
.b-hero-image-cta .b-hero-image-cta__products-link.u-cursor-default:hover,
span.b-hero-image-cta__products-link:hover { color: var(--ou-navy, #152361) !important; text-decoration: none !important; cursor: default !important; opacity: 1 !important; background: transparent !important; transform: none !important; }
.b-hero-image-cta__products-link.u-cursor-default:hover .c-icon { color: var(--ou-green-500) !important; }

/* Single Space hero runs behind the floating nav like every other hero. */
.s-single-space { margin-top: -98px !important; padding-top: 178px !important; }
@media (max-width: 991px) { .s-single-space { padding-top: 130px !important; } }

/* Comparison table: the scroll container sat 2px inside its rounded frame, so a
   hairline of section background showed around the two columns. */
.b-comparison-table__items { border: 0 !important; padding: 0 !important; }
.b-comparison-table__items-container { margin: 0 !important; width: 100% !important; }

/* Cookie banner: the card padding tightens a little. Its two whitespace-only
   paragraphs are removed by script (site/src/lib/cookiebot.ts), since CSS
   :empty cannot match whitespace. */
#CookieBanner .cookiebanner__main { padding: 24px 24px !important; }

/* Blog overview: the featured articles and the theme slider stacked 64 + 80px
   of padding plus the cards' own bottom margin, a hole of 200px. Only that
   pairing: the same sections sit next to other blocks on other pages. */
main > .b-posts-featured:has(+ .b-slider-theme) { padding-bottom: 40px !important; }
main > .b-posts-featured + .b-slider-theme { padding-top: 40px !important; }

/* Newsroom signup ("Stay in the loop"): the copy column stretched to the form's
   height and this variant has no trust logos to fill the bottom, so the copy
   sat at the top with a hole under it and the consent line far below. The form
   now spans both grid rows, so the consent line follows the copy directly. */
@media (min-width: 761px) {
  .demo.demo--page .demo-grid:not(:has(.demo-trust)) { grid-template-rows: auto 1fr; row-gap: 0; }
  .demo.demo--page .demo-grid:not(:has(.demo-trust)) > .demo-info { grid-row: 1; grid-column: 1; align-self: start; justify-content: flex-start; }
  .demo.demo--page .demo-grid:not(:has(.demo-trust)) > .demo-form { grid-row: 1 / span 2; grid-column: 2; }
  .demo.demo--page .demo-grid:not(:has(.demo-trust)) > .s-calendly__entity-description { grid-row: 2; grid-column: 1; align-self: start; margin-top: 4px; }
}