/* ==========================================================================
   core.css: TWIPLA design system, loaded on EVERY page
   Tokens, fonts, base elements and shared components (buttons, icons, pills,
   eyebrows, accordions, FAQ), plus the site-wide chrome: announcement bar,
   navbar, breadcrumb, newsletter card and footer.
   Load order: old theme CSS, then core.css, then homepage.css (homepage only),
   then legacy-bridge.css (every page, last).
   Rule of thumb: a component used on more than one page type lives here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
/* ==========================================================================
   DESIGN TOKENS
   Raw scales first, semantic aliases second. Components should reference
   the semantic layer, not the raw scale, so a future rebrand or contrast
   fix only touches this file.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------------
     RAW COLOR SCALES
     ------------------------------------------------------------------------ */

  /* Core (purple / brand) */
  --color-core-50:  #F7F2FD;
  --color-core-100: #EDE0FA;
  --color-core-200: #DBBFF8;
  --color-core-300: #C28EF6;
  --color-core-400: #9E49F3;
  --color-core-500: #800DF2;
  --color-core-600: #6B07CF;
  --color-core-700: #5C04B4; /* base */
  --color-core-800: #47048B;
  --color-core-900: #330462;
  --color-core-950: #1F033A;

  /* Core Neutral (greys with a purple cast) */
  --color-core-neutral-50:  #FAF9FC;
  --color-core-neutral-100: #F4F2F8;
  --color-core-neutral-200: #E9E6F0;
  --color-core-neutral-300: #D8D3E3;
  --color-core-neutral-400: #A99FBA;
  --color-core-neutral-500: #7A7191;
  --color-core-neutral-600: #5C5470; /* base */
  --color-core-neutral-700: #453F56;
  --color-core-neutral-800: #3F3A4E;
  --color-core-neutral-900: #332F3F;
  --color-core-neutral-950: #282531;

  /* Accent (orange) — anchored at 500 with the exact brand hex, tints/shades
     scaled proportionally using the same lightness/saturation curve as Core */
  --color-accent-50:  #FCEBE0;
  --color-accent-100: #FAE0CE;
  --color-accent-200: #FACCAB;
  --color-accent-300: #FCAF79;
  --color-accent-400: #FD8733;
  --color-accent-500: #F56600; /* base — exact brand input */
  --color-accent-600: #CE5600;
  --color-accent-700: #B14A00;
  --color-accent-800: #893900;
  --color-accent-900: #622900;
  --color-accent-950: #3B1800;


  /* ------------------------------------------------------------------------
     SEMANTIC COLOR ALIASES
     To be defined/modified later. Placeholders kept minimal on purpose.
     ------------------------------------------------------------------------ */

  /* Brand / interactive */
  --color-primary:         var(--color-core-700);
  --color-primary-hover:   var(--color-core-600);
  --color-primary-active:  var(--color-core-800);
  --color-primary-subtle:  var(--color-core-100);
  --color-accent-default:  var(--color-accent-500);

  /* Text */
  --color-text:            var(--color-core-neutral-950);
  --color-text-muted:      var(--color-core-neutral-600);
  --color-text-subtle:     var(--color-core-neutral-500);
  --color-text-inverse:    var(--color-core-neutral-50);
  --color-text-link:       var(--color-core-700);

  /* Surfaces & borders */
  --color-surface:         #FFFFFF;
  --color-surface-alt:     var(--color-core-neutral-50);
  --color-surface-dark:    var(--color-core-neutral-950);
  --color-border:          var(--color-core-neutral-200);
  --color-border-strong:   var(--color-core-neutral-400);


  /* ------------------------------------------------------------------------
     SPACING SCALE
     4px base. Use for margin, padding, gap. Semantic aliases (e.g.
     --space-section, --space-card-padding) can be layered on later.
     ------------------------------------------------------------------------ */

  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  0.125rem; /* 2px */
  --space-1:    0.25rem;  /* 4px */
  --space-1-5:  0.375rem; /* 6px */
  --space-2:    0.5rem;   /* 8px */
  --space-3:    0.75rem;  /* 12px */
  --space-4:    1rem;     /* 16px */
  --space-5:    1.25rem;  /* 20px */
  --space-6:    1.5rem;   /* 24px */
  --space-8:    2rem;     /* 32px */
  --space-10:   2.5rem;   /* 40px */
  --space-12:   3rem;     /* 48px */
  --space-16:   4rem;     /* 64px */
  --space-20:   5rem;     /* 80px */
  --space-24:   6rem;     /* 96px */
  --space-32:   8rem;     /* 128px */


  /* ------------------------------------------------------------------------
     RADIUS SCALE
     ------------------------------------------------------------------------ */

  --radius-none: 0;
  --radius-sm:   0.25rem;  /* 4px  — inputs, tags, small buttons */
  --radius-md:   0.5rem;   /* 8px  — buttons, form fields */
  --radius-lg:   0.75rem;  /* 12px — cards, modals */
  --radius-xl:   1rem;     /* 16px — large cards, panels */
  --radius-2xl:  1.5rem;   /* 24px — hero panels, feature blocks */
  --radius-full: 9999px;   /* pills, avatars */


  /* ------------------------------------------------------------------------
     BORDERS
     Widths and a ready-to-use shorthand built from the color aliases above.
     ------------------------------------------------------------------------ */

  --border-width-thin:    1px;
  --border-width-default: 1px;
  --border-width-thick:   2px;
  --border-style: solid;

  --border-default: var(--border-width-default) var(--border-style) var(--color-border);
  --border-strong:  var(--border-width-thick) var(--border-style) var(--color-border-strong);


  /* ------------------------------------------------------------------------
     TYPE — FONT FAMILIES
     ------------------------------------------------------------------------ */

  --font-heading: "Plus Jakarta Sans", sans-serif;
  --font-body: "Inter Variable", sans-serif;


  /* ------------------------------------------------------------------------
     TYPE SCALE — desktop values (default)
     Mobile overrides are applied in the media query below.
     ------------------------------------------------------------------------ */

  --text-display-size: 4.5rem;
  --text-display-line-height: 1.05;
  --text-display-tracking: -0.03em;

  --text-h1-size: 3.25rem;
  --text-h1-line-height: 1.08;
  --text-h1-tracking: -0.025em;
  --text-h1-color: var(--color-core-700);

  --text-h2-size: 3rem;
  --text-h2-line-height: 1.1;
  --text-h2-tracking: -0.022em;

  --text-h3-size: 2.5rem;
  --text-h3-line-height: 1.15;
  --text-h3-tracking: -0.02em;
  --text-h3-color: var(--color-core-neutral-800);

  --text-h4-size: 1.875rem;
  --text-h4-line-height: 1.25;
  --text-h4-tracking: -0.015em;

  --text-h5-size: 1.5rem;
  --text-h5-line-height: 1.35;
  --text-h5-tracking: -0.01em;
  /* H5 is used with either color depending on context — no single default baked
     into .text-h5 below. Use .text-h5--core or .text-h5--neutral to pick one. */
  --text-h5-color-core:    var(--color-core-700);
  --text-h5-color-neutral: var(--color-core-neutral-500);

  --text-h6-size: 1.25rem;
  --text-h6-line-height: 1.4;
  --text-h6-tracking: -0.005em;
  --text-h6-color: var(--color-core-700);

  /* Body sizes: only Body Large actually changes at mobile */
  --text-body-lg-size: 1.125rem;
  --text-body-lg-line-height: 1.6;
  --text-body-lg-tracking: -0.011em;

  --text-body-size: 1rem;
  --text-body-line-height: 1.6;
  --text-body-tracking: -0.011em;

  --text-body-sm-size: 0.875rem;
  --text-body-sm-line-height: 1.5;
  --text-body-sm-tracking: -0.006em;

  --text-caption-size: 0.75rem;
  --text-caption-line-height: 1.4;
  --text-caption-tracking: 0em;
}

/* Mobile overrides — matches the "Mobile Size (rem)" column in the type scale */
@media (max-width: 767px) {
  :root {
    --text-display-size: 2.75rem;
    --text-h1-size: 2.25rem;
    --text-h2-size: 2rem;
    --text-h3-size: 1.75rem;
    --text-h4-size: 1.375rem;
    --text-h5-size: 1.25rem;
    --text-h6-size: 1.125rem;
    --text-body-lg-size: 1rem;
    /* Body, Body Small and Caption are fixed at all breakpoints */
  }
}


/* ==========================================================================
   TYPE UTILITY CLASSES
   Bundles each role's size, line-height, tracking, family and (where fixed)
   color into one class, since a single CSS variable can't carry multiple
   properties on its own.
   ========================================================================== */

.text-display { font-family: var(--font-heading); font-size: var(--text-display-size); line-height: var(--text-display-line-height); letter-spacing: var(--text-display-tracking); }
.text-h1      { font-family: var(--font-heading); font-size: var(--text-h1-size);      line-height: var(--text-h1-line-height);      letter-spacing: var(--text-h1-tracking); color: var(--text-h1-color); }
.text-h2      { font-family: var(--font-heading); font-size: var(--text-h2-size);      line-height: var(--text-h2-line-height);      letter-spacing: var(--text-h2-tracking); }
.text-h3      { font-family: var(--font-heading); font-size: var(--text-h3-size);      line-height: var(--text-h3-line-height);      letter-spacing: var(--text-h3-tracking); color: var(--text-h3-color); }
.text-h4      { font-family: var(--font-heading); font-size: var(--text-h4-size);      line-height: var(--text-h4-line-height);      letter-spacing: var(--text-h4-tracking); }
.text-h5      { font-family: var(--font-heading); font-size: var(--text-h5-size);      line-height: var(--text-h5-line-height);      letter-spacing: var(--text-h5-tracking); }
.text-h5--core    { color: var(--text-h5-color-core); }
.text-h5--neutral { color: var(--text-h5-color-neutral); }
.text-h6      { font-family: var(--font-heading); font-size: var(--text-h6-size);      line-height: var(--text-h6-line-height);      letter-spacing: var(--text-h6-tracking); color: var(--text-h6-color); }

.text-body-lg { font-family: var(--font-body); font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); letter-spacing: var(--text-body-lg-tracking); }
.text-body    { font-family: var(--font-body); font-size: var(--text-body-size);    line-height: var(--text-body-line-height);    letter-spacing: var(--text-body-tracking); }
.text-body-sm { 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); }
.text-caption { font-family: var(--font-body); font-size: var(--text-caption-size); line-height: var(--text-caption-line-height); letter-spacing: var(--text-caption-tracking); }

/* ==========================================================================
   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;
  }
}

/* --------------------------------------------------------------------------
   Pill (e.g. "New: Growth Engine") and its link states
   -------------------------------------------------------------------------- */
.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 { 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); }

/* --------------------------------------------------------------------------
   Eyebrow label above section headings
   -------------------------------------------------------------------------- */
.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;
}

/* --------------------------------------------------------------------------
   Accordion (stage sections; reusable for feature rows)
   -------------------------------------------------------------------------- */
.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 icon (accordions, FAQ)
   -------------------------------------------------------------------------- */
.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);
}

/* ==========================================================================
   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-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;
}
.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;
}

.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;
}

/* Badge follows the item's last word, also when the title wraps */
.navbar__panel-badge {
  display: inline-block;
  margin-left: 6px;
  vertical-align: 1px;
}
.faq .faq__answer-text a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Footer: backend content (link columns, addresses) and newsletter spam protection
   -------------------------------------------------------------------------- */
/* 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);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
.faq__question {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ==========================================================================
   768px: phones / small tablets
   ========================================================================== */
@media (max-width: 768px) {

  .accordion {
    width: 100%;
  }

  /* --- Newsletter card: stacked, pill field full width --- */
  .newsletter__inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .hp26-footer .newsletter__inner {
    padding: 20px;
  }

  .newsletter__left {
    flex-direction: column;
    text-align: center;
  }

  .newsletter__form,
  .hp26-footer .newsletter__form,
  .hp26-footer .newsletter__input {
    width: 100%;
    flex-basis: 100%;
  }

  /* --- Footer --- */
  .footer__top {
    flex-direction: column;
    gap: 40px;
  }

  .footer__brand {
    max-width: none;
  }

  .footer__col {
    width: 100%;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ==========================================================================
   480px: small phones
   ========================================================================== */
@media (max-width: 480px) {

  /* --- FAQ --- */
  .faq__question {
    padding: 20px 16px 20px 20px;
    font-size: 17px;
  }

  .faq__answer-text {
    padding: 0 20px 0 20px;
  }

  /* --- Footer --- */
  .footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .footer__cta-row {
    flex-direction: column;
    align-items: stretch;
  }
}