/* ==========================================================================
   Lingua Clara: site stylesheet
   1. Tokens       design tokens from the design canvas (VILO UI Kit)
   2. Base         element defaults
   3. Components   VILO UI Kit components used on the site
   4. Layout       page classes (values copied from the design)
   5. Modals
   6. Small screens   the mobile design (header and menu from 1023px)
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  --font-sans: "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display: "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-accent: "Fraunces",Georgia,"Times New Roman",serif;
  --font-hand: "Caveat","Segoe Print","Comic Sans MS",cursive;
  --surface-warm: #faf9f6;
  --surface-white: #ffffff;
  --green-deep: #134e48;
  --green-deeper: #0a2926;
  --on-dark: #ffffff;
  --on-dark-muted: #c6dbd5;
  --on-dark-accent: #5fe9d0;
  --line: #eaecf0;
  --line-dark: rgba(255,255,255,0.18);
  --radius-control: 8px;
  --radius-card: 16px;
  --base-white: #ffffff;
  --gray-25: #fcfcfd;
  --gray-50: #f9fafb;
  --gray-100: #f2f4f7;
  --gray-200: #eaecf0;
  --gray-300: #d0d5dd;
  --gray-400: #98a2b3;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #1d2939;
  --gray-900: #101828;
  --primary-25: #faf9f6;
  --primary-50: #f1f4f1;
  --primary-100: #e1e8e3;
  --primary-200: #99f6e0;
  --primary-300: #5fe9d0;
  --primary-500: #15b79e;
  --primary-600: #107569;
  --primary-700: #125d56;
  --primary-800: #134e48;
  --primary-900: #0a2926;
  --accent-100: #fef7c3;
  --accent-200: #feee95;
  --accent-300: #fac515;
  --accent-400: #eaaa08;
  --coral: #ef6820;
  --success-50: #ecfdf3;
  --success-100: #dcfae6;
  --success-200: #abefc6;
  --success-500: #17b26a;
  --success-600: #079455;
  --success-700: #067647;
  --warning-50: #fffaeb;
  --warning-100: #fef0c7;
  --warning-200: #fedf89;
  --warning-500: #f79009;
  --warning-600: #dc6803;
  --warning-700: #b54708;
  --error-25: #fffbfa;
  --error-50: #fef3f2;
  --error-100: #fee4e2;
  --error-200: #fecdca;
  --error-300: #fda29b;
  --error-500: #f04438;
  --error-600: #d92d20;
  --error-700: #b42318;
  --error-800: #912018;
  --orange-50: #fef6ee;
  --orange-100: #fdead7;
  --orange-200: #f9dbaf;
  --orange-500: #ef6820;
  --orange-600: #e04f16;
  --orange-700: #b93815;
  --blue-light-50: #f0f9ff;
  --blue-light-100: #e0f2fe;
  --blue-light-200: #b9e6fe;
  --blue-light-500: #0ba5ec;
  --blue-light-600: #0086c9;
  --blue-light-700: #026aa2;
  --indigo-50: #eef4ff;
  --indigo-100: #e0eaff;
  --indigo-200: #c7d7fe;
  --indigo-500: #6172f3;
  --indigo-600: #444ce7;
  --indigo-700: #3538cd;
  --pink-50: #fdf2fa;
  --pink-100: #fce7f6;
  --pink-200: #fcceee;
  --pink-500: #ee46bc;
  --pink-600: #dd2590;
  --pink-700: #c11574;
  --gray-blue-50: #f8f9fc;
  --gray-blue-100: #eaecf5;
  --gray-blue-200: #d5d9eb;
  --gray-blue-500: #4e5ba6;
  --gray-blue-600: #3e4784;
  --gray-blue-700: #363f72;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --shadow-xs: 0 1px 2px 0 rgba(16,24,40,0.05);
  --shadow-sm: 0 1px 3px 0 rgba(16,24,40,0.10),0 1px 2px 0 rgba(16,24,40,0.06);
  --shadow-lg: 0 12px 16px -4px rgba(16,24,40,0.08),0 4px 6px -2px rgba(16,24,40,0.03);
  --shadow-2xl: 0 24px 48px -12px rgba(16,24,40,0.18);
  --focus-ring-primary-100: 0 0 0 4px #ccfbef;
  --focus-ring-error-100: 0 0 0 4px #fee4e2;
  --shadow-xs-focused-primary-100: 0 1px 2px 0 rgba(16,24,40,0.05),0 0 0 4px #ccfbef;
  --shadow-xs-focused-gray-100: 0 1px 2px 0 rgba(16,24,40,0.05),0 0 0 4px #f2f4f7;
  --shadow-xs-focused-error-100: 0 1px 2px 0 rgba(16,24,40,0.05),0 0 0 4px #fee4e2;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
body {
  margin: 0;
  min-width: 0;
  font-family: var(--font-sans);
  color: var(--gray-900);
  background: var(--surface-warm);
}

/* Element selectors, so any class (like an inline style in the design) wins. */
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.025em; }

/* Every heading, paragraph, list and figure in the design sets margin: 0. */
h1, h2, h3, p, figure, ul, ol { margin: 0; }

img { max-width: 100%; }

/* Zero specificity so any class (like an inline style in the design) wins. */
:where(a) { color: var(--primary-700); }
:where(a:hover) { color: var(--primary-800); }

[hidden] { display: none !important; }
/* Shown only at 640px and below, or only above it (see 6. Small screens). */
@media not all and (max-width: 640px) { .mobile-only { display: none !important; } }
@media (max-width: 640px) { .desktop-only { display: none !important; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contents { display: contents; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.skip-link {
  position: absolute;
  z-index: 10;
  top: -100px;
  left: 16px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--base-white);
  color: var(--gray-900);
  box-shadow: var(--shadow-lg);
  font-weight: 600;
}
.skip-link:focus { top: 16px; }

/* ==========================================================================
   3. Components (copied from the VILO UI Kit bundle, used variants only)
   ========================================================================== */

/* --- Button ------------------------------------------------------------------
   <a|button class="vilo-button vilo-button--{sm|lg|xl} vilo-button--{primary|secondary-gray|tertiary-gray}"> */
.vilo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.vilo-button--sm { padding: 8px 14px; gap: 8px; font-size: 14px; line-height: 20px; }
.vilo-button--lg { padding: 10px 18px; gap: 8px; font-size: 16px; line-height: 24px; }
.vilo-button--xl { padding: 12px 20px; gap: 8px; font-size: 16px; line-height: 24px; }
.vilo-button--block { width: 100%; }

.vilo-button--primary {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: var(--base-white);
  box-shadow: var(--shadow-xs);
}
.vilo-button--primary:hover { background: var(--primary-700); border-color: var(--primary-700); color: var(--base-white); }
.vilo-button--primary:focus-visible { box-shadow: var(--shadow-xs-focused-primary-100); }

.vilo-button--secondary-gray {
  background: var(--base-white);
  border-color: var(--gray-300);
  color: var(--gray-700);
  box-shadow: var(--shadow-xs);
}
.vilo-button--secondary-gray:hover { background: var(--gray-50); color: var(--gray-800); }
.vilo-button--secondary-gray:focus-visible { box-shadow: var(--shadow-xs-focused-gray-100); }

.vilo-button--tertiary-gray { color: var(--gray-600); }
.vilo-button--tertiary-gray:hover { background: var(--gray-50); color: var(--gray-700); }
.vilo-button--tertiary-gray:focus-visible { box-shadow: 0 0 0 4px var(--gray-100); }

/* --- Close button -------------------------------------------------------- */
.vilo-close-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--primary-500);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.vilo-close-button__icon { display: block; width: 20px; height: 20px; }
.vilo-close-button--lg .vilo-close-button__icon { width: 24px; height: 24px; }
.vilo-close-button--gray { color: var(--gray-500); }
.vilo-close-button--gray:hover { background: var(--gray-50); color: var(--gray-600); }
.vilo-close-button--gray:focus-visible { box-shadow: 0 0 0 4px var(--gray-100); }

/* --- Badge -------------------------------------------------------------------
   <span class="vilo-badge vilo-badge--{sm|md|lg} vilo-badge--{color} [vilo-badge--dot|vilo-badge--country]"> */
.vilo-badge {
  --vilo-badge-50: var(--gray-50);
  --vilo-badge-200: var(--gray-200);
  --vilo-badge-500: var(--gray-500);
  --vilo-badge-700: var(--gray-700);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  max-width: 100%;
  border-radius: var(--radius-full);
  background: var(--vilo-badge-50);
  color: var(--vilo-badge-700);
  box-shadow: inset 0 0 0 1px var(--vilo-badge-200);
  font-family: var(--font-sans);
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
}
.vilo-badge--primary    { --vilo-badge-50: var(--primary-50);    --vilo-badge-200: var(--primary-200);    --vilo-badge-500: var(--primary-500);    --vilo-badge-700: var(--primary-700); }
.vilo-badge--success    { --vilo-badge-50: var(--success-50);    --vilo-badge-200: var(--success-200);    --vilo-badge-500: var(--success-500);    --vilo-badge-700: var(--success-700); }
.vilo-badge--blue-light { --vilo-badge-50: var(--blue-light-50); --vilo-badge-200: var(--blue-light-200); --vilo-badge-500: var(--blue-light-500); --vilo-badge-700: var(--blue-light-700); }
.vilo-badge--indigo     { --vilo-badge-50: var(--indigo-50);     --vilo-badge-200: var(--indigo-200);     --vilo-badge-500: var(--indigo-500);     --vilo-badge-700: var(--indigo-700); }
.vilo-badge--pink       { --vilo-badge-50: var(--pink-50);       --vilo-badge-200: var(--pink-200);       --vilo-badge-500: var(--pink-500);       --vilo-badge-700: var(--pink-700); }
.vilo-badge--orange     { --vilo-badge-50: var(--orange-50);     --vilo-badge-200: var(--orange-200);     --vilo-badge-500: var(--orange-500);     --vilo-badge-700: var(--orange-700); }

.vilo-badge--sm { font-size: 12px; line-height: 18px; padding: 2px 8px; }
.vilo-badge--md { font-size: 14px; line-height: 20px; padding: 2px 10px; }
.vilo-badge--lg { font-size: 14px; line-height: 20px; padding: 4px 12px; }

.vilo-badge--sm.vilo-badge--dot { padding-left: 6px; gap: 4px; }
.vilo-badge--md.vilo-badge--dot { padding-left: 8px; gap: 6px; }
.vilo-badge--lg.vilo-badge--dot { padding-left: 10px; gap: 6px; }
.vilo-badge--sm.vilo-badge--country { padding-left: 3px; gap: 6px; }
.vilo-badge--md.vilo-badge--country { padding-left: 4px; gap: 6px; }
.vilo-badge--lg.vilo-badge--country { padding-left: 6px; gap: 6px; }

.vilo-badge__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--vilo-badge-500);
}
/* The design shows a country as its two-letter code in a tinted circle. */
.vilo-badge__country {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--vilo-badge-200);
  color: var(--vilo-badge-700);
  font-size: 7px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: inset 0 0 0 .333px color-mix(in srgb, var(--gray-900) 8%, transparent);
}

/* --- Toggle ------------------------------------------------------------------ */
.vilo-toggle {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-family: var(--font-sans);
  color: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.vilo-toggle__track {
  position: relative;
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 44px;
  height: 24px;
  padding: 2px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  transition: background-color 150ms ease, box-shadow 150ms ease;
}
.vilo-toggle__knob {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--base-white);
  box-shadow: var(--shadow-sm);
  transform: translateX(0);
  transition: transform 150ms ease, background-color 150ms ease;
}
.vilo-toggle:hover .vilo-toggle__track { background: var(--gray-200); }
.vilo-toggle[aria-checked="true"] .vilo-toggle__track { background: var(--primary-600); }
.vilo-toggle[aria-checked="true"]:hover .vilo-toggle__track { background: var(--primary-700); }
.vilo-toggle[aria-checked="true"] .vilo-toggle__knob { transform: translateX(20px); }
.vilo-toggle:focus-visible .vilo-toggle__track { box-shadow: var(--focus-ring-primary-100); }

/* --- Input ------------------------------------------------------------------- */
.vilo-input,
.vilo-textarea {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
}
.vilo-input *, .vilo-input *::before, .vilo-input *::after,
.vilo-textarea *, .vilo-textarea *::before, .vilo-textarea *::after { box-sizing: border-box; }
.vilo-input__label,
.vilo-textarea__label {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--gray-700);
  white-space: nowrap;
}
.vilo-input__field {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: var(--base-white);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--gray-300), var(--shadow-xs);
  transition: box-shadow 120ms ease;
}
.vilo-input__content {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
}
.vilo-input__control {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--gray-900);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}
.vilo-input__control::placeholder,
.vilo-textarea__control::placeholder { color: var(--gray-500); opacity: 1; }
.vilo-input__field:focus-within { box-shadow: inset 0 0 0 1px var(--primary-300), var(--shadow-xs-focused-primary-100); }
.vilo-input__trailing-icon { display: none; flex-shrink: 0; }
.vilo-input--destructive .vilo-input__trailing-icon--error { display: block; color: var(--error-500); }
.vilo-input--destructive .vilo-input__field { box-shadow: inset 0 0 0 1px var(--error-300), var(--shadow-xs); }
.vilo-input--destructive .vilo-input__field:focus-within { box-shadow: inset 0 0 0 1px var(--error-300), var(--shadow-xs-focused-error-100); }
.vilo-input__hint,
.vilo-textarea__hint {
  margin: 0;
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--gray-600);
}
.vilo-input--destructive .vilo-input__hint,
.vilo-textarea--destructive .vilo-textarea__hint { color: var(--error-500); }

/* --- Textarea ---------------------------------------------------------------- */
.vilo-textarea__control {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--base-white);
  box-shadow: inset 0 0 0 1px var(--gray-300), var(--shadow-xs);
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--gray-900);
  resize: vertical;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: box-shadow 120ms ease;
}
.vilo-textarea__control:focus { box-shadow: inset 0 0 0 1px var(--primary-300), var(--shadow-xs-focused-primary-100); }
.vilo-textarea--destructive .vilo-textarea__control { box-shadow: inset 0 0 0 1px var(--error-300), var(--shadow-xs); }
.vilo-textarea--destructive .vilo-textarea__control:focus { box-shadow: inset 0 0 0 1px var(--error-300), var(--shadow-xs-focused-error-100); }

/* --- Checkbox and radio -------------------------------------------------------
   <label class="vilo-checkbox vilo-checkbox--{checkbox|radio} vilo-checkbox--md vilo-checkbox--labelled"> */
.vilo-checkbox {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-sans);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vilo-checkbox--md { gap: 12px; }
.vilo-checkbox__control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vilo-checkbox--labelled .vilo-checkbox__control { padding-top: 2px; }
.vilo-checkbox__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: inherit;
}
.vilo-checkbox__box {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-xs);
  background: var(--base-white);
  color: var(--primary-600);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.vilo-checkbox--md .vilo-checkbox__box { width: 20px; height: 20px; border-radius: var(--radius-sm); }
.vilo-checkbox--radio .vilo-checkbox__box { border-radius: var(--radius-full); }
.vilo-checkbox__glyph { display: none; width: 12px; height: 12px; flex-shrink: 0; }
.vilo-checkbox--md .vilo-checkbox__glyph { width: 14px; height: 14px; }
.vilo-checkbox__dot { display: none; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.vilo-checkbox--md .vilo-checkbox__dot { width: 8px; height: 8px; }
.vilo-checkbox__input:checked + .vilo-checkbox__box { background: var(--primary-50); border-color: var(--primary-600); }
.vilo-checkbox__input:checked + .vilo-checkbox__box .vilo-checkbox__check,
.vilo-checkbox__input:checked + .vilo-checkbox__box .vilo-checkbox__dot { display: block; }
.vilo-checkbox__input:focus-visible + .vilo-checkbox__box { box-shadow: var(--focus-ring-primary-100); border-color: var(--primary-300); }
.vilo-checkbox__input:focus-visible:checked + .vilo-checkbox__box { border-color: var(--primary-600); }
.vilo-checkbox:hover .vilo-checkbox__input:not(:disabled) + .vilo-checkbox__box { background: var(--primary-100); border-color: var(--primary-600); }
.vilo-checkbox__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: break-word;
}
.vilo-checkbox--md .vilo-checkbox__text { gap: 2px; font-size: 16px; line-height: 24px; }
.vilo-checkbox__label { font-weight: 500; color: var(--gray-700); }
.vilo-checkbox__supporting { font-weight: 400; color: var(--gray-600); }

/* ==========================================================================
   4. Layout and page classes
   Values are copied 1:1 from the design's inline styles.
   ========================================================================== */

/* --- Containers and spacing ------------------------------------------------ */
.wrap { max-width: 1280px; margin: 0 auto; box-sizing: border-box; padding-left: 32px; padding-right: 32px; }
.wrap-1216 { max-width: 1216px; margin: 0 auto; box-sizing: border-box; padding-left: 32px; padding-right: 32px; }
.py-96 { padding-top: 96px; padding-bottom: 96px; }
.py-64 { padding-top: 64px; padding-bottom: 64px; }
.pt-8 { padding-top: 8px; }
.pt-32 { padding-top: 32px; }
.pt-64 { padding-top: 64px; }
.pt-80 { padding-top: 80px; }
.pb-96 { padding-bottom: 96px; }
.pl-20 { padding-left: 20px; }
.p-20 { padding: 20px; }
.p-24 { padding: 24px; }
.p-32 { padding: 32px; }

/* --- Flex and grid --------------------------------------------------------- */
.stack { display: flex; flex-direction: column; }
.row-wrap { display: flex; flex-wrap: wrap; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-48 { gap: 48px; }
.gap-64 { gap: 64px; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.shrink-0 { flex-shrink: 0; }
.min-w-0 { min-width: 0; }
.flex-360 { flex: 1 1 360px; }
.flex-400 { flex: 1 1 400px; }
.flex-460 { flex: 1 1 460px; }
.flex-480 { flex: 1 1 480px; }
.flex-520 { flex: 1 1 520px; }
.flex-560 { flex: 1 1 560px; }
.grid { display: grid; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cols-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cols-320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cols-340 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.mw-560 { max-width: 560px; }
.mw-600 { max-width: 600px; }
.mw-640 { max-width: 640px; }
.mw-720 { max-width: 720px; }
.mw-768 { max-width: 768px; }
.mw-960 { max-width: 960px; }

/* --- Type ------------------------------------------------------------------ */
.h1 { font-size: 60px; line-height: 72px; font-weight: 700; letter-spacing: -0.02em; }
.h1-md { font-size: 56px; line-height: 66px; font-weight: 700; letter-spacing: -0.02em; }
.h1-sm { font-size: 48px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em; }
.h2 { font-size: 36px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; }
.h3 { font-size: 20px; line-height: 30px; font-weight: 600; }
.eyebrow { font-size: 16px; font-weight: 600; color: var(--primary-600); }
.lead { font-size: 20px; line-height: 30px; color: var(--gray-600); }
.text-lg { font-size: 18px; line-height: 28px; color: var(--gray-600); }
.text-body { font-size: 16px; line-height: 24px; color: var(--gray-600); }
.text-sm { font-size: 14px; line-height: 20px; color: var(--gray-600); }
.text-title { font-size: 16px; line-height: 24px; font-weight: 600; }
.text-strong { color: var(--gray-900); }
.text-gray-700 { color: var(--gray-700); }
.text-center { text-align: center; }
.label-muted { font-size: 14px; font-weight: 600; color: var(--gray-600); }
.label-primary { font-size: 14px; font-weight: 600; color: var(--primary-600); }
.card-title { font-size: 24px; line-height: 32px; font-weight: 700; }
.meta { font-size: 14px; font-weight: 500; color: var(--gray-600); }
.count { font-size: 14px; font-weight: 600; color: var(--primary-700); }
.stat-value { font-size: 30px; line-height: 38px; font-weight: 700; letter-spacing: -0.02em; color: var(--primary-700); }
.title-lg { font-size: 18px; line-height: 28px; font-weight: 600; }

/* --- Links ----------------------------------------------------------------- */
.link-muted { color: var(--gray-600); text-decoration: none; }
.link-current { color: var(--gray-900); text-decoration: none; }
.link-button { align-self: flex-start; padding: 0; border: 0; background: none; font-family: inherit; font-size: 16px; line-height: inherit; color: var(--gray-600); text-align: left; cursor: pointer; }

/* --- Site header ----------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--gray-200); background: var(--base-white); }
.site-header__bar { padding-top: 18px; padding-bottom: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gray-900); }
.img-h40 { display: block; height: 40px; width: auto; }
/* The logo with a small "alpha" tag at its lower right, while the product is in alpha. */
/* The tag sits inside the logo image, under the end of "Clara" (the space below the
   text's baseline). Its size follows --logo-h, the logo's height. */
.logo-lockup { --logo-h: 40px; position: relative; display: inline-flex; align-self: flex-start; }
.site-footer .logo-lockup, .mobile-menu .logo-lockup { --logo-h: 32px; }
.alpha-tag { position: absolute; right: 0; bottom: 0; padding: 0 calc(var(--logo-h) * 0.1); border-radius: var(--radius-full); background: var(--accent-300); color: var(--gray-900); font-family: var(--font-sans); font-size: calc(var(--logo-h) * 0.22); line-height: calc(var(--logo-h) * 0.3); font-weight: 700; letter-spacing: 0.04em; }
.site-nav { display: flex; flex-wrap: wrap; gap: 28px; font-size: 16px; font-weight: 500; }
.site-header__actions { display: flex; gap: 12px; align-items: center; }

/* --- Site footer ----------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--gray-200); background: var(--gray-50); }
.site-footer__body { padding-top: 64px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 48px; }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; }
.site-footer__logo { display: block; height: 32px; width: auto; align-self: flex-start; }
.footer-nav { display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.site-footer__legal { padding-top: 32px; border-top: 1px solid var(--gray-200); font-size: 14px; color: var(--gray-600); }

/* --- Breadcrumb ------------------------------------------------------------ */
.breadcrumb { font-size: 14px; color: var(--gray-600); display: flex; gap: 8px; }
.breadcrumb__current { color: var(--gray-700); font-weight: 500; }

/* --- Section backgrounds --------------------------------------------------- */
.hero { background: var(--primary-50); border-bottom: 1px solid var(--primary-100); }
.band-tint { background: var(--primary-50); border-top: 1px solid var(--primary-100); border-bottom: 1px solid var(--primary-100); }
.band-white { background: var(--base-white); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.band-gray { background: var(--gray-50); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }

/* --- Cards ----------------------------------------------------------------- */
.card { background: var(--base-white); border: 1px solid var(--gray-200); border-radius: 16px; }
.card-tint { background: var(--base-white); border: 1px solid var(--primary-100); border-radius: 16px; }
.card-gray { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 16px; }
.video-card { text-decoration: none; color: var(--gray-900); overflow: hidden; }
.accent-card { border: 1px solid var(--gray-200); border-radius: 16px; overflow: hidden; }
.hypothesis { flex: 0 1 calc((100% - 48px) / 3); min-width: min(100%, 300px); box-sizing: border-box; }
.icon-circle { width: 48px; height: 48px; border-radius: 9999px; background: var(--primary-100); color: var(--primary-600); display: flex; align-items: center; justify-content: center; }
.step-num { width: 40px; height: 40px; border-radius: 9999px; background: var(--primary-600); color: var(--base-white); font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* --- Media ----------------------------------------------------------------- */
.media-16x9 { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--primary-100); }
.portrait { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--primary-100); }
.portrait--offset { margin-top: 48px; }
.cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-abs { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.focus-top { object-position: center 20%; }
.chip { position: absolute; left: 12px; bottom: 12px; background: var(--base-white); color: var(--gray-900); font-size: 14px; font-weight: 600; padding: 4px 10px; border-radius: 9999px; }
.video-thumb { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; }
.bg-primary-700 { background: var(--primary-700); }
.bg-primary-800 { background: var(--primary-800); }
.play-btn { position: relative; width: 48px; height: 48px; border-radius: 9999px; background: var(--accent-300); display: flex; align-items: center; justify-content: center; }
.duration { position: absolute; right: 12px; bottom: 12px; background: rgba(16,24,40,0.75); color: var(--base-white); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }

/* --- Lists ----------------------------------------------------------------- */
.icon-item { display: flex; gap: 12px; align-items: flex-start; }
.check-list { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 24px; color: var(--gray-700); }

/* --- Section headings ------------------------------------------------------ */
.kicker { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-600); }
.kicker--on-dark { color: var(--on-dark-accent); }
.h2-display { font-size: clamp(36px, 4.2vw, 52px); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; }
.section-head { display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: flex-end; justify-content: space-between; }
.section-head__title { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.section-head__title--wide { flex-basis: 560px; }
.section-head__text { flex: 0 1 420px; font-size: 18px; line-height: 28px; color: var(--gray-600); }
.bg-white { background: var(--surface-white); }
.underline-button { align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--primary-700); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* --- FAQ page ---------------------------------------------------------------
   faq.html. Every answer is in the HTML and starts open, so the page works
   without JavaScript. site.js adds the search, the topic filter and the
   folding (questions show, one answer opens at a time). */
.faq-hero { padding-top: 64px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 16px; }
.faq-search { padding-top: 16px; max-width: 720px; display: flex; flex-direction: column; gap: 8px; }
.faq-search__label { font-size: 14px; font-weight: 600; color: var(--gray-700); }
.faq-search__box { position: relative; }
.faq-search__icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--gray-500); pointer-events: none; }
.faq-search__input { width: 100%; height: 56px; box-sizing: border-box; padding: 0 56px 0 52px; border: 1px solid var(--gray-300); border-radius: 12px; background: var(--base-white); font-family: inherit; font-size: 17px; color: var(--gray-900); box-shadow: 0 1px 2px rgba(16,24,40,0.05); -webkit-appearance: none; appearance: none; }
.faq-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.faq-search__input::placeholder { color: var(--gray-500); }
.faq-search__input:focus { outline: none; border-color: var(--primary-300); box-shadow: var(--shadow-xs-focused-primary-100); }
.faq-search__clear { position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--gray-500); cursor: pointer; }

.faq-body { padding-top: 64px; padding-bottom: 96px; display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
.faq-topics { flex: 1 1 240px; max-width: 280px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.faq-topics__label { padding: 0 12px 8px; font-size: 14px; font-weight: 600; color: var(--gray-900); }
.faq-topic { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; font-family: inherit; font-size: 16px; font-weight: 500; color: var(--gray-700); text-align: left; cursor: pointer; }
.faq-topic[aria-pressed="true"] { background: var(--primary-50); color: var(--primary-700); font-weight: 600; }
.faq-topic__count { font-size: 13px; font-weight: 500; color: var(--gray-500); }
.faq-chips { display: none; }

.faq-list { flex: 3 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.faq-status { font-size: 14px; line-height: 20px; color: var(--gray-600); }
.faq-sec { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--gray-200); }
.faq-sec__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.faq-sec__title { flex: 1 1 320px; min-width: 0; font-size: 28px; line-height: 36px; font-weight: 700; }
.faq-sec__button { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 8px 0; border: 0; background: none; text-align: left; font-family: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: inherit; color: var(--gray-900); cursor: pointer; }
.faq-sec__code { min-width: 36px; height: 28px; padding: 0 8px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--primary-50); border: 1px solid var(--primary-100); font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--primary-700); }
.faq-sec__names { display: contents; }
.faq-sec__name { min-width: 0; }
.faq-sec__count { flex-shrink: 0; font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; color: var(--gray-500); }
.faq-chevron { flex-shrink: 0; transition: transform 160ms ease; }
[aria-expanded="true"] > .faq-chevron { transform: rotate(180deg); }
.faq-sec__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--primary-700); text-decoration: none; }
.faq-sec__panel { background: var(--base-white); border: 1px solid var(--gray-200); border-radius: 16px; padding: 0 24px; }
.faq-item { border-top: 1px solid var(--gray-200); margin-top: -1px; }
.faq-item__heading { font-size: inherit; }
.faq-item__button { width: 100%; min-height: 68px; display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; gap: 12px; align-items: center; padding: 20px 0; border: 0; background: none; text-align: left; font-family: inherit; color: var(--gray-900); cursor: pointer; }
.faq-item__num { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--gray-500); }
.faq-item__q { font-size: 18px; line-height: 26px; font-weight: 600; }
.faq-item__panel { padding: 0 36px 24px 52px; }
.faq-item__panel p { max-width: 680px; font-size: 16px; line-height: 26px; color: var(--gray-600); }

.faq-empty { padding: 48px 32px; border: 1px dashed var(--gray-300); border-radius: 16px; background: var(--base-white); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.faq-empty__title { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--gray-900); }
.faq-empty__text { max-width: 440px; font-size: 16px; line-height: 24px; color: var(--gray-600); }
.faq-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 8px; }

.faq-ask { padding: 32px; border-radius: 16px; background: var(--primary-50); border: 1px solid var(--primary-100); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.faq-ask__text { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.faq-ask__title { font-size: 22px; line-height: 30px; font-weight: 700; }
.faq-ask .underline-button { display: none; }

/* --- Call-to-action band ----------------------------------------------------
   The dark green panel near the end of each page. Most pages hold the inline
   waitlist form (form.cta-form, handled by site.js); Vision holds two buttons. */
.cta-band { position: relative; overflow: hidden; background: var(--green-deep); color: var(--on-dark); border-radius: var(--radius-card); padding: 96px 32px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.cta-band > * { position: relative; }
.cta-band__ring { position: absolute; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,0.08); }
.cta-band__ring--1 { top: -48px; left: -48px; width: 192px; height: 192px; }
.cta-band__ring--2 { top: -96px; left: -96px; width: 288px; height: 288px; }
.cta-band__ring--3 { bottom: -160px; right: -96px; width: 320px; height: 320px; }
.cta-band__kicker { font-family: var(--font-hand); font-size: 26px; line-height: 28px; font-weight: 600; color: var(--accent-300); }
.cta-band__title { font-size: clamp(40px, 5vw, 64px); line-height: 1.02; font-weight: 700; letter-spacing: -0.03em; color: var(--on-dark); }
.cta-band__text { max-width: 480px; font-size: 18px; line-height: 28px; color: var(--on-dark-muted); }
.cta-band__actions { padding-top: 16px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta-band__success { margin-top: 16px; padding: 12px 24px; border-radius: var(--radius-control); background: rgba(255,255,255,0.1); font-size: 16px; font-weight: 600; color: var(--on-dark); }
.cta-band__link { min-height: 44px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--on-dark); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.cta-band__note { margin-top: 8px; font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-muted); }
.cta-form { width: 100%; max-width: 460px; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.cta-form__row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta-form__error { font-size: 14px; line-height: 20px; color: var(--accent-300); }
.cta-input { flex: 1 1 240px; min-width: 0; height: 52px; box-sizing: border-box; padding: 0 24px; border: 1px solid rgba(255,255,255,0.24); border-radius: var(--radius-control); background: rgba(255,255,255,0.1); color: var(--on-dark); font-family: inherit; font-size: 16px; outline: none; }
.cta-input::placeholder { color: var(--on-dark-muted); opacity: 1; }
.cta-input:focus-visible { border-color: rgba(255,255,255,0.6); box-shadow: 0 0 0 4px rgba(255,255,255,0.12); }
.cta-input[aria-invalid="true"] { border-color: var(--accent-300); }
.cta-button { height: 52px; display: inline-flex; align-items: center; gap: 8px; padding: 0 24px; box-sizing: border-box; border: 0; border-radius: var(--radius-control); background: var(--accent-300); color: var(--gray-900); font-family: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .15s ease; }
.cta-button:hover { background: var(--accent-400); color: var(--gray-900); }
.cta-button--ghost { border: 1px solid rgba(255,255,255,0.4); background: transparent; color: var(--on-dark); }
.cta-button--ghost:hover { background: rgba(255,255,255,0.08); color: var(--on-dark); }
.cta-button:focus-visible, .cta-band__link:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }

/* --- Home page ------------------------------------------------------------- */
/* The home page has its own header and footer style and a softer focus ring. */
.page-home > :not(dialog) {
  --focus-ring-primary-100: 0 0 0 4px #c6dbd5;
  --shadow-xs-focused-primary-100: 0 1px 2px 0 rgba(16,24,40,0.05),0 0 0 4px #c6dbd5;
}
.site-header--home { border-bottom: 0; background: var(--surface-white); }
.site-header--home .site-header__bar { padding-top: 16px; padding-bottom: 16px; }
.site-header--home .site-nav { gap: 32px; }
.site-header--home .site-nav a { color: var(--gray-700); }

.home-hero { padding-top: 96px; padding-bottom: 64px; }
.home-hero__title { font-size: clamp(44px, 6vw, 76px); line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; color: var(--gray-900); }
.hero-accent { position: relative; display: inline-block; white-space: nowrap; padding: 0 0.04em 0.1em; font-family: var(--font-accent); font-style: italic; font-weight: 600; letter-spacing: -0.02em; color: var(--green-deep); }
.hero-accent svg { position: absolute; left: 0; bottom: -0.06em; width: 100%; height: 0.2em; overflow: visible; }
.home-hero__lead { max-width: 540px; font-size: 20px; line-height: 32px; color: var(--gray-600); }
.hello-pill { padding: 6px 14px; border-radius: var(--radius-full); background: var(--surface-warm); border: 1px solid var(--line); font-size: 14px; color: var(--gray-700); }
.hero-card-wrap { display: flex; justify-content: center; padding: 32px 24px; }
.hero-card { position: relative; width: 100%; max-width: 560px; box-sizing: border-box; background: var(--surface-white); border-radius: var(--radius-card); padding: 12px 12px 24px; box-shadow: var(--shadow-2xl); transform: rotate(-1.5deg); }
.hero-card__sticker { position: absolute; top: -32px; right: -20px; z-index: 2; width: 88px; height: 88px; border-radius: var(--radius-full); background: var(--accent-300); color: var(--gray-900); display: flex; align-items: center; justify-content: center; text-align: center; transform: rotate(12deg); font-family: var(--font-hand); font-size: 22px; line-height: 20px; font-weight: 600; box-shadow: var(--shadow-lg); }
.hero-card__media { position: relative; aspect-ratio: 16 / 11; border-radius: var(--radius-control); overflow: hidden; background: var(--green-deep); display: flex; align-items: center; justify-content: center; }
.hero-card__level { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,0.92); color: var(--gray-800); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-full); }
.hero-card__play { position: relative; width: 72px; height: 72px; border-radius: var(--radius-full); background: var(--accent-300); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 16px -4px rgba(16,24,40,0.25); }
.hero-card__duration { position: absolute; right: 12px; bottom: 12px; background: rgba(16,24,40,0.72); color: var(--base-white); font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-control); }
.hero-card__body { padding: 24px 12px 0; display: flex; flex-direction: column; gap: 8px; }
.hero-card__kicker { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); }
.hero-card__title { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.015em; color: var(--gray-900); }
.hero-card__meta { font-size: 15px; line-height: 22px; color: var(--gray-600); }
.no-list { padding: 32px 0 0; list-style: none; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 16px 48px; font-size: 17px; font-weight: 600; color: var(--gray-700); }
.no-list li { display: flex; gap: 8px; align-items: center; }

.lang-tile { position: relative; overflow: hidden; text-decoration: none; color: var(--gray-900); background: var(--surface-white); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px; display: flex; flex-direction: column; gap: 16px; min-height: 280px; box-sizing: border-box; }
.lang-tile > * { position: relative; }
.lang-tile__letter { position: absolute; top: -24px; right: 12px; font-family: var(--font-display); font-size: 160px; line-height: 1; font-weight: 800; color: var(--gray-100); }
.lang-tile__code { font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: 0.06em; color: var(--gray-900); }
.lang-tile__count { padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface-white); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-600); }
.lang-tile__name { font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; }
.lang-tile__native { font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--primary-600); }
.lang-tile__text { font-size: 16px; line-height: 25px; color: var(--gray-600); }
.lang-tile__cta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 16px; border-radius: var(--radius-control); background: var(--gray-100); color: var(--primary-700); font-size: 15px; font-weight: 600; }
.soon-box { display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: center; justify-content: space-between; padding: 24px 32px; border: 1px dashed var(--gray-300); border-radius: var(--radius-card); }
.soon-box__intro { flex: 1 1 280px; }
.soon-box__title { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.soon-box__text { font-size: 15px; line-height: 22px; color: var(--gray-600); }
.soon-chip { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border: 1px solid var(--gray-300); border-radius: var(--radius-control); background: var(--surface-white); font-family: inherit; font-size: 15px; font-weight: 500; color: var(--gray-800); cursor: pointer; }
.soon-chip:hover { background: var(--gray-50); }
.soon-chip__code { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--gray-500); }

.band-deep { background: var(--green-deep); color: var(--on-dark); }
.py-128 { padding-top: 128px; padding-bottom: 128px; }
.method-title { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.04; font-weight: 700; letter-spacing: -0.03em; color: var(--on-dark); }
.method-side { flex: 0 1 440px; }
.method-lead { font-size: 18px; line-height: 28px; color: var(--on-dark-muted); }
.link-on-dark { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--on-dark); text-decoration: underline; text-underline-offset: 4px; }
.link-on-dark:hover { color: var(--on-dark-accent); }
.step-list { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 48px; }
.step { border-top: 1px solid var(--line-dark); padding-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.step__num { font-family: var(--font-display); font-size: 112px; line-height: 0.9; font-weight: 800; letter-spacing: -0.05em; color: var(--on-dark-accent); }
.step__title { padding-top: 8px; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.01em; color: var(--on-dark); }
.step__text { font-size: 17px; line-height: 28px; color: var(--on-dark-muted); }

.level-list { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px 16px; }
.level { display: flex; flex-direction: column; gap: 24px; }
.level__chart { height: 200px; display: flex; align-items: flex-end; }
.level__bar { width: 100%; border-radius: var(--radius-control); }
.level__bar--1 { height: 56px; background: #cfe0da; }
.level__bar--2 { height: 104px; background: #8bbcb0; }
.level__bar--3 { height: 152px; background: #2f8273; }
.level__bar--4 { height: 200px; background: var(--green-deep); }
.level__label { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-600); }
.level__name { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.015em; }
.level__text { font-size: 16px; line-height: 26px; color: var(--gray-600); }
.level-scale { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; font-size: 14px; font-weight: 600; color: var(--gray-600); }

.tick-list { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 17px; line-height: 26px; color: var(--gray-700); }
.chip-lg { padding: 4px 12px; }

.pricing-switch { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: var(--gray-700); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; align-items: stretch; }
.plan { background: var(--surface-white); border-radius: var(--radius-card); padding: 32px; display: flex; flex-direction: column; gap: 32px; }
.plan--dark { background: var(--green-deep); color: var(--on-dark); box-shadow: var(--shadow-2xl); }
.plan__head { min-height: 148px; display: flex; flex-direction: column; gap: 16px; }
.plan__name-row { min-height: 28px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan__name { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: normal; }
.plan__price { display: flex; align-items: baseline; gap: 8px; }
.plan__amount { font-family: var(--font-display); font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: var(--gray-900); }
.plan__per { font-size: 16px; font-weight: 500; color: var(--gray-600); }
.plan__note { font-size: 15px; line-height: 22px; color: var(--gray-600); }
.plan__tag { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-full); background: var(--accent-300); color: var(--gray-900); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.plan__features { flex: 1; padding: 24px 0 0; border-top: 1px solid var(--line); list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 24px; color: var(--gray-700); }
.plan__features li { display: flex; gap: 12px; }
.plan__features svg { flex-shrink: 0; margin-top: 2px; }
.plan--dark .plan__amount { color: var(--on-dark); }
.plan--dark .plan__per, .plan--dark .plan__note { color: var(--on-dark-muted); }
.plan--dark .plan__features { border-top-color: var(--line-dark); color: var(--on-dark); }


/* --- Legal pages ----------------------------------------------------------- */
.toc { flex: 1 1 240px; max-width: 300px; min-width: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 20px; }
.toc__title { font-size: 14px; font-weight: 600; color: var(--gray-900); }
.legal-article { flex: 999 1 560px; min-width: 0; max-width: 760px; display: flex; flex-direction: column; gap: 48px; font-size: 16px; line-height: 26px; color: var(--gray-600); }
.legal-h2 { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--gray-900); }

/* ==========================================================================
   5. Modals (native <dialog>, opened by site.js)
   ========================================================================== */
.modal {
  box-sizing: border-box;
  width: 100%;
  max-width: min(560px, calc(100% - 48px));
  max-height: calc(100% - 48px);
  margin: auto;
  padding: 32px;
  overflow-y: auto;
  border: 0;
  border-radius: 16px;
  background: var(--base-white);
  color: var(--gray-900);
  font-family: var(--font-sans);
  box-shadow: 0 24px 48px -12px rgba(16,24,40,0.35);
}
.modal--wide { max-width: min(640px, calc(100% - 48px)); }
.modal::backdrop { background: rgba(16,24,40,0.7); }
body:has(dialog[open]) { overflow: hidden; }

.modal__close { position: absolute; top: 12px; right: 12px; }
.modal__view { display: flex; flex-direction: column; gap: 24px; }
.modal__head { display: flex; flex-direction: column; gap: 16px; padding-right: 32px; }
.modal__title { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.modal__email { color: var(--gray-900); font-weight: 600; }
.modal__success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding-top: 8px; }

.featured-icon {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: var(--primary-100);
  border: 8px solid var(--primary-50);
  color: var(--primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
}
.featured-icon--success { background: var(--success-100); border-color: var(--success-50); color: var(--success-600); }

.modal__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.modal__fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.modal__legend { padding: 0; margin-bottom: 12px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--gray-700); }
.modal__options { display: grid; gap: 12px 16px; }
.modal__options--200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.modal__options--180 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.modal__note { margin: 0 0 0 28px; font-size: 14px; line-height: 20px; color: var(--gray-600); }
.modal__note--error { color: var(--error-600); }
.modal__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ==========================================================================
   6. Small screens   the mobile design
   The desktop header needs about 970px, so the mobile header and menu start
   at 1023px. The rest of the mobile design starts at 640px.
   ========================================================================== */
.site-header__mobile { display: none; }
@media (max-width: 1023px) {
  /* --- Header: logo, "Join" and the menu button ------------------------------ */
  .site-header, .site-header--home { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.96); border-bottom: 1px solid var(--line); }
  .site-header__bar, .site-header--home .site-header__bar { height: 64px; padding-top: 0; padding-bottom: 0; flex-wrap: nowrap; gap: 12px; }
  .site-header .img-h40 { height: 32px; }
  .site-header .logo-lockup { --logo-h: 32px; }
  .site-nav, .site-header__actions { display: none; }
  .site-header__mobile { display: flex; align-items: center; gap: 4px; }
  .menu-button { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--gray-900); cursor: pointer; }
  .menu-button:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--gray-100); }

  /* --- Menu (full screen dialog) ------------------------------------------- */
  .mobile-menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow-y: auto; background: var(--surface-white); color: var(--gray-900); font-family: var(--font-sans); }
  .mobile-menu::backdrop { background: transparent; }
  .mobile-menu__inner { min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
  .mobile-menu__bar { height: 64px; flex-shrink: 0; padding: 0 32px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
  .mobile-menu__home { display: flex; align-items: center; text-decoration: none; }
  .mobile-menu__logo { display: block; height: 32px; width: auto; }
  .mobile-menu__close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-control); background: var(--gray-100); color: var(--gray-900); cursor: pointer; }
  .mobile-menu__close:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--gray-200); }
  .mobile-menu__nav { padding: 8px 32px 0; }
  .mobile-menu__nav ul { margin: 0; padding: 0; list-style: none; }
  .mobile-menu__nav li { border-bottom: 1px solid var(--line); }
  .mobile-menu__nav a { min-height: 60px; display: flex; align-items: center; justify-content: space-between; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--gray-900); text-decoration: none; }
  .mobile-menu__langs { padding: 28px 32px 0; display: flex; flex-direction: column; gap: 12px; }
  .mobile-menu__label { font-size: 12px; line-height: 18px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-600); }
  .mobile-menu__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mobile-menu__lang { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-warm); font-size: 15px; font-weight: 600; color: var(--gray-800); text-decoration: none; }
  .mobile-menu__code { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--green-deep); }
  .mobile-menu__actions { margin-top: auto; padding: 32px 32px 24px; display: flex; flex-direction: column; gap: 12px; }
  .mobile-menu__contact { align-self: center; padding: 0 12px; font-size: 15px; }
}

@media (max-width: 640px) {
  .wrap, .wrap-1216 { padding-left: 20px; padding-right: 20px; }
  .site-header .site-header__bar, .mobile-menu__bar { padding: 0 12px 0 20px; }
  .mobile-menu__nav { padding: 8px 20px 0; }
  .mobile-menu__langs { padding: 28px 20px 0; }
  .mobile-menu__actions { padding: 32px 20px 24px; }
  .py-96 { padding-top: 64px; padding-bottom: 64px; }
  .pb-96 { padding-bottom: 64px; }
  .pt-80 { padding-top: 48px; }
  .py-128 { padding-top: 64px; padding-bottom: 64px; }
  .gap-48 { gap: 32px; }
  .gap-64 { gap: 40px; }
  .p-32 { padding: 24px; }
  .cols-260 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
  .cols-300 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
  .cols-320 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
  .cols-340 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
  [id] { scroll-margin-top: 64px; }

  /* --- Type ---------------------------------------------------------------- */
  .h1 { font-size: 38px; line-height: 1.08; letter-spacing: -0.03em; }
  .h1-md, .h1-sm { font-size: 36px; line-height: 44px; }
  .h2 { font-size: 30px; line-height: 1.12; letter-spacing: -0.025em; }
  .h2-display { font-size: 32px; line-height: 1.1; }
  .eyebrow { font-size: 15px; }
  .lead { font-size: 17px; line-height: 27px; }
  .text-lg { font-size: 16px; line-height: 25px; }
  .kicker { font-size: 13px; }
  .stat-value { font-size: 22px; line-height: 28px; }

  /* --- Sticky call to action ------------------------------------------------ */
  .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 12px 16px max(16px, env(safe-area-inset-bottom)); background: rgba(255,255,255,0.96); border-top: 1px solid var(--line); box-shadow: 0 -8px 16px -8px rgba(16,24,40,0.08); }
  body:has(.mobile-cta) .site-footer__body { padding-bottom: 112px; }

  /* --- Hero buttons, all pages ------------------------------------------- */
  .hero-actions { flex-direction: column; flex-wrap: nowrap; gap: 12px; }
  .hero-actions .vilo-button { width: 100%; }

  /* --- Home: hero ------------------------------------------------------------ */
  .wrap.home-hero { padding-top: 32px; padding-bottom: 40px; gap: 32px; }
  .home-hero > .row-wrap { gap: 32px; }
  .home-hero .flex-520 { gap: 20px; }
  .home-hero .vilo-badge--lg { font-size: 14px; line-height: 20px; padding: 2px 10px 2px 8px; }
  .home-hero__title { font-size: 42px; line-height: 1.06; }
  .hero-accent path { stroke-width: 4; }
  .home-hero__lead { font-size: 17px; line-height: 27px; }
  .home-hero .hero-actions { padding-top: 4px; }
  .hero-card-wrap { padding: 16px 8px 0; }
  .hero-card { padding: 8px 8px 20px; transform: rotate(-1deg); }
  .hero-card__sticker { top: -22px; right: -8px; width: 68px; height: 68px; font-size: 18px; line-height: 16px; }
  .hero-card__level { top: 8px; left: 8px; padding: 4px 10px; font-size: 11px; }
  .hero-card__play { width: 60px; height: 60px; }
  .hero-card__play svg { width: 24px; height: 24px; }
  .hero-card__duration { right: 8px; bottom: 8px; padding: 2px 8px; }
  .hero-card__body { padding: 16px 8px 0; gap: 4px; }
  .hero-card__kicker { font-size: 12px; }
  .hero-card__title { font-size: 20px; line-height: 26px; }
  .hero-card__meta { font-size: 14px; line-height: 20px; }
  .hero-card__hellos { display: none; }
  .no-list { padding-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; font-size: 15px; line-height: 20px; }
  .no-list svg { flex-shrink: 0; width: 18px; height: 18px; }

  /* --- Section heads ------------------------------------------------------- */
  .section-head { gap: 12px; }
  .section-head__title { gap: 12px; }
  .section-head__text { font-size: 16px; line-height: 25px; }

  /* --- Home: languages ------------------------------------------------------- */
  .lang-grid { gap: 12px; }
  .lang-tile { min-height: 0; padding: 20px; display: grid; grid-template-columns: 52px minmax(0, 1fr) 24px; gap: 4px 16px; align-items: center; }
  .lang-tile .spread, .lang-tile .stack { display: contents; }
  .lang-tile__letter { display: none; }
  .lang-tile__code { grid-column: 1; grid-row: 1 / span 3; width: 52px; height: 52px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 1px solid var(--primary-100); border-radius: var(--radius-control); background: var(--primary-50); font-size: 16px; line-height: 1; font-weight: 700; color: var(--green-deep); }
  .lang-tile__name { grid-column: 2; grid-row: 1; font-size: 20px; line-height: 26px; }
  .lang-tile__native { margin-left: 4px; font-size: 14px; }
  .lang-tile__text { grid-column: 2; grid-row: 2; font-size: 14px; line-height: 21px; }
  .lang-tile__count { grid-column: 2; grid-row: 3; justify-self: start; padding: 0; border: 0; background: none; color: var(--gray-500); }
  .lang-tile__cta { grid-column: 3; grid-row: 1 / span 3; min-height: 0; margin: 0; padding: 0; justify-content: center; background: none; color: var(--primary-700); font-size: 0; }
  .lang-tile__cta svg { width: 20px; height: 20px; }
  .soon-box { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 16px; padding: 20px; }
  .soon-box__intro { flex: none; }
  .soon-box__title { font-size: 20px; line-height: 26px; }
  .soon-box__text { font-size: 14px; line-height: 21px; }
  .soon-box__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .soon-chip { padding: 0 12px; font-size: 14px; text-align: left; }

  /* --- Home: method ---------------------------------------------------------- */
  .method-title { font-size: 34px; line-height: 1.06; }
  .method-lead { font-size: 16px; line-height: 26px; }
  .step-list { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .step { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 16px; align-items: start; align-content: start; padding-top: 24px; }
  .step__num { grid-row: 1 / span 2; font-size: 48px; }
  .step__title, .step__text { grid-column: 2; }
  .step__title { padding-top: 0; font-size: 22px; line-height: 28px; }
  .step__text { font-size: 15px; line-height: 24px; }
  .method-more { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-sizing: border-box; border: 1px solid var(--line-dark); border-radius: var(--radius-control); font-size: 16px; font-weight: 600; color: var(--on-dark); text-decoration: none; }
  .method-more:hover { color: var(--on-dark-accent); }

  /* --- Home: levels ------------------------------------------------------------ */
  .level-list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .level { gap: 12px; }
  .level .stack { gap: 4px; }
  .level__chart { display: block; height: 12px; overflow: hidden; border-radius: var(--radius-full); background: var(--gray-200); }
  .level__chart .level__bar { height: 100%; border-radius: var(--radius-full); }
  .level__bar--1 { width: 25%; }
  .level__bar--2 { width: 50%; }
  .level__bar--3 { width: 75%; }
  .level__label { font-size: 12px; }
  .level__name { font-size: 20px; line-height: 26px; }
  .level__text { font-size: 15px; line-height: 23px; }
  .level-scale { display: none; }

  /* --- Home: accents (head, photos, then the list) ------------------------- */
  .accents { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 32px; }
  .accents__text { display: contents; }
  .accents__head { order: 1; gap: 12px; }
  .accents__text > .text-lg { order: 2; margin-top: -20px; }
  .accents__photos { order: 3; flex: none; gap: 12px; }
  .accents .tick-list { order: 4; }
  .portrait--offset { margin-top: 24px; }
  .accents__photos .chip { left: 8px; bottom: 8px; padding: 3px 10px; font-size: 12px; }
  .tick-list { gap: 12px; font-size: 15px; line-height: 23px; }
  .tick-list svg { width: 22px; height: 22px; }

  /* --- Home: pricing (the recommended plan comes first) ----------------------- */
  .pricing-head { gap: 20px; }
  .pricing-head > .stack { gap: 12px; }
  .pricing-switch { gap: 8px 12px; font-size: 15px; }
  .pricing-switch .vilo-badge, .plan__name-row .vilo-badge { padding: 2px 8px; font-size: 12px; line-height: 18px; }
  .plans { display: flex; flex-direction: column-reverse; gap: 16px; }
  .plan { padding: 24px; gap: 24px; }
  .plan__head { min-height: 0; gap: 12px; }
  .plan__name-row { min-height: 0; }
  .plan__name { font-size: 20px; line-height: 26px; }
  .plan__amount { font-size: 44px; }
  .plan__per { font-size: 15px; }
  .plan__note { font-size: 14px; line-height: 21px; }
  .plan__tag { padding: 3px 10px; font-size: 11px; line-height: 16px; }
  .plan__features { flex: none; padding-top: 20px; font-size: 15px; line-height: 22px; }
  .plan__features svg { margin-top: 1px; }

  /* --- FAQ page: topics as chips under the search, sections stacked ---------- */
  .hero > .wrap.faq-hero { padding: 32px 20px 24px; gap: 12px; }
  .faq-hero .eyebrow { font-size: 13px; line-height: 20px; letter-spacing: 0.08em; text-transform: uppercase; }
  .faq-hero .h1-sm { font-size: 34px; line-height: 1.1; letter-spacing: -0.03em; }
  .faq-hero .lead { font-size: 16px; line-height: 24px; }
  .faq-search { padding-top: 8px; max-width: none; }
  .faq-search__icon { left: 14px; width: 20px; height: 20px; }
  .faq-search__input { height: 52px; padding: 0 52px 0 44px; border-radius: var(--radius-control); background: var(--surface-white); font-size: 16px; box-shadow: none; }
  .faq-search__clear { right: 4px; top: 4px; border-radius: 0; }
  .faq-chips { display: block; overflow-x: auto; padding: 0 20px 20px; }
  .faq-chips__row { display: flex; gap: 8px; width: max-content; }
  .faq-chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--gray-300); border-radius: 999px; background: var(--surface-white); font-family: inherit; font-size: 15px; font-weight: 500; color: var(--gray-700); white-space: nowrap; cursor: pointer; }
  .faq-chip[aria-pressed="true"] { border-color: var(--green-deep); background: var(--green-deep); color: var(--on-dark); font-weight: 600; }

  .page-faq main { background: var(--surface-white); }
  .wrap.faq-body { padding: 24px 20px 48px; display: block; }
  .faq-topics { display: none; }
  .faq-list { gap: 8px; }
  .faq-status { font-size: 13px; }
  .faq-sec { gap: 8px; padding-bottom: 0; border-bottom-color: var(--line); }
  .faq-sec__head { display: contents; }
  .faq-sec__title { flex: none; font-size: 20px; line-height: 26px; letter-spacing: -0.02em; }
  .faq-sec__button { display: grid; grid-template-columns: auto minmax(0, 1fr) 24px; column-gap: 10px; padding: 12px 0; }
  .faq-sec__button:not(:has(.faq-sec__code)) { grid-template-columns: minmax(0, 1fr) 24px; }
  .faq-sec__code { min-width: 32px; height: 24px; padding: 0 6px; font-size: 11px; color: var(--green-deep); }
  .faq-sec__names { display: flex; flex-direction: column; min-width: 0; }
  .faq-sec__count { font-size: 13px; line-height: 18px; }
  .faq-sec__button .faq-chevron { width: 22px; height: 22px; }
  .faq-sec__link { order: 3; align-self: flex-start; }
  .faq-sec.is-closed .faq-sec__link { display: none; }
  .faq-sec__panel { order: 2; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
  .faq-item { border-top-color: var(--line); margin-top: 0; }
  .faq-item__button { min-height: 64px; grid-template-columns: 28px minmax(0, 1fr) 20px; padding: 16px 0; }
  .faq-item__num { font-size: 12px; }
  .faq-item__q { font-size: 16px; line-height: 23px; }
  .faq-item__panel { padding: 0 0 20px 40px; }
  .faq-item__panel p { font-size: 15px; line-height: 24px; }
  .faq-empty { padding: 32px 20px; gap: 8px; background: none; border-radius: var(--radius-card); }
  .faq-empty__title { font-size: 18px; line-height: 26px; }
  .faq-empty__text { font-size: 15px; line-height: 23px; }
  .faq-empty__actions [data-open] { display: none; }
  .faq-ask { margin-top: 32px; padding: 20px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; border: 0; border-radius: var(--radius-card); background: var(--surface-warm); }
  .faq-ask__text { flex: none; gap: 8px; }
  .faq-ask__title { font-size: 18px; line-height: 26px; letter-spacing: normal; }
  .faq-ask .text-body { font-size: 15px; line-height: 23px; }
  .faq-ask .vilo-button { display: none; }
  .faq-ask .underline-button { display: block; }

  /* --- Call-to-action band ------------------------------------------------------ */
  .wrap.cta-section { padding: 48px 16px; }
  .cta-band { padding: 48px 20px; gap: 12px; }
  .cta-band__ring--1 { top: -48px; left: -48px; width: 160px; height: 160px; }
  .cta-band__ring--2 { display: none; }
  .cta-band__ring--3 { bottom: -120px; right: -80px; width: 240px; height: 240px; }
  .cta-band__kicker { font-size: 24px; line-height: 26px; }
  .cta-band__title { font-size: 36px; line-height: 1.04; }
  .cta-band__text { font-size: 16px; line-height: 25px; }
  .cta-band__actions { width: 100%; padding-top: 12px; flex-direction: column; }
  .cta-band__actions .cta-button { justify-content: center; }
  .cta-form { padding-top: 12px; gap: 12px; }
  .cta-form__row { flex-direction: column; flex-wrap: nowrap; gap: 12px; }
  .cta-input { flex: none; width: 100%; padding: 0 16px; }
  .cta-button { width: 100%; justify-content: center; }
  .cta-band__success { margin-top: 12px; padding: 12px 16px; font-size: 15px; }
  .cta-band__note { font-size: 11px; line-height: 16px; }

  /* --- Footer: brand on top, then the link columns two by two ---------------- */
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__grid > :first-child { grid-column: 1 / -1; }
  /* Resources, the last column, spans the width with its links in two lines. */
  .site-footer__grid > .footer-nav:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
  .site-footer__grid > .footer-nav:last-child > .label-muted { grid-column: 1 / -1; }

  /* --- Language pages ------------------------------------------------------------ */
  .hero > .wrap { padding-top: 16px; padding-bottom: 40px; gap: 24px; }
  .breadcrumb__back { min-height: 32px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--gray-600); text-decoration: none; }
  .page-language .breadcrumb > :not(.breadcrumb__back) { display: none; }
  .page-language .hero .row-wrap { gap: 24px; }
  .page-language .hero .flex-520 { gap: 16px; }
  .page-language .hero .hero-actions { padding-top: 8px; }
  .page-language .hero .cols-3 { gap: 8px; }
  .page-language .hero .card-tint { padding: 14px 12px; gap: 4px; border-radius: 12px; }
  .page-language .hero .card-tint .text-sm { font-size: 12px; line-height: 16px; }

  .lang-accents .eyebrow, .lang-videos .eyebrow { font-size: 13px; line-height: 20px; letter-spacing: 0.08em; text-transform: uppercase; }
  .wrap.lang-accents { padding: 56px 0; gap: 24px; background: var(--surface-white); }
  .lang-accents > .stack { padding: 0 20px; gap: 10px; }
  .lang-accents .lead { font-size: 16px; line-height: 25px; }
  .lang-accents__list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; padding: 4px 20px 8px; }
  .lang-accents__list > .accent-card { flex: 0 0 280px; scroll-snap-align: start; background: var(--base-white); }
  .lang-accents .media-16x9 { aspect-ratio: 16 / 10; }
  .lang-accents .chip { left: 10px; bottom: 10px; padding: 3px 10px; font-size: 12px; }
  .lang-accents .p-24 { padding: 16px; gap: 8px; }
  .lang-accents .vilo-badge--md { padding: 2px 8px 2px 3px; font-size: 12px; line-height: 18px; }
  .lang-accents .h3 { font-size: 18px; line-height: 24px; }
  .lang-accents .text-body { font-size: 14px; line-height: 21px; }
  .lang-accents .count { font-size: 13px; }

  .lang-videos > .wrap { padding-top: 56px; padding-bottom: 56px; gap: 24px; }
  .lang-videos .mw-640 { gap: 10px; }
  .video-grid { display: flex; flex-direction: column; gap: 12px; }
  .video-card { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: stretch; border-radius: 12px; }
  .video-card .video-thumb { aspect-ratio: auto; min-height: 96px; }
  .video-card .play-btn { width: 36px; height: 36px; }
  .video-card .play-btn svg { width: 16px; height: 16px; }
  .video-card .duration { right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 4px; font-size: 11px; }
  .video-card .p-20 { min-width: 0; padding: 12px; gap: 6px; }
  .video-card .vilo-badge--country { display: none; }
  .video-card .text-title { font-size: 15px; line-height: 20px; }
  .video-card .text-sm { font-size: 13px; line-height: 18px; }

  .page-language .cta-band__title { font-size: 32px; line-height: 1.06; }

  /* --- Contact dialog: centred, 12px from the screen edges ---------------------- */
  .modal, .modal--wide { max-width: calc(100% - 24px); max-height: calc(100% - 24px); padding: 24px 20px; }

  /* --- Waitlist dialog: a bottom sheet ------------------------------------------- */
  .modal--sheet { max-width: 100%; max-height: 92%; margin: auto 0 0; padding: 8px 20px max(24px, env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; box-shadow: 0 -12px 32px -8px rgba(16,24,40,0.25); }
  .modal--sheet::backdrop { background: rgba(16,24,40,0.6); }
  .modal__handle { display: block; width: 40px; height: 5px; margin: 0 auto 20px; border-radius: var(--radius-full); background: var(--gray-300); }
  .modal--sheet .modal__view { gap: 20px; }
  .modal--sheet .vilo-close-button { width: 44px; height: 44px; padding: 0; border-radius: var(--radius-full); background: var(--gray-100); color: var(--gray-700); }
  .modal--sheet .vilo-close-button__icon { width: 20px; height: 20px; }
  .modal--sheet [data-view="form"] .featured-icon { display: none; }
  .modal--sheet .modal__head { padding: 4px 48px 0 0; }
  .modal--sheet .modal__head .stack { gap: 6px; }
  .modal--sheet .modal__title { line-height: 30px; letter-spacing: -0.02em; }
  .modal--sheet .text-body { font-size: 15px; line-height: 22px; }
  .modal--sheet .modal__legend { margin-bottom: 10px; }
  .modal--sheet .modal__options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .modal--sheet .modal__options .vilo-checkbox { min-height: 56px; box-sizing: border-box; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: var(--radius-md); background: var(--base-white); }
  .modal--sheet .modal__options .vilo-checkbox:has(:checked) { border-color: var(--primary-600); background: var(--primary-50); }
  .modal--sheet .modal__options .vilo-checkbox__control { padding-top: 0; }
  .modal--sheet .modal__options .vilo-checkbox__input:checked + .vilo-checkbox__box,
  .modal--sheet .modal__options .vilo-checkbox:hover .vilo-checkbox__input:checked + .vilo-checkbox__box { border-color: var(--primary-600); background: var(--primary-600); color: var(--base-white); }
  .modal--sheet .modal__options .vilo-checkbox__text { gap: 0; font-size: 14px; line-height: 18px; }
  .modal--sheet .modal__options .vilo-checkbox__label { font-weight: 600; color: var(--gray-900); }
  .modal--sheet .modal__options .vilo-checkbox__supporting { font-size: 12px; line-height: 16px; }
  .modal--sheet .text-sm { font-size: 13px; line-height: 19px; }
  .modal--sheet .modal__actions { grid-template-columns: minmax(0, 1fr); }
  .modal--sheet .modal__actions [data-close] { display: none; }
  .modal--sheet .vilo-button--lg { padding: 12px 20px; }
  .modal--sheet .modal__success { padding: 16px 0 8px; }
}