/**
 * Base styles — reset, typography, buttons, scroll-reveal.
 * Ported directly from Javier's redesign proposal (CSG_Website_2026_10.html)
 * — same class names, same values. Colors reference tokens.css (which
 * defines the exact --bg/--t1/--t2/--t3/etc. the reference file used
 * inline) instead of a separate :root block, so there's one source of
 * truth instead of two copies of the same palette.
 */
@import 'tokens.css';

/* Self-hosted Roboto — replaces the Google Fonts CDN link (no external
   request, no render-blocking third-party origin). Files sourced from
   the licensed set Javier provided (repo root /Fonts), copied into
   assets/fonts/. Only the weights actually used site-wide are loaded. */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--wh);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

svg {
  display: block;
  flex-shrink: 0;
}

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

button {
  cursor: pointer;
  font-family: var(--font-sans);
}

/* ─── Layout ─── */
.W {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-14);
}

.WN {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 var(--space-14);
}

/* Newsletter article pages carry real body copy now (sourced analysis,
   not a one-paragraph blurb). First attempt just widened this container
   to 840px — wrong fix: it broke left-edge alignment with .nav-in/.ft.
   Second attempt matched --content-width (1180px) — correct alignment,
   but Javier wanted the wider newsletter treatment (1440px, previously
   only used by the archive grid) applied consistently instead of
   compressing the grid down to 1180px. Scope: newsletter pages only —
   see body.nl-wide rules below — not the sitewide --content-width
   token, so homepage/legal pages are untouched. Either way, the outer
   box always matches nav/footer's width exactly (same edges), and only
   the actual reading content is capped to a comfortable measure via
   the .WN--article > * rule below — left-aligned within that wide box,
   not re-centered, so it stays flush with the nav/footer edge. */
.WN--article {
  max-width: var(--content-width);
}

.WN--article > .legal-back,
.WN--article > .ey,
.WN--article > h1,
.WN--article > .nl-subtitle,
.WN--article > .nl-preview,
.WN--article > .legal-meta,
.WN--article > .nl-hero-wrap,
.WN--article > .legal-body {
  max-width: 760px;
}

/* Newsletter-only wide treatment (hero/grid/article/footer all match at
   1440px instead of the sitewide 1180px --content-width) — scoped to
   body.nl-wide so homepage and legal pages (imprint/privacy/terms) are
   completely unaffected. Applied to newsletter.html, de/newsletter.html,
   and every newsletter-*.html article page. */
body.nl-wide .nav-in,
body.nl-wide .h-body,
body.nl-wide .W,
body.nl-wide .WN--article,
body.nl-wide .ft {
  max-width: 1440px;
}

.SEC {
  /* Goal: most sections fit in one screen, content vertically centered
     within it — same pattern as .hero. min-height is a target, not a
     lock: light-content sections (Proof) center with generous breathing
     room up to one viewport; heavy-content sections (How We Buy,
     Services) simply exceed 100vh and grow taller, still guaranteed the
     --space-20 floor top and bottom rather than a fixed --space-28
     that made every section the same padding regardless of how much
     content it held. 2026-08-20, per Javier: "if a section has much
     more content, it must have less spacing than others with less
     content, while keeping it as consistent as possible." */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-20) 0;
}

.hr {
  height: 1px;
  background: var(--bd);
}

/* ─── Type ─── */
.ey {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t3);
  display: block;
  margin-bottom: 14px;
}

.D1 {
  font-size: clamp(62px, 9vw, 118px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: var(--wh);
}

.D1-t {
  color: var(--t3);
}

/* --t3 is documented in brand/TOKENS.md as decorative/fill only in
   light mode (2.1:1 against white — fails WCAG AA even for large text);
   --t1 is the token TOKENS.md reserves specifically as the text-safe
   accent (5.0:1 against white). .ey/.D1-t/.H2-t use --t3 as literal
   text everywhere (eyebrow labels, hero/headline highlights) with no
   light-mode override, so every one of them failed contrast in light
   mode — found via a full-page contrast audit, 2026-08-07. Dark mode is
   untouched (--t3 already passes AAA there, 7.4:1). */
[data-theme='light'] .ey,
[data-theme='light'] .D1-t,
[data-theme='light'] .H2-t {
  color: var(--t1);
}

.H2 {
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.07;
  color: var(--wh);
}

.H2-t {
  color: var(--t3);
  font-style: normal;
}

.H3 {
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--wh);
}

.L {
  font-size: 18px;
  font-weight: 300;
  color: var(--mu);
  line-height: 1.78;
}

.M {
  font-size: 15px;
  font-weight: 400;
  color: var(--mu);
  line-height: 1.72;
}

.S {
  font-size: 13px;
  font-weight: 400;
  color: var(--mu);
  line-height: 1.65;
}

strong.w {
  color: var(--wh);
  font-weight: 500;
}

/* ─── Buttons ─── */
.BP {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--on-accent);
  background: var(--t3);
  padding: 15px 32px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  min-height: 50px;
  transition: background 0.2s var(--ez), box-shadow 0.2s var(--ez), transform 0.18s var(--ez);
}

.BP:hover {
  background: var(--t3-hover);
  box-shadow: 0 0 32px rgba(101, 194, 196, 0.38);
  transform: translateY(-2px);
}

.BG {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--t3);
  background: transparent;
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1.5px solid rgba(101, 194, 196, 0.28);
  min-height: 50px;
  transition: border-color 0.2s, background 0.2s;
}

.BG:hover {
  border-color: var(--t3);
  background: var(--gl);
}

/* ─── Theme + language toggle (new — not in the reference, added per
   Javier's request for a light mode). No boxes, no borders, no extra
   dividers — same plain-text treatment as .nav-links, so it reads as
   part of the nav, not a bolted-on control panel. ─── */
.csg-toggle-group {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
}

.csg-toggle-group + .csg-toggle-group {
  margin-left: 4px;
  padding-left: 16px;
  position: relative;
}

.csg-toggle-group + .csg-toggle-group::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: rgba(101, 194, 196, 0.12);
}

/* Always dark — this toggle group only ever appears inside the nav,
   which is locked to dark regardless of page theme. */
.csg-toggle-btn {
  font-size: 13px;
  font-weight: 500;
  color: #8a9bb0;
  background: none;
  border: none;
  padding: 4px 2px;
  min-height: 44px;
  transition: color 0.15s;
}

.csg-toggle-btn:hover {
  color: #ffffff;
}

.csg-toggle-btn--active {
  color: var(--t3);
  font-weight: 700;
}

.csg-toggle-sep {
  color: #8a9bb0;
  opacity: 0.4;
  font-size: 12px;
}

/* Theme toggle — sun/moon icons, no separator (two adjacent icons read
   clearly without a divider, unlike the EN/DE text toggle which keeps
   its "/"). Same hand-drawn stroke style as every other icon on the
   site — see brand/ICONS.md. */
.csg-toggle-group--icon {
  gap: 6px;
  /* Dark-mode-only, per direct instruction (2026-08-19): hide the
     switch rather than delete it — theme.ts and the light-mode CSS
     stay in the codebase untouched, in case it's wanted back later.
     One rule here instead of editing the toggle out of every page's
     nav markup (it's repeated verbatim in ~20+ HTML files). */
  display: none !important;
}

/* Newsletter isn't approved for public front-end discovery yet (the
   rest of the site already is) — hide any link into it from footers
   site-wide, same reasoning/pattern as the theme toggle above. The
   newsletter pages themselves are untouched and still reachable by
   direct URL. Matches by the shared data-i18n key so it works
   regardless of the relative href (differs by folder depth). */
.ft-col li:has(> a[data-i18n="footer.company6"]) {
  display: none !important;
}

.csg-toggle-btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  min-height: 36px;
  min-width: 36px;
  border-radius: var(--radius-xs);
  transition: color 0.15s, background 0.15s;
}

.csg-toggle-btn--icon:hover {
  background: rgba(101, 194, 196, 0.08);
}

/* ─── Scroll reveal — progressive enhancement: visible by default,
   only .csg-js (set by main.ts once JS actually runs) hides pending
   reveal, so a crawler or JS failure never hides real content.
   Animation itself (fade/lift in both scroll directions, stagger delay)
   is driven by GSAP ScrollTrigger — see reveal-on-scroll.ts. ─── */
.csg-js .rv {
  opacity: 0;
  transform: translateY(24px);
}

.rv.in {
  opacity: 1;
  transform: none;
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}