/* ==========================================================================
   Type system — one place for every text style on the site (loaded after every page stylesheet).
   Rules:  700 = headings & numbers · 600 = interactive / labels (buttons, nav, chips, links)
           400 = running text and eyebrows.  Colours: --text (navy) for headings, body and lead, --text-2 for
           eyebrows and meta text, --text-3 only for inactive states; brand blue for eyebrow dots and accents.
   Sizes (font-size / line-height in px)       Desktop      Tablet       Phone
     Display  (big numbers)                    64 / 72      56 / 64      48 / 56
     H1       page title                       56 / 64      44 / 52      36 / 44   (DE: 52/60 · 40/48 · 32/40)
     H2       section                          40 / 48      32 / 40      28 / 36
     H3       sub-section, product step        32 / 40      28 / 36      24 / 32
     H4       card / item title                20 / 28      20 / 28      18 / 26
     H5       small title, names               16 / 24      16 / 24      16 / 24
     Quote                                     24 / 34      20 / 30      18 / 28   (600)
     Eyebrow  caps, tracked, --text-2, blue dot 13 / 18     13 / 18      13 / 18   (400) · 12px above its heading
     Lead     subtitle under H1/H2 = Body L    18 / 28      16 / 24      16 / 24   (navy, like running text)
     Body L   main running text                18 / 28      16 / 24      16 / 24
     Body     cards, panels                    16 / 24      16 / 24      16 / 24
     Small    labels, roles, notes             14 / 20      14 / 20      14 / 20   (--text-2)
   ========================================================================== */
:root { --text: #071a5f; --text-2: #666f96; /* lightest grey that still meets WCAG AA (4.6:1) on the page background */ --text-3: #9da5b0; --grey-text: var(--text-2); --navy-60: var(--text-2); }

/* ---------- Display ---------- */
:root .stat__num { font-size: 64px; line-height: 72px; font-weight: 700; letter-spacing: -0.03em; }

/* ---------- H1 ---------- */
:root main :is(h1, h1.h1) { font-size: 56px; line-height: 64px; font-weight: 700; letter-spacing: -0.038em; }
html[lang="de"] main :is(h1, h1.h1) { font-size: 52px; line-height: 60px; }

/* ---------- CTA band title = H1 scale, its text = Lead (all pages) ---------- */
:root .cta-band :is(h2, .h1, .ab-h2) { font-size: 56px; line-height: 64px; font-weight: 700; letter-spacing: -0.038em; }
:root .cta-band :is(.lead, p.lead) { font-size: 18px; line-height: 28px; }
html[lang="de"] .cta-band :is(h2, .h1, .ab-h2) { font-size: 52px; line-height: 60px; }

/* ---------- H2 ---------- */
:root main :is(h2.h1, .h2, .problem__title, .ab-h2, .int-connect__title, .roi-diff__title) { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -0.035em; }

/* ---------- H3 ---------- */
:root main :is(.ats-step__title, .sp-step__title, .book-box__title, .demo-hero__h2, .success__title, .roi-results__title, .int-values__title, .ab-h2.ab-h2--sm) { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.03em; }

/* ---------- H4 ---------- */
:root main :is(.step__title, .ab-value__title, .ab-founder__name, .int-value__title, .acc__title, .stat__title, .contact-form__title, .office__city, .legal__h, .legal--prose h2) { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: 0; }

/* ---------- H5 ---------- */
:root :is(.works__title, .ab-member__name, .tcard figcaption strong, .book-box__who strong, .ab-quote__by, .quote__by strong, .ab-partner__link) { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--text); }

/* ---------- Quote ---------- */
:root .quote__by { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text-2); }
:root :is(.quote__text, .quote__text p) { font-size: 24px; line-height: 34px; font-weight: 600; }

/* ---------- Eyebrow ---------- */
/* Small grey caps label with a blue dot. Follows the alignment of its block (centred under centred headings,
   otherwise flush left). Sits 12px above the heading it introduces. */
.eyebrow { font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.eyebrow::before {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 10px; vertical-align: 2px;
  border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(53, 90, 240, 0.08);
}
:root :is(main, .cta-band) .eyebrow:has(+ :is(h1, h2, h3, .h1, .h2)) { margin-bottom: 12px; }
:root :is(main, .cta-band) .eyebrow + :is(h1, h2, h3, .h1, .h2) { margin-top: 0; }

/* ---------- Lead ---------- */
:root :is(.lead, .ab-hero__lead, .ab-cta__lead, .legal-hero__date) { font-size: 18px; line-height: 28px; font-weight: 400; color: var(--text); }

/* ---------- Body L ---------- */
:root main :is(.prod__text, .connect__text, .problem__caption, .ats-step__body, .sp-step__body, .legal p, .legal__list li, .legal--prose ul li, .ab-quote, .ab-founder p, .sp-step:first-child .sp-step__body) { font-size: 18px; line-height: 28px; color: var(--text); }
:root main :is(.problem__caption) { font-weight: 400; }

/* ---------- Body ---------- */
:root main :is(.int-value__text, .int-value:nth-child(n) .int-value__text, li.card, li.card p, .acc__panel, .acc__panel p, .ab-partner__name, .tcard blockquote, .stat__text, .works__note, .office__addr, .office__contact, .legal-hero__note, .step__text, .step__text p) { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--text); }

/* ---------- Small ---------- */
:root main :is(.field__label, .roi-field__label, .consent, .tcard figcaption, .ab-member__role, .meetings__alt, .hs-note, .book-box__who, .ab-partner__desc, .office__label, .office__brand, .meetings__consent-text) { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text-2); }

/* demo booking box: body size, points keep their semibold */
:root main :is(.book-box__sub, .book-box__points li) { font-size: 16px; line-height: 24px; }

/* ---------- Links & comparison table ---------- */
:root main .link-underline { font-size: 18px; line-height: 28px; font-weight: 600; }
:root main :is(.cmp__cell--cap, .cmp__cell--lytra) { color: var(--text); }
:root main :is(.cmp__cell--other, .cmp__caption, .cmp__row--head .cmp__cell--other) { color: var(--text-2); }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
  :root .stat__num { font-size: 56px; line-height: 64px; }
  :root main :is(h1, h1.h1) { font-size: 44px; line-height: 52px; }
  html[lang="de"] main :is(h1, h1.h1) { font-size: 40px; line-height: 48px; }
  :root main :is(h2.h1, .h2, .problem__title, .ab-h2, .int-connect__title, .roi-diff__title) { font-size: 32px; line-height: 40px; }
  :root main :is(.ats-step__title, .sp-step__title, .book-box__title, .demo-hero__h2, .success__title, .roi-results__title, .int-values__title, .ab-h2.ab-h2--sm) { font-size: 28px; line-height: 36px; }
  :root :is(.quote__text, .quote__text p) { font-size: 20px; line-height: 30px; }
  :root :is(.lead, .ab-hero__lead, .ab-cta__lead, .legal-hero__date) { font-size: 16px; line-height: 24px; }
  :root main :is(.prod__text, .connect__text, .problem__caption, .ats-step__body, .sp-step__body, .legal p, .legal__list li, .legal--prose ul li, .ab-quote, .ab-founder p, .sp-step:first-child .sp-step__body) { font-size: 16px; line-height: 24px; }
  :root main .link-underline { font-size: 16px; line-height: 24px; }
  :root .cta-band :is(h2, .h1, .ab-h2) { font-size: 44px; line-height: 52px; }
  html[lang="de"] .cta-band :is(h2, .h1, .ab-h2) { font-size: 40px; line-height: 48px; }
  :root .cta-band :is(.lead, p.lead) { font-size: 16px; line-height: 24px; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  :root .stat__num { font-size: 48px; line-height: 56px; }
  :root main :is(h1, h1.h1) { font-size: 36px; line-height: 44px; }
  html[lang="de"] main :is(h1, h1.h1) { font-size: 32px; line-height: 40px; }
  :root main :is(h2.h1, .h2, .problem__title, .ab-h2, .int-connect__title, .roi-diff__title) { font-size: 28px; line-height: 36px; }
  :root main :is(.ats-step__title, .sp-step__title, .book-box__title, .demo-hero__h2, .success__title, .roi-results__title, .int-values__title, .ab-h2.ab-h2--sm) { font-size: 24px; line-height: 32px; }
  :root main :is(.step__title, .ab-value__title, .ab-founder__name, .int-value__title, .acc__title, .stat__title, .contact-form__title, .office__city, .legal__h, .legal--prose h2) { font-size: 18px; line-height: 26px; }
  :root :is(.quote__text, .quote__text p) { font-size: 18px; line-height: 28px; }
  :root :is(.lead, .ab-hero__lead, .ab-cta__lead, .legal-hero__date) { font-size: 16px; line-height: 24px; }
  .eyebrow { letter-spacing: 0.05em; }
  :root .cta-band :is(h2, .h1, .ab-h2) { font-size: 36px; line-height: 44px; }
  html[lang="de"] .cta-band :is(h2, .h1, .ab-h2) { font-size: 32px; line-height: 40px; }
  :root .cta-band :is(.lead, p.lead) { font-size: 16px; line-height: 24px; }
  /* German compounds on a ~340px column */
  html[lang="de"] main :is(h2.h1, .h2, .problem__title, .ab-h2, .int-connect__title, .roi-diff__title) { font-size: 26px; line-height: 34px; }
  html[lang="de"] main :is(.ats-step__title, .sp-step__title) { font-size: 22px; line-height: 30px; }
}
@media (max-width: 350px) {
  html[lang="de"] main :is(h2.h1, .h2, .problem__title, .ab-h2, .int-connect__title, .roi-diff__title) { font-size: 24px; line-height: 32px; }
  html[lang="de"] main :is(h1, h1.h1) { font-size: 28px; line-height: 36px; }
}