/* ---------------------------------------------------------------------
   THEME DESIGN TOKENS — the single source of truth for a rebrand.

   Everything below the :root block is built from these tokens, so rebranding
   a client is mostly editing :root. The `figma-to-theme` skill extracts each
   group from a Figma design and records the chosen values in STYLE-GUIDE.md.

   Groups: Colors · Typography (fonts / scale / rhythm) · Buttons · Forms ·
   Containers · Spacing & shape. Edit values here; the rules further down only
   need touching for structural (non-token) changes.
   --------------------------------------------------------------------- */
:root {
  /* ---------------------- COLORS ---------------------- */
  /* Brand */
  --color-primary: #ff5e00;
  --color-primary-hover: #e65400;
  --color-on-primary: #ffffff;          /* text/icons on top of primary */
  --color-secondary: #062b2d;
  --color-secondary-hover: #0a4145;
  --color-on-secondary: #ffffff;
  --color-tertiary: #e5dfd2;
  --color-tertiary-hover: #d8d0bd;
  --color-on-tertiary: #062b2d;

  /* Text & links */
  --color-heading: #000000;             /* headings */
  --color-text: #2d2d2d;                /* body text */
  --color-text-muted: #5f6360;          /* secondary text */
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-hover);

  /* Utility / semantic */
  --color-danger: #dc2626;
  --color-warning: #f59e0b;
  --color-info: #0ea5e9;
  --color-success: #16a34a;
  --color-whatsapp: rgb(37 211 102);
  --color-dark: #062b2d;
  --color-light: #f7f5f0;

  /* Surfaces & borders */
  --color-bg: #ffffff;                  /* page background */
  --color-bg-soft: #F7F5F1;             /* alternating section / card background */
  --color-bg-muted: #f2f4f4;            /* neutral cool fill (accordion headers, etc.) */
  --color-border: #e5e7ea;              /* borders / dividers */
  --color-footer-divider: #202a3f;      /* divider on the dark footer */

  /* Gradients (two definitions) */
  --gradient-one: linear-gradient(135deg, #ff5e00, #ff8a3d);
  --gradient-two: linear-gradient(135deg, #062b2d, #0a4145);

  /* ---------------- TYPOGRAPHY — FONTS ---------------- */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-h6: var(--font-heading);       /* some designs use a distinct font for H6 / overlines */
  --font-lead: var(--font-body);        /* lead/intro paragraph */
  --font-button: "Roboto Condensed", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --weight-body: 400;
  --weight-heading: 700;
  --weight-h1: 700;
  --weight-h2-h5: 700;                  /* shared weight for H2–H5 */
  --weight-h6: 700;

  /* ------------ TYPOGRAPHY — TYPE SCALE ------------ */
  /* clamp(min, fluid, max) gives a responsive min/max range per step. */
  /* Display sizes sit ABOVE h1 — display-4 (smallest) still exceeds h1 at every step. */
  --fs-display-1: clamp(3.75rem, 8vw, 6rem);
  --fs-display-2: clamp(3.4rem, 7vw, 5rem);
  --fs-display-3: clamp(3rem, 6vw, 4.25rem);
  --fs-display-4: clamp(2.6rem, 5vw, 3.75rem);

  --fs-h1: clamp(2.25rem, 5vw, 3.125rem);   /* 50px */
  --fs-h2: clamp(1.875rem, 3.6vw, 2.375rem); /* 38px */
  --fs-h3: clamp(1.5rem, 2.4vw, 1.75rem);    /* 28px */
  --fs-h4: 1.25rem;                          /* 20px */
  --fs-h5: 1rem;                             /* 16px */
  --fs-h6: 0.875rem;                         /* 14px */

  --fs-lead: 1.15rem;                   /* lead paragraph */
  --fs-base: 1rem;                      /* body — 16px */
  --fs-sm: 0.875rem;                    /* small / captions — 14px */

  /* ------------ TYPOGRAPHY — RHYTHM ------------ */
  --lh-heading: 1.12;                   /* default heading line height */
  --lh-body: 1.5;                       /* body line height */
  --lh-lead: 1.5;                       /* lead paragraph line height */
  --lh-h1: 1.12;                        /* per-heading overrides (optional) */
  --lh-h2: 1.1;

  --ls-tight: -0.02em;                  /* headings */
  --ls-normal: 0;                       /* body */
  --ls-wide: 0.12em;                    /* eyebrows / overlines / small caps */

  /* -------------------- BUTTONS -------------------- */
  --btn-radius: 100px;
  --btn-weight: 700;
  /* default size (medium — 50px tall) */
  --btn-py: 0.85rem;
  --btn-px: 1.5625rem;
  --btn-fs: 0.875rem;
  /* small size (46px tall) */
  --btn-py-sm: 0.7rem;
  --btn-px-sm: 1.25rem;
  --btn-fs-sm: 0.8125rem;
  /* large size (56px tall) */
  --btn-py-lg: 1rem;
  --btn-px-lg: 1.875rem;
  --btn-fs-lg: 1rem;

  /* --------------------- FORMS --------------------- */
  --field-bg: #ffffff;
  --field-text: var(--color-text);
  --field-placeholder: var(--color-text-muted);
  --field-border: var(--color-border);
  --field-border-focus: var(--color-primary);
  --field-radius: 12px;
  --field-focus-ring: color-mix(in srgb, var(--color-primary) 18%, transparent);
  --label-color: var(--color-heading);
  --label-weight: 600;
  --error-color: var(--color-danger);

  /* ------------------- CONTAINERS ------------------- */
  --container-sm: 720px;
  --container: 1140px;                  /* default — 15px side padding → 1110px content */
  --container-lg: 1360px;

  /* Figma 12-col reference (1110px content = 12 x 65px + 11 x 30px) */
  --grid-col: 65px;
  --grid-gutter: 30px;

  /* -------------- SPACING & SHAPE -------------- */
  /* Section padding tokens */
  --pad-half: clamp(2rem, 4vw, 3.125rem);
  --pad-full: clamp(3.5rem, 7vw, 6.25rem); /* 100px */
  /* Reusable spacer steps */
  --space-25: 0.5rem;
  --space-50: 1rem;
  --space-75: 1.5rem;
  --space-100: 2rem;
  /* Shape & depth */
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.04);
  /* Card system (see COMPONENTS) — the one card radius/padding for the whole site */
  --card-radius: 20px;
  --card-pad: 1.8rem;
}

/* --------------------- BASE --------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  margin: 0 0 .5em;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); font-weight: var(--weight-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); font-weight: var(--weight-h2-h5); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--weight-h2-h5); }
h4 { font-size: var(--fs-h4); font-weight: var(--weight-h2-h5); }
h5 { font-size: var(--fs-h5); font-weight: var(--weight-h2-h5); }
h6 { font-size: var(--fs-h6); font-weight: var(--weight-h6); font-family: var(--font-h6); }
p { margin: 0 0 1rem; }

/* Display utilities — bigger than H1, for hero/marketing headlines */
.display-1 { font-family: var(--font-heading); font-weight: var(--weight-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-tight); font-size: var(--fs-display-1); margin: 0 0 .4em; }
.display-2 { font-family: var(--font-heading); font-weight: var(--weight-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-tight); font-size: var(--fs-display-2); margin: 0 0 .4em; }
.display-3 { font-family: var(--font-heading); font-weight: var(--weight-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-tight); font-size: var(--fs-display-3); margin: 0 0 .4em; }
.display-4 { font-family: var(--font-heading); font-weight: var(--weight-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-tight); font-size: var(--fs-display-4); margin: 0 0 .4em; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 2.2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 1rem;
}
.lede, .lead {
  font-family: var(--font-lead);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-text-muted);
  max-width: 48ch;
}

/* ------------------- CONTAINERS ------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 15px; }
.container--sm { max-width: var(--container-sm); }
.container--lg { max-width: var(--container-lg); }

/* ---------------- Grid system (Bootstrap-style, 12 columns) ----------------
   Flexbox-based so offsets are flow-relative like Bootstrap (a margin-left gap
   AFTER the preceding column). The flex `gap` supplies the gutters, so the
   column math is driven entirely by the single --grid-gutter token (no magic
   numbers): with 12 columns there are 11 gutters, hence `11 * var(--grid-gutter)`.
   Column flex-basis = calc((100% - 11*g)/12 * N + (N-1)*g) where g = the gutter;
   an N-col span also swallows its (N-1) internal gutters. On a .container (1110px
   content) with g = 30px this is exactly 65px columns — the Figma grid. Change
   --grid-gutter once and both the gap and the widths stay in sync. Mobile-first:
   write `col-12 col-md-6` to stack below the md breakpoint (861px) and split
   at/above it. Two responsive tiers exist — md (861px) and lg (1101px) — and they
   compose: `col-12 col-md-9 col-lg-8` stacks, then goes 9/3, then 8/4. Spans on
   one line add up to 12 (offsets count too). */
.row { display: flex; flex-wrap: wrap; gap: var(--grid-gutter); align-items: stretch; }
.row > * { min-width: 0; }
.row--center { align-items: center; }
.row--start { align-items: flex-start; }
.row--end { align-items: flex-end; }
.row--baseline { align-items: baseline; }

.col-1 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 1 + 0 * var(--grid-gutter)); }
.col-2 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 2 + 1 * var(--grid-gutter)); }
.col-3 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 3 + 2 * var(--grid-gutter)); }
.col-4 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 4 + 3 * var(--grid-gutter)); }
.col-5 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 5 + 4 * var(--grid-gutter)); }
.col-6 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 6 + 5 * var(--grid-gutter)); }
.col-7 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 7 + 6 * var(--grid-gutter)); }
.col-8 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 8 + 7 * var(--grid-gutter)); }
.col-9 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 9 + 8 * var(--grid-gutter)); }
.col-10 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 10 + 9 * var(--grid-gutter)); }
.col-11 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 11 + 10 * var(--grid-gutter)); }
.col-12 { flex: 0 1 100%; }

@media (min-width: 861px) {
  .col-md-1 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 1 + 0 * var(--grid-gutter)); }
  .col-md-2 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 2 + 1 * var(--grid-gutter)); }
  .col-md-3 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 3 + 2 * var(--grid-gutter)); }
  .col-md-4 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 4 + 3 * var(--grid-gutter)); }
  .col-md-5 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 5 + 4 * var(--grid-gutter)); }
  .col-md-6 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 6 + 5 * var(--grid-gutter)); }
  .col-md-7 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 7 + 6 * var(--grid-gutter)); }
  .col-md-8 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 8 + 7 * var(--grid-gutter)); }
  .col-md-9 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 9 + 8 * var(--grid-gutter)); }
  .col-md-10 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 10 + 9 * var(--grid-gutter)); }
  .col-md-11 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 11 + 10 * var(--grid-gutter)); }
  .col-md-12 { flex: 0 1 100%; }
  .offset-md-0 { margin-left: 0; }
  .offset-md-1 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 1 + 1 * var(--grid-gutter)); }
  .offset-md-2 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 2 + 2 * var(--grid-gutter)); }
  .offset-md-3 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 3 + 3 * var(--grid-gutter)); }
  .offset-md-4 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 4 + 4 * var(--grid-gutter)); }
  .offset-md-5 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 5 + 5 * var(--grid-gutter)); }
  .offset-md-6 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 6 + 6 * var(--grid-gutter)); }
  .offset-md-7 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 7 + 7 * var(--grid-gutter)); }
  .offset-md-8 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 8 + 8 * var(--grid-gutter)); }
  .offset-md-9 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 9 + 9 * var(--grid-gutter)); }
  .offset-md-10 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 10 + 10 * var(--grid-gutter)); }
  .offset-md-11 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 11 + 11 * var(--grid-gutter)); }
}

/* lg tier — the theme's existing wide boundary (see the 1101px query further
   down). A full tier, cols AND offsets, so no `col-lg-*`/`offset-lg-*` class is
   silently inert. Stack `col-12 col-md-9 col-lg-8` to widen at this step. */
@media (min-width: 1101px) {
  .col-lg-1 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 1 + 0 * var(--grid-gutter)); }
  .col-lg-2 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 2 + 1 * var(--grid-gutter)); }
  .col-lg-3 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 3 + 2 * var(--grid-gutter)); }
  .col-lg-4 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 4 + 3 * var(--grid-gutter)); }
  .col-lg-5 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 5 + 4 * var(--grid-gutter)); }
  .col-lg-6 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 6 + 5 * var(--grid-gutter)); }
  .col-lg-7 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 7 + 6 * var(--grid-gutter)); }
  .col-lg-8 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 8 + 7 * var(--grid-gutter)); }
  .col-lg-9 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 9 + 8 * var(--grid-gutter)); }
  .col-lg-10 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 10 + 9 * var(--grid-gutter)); }
  .col-lg-11 { flex: 0 1 calc((100% - 11 * var(--grid-gutter)) / 12 * 11 + 10 * var(--grid-gutter)); }
  .col-lg-12 { flex: 0 1 100%; }
  .offset-lg-0 { margin-left: 0; }
  .offset-lg-1 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 1 + 1 * var(--grid-gutter)); }
  .offset-lg-2 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 2 + 2 * var(--grid-gutter)); }
  .offset-lg-3 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 3 + 3 * var(--grid-gutter)); }
  .offset-lg-4 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 4 + 4 * var(--grid-gutter)); }
  .offset-lg-5 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 5 + 5 * var(--grid-gutter)); }
  .offset-lg-6 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 6 + 6 * var(--grid-gutter)); }
  .offset-lg-7 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 7 + 7 * var(--grid-gutter)); }
  .offset-lg-8 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 8 + 8 * var(--grid-gutter)); }
  .offset-lg-9 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 9 + 9 * var(--grid-gutter)); }
  .offset-lg-10 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 10 + 10 * var(--grid-gutter)); }
  .offset-lg-11 { margin-left: calc((100% - 11 * var(--grid-gutter)) / 12 * 11 + 11 * var(--grid-gutter)); }
}

/* --------------- SPACING UTILITIES --------------- */
.section { padding-top: var(--pad-full); padding-bottom: var(--pad-full); }
.section--tight { padding-top: var(--pad-half); padding-bottom: var(--pad-half); }
.spacer-25 { height: var(--space-25); }
.spacer-50 { height: var(--space-50); }
.spacer-75 { height: var(--space-75); }
.spacer-100 { height: var(--space-100); }

/* --------------------- BUTTONS --------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--btn-radius);
  font-family: var(--font-button);
  font-weight: var(--btn-weight);
  font-size: var(--btn-fs);
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease, filter .15s ease;
}
.btn svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.btn--sm { padding: var(--btn-py-sm) var(--btn-px-sm); font-size: var(--btn-fs-sm); }
.btn--lg { padding: var(--btn-py-lg) var(--btn-px-lg); font-size: var(--btn-fs-lg); }

/* Variant 1 — primary */
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }

/* Variant 2 — secondary */
.btn--secondary { background: var(--color-secondary); color: var(--color-on-secondary); box-shadow: var(--shadow-sm); }
.btn--secondary:hover { background: var(--color-secondary-hover); color: var(--color-on-secondary); }

/* Variant 3 — tertiary (outline) */
.btn--tertiary { background: transparent; color: var(--color-tertiary); border-color: var(--color-border); }
.btn--tertiary:hover { background: var(--color-tertiary-hover); color: var(--color-on-tertiary); border-color: var(--color-tertiary-hover); }

/* Outline variants — transparent fill, brand-colored text + border; fills on hover */
.btn--primary-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--primary-outline:hover { background: var(--color-primary); color: var(--color-on-primary); }
.btn--secondary-outline { background: transparent; color: var(--color-secondary); border-color: var(--color-secondary); }
.btn--secondary-outline:hover { background: var(--color-secondary); color: var(--color-on-secondary); }
.btn--tertiary-outline { background: transparent; color: var(--color-tertiary); border-color: var(--color-tertiary); }
.btn--tertiary-outline:hover { background: var(--color-tertiary); color: var(--color-on-tertiary); }

/* Variant 4 — gradient one */
.btn--gradient-one { background: var(--gradient-one); color: var(--color-on-primary); box-shadow: var(--shadow-sm); }
.btn--gradient-one:hover { color: var(--color-on-primary); filter: brightness(1.06); }

/* Variant 5 — gradient two */
.btn--gradient-two { background: var(--gradient-two); color: var(--color-on-primary); box-shadow: var(--shadow-sm); }
.btn--gradient-two:hover { color: var(--color-on-primary); filter: brightness(1.12); }

/* Ghost on a dark/photo surface — white outline, white text */
.btn--ghost-light { background: transparent; color: #fff; border-color: #fff; }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* --------------------- HubSpot form (@hubspot/form) --------------------- */
/* Overrides HubSpot's injected baseline form stylesheet — the !important flags
   target exactly the properties HubSpot forces on module-added forms. See the
   `hubspot-forms` skill; the preview reproduces the baseline so this validates
   locally. All values read from the FORMS tokens in :root. */
.hs-form fieldset { display: grid; gap: 1rem; max-width: none !important; margin: 0; padding: 0; border: 0; }
.hs-form fieldset.form-columns-2 { grid-template-columns: 1fr 1fr; }
.hs-form .hs-form-field { width: auto !important; float: none !important; margin: 0 0 1.1rem; }
.hs-form .input { margin-right: 0 !important; }
.hs-form label { display: block; font-size: .9rem; font-weight: var(--label-weight); color: var(--label-color); margin-bottom: .4rem; }
.hs-form .hs-form-required { color: var(--color-primary); margin-left: .15rem; }
.hs-form .hs-input {
  width: 100% !important; max-width: 100% !important; box-sizing: border-box;
  min-height: 0 !important; font: inherit; color: var(--field-text); background: var(--field-bg);
  border: 1px solid var(--field-border); border-radius: var(--field-radius);
  padding: .7rem .85rem !important; transition: border-color .15s ease, box-shadow .15s ease;
}
.hs-form .hs-input::placeholder { color: var(--field-placeholder); opacity: .7; }
.hs-form .hs-input:focus { outline: none; border-color: var(--field-border-focus); box-shadow: 0 0 0 3px var(--field-focus-ring); }
.hs-form textarea.hs-input { resize: vertical; min-height: 150px !important; padding: .7rem .85rem !important; }
/* Radio / checkbox option lists (e.g. "Do you currently live in Germany?").
   Generic `.hs-input { width:100% }` and `label { display:block }` stretch and
   stack HubSpot's option markup; keep the control beside its Yes/No label. */
.hs-form ul.inputs-list {
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.35rem;
}
.hs-form ul.inputs-list > li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hs-form .hs-form-radio-display,
.hs-form .hs-form-checkbox-display,
.hs-form ul.inputs-list label {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  margin: 0 !important;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text);
  cursor: pointer;
}
.hs-form ul.inputs-list input[type="radio"],
.hs-form ul.inputs-list input[type="checkbox"],
.hs-form .hs-form-radio-display input[type="radio"],
.hs-form .hs-form-checkbox-display input[type="checkbox"],
.hs-form input.hs-input[type="radio"],
.hs-form input.hs-input[type="checkbox"] {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  accent-color: var(--color-primary);
}
.hs-form .hs-button {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  margin-top: .3rem; padding: var(--btn-py-lg) var(--btn-px-lg); font: inherit; font-weight: var(--btn-weight); font-size: var(--btn-fs-lg);
  color: var(--color-on-primary); background: var(--color-primary); border: 1px solid transparent;
  border-radius: var(--btn-radius); box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.hs-form .hs-button:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.hs-error-msgs { list-style: none; margin: .4rem 0 0; padding: 0; }
/* HubSpot renders errors as <label class="hs-error-msg">, so `.hs-form label`
   (0,1,1) would win — bump specificity + !important so error text is danger. */
.hs-form .hs-error-msgs label,
.hs-form label.hs-error-msg,
.hs-form .hs-error-msg { color: var(--color-danger) !important; font-size: .82rem; font-weight: var(--label-weight); margin-bottom: 0; }

/* Consent (legal-consent-container): smaller text + shield icon, moved BELOW the
   submit button. The form is a flex column so `order` can reposition it; the
   consent fieldset is found via :has() (HubSpot gives every fieldset one class). */
.hs-form { display: flex; flex-direction: column; }
.hs-form .hs_submit { order: 1; }
.hs-form fieldset:has(.legal-consent-container) { order: 2; margin-top: 1rem; }
/* The container holds a variable number of blocks — a processing notice, an
   optional subscription checkbox, unsubscribe and submit notices. Grid keeps
   the shield in its own column and STACKS every block in the second one; as a
   flex row they were laid out side by side as narrow columns. */
.hs-form .legal-consent-container { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .5rem .55rem; }
.hs-form .legal-consent-container > * { grid-column: 2; min-width: 0; }
.hs-form .legal-consent-container::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5e00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
}
.hs-form .legal-consent-container .hs-richtext { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--color-text-muted); }
.hs-form .legal-consent-container a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
/* Subscription checkbox inside the consent block. HubSpot ships it as a
   bulleted <ul>, and the generic `.hs-form label` / `.hs-input` rules would
   otherwise make its text a bold field label and stretch the box to 100%. */
/* Scoped to the consent block on purpose: a checkbox field elsewhere in a form
   is an ordinary question and must keep the normal label styling. */
.hs-form .legal-consent-container .hs-form-field { margin: 0; }
.hs-form .legal-consent-container .inputs-list { list-style: none; margin: 0; padding: 0; }
.hs-form .legal-consent-container .hs-form-booleancheckbox-display {
  display: flex; align-items: flex-start; gap: .5rem; margin: 0;
  font-size: .78rem; font-weight: 400; line-height: 1.5; color: var(--color-text-muted);
}
.hs-form .legal-consent-container .hs-form-booleancheckbox-display input[type="checkbox"] {
  width: auto !important; flex: 0 0 auto; margin: .15rem 0 0;
  padding: 0 !important; min-height: 0 !important; accent-color: var(--color-primary);
}
@media (max-width: 760px) {
  .hs-form fieldset.form-columns-2,
  .offermodal__form .hs-form fieldset.form-columns-2 { grid-template-columns: 1fr; }
}

/* --------------------- HubSpot CTA (@hubspot/cta) --------------------- */
/* HubSpot renders CTAs two ways and this covers both: new "web interactive"
   (an <a> inside .hs-web-interactive-inline) and legacy (<a class="cta_button">).
   The .cta-btn wrapper makes either match .btn--primary. See the `hubspot-ctas`
   skill; the preview renders the real web-interactive markup so this validates
   locally. */
.cta-btn,
.cta-btn .hs_cos_wrapper,
.cta-btn .hs-web-interactive-inline,
.cta-btn .hs-cta-wrapper,
.cta-btn .hs-cta-node { display: inline-flex; }
.cta-btn .hs-web-interactive-inline a,
.cta-btn a.cta_button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: var(--btn-py) var(--btn-px); border-radius: var(--btn-radius);
  font-family: var(--font-button); font-weight: var(--btn-weight); font-size: var(--btn-fs); line-height: 1;
  text-transform: uppercase; border: 1px solid transparent; text-decoration: none; cursor: pointer;
  background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-sm);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}
.cta-btn--lg .hs-web-interactive-inline a,
.cta-btn--lg a.cta_button { padding: var(--btn-py-lg) var(--btn-px-lg); font-size: var(--btn-fs-lg); }
.cta-btn .hs-web-interactive-inline a:hover,
.cta-btn a.cta_button:hover { background: var(--color-primary-hover); transform: translateY(-1px); color: var(--color-on-primary); }

/* --------------------- Header --------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  /* Fallback for browsers without color-mix() (Safari < 16.2): same tint via
     relative rgba over the token, replaced by color-mix where supported. */
  background: rgba(255, 255, 255, 0.82);
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
/* Without backdrop blur the 82% tint reads as transparent over page content —
   go near-opaque so nav text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: var(--color-bg);
    background: color-mix(in srgb, var(--color-bg) 97%, transparent);
  }
}
/* Fixed header no longer occupies flow space — push the page down under it.
   Scoped with :has() so pages that disable the coded header keep no gap. */
body:has(.site-header) { padding-top: 80px; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; }
.brand__mark { display: block; width: auto; }

.site-nav { display: flex; align-items: center; gap: 2rem; margin-left: auto; }
.nav-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.25rem; }
.nav-item { position: relative; }
.nav-link {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600; line-height: 1;
  color: var(--color-heading); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: color .15s ease;
}
.nav-link:hover { color: var(--color-primary); }
.nav-chevron { width: 10px; height: 6px; transition: transform .2s ease; }

/* Dropdown menus (Expat Stages, Insurance) */
.nav-dropdown {
  position: absolute; top: calc(100% + 16px); left: 0;
  min-width: 230px; padding: .5rem;
  background: #fff; border: 1px solid var(--color-border); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(6, 43, 45, .14);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease; z-index: 60;
}
.nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
/* Desktop open is JS-driven (.is-open via hover-intent in main.js) so the
   button→menu gap can't snap it shut; no CSS :hover opener to fight the JS state. */
.nav-item--dropdown.is-open .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.nav-item--dropdown.is-open .nav-chevron { transform: rotate(180deg); }
.nav-dropdown__link {
  display: block; padding: .6rem .8rem; border-radius: 9px; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: 500; color: var(--color-text); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.nav-dropdown__link:hover { background: var(--color-bg-soft); color: var(--color-primary); }

/* Mega dropdowns (Life in Germany, Insurance) — the panel escapes the nav item
   and centers under the full-width header. The nav item goes static so the
   dropdown positions against .site-header (which is sticky = positioned). */
.nav-item--mega { position: static; }
.nav-dropdown--mega {
  left: 0; right: 0; top: 100%; min-width: 0;
  padding: 12px 15px 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.nav-dropdown--mega::before { top: -12px; height: 12px; }
.nav-mega__panel {
  margin: 0 auto; max-width: 1110px; overflow: hidden;
  background: #fff; border: 1px solid var(--color-border); border-radius: 16px;
  box-shadow: 0 18px 40px rgba(6, 43, 45, .14);
}
.nav-mega__panel--narrow { max-width: 640px; }
/* The narrow mega (Life in Germany) anchors under its own nav item instead of
   centering across the header, so the panel lines up with its parent link. */
@media (min-width: 1101px) {
  .nav-item--mega.nav-item--mega-anchored { position: relative; }
  .nav-item--mega-anchored .nav-dropdown--mega { left: 0; right: auto; width: 640px; padding: 12px 0 0; }
  .nav-item--mega-anchored .nav-mega__panel { margin: 0; }
}
.nav-mega__grid { padding: 1.4rem; display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
.nav-mega__grid--wide { grid-template-columns: repeat(4, 1fr); }
.nav-mega__grid--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-mega__heading {
  margin: 0 0 .7rem; padding: 0 .7rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-primary);
}
/* Group headings that double as mobile accordion toggles are <button>s.
   On desktop they render exactly like the <p> headings: inert, no chevron. */
button.nav-mega__heading {
  appearance: none; -webkit-appearance: none;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; background: none; border: 0; font-family: inherit; text-align: left;
  cursor: default; pointer-events: none;
}
button.nav-mega__heading .nav-chevron { display: none; }
.nav-mega__list { display: flex; flex-direction: column; }
.nav-mega__item {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .55rem .7rem; border-radius: 10px; text-decoration: none;
  transition: background .15s ease;
}
.nav-mega__item:hover { background: var(--color-bg-soft); }
.nav-mega__icon {
  flex: 0 0 auto; width: 32px; height: 32px; margin-top: 1px;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--color-bg-soft);
  color: var(--color-heading);
  transition: background .15s ease, color .15s ease;
}
.nav-mega__item:hover .nav-mega__icon,
.nav-mega__item[aria-current="page"] .nav-mega__icon { background: var(--color-primary); color: #fff; }
.nav-mega__icon .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-mega__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 6px; }
.nav-mega__item .nav-mega__text:only-child { padding-top: 0; }
.nav-mega__label {
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.25;
  color: var(--color-heading); transition: color .15s ease;
}
.nav-mega__item:hover .nav-mega__label,
.nav-mega__item[aria-current="page"] .nav-mega__label { color: var(--color-primary); }
.nav-mega__item[aria-current="page"] { background: var(--color-bg-soft); }
/* Top-level nav link active state */
.nav-link[aria-current="page"] { color: var(--color-primary); }
/* Parent dropdown button highlighted when a child is the current page */
.nav-link--toggle[data-child-active] { color: var(--color-primary); }
.nav-mega__desc { font-size: .75rem; line-height: 1.4; color: var(--color-text-muted); }
/* Panel footer bar */
.nav-mega__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .8rem 1.4rem; background: var(--color-bg-soft);
  border-top: 1px solid var(--color-border);
}
.nav-mega__pills { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.nav-mega__pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .8rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; text-decoration: none; line-height: 1;
  color: var(--color-heading); background: #fff; border: 1px solid var(--color-border);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.nav-mega__pill:hover { color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); }
.nav-mega__pill--primary { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
.nav-mega__pill--primary:hover { color: #fff; background: var(--color-primary-dark, #e05500); border-color: var(--color-primary-dark, #e05500); }
.nav-mega__pill .ic, .nav-mega__book .ic { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-mega__foot-right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.nav-mega__note { margin: 0; font-size: .75rem; color: var(--color-text-muted); }
.nav-mega__note strong { font-weight: 600; color: var(--color-text); }
.nav-mega__book {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-size: .75rem; font-weight: 700; color: var(--color-primary); text-decoration: none;
}
.nav-mega__book:hover { text-decoration: underline; }

/* Knowledge mega menu — a compact educational layer that stays distinct from
   the product-focused Insurance menu. */
.nav-knowledge__panel { max-width: 900px; }
.nav-knowledge__header {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--color-border);
}
.nav-knowledge__title {
  margin: 0; font-family: var(--font-heading); font-size: var(--fs-base);
  font-weight: 700; line-height: 1.2; color: var(--color-heading);
}
.nav-knowledge__tagline { margin: .2rem 0 0; font-size: .75rem; color: var(--color-text-muted); }
.nav-knowledge__layout {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem; padding: 1.25rem 1.4rem;
}
.nav-knowledge__featured {
  display: flex; align-items: flex-start; gap: .85rem; min-width: 0;
  padding: 1rem; border: 1px solid var(--color-border); border-radius: 12px;
  background: var(--color-bg-soft); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.nav-knowledge__featured:hover {
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  transform: translateY(-1px);
}
.nav-knowledge__featured-owl {
  display: block; flex: none; width: 39px; height: 48px; object-fit: contain;
}
.nav-knowledge__featured-copy { display: flex; min-width: 0; flex-direction: column; gap: .3rem; }
.nav-knowledge__eyebrow {
  font-size: .625rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-primary);
}
.nav-knowledge__featured-title {
  font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 700;
  line-height: 1.3; color: var(--color-heading);
}
.nav-knowledge__featured-link { font-size: .75rem; font-weight: 700; color: var(--color-primary); }
.nav-knowledge__destinations { display: contents; }
.nav-knowledge__destination {
  display: flex; flex-direction: column; align-self: start; gap: .35rem; padding: .6rem .7rem;
  border-radius: 10px; text-decoration: none; transition: background .15s ease;
}
.nav-knowledge__destination:hover { background: var(--color-bg-soft); }
.nav-knowledge__destination-type {
  flex: none; padding-top: 0; font-size: .625rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary);
}
.nav-knowledge__destination-copy {
  display: grid; min-width: 0; grid-template-columns: max-content auto; gap: .2rem .35rem;
}
.nav-knowledge__destination-title {
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.25; color: var(--color-heading);
}
.nav-knowledge__destination-arrow { color: var(--color-primary); font-weight: 700; line-height: 1.25; }
.nav-knowledge__destination-desc {
  grid-column: 1 / -1; font-size: .75rem; line-height: 1.4; color: var(--color-text-muted);
}
.nav-cta { white-space: nowrap; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; transition: .2s ease; }

/* ---------------------- Hero ---------------------- */
.hero { padding: 7.1875rem 0 clamp(2.5rem, 5vw, 4.5rem); background: #faf8f3; }
.hero__title { font-size: clamp(2.5rem, 5vw, 3.125rem); line-height: 1.12; letter-spacing: -1px; color: var(--color-heading); margin: 0 0 .55rem; }
.hero__subhead { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h4); color: var(--color-primary); letter-spacing: -1px; margin: 0 0 1.6rem; }
.hero__rating { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.rating { display: inline-flex; align-items: center; gap: .5rem; }
.rating__stars { display: inline-flex; gap: 2px; color: #f5a623; }
.rating__stars svg { width: 16px; height: 16px; display: block; }
.rating__text, .hero__trusted { font-size: var(--fs-sm); color: var(--color-text); }
.hero__rating-divider { width: 1px; height: 28px; background: #d9d9d9; }
.hero__actions { display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.hero__cta-group { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.hero__note { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary); margin: 0; }
.hero__note svg, .hero__note img { width: 17px; height: 13px; }
.hero__note-icon { display: inline-block; flex: 0 0 17px; width: 17px; height: 13px; background: url("/hubfs/neodirect/images/Union.svg") center / contain no-repeat; }

/* Split hero — two-column layout on a full-width dark teal band (copy left,
   photo right). Shared by service-packages and the PKV page. The photo sits in
   a 506x455 figure; columns + responsive stacking come from the 12-col grid. */
.split-hero {
  position: relative;
  overflow: hidden;
  /* Dark teal base + a soft cyan glow rising from the lower-left (tokenized). */
  background:
    radial-gradient(50% 60% at 28% 90%, color-mix(in srgb, var(--color-info) 22%, transparent) 0%, transparent 70%),
    var(--color-dark);
  color: var(--color-on-secondary);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
/* The hero row is .row--center so the PHOTO stays vertically centred against
   the copy. The copy column must opt out of that: the media column is a fixed
   height (the 506x455 figure) while copy length varies per page, so centring
   the copy too pushed the breadcrumb down by however much shorter the copy was
   — the hero top gap drifted from 115px to 190px across pages. Pinning the copy
   to the top of the row keeps that gap identical everywhere. */
.split-hero .split-hero__copy { max-width: 36rem; align-self: flex-start; }
.split-hero__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-h1);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-tight);
  color: var(--color-on-secondary);
  margin: .35rem 0 1rem;
}
/* Optional quiet sub-line under the title (e.g. the German term) — pulled up
   tight to the heading, then it supplies the gap down to the lede. */
.split-hero__sub {
  font-family: var(--font-heading);
  font-weight: var(--weight-h2-h5);
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  color: rgba(255, 255, 255, .8);
  margin: -.6rem 0 1.1rem;
}
.split-hero__lede {
  color: rgba(255, 255, 255, .8);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  margin: 0 0 1.75rem;
}
.split-hero__figure { position: relative; margin: 0; }
/* Vertical rhythm of the hero. Three things have to hold at once, and they
   fight each other in a plain flex row:
     1. the breadcrumb sits at the same offset on every page,
     2. the photo looks vertically centred against the copy,
     3. the hero's padding reads the same above and below on every page.
   The COPY column alone sets the row height (1). The figure is taken out of
   flow so it cannot inflate that height, and the media column stretches to
   match the copy. The photo keeps its natural aspect ratio but is capped to the
   copy's height and centred against it (2) — so it can never be the taller
   element and can never bleed into the hero's padding (3). `object-fit: cover`
   (already on the image) crops instead of distorting when the cap bites.
   This assumes .split-hero__media holds nothing but the figure — a second
   in-flow child there would start driving the row height again and break (1).
   Desktop only — below the grid breakpoint the columns stack. */
@media (min-width: 861px) {
  .split-hero__media { position: relative; align-self: stretch; }
  .split-hero__media > .split-hero__figure {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
  }
  .split-hero__figure > .split-hero__img { max-height: 100%; }
}
.split-hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 506 / 455;
  object-fit: cover;
  border-radius: 30px;
  box-shadow: var(--shadow);
}

/* Editorial guide hero — a light split composition used by the three guides
   in the Guides menu. It reuses the guide-hero markup while keeping the
   wide-screen copy/media relationship consistent across pages. */
@media (min-width: 1025px) {
  .guide-hero.guide-hero--split > .container {
    max-width: 1440px;
    padding-right: clamp(1.5rem, 3vw, 3rem);
    padding-left: clamp(1.5rem, 3vw, 3rem);
  }

  .guide-hero.guide-hero--split .crumbs {
    margin-bottom: clamp(2rem, 3vw, 3rem);
  }

  .guide-hero.guide-hero--split .guide-hero__grid {
    display: block;
  }

  .guide-hero.guide-hero--split .guide-hero__copy {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(22rem, .88fr);
    grid-template-areas:
      "eyebrow media"
      "title media"
      "lede media"
      "actions media";
    column-gap: clamp(2.5rem, 4vw, 5rem);
    align-items: center;
    max-width: 82rem;
    text-align: left;
  }

  .guide-hero.guide-hero--split .guide-hero__copy > .eyebrow {
    grid-area: eyebrow;
    align-self: end;
    margin-bottom: .9rem;
  }

  .guide-hero.guide-hero--split h1 {
    grid-area: title;
    max-width: 15ch;
    margin: 0;
    font-size: clamp(3rem, 4vw, 3.75rem);
    line-height: 1.03;
  }

  .guide-hero.guide-hero--split .guide-hero__lede-group {
    grid-area: lede;
    max-width: 52ch;
    margin: 1.25rem 0 0;
  }

  .guide-hero.guide-hero--split .guide-hero__lede-group .guide-hero__lede {
    max-width: none;
    margin: 0;
    font-size: clamp(1.12rem, 1.5vw, 1.35rem);
    line-height: 1.42;
  }

  .guide-hero.guide-hero--split .guide-hero__lede-group .guide-hero__lede + .guide-hero__lede {
    margin-top: .9rem;
  }

  .guide-hero.guide-hero--split .guide-actions {
    grid-area: actions;
    align-self: start;
    justify-content: flex-start;
    margin-top: 1.5rem;
  }

  .guide-hero.guide-hero--split .guide-hero__media--hero {
    grid-area: media;
    align-self: stretch;
    min-height: 29rem;
    margin: 0;
    overflow: hidden;
    border-radius: var(--card-radius);
  }

  .guide-hero.guide-hero--split .guide-hero__media--hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* Founder media card — the image bakes in the overlay, license + name tag;
   only the play button is a live element (opens the video modal). */
.hero__media { position: relative; }
.founder-card { position: relative; max-width: 520px; margin-left: auto; }
.founder-card__img { display: block; width: 100%; height: auto; }
.play-btn {
    position: absolute;
    top: 52.5%;
    left: 55%;
    transform: translate(-50%, -50%);
    border: transparent;
    background: transparent;
    scale: 1;
    transition: opacity .15s ease;
    cursor: pointer
}
.play-btn:hover { opacity: .8 }

/* Shared SVG sprite holder — keep it out of layout/flow. */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Client video stories carousel */
.video-carousel { background: #f7f5f1; padding: var(--pad-full) 0; overflow: hidden; }
.video-carousel__frame { display: flex; align-items: center; justify-content: center; gap: 30px; }
/* Viewport is exactly three cards wide (3 x 350 + 2 x 30 gap) so only 3 slides
   are ever visible, matching the Figma design; shrinks on narrower screens. */
.video-carousel__viewport { flex: 0 1 auto; width: 1110px; max-width: 100%; overflow: hidden; }
.video-carousel__track { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; will-change: transform; transition: transform .4s ease; }
@media (prefers-reduced-motion: reduce) { .video-carousel__track { transition: none; } }
.video-carousel__item { flex: 0 0 auto; }

.video-card { position: relative; width: 350px; height: 500px; border-radius: 30px; overflow: hidden; }
.video-card__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-card__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5)); }
.video-card__play { top: 50%; left: 50%; z-index: 2; }
.play-btn__icon { display: block; }
.video-card__info {
  position: absolute; left: 15px; right: 15px; bottom: 15px; z-index: 1;
  background: #fff;
  border-radius: 15px; padding: 18px 20px; text-align: center;
}
.video-card__name { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--color-heading); }
.video-card__role { margin: .2rem 0 0; font-size: 13px; line-height: 1.3; color: var(--color-text-muted); }

.video-carousel__arrow {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 0;
  border: 0; background: transparent;
  color: #2d2d2d; display: grid; place-items: center; cursor: pointer;
  transition: color .15s ease;
}
.video-carousel__arrow:hover { color: var(--color-primary); }
.video-carousel__arrow:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 50%; }
.video-carousel__arrow svg { display: block; width: 100%; height: 100%; }

/* On phones the fixed 350px card overflowed the shrunken viewport and clipped
   the caption — show one fluid card that fits between the (smaller) arrows. */
@media (max-width: 768px) {
  .video-carousel { padding-top: 40px; }
  .video-carousel__frame { gap: 10px; }
  .video-carousel__arrow { width: 40px; height: 40px; }
  .video-carousel__viewport { width: 72vw; max-width: 340px; }
  /* Card derives its width from the (possibly flex-shrunk) viewport so it can
     never overflow and clip on the right when arrows + gaps squeeze the row. */
  .video-carousel__track { width: 100%; }
  .video-carousel__item { flex: 0 0 100%; }
  .video-card { width: 100%; height: auto; aspect-ratio: 350 / 500; }
}

/* Drag / swipe affordance for both sliders (touch-action: pan-y keeps vertical page scroll). */
.video-carousel__viewport, .testimonials__viewport { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.video-carousel__viewport.is-dragging, .testimonials__viewport.is-dragging { cursor: grabbing; }
.video-card__poster { -webkit-user-drag: none; }

/* On phones the fixed 350px card overflowed the shrunken viewport and clipped
   the caption — show one fluid card that fits between the (smaller) arrows. */
@media (max-width: 768px) {
  .video-carousel__frame { gap: 10px; }
  .video-carousel__arrow { width: 40px; height: 40px; }
  .video-carousel__arrow svg { width: 18px; height: 18px; }
  .video-carousel__viewport { width: 72vw; max-width: 340px; }
  /* Card derives its width from the (possibly flex-shrunk) viewport so it can
     never overflow and clip on the right when arrows + gaps squeeze the row. */
  .video-carousel__track { width: 100%; }
  .video-carousel__item { flex: 0 0 100%; }
  .video-card { width: 100%; height: auto; aspect-ratio: 350 / 500; }
}

/* Drag / swipe affordance for both sliders (touch-action: pan-y keeps vertical page scroll). */
.video-carousel__viewport, .testimonials__viewport { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.video-carousel__viewport.is-dragging, .testimonials__viewport.is-dragging { cursor: grabbing; }
.video-card__poster { -webkit-user-drag: none; }

/* Insurer trust strip */
.trust-strip { background: #faf8f3; padding: 50px 0; }
.trust-strip__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.trust-strip__track { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; animation: trust-scroll 38s linear infinite; }
.trust-strip__track:hover { animation-play-state: paused; }
.trust-strip__logo { flex: 0 0 auto; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0 2.25rem; }
.trust-strip__logo img { max-height: 100%; width: auto; object-fit: contain; }
.trust-strip__placeholder { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--color-text-muted); letter-spacing: .02em; }
/* Text-name variant of the marquee (the insurer wall on Service packages):
   plain names instead of logos. --reverse flips a row's scroll direction. */
.trust-strip__name { flex: 0 0 auto; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-sm); color: var(--color-text-muted); white-space: nowrap; }
/* On the insurer wall the names are CARDS (composed .card.card--plain) — give them
   a comfortable pill padding (beats .card's --card-pad via the .market scope) and
   slow the scroll right down so they read as a calm wall, not a ticker. */
.market .trust-strip__name { padding: .85rem 1.7rem; margin-right: 16px; }
.market .trust-strip__track { animation-duration: 90s; }

/* -------------------- "Why expats choose NEOdirect" trust module (SHARED) ----
   Bento stat grid + feature cards used on moving-to-germany and the-german-system
   (promoted from the expat page sheet once a second page composed it). ---- */
.trust-strip.lig-trust { background: #fff; }
.lig-trust__head { text-align: center; padding: clamp(2.5rem, 5vw, 3.5rem) 0 1.75rem; }
.lig-trust__head .eyebrow { margin: 0 0 .5rem; }
.lig-trust__title { font-family: var(--font-heading); font-weight: var(--weight-h2-h5); font-size: var(--fs-h2); line-height: 1.15; letter-spacing: var(--ls-tight); color: var(--color-heading); margin: 0; }

/* ---- Trust bento grid (composes .card / grid) ---- */
.lig-bento { margin: 0 0 var(--grid-gutter); }
/* Right side stacks reviews over licensed; fills the row height so the orange
   hero card (card--fill) stretches to match. */
.lig-bento__col { display: flex; flex-direction: column; gap: var(--grid-gutter); height: 100%; }

/* Left: big orange clients-supported stat. */
.card.lig-bento__hero { background: var(--gradient-one); border-color: transparent; color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; padding: clamp(1.5rem, 3.5vw, 2.5rem); min-height: 320px; }
.lig-bento__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .2); font-family: var(--font-heading); font-weight: 700; font-size: .6875rem; letter-spacing: 1.5px; text-transform: uppercase; }
.lig-bento__badge .ic { width: 15px; height: 15px; }
.lig-bento__value { font-family: var(--font-heading); font-weight: var(--weight-h1); font-size: clamp(3.25rem, 8vw, 5.5rem); line-height: .95; letter-spacing: var(--ls-tight); }
.lig-bento__value span { color: rgba(255, 255, 255, .85); }
.card.lig-bento__hero .lig-bento__text { color: rgba(255, 255, 255, .92); font-size: var(--fs-base); line-height: 1.5; margin: .85rem 0 0; max-width: 24rem; }

/* Reviews card (white). */
.lig-reviews__stars { display: inline-flex; align-items: center; gap: .3rem; color: var(--color-primary); }
.lig-reviews .lig-reviews__stars svg.ic { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.lig-reviews__rating { margin-left: .35rem; font-family: var(--font-heading); font-weight: 700; font-size: .85rem; color: var(--color-heading); }
.lig-reviews__head { display: flex; align-items: baseline; gap: .6rem; }
.lig-reviews__num { font-family: var(--font-heading); font-weight: var(--weight-h1); font-size: clamp(2.5rem, 5vw, 3.25rem); line-height: 1; letter-spacing: var(--ls-tight); color: var(--color-heading); }
.lig-reviews__label { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--color-heading); }

/* Licensed card (dark) fills the rest of the right column. */
.card.lig-licensed { justify-content: center; }

/* Feature cards + accent words. */
.lig-feats { margin-top: var(--grid-gutter); }
.lig-accent { color: var(--color-primary); }
.trust-strip__track--reverse { animation-direction: reverse; }
@keyframes trust-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .trust-strip__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; gap: 1.5rem 1rem; }
  .trust-strip__logo--dup, .trust-strip__name--dup { display: none; }
}

/* Visually-hidden utility — accessible-only text (shared: home + PKV captions). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* -------------------- .litab — 3-column tariff comparison table
   (shared: liability + home-contents; any 2-plan comparison page) -------------------- */
.litab { margin-top: var(--grid-gutter); border: 1px solid var(--color-border); border-radius: var(--card-radius); overflow: hidden; background: var(--color-bg); }
.litab__cols, .litab__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
.litab__colcell { padding: 1rem 1.1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; text-align: center; border-left: 1px solid var(--color-border); background: var(--color-bg); }
.litab__colcell:first-child { border-left: 0; background: none; }
.litab__colcell--hl { background: var(--color-bg-soft); }
.litab__colname { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); color: var(--color-heading); }
.litab__coltag { display: inline-flex; padding: .15rem .55rem; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.litab__row { border-top: 1px solid var(--color-border); }
.litab__label { padding: .85rem 1.1rem; font-size: var(--fs-sm); font-weight: 600; color: var(--color-heading); }
.litab__cell { padding: .85rem 1.1rem; display: flex; align-items: center; justify-content: center; gap: .5rem; text-align: center; font-size: var(--fs-sm); color: var(--color-text); border-left: 1px solid var(--color-border); }
.litab__cell--hl { background: var(--color-bg-soft); }
.litab__row--price .litab__cell { font-family: var(--font-heading); font-weight: 700; color: var(--color-heading); }
@media (max-width: 620px) {
  .litab__cols, .litab__row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .litab__label, .litab__cell, .litab__colcell { padding: .7rem .6rem; font-size: 12px; }
}

/* -------------------- FAQ accordion --------------------
   .faq is used two ways: as its own top-level `<section class="faq">` with a
   built-in .faq__intro (home, moving-to-germany, the-german-system) — that
   variant needs the full section padding. Everywhere else it's a `<div
   class="faq">` dropped inside another section wrapper that already supplies
   its own top/bottom spacing (a .section-head margin, a .pagesection/
   .guide-section gap, …), so the nested form carries no padding of its own by
   default. This is the single place that decides the gap above the first
   question — don't re-add page-specific `.faq { padding: 0 }` overrides. */
.faq { background: var(--color-bg); }
section.faq { padding: var(--pad-full) 0; }
.faq__intro { position: static; }
.faq__eyebrow { font-family: var(--font-heading); font-weight: var(--weight-h6); font-size: 11px; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: var(--color-primary); margin: 0 0 1rem; }
.faq__title { font-family: var(--font-heading); font-weight: var(--weight-h2-h5); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-tight); color: var(--color-heading); margin: 0 0 1rem; }
.faq__lede { color: var(--color-text-muted); font-size: var(--fs-base); line-height: var(--lh-body); margin: 0; max-width: 22rem; }
.br-md { display: none; }
@media (min-width: 861px) { .br-md { display: inline; } }

.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__heading { margin: 0; font: inherit; }
.faq__trigger {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  width: 100%; padding: 1.5625rem 0; border: 0; background: transparent;
  text-align: left; cursor: pointer; color: var(--color-heading);
}
.faq__question { font-family: var(--font-heading); font-weight: var(--weight-h2-h5); font-size: 1rem; line-height: 1.3; letter-spacing: var(--ls-tight); }
.faq__icon { position: relative; flex: 0 0 auto; width: 15px; height: 15px; margin-top: .35rem; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--color-primary); border-radius: 1px; }
.faq__icon::before { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); }
.faq__icon::after { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); transition: opacity .25s ease, transform .25s ease; }
.faq__item.is-open .faq__icon::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
.faq__trigger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }

.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq__panel[hidden] { display: none; }
.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__answer { overflow: hidden; min-height: 0; }
.faq__answer-inner { padding: 0 0 1.5625rem; max-width: 46rem; }
.faq__answer-inner p { margin: 0 0 1rem; color: var(--color-text); font-size: var(--fs-base); line-height: var(--lh-body); }
.faq__answer-inner p:last-child { margin-bottom: 0; }
.faq__answer-inner ul { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .6rem; color: var(--color-text); font-size: var(--fs-base); line-height: var(--lh-body); }
.faq__answer-inner ul:last-child { margin-bottom: 0; }
.faq__answer-inner li::marker { color: var(--color-primary); }

@media (max-width: 860px) {
  .faq__intro { position: static; top: auto; }
  .faq__lede { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__panel, .faq__icon::after { transition: none; }
}

/* -------------------- Specialist CTA banner -------------------- */
.specialist { background: var(--color-bg-soft); padding: clamp(2.75rem, 5vw, 3rem) 0; }
.specialist__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.specialist__lead { display: flex; align-items: flex-start; gap: 1.5rem; flex: 1 1 420px; }
.specialist__avatar { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.specialist__title { font-family: var(--font-heading); font-weight: var(--weight-h2-h5); font-size: var(--fs-h3); line-height: 1.2; letter-spacing: var(--ls-tight); color: var(--color-heading); margin: 0 0 .5rem; }
.specialist__sub { color: var(--color-text-muted); font-size: var(--fs-base); line-height: var(--lh-body); margin: 0 0 .75rem; max-width: 34rem; }
.specialist__note { color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0; }
.specialist__actions { display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; flex: 0 0 auto; }
.specialist__actions .btn { white-space: nowrap; }

@media (max-width: 768px) {
  .specialist__inner { flex-direction: column; align-items: center; }
  .specialist__lead { flex: 0 0 auto; }
  .specialist__actions { width: 100%; align-items: center; }
  .specialist__actions .btn { width: 100%; }
}

/* -------------------- Proof bar — rating/trust strip (shared: service packages + PKV) -------------------- */
.proof-bar { background: var(--color-bg); padding: 1.4rem 0; border-bottom: 1px solid var(--color-border); }
.proof-bar__inner { display: flex; align-items: center; justify-content: center; gap: 1.25rem; flex-wrap: wrap; }
.proof-bar__brand { font-family: var(--font-heading); font-weight: 700; color: var(--color-heading); }

/* -------------------- COMPONENTS — reusable building blocks --------------------
   The canonical UI library. Build pages by COMPOSING these — do NOT invent a
   parallel card/list/header style per page (that's what made earlier pages drift).
   Anything genuinely new belongs HERE (and on /components), built from :root
   tokens. See the `page-from-reference` skill and STYLE-GUIDE.md. */

/* Section header — centered eyebrow + title + lede above a section's content. */
.section-head { text-align: center; max-width: 40ch; margin: 0 auto 2.6rem; }
.section-head--wide { max-width: 60ch; }
/* Left-aligned variant — resets the centered default for article/body columns. */
.section-head--left { text-align: left; max-width: 60ch; margin-left: 0; margin-right: 0; }

/* ------------ PKV CTA SYSTEM ------------ */
/* 1. Full CTA — large conversion block at the end of articles */
.pkv-cta-full { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 3rem; padding: clamp(1.5rem, 4vw, 2.25rem); background: var(--color-secondary); color: var(--color-bg); border-radius: var(--card-radius); }
.pkv-cta-full__eyebrow { color: var(--color-primary); margin-bottom: .5rem; }
.pkv-cta-full__title { color: var(--color-bg); font-size: var(--fs-h3); margin: 0 0 .75rem; }
.pkv-cta-full__desc { color: var(--color-bg); font-size: var(--fs-base); margin: 0; max-width: 50ch; }
.pkv-cta-full__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pkv-cta-full__link { color: var(--color-bg); font-weight: 700; text-underline-offset: 4px; }
.pkv-cta-full__link:hover { color: var(--color-primary); }
.pkv-cta-full__link:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; }

/* 2. Soft CTA — minimal inline text link/callout */
.pkv-cta-soft { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: 3rem; padding: 1.5rem; background: var(--color-bg-soft); border-left: 3px solid var(--color-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.pkv-cta-soft__title { font-size: var(--fs-h4); margin: 0 0 .35rem; }
.pkv-cta-soft__desc { color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0; }
.pkv-cta-soft__link { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; white-space: nowrap; }
.pkv-cta-soft__link:hover { color: var(--color-primary-hover); }
.pkv-cta-soft__link:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; }

/* 3. Ask Nina — Profile-based contact module (used in sidebar or inline) */
.pkv-ask-nina { display: flex; flex-direction: column; gap: 1.25rem; }
.pkv-ask-nina__profile { display: flex; align-items: center; gap: 1rem; }
.pkv-ask-nina__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-bg); box-shadow: 0 4px 12px rgba(0,0,0,0.08); flex: 0 0 auto; }
.pkv-ask-nina__meta { display: flex; flex-direction: column; }
.pkv-ask-nina__name { font-weight: 700; color: var(--color-heading); font-size: 1.1rem; line-height: 1.2; margin: 0; }
.pkv-ask-nina__role { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }
.pkv-ask-nina__desc { font-size: var(--fs-sm); margin: 0; line-height: 1.5; color: var(--color-text); }
.pkv-ask-nina__actions { display: flex; flex-direction: column; gap: .5rem; }
.pkv-ask-nina__actions .btn { width: 100%; justify-content: center; }

@media (max-width: 600px) {
  .pkv-cta-full__actions, .pkv-cta-soft { align-items: stretch; flex-direction: column; }
  .pkv-cta-full__actions .btn { width: 100%; }
  .pkv-cta-full__link, .pkv-cta-soft__link { text-align: center; white-space: normal; }
}

/* Initials avatar — colored square-round chip with a person's initials (used by
   the how-we-help reviews and the team page member cards). Photo <img> variants
   just reuse the same class with object-fit. Catalogued on /components. */
.avatar { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: var(--fs-sm); color: #fff; background: var(--color-secondary); }
.avatar--rose { background: linear-gradient(135deg, #fb7185, #f43f5e); }
.avatar--navy { background: linear-gradient(135deg, var(--color-secondary), #1b2d45); }
.avatar--blue { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.avatar--amber { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.avatar--emerald { background: linear-gradient(135deg, #34d399, #10b981); }
img.avatar { object-fit: cover; object-position: center top; background: none; display: block; }

/* Video modal — fullscreen lightbox for playing a video (REUSABLE). Backdrop is
   light black with a background blur. One `.video-modal` per page with
   id="founder-video" (the id the generic JS in main.js looks up); ANY element
   with data-video-open opens it, and data-video-src="<mp4 url>" picks the video
   (falls back to the <video>'s own src). Close via [data-video-close] (backdrop
   + X) or Esc; focus is trapped while open. Catalogued on /components. */
.video-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; }
.video-modal[hidden] { display: none; }
.video-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.video-modal__dialog { position: relative; z-index: 1; width: min(900px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.video-modal__video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.video-modal__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255, 255, 255, .92); color: var(--color-secondary); display: grid; place-items: center; transition: background .15s ease, transform .15s ease; }
.video-modal__close:hover { background: #fff; transform: scale(1.05); }
.video-modal__close svg { width: 22px; height: 22px; }
body.is-modal-open { overflow: hidden; }

/* Breadcrumb — compact page trail (REUSABLE). Markup:
   <nav class="crumbs" aria-label="Breadcrumb"><a href="/">Home</a>
   <svg class="crumbs__sep ic"><use href="#i-chevron-right"/></svg>
   <span class="crumbs__here" aria-current="page">About</span></nav>
   The separator is a stroked outline icon, so it self-styles anywhere. */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: var(--fs-sm); color: var(--color-text-muted); }
.crumbs a { color: var(--color-text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-primary); }
.crumbs__sep { width: 13px; height: 13px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crumbs__here { color: var(--color-heading); }
/* Breadcrumb on the dark split-hero — lightened recolor (BU + liability pages). */
.split-hero .crumbs { margin: 0 0 1.1rem; }
.split-hero .crumbs a { color: rgba(255, 255, 255, .65); }
.split-hero .crumbs a:hover { color: #fff; }
.split-hero .crumbs .crumbs__here { color: rgba(255, 255, 255, .9); }
.split-hero .crumbs .crumbs__sep { color: rgba(255, 255, 255, .45); }

/* Breadcrumb — compact page trail (REUSABLE). Markup:
   <nav class="crumbs" aria-label="Breadcrumb"><a href="/">Home</a>
   <svg class="crumbs__sep ic"><use href="#i-chevron-right"/></svg>
   <span class="crumbs__here" aria-current="page">About</span></nav>
   The separator is a stroked outline icon, so it self-styles anywhere. */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: var(--fs-sm); color: var(--color-text-muted); }
.crumbs a { color: var(--color-text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-primary); }
.crumbs__sep { width: 13px; height: 13px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crumbs__here { color: var(--color-heading); }

/* Card — the ONE canonical surface. Default = subtle outline.
   Modifiers: --plain (borderless) · --elevated (stronger shadow) ·
   --hover (lift on hover) · --row (horizontal media + body) ·
   --roomy / --tight (more / less padding). Padding & radius come from the
   --card-* tokens so every card on the site stays in sync. */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  box-shadow: var(--shadow-sm);
}
.card--plain { border: 0; }
.card--elevated { box-shadow: var(--shadow); }
.card--hover { transition: transform .18s ease, box-shadow .18s ease; }
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card--row { display: flex; gap: 1.25rem; align-items: flex-start; }
/* Text column inside a .card--row: keeps the 12px title/copy rhythm the
   vertical card gets from .card:not(.card--row). */
.card--row .card__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card--roomy { padding: clamp(2rem, 1rem + 2.5vw, 3.125rem); }
.card--tight { padding: 1.6rem; }
/* Equal-height cards in a multi-column .row. The column already stretches
   (align-items:stretch), so this just makes the card fill it — every card in the
   row then reaches the same baseline regardless of how much copy it holds. */
.card--fill { height: 100%; }
/* Vertical cards lay their children out with a single 12px flex gap — the same
   rhythm as .journey-card__body on the home page — so NO card ever relies on
   per-element margins for internal spacing. Row cards keep their own horizontal
   layout (icon beside a body wrapper, which is itself a 12px flex column). */
.card:not(.card--row) { display: flex; flex-direction: column; gap: 12px; }
/* Icon tile — 50px secondary (dark) square with a 24px reversed icon, per Figma. */
.card__icon {
  flex: none;
  width: 50px; height: 50px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--color-secondary); color: var(--color-on-secondary);
  font-size: 1.25rem;
}
.card__icon svg { width: 24px; height: 24px; }
.card__title { font-family: var(--font-heading); font-weight: var(--weight-h2-h5); font-size: var(--fs-h4); line-height: 1.25; letter-spacing: var(--ls-tight); color: var(--color-heading); margin: 0; }
/* :not(.card__title) keeps this (0,1,1) rule from outranking .card__title (0,1,0),
   so titles always keep their heading size/color (the ".card p trap"). */
.card p:not(.card__title) { margin: 0; color: var(--color-text-muted); }
.card p.card__title { margin: 0; }
.card p.eyebrow, .card p.journey-card__step { color: var(--color-primary); }
.card__link { display: inline-block; margin-top: auto; padding-top: .5rem; font-size: var(--fs-sm); font-weight: 600; color: var(--color-primary); text-decoration: none; }
.card__link:hover { text-decoration: underline; }

/* Text hints — accessible inline explanations; contract/copy remains unchanged. */
.text-hint > strong {
  text-decoration: underline dotted;
  text-decoration-color: var(--color-secondary);
  text-underline-offset: .2em;
}
.text-hint__trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75em; height: 1.75em; padding: 0; margin-inline-start: .15em;
  vertical-align: middle; border: 0; border-radius: var(--radius-sm);
  background: var(--color-bg-soft); color: var(--color-secondary);
  font: inherit; cursor: help;
}
.text-hint__trigger svg { width: 1em; height: 1em; }
.text-hint__trigger:hover, .text-hint__trigger[aria-expanded="true"] { background: var(--color-tertiary); }
.text-hint__trigger:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; }
.text-hint__panel {
  position: fixed; z-index: 90; width: 22rem; max-width: calc(100vw - 2rem);
  box-sizing: border-box; padding: var(--space-50); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-body);
  overflow-wrap: anywhere;
}
.text-hint__panel[hidden] { display: none; }
.text-hint__title { display: block; margin-bottom: var(--space-25); font-weight: var(--weight-heading); color: var(--color-secondary); }
@media (pointer: coarse) {
  .text-hint__trigger { min-width: 44px; min-height: 44px; }
}
@media print {
  .text-hint__trigger, .text-hint__panel { display: none !important; }
  .text-hint > strong { text-decoration: none; }
}

/* Video band — two-column media panel (REUSABLE): photo stage with a centered
   play button + pill badges on the left, copy (eyebrow/title/copy/actions) on
   the right. Compose as `card card--dark card--plain video-band`; the play
   button opens the shared .video-modal via [data-video-open]. Used by the
   German System walkthrough and the legal page testimonial band. */
.card.video-band { padding: 0; gap: 0; overflow: hidden; background: var(--gradient-two); display: grid; grid-template-columns: 1.1fr 1fr; }
.video-band__stage { position: relative; min-height: 380px; border-right: 1px solid rgba(255, 255, 255, .08); }
.video-band__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Dark scrim keeps the badge/duration/play button legible over the photo. */
.video-band__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .35), rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .35)); }
.video-band__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.video-band__tag { position: absolute; top: 1.25rem; left: 1.25rem; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem; border-radius: 999px; background: rgba(0, 0, 0, .45); font-family: var(--font-heading); font-weight: 700; font-size: .625rem; text-transform: uppercase; letter-spacing: var(--ls-wide); color: rgba(255, 255, 255, .9); }
.video-band__tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }
.video-band__dur { position: absolute; bottom: 1.25rem; right: 1.25rem; padding: .3rem .65rem; border-radius: 999px; background: rgba(0, 0, 0, .45); font-size: .6875rem; font-weight: 500; color: rgba(255, 255, 255, .85); }
.video-band__body { padding: clamp(2rem, 1.25rem + 2.5vw, 3.25rem); display: flex; flex-direction: column; justify-content: center; }
/* (0,3,0) `.card.video-band …` selectors so type/margin rules beat the
   `.card p:not(.card__title)` trap (0,2,1) whatever element carries the class
   (the title is a <p> in the catalog demo but an <h2> on real pages); the
   `.card--dark …` color rules likewise out-gun `.card--dark p` (0,2,1). */
.card.video-band .eyebrow { margin: 0 0 1rem; }
.card.video-band .video-band__title { font-family: var(--font-heading); font-weight: var(--weight-h2-h5); font-size: var(--fs-h3); line-height: 1.2; letter-spacing: var(--ls-tight); margin: 0 0 1rem; }
.card--dark.video-band .video-band__title { color: var(--color-on-secondary); }
.card.video-band .video-band__copy { margin: 0 0 1.25rem; font-size: var(--fs-sm); line-height: 1.65; max-width: 46ch; }
.video-band__actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 30px 0 0; }
.card.video-band .video-band__note { flex-basis: 100%; margin: .5rem 0 0; font-size: .6875rem; }
.card--dark.video-band .video-band__note { color: #fff; }
/* Same boundary as col-md (861px) — see the grid gotcha in replit.md. */
@media (max-width: 860px) {
  .card.video-band { grid-template-columns: 1fr; }
  .video-band__stage { min-height: 240px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
}

/* Video band — two-column media panel (REUSABLE): photo stage with a centered
   play button + pill badges on the left, copy (eyebrow/title/copy/actions) on
   the right. Compose as `card card--dark card--plain video-band`; the play
   button opens the shared .video-modal via [data-video-open]. Used by the
   German System walkthrough and the legal page testimonial band. */
.card.video-band { padding: 0; gap: 0; overflow: hidden; background: var(--gradient-two); display: grid; grid-template-columns: 1.1fr 1fr; }
.video-band__stage { position: relative; min-height: 380px; border-right: 1px solid rgba(255, 255, 255, .08); }
.video-band__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Dark scrim keeps the badge/duration/play button legible over the photo. */
.video-band__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .35), rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .35)); }
.video-band__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .35)); }
.video-band__tag { position: absolute; top: 1.25rem; left: 1.25rem; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem; border-radius: 999px; background: rgba(0, 0, 0, .45); font-family: var(--font-heading); font-weight: 700; font-size: .625rem; text-transform: uppercase; letter-spacing: var(--ls-wide); color: rgba(255, 255, 255, .9); }
.video-band__tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }
.video-band__dur { position: absolute; bottom: 1.25rem; right: 1.25rem; padding: .3rem .65rem; border-radius: 999px; background: rgba(0, 0, 0, .45); font-size: .6875rem; font-weight: 500; color: rgba(255, 255, 255, .85); }
.video-band__body { padding: clamp(2rem, 1.25rem + 2.5vw, 3.25rem); display: flex; flex-direction: column; justify-content: center; }
.video-band__body .eyebrow { margin-bottom: 1rem; }
.video-band__title { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: var(--ls-tight); color: var(--color-on-secondary); margin: 0 0 1rem; }
.video-band__copy { margin: 0 0 1.25rem; font-size: var(--fs-sm); line-height: 1.65; max-width: 46ch; }
.video-band__actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 30px 0 0; }
.video-band__note { flex-basis: 100%; margin: .5rem 0 0; font-size: .6875rem; color: rgba(255, 255, 255, .5); }
/* Same boundary as col-md (861px) — see the grid gotcha in replit.md. */
@media (max-width: 860px) {
  .card.video-band { grid-template-columns: 1fr; }
  .video-band__stage { min-height: 240px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
}

/* Check-list — a list of ticked feature items. Drop a tick SVG in each <li>.
   12px gaps, 1.35 line-height, body text at 80% — per Figma. */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.check-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: var(--fs-sm); line-height: 1.35; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
/* Nudge the 21px tick up so it optically centers on the first text line
   (line box = 1.35em); align-items stays flex-start for multi-line items. */
.check-list svg { flex: 0 0 auto; width: 21px; height: 21px; color: var(--color-primary); margin-top: calc((1.35em - 21px) / 2); }

/* Badge — a small pill label that sits on a card (e.g. "Most popular"). */
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .7rem; border-radius: 999px; background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-heading); font-weight: 700; font-size: .6875rem; line-height: 1; text-transform: uppercase; letter-spacing: .06em; }
.badge svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }

/* Featured card — accent-bordered emphasis (used for the "most popular" plan). */
.card--featured { border: 2px solid var(--color-primary); }

/* Modal — native <dialog> popup. Open via a button with
   data-modal-open="<dialog-id>"; close via [data-modal-close], Esc, or a
   backdrop click (all wired generically in main.js). */
.modal { width: min(680px, calc(100vw - 2rem)); max-height: min(82vh, 760px); margin: auto; padding: 0; border: 0; border-radius: var(--card-radius); background: var(--color-bg); color: var(--color-text); box-shadow: 0 24px 64px rgba(0, 0, 0, .28); }
.modal::backdrop { background: rgba(10, 34, 38, .55); }
.modal__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.5rem; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.modal__head .eyebrow { margin: 0; }
.modal__close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background: transparent; color: var(--color-heading); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.modal__close:hover { background: var(--color-bg-muted); }
.modal__close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.modal__close svg { width: 16px; height: 16px; }
.modal__body { padding: 1.35rem 1.5rem 1.75rem; }

/* Booking dialog — a .modal variant with a dark header band and a
   "what happens on the call" check-list body. Composes .modal + .check-list;
   open/close is the generic [data-modal-open] JS. Catalogued at /components. */
.bookmodal { position: relative; max-width: 560px; padding: 0; }
.bookmodal__close { position: absolute; top: 14px; right: 14px; z-index: 2; color: #fff; border-color: rgba(255, 255, 255, .35); }
.bookmodal__close:hover { background: rgba(255, 255, 255, .12); }
.bookmodal__head { background: var(--color-secondary); color: #fff; padding: 1.8rem 1.8rem 1.5rem; }
.bookmodal__eyebrow { color: var(--color-primary); }
.bookmodal__title { color: #fff; margin: 0 0 .5rem; font-size: 1.25rem; line-height: 1.25; }
.bookmodal__desc { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: rgba(255, 255, 255, .75); }
.bookmodal__body { padding: 1.5rem 1.8rem 1.8rem; display: flex; flex-direction: column; gap: 1.1rem; }
.bookmodal__label { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); margin: 0; }
.bookmodal__list { margin: 0; }
.bookmodal__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; }

/* Instant offer dialog — a .modal variant that turns a calculator result into a
   lead: it restates the quote the visitor just saw, then embeds the real HubSpot
   form (js/instant-offer.js writes the calculator's answers into the same form
   and hides those fields). Composes .modal + .modal__head + .modal__body; opens
   via the generic data-modal-open JS. Catalogued at /components. */
.offermodal { width: min(560px, calc(100vw - 2rem)); }
.offermodal__quote { background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1rem 1.1rem; }
.offermodal__price { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--color-heading); }
.offermodal__price-unit { font-size: .5em; font-weight: 600; color: var(--color-text-muted); }
.offermodal__facts { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: .8rem 0 0; padding: 0; }
.offermodal__facts li { font-size: .78rem; line-height: 1.3; color: var(--color-text-muted); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; padding: .25rem .6rem; }
.offermodal__lede { margin: 1rem 0 1.25rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--color-text-muted); }
/* Form styling inside the dialog. HubSpot renders an embed one of two ways: some
   forms come back INLINE (then the theme's .hs-form block above styles them, and
   these rules adapt it to the narrower dialog), others are written into a
   same-origin <iframe class="hs-form-iframe"> and carry their own styling from
   the form editor — page CSS cannot reach inside that, by design. */
.offermodal__form .hs-form fieldset { max-width: none; }
/* Keep HubSpot's 2-column rows (e.g. Gender + Date of Birth) — do not collapse
   to one column here; the global .form-columns-2 + mobile breakpoint already
   handle narrow viewports. */
.offermodal__form .hs-form fieldset.form-columns-2 { grid-template-columns: 1fr 1fr; }
.offermodal__form .hs-form .hs-form-field { margin-bottom: .9rem; }
.offermodal__form .hs-form .legal-consent-container { font-size: .82rem; line-height: 1.5; }
.offermodal__form .hs-form .hs-button { width: 100%; }
.offermodal__form .hs-form-iframe { display: block; width: 100%; }
/* Multi-step offer form (Option B): sticky chrome (title + step + progress),
   counter beside the close control, thicker progress bars. */
.offermodal__chrome {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 6px 16px rgba(10, 34, 38, .06);
}
.offermodal .modal__head {
  position: static;
  border-bottom: 0;
  padding-bottom: .55rem;
}
.offermodal__head-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-shrink: 0;
}
.offermodal__step {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .02em;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.offermodal__progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
  padding: 0 1.5rem .9rem;
}
.offermodal__progress-bar {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--color-border);
}
.offermodal__progress-bar.is-active { background: var(--color-primary); }
/* Step 3 document downloads — compact orange-outline chips (reference style, smaller). */
.offermodal__docs {
  margin: 0 0 1rem;
  padding: .75rem 0 0;
  border-top: 1px solid var(--color-border);
}
.offermodal__docs[hidden] { display: none !important; }
.offermodal__docs-heading {
  margin: 0 0 .3rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.3;
  color: var(--color-heading);
}
.offermodal__docs-intro {
  margin: 0 0 .55rem;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.offermodal__doc-list {
  list-style: none;
  margin: 0 0 .75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.offermodal__doc-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: 100%;
  padding: .38rem .55rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-heading);
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.offermodal__doc-link:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
}
.offermodal__doc-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.offermodal__doc-link.is-pending {
  opacity: .65;
  cursor: not-allowed;
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
}
/* Policy start: today and earlier stay visible but cannot be chosen. */
.hs_policy_start_date .fn-date-picker td.is-disabled .pika-button,
.hs-policy_start_date .fn-date-picker td.is-disabled .pika-button,
.ui-datepicker td.neo-policy-date-disabled,
.ui-datepicker td.ui-datepicker-unselectable {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}
.hs_policy_start_date .fn-date-picker td.is-disabled.is-today .pika-button,
.hs-policy_start_date .fn-date-picker td.is-disabled.is-today .pika-button {
  color: #999;
  font-weight: 400;
  background: #f5f5f5;
}
.offermodal__doc-icon {
  width: .9rem;
  height: .9rem;
  flex: 0 0 auto;
  color: var(--color-primary);
}
.offermodal__doc-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.offermodal__doc-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .72rem;
  line-height: 1.25;
  color: var(--color-heading);
}
.offermodal__doc-meta { display: none; }
/* Step 3 declarations — full legal copy in the theme; HubSpot stores short booleans. */
.offermodal__declarations {
  margin: 0 0 1rem;
  padding: .15rem 0 0;
}
.offermodal__declarations[hidden] { display: none !important; }
.offermodal__declarations-heading {
  margin: 0 0 .55rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .88rem;
  line-height: 1.3;
  color: var(--color-heading);
}
.offermodal__declare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.offermodal__declare {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55rem;
  align-items: start;
  margin: 0;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  cursor: pointer;
}
.offermodal__declare input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: .15rem 0 0;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}
.offermodal__declare span { min-width: 0; }
.offermodal__declare .hs-form-required {
  color: var(--color-primary);
  margin-right: .1rem;
}
/* Stick to the dialog's scrollport so Continue/Submit stay on-screen on step 3
   (docs + 4 declarations otherwise push the nav below the fold). */
.offermodal__nav {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
  padding: .85rem 0 .15rem;
  background: var(--color-bg);
  box-shadow: 0 -10px 18px -12px rgba(10, 34, 38, .28);
}
.offermodal__nav .btn { flex: 1 1 8rem; justify-content: center; }
.offermodal__nav[hidden],
.offermodal__nav .btn[hidden] { display: none !important; }
/* HubSpot's real submit sits in the step nav on step 3 — match .btn--primary. */
.offermodal__nav .hs_submit {
  flex: 1 1 8rem;
  margin: 0;
  display: block !important;
}
.offermodal__nav .hs_submit .actions { margin: 0; }
.offermodal__nav .hs_submit .hs-button,
.offermodal__nav .hs_submit input.hs-button,
.offermodal__nav .hs_submit input[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: var(--btn-py) var(--btn-px) !important;
  box-sizing: border-box;
  font-family: var(--font-button) !important;
  font-weight: var(--btn-weight) !important;
  font-size: var(--btn-fs) !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  letter-spacing: inherit;
  color: var(--color-on-primary) !important;
  background: var(--color-primary) !important;
  border: 1px solid transparent !important;
  border-radius: var(--btn-radius) !important;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.offermodal__nav .hs_submit .hs-button:hover,
.offermodal__nav .hs_submit input.hs-button:hover,
.offermodal__nav .hs_submit input[type="submit"]:hover {
  background: var(--color-primary-hover) !important;
  color: var(--color-on-primary) !important;
  transform: translateY(-1px);
}

/* Pricing plan — composes .card + .check-list + .section-head. The Show/Hide
   details (and premium-features) disclosure is driven by [data-plan-toggle] in
   main.js, which flips .is-expanded on the .plan. Catalogued at /components. */
.plan { display: flex; flex-direction: column; height: 100%; gap: .75rem; position: relative; }
.plan--popular { padding-top: calc(var(--card-pad) + .35rem); }
.plan__badge { position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%); }
.plan__tag { margin: 0; }
.plan__name { margin: 0; }
/* .plan .plan__price beats the `.card p { color: muted }` rule (0,1,1) so the
   price renders in the heading color, not grey. */
.plan .plan__price { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.2rem, 4vw, 2.75rem); line-height: 1; color: var(--color-heading); margin: .2rem 0 .35rem; }
.plan__intro { color: var(--color-text-muted); font-size: var(--fs-sm); line-height: 1.5; margin: 0; }
/* Smaller "/mo" unit beside a .plan__price. */
.plan__price-unit { font-size: .45em; font-weight: 600; color: var(--color-text-muted); }
/* Composes the global .eyebrow (orange, uppercase) — keeps only the spacing. */
.plan__hl-label { margin: .35rem 0 0; }
.plan .check-list { margin-top: .4rem; }
.plan__more { appearance: none; background: none; border: 0; padding: .25rem 0; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); color: var(--color-primary); }
.plan__more:hover { color: var(--color-primary-hover); }
.plan__more:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }
.plan__chev { width: 18px; height: 18px; transition: transform .2s ease; }
.plan.is-expanded .plan__chev { transform: rotate(180deg); }
.plan__more-hide { display: none; }
.plan.is-expanded .plan__more-show { display: none; }
.plan.is-expanded .plan__more-hide { display: inline; }
.plan__features, .plan__locked { display: none; }
.plan.is-expanded .plan__features { display: grid; }
.plan.is-expanded .plan__locked { display: block; }
.plan__locked-note { margin: 1rem 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text-muted); }
.plan__cta { margin-top: auto; width: 100%; justify-content: center; }
.plan__ctas { margin-top: auto; display: flex; flex-direction: column; gap: .6rem; }
.plan__ctas .btn { width: 100%; justify-content: center; }

/* ------------ Table of contents — sticky in-page nav (REUSABLE) ------------
   A sticky rail that highlights the section currently in view. Driven by the
   [data-toc] scroll-spy in js/main.js: it toggles .is-active on the .toc__link
   whose href matches the on-screen section, so no per-page JS is needed.
   Markup: <nav class="toc" data-toc> <p class="toc__label">…</p>
   <ul class="toc__list"><li><a class="toc__link" href="#id">…</a></li>…</ul></nav> */
.toc { position: sticky; top: 100px; align-self: start; }
.toc__label { font-family: var(--font-heading); font-weight: var(--weight-h6); font-size: 0.6875rem; line-height: 1.4; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 1rem; }
.toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-left: 1px solid var(--color-border); }
.toc__link { display: block; padding: .5rem 0 .5rem 1rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--color-text-muted); font-size: var(--fs-sm); line-height: 1.35; text-decoration: none; transition: color .15s ease, border-color .15s ease; }
.toc__link:hover { color: var(--color-heading); }
.toc__link.is-active { color: var(--color-primary); border-left-color: var(--color-primary); font-weight: 600; }
.toc__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 860px) { .toc { position: static; } }
/* Bordered rail variant of the TOC list for a div container (no <ul>). Same look
   as .toc__list; used when the rail is wrapped in a .card. */
.toc__nav { display: flex; flex-direction: column; border-left: 1px solid var(--color-border); }

/* ------------ Page sidebar — sticky side rail (REUSABLE) ------------
   A flex column of cards (TOC + CTA) that sticks beside a scrolling main column.
   Composes the 12-col grid: <aside class="pageaside col-12 col-md-3"> next to a
   <div class="col-12 col-md-9"> main column. Hidden below the md breakpoint. */
.pageaside { align-self: start; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 861px) { .pageaside { position: sticky; top: 96px; } }
@media (max-width: 860px) { .pageaside { display: none; } }
/* Inside a .pagebody layout the rail blocks sit further apart, and blocks
   after the first are divided by a hairline rule. */
.pagebody .pageaside { gap: 1.75rem; }
.pageaside .expert-card,
.pageaside .sidenav { padding-top: 1.75rem; border-top: 1px solid var(--color-border); }

/* ------------ Two-column TOC page body (REUSABLE) ------------
   The page-level wrapper + stacked content sections used with the .pageaside
   rail (PKV + legal insurance pages): <section class="pagebody"><div class="container">
   <div class="row"> <aside class="pageaside col-12 col-md-3">…</aside>
   <div class="col-12 col-md-9"> <div id="…" class="pagesection">…</div>… */
.pagebody { padding: var(--pad-full) 0; background: var(--color-bg); }
.pagesection { scroll-margin-top: 96px; }
.pagesection + .pagesection { margin-top: clamp(2.6rem, 5vw, 4rem); }

/* ------------ Sidebar note — plain "Not sure?" CTA under the TOC (REUSABLE) ------------
   Bare text block (no card surface) with a full-width button; sits inside .pageaside. */
.sidebar-note { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--color-border); }
.sidebar-note__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); color: var(--color-heading); margin: 0 0 .35rem; line-height: 1.25; }
.sidebar-note__sub { font-size: .78rem; color: var(--color-text-muted); margin: 0 0 1rem; line-height: 1.4; }
.sidebar-note .btn { width: 100%; justify-content: center; }

/* ------------ Expert CTA card — advisor lead + full-width button (REUSABLE) ------------
   A compact sidebar call-to-action: a small round avatar beside a title/subtitle,
   then a full-width button. Use inside a .card (typically .card--tight). */
.expert-card { display: flex; flex-direction: column; gap: .9rem; }
.expert-card__lead { display: flex; align-items: center; gap: .65rem; }
.expert-card__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.expert-card__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); line-height: 1.2; color: var(--color-heading); margin: 0; padding-bottom: 5px; }
.expert-card__sub { font-size: .75rem; line-height: 1.3; color: var(--color-text-muted); margin: 0; }
.expert-card .btn { width: 100%; justify-content: center; }
/* Optional quiet availability line under the button (e.g. office hours). */
.expert-card__note { font-size: .7rem; line-height: 1.3; color: var(--color-text-muted); text-align: center; margin: 0; }

/* ------------ Sidebar journey list — related products rail (REUSABLE) ------------
   "Your insurance journey" block in the .pageaside rail: an eyebrow label, a short
   intro line, then a list of product name + German term pairs; .is-current marks
   the page you're on with a primary dot. */
.sidenav__label { margin: 0 0 .35rem; }
.sidenav__intro { font-size: .75rem; line-height: 1.4; color: var(--color-text-muted); margin: 0 0 .85rem; }
.sidenav__intro a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }
.sidenav__intro a:hover { color: var(--color-link-hover); }
.sidenav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.sidenav__item a { display: flex; flex-direction: column; gap: .05rem; text-decoration: none; }
.sidenav__name { font-size: .82rem; font-weight: 700; color: var(--color-heading); }
.sidenav__de { font-size: .7rem; color: var(--color-text-muted); }
.sidenav__item a:hover .sidenav__name { color: var(--color-primary); }
.sidenav__item.is-current .sidenav__name { color: var(--color-primary); }
.sidenav__item.is-current .sidenav__name::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--color-primary); vertical-align: middle; }
.sidenav__item.is-current a { cursor: default; }

/* ------------ Timeline — vertical dated rail (REUSABLE) ------------
   Markup: <ol class="timeline"><li class="timeline__item">
   <span class="timeline__dot"></span><span class="timeline__when">…</span>
   <p class="timeline__what">…</p></li>…</ol> */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 1.25rem; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--color-border); }
.timeline__item { position: relative; padding-left: 1.75rem; }
.timeline__dot { position: absolute; left: 0; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--color-bg); border: 3px solid var(--color-primary); box-sizing: border-box; }
.timeline__when { display: block; font-family: var(--font-heading); font-weight: var(--weight-h6); font-size: 0.6875rem; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-primary); margin: 0 0 .25rem; }
.timeline__title { margin: 0 0 .3rem; font-family: var(--font-heading); font-weight: var(--weight-h2-h5); font-size: 1.0625rem; line-height: 1.25; letter-spacing: var(--ls-tight); color: var(--color-heading); }
.timeline__what { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--color-text-muted); }

/* ------------ Callout — tinted notice box (REUSABLE) ------------
   Default = soft neutral. Modifiers: --info (blue tint), --warn (amber tint +
   left accent bar). Markup: <div class="callout callout--warn">
   <span class="callout__icon"><svg/></span><p>…</p></div> */
.callout { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: var(--radius-sm); background: var(--color-bg-soft); }
.callout__icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--color-primary); margin-top: 1px; }
.callout__icon svg { width: 100%; height: 100%; display: block; }
.callout p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--color-text); }
.callout strong { color: var(--color-heading); }
.callout--info { background: color-mix(in srgb, var(--color-info) 8%, var(--color-bg)); }
.callout--info .callout__icon { color: var(--color-info); }
.callout--warn { background: color-mix(in srgb, var(--color-warning) 10%, var(--color-bg)); border-left: 3px solid var(--color-warning); }
.callout--warn .callout__icon { color: var(--color-warning); }
.callout--danger { background: color-mix(in srgb, var(--color-danger) 9%, var(--color-bg)); border-left: 3px solid var(--color-danger); }
.callout--danger .callout__icon { color: var(--color-danger); }
.callout--success { background: color-mix(in srgb, var(--color-success) 9%, var(--color-bg)); border-left: 3px solid var(--color-success); }
.callout--success .callout__icon { color: var(--color-success); }
/* --cta: callout with a trailing action button. Markup: <div class="callout callout--cta">
   <span class="callout__icon"><svg/></span><p>…</p><a class="btn btn--primary callout__btn">…</a></div> */
.callout--cta { align-items: center; }
.callout__btn { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
@media (max-width: 860.98px) {
  .callout--cta { flex-wrap: wrap; }
  .callout--cta .callout__btn { margin-left: 0; }
}

/* ------------ Cover calculator — slider estimator (REUSABLE) ------------
   Shared by the accident and home-contents cover calculators. Two-column
   .row: a white .card.acc-calc__panel of .acc-slider blocks (custom track,
   --fill kept in sync by page script) + a dark .card--dark.acc-calc__result
   summary. Hints compose the library .callout--warn. Page-specific controls
   (e.g. accident's progression toggle) stay in that page's sheet. */
.acc-calc__row { align-items: stretch; }
.acc-calc__panel { gap: 1.6rem; height: 100%; }
.acc-slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; }
.acc-slider__label { font-size: var(--fs-sm); font-weight: 700; color: var(--color-heading); margin: 0; }
.acc-slider__value { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--color-primary); font-variant-numeric: tabular-nums; }
/* Custom track so the unfilled part stays soft (default UA track is too dark).
   --fill is kept in sync by the page script. */
.acc-slider input[type="range"] { --fill: 0%; width: 100%; appearance: none; -webkit-appearance: none; height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--color-primary) var(--fill), var(--color-bg-soft) var(--fill)); border: 1px solid var(--color-border); cursor: pointer; }
.acc-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.acc-slider input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.acc-slider__scale { display: flex; justify-content: space-between; margin-top: .3rem; font-size: .72rem; color: var(--color-text-muted); }
/* Hints compose the library .callout--warn; just the show/hide + spacing here. */
.acc-hint[hidden] { display: none; }
.acc-hint { margin-top: .7rem; }
.acc-calc__result { height: 100%; justify-content: center; }
/* Text colors match the legal page's dark price card: white uppercase label,
   on-secondary figure, .7-white explainer. (0,2,1)+ scopes so the shared
   `.card--dark p` / `.card p:not(.card__title)` rules can't dim or mute them. */
.card--dark.acc-calc__result .acc-calc__result-eyebrow { margin: 0 0 .75rem; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.acc-calc__max { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.2rem, 4.5vw, 2.9rem); line-height: 1; color: var(--color-on-secondary); font-variant-numeric: tabular-nums; }
.card--dark.acc-calc__result .acc-calc__max { color: var(--color-on-secondary); }
.card--dark.acc-calc__result .acc-calc__explain { font-size: var(--fs-sm); line-height: 1.6; color: rgba(255, 255, 255, .7); }
.acc-calc__cta { align-self: flex-start; margin-top: 1rem; }
@media (max-width: 860px) {
  .acc-calc__result { margin-top: 0; }
}

/* ------------ Card — dark surface variant (REUSABLE) ------------
   Navy panel with reversed text. Composes with .card and its parts. */
.card--dark { background: var(--color-secondary); border-color: transparent; color: var(--color-on-secondary); }
.card--dark .card__title { color: var(--color-on-secondary); }
.card--dark .card__icon { background: rgba(255, 255, 255, .12); color: var(--color-on-secondary); }
/* :not(.card__title) matches the specificity of the `.card p:not(.card__title)`
   muted-color trap (0,2,1) so the white actually wins inside dark cards. */
.card--dark p:not(.card__title) { color: #fff; }
/* p.eyebrow ties with `.card--dark p` above (0,2,1) and wins by position, so
   eyebrows inside dark cards keep their orange instead of the muted white. */
.card--dark .eyebrow, .card--dark p.eyebrow { color: var(--color-primary); }
.card--dark .check-list li { color: rgba(255, 255, 255, .85); }
.card--dark .check-list svg { color: var(--color-primary); }
.split-hero .check-list li { color: rgba(255, 255, 255, .75); }
.split-hero .check-list svg { color: var(--color-primary); }

/* ---- Related-guides band + linked guide cards ----
   "Keep reading" section: soft beige band with 3 clickable .card guides.
   Used by moving-to-germany and the-german-system. */
.related-band { padding: var(--pad-full) 0; background: #F7F5F1; }
.related-band .lede { font-size: 16px; color: var(--color-heading); }
.guide { text-decoration: none; }
.guide__cat { color: var(--color-primary); }
a.guide:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.prod__more { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: var(--fs-sm); color: var(--color-primary); }
.prod__more svg { width: 14px; height: 14px; transition: transform .2s ease; }
.prod:hover .prod__more svg,
.guide:hover .prod__more svg,
.guide:focus-visible .prod__more svg { transform: translateX(3px); }

/* ---- FAQ WhatsApp button (used by moving-to-germany and the-german-system FAQ intros) ---- */
.lig-faq__wa { margin-top: 1.5rem; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 10px 25px -8px rgba(37, 211, 102, .6); transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.lig-faq__wa:hover { background: #fff; color: #25d366; box-shadow: 0 10px 25px -8px rgba(37, 211, 102, .35); }
.lig-faq__wa svg { width: 24px; height: 24px; }

/* ------------ Guide-page primitives (REUSABLE — pension guide pages) ------------
   Promoted from the Rürup page sheet when the private-pension page needed the
   same pieces (css/pages/ split rule: 2+ pages ⇒ main.css). Kicker label,
   pension-layer badge cards, soft info note, fine-print note, dark-headed
   compare table, numbered journey steps, help band, closing dark CTA band. */

/* Small uppercase kicker above a card group. */
.pg-kicker {
  margin: 2rem 0 1rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

/* Pension-layer cards (the 3-layer system). --hl highlights the layer the page is about. */
.pg-layer__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: .35rem .8rem;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .75rem;
  line-height: 1;
  background: color-mix(in srgb, var(--color-secondary) 6%, transparent);
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.pg-layer--hl .pg-layer__badge { background: var(--color-primary); color: var(--color-on-primary); }
.pg-layer--hl { background: var(--color-bg-soft); border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); }
.pg-layer__de { margin: -0.5rem 0 0; font-size: var(--fs-sm); color: color-mix(in srgb, var(--color-text) 50%, transparent); }

/* Soft info note with a leading icon. */
.pg-note {
  display: flex;
  gap: .85rem;
  margin-top: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-bg-soft);
}
.pg-note svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: .1rem; color: var(--color-primary); }
.pg-note p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--color-text); }
/* Plain-white variant (providers disclaimer). */
.pg-note--plain { background: var(--color-bg); }

/* Plain small fine-print note with icon. */
.pg-finenote { display: flex; gap: .5rem; margin: 1.25rem 0 0; font-size: var(--fs-sm); line-height: 1.5; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.pg-finenote svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: .15rem; }

/* Dark-headed compare table (what-to-compare / vs tables). */
.pg-cmp { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--card-radius); background: var(--color-bg); }
.pg-cmp table { width: 100%; min-width: 560px; border-collapse: collapse; text-align: left; }
.pg-cmp thead th {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  padding: 1rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  vertical-align: bottom;
}
.pg-cmp thead th:first-child { width: 34%; }
.pg-cmp tbody th, .pg-cmp tbody td { border-top: 1px solid var(--color-border); padding: 1rem 1.25rem; vertical-align: top; }
.pg-cmp tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--color-bg-soft) 55%, transparent); }
.pg-cmp__term { display: block; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); color: var(--color-heading); }
.pg-cmp__de { display: block; margin-top: .15rem; font-size: .75rem; font-weight: 500; color: color-mix(in srgb, var(--color-text) 48%, transparent); }
.pg-cmp__why { font-size: var(--fs-sm); line-height: 1.6; color: var(--color-text); }

/* Numbered example-journey steps. */
/* STILL IN USE — do not delete. The Rürup and pension pages now compose their
   journey steps straight from the card library (.card--plain.card--elevated
   .card--row + .card__icon/.card__body/.eyebrow/.card__title), but
   investments/etf-planning.html still relies on the .pg-step__* rules below. */
.pg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.pg-step { display: flex; gap: 1rem; align-items: flex-start; }
.pg-step__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-secondary);
  color: var(--color-on-secondary);
}
.pg-step__icon svg { width: 20px; height: 20px; }
.pg-step__body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.pg-step__num { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary); }
.pg-step__k { margin: 0; font-family: var(--font-heading); font-weight: 700; color: var(--color-heading); }
.pg-step__body > p:last-child { margin: 0; font-size: var(--fs-sm); line-height: 1.6; }

/* Help band (soft highlight card). */
.pg-help { border-color: color-mix(in srgb, var(--color-primary) 25%, transparent); background: var(--color-bg-soft); }
.pg-help .card__icon { background: var(--color-bg); }
.pg-help .btn { align-self: flex-start; margin-top: .5rem; }

/* Closing dark CTA band. */
.pg-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }
/* Bare headings inside the dark band: the global `h1..h6 { color: heading }`
   rule beats `.card--dark`'s inherited color, so state it explicitly. */
.card--dark.pg-cta h2 { color: var(--color-on-secondary); }
.card--dark.pg-cta .pg-cta__lede { color: rgba(255, 255, 255, .78); max-width: 42rem; }

/* ------------ Insurance journey (tabbed stages) ------------ */
.journey { padding: var(--pad-full) 0; background: var(--color-bg); }
.journey__head { text-align: center; margin: 0 auto; }
.journey__title { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-tight); margin: 0 0 .6rem; }
.journey__lede { color: var(--color-text-muted); font-size: var(--fs-base); line-height: var(--lh-body); margin: 0 auto; max-width: none; white-space: nowrap; }

.journey__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: none;
  margin: 5rem auto 0;
  padding: var(--space-50) var(--space-50) 0;
  background: var(--color-bg-muted);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.journey__tab {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 3.5rem;
  padding: var(--space-25) var(--space-50);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-sm);
  line-height: var(--lh-body);
  text-align: left;
  text-transform: none; letter-spacing: var(--ls-normal);
  color: var(--color-heading); cursor: pointer;
  white-space: nowrap;
  transition: none;
}
.journey__tab:hover:not(.is-active),
.journey__tab:focus-visible:not(.is-active) {
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg-muted));
}
.journey__tab.is-active {
  color: var(--color-heading);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-muted));
  border: 0;
  border-bottom: 2px solid var(--color-primary);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-secondary) 16%, transparent), inset 1px 0 0 var(--color-border), inset -1px 0 0 var(--color-border), inset 0 1px 0 var(--color-border);
  font-weight: 700;
}
.journey__tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

.journey__box {
  --journey-panel-padding: clamp(1.4rem, 4vw, 3.4rem);
  background: var(--color-bg-muted);
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  padding: var(--journey-panel-padding);
  padding-top: calc(var(--journey-panel-padding) + var(--space-50) + var(--space-25));
}
.journey__panel:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: 8px; }
.journey__panel-head { text-align: center; margin: 0 auto 3rem; }
.journey__panel-title { font-size: var(--fs-h3); line-height: 1.2; margin: 0 0 .5rem; }
.journey__panel-lede { color: var(--color-text-muted); font-size: var(--fs-base); line-height: var(--lh-body); margin: 0 auto; max-width: 42rem; }

.journey__cards { list-style: none; margin: 0; padding: 0 0 20px; }
/* Composes .card .card--plain .card--tight — only the bespoke layout remains. */
.journey-card { display: flex; gap: 1.1rem; height: 100%; padding-bottom: 50px; }
.journey-card__link { display: block; height: 100%; color: inherit; text-decoration: none; border-radius: var(--card-radius); }
.journey-card__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.journey-card__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; background: var(--color-dark); }
.journey-card__icon img { display: block; width: 50px; height: 50px; }
.journey-card__icon .ic { width: 24px; height: 24px; color: #fff; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Figma "Content Block": flex column, 12px gap — gap (not margins) controls
   spacing so the more-specific `.card p { margin: 0 }` can't collapse it. */
.journey-card__body { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.journey-card__step { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--color-primary); margin: 0; }
.journey-card__title { font-size: 1.25rem; line-height: 1.1; letter-spacing: -1px; margin: 0; color: var(--color-heading); overflow-wrap: break-word; hyphens: auto; }
.journey-card__title span { font-weight: 400; font-size: .8em; }
.journey-card__title span[lang="de"] { word-break: break-all; }
.journey-card__desc { font-size: var(--fs-sm); line-height: 1.35; color: var(--color-text-muted); margin: 0; }
.journey-card__body p.journey-card__more { display: inline-flex; align-items: center; gap: .4rem; margin: auto 0 0; padding-top: 4px; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-sm); color: var(--color-heading); }
.journey-card__more .ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.journey-card__link:hover .journey-card__more .ic { transform: translateX(3px); }

.journey__service { margin-top: 2.2rem; }
.journey__service .eyebrow { margin-bottom: .8rem; }
.journey__service-lead { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h4); line-height: 1.25; letter-spacing: var(--ls-tight);journey__service-checks col-12 col-md-5 color: var(--color-heading); margin: 0 0 .6rem; }
.journey__service-text { color: var(--color-text-muted); font-size: var(--fs-sm); line-height: 1.5; max-width: 54ch; margin: 0 0 1rem; }
.journey__service-links { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: 0; }
.journey__service-links a { color: var(--color-text); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; }
.journey__service-links a:hover { color: var(--color-primary); }
.journey__service-checks { list-style: none; padding: 0; display: grid; gap: .9rem; }
.journey__service-checks li { display: flex; align-items: center; gap: .65rem; font-size: var(--fs-sm); color: var(--color-text); }
.journey__service-checks svg { flex: 0 0 auto; width: 21px; height: 21px; color: var(--color-primary); }

.journey__cta { display: flex; flex-direction: column; align-items: center; gap: .85rem; margin-top: 50px; }
.journey__cta-note { display: inline-flex; align-items: center; gap: .4rem; color: var(--color-primary); font-weight: 600; font-size: var(--fs-sm); margin: 0; }
.journey__cta-note img { width: 17px; height: 13px; }

@media (max-width: 860px) {
  .hero__note { display: none; }
  .journey__cards { padding-bottom: 0; }
  .journey__service { padding-left: 0; padding-right: 0; }
  .journey__lede { white-space: normal; max-width: 36rem; }
}

@media (max-width: 700px) {
  .journey__tabs { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 380px) {
  .journey__tab { padding-right: var(--space-25); padding-left: var(--space-25); font-size: var(--fs-sm); }
}

/* ---------------- Closing CTA band ---------------- */
.cta { padding: var(--pad-full) 0; }
.cta__inner {
  background: var(--gradient-two);
  color: #fff; text-align: center;
  border-radius: 22px; padding: clamp(2.6rem, 5vw, 4rem) 1.5rem;
}
.cta__inner h2 { color: #fff; }
.cta__inner p { color: rgba(255,255,255,.8); margin-bottom: 1.6rem; }
.cta__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* --------------------- Footer --------------------- */
.site-footer { background: var(--color-secondary); color: var(--color-on-secondary); padding: 50px 0; }
.site-footer__inner { display: flex; flex-direction: column; gap: 50px; }

.site-footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.site-footer__brand { display: inline-flex; flex: none; }
.site-footer__logo { display: block; height: 30px; width: auto; }

.site-footer__nav { display: flex; flex-wrap: wrap; gap: 30px; }
.site-footer__group { display: flex; flex-direction: column; gap: 8px; width: 180px; max-width: 100%; }
.site-footer__group--contact { gap: 30px; }
.site-footer__subgroup { display: flex; flex-direction: column; gap: 8px; width: 255px; max-width: 100%; }

.site-footer__heading {
  margin: 0; font-family: var(--font-heading); font-weight: 700;
  font-size: var(--fs-h5); line-height: 1.2; letter-spacing: var(--ls-tight);
  color: var(--color-on-secondary);
}
.site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer__list a, .site-footer__address {
  font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.5;
  color: var(--color-on-secondary); opacity: .8;
}
.site-footer__list a { display: inline-block; text-decoration: none; transition: opacity .15s ease; }
.site-footer__list a:hover, .site-footer__list a:focus-visible { opacity: 1; }
.site-footer__contact { display: flex; align-items: center; gap: 8px; }
.site-footer__contact--address { align-items: flex-start; }
.site-footer__icon { flex: none; width: 16px; height: 16px; color: var(--color-primary); }
.site-footer__address { font-style: normal; }

.site-footer__about { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 300px; max-width: 100%; }
.site-footer__blurb { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--color-on-secondary); opacity: .8; }
.site-footer__rating { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.5; color: var(--color-on-secondary); opacity: .8; text-decoration: none; transition: opacity .15s ease; }
.site-footer__rating:hover, .site-footer__rating:focus-visible { opacity: 1; color: var(--color-on-secondary); }
.site-footer__social-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer__social-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.5; color: var(--color-on-secondary); opacity: .8; text-decoration: none; transition: opacity .15s ease; }
.site-footer__social-link:hover, .site-footer__social-link:focus-visible { opacity: 1; color: var(--color-on-secondary); }
.site-footer__social-icon { flex: none; color: var(--color-primary); }
.site-footer__chats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.site-footer__chat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; background: rgba(255, 255, 255, .05); font-family: var(--font-body); font-size: 12px; line-height: 1; color: var(--color-on-secondary); opacity: .8; text-decoration: none; transition: opacity .15s ease, background .15s ease; }
.site-footer__chat:hover, .site-footer__chat:focus-visible { opacity: 1; color: var(--color-on-secondary); background: rgba(255, 255, 255, .1); }
.site-footer__chat-icon { flex: none; }
.site-footer__chat-icon--wa { color: var(--color-whatsapp); }
.site-footer__stars { display: inline-flex; gap: 2px; color: #eab308; }
.site-footer__star { display: block; }

.site-footer__reg { width: 100%; display: flex; align-items: flex-start; gap: 20px; background: rgba(255, 255, 255, .05); border-radius: 12px; padding: 20px; }
.site-footer__reg-icon { flex: none; color: var(--color-primary); }
.site-footer__reg-body { flex: 1 1 auto; min-width: 0; }
.site-footer__reg-title { margin: 0 0 6px; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-sm); color: #fff; }
.site-footer__reg-text { margin: 0; font-size: 12px; line-height: 1.6; color: var(--color-on-secondary); opacity: .75; max-width: 62ch; }
.site-footer__reg-links { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer__reg-links a { font-size: 12px; color: rgba(255, 255, 255, .85); text-decoration: none; transition: color .15s ease; }
.site-footer__reg-links a:hover, .site-footer__reg-links a:focus-visible { color: #fff; }
.site-footer__reg-card { flex: 0 1 300px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; padding: 12px 14px; }
.site-footer__reg-label { margin: 0 0 4px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-on-secondary); opacity: .6; }
.site-footer__reg-number { margin: 0 0 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .04em; color: #fff; }
.site-footer__reg-verify { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--color-on-secondary); opacity: .75; text-decoration: none; transition: opacity .15s ease; }
.site-footer__reg-verify:hover, .site-footer__reg-verify:focus-visible { opacity: 1; color: var(--color-on-secondary); }
.site-footer__reg-ext { flex: none; }

.site-footer__base { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.site-footer__divider { width: 100%; height: 1px; margin: 0; border: 0; background: var(--color-footer-divider); }
.site-footer__copyright { margin: 0; text-align: center; font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.4; color: var(--color-on-secondary); }

/* Persistent WhatsApp contact action — kept in base.html so it survives
   pages where the global footer is disabled. */
.floating-whatsapp {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 900;
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.floating-whatsapp:hover {
  filter: brightness(.9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  transform: translateY(-2px);
}
.floating-whatsapp:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
}
.floating-whatsapp__icon { display: block; }
.floating-whatsapp__tooltip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: min(240px, calc(100vw - 100px));
  padding: .45rem .65rem;
  border-radius: 6px;
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}
.floating-whatsapp__tooltip::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 100%;
  border: 5px solid transparent;
  border-top-color: var(--color-secondary);
}
.floating-whatsapp:hover .floating-whatsapp__tooltip,
.floating-whatsapp:focus-visible .floating-whatsapp__tooltip {
  opacity: 1;
  transform: translateY(0);
}

/* "Edit in Replit" button — only rendered inside the HubSpot page editor (the
   is_in_editor wrapper in base.html). Fixed bottom-left, Replit brand orange. */
.replit-edit-btn {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.05rem;
  border-radius: 999px;
  background: #f26207;
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(242,98,7,.35), 0 2px 6px rgba(0,0,0,.15);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.replit-edit-btn:hover {
  background: #d9550a;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(242,98,7,.45), 0 3px 8px rgba(0,0,0,.18);
}
.replit-edit-btn__logo { display: block; color: #fff; flex: none; }

/* ------------------- Testimonials ------------------- */
.testimonials { position: relative; padding: var(--pad-full) 0; background: #f7f5f1 url("data:image/svg+xml,%3Csvg width='1440' height='743' viewBox='0 0 1440 743' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg clip-path='url(%23clip0_15004_7529)'%3E %3Crect width='1440' height='743' fill='white'/%3E %3Crect width='1440' height='743' fill='%23F7F5F1'/%3E %3Cpath opacity='0.04' d='M1141.32 404.855C1141.32 497.432 1113.66 566.043 1066.39 620.446C1021.04 672.637 955.476 714.219 871.927 749.507C796.049 717.697 730.722 678.739 683.579 627.042C634.187 572.876 602.684 502.511 602.684 404.855V220.01C672.209 214.271 738.118 196.135 788.561 178.589C819.317 167.891 844.963 157.186 863.009 149.115C866.255 147.664 869.252 146.281 872 145.011C874.748 146.281 877.745 147.664 880.991 149.115C899.037 157.186 924.683 167.891 955.439 178.589C1005.88 196.135 1071.79 214.271 1141.32 220.01V404.855ZM1229 134.311H1185.16C1113.8 134.311 1040.76 115.552 984.284 95.9078C956.324 86.1823 933.039 76.4538 916.833 69.2064C908.742 65.5879 902.447 62.6013 898.251 60.5584C896.155 59.5374 894.583 58.757 893.579 58.2498C893.076 57.9963 892.716 57.8102 892.502 57.7001C892.402 57.6487 892.33 57.6209 892.294 57.6024L872 47L851.694 57.5902V57.6024C851.656 57.6219 851.59 57.653 851.498 57.7001C851.284 57.8102 850.924 57.9963 850.421 58.2498C849.417 58.757 847.845 59.5374 845.749 60.5584C841.553 62.6013 835.258 65.5879 827.167 69.2064C810.961 76.4538 787.676 86.1823 759.716 95.9078C703.24 115.552 630.201 134.311 558.842 134.311H515V404.855C515 523.941 554.4 615.426 618.746 685.99C681.997 755.351 767.233 802.226 855.743 837.502L872.073 844L888.367 837.453C986.164 798.153 1071.59 748.083 1132.63 677.831C1194.66 606.442 1229 517.062 1229 404.855V134.311Z' fill='%23374957'/%3E %3C/g%3E %3Cdefs%3E %3CclipPath id='clip0_15004_7529'%3E %3Crect width='1440' height='743' fill='white'/%3E %3C/clipPath%3E %3C/defs%3E %3C/svg%3E") no-repeat center / cover; overflow: hidden; }
.testimonials__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.testimonials__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 46rem; margin-bottom: 35px; }
.testimonials__rating { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 0; font-size: var(--fs-sm); color: var(--color-text); }
.testimonials__title { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -1px; color: var(--color-heading); }
.testimonials__link { margin: 0; }
.testimonials__link a { color: var(--color-primary); text-decoration: none; font-size: var(--fs-base); }
.testimonials__link a:hover { text-decoration: underline; }
.stars { display: block; width: 88px; height: 18px; fill: #fbbc04; }

.testimonials__viewport { width: 920px; max-width: 100%; overflow-x: clip; overflow-y: visible; overflow-clip-margin: 30px; }
.testimonials__track { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; will-change: transform; transition: transform .4s ease; }
@media (prefers-reduced-motion: reduce) { .testimonials__track { transition: none; } }
.testimonials__item { flex: 0 0 auto; width: 445px; max-width: 100%; }

/* Composes .card .card--plain .card--elevated — keeps its generous 50px padding. */
/* .card.testimonial-card (0,2,0, later in file) beats the base
   `.card:not(.card--row) { gap: 12px }` so the Figma 25px rhythm survives. */
.card.testimonial-card { display: flex; flex-direction: column; gap: 25px; height: 100%; box-sizing: border-box; margin: 0; padding: 50px; }
.testimonial-card__quote { margin: 0; }
.testimonial-card__quote p { margin: 0; font-family: var(--font-heading); font-style: italic; font-weight: 400; font-size: var(--fs-base); line-height: 1.35; color: var(--color-text); }
/* Figma: quote→author is 32px (vs the card's 25px gap) — top up the difference. */
.testimonial-card__author { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.testimonial-card__name { font-family: var(--font-heading); font-weight: 700; font-size: 14px; letter-spacing: -.28px; color: var(--color-text); }
.testimonial-card__role { font-size: 13px; line-height: 1.35; color: var(--color-text); }

.testimonials__dots { display: flex; align-items: center; justify-content: center; gap: 2px; width: -webkit-fit-content; width: fit-content; max-width: 80%; margin-inline: auto; }
.testimonials__dot { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 50px; height: 2px; padding: 0; border: 0; border-radius: 2px; background: rgba(7, 10, 27, .1); cursor: pointer; }
.testimonials__dot::before { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--color-primary); opacity: 0; transition: opacity .2s ease; }
.testimonials__dot::after { content: ""; position: absolute; inset: -11px 0; }
.testimonials__dot.is-active::before { opacity: 1; }
.testimonials__dot:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }

@media (max-width: 980px) { .testimonials__viewport { width: 445px; } }
@media (max-width: 520px) {
  .testimonials__item { width: 85vw; }
  .testimonials__viewport { width: 85vw; }
  .testimonial-card { padding: 32px; }
}

/* ------------------- Scroll reveal ------------------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* -------------------- Flex alignment utilities -------------------- */
.justify-end { justify-content: flex-end; }
.items-start { align-items: flex-start; }

/* -------------------- Responsive -------------------- */
@media (max-width: 860px) {
  .grid--3 { grid-template-columns: 1fr; }
  .site-footer__top { flex-direction: column; gap: 36px; }
  .site-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .site-footer__group, .site-footer__subgroup { width: auto; }
  .site-footer__group--contact { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 24px; }
  .site-footer__group--contact .site-footer__subgroup { flex: 1 1 40%; }
  .site-footer__reg { flex-direction: column; }
  .site-footer__reg-card { flex: none; width: 100%; }

  .hero { padding: 40px 0; }
  .hero__media { margin-top: 1rem; }
  .founder-card { margin-left: 0; max-width: 100%; }
  .hero__rating { flex-wrap: wrap; gap: .4rem; }
  .hero__rating .rating { gap: .3rem; }
  .hero__rating .rating__stars { gap: 1px; }
  .hero__rating .rating__stars svg { width: 12px; height: 12px; }
  .hero__rating-divider { display: none; }
  .hero__rating .rating__text, .hero__rating .hero__trusted { font-size: .625rem; white-space: nowrap; }
  .trust-strip__logo { padding: 0 1.5rem; }
}

/* The nav collapses to the hamburger drawer earlier than the 861px grid
   breakpoint: with five top-level items plus the CTA the desktop menu no
   longer fits between ~861px and ~1100px and would wrap to two lines. */
@media (max-width: 1100px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute; top: 80px; left: 0; right: 0;
    background: var(--color-bg); border-bottom: 1px solid var(--color-border);
    flex-direction: column; align-items: stretch; gap: .25rem;
    padding: 1rem 15px 1.4rem;
    display: none;
    /* The drawer can grow taller than the screen (mega menus) — scroll it
       instead of trapping the lower items out of reach. */
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav.is-open { display: flex; }
  .nav-menu { flex-direction: column; align-items: stretch; gap: .15rem; width: 100%; }
  .nav-item { width: 100%; }
  .nav-link { width: 100%; justify-content: space-between; padding: .75rem 0; }

  /* Dropdowns become inline accordions inside the mobile drawer */
  .nav-dropdown {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    min-width: 0; padding: 0 0 .5rem .6rem; border: 0; border-radius: 0; box-shadow: none;
    display: none;
  }
  .nav-dropdown::before { display: none; }
  .nav-item--dropdown.is-open .nav-dropdown { display: flex; }
  .nav-dropdown__link { padding: .55rem 6px; }

  /* Mega dropdowns collapse into plain accordion lists in the mobile drawer:
     no panel chrome, groups stacked, descriptions/footer hidden. */
  .nav-dropdown--mega { padding: 0 0 .5rem .6rem; }
  .nav-mega__panel, .nav-mega__panel--narrow {
    margin: 0; width: 100%;
    max-width: none; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  }
  .nav-mega__grid, .nav-mega__grid--wide { padding: 0; display: flex; flex-direction: column; gap: .6rem; }
  .nav-mega__heading { padding: 0; margin: .4rem 0 .1rem; }
  .nav-mega__item { padding: .45rem 6px; gap: .55rem; border-radius: 8px; }
  .nav-mega__icon { width: 26px; height: 26px; border-radius: 7px; margin-top: 0; }
  .nav-mega__icon .ic { width: 14px; height: 14px; }
  .nav-mega__text { padding-top: 4px; }
  .nav-mega__desc { display: none; }
  .nav-mega__group--timeline .nav-mega__heading { display: none; }
  .nav-mega__foot { display: none; }

  .nav-knowledge__header { display: none; }
  .nav-knowledge__layout { display: flex; flex-direction: column; gap: .2rem; padding: 0; }
  .nav-knowledge__featured { padding: .75rem; border-radius: 10px; }
  .nav-knowledge__featured-owl { width: 32px; height: 40px; }
  .nav-knowledge__destinations { display: flex; flex-direction: column; gap: 0; }
  .nav-knowledge__destination {
    display: grid; grid-template-columns: 30% minmax(0, 1fr) auto; min-height: 44px;
    align-self: stretch; align-items: center; gap: .35rem; padding: .45rem 0 .45rem 6px;
  }
  .nav-knowledge__destination-type {
    grid-column: 1; flex: none; min-width: 0; padding-top: 0; font-size: .6rem;
  }
  .nav-knowledge__destination-copy { display: contents; }
  .nav-knowledge__destination-title {
    grid-column: 2; min-width: 0; white-space: nowrap;
  }
  .nav-knowledge__destination-arrow {
    grid-column: 3; justify-self: end; white-space: nowrap;
  }
  .nav-knowledge__destination-desc { display: none; }

  /* Mega groups become nested accordions in the drawer: the heading <button>
     toggles its list. Hidden-when-closed is gated behind .js so a blocked
     main.js can never make the lists unreachable. */
  button.nav-mega__heading { cursor: pointer; pointer-events: auto; padding: .45rem 6px; margin: 0; color: var(--color-heading); }
  button.nav-mega__heading .nav-chevron { display: block; }
  /* Outranks .nav-item--dropdown.is-open .nav-chevron (the parent-accordion
     rotation), which would otherwise flip every group chevron at once. */
  .nav-mega__group--collapsible > button.nav-mega__heading .nav-chevron { transform: none; }
  .nav-mega__group--collapsible.is-open > button.nav-mega__heading .nav-chevron { transform: rotate(180deg); }
  .nav-js-ready .nav-mega__group--collapsible:not(.is-open) > .nav-mega__list { display: none; }

  .nav-cta { width: 100%; margin-top: .6rem; }
}

/* Soft-tinted section background (alternating bands). Pairs with .section. */
.section--soft { background: var(--color-bg-soft); }

/* Dark brand band (secondary green). Pairs with .section; flips the
   .section-head text for contrast (eyebrow stays primary orange). */
.section--dark { background: var(--color-secondary); }
.section--dark .section-head h2 { color: var(--color-on-secondary); }
.section--dark .section-head p:not(.eyebrow) { color: rgba(255, 255, 255, .78); }

/* -------------------- Stat grid — big number + caption row --------------------
   A small reusable layout helper (e.g. hero proof stats). Tokens only. */
.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.statgrid__item { display: flex; flex-direction: column; gap: .35rem; }
.statgrid__num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1; color: var(--color-heading); }
.statgrid__cap { font-size: .8rem; line-height: 1.4; color: var(--color-text-muted); margin: 0; }
@media (max-width: 700px) { .statgrid { grid-template-columns: 1fr 1fr; gap: 1.3rem; } }
/* Icon-tile variant — a library .card__icon above each stat, word-sized titles
   that stay on one line. Shared by the PKV and legal insurance pages. */
.statgrid--icons .statgrid__item { gap: 0; }
.statgrid--icons .statgrid__num { margin-bottom: 8px; font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.statgrid--icons .card__icon { margin-bottom: 14px; }

/* -------------------- Status icon (yes / limited / no) — reusable -------------------- */
.stat { display: inline-flex; }
.stat__icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.stat__icon svg { width: 13px; height: 13px; }
.stat--yes .stat__icon { background: var(--color-primary); color: var(--color-on-primary); }
.stat--limited .stat__icon { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.stat--no .stat__icon { background: transparent; color: var(--color-text-muted); border: 1.5px solid var(--color-border); }

/* -------------------- Benefit matrix — accordion of category tables (REUSABLE) ----
   Collapsible category sections, each opening to a grid of rows x N plan columns
   with a status icon + detail per cell. Driven by the generic [data-accordion]
   handler in main.js. Catalogued at /components. Tokens only. */
.matrix__legend { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin: 0 0 1.5rem; }
.matrix__key { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); color: var(--color-text-muted); }
.matrix__key .stat__icon { width: 20px; height: 20px; }
/* position:relative makes this scroller the containing block for the
   visually-hidden abspos .matrix__collabel spans — without it they resolve
   to the page and widen html scrollWidth (blank space right of the page
   on mobile). */
.matrix__scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.matrix__table { min-width: 720px; }
.matrix__cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; background: var(--color-secondary); color: var(--color-on-secondary); border-radius: 14px 14px 0 0; padding: .9rem 1.25rem; }
.matrix__col { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); text-align: left; display: flex; flex-direction: column; gap: .15rem; }
.matrix__col--label { text-align: left; }
.matrix__col small { font-family: var(--font-body); font-weight: 500; font-size: .68rem; opacity: .75; }
.matrix__cta { display: inline-flex; align-self: flex-start; align-items: center; justify-content: center; gap: .3rem; margin-top: .6rem; padding: .42rem .85rem; border-radius: 999px; background: var(--color-primary); color: var(--color-on-secondary); font-family: var(--font-heading); font-weight: 700; font-size: .72rem; line-height: 1; text-decoration: none; transition: background .15s ease; }
.matrix__cta:hover { background: var(--color-primary-dark, #e05500); color: var(--color-on-secondary); }
.matrix__cta:focus-visible { outline: 2px solid var(--color-on-secondary); outline-offset: 2px; }
.matrix__cta-arrow { font-size: .9em; }
.matrix__lead { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; background: var(--color-bg); border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.matrix__leadnote { display: block; margin-top: .4rem; font-family: var(--font-body); font-weight: 500; font-size: .76rem; line-height: 1.4; color: var(--color-text-muted); }
.matrix__price { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-base); color: var(--color-primary); }
.matrix__price small { font-family: var(--font-body); font-weight: 500; font-size: .72rem; color: var(--color-text-muted); }

.matrix__cat { border: 1px solid var(--color-border); border-top: 0; }
.matrix__cat:last-of-type { border-radius: 0 0 14px 14px; }
.matrix__cat:last-of-type:not(.is-open) .matrix__trigger { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
.matrix__cat-head { margin: 0; font: inherit; }
.matrix__trigger { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1rem 1.25rem; border: 0; background: var(--color-bg-muted); cursor: pointer; text-align: left; }
.matrix__trigger:hover { background: color-mix(in srgb, var(--color-bg-muted) 90%, var(--color-text-muted)); }
.matrix__cat-title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-base); color: var(--color-heading); }
.matrix__chev { flex: none; width: 11px; height: 11px; border-right: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); transform: rotate(45deg); transition: transform .25s ease; }
.matrix__cat.is-open .matrix__chev { transform: rotate(-135deg); }
.matrix__trigger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.matrix__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.matrix__panel[hidden] { display: none; }
.matrix__cat.is-open .matrix__panel { grid-template-rows: 1fr; }
.matrix__panel-inner { overflow: hidden; min-height: 0; }

.matrix__row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; border-top: 1px solid var(--color-border); }
.matrix__rowlabel { font-size: var(--fs-sm); font-weight: 600; color: var(--color-heading); line-height: 1.3; padding: .95rem 1.25rem; }
.matrix__cell { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: .95rem 1rem; text-align: left; border-left: 1px solid var(--color-border); }
.matrix__collabel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.matrix__detail { font-size: .78rem; line-height: 1.35; color: var(--color-text-muted); margin: 0; }
.matrix__sublabel { display: block; margin-top: .3rem; font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--color-text-muted); }
.matrix__cell--hl { background: var(--color-bg-soft); }
.matrix__cell--hl .matrix__detail { color: var(--color-heading); }

/* 3-column variant — label + two plan columns (e.g. Premium/Exklusiv) */
.matrix--3col .matrix__cols { grid-template-columns: 1.8fr 1fr 1fr; }
.matrix--3col .matrix__row { grid-template-columns: 1.8fr 1fr 1fr; }
.matrix--3col .matrix__table { min-width: 620px; }

/* Mobile: the matrix keeps its 4-column table layout and scrolls
   horizontally inside .matrix__scroll (overflow-x: auto in the base rules;
   .matrix__table's min-width guarantees the columns keep their shape).
   No stacked-card fallback — per the client's direction it stays a plain
   swipeable table. .matrix__collabel stays visually hidden at every width
   (but remains readable by screen readers for cell↔plan association). */

/* Mobile: the matrix keeps its 4-column table layout and scrolls
   horizontally inside .matrix__scroll (overflow-x: auto in the base rules;
   .matrix__table's min-width guarantees the columns keep their shape).
   No stacked-card fallback — per the client's direction it stays a plain
   swipeable table. .matrix__collabel remains hidden at every width. */

@media (prefers-reduced-motion: reduce) {
  .matrix__panel, .matrix__chev { transition: none; }
}


/* -------------------- Insurance page shared sections (legal + liability) --------------------
   Not-covered band, how-it-works steps, why-NEOdirect cards, the tariff-finder
   quiz + dark price card, and the underwriter partner strip — used by 2+
   insurance pages, so they live here per the CSS-split rule. Page-local
   variants stay in css/pages/insurance/<page>.css. */

/* ==== Good to know: soft band with standard icon-top cards ==== */
.notcov { background: var(--color-bg-soft); border-radius: 24px; padding: 2.5rem 1.5rem; }
@media (min-width: 861px) {
  .notcov { padding: 3rem 2.5rem; }
}
.notcov__head { margin-bottom: 0; }
.notcov__icon { margin-bottom: 1.25rem; }
.notcov__items { display: flex; flex-direction: column; gap: 1rem; }
.notcov-card .card__title { font-size: var(--fs-h5); }
/* `.card p:not(.card__title)` sets the ink; this only shrinks the size. */
.card.notcov-card p:not(.card__title) { font-size: var(--fs-sm); }

/* ==== How it works: intro column + numbered step cards ==== */
.howit__intro { display: flex; flex-direction: column; gap: 1.5rem; }
.howit__intro .section-head { margin-bottom: 0; }
.howit__img { display: block; width: 100%; height: auto; border-radius: var(--card-radius); }
.howit__steps { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.howit-step__num { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--color-primary); }
.howit-step .card__title { font-size: var(--fs-h5); }
.card.howit-step p:not(.card__title) { font-size: var(--fs-sm); }
/* After the generic step-p rule — same specificity, later wins for font-size. */
.card.howit-step p.howit-step__tag { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.howit__cta { align-self: flex-start; }

/* ==== Why NEOdirect: rule above, 2-up reason cards + CTA ==== */
/* The "simple straight line" separating this from How it works. */
.whynd { border-top: 1px solid var(--color-border); padding-top: clamp(2.6rem, 5vw, 4rem); }
.whynd-card .card__title { font-size: var(--fs-h5); }
.card.whynd-card p:not(.card__title) { font-size: var(--fs-sm); }
.whynd__actions { margin-top: 2rem; }

/* ==== Find your cover: 2-step quiz (left) + live dark price card (right) ==== */
.tfind__row { align-items: flex-start; }
.tfind__quiz { background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: var(--card-radius); padding: 2rem; }
.tfind__progress { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.tfind__bar { height: 6px; flex: 1; border-radius: 999px; background: color-mix(in srgb, var(--color-secondary) 10%, transparent); transition: background .2s; }
.tfind__bar.is-active { background: var(--color-primary); }
.tfind__back { border: 0; background: none; padding: 0; margin-bottom: 1rem; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: color-mix(in srgb, var(--color-text) 60%, transparent); cursor: pointer; }
.tfind__back:hover { color: var(--color-text); }
.tfind__stepnum { margin: 0 0 .35rem; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary); }
.tfind__q { margin: 0 0 1rem; font-size: var(--fs-h4); }
.tfind__note { margin: -0.5rem 0 1rem; font-size: var(--fs-sm); color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.tfind__opts { display: grid; gap: .75rem; }
@media (min-width: 861px) { .tfind__opts--2col { grid-template-columns: 1fr 1fr; } }
.tfind__opts--3col { grid-template-columns: repeat(3, 1fr); }
.tfind__opts--3col .tfind__opt { padding: .65rem .75rem; gap: .4rem; }
.tfind__opts--3col .tfind__opt-label { font-size: var(--fs-sm); }
.tfind__opts--3col .tfind__opt-hint  { font-size: .72rem; }
.tfind__opt { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.tfind__opt:hover { border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); }
.tfind__opt[aria-pressed="true"] { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.tfind__opt > svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--color-primary); }
.tfind__opt-copy { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.tfind__opt-label { font-weight: 600; font-size: var(--fs-h5); line-height: 1.3; color: var(--color-heading); }
.tfind__opt-hint { font-size: var(--fs-sm); line-height: 1.35; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.tfind__opt-tag { display: inline-flex; align-items: center; gap: .3rem; vertical-align: 2px; margin-left: .4rem; padding: .15rem .55rem; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tfind__opt-tag svg { width: 10px; height: 10px; }

/* Right: dark price card, sticky beside the quiz on desktop. */
@media (min-width: 861px) { .tfind__price { position: sticky; top: 100px; } }
.tfind__pill { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; padding: .35rem .8rem; border-radius: 999px; background: var(--color-bg-soft); color: var(--color-secondary); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.25rem; }
.tfind__pill svg { width: 14px; height: 14px; }
.tfind__promo { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; margin-bottom: 1.25rem; }
.tfind__promo-pct { font-family: var(--font-heading); font-weight: 700; font-size: clamp(3.5rem, 6vw, 4.5rem); line-height: .85; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.tfind__promo-side { width: 100%; font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; color: rgba(255, 255, 255, .65); margin-top: 0; }
.card--dark.tfind__price .tfind__price-title { margin: 0 0 .6rem; font-size: var(--fs-h4); color: var(--color-on-secondary); }
.card--dark.tfind__price .tfind__price-lede { font-size: var(--fs-sm); color: rgba(255, 255, 255, .7); margin: 0 0 1.25rem; }
.tfind__frombox { display: flex; align-items: center; gap: .65rem; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); border-radius: 12px; padding: .8rem 1rem; }
.tfind__frombox svg { flex: 0 0 auto; width: 20px; height: 20px; color: #fff; }
.card--dark.tfind__price .tfind__frombox p { margin: 0; font-size: var(--fs-sm); color: rgba(255, 255, 255, .8); }
.tfind__frombox strong { color: #fff; font-variant-numeric: tabular-nums; }

.card--dark.tfind__price .tfind__price-eyebrow { margin: 0 0 .75rem; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.tfind__billing { display: inline-flex; align-items: center; gap: .25rem; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: .25rem; margin-bottom: .75rem; }
.tfind__billing button { display: inline-flex; align-items: center; gap: .4rem; border: 0; border-radius: 999px; padding: .4rem .9rem; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: rgba(255, 255, 255, .65); cursor: pointer; transition: background .15s, color .15s; }
.tfind__billing button:hover { color: #fff; }
.tfind__billing button[aria-pressed="true"] { background: #fff; color: var(--color-secondary); }
.tfind__billing button[aria-disabled="true"] { opacity: .85; }
.tfind__billing-tag { display: inline-flex; align-items: center; padding: .12rem .45rem; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: .55rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.tfind__billing-note { margin: 0 0 1rem; padding: .65rem .8rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--color-primary) 55%, transparent); background: color-mix(in srgb, var(--color-primary) 18%, transparent); font-size: var(--fs-sm); line-height: 1.4; color: #fff; }
.tfind__billing-note[hidden] { display: none !important; }
.offermodal__billing-note { margin: .5rem 0 0; padding: .65rem .8rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg)); font-size: var(--fs-sm); line-height: 1.4; color: var(--color-text); }
.tfind__now { display: flex; align-items: flex-end; gap: .65rem; margin-bottom: .25rem; }
.card--dark.tfind__price .tfind__now-value { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.1rem, 4vw, 2.5rem); line-height: 1; color: var(--color-on-secondary); font-variant-numeric: tabular-nums; }
.card--dark.tfind__price .tfind__now-unit { margin: 0 0 .2rem; font-size: var(--fs-sm); color: rgba(255, 255, 255, .55); }
.card--dark.tfind__price .tfind__was { margin: 0 0 .75rem; font-size: var(--fs-sm); color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.tfind__was-tag { display: inline-flex; align-items: center; margin-left: .3rem; padding: .15rem .55rem; border-radius: 999px; background: var(--color-bg-soft); color: var(--color-secondary); font-size: .7rem; font-weight: 600; }
.tfind__aboutbox { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); border-radius: 12px; padding: .65rem .9rem; margin-bottom: 1rem; font-size: var(--fs-sm); color: rgba(255, 255, 255, .55); }
.tfind__aboutbox strong { color: #fff; font-size: .95rem; font-variant-numeric: tabular-nums; }
.card--dark.tfind__price .tfind__summary { margin: 0 0 1.25rem; font-size: var(--fs-sm); color: rgba(255, 255, 255, .7); }
.card--dark.tfind__price .tfind__inc-label { margin: 0 0 .75rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.tfind__inc { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .65rem; }
.tfind__inc li { display: flex; align-items: flex-start; gap: .65rem; font-size: var(--fs-sm); line-height: 1.35; color: rgba(255, 255, 255, .85); }
.tfind__inc svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--color-primary); margin-top: .1rem; }
.tfind__notebox { display: flex; align-items: flex-start; gap: .65rem; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); border-radius: 12px; padding: .9rem; margin-bottom: 1.25rem; }
.tfind__notebox svg { flex: 0 0 auto; width: 16px; height: 16px; color: #fff; margin-top: .1rem; }
.card--dark.tfind__price .tfind__notebox p { margin: 0; font-size: var(--fs-sm); line-height: 1.4; color: rgba(255, 255, 255, .75); }
.tfind__discount { display: flex; align-items: flex-start; gap: .8rem; background: var(--color-bg-soft); border-radius: 12px; padding: .9rem 1rem; margin-bottom: 1.25rem; }
.tfind__discount svg { flex: 0 0 auto; width: 26px; height: 26px; color: #000; margin-top: .1rem; }
.card--dark.tfind__price .tfind__discount-title { margin: 0; font-weight: 700; font-size: .95rem; color: var(--color-heading); }
.card--dark.tfind__price .tfind__discount-body { margin: .15rem 0 0; font-size: var(--fs-sm); line-height: 1.35; color: var(--color-text); font-variant-numeric: tabular-nums; }
.tfind__cta { width: 100%; text-align: center; }
.tfind__reset { display: block; width: fit-content; margin: .75rem auto 0; padding: .5rem 1.25rem; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 8px; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: rgba(255, 255, 255, .7); cursor: pointer; text-decoration: none; text-align: center; transition: border-color .15s, color .15s; }
.tfind__reset:hover { border-color: rgba(255, 255, 255, .75); color: #fff; }
.tfind__foot { margin-top: 1.75rem; max-width: none; text-align: center; font-size: .75rem; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* --- Find your cover: top divider (mirrors .whynd) --- */
.tfind { border-top: 1px solid var(--color-border); padding-top: clamp(2.6rem, 5vw, 4rem); }

/* --- Who underwrites your cover (partner strip) --- */
.partner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2.25rem; border-top: 1px solid var(--color-border); padding-top: clamp(2.6rem, 5vw, 4rem); }
.partner__main { flex: 1 1 320px; min-width: 0; max-width: 64ch; }
.partner__eyebrow { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; }
.partner__eyebrow svg { width: 16px; height: 16px; flex: 0 0 auto; }
.partner__pill { display: inline-flex; align-items: center; padding: .5rem 1rem; border-radius: 999px; background: var(--color-bg-soft); border: 1px solid var(--color-border); font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--color-heading); }
.partner__note { margin: 1.1rem 0 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--color-text-muted); }
.partner__side { display: flex; flex-direction: column; align-items: center; gap: .9rem; flex: 0 0 auto; margin: 0 auto; }
@media (min-width: 861px) { .partner__side { margin: 0; } }
.partner__badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 144px; height: 144px; border-radius: 50%; background: var(--color-secondary); color: #fff; text-align: center; box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent); }
.partner__badge-stars { display: flex; gap: 2px; color: var(--color-primary); margin-bottom: .35rem; }
.partner__badge-stars svg { width: 12px; height: 12px; display: block; }
.partner__badge-num { font-family: var(--font-heading); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -.02em; }
.partner__badge-cap { margin-top: .4rem; padding: 0 1rem; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; line-height: 1.35; color: rgba(255, 255, 255, .7); }
.partner__google { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; transition: opacity .15s ease; }
.partner__google:hover { opacity: .8; }
.partner__g { width: 16px; height: 16px; flex: 0 0 auto; }
.partner__gstars { display: flex; gap: 2px; color: #FBBC05; }
.partner__gstars svg { width: 12px; height: 12px; display: block; }
.partner__gtext { font-size: 12px; color: var(--color-text-muted); }
.partner__gtext strong { color: var(--color-heading); }

/* -------------------- Bilingual legal layout (Impressum / Datenschutz) --------------------
   Shared by any legal page using the numbered two-column EN/DE card pattern.
   Page-local overrides (background, hero spacing) live in css/pages/<slug>.css. */
.leg-sec { margin-bottom: 1.6rem; gap: 0 !important; }
.leg-sec:last-child { margin-bottom: 0; }
.leg-sec__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.leg-sec__num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary); color: var(--color-on-primary, #fff); font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); }
.leg-sec__rule { flex: 1 1 auto; height: 1px; background: var(--color-border); }
.leg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.leg-col { min-width: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.leg-col .eyebrow { margin: 0; }
.leg-col h2 { font-size: var(--fs-h4); margin: 0; }
.leg-col p { margin: 0; color: var(--color-text-muted); }
.leg-col p strong { color: var(--color-heading); }
.leg-lines { margin: 0; color: var(--color-text-muted); }
.leg-lines span { display: block; }
.leg-col a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.leg-col a:hover { color: var(--color-heading); }
.leg-note { margin: 1.8rem 0 0; }
.leg-note__body { display: flex; flex-direction: column; gap: 0.5rem; }
.leg-updated { margin: 1rem 0 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
@media (min-width: 861px) { .leg-col--de { border-left: 1px solid var(--color-border); padding-left: 2rem; } }
@media (max-width: 860.98px) { .leg-cols { grid-template-columns: 1fr; } .leg-col--de { border-top: 1px solid var(--color-border); padding-top: 1.4rem; } }