/* Generated by libs/ts/design-tokens (make generate) from tokens/*.json — do not edit; target: sites/www tokens.css, prefers-color-scheme mirror */
@font-face {
  font-family: 'Archivo';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/archivo-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/archivo-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/archivo-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/archivo-700.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-500.woff2') format('woff2');
}

:root {
  --tg-ink-50: #f4f6f9;
  --tg-ink-100: #e9ecf2;
  --tg-ink-200: #d3d8e2;
  --tg-ink-300: #aab3c6;
  --tg-ink-400: #7d8aa8;
  --tg-ink-500: #55658a;
  --tg-ink-600: #405173;
  --tg-ink-700: #2c3d5c;
  --tg-ink-800: #1d2b45;
  --tg-ink-900: #141f33;
  --tg-ink-950: #10192a;
  --tg-wave-50: #eef7fc;
  --tg-wave-100: #cbe7f6;
  --tg-wave-200: #a8dbf3;
  --tg-wave-300: #7dc7eb;
  --tg-wave-400: #4bb3e3;
  --tg-wave-500: #1f8ac0;
  --tg-wave-600: #17709e;
  --tg-wave-700: #145e86;
  --tg-wave-800: #0f4d6e;
  --tg-wave-900: #0a3c58;
  --tg-wave-950: #08344d;
  --tg-success-50: #e6f4ee;
  --tg-success-100: #c3e3d5;
  --tg-success-200: #9dcdb7;
  --tg-success-300: #77b699;
  --tg-success-400: #50a07a;
  --tg-success-500: #1f8a5c;
  --tg-success-600: #19784f;
  --tg-success-700: #146643;
  --tg-success-800: #0f5537;
  --tg-success-900: #0a442b;
  --tg-success-950: #083c26;
  --tg-warning-50: #fbf1e0;
  --tg-warning-100: #eeddbc;
  --tg-warning-200: #dfc497;
  --tg-warning-300: #d2ab71;
  --tg-warning-400: #c5914b;
  --tg-warning-500: #b8761a;
  --tg-warning-600: #a16716;
  --tg-warning-700: #8a5812;
  --tg-warning-800: #744a0e;
  --tg-warning-900: #5f3b0b;
  --tg-warning-950: #553509;
  --tg-error-50: #fbeae8;
  --tg-error-100: #f0cdc9;
  --tg-error-200: #e7aaa3;
  --tg-error-300: #dc877d;
  --tg-error-400: #cf6257;
  --tg-error-500: #c0392f;
  --tg-error-600: #a52f26;
  --tg-error-700: #8c2b23;
  --tg-error-800: #74271f;
  --tg-error-900: #5c221c;
  --tg-error-950: #511f1a;
  --tg-paper: #fbfbfc;
  --tg-white: #ffffff;
  --tg-bg: #fbfbfc;
  --tg-bg-muted: #f4f6f9;
  --tg-bg-elevated: #ffffff;
  --tg-bg-accented: #e9ecf2;
  --tg-bg-inverted: #141f33;
  --tg-text: #141f33;
  --tg-text-highlighted: #141f33;
  --tg-text-toned: #2c3d5c;
  --tg-text-muted: #55658a;
  --tg-text-dimmed: #55658a;
  --tg-text-inverted: #ffffff;
  --tg-border: #e9ecf2;
  --tg-border-muted: #e9ecf2;
  --tg-border-accented: #d3d8e2;
  --tg-border-inverted: #141f33;
  --tg-primary: #17709e;
  --tg-secondary: #405173;
  --tg-success: #1f8a5c;
  --tg-warning: #b8761a;
  --tg-error: #c0392f;
  --tg-info: #17709e;
  --tg-focus-ring: #a8dbf3;
  --tg-focus-border: #1f8ac0;
  --tg-focus-ring-error: #f0cdc9;
  --tg-scrim: rgba(20, 31, 51, 0.48);
  --tg-link: #17709e;
  --tg-selection: #cbe7f6;
  --tg-brand-mark: #1f8ac0;
  --tg-notice-info-bg: #eef7fc;
  --tg-notice-info-border: #cbe7f6;
  --tg-notice-info-text: #145e86;
  --tg-notice-success-bg: #e6f4ee;
  --tg-notice-success-border: #c3e3d5;
  --tg-notice-success-text: #146643;
  --tg-notice-warning-bg: #fbf1e0;
  --tg-notice-warning-border: #eeddbc;
  --tg-notice-warning-text: #8a5812;
  --tg-notice-error-bg: #fbeae8;
  --tg-notice-error-border: #f0cdc9;
  --tg-notice-error-text: #8c2b23;
  --tg-button-primary-bg: #17709e;
  --tg-button-primary-fg: #ffffff;
  --tg-button-primary-bg-hover: #145e86;
  --tg-button-primary-bg-active: #0f4d6e;
  --tg-button-primary-bg-disabled: #d3d8e2;
  --tg-button-primary-fg-disabled: #ffffff;
  --tg-button-secondary-bg: #ffffff;
  --tg-button-secondary-border: #d3d8e2;
  --tg-button-secondary-fg: #141f33;
  --tg-button-secondary-bg-hover: #f4f6f9;
  --tg-button-secondary-border-hover: #aab3c6;
  --tg-button-secondary-bg-active: #e9ecf2;
  --tg-button-secondary-border-active: #aab3c6;
  --tg-button-secondary-fg-disabled: #aab3c6;
  --tg-button-secondary-border-disabled: #e9ecf2;
  --tg-button-ghost-fg: #17709e;
  --tg-button-ghost-bg-hover: #eef7fc;
  --tg-button-ghost-fg-hover: #17709e;
  --tg-button-ghost-bg-active: #cbe7f6;
  --tg-button-ghost-fg-active: #145e86;
  --tg-button-ghost-fg-disabled: #aab3c6;
  --tg-button-danger-bg: #c0392f;
  --tg-button-danger-fg: #ffffff;
  --tg-button-danger-bg-hover: #a52f26;
  --tg-button-danger-bg-active: #8c2b23;
  --tg-button-danger-ring: #f0cdc9;
  --tg-button-danger-bg-disabled: #e9ecf2;
  --tg-button-danger-fg-disabled: #aab3c6;
  --tg-field-bg: #ffffff;
  --tg-field-border: #d3d8e2;
  --tg-field-fg: #141f33;
  --tg-field-border-error: #c0392f;
  --tg-field-ring-error: #f0cdc9;
  --tg-field-message-error: #8c2b23;
  --tg-field-readonly-bg: #f4f6f9;
  --tg-field-readonly-border: #e9ecf2;
  --tg-field-readonly-fg: #55658a;
  --tg-field-disabled-bg: #f4f6f9;
  --tg-field-disabled-border: #e9ecf2;
  --tg-field-disabled-fg: #aab3c6;
  --tg-nav-active-fg: #17709e;
  --tg-nav-active-bg: #eef7fc;
  --tg-z-content: 0;
  --tg-z-header: 100;
  --tg-z-dropdown: 200;
  --tg-z-scrim: 300;
  --tg-z-dialog: 400;
  --tg-z-toast: 500;
  --tg-z-skip: 600;
  --tg-radius-sm: 4px;
  --tg-radius-md: 8px;
  --tg-radius-lg: 14px;
  --tg-shadow-sm: 0 1px 2px rgba(20, 31, 51, 0.08);
  --tg-shadow-md: 0 2px 8px rgba(20, 31, 51, 0.1);
  --tg-shadow-lg: 0 12px 32px rgba(20, 31, 51, 0.14);
  --tg-motion-micro: 120ms;
  --tg-motion-standard: 200ms;
  --tg-motion-enter: 320ms;
  --tg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --tg-space-card-padding: 24px;
  --tg-space-card-gap: 16px;
  --tg-space-section-gap: 48px;
  --tg-space-form-row: 12px;
  --tg-space-container-margin-sm: 16px;
  --tg-space-container-margin-md: 24px;
  --tg-size-button-sm: 32px;
  --tg-size-button-md: 38px;
  --tg-size-button-lg: 46px;
  --tg-size-field: 38px;
  --tg-size-touch-target: 44px;
  --tg-size-header: 64px;
  --tg-size-sidebar: 240px;
  --tg-size-content-max: 1200px;
}

.dark {
  --tg-bg: #141f33;
  --tg-bg-muted: #1d2b45;
  --tg-bg-elevated: #1d2b45;
  --tg-bg-accented: #2c3d5c;
  --tg-bg-inverted: #fbfbfc;
  --tg-text: #fbfbfc;
  --tg-text-highlighted: #ffffff;
  --tg-text-toned: #d3d8e2;
  --tg-text-muted: #aab3c6;
  --tg-text-dimmed: #aab3c6;
  --tg-text-inverted: #141f33;
  --tg-border: #2c3d5c;
  --tg-border-muted: #2c3d5c;
  --tg-border-accented: #405173;
  --tg-border-inverted: #fbfbfc;
  --tg-primary: #4bb3e3;
  --tg-secondary: #7d8aa8;
  --tg-success: #50a07a;
  --tg-warning: #c5914b;
  --tg-error: #dc877d;
  --tg-info: #4bb3e3;
  --tg-focus-ring: #145e86;
  --tg-focus-border: #4bb3e3;
  --tg-focus-ring-error: #74271f;
  --tg-scrim: rgba(20, 31, 51, 0.48);
  --tg-link: #4bb3e3;
  --tg-selection: #0a3c58;
  --tg-brand-mark: #1f8ac0;
  --tg-notice-info-bg: #08344d;
  --tg-notice-info-border: #0f4d6e;
  --tg-notice-info-text: #a8dbf3;
  --tg-notice-success-bg: #083c26;
  --tg-notice-success-border: #0f5537;
  --tg-notice-success-text: #9dcdb7;
  --tg-notice-warning-bg: #553509;
  --tg-notice-warning-border: #744a0e;
  --tg-notice-warning-text: #dfc497;
  --tg-notice-error-bg: #511f1a;
  --tg-notice-error-border: #74271f;
  --tg-notice-error-text: #e7aaa3;
  --tg-button-primary-bg: #4bb3e3;
  --tg-button-primary-fg: #141f33;
  --tg-button-primary-bg-hover: #7dc7eb;
  --tg-button-primary-bg-active: #a8dbf3;
  --tg-button-primary-bg-disabled: #2c3d5c;
  --tg-button-primary-fg-disabled: #7d8aa8;
  --tg-button-secondary-bg: #141f33;
  --tg-button-secondary-border: #405173;
  --tg-button-secondary-fg: #fbfbfc;
  --tg-button-secondary-bg-hover: #1d2b45;
  --tg-button-secondary-border-hover: #55658a;
  --tg-button-secondary-bg-active: #2c3d5c;
  --tg-button-secondary-border-active: #55658a;
  --tg-button-secondary-fg-disabled: #55658a;
  --tg-button-secondary-border-disabled: #2c3d5c;
  --tg-button-ghost-fg: #4bb3e3;
  --tg-button-ghost-bg-hover: #1d2b45;
  --tg-button-ghost-fg-hover: #7dc7eb;
  --tg-button-ghost-bg-active: #2c3d5c;
  --tg-button-ghost-fg-active: #a8dbf3;
  --tg-button-ghost-fg-disabled: #55658a;
  --tg-button-danger-bg: #dc877d;
  --tg-button-danger-fg: #141f33;
  --tg-button-danger-bg-hover: #e7aaa3;
  --tg-button-danger-bg-active: #f0cdc9;
  --tg-button-danger-ring: #74271f;
  --tg-button-danger-bg-disabled: #2c3d5c;
  --tg-button-danger-fg-disabled: #7d8aa8;
  --tg-field-bg: #141f33;
  --tg-field-border: #405173;
  --tg-field-fg: #fbfbfc;
  --tg-field-border-error: #dc877d;
  --tg-field-ring-error: #74271f;
  --tg-field-message-error: #e7aaa3;
  --tg-field-readonly-bg: #1d2b45;
  --tg-field-readonly-border: #2c3d5c;
  --tg-field-readonly-fg: #aab3c6;
  --tg-field-disabled-bg: #1d2b45;
  --tg-field-disabled-border: #2c3d5c;
  --tg-field-disabled-fg: #55658a;
  --tg-nav-active-fg: #4bb3e3;
  --tg-nav-active-bg: #1d2b45;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tg-bg: #141f33;
    --tg-bg-muted: #1d2b45;
    --tg-bg-elevated: #1d2b45;
    --tg-bg-accented: #2c3d5c;
    --tg-bg-inverted: #fbfbfc;
    --tg-text: #fbfbfc;
    --tg-text-highlighted: #ffffff;
    --tg-text-toned: #d3d8e2;
    --tg-text-muted: #aab3c6;
    --tg-text-dimmed: #aab3c6;
    --tg-text-inverted: #141f33;
    --tg-border: #2c3d5c;
    --tg-border-muted: #2c3d5c;
    --tg-border-accented: #405173;
    --tg-border-inverted: #fbfbfc;
    --tg-primary: #4bb3e3;
    --tg-secondary: #7d8aa8;
    --tg-success: #50a07a;
    --tg-warning: #c5914b;
    --tg-error: #dc877d;
    --tg-info: #4bb3e3;
    --tg-focus-ring: #145e86;
    --tg-focus-border: #4bb3e3;
    --tg-focus-ring-error: #74271f;
    --tg-scrim: rgba(20, 31, 51, 0.48);
    --tg-link: #4bb3e3;
    --tg-selection: #0a3c58;
    --tg-brand-mark: #1f8ac0;
    --tg-notice-info-bg: #08344d;
    --tg-notice-info-border: #0f4d6e;
    --tg-notice-info-text: #a8dbf3;
    --tg-notice-success-bg: #083c26;
    --tg-notice-success-border: #0f5537;
    --tg-notice-success-text: #9dcdb7;
    --tg-notice-warning-bg: #553509;
    --tg-notice-warning-border: #744a0e;
    --tg-notice-warning-text: #dfc497;
    --tg-notice-error-bg: #511f1a;
    --tg-notice-error-border: #74271f;
    --tg-notice-error-text: #e7aaa3;
    --tg-button-primary-bg: #4bb3e3;
    --tg-button-primary-fg: #141f33;
    --tg-button-primary-bg-hover: #7dc7eb;
    --tg-button-primary-bg-active: #a8dbf3;
    --tg-button-primary-bg-disabled: #2c3d5c;
    --tg-button-primary-fg-disabled: #7d8aa8;
    --tg-button-secondary-bg: #141f33;
    --tg-button-secondary-border: #405173;
    --tg-button-secondary-fg: #fbfbfc;
    --tg-button-secondary-bg-hover: #1d2b45;
    --tg-button-secondary-border-hover: #55658a;
    --tg-button-secondary-bg-active: #2c3d5c;
    --tg-button-secondary-border-active: #55658a;
    --tg-button-secondary-fg-disabled: #55658a;
    --tg-button-secondary-border-disabled: #2c3d5c;
    --tg-button-ghost-fg: #4bb3e3;
    --tg-button-ghost-bg-hover: #1d2b45;
    --tg-button-ghost-fg-hover: #7dc7eb;
    --tg-button-ghost-bg-active: #2c3d5c;
    --tg-button-ghost-fg-active: #a8dbf3;
    --tg-button-ghost-fg-disabled: #55658a;
    --tg-button-danger-bg: #dc877d;
    --tg-button-danger-fg: #141f33;
    --tg-button-danger-bg-hover: #e7aaa3;
    --tg-button-danger-bg-active: #f0cdc9;
    --tg-button-danger-ring: #74271f;
    --tg-button-danger-bg-disabled: #2c3d5c;
    --tg-button-danger-fg-disabled: #7d8aa8;
    --tg-field-bg: #141f33;
    --tg-field-border: #405173;
    --tg-field-fg: #fbfbfc;
    --tg-field-border-error: #dc877d;
    --tg-field-ring-error: #74271f;
    --tg-field-message-error: #e7aaa3;
    --tg-field-readonly-bg: #1d2b45;
    --tg-field-readonly-border: #2c3d5c;
    --tg-field-readonly-fg: #aab3c6;
    --tg-field-disabled-bg: #1d2b45;
    --tg-field-disabled-border: #2c3d5c;
    --tg-field-disabled-fg: #55658a;
    --tg-nav-active-fg: #4bb3e3;
    --tg-nav-active-bg: #1d2b45;
  }
}

.type-display {
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  font-size: 36px;
  line-height: 42px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.type-h1 {
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
  text-wrap: balance;
}
.type-h2 {
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  text-wrap: balance;
}
.type-h3 {
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  text-wrap: balance;
}
.type-body {
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  text-wrap: pretty;
}
.type-ui {
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.type-small {
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
}
.type-overline {
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.type-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity !important;
  }
}

/* sites/www — the hand-written layer over tokens.css (generated beside
   this file; the build concatenates the two into one /site.css).
   Colour only through the --tg-* roles, type only through the .type-*
   classes, spacing and size only through the --tg-space-* and
   --tg-size-* tokens (design D-4; design-system.md §5: card padding 24,
   the gap between cards 16, the gap between sections 48, form-row 12).
   The vertical rhythm is form-row between a heading and its text and
   between paragraphs, card-gap and card-padding inside the header, the
   hero, the cards and the footer, and section-gap between sections and
   before every heading that follows running text. The only px literals
   left are the 1 px hairline, the 3 px focus ring, 4 and 8 (the two
   scale steps no token names) and the md breakpoint — a media query
   cannot read a custom property, so it is pinned to tokens/grid.json by
   layout.spec.ts. */

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

html {
  background: var(--tg-bg);
  color: var(--tg-text);
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::selection {
  background: var(--tg-selection);
}

h1,
h2,
h3,
p,
dl,
address {
  margin: 0;
}

p,
address,
.lead {
  max-width: 70ch;
}

p + p,
h2 + p,
h2 + address,
h2 + dl,
h3 + p {
  margin-top: var(--tg-space-form-row);
}

p + h2,
address + h2,
dl + h2 {
  margin-top: var(--tg-space-section-gap);
}

h1 + h2,
h1 + p {
  margin-top: var(--tg-space-card-padding);
}

address {
  font-style: normal;
}

a {
  color: var(--tg-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  border-radius: var(--tg-radius-sm);
}

a:hover {
  color: var(--tg-text-highlighted);
}

/* design-system.md §6: the 3 px focus-ring halo plus the 1 px
   focus-border indicator — the kit's focus-brand utility, on every
   focusable element. */
:focus-visible {
  outline: 3px solid var(--tg-focus-ring);
  outline-offset: 1px;
  box-shadow: 0 0 0 1px var(--tg-focus-border);
}

.muted {
  color: var(--tg-text-muted);
}

/* Bypass block: absolutely positioned at all times, parked above the
   viewport until focused, on the z ladder's top step. A floating layer,
   so it carries the md shadow (§5). */
.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: var(--tg-z-skip);
  padding: 8px var(--tg-space-form-row);
  background: var(--tg-bg);
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius-md);
  box-shadow: var(--tg-shadow-md);
  transform: translateY(-200%);
  transition: transform var(--tg-motion-micro) var(--tg-ease);
}

.skip:focus {
  transform: none;
}

.bar,
.wrap {
  width: 100%;
  max-width: var(--tg-size-content-max);
  margin-inline: auto;
  padding-inline: var(--tg-space-container-margin-sm);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--tg-z-header);
  background: var(--tg-bg);
  border-bottom: 1px solid var(--tg-border);
}

/* Over the landing's hero: laid on top of the photo band, no ground and
   no hairline of its own, not sticky — the band scrolls away with it. */
.site-header.over {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: 0;
}

.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tg-space-card-gap);
  min-height: var(--tg-size-header);
}

.brand {
  display: inline-flex;
  border-radius: var(--tg-radius-sm);
}

.brand img {
  display: block;
}

.lang {
  display: inline-flex;
  align-items: center;
  min-height: var(--tg-size-touch-target);
  padding-inline: 8px;
  color: var(--tg-text-muted);
  text-decoration: none;
}

.lang:hover {
  color: var(--tg-text-highlighted);
  text-decoration: underline;
}

main {
  flex: 1;
  padding-block: var(--tg-space-section-gap);
}

/* The skip link's target is a landmark, not a control (§6 governs
   controls): focus lands in main without a ring around the whole column. */
main:focus {
  outline: none;
  box-shadow: none;
}

/* The landing's photo band (www.md §3.1, §8): the generated .dark class
   pins the dark roles in both schemes, the header lies over its top and
   the h1, the lead and the calls to action sit at its foot. The photo is
   decorative, so its tone is set here — desaturated and darkened — and
   the overlays are the dark ground mixed with transparency through
   color-mix(), never a literal. The band is its own stacking context
   with three local steps — the photo, the two overlays, the copy — so
   the ::before overlay, which precedes the picture in tree order, still
   paints over it; the header stays above the band on the z ladder. */
main.landing {
  padding-top: 0;
}

/* The section is the stacking context; the band inside it pins the
   scheme, the wave after it does not (its fill is the page's ground). */
.hero {
  position: relative;
  isolation: isolate;
}

.hero-band {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(40rem, 100vh);
  padding-top: var(--tg-size-header);
  overflow: hidden;
  background: var(--tg-bg);
  color: var(--tg-text);
}

.hero-photo,
.hero-band::before,
.hero-band::after {
  position: absolute;
  inset: 0;
}

.hero-band::before,
.hero-band::after {
  z-index: 1;
}

.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  filter: saturate(0.55) brightness(0.85);
}

.hero-band::before {
  content: '';
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--tg-bg) 86%, transparent) 0%,
    color-mix(in srgb, var(--tg-bg) 50%, transparent) 32%,
    color-mix(in srgb, var(--tg-bg) 62%, transparent) 62%,
    var(--tg-bg) 100%
  );
}

.hero-band::after {
  content: '';
  background: color-mix(in srgb, var(--tg-bg-accented) 34%, transparent);
  mix-blend-mode: multiply;
}

/* The copy clears the wave below it: the wave's height plus a gap. */
.hero-copy {
  position: relative;
  z-index: 2;
  padding-block: var(--tg-space-section-gap)
    calc(2 * var(--tg-space-section-gap) + var(--tg-space-card-padding));
}

/* The product landing's wave at the band's foot (Hero.vue): the fill
   below the line is the page ground — the svg sits outside the pinned
   band, so --tg-bg is the page's, light or dark — and the line is the
   pinned scope's primary, which the stroke path carries as its own dark
   class. 96 px tall, 112 from md up, as the product's. */
.hero-wave {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: calc(2 * var(--tg-space-section-gap));
  pointer-events: none;
}

.hero-wave-fill {
  fill: var(--tg-bg);
}

.hero-wave-line {
  stroke: var(--tg-primary);
}

/* A soft halo of the ground behind the copy, scaled to the type. */
.hero h1,
.hero .lead {
  text-shadow: 0 0 1em color-mix(in srgb, var(--tg-bg) 60%, transparent);
}

/* The one authored type outside the .type-* roles (www.md §8, D-WWW-12):
   the hero headline at the canvas's fluid display size — the guide's
   cover size was dropped in TG-527, and this band is the surface that
   needs one — and its lead a step above body. layout.spec.ts confines
   font-* to these two rules. */
.hero h1 {
  max-width: 13em;
  font-size: clamp(2.375rem, 6vw, 4.25rem);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.hero .lead {
  max-width: 34em;
  margin-top: var(--tg-space-card-padding);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--tg-text-toned);
}

.lead {
  margin-top: var(--tg-space-card-gap);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-space-form-row);
  max-width: none;
  margin-top: calc(var(--tg-space-card-padding) + var(--tg-space-form-row));
}

/* The two button variants of design-system.md §6 at the lg size, on the
   button roles; the resting secondary carries its 1 px border. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tg-size-button-lg);
  padding-inline: var(--tg-space-card-padding);
  border: 1px solid transparent;
  border-radius: var(--tg-radius-md);
  text-decoration: none;
}

.button.primary {
  background: var(--tg-button-primary-bg);
  color: var(--tg-button-primary-fg);
}

.button.primary:hover {
  background: var(--tg-button-primary-bg-hover);
  color: var(--tg-button-primary-fg);
}

.button.primary:active {
  background: var(--tg-button-primary-bg-active);
}

.button.secondary {
  background: var(--tg-button-secondary-bg);
  border-color: var(--tg-button-secondary-border);
  color: var(--tg-button-secondary-fg);
}

.button.secondary:hover {
  background: var(--tg-button-secondary-bg-hover);
  border-color: var(--tg-button-secondary-border-hover);
  color: var(--tg-button-secondary-fg);
}

.button.secondary:active {
  background: var(--tg-button-secondary-bg-active);
  border-color: var(--tg-button-secondary-border-active);
}

.section {
  margin-top: var(--tg-space-section-gap);
}

.section > .type-overline {
  margin-bottom: var(--tg-space-card-gap);
}

.services {
  display: grid;
  gap: var(--tg-space-card-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A resting surface carries a border, never a shadow (§5). */
.card {
  padding: var(--tg-space-card-padding);
  background: var(--tg-bg-elevated);
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius-md);
}

.card h3 + p {
  margin-top: 8px;
}

.pair {
  display: grid;
  gap: var(--tg-space-section-gap) var(--tg-space-card-padding);
}

/* The Impressum's facts (www.md §4.1, D-WWW-13): a hairline above every
   row, label and value stacked below md, in two equal columns from md
   up — where the value cell carries the row's hairline too, so the line
   runs the full width. */
.facts {
  display: grid;
  margin-top: var(--tg-space-section-gap);
}

.facts dt {
  padding-top: var(--tg-space-card-padding);
  padding-bottom: 8px;
  border-top: 1px solid var(--tg-border);
  color: var(--tg-text-muted);
}

.facts dd {
  margin: 0;
  padding-bottom: var(--tg-space-card-padding);
}

/* The Impressum's overline h1 with the binding line between it and the
   § 5 DDG heading: that heading keeps the heading gap, not the section
   gap a paragraph would otherwise put before it. Scoped to the overline
   h1 so the notice's dateline keeps its section gap. */
.prose h1.type-overline + p + h2 {
  margin-top: var(--tg-space-card-padding);
}

.site-footer {
  padding-block: var(--tg-space-card-padding);
  border-top: 1px solid var(--tg-border);
}

.site-footer .bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tg-space-card-gap) var(--tg-space-card-padding);
}

.legal {
  display: flex;
  gap: var(--tg-space-card-padding);
}

.legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tg-size-touch-target);
  color: var(--tg-text-muted);
  text-decoration: none;
}

.legal a:hover {
  color: var(--tg-text-highlighted);
  text-decoration: underline;
}

/* md and up: the container margin widens and the grids open into
   columns (design-system.md §5). */
@media (min-width: 768px) {
  .bar,
  .wrap {
    padding-inline: var(--tg-space-container-margin-md);
  }

  .services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* No column gap: the two cells' hairlines must touch to read as one
     line across the row; the gutter is the label cell's padding. */
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .facts dt,
  .facts dd {
    padding-block: var(--tg-space-card-padding);
    border-top: 1px solid var(--tg-border);
  }

  .facts dt {
    padding-right: var(--tg-space-card-padding);
  }

  /* 112 px, the product's sm:h-28; the copy clears it by 144. */
  .hero-wave {
    height: calc(2 * var(--tg-space-section-gap) + var(--tg-space-card-gap));
  }

  .hero-copy {
    padding-bottom: calc(3 * var(--tg-space-section-gap));
  }
}