:root {
  --primary-white: var(--brand-3-tint-5);
  --primary-green: var(--brand-1);
  --off-white: var(--brand-3-tint-20);

  /* Workbook colors stay numbered; tint/shade suffixes are workbook factors. */
  --brand-1: #10391d;
  --brand-1-shade-80: #0d2e17;
  --brand-1-shade-60: #0a2211;
  --brand-1-shade-40: #06170c;
  --brand-1-shade-20: #030b06;
  --brand-1-tint-80: #40614a;
  --brand-1-tint-60: #708877;
  --brand-1-tint-40: #9fb0a5;
  --brand-1-tint-20: #cfd7d2;
  --brand-1-tint-10: #e7ebe8;
  --brand-1-tint-5: #f3f5f4;
  --brand-1-tint-3: #f8f9f8;
  --brand-1-tint-2: #fafbfa;

  --brand-2: #3d73af;
  --brand-2-shade-80: #315c8c;
  --brand-2-shade-60: #254569;
  --brand-2-shade-40: #182e46;
  --brand-2-shade-20: #0c1723;
  --brand-2-tint-80: #648fbf;
  --brand-2-tint-60: #8babcf;
  --brand-2-tint-40: #b1c7df;
  --brand-2-tint-20: #d8e3ef;
  --brand-2-tint-10: #ecf1f7;
  --brand-2-tint-5: #f5f8fb;
  --brand-2-tint-3: #f9fbfd;
  --brand-2-tint-2: #fbfcfd;

  --brand-3: #eaf0ce;
  --brand-3-shade-80: #bbc0a5;
  --brand-3-shade-60: #8c907c;
  --brand-3-shade-40: #5e6052;
  --brand-3-shade-20: #2f3029;
  --brand-3-tint-80: #eef3d8;
  --brand-3-tint-60: #f2f6e2;
  --brand-3-tint-40: #f7f9eb;
  --brand-3-tint-20: #fbfcf5;
  --brand-3-tint-10: #fdfefa;
  --brand-3-tint-5: #fefefd;
  --brand-3-tint-3: #fefffe;
  --brand-3-tint-2: #fffffe;

  --brand-4: #f1545b;
  --brand-4-shade-80: #c14349;
  --brand-4-shade-60: #913237;
  --brand-4-shade-40: #602224;
  --brand-4-shade-20: #301112;
  --brand-4-tint-80: #f4767c;
  --brand-4-tint-60: #f7989d;
  --brand-4-tint-40: #f9bbbd;
  --brand-4-tint-20: #fcddde;
  --brand-4-tint-10: #feeeef;
  --brand-4-tint-5: #fef6f7;
  --brand-4-tint-3: #fffafa;
  --brand-4-tint-2: #fffcfc;

  --brand-5: #84dcce;
  --brand-5-shade-80: #6ab0a5;
  --brand-5-shade-60: #4f847c;
  --brand-5-shade-40: #355852;
  --brand-5-shade-20: #1a2c29;
  --brand-5-tint-80: #9de3d8;
  --brand-5-tint-60: #b5eae2;
  --brand-5-tint-40: #cef1eb;
  --brand-5-tint-20: #e6f8f5;
  --brand-5-tint-10: #f3fcfa;
  --brand-5-tint-5: #f9fdfd;
  --brand-5-tint-3: #fbfefe;
  --brand-5-tint-2: #fdfefe;

  /* Existing page roles map to the workbook palette. */
  --green-900: var(--brand-1-shade-20);
  --green-800: var(--brand-1-shade-40);
  --green-700: var(--brand-1-shade-60);
  --green-600: var(--brand-1-shade-80);
  --green-400: var(--brand-1-tint-80);
  --green-300: var(--brand-1-tint-60);
  --green-200: var(--brand-1-tint-40);
  --green-100: var(--brand-1-tint-20);
  --blue-900: var(--brand-2-shade-20);
  --blue-800: var(--brand-2-shade-40);
  --blue-700: var(--brand-2-shade-60);
  --blue-600: var(--brand-2-shade-80);
  --blue-500: var(--brand-2);
  --blue-400: var(--brand-2-tint-80);
  --blue-300: var(--brand-2-tint-60);
  --blue-200: var(--brand-2-tint-40);
  --blue-100: var(--brand-2-tint-20);
  --cream-900: var(--brand-3-shade-20);
  --cream-800: var(--brand-3-shade-40);
  --cream-700: var(--brand-3-shade-60);
  --cream-600: var(--brand-3-shade-80);
  --cream-500: var(--brand-3);
  --cream-400: var(--brand-3-tint-80);
  --cream-300: var(--brand-3-tint-60);
  --cream-200: var(--brand-3-tint-40);
  --cream-100: var(--brand-3-tint-20);
  --section-surface-base: var(--primary-white);
  --section-surface-alt: var(--off-white);
  --section-surface-brand: var(--primary-green);
  --coral-900: var(--brand-4-shade-20);
  --coral-800: var(--brand-4-shade-40);
  --coral-700: var(--brand-4-shade-60);
  --coral-600: var(--brand-4-shade-80);
  --coral-500: var(--brand-4);
  --coral-400: var(--brand-4-tint-80);
  --coral-300: var(--brand-4-tint-60);
  --coral-200: var(--brand-4-tint-40);
  --coral-100: var(--brand-4-tint-20);
  --aqua-900: var(--brand-5-shade-20);
  --aqua-800: var(--brand-5-shade-40);
  --aqua-700: var(--brand-5-shade-60);
  --aqua-600: var(--brand-5-shade-80);
  --aqua-500: var(--brand-5);
  --aqua-400: var(--brand-5-tint-80);
  --aqua-300: var(--brand-5-tint-60);
  --aqua-200: var(--brand-5-tint-40);
  --aqua-100: var(--brand-5-tint-20);
  /* Semantic surface roles keep workbook numbering out of component styles. */
  --surface-green-faint: var(--brand-1-tint-2);
  --surface-green-subtle: var(--brand-1-tint-3);
  --surface-green-soft: var(--brand-1-tint-5);
  --surface-blue-subtle: var(--brand-2-tint-3);
  --surface-blue-soft: var(--brand-2-tint-5);
  --surface-cream-soft: var(--primary-white);
  --surface-coral-subtle: var(--brand-4-tint-3);
  --surface-aqua-subtle: var(--brand-5-tint-3);
  --surface-aqua-soft: var(--brand-5-tint-5);
  --surface-aqua-highlight: var(--brand-5-tint-10);
  --field-surface: var(--primary-white);
  --field-border: var(--green-300);
  --placeholder-surface: var(--brand-1-tint-5);
  --placeholder-border: var(--green-100);
  --button: var(--primary-green);
  --buttonHover: var(--green-600);
  --bg: var(--section-surface-base);
  --surfaceAlt: var(--section-surface-alt);
  --surfaceSoft: var(--off-white);
  --card: var(--primary-white);
  --ink: var(--green-900);
  --muted: var(--green-400);
  --mutedStrong: var(--green-300);
  --stroke: var(--green-100);
  --shadow: 0 16px 38px rgba(3, 11, 6, 0.08);
  --shadow2: 0 22px 54px rgba(12, 23, 35, 0.1);
  --section-space: clamp(76px, 9vw, 124px);
  --max: 1334px;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

a {
  color: inherit;
}

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

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 20px 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.button.primary {
  background: var(--button);
  color: var(--primary-white);
}

.button.primary:hover {
  background: var(--buttonHover);
  transform: translateY(-1px);
}

.main {
  display: flex;
  flex-direction: column;
}

.sectionBlock,
.sectionAlt {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.sectionAlt {
  background: var(--surfaceAlt);
}

.sectionInner {
  max-width: var(--max);
  margin: 0 auto;
}

@media (max-width: 720px) {
  :root {
    --section-space: 68px;
  }
}