/* ==========================================================================
   LOCAL TOKENS
   All color, spacing, radius and type tokens now live in tokens.css
   (linked before this file). Only page-layout values that aren't part of
   that shared library stay here, plus a couple of placeholder-only values
   that exist purely to stand in for real content and shouldn't be
   promoted into the permanent design system.
   ========================================================================== */
:root {
  --container-width: 1200px;
  --nav-height: 69px;

  /* Not a design token — a neutral fill for the temporary .img-placeholder
     boxes only. Lightest step of Core Neutral; remove once real images
     are wired in. */
  --color-placeholder: var(--color-core-neutral-100);
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

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

/* Self-hosted to match tokens.css's --font-body: "Inter Variable" — Google
   Fonts only ever serves this family as plain "Inter", which wouldn't match
   the token name and would silently fall back to the generic sans-serif.
   Two subsets: latin covers standard copy, latin-ext covers the accented
   characters in the footer's German/Romanian addresses (e.g. "Straße"). */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Plus Jakarta Sans is not variable upstream, so it's 3 static weights x
   2 subsets (6 files) rather than 1 file per subset like Inter above. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("fonts/plus-jakarta-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("fonts/plus-jakarta-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("fonts/plus-jakarta-sans-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-surface);
}

img {
  max-width: 100%;
  display: block;
}

/* Stand-in for every real image/mockup. Sized to match Figma exactly,
   swap for the real asset (img/picture/svg) when it's ready. */
.img-placeholder {
  background: var(--color-placeholder);
  border-radius: 8px;
  width: 100%;
  flex-shrink: 0;
}

button {
  font: inherit;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ==========================================================================
   SECTION: Navigation
   ========================================================================== */

/* ==========================================================================
   Announcement bar (above the navbar)
   ========================================================================== */
.announcement {
  background: var(--color-core-700);
  color: var(--color-text-inverse);
}
.announcement__inner {
  position: relative;
  display: flex;
  justify-content: center;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 10px 48px 10px 20px;
}
.announcement__text {
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: inherit;
}
.announcement a.announcement__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}
.announcement a.announcement__link:hover {
  text-decoration: none;
  text-underline-offset: 3px;
  color: var(--color-core-200);
}
.announcement__icon { display: inline-flex; width: 16px; height: 16px; }
.announcement__icon svg { width: 100%; height: 100%; }
.announcement__close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.8;
  cursor: pointer;
}
.announcement__close:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.announcement__close svg { width: 16px; height: 16px; }
@media (max-width: 480px) { .announcement__icon { display: none; } }

/* ==========================================================================
   Navbar dropdowns: overview link at the top of a panel
   (touch screens and the mobile drawer only)
   ========================================================================== */
.navbar__panel-overview { display: none; }

@media (hover: none), (max-width: 900px) {
  .navbar__panel-overview {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 16px;
    color: var(--color-core-700);
    text-decoration: none;
  }
}

/* ==========================================================================
   Breadcrumb, directly below the navbar
   (Selectors are deliberately specific, and the layout properties use
   !important, because old theme rules for lists and list items override
   anything weaker.)
   ========================================================================== */
nav.site-breadcrumb {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 16px 20px 8px;
}

nav.site-breadcrumb ol.site-breadcrumb__list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* To center the whole breadcrumb on the page, add: justify-content: center; */
}

/* Caption tokens: the smallest step of the type scale */
nav.site-breadcrumb ol.site-breadcrumb__list > li.site-breadcrumb__item {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-caption-size);
  line-height: 1;
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-core-neutral-500);
}

/* Cancel any old theme decoration on list items */
nav.site-breadcrumb ol.site-breadcrumb__list > li.site-breadcrumb__item::before,
nav.site-breadcrumb ol.site-breadcrumb__list > li.site-breadcrumb__item::after {
  content: none !important;
  display: none !important;
}

/* Links and the current page share one box, so everything lines up */
nav.site-breadcrumb a.site-breadcrumb__link,
nav.site-breadcrumb span.site-breadcrumb__text {
  display: block;
  padding: 4px 0;
  margin: 0;
  border: 0;
  font: inherit;
  line-height: 1;
  letter-spacing: inherit;
  white-space: nowrap;
  text-decoration: none;
}

nav.site-breadcrumb a.site-breadcrumb__link {
  color: var(--color-core-neutral-500);
  transition: color 0.2s ease;
}

nav.site-breadcrumb a.site-breadcrumb__link:hover {
  color: var(--color-primary);
}

nav.site-breadcrumb li.site-breadcrumb__item--current span.site-breadcrumb__text {
  font-weight: 600;
  color: var(--color-core-neutral-800);
}

/* Separator: sized in em so it scales with the text, nudged to its optical middle */
nav.site-breadcrumb span.site-breadcrumb__sep {
  display: block;
  flex-shrink: 0;
  width: 0.85em;
  height: 0.85em;
  margin: 0 0.6em;
  color: var(--color-core-neutral-300);
  transform: translateY(0.05em);
}

nav.site-breadcrumb span.site-breadcrumb__sep svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  nav.site-breadcrumb a.site-breadcrumb__link { transition: none; }
}

/* ==========================================================================
   END Breadcrumb
   ========================================================================== */

.navbar {
  position: relative;
  width: 100%;
  background: var(--color-surface);
}

.navbar__inner {
  max-width: var(--container-width);
  height: var(--nav-height);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.navbar__logo img {
  height: 20px;
  width: auto;
}

/* Hamburger: hidden on desktop, shown below the mobile breakpoint. */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.navbar__hamburger:hover {
  background: var(--color-core-neutral-50);
}

.navbar__hamburger span {
  width: 20px;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Morphs into an X when the drawer is open. */
.navbar__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.navbar__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* On desktop this wrapper is invisible to layout — its children (the
   links nav + actions) flow directly into .navbar__inner's row exactly
   as if the wrapper weren't there. Only below the breakpoint does it
   become an actual drawer element (see the media query near the bottom
   of this file). */
.navbar__drawer {
  display: contents;
}

/* Mobile-only "Back" button inside each mega-menu panel, for the
   drill-down pattern (tap a category -> its content replaces the list,
   Back returns to it). Irrelevant on desktop, where panels float as
   normal dropdowns. */
.navbar__panel-back {
  display: none;
}

.navbar__links {
  flex: 1 0 0;
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: 40px;
  background: none;
  border: none;
}

.navbar__item {
  position: relative;
  height: 100%;
}

.navbar__link {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 12px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  white-space: nowrap;
}

.navbar__link--dropdown[aria-expanded="true"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.navbar__link--dropdown[aria-expanded="true"] .chevron {
  background-color: var(--color-primary);
  transform: rotate(180deg);
}

.chevron {
  width: 8px;
  height: 4px;
  flex-shrink: 0;
  transition: transform 0.2s ease, background-color 0.2s ease;
  background-color: var(--color-text-muted);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 4"><path d="M0 0L4 4L8 0" stroke="black" stroke-width="1.2" fill="none"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 4"><path d="M0 0L4 4L8 0" stroke="black" stroke-width="1.2" fill="none"/></svg>') no-repeat center / contain;
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
}

.navbar__lang {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 0 12px;
  background: none;
  border: none;
}

.icon-globe {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.navbar__login {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text);
  white-space: nowrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 52px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.308px;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Visible on keyboard focus only — mouse/touch activation doesn't need
   the ring. Same treatment for both variants so focus is predictable
   regardless of which button you land on. */
.btn:focus-visible {
  outline: 2px solid var(--color-core-700);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Primary: solid core-700 fill --- */
.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
}

.btn--primary:active {
  background: var(--color-primary-active);
}

/* --- Secondary: outline on white, fills subtly on interaction --- */
.btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--secondary:hover {
  background: var(--color-primary-subtle);
  border-color: var(--color-primary-hover);
}

.btn--secondary:active {
  background: var(--color-core-200);
  border-color: var(--color-primary-active);
  color: var(--color-primary-active);
}

.btn--large {
  padding: 12px 24px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.352px;
}

.icon-chevron-right {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6 3l5 5-5 5" stroke="black" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6 3l5 5-5 5" stroke="black" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
}

.icon-arrow-up-right {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: var(--color-core-700);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 12L12 4M12 4H5M12 4V11" stroke="black" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 12L12 4M12 4H5M12 4V11" stroke="black" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
}

/* ==========================================================================
   SECTION: Navigation — Mega Menu (Platform / Solutions)
   Shared panel shell, plus two column-content variants: Platform's
   icon + colored-dot columns, and Solutions' plain label columns.
   ========================================================================== */

.navbar__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 24px 48px -12px rgba(31, 1, 57, 0.16);
  z-index: 40;
}

.navbar__panel--open {
  display: block;
}

/* Desktop: a floating card instead of a full-width sheet. It fades in and
   slides down 8px when it opens. The mobile drawer keeps the rules above. */

@media (min-width: 901px) {
  .navbar__panel {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    top: calc(100% + 8px);
    left: 50%;
    width: max-content;
    max-width: calc(100vw - 40px);
    border: 1px solid rgba(31, 1, 57, 0.08);
    border-radius: 16px;
    box-shadow: 0 24px 48px -12px rgba(31, 1, 57, 0.18);
    transform: translate(-50%, -8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }

  .navbar__panel--open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
  }

  /* Mega-menu cards size to their columns instead of the page width */
  .navbar__panel:not(.navbar__panel--lang) .navbar__panel-inner {
    max-width: none;
    padding: 32px;
    gap: 40px;
  }
  .navbar__panel:not(.navbar__panel--lang) .navbar__panel-col {
    flex: 0 0 220px;
  }
}

.navbar__panel-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 40px 40px 48px;
  display: flex;
  gap: 56px;
}

.navbar__panel-col {
  flex: 1;
  min-width: 0;
}

/* --- Platform variant: dot + heading, icon + label rows --- */
.navbar__panel-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-core-neutral-100);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.352px;
  color: var(--color-core-neutral-800);
  white-space: nowrap;
}

.navbar__panel-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.navbar__panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navbar__panel-list a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  margin: 0 -8px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: -0.308px;
  color: var(--color-core-neutral-600);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.navbar__panel-list a:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

/* Real icon set (from Figma) — fill/stroke="currentColor" so each icon
   just inherits the link's text color, including on hover, with no
   separate color rule needed. */
.navbar__panel-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Nested submenu — "How to Install?" / "Compare" style parents with a
   set of child links indented underneath, visually distinct as a group. */
.navbar__panel-sublist {
  list-style: none;
  margin: 4px 0 4px 12px;
  padding: 0 0 0 18px;
  border-left: 1px solid var(--color-core-neutral-100);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navbar__panel-sublist a {
  padding: 6px 8px;
  margin: 0 -8px;
  font-size: 13px;
  color: var(--color-core-neutral-500);
}

.navbar__panel-badge {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0;
  white-space: nowrap;
}

/* --- Solutions variant: uppercase label heading, plain text rows --- */
.navbar__panel-inner--solutions {
  gap: 64px;
}

.navbar__panel-heading--label {
  justify-content: space-between;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--color-text-subtle);
}

.navbar__panel-heading--label .icon-chevron-right {
  width: 12px;
  height: 12px;
  background-color: var(--color-text-subtle);
}

.navbar__panel-list--plain a {
  padding: 10px 8px;
  color: var(--color-text);
  font-size: 14px;
}

.navbar__panel-list--plain a:hover {
  color: var(--color-primary);
}

/* Language popover: compact, anchored to its own trigger instead of the
   full-width mega-menu position. Right-aligned in the mobile drawer,
   centered under the globe button on desktop. */
.navbar__panel--lang {
  left: auto;
  right: 0;
  width: auto;
  min-width: 180px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: 0 16px 32px -8px rgba(31, 1, 57, 0.16);
}

@media (min-width: 901px) {
  .navbar__panel--lang {
    left: 50%;
    right: auto;
  }
}

.navbar__panel-inner--lang {
  padding: 8px;
  display: block;
}

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

.navbar__lang-option {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-core-neutral-600);
}

.navbar__lang-option:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

.navbar__lang-option--active {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font-weight: 600;
}

/* ==========================================================================
   Responsive navigation — hamburger + drill-down drawer below 900px.
   Above 900px, .navbar__drawer's display:contents keeps this whole block
   inert (its selectors only take effect once the media query is active).
   ========================================================================== */

@media (max-width: 900px) {
  .navbar__links,
  .navbar__login {
    display: none;
  }

  .navbar__hamburger {
    display: flex;
  }

  .navbar__inner {
    padding-right: 20px;
  }

  /* The drawer becomes a real element: a full-width panel hanging off
     the bottom of the 69px header, scrollable if content runs long. */
  .navbar__drawer {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 16px 32px -8px rgba(31, 1, 57, 0.16);
    flex-direction: column;
  }

  .navbar--menu-open .navbar__drawer {
    display: flex;
  }

  .navbar__links {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    margin-left: 0;
  }

  .navbar__item {
    height: auto;
    width: 100%;
  }

  .navbar__link {
    height: auto;
    width: 100%;
    padding: 16px 20px;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-core-neutral-100);
  }

  .navbar__link--dropdown[aria-expanded="true"] {
    border-bottom-color: var(--color-core-neutral-100);
  }

  .navbar__actions {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 20px;
  }

  .navbar__actions .navbar__item {
    width: auto;
  }

  .navbar__login {
    display: flex;
    justify-content: center;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
  }

  .navbar__actions .btn--primary {
    justify-content: center;
    width: 100%;
  }

  .navbar__lang {
    width: 100%;
    justify-content: space-between;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
  }

  /* Mega-menu panels: drop the floating-dropdown treatment and become a
     full-width screen that swaps in for the list (drill-down pattern).
     They're DOM siblings of .navbar__inner, not children of the drawer
     above, so they need their own scroll container — body scroll is
     locked while the drawer/panel is open (see the JS), so without this
     a long panel (e.g. Resources) would have no way to scroll at all. */
  .navbar__panel {
    position: static;
    width: 100%;
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
    box-shadow: none;
    border-top: none;
  }

  .navbar__panel--lang {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .navbar__panel-inner,
  .navbar__panel-inner--platform,
  .navbar__panel-inner--solutions {
    flex-direction: column;
    gap: 24px;
    padding: 12px 20px 20px;
    max-width: none;
  }

  .navbar__panel-back {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-core-neutral-100);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-core-neutral-600);
    cursor: pointer;
  }

  .navbar__panel-back .icon-chevron-right {
    transform: rotate(180deg);
    background-color: var(--color-core-neutral-600);
  }

  /* While a panel is drilled into, hide the top-level list/actions so
     only the panel (with its Back button) fills the drawer. */
  .navbar--drilled .navbar__links,
  .navbar--drilled .navbar__actions {
    display: none;
  }
}

/* ==========================================================================
   SECTION: Hero
   ========================================================================== */
.hero {
  padding: 40px 0 0;
  text-align: center;
}

.hero__container {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 0 20px;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-core-50);
  border-radius: 100px;
  padding: 6px 12px 6px 6px;
}

.pill__tag {
  background: var(--color-core-700);
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.308px;
  padding: 2px 8px;
  border-radius: 50px;
}

.pill__text {
  color: var(--color-core-700);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.308px;
  padding: 0 4px 0 8px;
}

a.pill, a.pill:hover,
a.rating, a.rating:hover { color: inherit; text-decoration: none; }

a.pill { transition: background-color 0.25s ease; }
a.pill:hover { background: var(--color-core-100); }

a.pill .icon-arrow-up-right { transition: transform 0.25s ease; }
a.pill:hover .icon-arrow-up-right { transform: translate(2px, -2px); }

.hero__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -1.664px;
  color: var(--color-core-700); /* fallback without gradient text */
  background: linear-gradient(100deg,
    var(--color-core-800) 0%,
    var(--color-core-700) 30%,
    var(--color-core-500) 50%,
    var(--color-core-700) 70%,
    var(--color-core-800) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heading-sweep 12s ease-in-out infinite alternate;
}

.hero__subhead {
  margin: 0;
  max-width: 712px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.48px;
  color: var(--color-core-neutral-800);
}

.hero__ctas {
  display: flex;
  gap: 12px;
}

.hero__ratings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 0 0;
}

.rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.308px;
}

.rating__star {
  /* No amber/gold in the current token set — leaving literal until there's
     a --color-rating or similar semantic to hang this off. */
  color: #ffb800;
}

.rating__number {
  color: var(--color-text);
}

.rating__label {
  color: var(--color-core-neutral-500);
}

.rating__logo {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}

.rating__logo svg {
  height: 14px;
  width: auto;
  display: block;
}

.rating__divider {
  width: 1px;
  height: 28px;
  background: var(--color-border);
}

/* ==========================================================================
   Hero visual: background image + logo row + product mockup
   (Figma: hp26-hero-image-growth-engine, 1200 x 572)
   Every layer is positioned in proportion to the Figma frame, so the whole
   composition scales as one piece. Sizes use container query units:
   1cqw = 1% of the frame's width.
   ========================================================================== */

.hero__visual {
  position: relative;
  container-type: inline-size;
  width: calc(100% - 40px);
  max-width: 1560px;
  aspect-ratio: 1200 / 572;
  margin: 60px auto 0;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  /* Shown until the background image has loaded */
  background: linear-gradient(120deg, #f5793b 0%, #c8105b 50%, #4a0a4a 100%);
}

.hero__visual-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Logo row: 1000 x 84 at 100 / 29 in the Figma frame, logos spread evenly */
.hero__logos {
  position: absolute;
  top: 5.07%;
  left: 8.33%;
  width: 83.33%;
  height: 14.69%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 4;
}

/* Reset the old theme's list styling, including its check-mark bullets */
.hero__logos li {
  margin: 0;
  padding: 0;
  line-height: 0;
}
.hero__logos li::before { content: none; display: none; }

/* Logos limited in both directions, so long wordmarks don't dominate.
   32px tall at a 1200px-wide frame (the Figma size), scaling with the frame. */
.hero__logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 2.67cqw;
  max-width: 11cqw;
}

/* Linked logos: no stray space under the image */
.hero__logo-link {
  display: block;
  line-height: 0;
}

/* Logo row: hovering one logo fades the others back and lifts it slightly */
@media (hover: hover) {
  .hero__logos li {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .hero__logos:hover li { opacity: 0.45; }
  .hero__logos li:hover {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* Mockup: 1000px wide at 100 / 135 in the Figma frame; the frame crops its bottom */
.hero__visual-mockup {
  position: absolute;
  top: 23.6%;
  left: 8.33%;
  width: 83.33%;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}

.hero__visual-mockup-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Depth on scroll (CSS only): the mockup starts tilted back and small, then
   rises, straightens and lands slightly larger than its design size; the
   background drifts the other way and the logos lift away. Static for
   "Reduce motion" and in browsers without support. */
.hero__visual { perspective: 1200px; }

@keyframes hero-mockup-land {
  from { transform: rotateX(16deg) scale(0.92); }
  to   { transform: rotateX(0) scale(1.06); }
}
@keyframes hero-bg-drift {
  from { transform: scale(1.08) translateY(-2%); }
  to   { transform: scale(1.08) translateY(3%); }
}
@keyframes hero-logos-lift {
  to { transform: translateY(-35%); }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__visual-mockup {
      transform-origin: 50% 100%;
      animation: hero-mockup-land linear both;
      animation-timeline: scroll(root);
      animation-range: 0 40vh;
    }
    .hero__visual-bg {
      animation: hero-bg-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 60vh;
    }
    .hero__logos {
      animation: hero-logos-lift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 40vh;
    }
  }
}

/* Heatmap trail behind the pointer (created by script.hp26.js) */
.hero__heat {
  position: absolute;
  z-index: 3;
  width: 220px;
  height: 220px;
  margin: -70px 0 0 -70px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(255, 72, 0, 0.28) 0%,
    rgba(255, 184, 0, 0.18) 30%,
    rgba(0, 200, 140, 0.08) 55%,
    transparent 75%);
  filter: blur(8px);
  animation: hero-heat-fade 1.1s ease-out forwards;
}

@keyframes hero-heat-fade {
  from { opacity: 1; transform: scale(0.6); }
  to   { opacity: 0; transform: scale(1.15); }
}


/* ==========================================================================
   SECTION: Trio (3-column copy grid, e.g. Diagnose/Know/Move)
   ========================================================================== */
.trio {
  max-width: 1360px;
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
}

.trio__col {
  flex: 1;
  min-width: 0;
  padding: 0 32px;
  text-align: center;
  border-left: 1px solid var(--color-border);
}

.trio__col:first-child {
  border-left: none;
}

.trio__col h3 {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.48px;
  color: var(--color-core-neutral-800);
}

.trio__col p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.672px;
  color: var(--color-core-neutral-500);
}

/* ==========================================================================
   SECTION: Stages
   ========================================================================== */
.stages {
  background: var(--color-core-neutral-50);
  padding: 52px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stages__heading {
  max-width: var(--container-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.stages__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -1.44px;
  background: linear-gradient(157deg, var(--color-core-950) 0%, #8e238b 53%, #c04363 74%, #e55728 89%, var(--color-accent-default) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: heading-drift 14s ease-in-out infinite alternate;
}

@keyframes heading-sweep {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@keyframes heading-drift {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__heading,
  .stages__title { animation: none; }
}

.stages__subhead {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.48px;
  color: var(--color-core-neutral-800);
}

/* Sticky while its containing .stage-sections wrapper (tab bar + the 4
   stage sections) is in view; scrolls away normally once you pass Act. */
.stages__tabs {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  background: var(--color-core-neutral-50);
}

.stages__tabs-inner {
  display: flex;
  border-bottom: 1px solid var(--color-core-neutral-200);
}

.stages__tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 40px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.48px;
  color: var(--color-core-neutral-800);
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.stages__tab:hover {
  color: var(--color-core-700);
}

.stages__tab:focus-visible {
  outline: 2px solid var(--color-core-700);
  outline-offset: -4px;
}

.stages__tab--active {
  background: var(--color-core-neutral-100);
  color: var(--color-core-700);
  border-bottom: 1px solid var(--color-core-700);
}

.stage-sections__spacer {
  height: 52px;
  background: var(--color-core-neutral-50);
}

/* Anchor targets for the tab bar — offsets the jump so the section
   heading lands clear of the sticky bar instead of tucked under it. */
.observe {
  scroll-margin-top: var(--stage-tab-offset, 64px);
}

/* Stage colors, the same as the dots in the navbar's Platform menu */
.stages__tab[data-stage-tab="section-observe"]    { --stage-color: #0055A8; }
.stages__tab[data-stage-tab="section-analyze"]    { --stage-color: #007EA8; }
.stages__tab[data-stage-tab="section-understand"] { --stage-color: #C49000; }
.stages__tab[data-stage-tab="section-act"]        { --stage-color: #D44A1A; }

.icon-rings {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--stage-color, var(--color-core-neutral-500));
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.icon-rings--active {
  background: var(--stage-color, var(--color-core-700));
  border-color: var(--stage-color, var(--color-core-700));
}

/* ==========================================================================
   SECTION: Observe (heading + accordion + mockup)
   ========================================================================== */
.observe {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 52px 20px;
}

.eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.48px;
  color: var(--color-core-700);
  text-align: center;
}

.observe__title {
  margin: 0 0 76px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -1.12px;
  color: var(--color-core-neutral-800);
  text-align: center;
}

.observe__title strong {
  font-weight: 700;
}

.observe__row {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.accordion {
  flex: 1;
  min-width: 0;
}

.accordion__item {
  transition: background-color 0.3s ease;
}

.accordion__bar {
  height: 2px;
  background: var(--color-core-neutral-100);
  position: relative;
  overflow: hidden;
}

.accordion__bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--color-core-700);
}

/* Runs only while its item is the open/"playing" one. Removing the
   --open class (manual click or auto-advance) drops this rule from
   matching, so the fill reverts to width: 0 above instantly — no
   separate JS reset needed. */
.accordion__item--open .accordion__bar-fill {
  animation: accordion-progress 5s linear forwards;
}

/* Paused while the user is hovering the accordion, or while its section
   is scrolled out of view (toggled via JS). A paused CSS animation also
   withholds its animationend event, which is what the autoplay JS
   listens for — so this pauses the advance timing too, not just the
   visual fill. */
.accordion[data-autoplay-paused] .accordion__item--open .accordion__bar-fill {
  animation-play-state: paused;
}

@keyframes accordion-progress {
  from { width: 0%; }
  to { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .accordion__bar-fill {
    animation: none !important;
    width: 100%;
  }
}

.accordion__item--open,
.accordion__item:hover {
  background: var(--color-core-neutral-50);
}

.accordion__head {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 24px 16px 24px 24px;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.accordion__head--link {
  text-decoration: none;
}

.accordion__head h3 {
  flex: 1;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -0.672px;
  color: var(--color-core-neutral-500);
  transition: color 0.2s ease;
}

.accordion__item--open .accordion__head h3,
.accordion__head--link h3 {
  color: var(--color-core-700);
}

.accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s ease-in-out;
}

.accordion__item--open .accordion__panel {
  max-height: 240px;
}

.accordion__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 40px 24px 24px;
}

.accordion__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.672px;
  color: var(--color-core-neutral-600);
}

.accordion__link {
  margin: 0;
  padding: 0 40px 20px 24px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: -0.672px;
  color: var(--color-core-700);
}

.accordion__link .icon-arrow-up-right {
  margin-left: 4px;
  flex-shrink: 0;
}

.caret {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: var(--color-core-neutral-500);
  transform: rotate(0deg);
  transition: transform 0.3s ease-in-out, background-color 0.3s ease;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="black" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="black" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
}

.accordion__item--open .caret {
  background-color: var(--color-core-700);
  transform: rotate(180deg);
}

.observe__mockup {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* One image per accordion item — only the one matching the currently
   open item shows, kept in sync by JS. */
.observe__mockup-img {
  display: none;
}

.observe__mockup-img--active {
  display: block;
}

.observe__ctas {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

/* ==========================================================================
   SECTION: Proof stats
   ========================================================================== */

.proof-stats {
  padding: 40px 20px;
}

.proof-stats__inner {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  border-top: 1px solid var(--color-core-neutral-100);
  border-bottom: 1px solid var(--color-core-neutral-100);
}

.proof-stats__item {
  flex: 1;
  min-width: 0;
  padding: 36px 28px;
  border-left: 1px solid var(--color-core-neutral-100);
}

.proof-stats__item:last-child {
  border-right: 1px solid var(--color-core-neutral-100);
}

.proof-stats__value {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(40px, 3.4vw, 52px);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--color-core-neutral-800);
}

/* One icon set, all in the primary color; arrows rotate from one drawing */
.proof-stats__arrow {
  display: inline-flex;
  flex-shrink: 0;
  width: 0.7em;
  height: 0.7em;
  margin-top: -0.04em;
  color: var(--color-primary);
}

.proof-stats__arrow svg { width: 100%; height: 100%; }
.proof-stats__arrow--right svg { transform: rotate(90deg); }
.proof-stats__arrow--down svg { transform: rotate(180deg); }
.proof-stats__arrow--left svg { transform: rotate(-90deg); }

.proof-stats__label {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.36px;
  color: var(--color-core-neutral-800);
}

.proof-stats__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-sm-line-height);
  letter-spacing: var(--text-body-sm-tracking);
  color: var(--color-core-neutral-600);
}

.proof-stats__text a {
  color: var(--color-primary);
  text-decoration: none;
}

.proof-stats__text a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ==========================================================================
   SECTION: Trusted by Industry Leaders
   Heading stays in the page column; the card row runs full width, starts
   aligned with the page's content edge, and scrolls sideways (swipe,
   trackpad, or click-and-drag via script.hp26.js).
   ========================================================================== */

.leaders {
  margin: 0 auto;
  padding: 52px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.leaders__title {
  max-width: var(--container-width);
  margin: 0;
  padding: 0 20px;
  box-sizing: border-box;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -1.12px;
  color: var(--color-core-neutral-800);
  text-align: center;
}

/* ".leaders ." prefix: outranks the older tablet rules in styles.mobile.hp26.css,
   which would otherwise wrap the cards into a grid */
.leaders .leaders__row {
  --leaders-edge: max(20px, calc((100% - var(--container-width)) / 2 + 20px));
  display: flex;
  gap: 16px;
  width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 0 var(--leaders-edge);
  scroll-padding: 0 var(--leaders-edge);
  box-sizing: border-box;
  scrollbar-width: none;
  cursor: grab;
}
.leaders .leaders__row::-webkit-scrollbar { display: none; }

/* While dragging with the mouse: no snapping mid-drag, no text selection */
.leaders .leaders__row.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.leaders .leaders__card {
  position: relative;
  flex: 0 0 328px;
  min-width: 0;
  scroll-snap-align: start;
  display: block;
  color: inherit;
  text-decoration: none;
}
.leaders .leaders__card img { -webkit-user-drag: none; }

.leaders__img {
  aspect-ratio: 328/218;
  border-radius: 16px;
}

.leaders__img--photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.leaders__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-core-neutral-600);
}

img.leaders__logo {
  max-width: 60%;
  max-height: 40%;
  width: auto;
  height: auto;
  pointer-events: none;
}

@media (max-width: 480px) {
  .leaders .leaders__card { flex-basis: 260px; }
}


/* ==========================================================================
   SECTION: Built for the way you actually work
   ========================================================================== */
.workflow {
  background: var(--color-core-neutral-50);
  padding: 52px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.workflow__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -1.44px;
  text-align: center;
  background: linear-gradient(139deg, var(--color-core-950) 12%, #8e238b 43%, #c04363 55%, #e55728 63%, var(--color-accent-default) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.workflow__tabs {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 40px;
}

.workflow__tab {
  padding: 8px 16px;
  border-radius: 50px;
  border: 1px dashed var(--color-core-neutral-300);
  background: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.672px;
  color: var(--color-core-neutral-500);
}

.workflow__tab--active {
  border: 1px solid var(--color-core-300);
  background: var(--color-core-50);
  color: var(--color-core-700);
}

.workflow__tab {
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.workflow__tab--dashed:hover {
  color: var(--color-core-700);
  border-color: var(--color-core-neutral-400);
}

.workflow__tab:focus-visible {
  outline: 2px solid var(--color-core-700);
  outline-offset: 2px;
}

.workflow__mockup {
  position: relative;
  max-width: var(--container-width);
  width: 100%;
  margin-top: 40px;
}

/* One team-group per tab; only the active team's group of 3 shows. */
.workflow__mockup-team {
  display: none;
}

.workflow__mockup-team--active {
  display: block;
}

/* Within a team-group, stacked placeholder states — only the active one
   is shown. The on-image counter is a preview aid so it's obvious which
   of the 3 is live; drop it (and the other 2 states) once real images
   replace these. */
.workflow__mockup-img {
  display: none;
  position: relative;
}

.workflow__mockup-img--active {
  display: block;
}

.workflow__mockup-count {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.02em;
  color: var(--color-core-neutral-300);
}

/* One team-group per tab; only the active team's 3 cards show. */
.workflow__cards-team {
  display: none;
  width: 100%;
}

.workflow__cards-team--active {
  display: block;
}

.workflow__cards {
  max-width: var(--container-width);
  width: 100%;
  margin: 0 auto;
  display: flex;
  /* Sits flush against .workflow__mockup above — no gap between them. */
  margin-top: 0;
}

.workflow__card {
  flex: 1;
  padding: 32px 24px;
  border-top: 2px solid var(--color-core-neutral-100);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.workflow__card:hover {
  background: var(--color-core-neutral-100);
}

.workflow__card:focus-visible {
  outline: 2px solid var(--color-core-700);
  outline-offset: -2px;
}

.workflow__card--active {
  border-top: 2px solid var(--color-core-700);
}

.workflow__card-title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -0.672px;
  color: var(--color-core-700);
}

.workflow__card p {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.672px;
  color: var(--color-core-neutral-600);
}

.workflow__card a {
  color: var(--color-core-700);
  font-weight: 600;
}

.icon-arrow-right {
  width: 10px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M1 5h8M5 1l4 4-4 4" stroke="black" stroke-width="1.3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M1 5h8M5 1l4 4-4 4" stroke="black" stroke-width="1.3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
}

/* ==========================================================================
   SECTION: Reviews ("Backed by Thousands")
   Two marquee rows scrolling in opposite directions. script.hp26.js repeats
   the cards so each row always covers the screen.
   ========================================================================== */

.reviews {
  width: 100%;
  padding: 52px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;                          /* between the two rows of cards */
}

.reviews .leaders__title {
  padding: 0 20px;
  margin-bottom: 24px;                /* extra space under the headline (40px total) */
}

.reviews__track {
  width: 100%;
  overflow: hidden;
}

/* Card spacing is a margin on every card instead of a flex gap, so the two
   halves of each row are exactly equal and the loop point is invisible */
.reviews__marquee {
  display: flex;
  gap: 0;
  width: max-content;
  animation: reviews-scroll 70s linear infinite;
}

.reviews__marquee > .review-card {
  margin-right: 16px;
}

.reviews__track:hover .reviews__marquee {
  animation-play-state: paused;
}

.reviews__track--reverse .reviews__marquee {
  animation-direction: reverse;
}

@keyframes reviews-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .reviews__marquee {
    animation: none;
  }
}

.review-card {
  background: var(--color-core-neutral-50);
  border-radius: 16px;
  padding: 18px 24px;
  display: flex;
  gap: 24px;
  align-items: center;
  width: 440px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.review-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  flex-shrink: 0;
}

img.review-card__avatar {
  object-fit: cover;
}

/* Review site logo in the avatar spot: a white circle with the logo centered */
.review-card__source {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-core-neutral-100);
}

/* Logos limited in both directions, so square and wide logos look balanced */
.review-card__source img {
  display: block;
  width: auto;
  height: auto;
  max-width: 46px;
  max-height: 34px;
}

.review-card__stars {
  color: #ffb800;
  font-size: 13px;
  letter-spacing: 2px;
}

.review-card__body h4 {
  margin: 4px 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.396px;
  color: var(--color-core-700);
}

.review-card__body p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.264px;
  color: var(--color-core-neutral-800);
}

/* ==========================================================================
   SECTION: FAQ
   ========================================================================== */
.faq {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 52px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.faq__list {
  width: 100%;
}

.faq__item {
  border-top: 1px solid var(--color-core-neutral-100);
}

.faq__item--last {
  border-bottom: 1px solid var(--color-core-neutral-100);
}

.faq__item--open {
  border-top: none;
  background: var(--color-core-neutral-50);
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 24px 16px 24px 24px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.48px;
  color: var(--color-core-700);
}

.faq__question--dim {
  color: var(--color-core-neutral-500);
}

.faq__item--open .caret {
  background-color: var(--color-core-700);
  transform: rotate(180deg);
}

/* Answers open to their exact height instead of a max-height guess, so the
   closing and opening answers move together smoothly, and long answers are
   never cut off. Same technique and timing as the stage accordions. */

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.45s ease;
}

.faq__item--open .faq__answer {
  grid-template-rows: 1fr;
}

.faq__answer-text {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 40px 0 24px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.352px;
  color: var(--color-core-neutral-600);
}

/* The 24px bottom spacing lives inside the text, so it collapses with it */
.faq__answer-text::after {
  content: "";
  display: block;
  height: 24px;
}

/* ==========================================================================
   SECTION: Newsletter Banner
   Verified against Figma (node 778:10954) — #4d0396 and #6b02d5 are the
   actual intended values, not approximations; they simply sit outside
   the core scale's own steps.
   ========================================================================== */
.newsletter {
  background: #4d0396;
}

.newsletter__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 24px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.newsletter__left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.newsletter__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #6b02d5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-envelope {
  width: 22px;
  height: 22px;
  background-color: var(--color-text-inverse);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 5h18v14H3z" stroke="black" stroke-width="1.6" fill="none" stroke-linejoin="round"/><path d="M3 6l9 7 9-7" stroke="black" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 5h18v14H3z" stroke="black" stroke-width="1.6" fill="none" stroke-linejoin="round"/><path d="M3 6l9 7 9-7" stroke="black" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
}

.newsletter__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: -0.352px;
  color: var(--color-text-inverse);
}

.newsletter__text strong {
  font-size: 20px;
  font-weight: 600;
}

.newsletter__form {
  display: flex;
  gap: 12px;
}

/* Newsletter as a floating card across the page/footer edge */
.hp26-footer .newsletter {
  margin: 0;
  padding: 0 20px;
  background: linear-gradient(to bottom, transparent 50%, var(--color-core-700) 50%);
}
.hp26-footer .newsletter__inner {
  max-width: 880px;
  padding: 14px 14px 14px 20px;
  border-radius: 20px;
  background: var(--color-core-700);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 48px -16px rgba(31, 1, 57, 0.35);
}

/* Plus Jakarta Sans throughout the card, including field and button */
.hp26-footer .newsletter__text,
.hp26-footer .newsletter__input,
.hp26-footer .newsletter__submit {
  font-family: var(--font-heading);
}
.hp26-footer .newsletter__text strong { font-size: 18px; }
.hp26-footer .newsletter__icon { width: 40px; height: 40px; }

/* Pill field: the Subscribe button sits inside the email field */
.hp26-footer .newsletter__form > div:not([class]) { display: contents; }
.hp26-footer .newsletter__input {
  flex: 0 1 360px;
  width: 360px;
  height: 48px;
  margin: 0;
  padding: 0 132px 0 20px;
  border: none;
  border-radius: 999px;
}
.hp26-footer .newsletter__input:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 2px;
}
.hp26-footer .newsletter__submit {
  position: absolute;
  top: 4px;
  right: 4px;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--color-accent-default);
  color: var(--color-text-inverse);
}

@media (max-width: 480px) {
  .hp26-footer .newsletter__form,
  .hp26-footer .newsletter__input { width: 100%; flex-basis: 100%; }
}

.newsletter__input {
  width: 300px;
  padding: 12px 24px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
}

.newsletter__input::placeholder {
  color: var(--color-text-subtle);
}

.newsletter__submit {
  padding: 12px 16px;
  border-radius: 8px;
  border: none;
  background: var(--color-accent-default);
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
}

/* ==========================================================================
   SECTION: Footer
   ========================================================================== */
.footer {
  background: var(--color-core-700);
  /* 60px top — exact Figma value (974:16867), not the --space-16 (64px)
     rounding used elsewhere for scale consistency. */
  padding: 60px var(--space-5) var(--space-10);
}

.footer__top {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  /* 68px — exact Figma value (974:16727), not the --space-16 (64px)
     rounding used elsewhere for scale consistency. */
  gap: 68px;
  flex-wrap: wrap;
}

.footer__brand {
  flex: 1 1 450px;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.footer__cta-row {
  display: flex;
  gap: var(--space-3);
}

/* Both footer buttons sit on the core-700 background, so a core-700
   focus ring (the default .btn:focus-visible) would nearly disappear —
   use the light inverse color for focus visibility here instead. */
.footer .btn:focus-visible {
  outline-color: var(--color-text-inverse);
}

.footer__btn-white {
  background: var(--color-surface);
  color: var(--color-core-700);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body-sm-size);
}

.footer__btn-white:hover {
  background: var(--color-core-neutral-50);
}

.footer__btn-white:active {
  background: var(--color-core-neutral-100);
}

.footer__btn-outline {
  /* #aa74ff — confirmed via Figma (node 974:16867) as the real intended
     value, used verbatim rather than swapped for --color-core-300. */
  background: transparent;
  border: 1px solid #aa74ff;
  color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body-sm-size);
}

.footer__btn-outline:hover {
  background: color-mix(in srgb, var(--color-text-inverse) 12%, transparent);
  border-color: var(--color-text-inverse);
}

.footer__btn-outline:active {
  background: color-mix(in srgb, var(--color-text-inverse) 20%, transparent);
  border-color: var(--color-text-inverse);
}

.footer__btn-white .icon-chevron-right,
.footer__btn-outline .icon-chevron-right {
  width: 16px;
  height: 16px;
}

.footer__affiliate-title {
  margin: 0 0 var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  letter-spacing: var(--text-body-lg-tracking);
  color: var(--color-text-inverse);
}

.footer__affiliate-title .icon-arrow-right {
  color: var(--color-text-inverse);
}

.footer__affiliate-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
  letter-spacing: var(--text-body-sm-tracking);
  color: var(--color-text-inverse);
}

.footer__sep {
  border: none;
  border-top: 1px solid rgba(250, 249, 252, 0.2); /* fallback if color-mix() is unsupported */
  border-top: 1px solid color-mix(in srgb, var(--color-text-inverse) 20%, transparent);
  margin: 0;
  width: 100%;
}

.footer__addresses {
  display: flex;
  gap: var(--space-6);
}

.footer__addresses > div {
  flex: 1;
}

.footer__addr-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  letter-spacing: var(--text-body-lg-tracking);
  color: var(--color-text-inverse);
}

.footer__addr-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
  letter-spacing: var(--text-body-sm-tracking);
  color: var(--color-text-inverse);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 0;
  min-width: 150px;
}

.footer__col-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
  letter-spacing: var(--text-body-sm-tracking);
  color: var(--color-core-300);
}

.footer__col a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
  letter-spacing: var(--text-body-sm-tracking);
  color: var(--color-text-inverse);
}

.footer__sep--full {
  max-width: var(--container-width);
  margin: var(--space-8) auto;
}

.footer__bottom {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.footer__copyright {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
  letter-spacing: var(--text-body-sm-tracking);
  color: var(--color-text-inverse);
}

.footer__social {
  display: flex;
  gap: var(--space-6);
}

.footer__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  flex-shrink: 0;
}

.footer__social-icon svg {
  width: 14px;
  height: 14px;
}


/* Fixed Buttons, Overriding Bootstrap */

.btn.btn--primary,
.btn.btn--secondary {
  text-decoration: none;
  box-shadow: none;
}
 
/* Primary */
.btn.btn--primary,
.btn.btn--primary:focus-visible {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-color: transparent;
}
.btn.btn--primary:hover {
  color: var(--color-text-inverse);
  background-color: var(--color-primary-hover);
  border-color: transparent;
}
.btn.btn--primary:active,
.btn.btn--primary:first-child:active {
  color: var(--color-text-inverse);
  background-color: var(--color-primary-active);
  border-color: transparent;
}
 
/* Secondary */
.btn.btn--secondary,
.btn.btn--secondary:focus-visible {
  color: var(--color-primary);
  background-color: transparent;
  border-color: var(--color-primary);
}
.btn.btn--secondary:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-subtle);
  border-color: var(--color-primary-hover);
}
.btn.btn--secondary:active,
.btn.btn--secondary:first-child:active {
  color: var(--color-primary-active);
  background-color: var(--color-core-200);
  border-color: var(--color-primary-active);
}
 
/* Keep the design's keyboard focus ring (Bootstrap sets outline: 0) */
.btn.btn--primary:focus-visible,
.btn.btn--secondary:focus-visible {
  outline: 2px solid var(--color-core-700);
  outline-offset: 2px;
  box-shadow: none;
}

/* Stage tab bar: slides away once the last stage section has scrolled past
   (toggled by script.hp26.js). Stands in for the dev-package's .stage-sections
   wrapper, which TYPO3 can't render around separate content elements. */

.stages__tabs {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.stages__tabs--past {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.observe__mockup img { width: 100%; height: auto; }

/* Homepage Wrap Fix */

.hero, .trio, .stages, .stages__tabs, .observe, .proof-stats, .leaders,
.workflow, .reviews, .faq, .newsletter { text-wrap: wrap; }

/* Links and CTAs: no underline, icon moves on hover */
.accordion a.accordion__link,
.accordion a.accordion__link:hover {
  text-decoration: none;
  border-bottom: 0;
}

.stages__tabs a.stages__tab,
.stages__tabs a.stages__tab:hover { text-decoration: none; }

.accordion__link .icon-arrow-up-right,
.btn .icon-chevron-right {
  transition: transform 0.25s ease;
}
.accordion__link:hover .icon-arrow-up-right {
  transform: translate(2px, -2px);
}
.btn:hover .icon-chevron-right {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .accordion__link .icon-arrow-up-right,
  .btn .icon-chevron-right { transition: none; }
}

/* Getting rid of the sticky killer */

html, body { overflow-x: clip; }

/* FAQ Links Reset */

   .faq__answer-text a { color: var(--color-primary); text-decoration: none; }
   .faq__answer-text a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Accordion Animation Smoother */

.accordion__panel,
.accordion__item--open .accordion__panel {
  display: grid;
  max-height: none;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s ease;
}
.accordion__item--open .accordion__panel { grid-template-rows: 1fr; }
.accordion__body { min-height: 0; overflow: hidden; padding-bottom: 0; }
.accordion__text { padding-bottom: 24px; }


/* ==========================================================================
   HP26 navbar (TYPO3 add-on)
   Sticky at the top of the screen. Bootstrap and the old theme also style a
   class called .navbar (flex layout, padding, and hiding it in places), so
   these rules put the design's block layout back.
   ========================================================================== */
header.navbar {
  position: sticky;
  top: 0;
  z-index: 200;
  display: block;
  flex-wrap: nowrap;
  padding: 0;
}

   .stages__tabs { top: var(--site-header-offset, 0px); }
   .observe { scroll-margin-top: calc(var(--stage-tab-offset, 64px) + var(--site-header-offset, 0px)); }

/* Navbar: use the design's compact line height, not the old theme's */
header.navbar,
header.navbar :where(li, a, p, span, button) { line-height: normal; }

/* Badge follows the item's last word, also when the title wraps */
.navbar__panel-badge {
  display: inline-block;
  margin-left: 6px;
  vertical-align: 1px;
}

/* Navbar lists: cancel the old theme's spacing on every ul/li */
header.navbar ul { margin: 0; line-height: normal; }
header.navbar li { margin: 0; padding: 0; }
header.navbar .navbar__panel-sublist { margin: 4px 0 4px 12px; }

/* No underlines on links in the navbar and the new homepage sections
   (the old theme underlines every link on hover) */
header.navbar a,
header.navbar a:hover,
:is(.hero, .trio, .stages, .stages__tabs, .observe, .proof-stats, .leaders, .workflow, .reviews, .faq) a,
:is(.hero, .trio, .stages, .stages__tabs, .observe, .proof-stats, .leaders, .workflow, .reviews, .faq) a:hover {
  text-decoration: none;
}

/* Exception: links inside running text keep their hover underline */
.proof-stats .proof-stats__text a:hover,
.faq .faq__answer-text a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* The old fixed header needed 80px of push-down space on the homepage (page-1).
   The new sticky navbar takes its own space, so drop it wherever the new navbar is on the page. */
.page-1.layout-default:has(header.navbar) .main-part,
body:has(header.navbar) .main-part { padding-top: 0; }

/* Stage sections: images get the same wide frame as the hero mockup (1600px).
   Headings and buttons stay centered; the accordion keeps a readable width. */
@media (min-width: 1025px) {
  .observe { max-width: 1600px; }
  .observe .accordion { flex: 0 0 clamp(420px, 36%, 540px); }
  .observe__mockup { flex: 1 1 auto; }
}


/* ==========================================================================
   HP26 footer (TYPO3 add-on)
   The design's .newsletter / .footer rules above style the structure. These
   rules (1) cancel the old theme's footer wrapper, (2) style the content
   elements editors manage in the footer columns, and (3) handle the
   newsletter form's spam protection and messages.
   ========================================================================== */

/* 1) The Default layout still wraps the footer in the old theme's markup */
.footer-part:has(.hp26-footer),
#footer-part:has(.hp26-footer) {
  margin: 0;
  padding: 0;
  background: none;
}
.footer-part:has(.hp26-footer) > .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.footer-part:has(.hp26-footer) .footer-inner {
  margin: 0;
  padding: 0;
}

/* Old theme list, paragraph and frame spacing inside the footer */
.hp26-footer ul { margin: 0; padding: 0; list-style: none; }
.hp26-footer li { margin: 0; padding: 0; }
.hp26-footer li::before { content: none; display: none; }
.hp26-footer .frame,
.hp26-footer .frame-container,
.hp26-footer .frame-inner {
  margin: 0;
  padding: 0;
  max-width: none;
}
.hp26-footer a:hover { text-decoration: none; }

/* 2) Link columns (colPos 31–33): bold title + link list from the backend */
.footer__col .footer-link-set > p {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
  letter-spacing: var(--text-body-sm-tracking);
  color: var(--color-core-300);
}

.footer__col .footer-link-set > p strong { font-weight: inherit; }
.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__col li,
.footer__col li a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
  letter-spacing: var(--text-body-sm-tracking);
  color: var(--color-text-inverse);
}
.footer__col li a:hover { color: var(--color-core-300); }

/* Addresses (colPos 11): each paragraph is one company, bold line = its name */
.footer__addresses { display: block; }
.footer__addresses .frame:has(.frame-inner:empty) { display: none; }
.footer__addresses .frame-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.footer__addresses p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
  letter-spacing: var(--text-body-sm-tracking);
  color: var(--color-text-inverse);
}
.footer__addresses strong {
  display: inline-block;
  margin-bottom: var(--space-2);
  font-weight: 600;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line-height);
  letter-spacing: var(--text-body-lg-tracking);
}

.footer__addresses a { color: inherit; }

@media (max-width: 480px) {
  .footer__addresses .frame-inner { grid-template-columns: 1fr; }
}

/* Bottom row: copyright text and social icons from the existing partials */
.footer__copyright p { margin: 0; color: inherit; font: inherit; }
.footer__social ul { display: flex; gap: var(--space-6); }
.footer__social img { display: block; width: 24px; height: 24px; }
.footer__social a { opacity: 0.85; transition: opacity 0.2s ease; }
.footer__social a:hover { opacity: 1; }


.hp26-footer .footer__btn-white { color: var(--color-core-700); }
.hp26-footer .footer__btn-outline { color: var(--color-text-inverse); }
.footer__logo { display: inline-block; line-height: 0; }
.footer__logo img { height: auto; }
a.footer__affiliate-title { text-decoration: none; }

/* 3) Newsletter form: spam protection stays invisible, messages below the form */
.hp26-visually-hidden,
.hp26-altcha {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hp26-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.newsletter__form {
  position: relative;
  flex-wrap: wrap;
}
.newsletter__message {
  display: none;
  flex-basis: 100%;
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-inverse);
}