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

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* h1,
h2,
h3,
h4 {
  text-wrap: balance;
} */

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

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

/* Ensure the `hidden` attribute always wins over author `display` rules. */

[hidden] {
  display: none !important;
}

input,
button,
textarea,
select {
  font: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

:target {
  scroll-margin-block: 5ex;
}

/*
 * Colour tokens — @reva/design-tokens (DES-9, Phase 1.1).
 *
 * The website's colour foundation comes entirely from @reva/design-tokens. This
 * file imports the generated foundation (`:root` custom properties) + semantic
 * layer (`:root` light / `.dark`); section / component CSS reads the package's
 * semantic and foundation CSS variables directly (e.g. `--fg-default`,
 * `--canvas`, `--primary-solid`, `--color-brass-500`).
 *
 * The transitional `--color-*` alias bridge and the off-palette `--site-*`
 * colour overrides were retired in DES-9 — there is no website-local colour
 * indirection anymore. Prefer semantic tokens over raw foundation colours;
 * foundation colours are referenced directly only for decorative brand tints
 * and alpha ramps where no semantic role fits.
 *
 * Dark mode comes for free: activating `.dark` flips the package's semantic
 * layer, and every consumer follows.
 */

:root {
  --blur-xs: 0.125rem;
  --blur-sm: 0.25rem;
  --blur-md: 0.5rem;
  --blur-lg: 1rem;
  --blur-xl: 1.5rem;
  --border-width-default: 0.0625rem;
  --border-width-medium: 0.09375rem;
  --border-width-thick: 0.125rem;
  --breakpoint-sm: 30rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
  --breakpoint-3xl: 120rem;
  --color-amber-50: oklch(99% 0.0135 73.57);
  --color-amber-100: oklch(96.28% 0.0275 72.39);
  --color-amber-150: oklch(93.53% 0.0419 71.15);
  --color-amber-200: oklch(90.73% 0.0567 69.87);
  --color-amber-250: oklch(87.89% 0.0719 68.51);
  --color-amber-300: oklch(84.99% 0.0878 67.08);
  --color-amber-350: oklch(82.02% 0.1046 65.53);
  --color-amber-400: oklch(78.95% 0.1225 63.81);
  --color-amber-450: oklch(75.71% 0.1424 61.8);
  --color-amber-500: oklch(71.96% 0.1692 58.57);
  --color-amber-550: oklch(64.77% 0.156 52.13);
  --color-amber-600: oklch(58.54% 0.1429 48.11);
  --color-amber-650: oklch(52.63% 0.1297 44.67);
  --color-amber-700: oklch(46.92% 0.1166 41.57);
  --color-amber-750: oklch(41.35% 0.1034 38.69);
  --color-amber-800: oklch(35.89% 0.0902 35.99);
  --color-amber-850: oklch(30.52% 0.0771 33.41);
  --color-amber-900: oklch(25.23% 0.0639 30.95);
  --color-amber-950: oklch(20% 0.0508 28.57);
  --color-amber-alpha-a4: oklch(71.96% 0.1692 58.57 / 0.04);
  --color-amber-alpha-a5: oklch(71.96% 0.1692 58.57 / 0.05);
  --color-amber-alpha-a6: oklch(71.96% 0.1692 58.57 / 0.06);
  --color-amber-alpha-a8: oklch(71.96% 0.1692 58.57 / 0.08);
  --color-amber-alpha-a10: oklch(71.96% 0.1692 58.57 / 0.1);
  --color-amber-alpha-a15: oklch(71.96% 0.1692 58.57 / 0.15);
  --color-amber-alpha-a20: oklch(71.96% 0.1692 58.57 / 0.2);
  --color-amber-alpha-a25: oklch(71.96% 0.1692 58.57 / 0.25);
  --color-amber-alpha-a30: oklch(71.96% 0.1692 58.57 / 0.3);
  --color-amber-alpha-a35: oklch(71.96% 0.1692 58.57 / 0.35);
  --color-amber-alpha-a40: oklch(71.96% 0.1692 58.57 / 0.4);
  --color-amber-alpha-a45: oklch(71.96% 0.1692 58.57 / 0.45);
  --color-amber-alpha-a50: oklch(71.96% 0.1692 58.57 / 0.5);
  --color-amber-alpha-a55: oklch(71.96% 0.1692 58.57 / 0.55);
  --color-amber-alpha-a60: oklch(71.96% 0.1692 58.57 / 0.6);
  --color-amber-alpha-a65: oklch(71.96% 0.1692 58.57 / 0.65);
  --color-amber-alpha-a70: oklch(71.96% 0.1692 58.57 / 0.7);
  --color-amber-alpha-a75: oklch(71.96% 0.1692 58.57 / 0.75);
  --color-amber-alpha-a80: oklch(71.96% 0.1692 58.57 / 0.8);
  --color-amber-alpha-a85: oklch(71.96% 0.1692 58.57 / 0.85);
  --color-amber-alpha-a90: oklch(71.96% 0.1692 58.57 / 0.9);
  --color-amber-alpha-a95: oklch(71.96% 0.1692 58.57 / 0.95);
  --color-amber-alpha-transparent: oklch(71.96% 0.1692 58.57 / 0);
  --color-gold-50: oklch(99.30% 0.0070 76.72);
  --color-gold-100: oklch(97.18% 0.0176 76.72);
  --color-gold-150: oklch(95.01% 0.0285 76.72);
  --color-gold-200: oklch(92.78% 0.0399 76.72);
  --color-gold-250: oklch(90.47% 0.0520 76.72);
  --color-gold-300: oklch(88.07% 0.0647 76.72);
  --color-gold-350: oklch(85.54% 0.0785 76.72);
  --color-gold-400: oklch(82.83% 0.0938 76.72);
  --color-gold-450: oklch(79.83% 0.1117 76.72);
  --color-gold-500: oklch(75.77% 0.1403 76.72);
  --color-gold-550: oklch(66.15% 0.1222 75.86);
  --color-gold-600: oklch(59.03% 0.1109 75.22);
  --color-gold-650: oklch(52.61% 0.1013 74.64);
  --color-gold-700: oklch(46.62% 0.0926 74.11);
  --color-gold-750: oklch(40.92% 0.0845 73.60);
  --color-gold-800: oklch(35.45% 0.0769 73.10);
  --color-gold-850: oklch(30.16% 0.0697 72.63);
  --color-gold-900: oklch(25.01% 0.0628 72.17);
  --color-gold-950: oklch(20.00% 0.0561 71.72);
  --color-gold-alpha-a4: oklch(75.77% 0.1403 76.72 / 0.04);
  --color-gold-alpha-a5: oklch(75.77% 0.1403 76.72 / 0.05);
  --color-gold-alpha-a6: oklch(75.77% 0.1403 76.72 / 0.06);
  --color-gold-alpha-a8: oklch(75.77% 0.1403 76.72 / 0.08);
  --color-gold-alpha-a10: oklch(75.77% 0.1403 76.72 / 0.1);
  --color-gold-alpha-a15: oklch(75.77% 0.1403 76.72 / 0.15);
  --color-gold-alpha-a20: oklch(75.77% 0.1403 76.72 / 0.2);
  --color-gold-alpha-a25: oklch(75.77% 0.1403 76.72 / 0.25);
  --color-gold-alpha-a30: oklch(75.77% 0.1403 76.72 / 0.3);
  --color-gold-alpha-a35: oklch(75.77% 0.1403 76.72 / 0.35);
  --color-gold-alpha-a40: oklch(75.77% 0.1403 76.72 / 0.4);
  --color-gold-alpha-a45: oklch(75.77% 0.1403 76.72 / 0.45);
  --color-gold-alpha-a50: oklch(75.77% 0.1403 76.72 / 0.5);
  --color-gold-alpha-a55: oklch(75.77% 0.1403 76.72 / 0.55);
  --color-gold-alpha-a60: oklch(75.77% 0.1403 76.72 / 0.6);
  --color-gold-alpha-a65: oklch(75.77% 0.1403 76.72 / 0.65);
  --color-gold-alpha-a70: oklch(75.77% 0.1403 76.72 / 0.7);
  --color-gold-alpha-a75: oklch(75.77% 0.1403 76.72 / 0.75);
  --color-gold-alpha-a80: oklch(75.77% 0.1403 76.72 / 0.8);
  --color-gold-alpha-a85: oklch(75.77% 0.1403 76.72 / 0.85);
  --color-gold-alpha-a90: oklch(75.77% 0.1403 76.72 / 0.9);
  --color-gold-alpha-a95: oklch(75.77% 0.1403 76.72 / 0.95);
  --color-gold-alpha-transparent: oklch(75.77% 0.1403 76.72 / 0);
  --color-mulberry-50: oklch(98.50% 0.0031 18.00);
  --color-mulberry-100: oklch(95.18% 0.0149 18.00);
  --color-mulberry-150: oklch(91.73% 0.0272 18.00);
  --color-mulberry-200: oklch(88.13% 0.0401 18.00);
  --color-mulberry-250: oklch(84.35% 0.0536 18.00);
  --color-mulberry-300: oklch(80.33% 0.0679 18.00);
  --color-mulberry-350: oklch(75.99% 0.0834 18.00);
  --color-mulberry-400: oklch(71.19% 0.1005 18.00);
  --color-mulberry-450: oklch(65.56% 0.1206 18.00);
  --color-mulberry-500: oklch(56.55% 0.1528 18.00);
  --color-mulberry-550: oklch(48.27% 0.1249 18.00);
  --color-mulberry-600: oklch(43.10% 0.1075 18.00);
  --color-mulberry-650: oklch(38.68% 0.0926 18.00);
  --color-mulberry-700: oklch(34.70% 0.0792 18.00);
  --color-mulberry-750: oklch(31.00% 0.0667 18.00);
  --color-mulberry-800: oklch(27.53% 0.0550 18.00);
  --color-mulberry-850: oklch(24.22% 0.0439 18.00);
  --color-mulberry-900: oklch(21.05% 0.0332 18.00);
  --color-mulberry-950: oklch(18.00% 0.0229 18.00);
  --color-mulberry-alpha-a4: oklch(56.55% 0.1528 18.00 / 0.04);
  --color-mulberry-alpha-a5: oklch(56.55% 0.1528 18.00 / 0.05);
  --color-mulberry-alpha-a6: oklch(56.55% 0.1528 18.00 / 0.06);
  --color-mulberry-alpha-a8: oklch(56.55% 0.1528 18.00 / 0.08);
  --color-mulberry-alpha-a10: oklch(56.55% 0.1528 18.00 / 0.1);
  --color-mulberry-alpha-a15: oklch(56.55% 0.1528 18.00 / 0.15);
  --color-mulberry-alpha-a20: oklch(56.55% 0.1528 18.00 / 0.2);
  --color-mulberry-alpha-a25: oklch(56.55% 0.1528 18.00 / 0.25);
  --color-mulberry-alpha-a30: oklch(56.55% 0.1528 18.00 / 0.3);
  --color-mulberry-alpha-a35: oklch(56.55% 0.1528 18.00 / 0.35);
  --color-mulberry-alpha-a40: oklch(56.55% 0.1528 18.00 / 0.4);
  --color-mulberry-alpha-a45: oklch(56.55% 0.1528 18.00 / 0.45);
  --color-mulberry-alpha-a50: oklch(56.55% 0.1528 18.00 / 0.5);
  --color-mulberry-alpha-a55: oklch(56.55% 0.1528 18.00 / 0.55);
  --color-mulberry-alpha-a60: oklch(56.55% 0.1528 18.00 / 0.6);
  --color-mulberry-alpha-a65: oklch(56.55% 0.1528 18.00 / 0.65);
  --color-mulberry-alpha-a70: oklch(56.55% 0.1528 18.00 / 0.7);
  --color-mulberry-alpha-a75: oklch(56.55% 0.1528 18.00 / 0.75);
  --color-mulberry-alpha-a80: oklch(56.55% 0.1528 18.00 / 0.8);
  --color-mulberry-alpha-a85: oklch(56.55% 0.1528 18.00 / 0.85);
  --color-mulberry-alpha-a90: oklch(56.55% 0.1528 18.00 / 0.9);
  --color-mulberry-alpha-a95: oklch(56.55% 0.1528 18.00 / 0.95);
  --color-mulberry-alpha-transparent: oklch(56.55% 0.1528 18.00 / 0);
  --color-fern-50: oklch(98.50% 0.0029 140.74);
  --color-fern-100: oklch(96.03% 0.0139 140.74);
  --color-fern-150: oklch(93.46% 0.0254 140.74);
  --color-fern-200: oklch(90.78% 0.0374 140.74);
  --color-fern-250: oklch(87.96% 0.0500 140.74);
  --color-fern-300: oklch(84.96% 0.0633 140.74);
  --color-fern-350: oklch(81.73% 0.0778 140.74);
  --color-fern-400: oklch(78.15% 0.0938 140.74);
  --color-fern-450: oklch(73.95% 0.1125 140.74);
  --color-fern-500: oklch(67.24% 0.1425 140.74);
  --color-fern-550: oklch(56.66% 0.1165 140.74);
  --color-fern-600: oklch(50.06% 0.1002 140.74);
  --color-fern-650: oklch(44.42% 0.0864 140.74);
  --color-fern-700: oklch(39.33% 0.0738 140.74);
  --color-fern-750: oklch(34.61% 0.0622 140.74);
  --color-fern-800: oklch(30.17% 0.0513 140.74);
  --color-fern-850: oklch(25.94% 0.0409 140.74);
  --color-fern-900: oklch(21.90% 0.0310 140.74);
  --color-fern-950: oklch(18.00% 0.0214 140.74);
  --color-fern-alpha-a4: oklch(67.24% 0.1425 140.74 / 0.04);
  --color-fern-alpha-a5: oklch(67.24% 0.1425 140.74 / 0.05);
  --color-fern-alpha-a6: oklch(67.24% 0.1425 140.74 / 0.06);
  --color-fern-alpha-a8: oklch(67.24% 0.1425 140.74 / 0.08);
  --color-fern-alpha-a10: oklch(67.24% 0.1425 140.74 / 0.1);
  --color-fern-alpha-a15: oklch(67.24% 0.1425 140.74 / 0.15);
  --color-fern-alpha-a20: oklch(67.24% 0.1425 140.74 / 0.2);
  --color-fern-alpha-a25: oklch(67.24% 0.1425 140.74 / 0.25);
  --color-fern-alpha-a30: oklch(67.24% 0.1425 140.74 / 0.3);
  --color-fern-alpha-a35: oklch(67.24% 0.1425 140.74 / 0.35);
  --color-fern-alpha-a40: oklch(67.24% 0.1425 140.74 / 0.4);
  --color-fern-alpha-a45: oklch(67.24% 0.1425 140.74 / 0.45);
  --color-fern-alpha-a50: oklch(67.24% 0.1425 140.74 / 0.5);
  --color-fern-alpha-a55: oklch(67.24% 0.1425 140.74 / 0.55);
  --color-fern-alpha-a60: oklch(67.24% 0.1425 140.74 / 0.6);
  --color-fern-alpha-a65: oklch(67.24% 0.1425 140.74 / 0.65);
  --color-fern-alpha-a70: oklch(67.24% 0.1425 140.74 / 0.7);
  --color-fern-alpha-a75: oklch(67.24% 0.1425 140.74 / 0.75);
  --color-fern-alpha-a80: oklch(67.24% 0.1425 140.74 / 0.8);
  --color-fern-alpha-a85: oklch(67.24% 0.1425 140.74 / 0.85);
  --color-fern-alpha-a90: oklch(67.24% 0.1425 140.74 / 0.9);
  --color-fern-alpha-a95: oklch(67.24% 0.1425 140.74 / 0.95);
  --color-fern-alpha-transparent: oklch(67.24% 0.1425 140.74 / 0);
  --color-copper-50: oklch(98.61% 0.0034 67.83);
  --color-copper-100: oklch(95.86% 0.0128 48.65);
  --color-copper-150: oklch(93.14% 0.0249 49.77);
  --color-copper-200: oklch(90.38% 0.0356 49.23);
  --color-copper-250: oklch(87.59% 0.048 51.55);
  --color-copper-300: oklch(84.32% 0.061 51.18);
  --color-copper-350: oklch(81.05% 0.0749 51.66);
  --color-copper-400: oklch(77.32% 0.0902 51.39);
  --color-copper-450: oklch(72.8% 0.1074 51.11);
  --color-copper-500: oklch(65.78% 0.1363 50.85);
  --color-copper-550: oklch(55.6% 0.1116 51.07);
  --color-copper-600: oklch(49.07% 0.096 51.1);
  --color-copper-650: oklch(43.65% 0.0823 50.91);
  --color-copper-700: oklch(38.69% 0.0707 50.2);
  --color-copper-750: oklch(34.28% 0.0597 51.31);
  --color-copper-800: oklch(29.89% 0.0495 52.02);
  --color-copper-850: oklch(25.74% 0.0386 53.23);
  --color-copper-900: oklch(21.75% 0.0296 51.57);
  --color-copper-950: oklch(18% 0.0208 52.08);
  --color-copper-alpha-a4: oklch(65.78% 0.1363 50.85 / 0.04);
  --color-copper-alpha-a5: oklch(65.78% 0.1363 50.85 / 0.05);
  --color-copper-alpha-a6: oklch(65.78% 0.1363 50.85 / 0.06);
  --color-copper-alpha-a8: oklch(65.78% 0.1363 50.85 / 0.08);
  --color-copper-alpha-a10: oklch(65.78% 0.1363 50.85 / 0.1);
  --color-copper-alpha-a15: oklch(65.78% 0.1363 50.85 / 0.15);
  --color-copper-alpha-a20: oklch(65.78% 0.1363 50.85 / 0.2);
  --color-copper-alpha-a25: oklch(65.78% 0.1363 50.85 / 0.25);
  --color-copper-alpha-a30: oklch(65.78% 0.1363 50.85 / 0.3);
  --color-copper-alpha-a35: oklch(65.78% 0.1363 50.85 / 0.35);
  --color-copper-alpha-a40: oklch(65.78% 0.1363 50.85 / 0.4);
  --color-copper-alpha-a45: oklch(65.78% 0.1363 50.85 / 0.45);
  --color-copper-alpha-a50: oklch(65.78% 0.1363 50.85 / 0.5);
  --color-copper-alpha-a55: oklch(65.78% 0.1363 50.85 / 0.55);
  --color-copper-alpha-a60: oklch(65.78% 0.1363 50.85 / 0.6);
  --color-copper-alpha-a65: oklch(65.78% 0.1363 50.85 / 0.65);
  --color-copper-alpha-a70: oklch(65.78% 0.1363 50.85 / 0.7);
  --color-copper-alpha-a75: oklch(65.78% 0.1363 50.85 / 0.75);
  --color-copper-alpha-a80: oklch(65.78% 0.1363 50.85 / 0.8);
  --color-copper-alpha-a85: oklch(65.78% 0.1363 50.85 / 0.85);
  --color-copper-alpha-a90: oklch(65.78% 0.1363 50.85 / 0.9);
  --color-copper-alpha-a95: oklch(65.78% 0.1363 50.85 / 0.95);
  --color-copper-alpha-transparent: oklch(65.78% 0.1363 50.85 / 0);
  --color-cobalt-50: oklch(98.46% 0.0017 247.73);
  --color-cobalt-100: oklch(95.46% 0.011 243.62);
  --color-cobalt-150: oklch(92.22% 0.0197 245.63);
  --color-cobalt-200: oklch(88.97% 0.0286 246.49);
  --color-cobalt-250: oklch(85.6% 0.0373 244.45);
  --color-cobalt-300: oklch(81.92% 0.0489 244.57);
  --color-cobalt-350: oklch(77.96% 0.059 244.63);
  --color-cobalt-400: oklch(73.37% 0.0722 245.66);
  --color-cobalt-450: oklch(68.32% 0.0856 245.03);
  --color-cobalt-500: oklch(60.02% 0.1089 245.45);
  --color-cobalt-550: oklch(51.1% 0.089 245.28);
  --color-cobalt-600: oklch(45.29% 0.0768 245.33);
  --color-cobalt-650: oklch(40.43% 0.067 246.4);
  --color-cobalt-700: oklch(36.07% 0.0559 246.15);
  --color-cobalt-750: oklch(32.24% 0.0474 244.16);
  --color-cobalt-800: oklch(28.47% 0.0386 245.14);
  --color-cobalt-850: oklch(24.87% 0.0307 243.58);
  --color-cobalt-900: oklch(21.26% 0.0231 246.29);
  --color-cobalt-950: oklch(17.89% 0.0156 248.7);
  --color-cobalt-alpha-a4: oklch(60.02% 0.1089 245.45 / 0.04);
  --color-cobalt-alpha-a5: oklch(60.02% 0.1089 245.45 / 0.05);
  --color-cobalt-alpha-a6: oklch(60.02% 0.1089 245.45 / 0.06);
  --color-cobalt-alpha-a8: oklch(60.02% 0.1089 245.45 / 0.08);
  --color-cobalt-alpha-a10: oklch(60.02% 0.1089 245.45 / 0.1);
  --color-cobalt-alpha-a15: oklch(60.02% 0.1089 245.45 / 0.15);
  --color-cobalt-alpha-a20: oklch(60.02% 0.1089 245.45 / 0.2);
  --color-cobalt-alpha-a25: oklch(60.02% 0.1089 245.45 / 0.25);
  --color-cobalt-alpha-a30: oklch(60.02% 0.1089 245.45 / 0.3);
  --color-cobalt-alpha-a35: oklch(60.02% 0.1089 245.45 / 0.35);
  --color-cobalt-alpha-a40: oklch(60.02% 0.1089 245.45 / 0.4);
  --color-cobalt-alpha-a45: oklch(60.02% 0.1089 245.45 / 0.45);
  --color-cobalt-alpha-a50: oklch(60.02% 0.1089 245.45 / 0.5);
  --color-cobalt-alpha-a55: oklch(60.02% 0.1089 245.45 / 0.55);
  --color-cobalt-alpha-a60: oklch(60.02% 0.1089 245.45 / 0.6);
  --color-cobalt-alpha-a65: oklch(60.02% 0.1089 245.45 / 0.65);
  --color-cobalt-alpha-a70: oklch(60.02% 0.1089 245.45 / 0.7);
  --color-cobalt-alpha-a75: oklch(60.02% 0.1089 245.45 / 0.75);
  --color-cobalt-alpha-a80: oklch(60.02% 0.1089 245.45 / 0.8);
  --color-cobalt-alpha-a85: oklch(60.02% 0.1089 245.45 / 0.85);
  --color-cobalt-alpha-a90: oklch(60.02% 0.1089 245.45 / 0.9);
  --color-cobalt-alpha-a95: oklch(60.02% 0.1089 245.45 / 0.95);
  --color-cobalt-alpha-transparent: oklch(60.02% 0.1089 245.45 / 0);
  --color-brass-50: oklch(99% 0.0102 91.56);
  --color-brass-100: oklch(97.06% 0.0174 91.56);
  --color-brass-150: oklch(94.99% 0.025 91.56);
  --color-brass-200: oklch(92.77% 0.0328 91.56);
  --color-brass-250: oklch(90.35% 0.0411 91.56);
  --color-brass-300: oklch(87.68% 0.0499 91.56);
  --color-brass-350: oklch(84.65% 0.0594 91.56);
  --color-brass-400: oklch(81.05% 0.0699 91.56);
  --color-brass-450: oklch(76.37% 0.0821 91.56);
  --color-brass-500: oklch(65.05% 0.1018 91.56);
  --color-brass-550: oklch(52.73% 0.0922 91.56);
  --color-brass-600: oklch(46.37% 0.0826 91.56);
  --color-brass-650: oklch(41.23% 0.073 91.56);
  --color-brass-700: oklch(36.74% 0.0634 91.56);
  --color-brass-750: oklch(32.69% 0.0537 91.56);
  --color-brass-800: oklch(28.94% 0.0441 91.56);
  --color-brass-850: oklch(25.45% 0.0345 91.56);
  --color-brass-900: oklch(22.14% 0.0249 91.56);
  --color-brass-950: oklch(19% 0.0153 91.56);
  --color-brass-alpha-a4: oklch(65.05% 0.1018 91.56 / 0.04);
  --color-brass-alpha-a5: oklch(65.05% 0.1018 91.56 / 0.05);
  --color-brass-alpha-a6: oklch(65.05% 0.1018 91.56 / 0.06);
  --color-brass-alpha-a8: oklch(65.05% 0.1018 91.56 / 0.08);
  --color-brass-alpha-a10: oklch(65.05% 0.1018 91.56 / 0.1);
  --color-brass-alpha-a15: oklch(65.05% 0.1018 91.56 / 0.15);
  --color-brass-alpha-a20: oklch(65.05% 0.1018 91.56 / 0.2);
  --color-brass-alpha-a25: oklch(65.05% 0.1018 91.56 / 0.25);
  --color-brass-alpha-a30: oklch(65.05% 0.1018 91.56 / 0.3);
  --color-brass-alpha-a35: oklch(65.05% 0.1018 91.56 / 0.35);
  --color-brass-alpha-a40: oklch(65.05% 0.1018 91.56 / 0.4);
  --color-brass-alpha-a45: oklch(65.05% 0.1018 91.56 / 0.45);
  --color-brass-alpha-a50: oklch(65.05% 0.1018 91.56 / 0.5);
  --color-brass-alpha-a55: oklch(65.05% 0.1018 91.56 / 0.55);
  --color-brass-alpha-a60: oklch(65.05% 0.1018 91.56 / 0.6);
  --color-brass-alpha-a65: oklch(65.05% 0.1018 91.56 / 0.65);
  --color-brass-alpha-a70: oklch(65.05% 0.1018 91.56 / 0.7);
  --color-brass-alpha-a75: oklch(65.05% 0.1018 91.56 / 0.75);
  --color-brass-alpha-a80: oklch(65.05% 0.1018 91.56 / 0.8);
  --color-brass-alpha-a85: oklch(65.05% 0.1018 91.56 / 0.85);
  --color-brass-alpha-a90: oklch(65.05% 0.1018 91.56 / 0.9);
  --color-brass-alpha-a95: oklch(65.05% 0.1018 91.56 / 0.95);
  --color-brass-alpha-transparent: oklch(65.05% 0.1018 91.56 / 0);
  --color-olive-50: oklch(98.8% 0.003 106.5);
  --color-olive-100: oklch(96.6% 0.005 106.5);
  --color-olive-150: oklch(94.78% 0.006 106.32);
  --color-olive-200: oklch(93% 0.007 106.5);
  --color-olive-250: oklch(90.48% 0.0088 106.44);
  --color-olive-300: oklch(88% 0.011 106.6);
  --color-olive-350: oklch(80.85% 0.016 106.69);
  --color-olive-400: oklch(73.7% 0.021 106.9);
  --color-olive-450: oklch(65.86% 0.026 107.08);
  --color-olive-500: oklch(58% 0.031 107.3);
  --color-olive-550: oklch(52.33% 0.028 107.3);
  --color-olive-600: oklch(46.6% 0.025 107.3);
  --color-olive-650: oklch(42.99% 0.0238 107.34);
  --color-olive-700: oklch(39.4% 0.023 107.4);
  --color-olive-750: oklch(33.98% 0.0193 107.36);
  --color-olive-800: oklch(28.6% 0.016 107.4);
  --color-olive-850: oklch(25.71% 0.0144 107.35);
  --color-olive-900: oklch(22.8% 0.013 107.4);
  --color-olive-950: oklch(15.3% 0.006 107.1);
  --color-olive-alpha-a4: oklch(58% 0.031 107.3 / 0.04);
  --color-olive-alpha-a5: oklch(58% 0.031 107.3 / 0.05);
  --color-olive-alpha-a6: oklch(58% 0.031 107.3 / 0.06);
  --color-olive-alpha-a8: oklch(58% 0.031 107.3 / 0.08);
  --color-olive-alpha-a10: oklch(58% 0.031 107.3 / 0.1);
  --color-olive-alpha-a15: oklch(58% 0.031 107.3 / 0.15);
  --color-olive-alpha-a20: oklch(58% 0.031 107.3 / 0.2);
  --color-olive-alpha-a25: oklch(58% 0.031 107.3 / 0.25);
  --color-olive-alpha-a30: oklch(58% 0.031 107.3 / 0.3);
  --color-olive-alpha-a35: oklch(58% 0.031 107.3 / 0.35);
  --color-olive-alpha-a40: oklch(58% 0.031 107.3 / 0.4);
  --color-olive-alpha-a45: oklch(58% 0.031 107.3 / 0.45);
  --color-olive-alpha-a50: oklch(58% 0.031 107.3 / 0.5);
  --color-olive-alpha-a55: oklch(58% 0.031 107.3 / 0.55);
  --color-olive-alpha-a60: oklch(58% 0.031 107.3 / 0.6);
  --color-olive-alpha-a65: oklch(58% 0.031 107.3 / 0.65);
  --color-olive-alpha-a70: oklch(58% 0.031 107.3 / 0.7);
  --color-olive-alpha-a75: oklch(58% 0.031 107.3 / 0.75);
  --color-olive-alpha-a80: oklch(58% 0.031 107.3 / 0.8);
  --color-olive-alpha-a85: oklch(58% 0.031 107.3 / 0.85);
  --color-olive-alpha-a90: oklch(58% 0.031 107.3 / 0.9);
  --color-olive-alpha-a95: oklch(58% 0.031 107.3 / 0.95);
  --color-olive-alpha-transparent: oklch(58% 0.031 107.3 / 0);
  --color-white-solid: oklch(100% 0 0);
  --color-white-transparent: oklch(100% 0 0 / 0);
  --color-white-alpha-a4: oklch(100% 0 0 / 0.04);
  --color-white-alpha-a5: oklch(100% 0 0 / 0.05);
  --color-white-alpha-a6: oklch(100% 0 0 / 0.06);
  --color-white-alpha-a8: oklch(100% 0 0 / 0.08);
  --color-white-alpha-a10: oklch(100% 0 0 / 0.1);
  --color-white-alpha-a15: oklch(100% 0 0 / 0.15);
  --color-white-alpha-a20: oklch(100% 0 0 / 0.2);
  --color-white-alpha-a25: oklch(100% 0 0 / 0.25);
  --color-white-alpha-a30: oklch(100% 0 0 / 0.3);
  --color-white-alpha-a35: oklch(100% 0 0 / 0.35);
  --color-white-alpha-a40: oklch(100% 0 0 / 0.4);
  --color-white-alpha-a45: oklch(100% 0 0 / 0.45);
  --color-white-alpha-a50: oklch(100% 0 0 / 0.5);
  --color-white-alpha-a55: oklch(100% 0 0 / 0.55);
  --color-white-alpha-a60: oklch(100% 0 0 / 0.6);
  --color-white-alpha-a65: oklch(100% 0 0 / 0.65);
  --color-white-alpha-a70: oklch(100% 0 0 / 0.7);
  --color-white-alpha-a75: oklch(100% 0 0 / 0.75);
  --color-white-alpha-a80: oklch(100% 0 0 / 0.8);
  --color-white-alpha-a85: oklch(100% 0 0 / 0.85);
  --color-white-alpha-a90: oklch(100% 0 0 / 0.9);
  --color-white-alpha-a95: oklch(100% 0 0 / 0.95);
  --color-black-solid: oklch(0% 0 0);
  --color-black-transparent: oklch(0% 0 0 / 0);
  --color-black-alpha-a4: oklch(0% 0 0 / 0.04);
  --color-black-alpha-a5: oklch(0% 0 0 / 0.05);
  --color-black-alpha-a6: oklch(0% 0 0 / 0.06);
  --color-black-alpha-a8: oklch(0% 0 0 / 0.08);
  --color-black-alpha-a10: oklch(0% 0 0 / 0.1);
  --color-black-alpha-a15: oklch(0% 0 0 / 0.15);
  --color-black-alpha-a20: oklch(0% 0 0 / 0.2);
  --color-black-alpha-a25: oklch(0% 0 0 / 0.25);
  --color-black-alpha-a30: oklch(0% 0 0 / 0.3);
  --color-black-alpha-a35: oklch(0% 0 0 / 0.35);
  --color-black-alpha-a40: oklch(0% 0 0 / 0.4);
  --color-black-alpha-a45: oklch(0% 0 0 / 0.45);
  --color-black-alpha-a50: oklch(0% 0 0 / 0.5);
  --color-black-alpha-a55: oklch(0% 0 0 / 0.55);
  --color-black-alpha-a60: oklch(0% 0 0 / 0.6);
  --color-black-alpha-a65: oklch(0% 0 0 / 0.65);
  --color-black-alpha-a70: oklch(0% 0 0 / 0.7);
  --color-black-alpha-a75: oklch(0% 0 0 / 0.75);
  --color-black-alpha-a80: oklch(0% 0 0 / 0.8);
  --color-black-alpha-a85: oklch(0% 0 0 / 0.85);
  --color-black-alpha-a90: oklch(0% 0 0 / 0.9);
  --color-black-alpha-a95: oklch(0% 0 0 / 0.95);
  --duration-fastest: 50ms;
  --duration-faster: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 400ms;
  --duration-slowest: 500ms;
  --opacity-disabled: 0.5;
  --opacity-placeholder: 0.5;
  --opacity-overlay: 0.7;
  --radius-2xs: 0.125rem;
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;
  --radius-5xl: 2.5rem;
  --radius-6xl: 3rem;
  --radius-7xl: 3.5rem;
  --radius-full: 624.9375rem;
  --shadow-2xs: 0px 1px 0px 0px oklch(0% 0 0 / 0.05);
  --shadow-xs: 0px 1px 2px 0px oklch(0% 0 0 / 0.05);
  --shadow-sm: 0px 1px 3px 0px oklch(0% 0 0 / 0.1), 0px 1px 2px -1px oklch(0% 0 0 / 0.1);
  --shadow-md: 0px 4px 6px -1px oklch(0% 0 0 / 0.1), 0px 2px 4px -2px oklch(0% 0 0 / 0.1);
  --shadow-lg: 0px 10px 15px -3px oklch(0% 0 0 / 0.1), 0px 4px 6px -4px oklch(0% 0 0 / 0.1);
  --shadow-xl: 0px 20px 25px -5px oklch(0% 0 0 / 0.1), 0px 8px 10px -6px oklch(0% 0 0 / 0.1);
  --shadow-2xl: 0px 25px 50px -12px oklch(0% 0 0 / 0.25);
  --size-1: 0.25rem;
  --size-2: 0.5rem;
  --size-3: 0.75rem;
  --size-4: 1rem;
  --size-5: 1.25rem;
  --size-6: 1.5rem;
  --size-7: 1.75rem;
  --size-8: 2rem;
  --size-9: 2.25rem;
  --size-10: 2.5rem;
  --size-11: 2.75rem;
  --size-12: 3rem;
  --size-14: 3.5rem;
  --size-16: 4rem;
  --size-20: 5rem;
  --size-24: 6rem;
  --size-28: 7rem;
  --size-30: 7.5rem;
  --size-32: 8rem;
  --size-36: 9rem;
  --size-40: 10rem;
  --size-44: 11rem;
  --size-48: 12rem;
  --size-50: 12.5rem;
  --size-52: 13rem;
  --size-56: 14rem;
  --size-60: 15rem;
  --size-64: 16rem;
  --size-72: 18rem;
  --size-80: 20rem;
  --size-96: 24rem;
  --size-px: 0.0625rem;
  --size-half: 0.125rem;
  --size-1_5: 0.375rem;
  --size-2_5: 0.625rem;
  --size-3_5: 0.875rem;
  --size-xs: 20rem;
  --size-sm: 24rem;
  --size-md: 28rem;
  --size-lg: 32rem;
  --size-xl: 36rem;
  --size-2xl: 42rem;
  --size-3xl: 48rem;
  --size-4xl: 56rem;
  --size-5xl: 64rem;
  --size-6xl: 72rem;
  --size-7xl: 80rem;
  --size-prose: 65ch;
  --size-full: 100%;
  --size-min: min-content;
  --size-max: max-content;
  --size-fit: fit-content;
  --size-dvh: 100dvh;
  --size-svh: 100svh;
  --size-lvh: 100lvh;
  --size-dvw: 100dvw;
  --size-svw: 100svw;
  --size-lvw: 100lvw;
  --size-vw: 100vw;
  --size-vh: 100vh;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-7: 1.75rem;
  --spacing-8: 2rem;
  --spacing-9: 2.25rem;
  --spacing-10: 2.5rem;
  --spacing-11: 2.75rem;
  --spacing-12: 3rem;
  --spacing-14: 3.5rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  --spacing-28: 7rem;
  --spacing-30: 7.5rem;
  --spacing-32: 8rem;
  --spacing-36: 9rem;
  --spacing-40: 10rem;
  --spacing-44: 11rem;
  --spacing-48: 12rem;
  --spacing-50: 12.5rem;
  --spacing-52: 13rem;
  --spacing-56: 14rem;
  --spacing-60: 15rem;
  --spacing-64: 16rem;
  --spacing-72: 18rem;
  --spacing-80: 20rem;
  --spacing-96: 24rem;
  --spacing-px: 0.0625rem;
  --spacing-half: 0.125rem;
  --spacing-1_5: 0.375rem;
  --spacing-2_5: 0.625rem;
  --spacing-3_5: 0.875rem;
  --font-text: Inter;
  --font-display: Inter Tight;
  --font-numeric: Inter Tight;
  --font-mono: Geist Mono;
  --font-brand: Playfair Display;
  --font-size-3xs: 0.625rem;
  --font-size-2xs: 0.6875rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 4rem;
  --font-size-7xl: 4.5rem;
  --font-size-8xl: 6rem;
  --font-size-9xl: 8rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.15;
  --line-height-snug: 1.2;
  --line-height-normal: 1.3;
  --line-height-relaxed: 1.4;
  --letter-spacing-tighter: -0.02em;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.01em;
  --letter-spacing-wider: 0.02em;
  --letter-spacing-widest: 0.04em;
  --letter-spacing-spacious: 0.1em;
  --z-index-hide: -1;
  --z-index-base: 0;
  --z-index-docked: 10;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1100;
  --z-index-banner: 1200;
  --z-index-overlay: 1300;
  --z-index-modal: 1400;
  --z-index-popover: 1500;
  --z-index-skipLink: 1600;
  --z-index-toast: 1700;
  --z-index-tooltip: 1800;
}

:root {
  --canvas: var(--color-brass-50);
  --card: var(--color-brass-alpha-a6);
  --input: var(--color-white-solid);
  --popover: var(--color-brass-50);
  --modal: var(--color-brass-50);
  --tooltip: var(--color-olive-900);
  --subtle: var(--color-brass-alpha-a6);
  --subtle-solid: var(--color-brass-100);
  --muted: var(--color-brass-alpha-a10);
  --muted-solid: var(--color-brass-150);
  --default: var(--color-brass-alpha-a15);
  --default-solid: var(--color-brass-200);
  --emphasized: var(--color-brass-alpha-a25);
  --emphasized-solid: var(--color-brass-300);
  --overlay-default: var(--color-black-alpha-a60);
  --overlay-muted: var(--color-black-alpha-a40);
  --overlay-subtle: var(--color-black-alpha-a30);
  --fg-default: var(--color-black-alpha-a80);
  --fg-muted: var(--color-black-alpha-a50);
  --fg-subtle: var(--color-black-alpha-a30);
  --fg-placeholder: var(--color-black-alpha-a40);
  --fg-disabled: var(--color-black-alpha-a30);
  --fg-link: var(--color-amber-600);
  --fg-inverted: var(--color-white-alpha-a90);
  --fg-onColor-default: var(--color-white-solid);
  --fg-onColor-muted: var(--color-white-alpha-a60);
  --fg-onColor-subtle: var(--color-white-alpha-a40);
  --fg-onColor-placeholder: var(--color-white-alpha-a30);
  --fg-onColor-disabled: var(--color-white-alpha-a30);
  --border-default: var(--color-brass-200);
  --border-subtle: var(--color-brass-150);
  --border-emphasized: var(--color-brass-250);
  --border-separator: var(--color-brass-alpha-a10);
  --border-focus: var(--color-gold-alpha-a50);
  --border-error: var(--color-mulberry-500);
  --primary-solid: var(--color-amber-600);
  --primary-subtle: var(--color-amber-alpha-a10);
  --primary-muted: var(--color-amber-alpha-a15);
  --primary-emphasized: var(--color-amber-200);
  --primary-fg: var(--color-amber-600);
  --primary-onColor: var(--color-amber-50);
  --primary-border: var(--color-amber-200);
  --accent-solid: var(--color-gold-500);
  --accent-subtle: var(--color-gold-alpha-a10);
  --accent-muted: var(--color-gold-alpha-a15);
  --accent-emphasized: var(--color-gold-200);
  --accent-fg: var(--color-gold-600);
  --accent-onColor: var(--color-gold-950);
  --accent-border: var(--color-gold-200);
  --neutral-solid: var(--color-brass-500);
  --neutral-subtle: var(--color-brass-alpha-a10);
  --neutral-muted: var(--color-brass-alpha-a15);
  --neutral-emphasized: var(--color-brass-200);
  --neutral-fg: var(--color-brass-600);
  --neutral-onColor: var(--color-white-solid);
  --neutral-border: var(--color-brass-200);
  --destructive-solid: var(--color-mulberry-500);
  --destructive-subtle: var(--color-mulberry-alpha-a10);
  --destructive-muted: var(--color-mulberry-alpha-a15);
  --destructive-emphasized: var(--color-mulberry-200);
  --destructive-fg: var(--color-mulberry-600);
  --destructive-onColor: var(--color-white-solid);
  --destructive-border: var(--color-mulberry-200);
  --constructive-solid: var(--color-fern-500);
  --constructive-subtle: var(--color-fern-alpha-a10);
  --constructive-muted: var(--color-fern-alpha-a15);
  --constructive-emphasized: var(--color-fern-200);
  --constructive-fg: var(--color-fern-600);
  --constructive-onColor: var(--color-white-solid);
  --constructive-border: var(--color-fern-200);
  --warning-solid: var(--color-copper-500);
  --warning-subtle: var(--color-copper-alpha-a10);
  --warning-muted: var(--color-copper-alpha-a15);
  --warning-emphasized: var(--color-copper-200);
  --warning-fg: var(--color-copper-600);
  --warning-onColor: var(--color-white-solid);
  --warning-border: var(--color-copper-200);
  --caution-solid: var(--color-gold-500);
  --caution-subtle: var(--color-gold-alpha-a10);
  --caution-muted: var(--color-gold-alpha-a15);
  --caution-emphasized: var(--color-gold-200);
  --caution-fg: var(--color-gold-600);
  --caution-onColor: var(--color-gold-950);
  --caution-border: var(--color-gold-200);
  --info-solid: var(--color-cobalt-500);
  --info-subtle: var(--color-cobalt-alpha-a10);
  --info-muted: var(--color-cobalt-alpha-a15);
  --info-emphasized: var(--color-cobalt-200);
  --info-fg: var(--color-cobalt-600);
  --info-onColor: var(--color-white-solid);
  --info-border: var(--color-cobalt-200);
  --chart-1: var(--color-amber-300);
  --chart-2: var(--color-amber-400);
  --chart-3: var(--color-amber-500);
  --chart-4: var(--color-amber-600);
  --chart-5: var(--color-amber-700);
  --chart-6: var(--color-amber-800);
  --chart-7: var(--color-amber-900);
  --brand-primary: var(--color-amber-600);
  --brand-accent: var(--color-gold-500);
  --brand-neutral: var(--color-brass-500);
}

.dark {
  --canvas: var(--color-olive-900);
  --card: var(--color-white-alpha-a6);
  --input: var(--color-olive-750);
  --popover: var(--color-olive-900);
  --modal: var(--color-olive-800);
  --tooltip: var(--color-olive-100);
  --subtle: var(--color-white-alpha-a6);
  --subtle-solid: var(--color-olive-850);
  --muted: var(--color-white-alpha-a10);
  --muted-solid: var(--color-olive-800);
  --default: var(--color-white-alpha-a15);
  --default-solid: var(--color-olive-750);
  --emphasized: var(--color-white-alpha-a25);
  --emphasized-solid: var(--color-olive-700);
  --overlay-default: var(--color-black-alpha-a60);
  --overlay-muted: var(--color-black-alpha-a40);
  --overlay-subtle: var(--color-black-alpha-a30);
  --fg-default: var(--color-white-alpha-a90);
  --fg-muted: var(--color-white-alpha-a50);
  --fg-subtle: var(--color-white-alpha-a30);
  --fg-placeholder: var(--color-white-alpha-a40);
  --fg-disabled: var(--color-white-alpha-a30);
  --fg-link: var(--color-amber-500);
  --fg-inverted: var(--color-black-alpha-a80);
  --fg-onColor-default: var(--color-white-solid);
  --fg-onColor-muted: var(--color-white-alpha-a60);
  --fg-onColor-subtle: var(--color-white-alpha-a40);
  --fg-onColor-placeholder: var(--color-white-alpha-a30);
  --fg-onColor-disabled: var(--color-white-alpha-a30);
  --border-default: var(--color-olive-700);
  --border-subtle: var(--color-olive-750);
  --border-emphasized: var(--color-olive-650);
  --border-separator: var(--color-white-alpha-a10);
  --border-focus: var(--color-gold-alpha-a75);
  --border-error: var(--color-mulberry-400);
  --primary-solid: var(--color-amber-500);
  --primary-subtle: var(--color-amber-alpha-a20);
  --primary-muted: var(--color-amber-alpha-a30);
  --primary-emphasized: var(--color-amber-800);
  --primary-fg: var(--color-amber-300);
  --primary-onColor: var(--color-amber-950);
  --primary-border: var(--color-amber-800);
  --accent-solid: var(--color-gold-500);
  --accent-subtle: var(--color-gold-alpha-a20);
  --accent-muted: var(--color-gold-alpha-a30);
  --accent-emphasized: var(--color-gold-800);
  --accent-fg: var(--color-gold-300);
  --accent-onColor: var(--color-gold-950);
  --accent-border: var(--color-gold-800);
  --neutral-solid: var(--color-olive-300);
  --neutral-subtle: var(--color-olive-alpha-a20);
  --neutral-muted: var(--color-olive-alpha-a30);
  --neutral-emphasized: var(--color-olive-700);
  --neutral-fg: var(--color-brass-300);
  --neutral-onColor: var(--color-olive-950);
  --neutral-border: var(--color-olive-700);
  --destructive-solid: var(--color-mulberry-500);
  --destructive-subtle: var(--color-mulberry-alpha-a20);
  --destructive-muted: var(--color-mulberry-alpha-a30);
  --destructive-emphasized: var(--color-mulberry-800);
  --destructive-fg: var(--color-mulberry-300);
  --destructive-onColor: var(--color-white-solid);
  --destructive-border: var(--color-mulberry-800);
  --constructive-solid: var(--color-fern-500);
  --constructive-subtle: var(--color-fern-alpha-a20);
  --constructive-muted: var(--color-fern-alpha-a30);
  --constructive-emphasized: var(--color-fern-800);
  --constructive-fg: var(--color-fern-300);
  --constructive-onColor: var(--color-white-solid);
  --constructive-border: var(--color-fern-800);
  --warning-solid: var(--color-copper-500);
  --warning-subtle: var(--color-copper-alpha-a20);
  --warning-muted: var(--color-copper-alpha-a30);
  --warning-emphasized: var(--color-copper-800);
  --warning-fg: var(--color-copper-300);
  --warning-onColor: var(--color-white-solid);
  --warning-border: var(--color-copper-800);
  --caution-solid: var(--color-gold-500);
  --caution-subtle: var(--color-gold-alpha-a20);
  --caution-muted: var(--color-gold-alpha-a30);
  --caution-emphasized: var(--color-gold-800);
  --caution-fg: var(--color-gold-300);
  --caution-onColor: var(--color-gold-950);
  --caution-border: var(--color-gold-800);
  --info-solid: var(--color-cobalt-500);
  --info-subtle: var(--color-cobalt-alpha-a20);
  --info-muted: var(--color-cobalt-alpha-a30);
  --info-emphasized: var(--color-cobalt-800);
  --info-fg: var(--color-cobalt-300);
  --info-onColor: var(--color-white-solid);
  --info-border: var(--color-cobalt-800);
  --chart-1: var(--color-gold-700);
  --chart-2: var(--color-gold-600);
  --chart-3: var(--color-gold-500);
  --chart-4: var(--color-gold-400);
  --chart-5: var(--color-gold-300);
  --chart-6: var(--color-gold-200);
  --chart-7: var(--color-gold-100);
  --brand-primary: var(--color-amber-600);
  --brand-accent: var(--color-gold-500);
  --brand-neutral: var(--color-brass-500);
}

:root {
  /*
   * Font-family aliases — the one justified local indirection: each carries a
   * CSS fallback stack that a single-family package token can't. The primary
   * family is the package token; the rest of the stack is the website's fallback.
   */
  --font-body: var(--font-display), system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: var(--font-brand), Georgia, 'Times New Roman', serif;
  /*
   * Name collision: the package family token is ALSO `--font-mono`, so a
   * `var(--font-mono)` self-reference here would be a cyclic (invalid) value.
   * The package value is `Geist Mono`; inline it as the primary family so the
   * fallback stack is preserved and the 62 site consumers stay unchanged.
   */
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

:root {
  /*
   * Foundation radius scale is now supplied by @reva/design-tokens
   * (--radius-2xs … --radius-7xl, --radius-full). Only website-local radius
   * COMPOSITIONS live here, re-pointed at package radius names BY VALUE.
   * (The package inserts a 2xl=20px rung the site lacks, so the old site→package
   * map is non-uniform: old 2xl=16px → package xl, NOT package 2xl=20px.)
   */
  --radius-square: 0;

  --radius-section-card-lg: var(--radius-4xl); /* 32px */
  --radius-section-card-md: var(--radius-3xl); /* 24px */

  /* Squircle: original fallbacks; enhanced ~midway between first ship (+1 step) and max bump */
  --squircle-sm-fallback: var(--radius-xs); /* 4px */
  --squircle-sm-enhanced: var(--radius-md); /* 8px */
  --squircle-md-fallback: var(--radius-sm); /* 6px */
  --squircle-md-enhanced: var(--radius-lg); /* 12px */
  --squircle-lg-fallback: var(--radius-md); /* 8px */
  --squircle-lg-enhanced: var(--radius-xl); /* 16px */
  --squircle-xl-fallback: var(--radius-lg); /* 12px */
  --squircle-xl-enhanced: var(--radius-3xl); /* 24px */
  --squircle-2xl-fallback: var(--radius-xl); /* 16px */
  --squircle-2xl-enhanced: var(--radius-4xl); /* 32px */
  --squircle-3xl-fallback: var(--radius-3xl); /* 24px */
  --squircle-3xl-enhanced: var(--radius-5xl); /* 40px */
  --squircle-section-lg-fallback: var(--radius-section-card-lg);
  --squircle-section-lg-enhanced: var(--radius-6xl); /* 48px */
}

:root {
  /* Website-local editorial shadows — no package equivalent (the filter variant
     can't be a shadow token at all; it's a `filter`). Namespaced --site-* for clarity. */
  --site-shadow-card:
    0 12px 60px 0 var(--color-black-alpha-a20), 0 12px 32px -16px var(--color-black-alpha-a30);
  /* drop-shadow follows squircle outline; box-shadow does not (rectangular halo at corners) */
  --site-filter-shadow-card: drop-shadow(0 12px 32px var(--color-black-alpha-a30))
    drop-shadow(0 12px 60px var(--color-black-alpha-a20));
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--fg-default);
  background: linear-gradient(to bottom, var(--color-brass-150), var(--canvas))
    no-repeat;
  background-size: 100% 100vh;
  background-color: var(--canvas);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/*
 * Ambient corner highlights — two large radial gradients pinned to the
 * bottom-left and bottom-right (both amber) of the viewport.
 *
 * Hidden below --screen-md; from md upward the circle scales fluidly
 * with the viewport, capped at 1280px (matches the Figma spec).
 */

body::before,
body::after {
  --highlight-size: min(100vw, 1600px);

  content: '';
  display: none;
  position: fixed;
  width: var(--highlight-size);
  height: var(--highlight-size);
  bottom: calc(var(--highlight-size) * -0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

@media (min-width: 48rem) {

body::before,
body::after {
    display: block
}
  }

body::before {
  left: calc(var(--highlight-size) / -2);
  background: radial-gradient(
    circle,
    var(--color-amber-alpha-a15) 0%,
    var(--color-amber-alpha-transparent) 70%
  );
}

body::after {
  right: calc(var(--highlight-size) / -2);
  background: radial-gradient(
    circle,
    var(--color-amber-alpha-a15) 0%,
    var(--color-amber-alpha-transparent) 70%
  );
}

main {
  flex: 1;
}

a {
  color: var(--primary-solid);
  text-decoration-skip-ink: auto;
}

a:hover {
    color: var(--color-amber-700);
  }

:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
}

::selection {
  background-color: var(--color-gold-alpha-a30);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--spacing-4);
  z-index: 1000;
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--primary-solid);
  color: #ffffff;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
}

.skip-link:focus-visible {
    top: 0;
  }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}

h1 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tighter);
  font-size: var(--font-size-4xl);
}

@media (min-width: 64rem) {

h1 {
    font-size: var(--font-size-6xl)
}
  }

h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tighter);
  font-size: var(--font-size-3xl);
}

@media (min-width: 64rem) {

h2 {
    font-size: var(--font-size-5xl)
}
  }

h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tighter);
}

h4 {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}

h5 {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wide);
}

h6 {
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-wider);
}

p {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wider);
}

p.lead {
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  font-size: var(--font-size-xl);
}

@media (min-width: 64rem) {

p.lead {
    font-size: var(--font-size-2xl)
}
  }

.overline {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-spacious);
  line-height: 16px;
}

strong {
  font-weight: var(--font-weight-semibold);
}

small {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-widest);
}

code {
  font-family: var(--font-mono);
  font-size: inherit;
  font-weight: var(--font-weight-regular);
  line-height: inherit;
  letter-spacing: var(--letter-spacing-normal);
}

.container {
  width: 100%;
  max-width: 70rem;
  /* 1120px */
  margin-inline: auto;
  padding-inline: var(--spacing-4);
  transition: max-width 0.3s ease-in-out;
}

@media (min-width: 48rem) {

.container {
    padding-inline: var(--spacing-6)
}
  }

@media (min-width: 64rem) {

.container {
    padding-inline: var(--spacing-8)
}
  }

@media (min-width: 80rem) {

.container {
    max-width: 75rem
    /* 1200px */
}
  }

@media (min-width: 96rem) {

.container {
    max-width: 90rem
    /* 1440px */
}
  }

.vstack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.vstack--snug {
  gap: var(--spacing-1);
}

.vstack--tight {
  gap: var(--spacing-2);
}

.vstack--compact {
  gap: var(--spacing-3);
}

.vstack--default {
  gap: var(--spacing-4);
}

.vstack--loose {
  gap: var(--spacing-6);
}

.vstack--wide {
  gap: var(--spacing-8);
}

.vstack--spacious {
  gap: var(--spacing-10);
}

.vstack--relaxed {
  gap: var(--spacing-20);
}

.vstack--center {
  align-items: center;
}

.vstack--stretch {
  align-items: stretch;
}

.hstack {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-4);
}

.hstack--snug {
  gap: var(--spacing-1);
}

.hstack--tight {
  gap: var(--spacing-2);
}

.hstack--compact {
  gap: var(--spacing-3);
}

.hstack--default {
  gap: var(--spacing-4);
}

.hstack--loose {
  gap: var(--spacing-6);
}

.hstack--wide {
  gap: var(--spacing-8);
}

.hstack--spacious {
  gap: var(--spacing-10);
}

.hstack--relaxed {
  gap: var(--spacing-20);
}

.hstack--center {
  align-items: center;
}

.hstack--stretch {
  align-items: stretch;
}

.hstack--between {
  justify-content: space-between;
}

/* --- align-self (flex/grid) --- */

.self-auto {
  align-self: auto;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-stretch {
  align-self: stretch;
}

.button {
  /* --- local tokens (min-height) --- */
  --button-size-sm: 2rem;
  /* 32px */
  --button-size-md: 2.5rem;
  /* 40px */
  --button-size-lg: 3rem;
  /* 48px */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: var(--letter-spacing-wider);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    opacity 0.2s ease;
}

.button[aria-disabled='true'] {
    opacity: 0.3;
    pointer-events: none;
  }

.button[aria-busy='true'] {
    cursor: wait;
    opacity: 0.7;
  }

/* --- variants --- */

.button--solid {
  /* Subtle glass: brand amber darkened ~8% (hue-preserving, in oklab),
     then made 10% translucent — over the porcelain canvas the blend lands
     back on brand-primary's depth, so the white label text keeps ~4.4:1
     contrast while the surface is genuinely translucent. Straight brand-primary
     @90% washes out (3.76:1), and the --color-amber-alpha-* scale is
     built on a lighter base entirely. The inset pair fakes light at the
     top-left corner — a crisp 1px rim plus a soft bloom. The border tint
     matters: inset shadows start at the padding edge, so the base 1px
     transparent border would otherwise show as a dark unlit band before
     the glow (the hero CTA avoids it the same way). A quieter cousin of
     the hero CTA's frosted treatment (sections/hero.css), which still
     overrides this. First declaration is the no-color-mix fallback. */
  border-color: var(--color-white-alpha-a10);
  background-color: var(--brand-primary);
  background-color: color-mix(
    in srgb,
    color-mix(in oklab, var(--brand-primary) 92%, var(--color-black-solid)) 90%,
    transparent
  );
  color: var(--fg-onColor-default);
  box-shadow:
    inset 1px 1px 0 0 var(--color-white-alpha-a20),
    inset 4px 4px 8px -4px var(--color-white-alpha-a30);
}

.button--solid:hover {
    color: var(--fg-onColor-default);
    background-color: var(--color-amber-alpha-a90);
  }

.button--solid:active {
    color: var(--fg-onColor-default);
    background-color: var(--color-amber-alpha-a95);
  }

.button--solid:focus-visible {
    color: var(--fg-onColor-default);
  }

.button--subtle {
  background-color: var(--color-amber-alpha-a10);
  color: var(--brand-primary);
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

.button--subtle:hover,
  .button--subtle:focus-visible,
  .button--subtle:active {
    background-color: var(--color-amber-alpha-a15);
    color: var(--brand-primary);
  }

.button--ghost {
  background-color: var(--color-black-transparent);
  color: var(--fg-muted);
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

.button--ghost:hover,
  .button--ghost:focus-visible {
    background-color: var(--color-brass-alpha-a5);
    color: var(--fg-muted);
  }

.button--ghost:active {
    background-color: var(--color-brass-alpha-a10);
    color: var(--fg-muted);
  }

/* Active page state — applied by the header script when the link's
     href matches the current pathname. Stronger fill than the rest /
     hover / press states so it reads as "selected". Text stays muted
     (inherited from .button--ghost). */

.button--ghost.is-current {
    background-color: var(--color-brass-alpha-a10);
  }

.button--ghost.is-current:hover,
    .button--ghost.is-current:focus-visible {
      background-color: var(--color-brass-alpha-a15);
    }

/* --- sizes --- */

/* Squircle rungs ride one step ABOVE the button's nominal size (sm→md,
   md→lg, lg→xl) — a deliberate rounder-than-default stance for buttons;
   inputs/checkboxes keep their matching rung. The hero CTA goes further
   still (2xl, sections/hero.css). */

.button--sm {
  min-height: var(--button-size-sm);
  font-size: var(--font-size-xs);
  padding-inline: var(--spacing-2);
  --_squircle-fallback: var(--squircle-md-fallback);
  --_squircle-enhanced: var(--squircle-md-enhanced);
}

.button--md {
  min-height: var(--button-size-md);
  font-size: var(--font-size-sm);
  padding-inline: var(--spacing-4);
  --_squircle-fallback: var(--squircle-lg-fallback);
  --_squircle-enhanced: var(--squircle-lg-enhanced);
}

.button--lg {
  min-height: var(--button-size-lg);
  font-size: var(--font-size-md);
  padding-inline: var(--spacing-6);
  --_squircle-fallback: var(--squircle-xl-fallback);
  --_squircle-enhanced: var(--squircle-xl-enhanced);
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
}

.checkbox__input {
    appearance: none;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    background-color: var(--color-white-solid);
    border: 1px solid var(--border-default);
    --_squircle-fallback: var(--squircle-sm-fallback);
    --_squircle-enhanced: var(--squircle-sm-enhanced);
    cursor: pointer;
    transition:
      background-color 0.15s ease,
      border-color 0.15s ease;
  }

.checkbox__input:checked {
      background-color: var(--brand-primary);
      border-color: var(--brand-primary);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ffffff'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 0.875rem 0.875rem;
    }

.checkbox__input:focus-visible {
      outline: 2px solid var(--accent-solid);
      outline-offset: 2px;
    }

.checkbox__input:disabled {
      cursor: not-allowed;
      opacity: 0.6;
    }

.checkbox__label {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-wider);
    color: var(--fg-default);
    user-select: none;
  }

.checkbox:has(.checkbox__input:disabled) {
    cursor: not-allowed;
  }

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  width: 100%;
}

.divider__line {
    flex: 1;
    min-width: 0;
    height: 1px;
    background-color: var(--border-default);
  }

.divider__text {
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    font-style: italic;
    line-height: var(--line-height-tight);
    color: var(--fg-default);
  }

.divider__text:empty {
    display: none;
  }

@keyframes error-alert-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.error-alert {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  width: 100%;
  min-height: 2.5rem;
  padding: var(--spacing-2) var(--spacing-3);
  background-color: var(--destructive-solid);
  color: var(--fg-onColor-default);
  --_squircle-fallback: var(--squircle-md-fallback);
  --_squircle-enhanced: var(--squircle-md-enhanced);
  animation: error-alert-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.error-alert__icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
  }

.error-alert__message {
    flex: 1;
    min-width: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-wider);
    color: inherit;
  }

.inline-form-wrapper {
  width: 100%;
  max-width: 25rem; /* 400px — single source of truth for form width */
}

.inline-form {
  display: flex;
  align-items: center;
  width: 100%;
  height: 4rem; /* 64px */
  padding: var(--spacing-2); /* 8px */
  background-color: var(--color-white-alpha-a50);
  border: 1px solid var(--color-black-alpha-a10);
  border-radius: var(--radius-full);
  transition:
    background-color 0.2s ease,
    outline-color 0.2s ease;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.inline-form__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding-inline: var(--spacing-4); /* 16px */
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wider);
    color: var(--fg-default);
    background: transparent;
    border: none;
  }

.inline-form__input::placeholder {
      color: var(--fg-placeholder);
    }

.inline-form__input:focus {
      outline: none;
    }

/* focus-visible ring + brighter fill on outer form when input is focused */

.inline-form:focus-within {
    background-color: var(--color-white-alpha-a80);
    outline-color: var(--accent-solid);
  }

.inline-form__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem; /* 48px */
    height: 3rem; /* 48px */
    padding: 0;
    color: var(--brand-primary);
    background-color: var(--color-amber-alpha-a5);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

.inline-form__submit:hover {
      background-color: var(--color-amber-alpha-a10);
    }

.inline-form__submit:active {
      background-color: var(--color-amber-alpha-a15);
    }

.inline-form__submit:focus-visible {
      outline: 2px solid var(--accent-solid);
      outline-offset: 2px;
    }

.inline-form__submit[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

.inline-form__icon {
    width: 1.5rem; /* 24px */
    height: 1.5rem;
  }

.inline-form__message {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 4rem;
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wider);
    color: var(--constructive-fg);
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-wider);
  }

.inline-form__message--error {
      color: var(--destructive-fg);
    }

.text-input {
  --text-input-size-sm: 2rem;
  --text-input-size-md: 2.5rem;
  --text-input-size-lg: 3rem;

  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  width: 100%;

  /* --- sizes --- */
}

.text-input__label {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-wider);
    color: var(--fg-default);
  }

.text-input__field {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--color-white-solid);
    border: 1px solid var(--border-default);
    --_squircle-fallback: var(--squircle-md-fallback);
    --_squircle-enhanced: var(--squircle-md-enhanced);
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  }

.text-input__field:focus-within {
      border-color: var(--accent-solid);
      box-shadow: 0 0 0 2px var(--color-gold-alpha-a30);
    }

.text-input__field:has(.text-input__input[aria-invalid='true']) {
      border-color: var(--destructive-solid);
    }

.text-input__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding-inline: var(--spacing-3);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-wider);
    color: var(--fg-default);
    background: transparent;
    border: none;
  }

.text-input__input::placeholder {
      color: var(--fg-placeholder);
    }

.text-input__input:focus {
      outline: none;
    }

.text-input__input:disabled {
      cursor: not-allowed;
      opacity: 0.6;
    }

.text-input__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    margin-right: var(--spacing-1);
    padding: 0;
    color: var(--fg-muted);
    background: transparent;
    border: none;
    --_squircle-fallback: var(--squircle-sm-fallback);
    --_squircle-enhanced: var(--squircle-sm-enhanced);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

.text-input__toggle:hover {
      background-color: var(--color-black-alpha-a4);
      color: var(--fg-default);
    }

.text-input__toggle:focus-visible {
      outline: 2px solid var(--accent-solid);
      outline-offset: 1px;
    }

.text-input__toggle-icon {
    width: 1rem;
    height: 1rem;
  }

.text-input--sm .text-input__field {
    height: var(--text-input-size-sm);
  }

.text-input--md .text-input__field {
    height: var(--text-input-size-md);
  }

.text-input--lg .text-input__field {
    height: var(--text-input-size-lg);
  }

/* Bar height matches logo / menu toggle; hero subtracts this from 100dvh (see hero.css). */

:root {
  --site-header-bar-size: 2.5rem;
  --site-header-block-size: calc(var(--spacing-4) * 2 + var(--site-header-bar-size));
}

@media (min-width: 48rem) {

:root {
    --site-header-block-size: calc(var(--spacing-6) * 2 + var(--site-header-bar-size))
}
  }

@media (min-width: 64rem) {

:root {
    --site-header-block-size: calc(var(--spacing-8) * 2 + var(--site-header-bar-size))
}
  }

.site-header {
  position: relative;
  z-index: 1001;
  padding-block: var(--spacing-4);
}

@media (min-width: 48rem) {

.site-header {
    padding-block: var(--spacing-6)
}
  }

@media (min-width: 64rem) {

.site-header {
    padding-block: var(--spacing-8)
}
  }

.site-header__bar {
  width: 100%;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
}

.site-header__logo img {
    display: block;
  }

/* Desktop inline nav — visible from sm (480px) */

.site-header__nav--desktop {
  display: none;
}

@media (min-width: 30rem) {

.site-header__nav--desktop {
    display: flex
}
  }

/* Auth and other minimal chrome — desktop nav hidden; mobile menu unchanged. */

@media (min-width: 30rem) {

.site-header[data-nav-hidden='true'] .site-header__nav--desktop {
    display: none
}
  }

/* Center logo from sm+ only (mobile keeps logo + hamburger at the edges). */

@media (min-width: 30rem) {

.site-header[data-logo-center='true'] .site-header__bar {
    justify-content: center
}
  }

/* Hamburger — below sm only */

.site-header__menu-toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--fg-default);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.site-header__menu-toggle:hover {
    background-color: var(--color-brass-alpha-a5);
  }

.site-header__menu-toggle:focus-visible {
    outline: 2px solid var(--accent-solid);
    outline-offset: 2px;
  }

@media (min-width: 30rem) {

.site-header__menu-toggle {
    display: none
}
  }

/* Origin UI–style hamburger → X (https://21st.dev/community/components/originui/button/open-close-menu-button) */

.site-header__menu-icon {
  display: block;
  pointer-events: none;
}

.site-header__menu-icon-path {
  transform-origin: center;
  transform-box: fill-box;
}

.site-header__menu-icon-path--top {
  transform: translateY(-7px);
  transition: transform 0.3s cubic-bezier(0.5, 0.85, 0.25, 1.1);
}

.site-header__menu-icon-path--middle {
  transition: transform 0.3s cubic-bezier(0.5, 0.85, 0.25, 1.8);
}

.site-header__menu-icon-path--bottom {
  transform: translateY(7px);
  transition: transform 0.3s cubic-bezier(0.5, 0.85, 0.25, 1.1);
}

.site-header__menu-toggle[aria-expanded='true'] .site-header__menu-icon-path--top {
  transform: translateY(0) rotate(315deg);
}

.site-header__menu-toggle[aria-expanded='true'] .site-header__menu-icon-path--middle {
  transform: rotate(45deg);
}

.site-header__menu-toggle[aria-expanded='true'] .site-header__menu-icon-path--bottom {
  transform: translateY(0) rotate(135deg);
}

@media (prefers-reduced-motion: reduce) {
  .site-header__menu-icon-path--top,
  .site-header__menu-icon-path--middle,
  .site-header__menu-icon-path--bottom {
    transition: none;
  }
}

/* Full-screen mobile menu */

.site-header__overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding: calc(var(--spacing-6) + env(safe-area-inset-top, 0px)) var(--spacing-6)
    calc(var(--spacing-8) + env(safe-area-inset-bottom, 0px));
  background-color: var(--canvas);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.site-header__overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

@media (min-width: 30rem) {

.site-header__overlay {
    display: none
}
  }

.site-header__nav--mobile {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: var(--spacing-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__mobile-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding-block: var(--spacing-4);
  font-family: var(--font-heading);
  font-size: clamp(2rem, 10vw, var(--font-size-4xl));
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
  letter-spacing: var(--letter-spacing-tighter);
  color: var(--fg-default);
  text-align: center;
  text-decoration: none;
}

/* Override globals/base.css `a:hover` — touch menu, no hover affordance. */

.site-header__mobile-link:hover {
    color: var(--fg-default);
  }

.site-header__mobile-link.is-current {
    color: var(--brand-primary);
  }

.site-header__mobile-link.is-current:hover {
      color: var(--brand-primary);
    }

.site-header__mobile-link--signin {
  color: var(--brand-primary);
}

.site-header__mobile-link--signin:hover {
    color: var(--brand-primary);
  }

body.site-header--menu-open {
  overflow: hidden;
}

.hero {
  /* Mobile: 8px inset frame on the sides and bottom so the card reads as
     embedded; top stays flush with the nav so the header reads as visually
     connected to the hero. From md+ the frame widens to the standard
     porcelain gutter. */
  padding: 0 var(--spacing-2) var(--spacing-2);
}

@media (min-width: 48rem) {

.hero {
    padding: 0 var(--spacing-6) var(--spacing-6)
}
  }

@media (min-width: 64rem) {

.hero {
    padding: 0 var(--spacing-8) var(--spacing-8)
}
  }

.hero {

  display: grid;
}

.hero__skeleton,
  .hero__card {
    grid-area: 1 / 1;
    width: 100%;
    border-radius: var(--radius-md);
    min-height: calc(100dvh - var(--site-header-block-size) - var(--spacing-2));
  }

@media (min-width: 48rem) {

.hero__skeleton,
  .hero__card {
      border-radius: 1.5rem;
      min-height: calc(100dvh - var(--site-header-block-size) - var(--spacing-6))
  }
    }

@media (min-width: 64rem) {

.hero__skeleton,
  .hero__card {
      min-height: calc(100dvh - var(--site-header-block-size) - var(--spacing-8))
  }
    }

.hero__skeleton {
    position: relative;
    overflow: hidden;
    background-color: var(--muted);
  }

.hero__card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    isolation: isolate;
    /* Burgundy fallback (browsers without WebGL2 / image disabled) +
       the static a-01 JPG that the WebGL canvas paints over. Keeping
       the JPG means: pre-canvas paint, no-WebGL clients, and the
       moment before the shader compiles all show a brand-on hero. */
    background-color: var(--color-brass-500);
    background-image: url("/images/mesh-gradients/a-01.jpg");
    background-size: cover;
    background-position: center;
    /* Origin for the scale-in entrance animation (see motion JS). */
    transform-origin: center;
    /* Vertical-only padding: horizontal alignment comes from the inner
       <x-ui.container>, so the text block lines up with sections below. */
    padding-block: var(--spacing-16);
    display: flex;
    align-items: center;
  }

@media (min-width: 48rem) {

.hero__card {
      padding-block: var(--spacing-20)
  }
    }

@media (min-width: 64rem) {

.hero__card {
      padding-block: var(--spacing-30)
  }
    }

/* WebGL mesh-gradient canvas. Sits beneath the hero text but above the
     JPG fallback. Hidden until the renderer has resized + painted at
     least one frame (data-ready), then revealed. If WebGL2 is missing
     or the shader fails, this stays hidden and the JPG shows through. */

.hero__mesh {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* Match the card's standard border-radius (no corner-shape on canvas). */
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
  }

.hero__mesh[data-ready="true"] {
      opacity: 1;
      /* Fade in while the card is still hidden (opacity 0) so the gradient
         is fully painted before the panel entrance begins. */
      animation: hero-mesh-reveal 0.9s ease-out both;
    }

@media (prefers-reduced-motion: reduce) {
      .hero__mesh[data-ready="true"] {
        animation: none;
      }
    }

/* Hero content must paint on top of the canvas. */

.hero__card > .container {
    position: relative;
    z-index: 1;
  }

.hero__block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
    width: 100%;
    max-width: 35rem;
    /* 560px */
  }

@media (min-width: 48rem) {

.hero__block {
      gap: var(--spacing-16)
      /* 64px */
  }
    }

@media (min-width: 96rem) {

.hero__block {
      max-width: 45rem
      /* 720px — keeps the business-owner headline on two lines */
  }
    }

.hero__intro {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
  }

.hero__pill {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: var(--spacing-2);
    height: 24px;
    padding-inline: var(--spacing-3);
    border-radius: var(--radius-full);
    background-color: var(--color-white-alpha-a15);
    backdrop-filter: blur(4px);
    color: var(--fg-onColor-default);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-wider);
    transition: background-color 0.2s ease;
  }

.hero__pill:hover,
    .hero__pill:focus-visible,
    .hero__pill:active {
      color: var(--fg-onColor-default);
      background-color: var(--color-white-alpha-a25);
    }

.hero__pill-prefix {
    font-weight: var(--font-weight-medium);
  }

.hero__pill-suffix {
    font-weight: var(--font-weight-semibold);
  }

.hero__pill-separator {
    display: inline-block;
    width: 1px;
    height: 12px;
    background-color: var(--color-white-alpha-a30);
  }

@media not (min-width: 30rem) {
    .hero__pill-separator,
    .hero__pill-suffix-label {
      display: none;
    }
  }

.hero__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.1;
    letter-spacing: var(--letter-spacing-tighter);
    color: var(--fg-onColor-default);
  }

@media (min-width: 48rem) {

.hero__title {
      font-size: var(--font-size-5xl);
      letter-spacing: -0.04em
  }
    }

@media (min-width: 96rem) {

.hero__title {
      font-size: var(--font-size-6xl)
  }
    }

.hero__subtitle {
    margin: 0;
    max-width: 31.25rem;
    /* 500px */
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--fg-onColor-muted);
  }

@media (min-width: 48rem) {

.hero__subtitle {
      font-size: var(--font-size-2xl)
  }
    }

.hero__cta-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    max-width: 28.375rem;
  }

/* 454px */

@media (min-width: 30rem) {

.hero__cta-block > .button {
        align-self: flex-start
    }
      }

/* Frosted-glass CTA — gold tint at rest warms toward amber on hover,
       backdrop-blur lets the mesh gradient show through softened so the
       button picks up colors behind it while staying on-brand. Hero-
       scoped because this treatment only makes sense over a visually
       busy surface. */

.hero__cta-block > .button--solid {
      background-color: var(--color-gold-alpha-a50);
      backdrop-filter: blur(4px) saturate(120%);
      -webkit-backdrop-filter: blur(4px) saturate(120%);
      --_squircle-fallback: var(--squircle-2xl-fallback);
      --_squircle-enhanced: var(--squircle-2xl-enhanced);
      border: 1px solid var(--color-white-alpha-a5);
      box-shadow:
        0 14px 36px -10px var(--color-black-alpha-a25),
        0 4px 10px -4px var(--color-black-alpha-a15),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
      transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
    }

.hero__cta-block > .button--solid:hover {
        background-color: var(--color-amber-alpha-a70);
        border-color: var(--color-white-alpha-a10);
        box-shadow:
          0 20px 44px -10px var(--color-black-alpha-a30),
          0 6px 14px -4px var(--color-black-alpha-a20),
          inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
      }

.hero__cta-block > .button--solid:active {
        background-color: var(--color-amber-alpha-a75);
      }

@media (prefers-reduced-motion: reduce) {

.hero__cta-block > .button--solid {
        transition: none
    }
      }

.hero__helper {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-wider);
    color: var(--fg-onColor-muted);
  }

@keyframes hero-mesh-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes hero-skeleton-shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

.hero__skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(255 255 255 / 0.06) 42%,
    rgb(255 255 255 / 0.1) 50%,
    rgb(255 255 255 / 0.06) 58%,
    transparent 100%
  );
  animation: hero-skeleton-shimmer 2.5s ease-in-out infinite;
}

.hero__skeleton[data-skeleton-dismissed="true"] {
  visibility: hidden;
  pointer-events: none;
}

.hero__skeleton[data-skeleton-dismissed="true"]::after {
  animation: none;
}

/* Hero card: standard border-radius only (no corner-shape). A local
   @supports squircle block intermittently zeroed radius in Chromium;
   squircle stays on buttons and section cards via globals/squircle.css. */

.product {
  padding-block: var(--spacing-16);
  /* Reset the global :target scroll-margin so the hero CTA's #product
     jump lands flush, without the hero card's bottom edge peeking in. */
  scroll-margin-block-start: 0;
}

@media (min-width: 64rem) {

.product {
    padding-block: var(--spacing-30)
}
  }

.product__layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
  }

@media (min-width: 64rem) {

.product__layout {
      gap: var(--spacing-20)
  }
    }

.product__cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    width: 100%;
  }

@media (min-width: 48rem) {

.product__cards {
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: var(--spacing-8)
  }
    }

.product__card {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-2);
    background-color: var(--muted);
    --_squircle-fallback: var(--squircle-xl-fallback);
    --_squircle-enhanced: var(--squircle-xl-enhanced);
    overflow: hidden;
  }

@media (min-width: 48rem) {

.product__card {
      flex: 1 1 0;
      min-width: 0
  }
    }

.product__media {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    --_squircle-fallback: var(--squircle-lg-fallback);
    --_squircle-enhanced: var(--squircle-lg-enhanced);
  }

@media (min-width: 48rem) {

.product__media {
      height: 280px
  }
    }

@media (min-width: 64rem) {

.product__media {
      height: 320px
  }
    }

.product__media-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
  }

/* Abstract brand mark, centred over the mesh. Both cards use the same
     200px square illustration, scaled down on smaller frames to hold the
     ~62%-of-frame-height proportion from the Figma source. */

.product__media-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: auto;
    transform: translate(-50%, -50%);
    display: block;
  }

@media (min-width: 48rem) {

.product__media-mark {
      width: 175px
  }
    }

@media (min-width: 64rem) {

.product__media-mark {
      width: 200px
  }
    }

.product__copy {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-6) var(--spacing-4) var(--spacing-4);
  }

.product__card-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--fg-default);
  }

.product__card-description {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--fg-muted);
  }

.product__intro {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    width: 100%;
    color: var(--fg-default);
  }

.product__eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--fg-default);
  }

.product__eyebrow-symbol {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
  }

.product__eyebrow-symbol svg {
      width: 100%;
      height: 100%;
    }

.product__intro-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
    max-width: 32.5rem; /* 520px */
  }

.product__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-tighter);
  }

@media (min-width: 48rem) {

.product__title {
      font-size: var(--font-size-4xl);
      letter-spacing: -0.04em
  }
    }

.product__body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-normal);
  }

@media (min-width: 48rem) {

.product__body {
      font-size: var(--font-size-lg)
  }
    }

.vision {
  padding-block: var(--spacing-16);
}

@media (min-width: 64rem) {

.vision {
    padding-block: var(--spacing-30)
}
  }

/* Card serves as the absolute positioning context for the
     corner-anchored logo — content sits flush on the page surface so
     the amber title carries the section by itself. */

.vision__card {
    position: relative;
    overflow: hidden;
  }

.vision__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
  }

@media (min-width: 64rem) {

.vision__content {
      gap: var(--spacing-20)
  }
    }

.vision__header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    color: var(--brand-primary);
  }

.vision__eyebrow {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 16px;
    letter-spacing: var(--letter-spacing-spacious);
    text-transform: uppercase;
  }

.vision__title {
    margin: 0;
    color: inherit;
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.1;
    letter-spacing: var(--letter-spacing-tighter);
  }

@media (min-width: 48rem) {

.vision__title {
      font-size: var(--font-size-4xl)
  }
    }

@media (min-width: 64rem) {

.vision__title {
      font-size: var(--font-size-5xl)
  }
    }

@media (min-width: 80rem) {

.vision__title {
      font-size: var(--font-size-6xl);
      letter-spacing: -0.04em
  }
    }

.vision__timeline {
    position: relative;
    padding-block: var(--spacing-8);
    max-width: 45.5rem; /* 728px */
  }

@media (min-width: 48rem) {

.vision__timeline {
      padding-block: var(--spacing-16)
  }
    }

.vision__line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    width: 2px;
    background: linear-gradient(
      180deg,
      var(--color-amber-alpha-transparent) 0%,
      var(--color-amber-500) 50%,
      var(--color-amber-alpha-transparent) 100%
    );
  }

.vision__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
  }

.vision__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--fg-muted);
  }

@media (min-width: 48rem) {

.vision__item {
      gap: var(--spacing-6);
      font-size: var(--font-size-xl)
  }
    }

@media (min-width: 64rem) {

.vision__item {
      gap: var(--spacing-8);
      font-size: var(--font-size-2xl)
  }
    }

.vision__item::before {
      content: '';
      flex: 0 0 10px;
      width: 10px;
      height: 10px;
      border-radius: var(--radius-full);
      background-color: var(--color-amber-500);
      box-shadow: 0 0 0 4px var(--color-amber-alpha-a15);
    }

.vision__logo {
    display: none;
  }

@media (min-width: 80rem) {

.vision__logo {
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      width: 160px;
      height: 160px
  }
    }

.benefits {
  padding-block: var(--spacing-20);
}

@media (min-width: 64rem) {

.benefits {
    padding-block: var(--spacing-30)
}
  }

.benefits__inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
  }

@media (min-width: 64rem) {

.benefits__inner {
      gap: var(--spacing-16)
  }
    }

.benefits__header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    width: 100%;
  }

.benefits__eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--fg-default);
  }

.benefits__eyebrow-icon {
    display: block;
    width: 24px;
    height: 24px;
  }

.benefits__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-tighter);
    color: var(--fg-default);
  }

@media (min-width: 48rem) {

.benefits__title {
      font-size: var(--font-size-4xl);
      letter-spacing: -0.04em
  }
    }

.benefits__title-muted {
    color: var(--fg-muted);
  }

.benefits__cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
  }

@media (min-width: 48rem) {

.benefits__cards {
      grid-template-columns: repeat(2, 1fr)
  }
    }

@media (min-width: 64rem) {

.benefits__cards {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--spacing-8)
  }
    }

.benefits__card {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-2);
    background-color: var(--muted);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

/* Drop the third card in the md→lg window where 3-up doesn't fit. */

@media (min-width: 48rem) {
      .benefits__card:nth-child(3) {
        display: none;
      }
    }

@media (min-width: 64rem) {
      .benefits__card:nth-child(3) {
        display: flex;
      }
    }

.benefits__card-media {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-md);
  }

.benefits__card-image {
    display: block;
    width: 100%;
    height: auto;
  }

.benefits__card-copy {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-6) var(--spacing-4) var(--spacing-4);
  }

.benefits__card-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--fg-default);
  }

.benefits__card-description {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--fg-muted);
  }

.infrastructure {
  /* Full-bleed dark surface. The mulberry-950 fallback paints first, the
     infrastructure-mesh-gradient.jpg sits on top of it (so no-WebGL
     clients and the moment before the shader compiles both see a
     brand-on background), and the WebGL canvas paints over the JPG
     once ready. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 110vh;
  display: flex;
  align-items: center;
  background-color: var(--color-mulberry-950);
  background-image: url("/images/infrastructure-mesh-gradient.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--fg-onColor-default);
  padding-block: var(--spacing-20);

  /* --- Badge Group --- */

  /* --- Features List --- */

  /* --- Paragraph Block --- */
}

@media (min-width: 30rem) {

.infrastructure {
    padding-block: var(--spacing-30)
}
  }

@media (min-width: 48rem) {

.infrastructure {
    padding-block: var(--spacing-40)
}
  }

@media (min-width: 64rem) {

.infrastructure {
    padding-block: var(--spacing-60)
}
  }

/* WebGL mesh-gradient canvas. Sits beneath the section content but
     above the JPG fallback. Hidden until the renderer has resized +
     painted at least one frame (data-ready), then revealed. If WebGL2
     is missing or the shader fails, this stays hidden and the JPG
     shows through. */

.infrastructure__mesh {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    pointer-events: none;
  }

.infrastructure__mesh[data-ready="true"] {
      opacity: 1;
      animation: infrastructure-mesh-reveal 0.5s ease-out both;
    }

@media (prefers-reduced-motion: reduce) {
      .infrastructure__mesh[data-ready="true"] {
        animation: none;
      }
    }

/* Section content must paint on top of the canvas. */

.infrastructure > .container {
    position: relative;
    z-index: 1;
  }

.infrastructure__content {
    max-width: 700px;
  }

.infrastructure__title {
    color: inherit;
  }

.infrastructure__badge-group {
    display: none;
    align-items: center;
    gap: var(--spacing-2);
    background: var(--color-gold-alpha-a10);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-white-alpha-a5);
    border-radius: var(--radius-full);
    padding: var(--spacing-1) var(--spacing-4) var(--spacing-1) var(--spacing-1);
  }

@media (min-width: 30rem) {

.infrastructure__badge-group {
      display: inline-flex
  }
    }

.infrastructure__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-black-alpha-a15);
    border: 1px solid var(--color-white-alpha-a10);
    border-radius: var(--radius-full);
    padding: 6px var(--spacing-3);
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-widest);
    white-space: nowrap;
    color: var(--fg-onColor-default);
  }

.infrastructure__badge-symbol {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
  }

.infrastructure__badge-label {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-widest);
    white-space: nowrap;
    color: var(--fg-onColor-default);
  }

.infrastructure__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
  }

.infrastructure__feature {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
  }

@media (min-width: 30rem) {

.infrastructure__feature {
      font-size: var(--font-size-sm);
      line-height: 26px
  }
    }

.infrastructure__feature-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

.infrastructure__paragraph {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
  }

.infrastructure__overline {
    color: var(--fg-onColor-default);
  }

.infrastructure__description {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--fg-onColor-muted);
    max-width: 600px;
  }

@keyframes infrastructure-mesh-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.how-reva-works {
  padding-block: var(--spacing-20);

  /* ─── Insights feed (panel 4) ─────────────────────────────────── */
}

@media (min-width: 64rem) {

.how-reva-works {
    padding-block: var(--spacing-30)
}
  }

.how-reva-works__layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
  }

@media (min-width: 64rem) {

.how-reva-works__layout {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--spacing-20)
  }
    }

.how-reva-works__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    flex: 1 1 0;
    min-width: 0;
  }

@media (min-width: 64rem) {

.how-reva-works__content {
      justify-content: space-between;
      gap: var(--spacing-12);
      min-height: 600px
  }
    }

.how-reva-works__copy {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
  }

.how-reva-works__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0;
    color: var(--fg-default);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-normal);
  }

.how-reva-works__symbol {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
  }

.how-reva-works__symbol svg {
      width: 100%;
      height: 100%;
    }

.how-reva-works__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: -0.04em;
    color: var(--fg-default);
    margin: 0;
  }

@media (min-width: 48rem) {

.how-reva-works__title {
      font-size: var(--font-size-4xl)
  }
    }

.how-reva-works__title-muted {
    color: var(--fg-muted);
  }

.how-reva-works__description {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--fg-default);
    margin: 0;
    max-width: 38rem;
  }

@media (min-width: 48rem) {

.how-reva-works__description {
      font-size: var(--font-size-lg)
  }
    }

.how-reva-works__steps {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

.how-reva-works__step {
    border-bottom: 1px solid var(--color-brass-alpha-a15);
  }

.how-reva-works__step:last-child {
      border-bottom: 0;
    }

.how-reva-works__step-heading {
    /* Reset h3 typography — visual styling lives on the trigger button. */
    font: inherit;
    margin: 0;
    color: inherit;
    letter-spacing: inherit;
  }

.how-reva-works__step-trigger {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    width: 100%;
    padding: var(--spacing-4) 0;
    margin: 0;
    background: transparent;
    border: 0;
    text-align: left;
    color: var(--fg-default);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

@media (prefers-reduced-motion: no-preference) {

.how-reva-works__step-trigger {
      transition:
        color 200ms ease,
        background-color 200ms ease
  }
    }

/* Larger hit target while keeping visual padding tight. */

.how-reva-works__step-trigger::before {
      content: "";
      position: absolute;
    }

.how-reva-works__step-trigger:focus {
      outline: none;
    }

.how-reva-works__step-trigger:focus-visible {
      outline: 2px solid var(--accent-solid);
      outline-offset: 4px;
      border-radius: var(--radius-xs);
    }

.how-reva-works__step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-full);
    background-color: var(--color-brass-alpha-a10);
    color: var(--fg-default);
    font-family: var(--font-body);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    letter-spacing: var(--letter-spacing-normal);
  }

@media (prefers-reduced-motion: no-preference) {

.how-reva-works__step-number {
      transition: background-color 200ms ease
  }
    }

.how-reva-works__step-title {
    flex: 1 1 0;
    min-width: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--fg-muted);
  }

@media (min-width: 48rem) {

.how-reva-works__step-title {
      font-size: var(--font-size-lg)
  }
    }

@media (prefers-reduced-motion: no-preference) {

.how-reva-works__step-title {
      transition: color 200ms ease
  }
    }

.how-reva-works__step-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--color-brass-alpha-a50);
  }

@media (prefers-reduced-motion: no-preference) {

.how-reva-works__step-icon {
      transition: color 200ms ease
  }
    }

/* Hover / focus state — title strengthens, icon goes from a50 → solid neutral. */

.how-reva-works__step-trigger:hover .how-reva-works__step-title,
  .how-reva-works__step-trigger:focus-visible .how-reva-works__step-title {
    color: var(--fg-default);
  }

.how-reva-works__step-trigger:hover .how-reva-works__step-icon,
  .how-reva-works__step-trigger:focus-visible .how-reva-works__step-icon {
    color: var(--brand-neutral);
  }

/* Active / expanded state — number pill darkens (a10 → a30, foreground unchanged),
     title strengthens, icon lifts to solid neutral. */

.how-reva-works__step-trigger[aria-expanded="true"] .how-reva-works__step-number {
    background-color: var(--color-brass-alpha-a30);
  }

.how-reva-works__step-trigger[aria-expanded="true"] .how-reva-works__step-title {
    color: var(--fg-default);
  }

.how-reva-works__step-trigger[aria-expanded="true"] .how-reva-works__step-icon {
    color: var(--brand-neutral);
  }

/* Slightly extra breathing room for the expanded step so the panel
     doesn't sit flush against the trigger. */

.how-reva-works__step:has(.how-reva-works__step-trigger[aria-expanded="true"]) .how-reva-works__step-trigger {
      padding-bottom: var(--spacing-2);
    }

.how-reva-works__step-panel {
    overflow: hidden;
  }

/* Initial collapsed state when JS is enabled — JS strips hidden and
       manages height inline via motion. When JS is disabled, [hidden]
       hides the panel entirely (graceful fallback). */

.how-reva-works__step-panel:not([hidden]) {
      height: auto;
    }

.how-reva-works__step-panel-inner {
    padding: 0 0 var(--spacing-4) calc(var(--spacing-6) + var(--spacing-4));
  }

.how-reva-works__step-panel-inner p {
      font-family: var(--font-body);
      font-size: var(--font-size-md);
      font-weight: var(--font-weight-regular);
      line-height: var(--line-height-relaxed);
      letter-spacing: var(--letter-spacing-normal);
      color: var(--fg-default);
      margin: 0;
      max-width: 34rem;
    }

.how-reva-works__panel {
    flex-shrink: 0;
    padding: var(--spacing-2);
    background-color: var(--muted);
    border-radius: var(--radius-lg);
    width: 100%;
  }

@media (min-width: 64rem) {

.how-reva-works__panel {
      width: 600px;
      align-self: flex-start
  }
    }

/* The frame is the query container. Each step's visual layer sizes its
     whole composition in `em` against a font-size that tracks the frame
     width (10px at a 600px frame), so the cards scale 1:1 with the
     responsive 1 / 1 frame instead of reflowing. */

.how-reva-works__panel-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    aspect-ratio: 1 / 1;
    width: 100%;
    container-type: inline-size;
    background-color: var(--color-brass-100);
    pointer-events: none;
    cursor: default;
  }

/* One visual layer per step — absolutely stacked, only opacity differs
     so crossfades never reflow. Step 1 carries [data-active] in static
     HTML, so it shows (and others stay hidden) with JS disabled. */

.how-reva-works__panel-visual {
    position: absolute;
    inset: 0;
    font-size: calc(100cqw / 60);
    opacity: 0;
    will-change: opacity;
  }

.how-reva-works__panel-visual[data-active] {
    opacity: 1;
    z-index: 1;
  }

.how-reva-works__panel-gradient {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.how-reva-works__stage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

/* ─── Card shell ──────────────────────────────────────────────── */

.how-reva-works__card {
    width: 40.4em;
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    padding: 1.6em;
    border-radius: 1.8em;
    background-color: var(--color-white-alpha-a60);
    border: 0.1em solid var(--color-white-alpha-a45);
    box-shadow:
      0 0.6em 1.8em -0.4em var(--color-black-alpha-a20),
      0 0.15em 0.5em var(--color-black-alpha-a5);
    backdrop-filter: blur(1.2em) saturate(135%);
    -webkit-backdrop-filter: blur(1.2em) saturate(135%);
    color: var(--fg-default);
    font-family: var(--font-body);
    line-height: var(--line-height-relaxed);
  }

.how-reva-works__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8em;
  }

/* Figma node 2307:3335 — widget title: 13px semibold at the panel scale
     (1.3em × 10px base). Every card header label uses this primitive. */

.how-reva-works__card-label {
    font-size: 1.3em;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-wider);
    color: var(--fg-default);
  }

.how-reva-works__card-icon {
    flex-shrink: 0;
    width: 2.4em;
    height: 2.4em;
    color: var(--brand-primary);
  }

.how-reva-works__card-icon--reva {
    color: var(--brand-accent);
  }

/* Figma node 2307:3336 — 20×hug status badge: 11px medium label,
     6px live dot, neutral-a30 hairline (Figma olive-a20), no fill. */

.how-reva-works__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    flex-shrink: 0;
    padding: 0.35em 0.8em;
    border-radius: var(--radius-full);
    border: 0.1em solid var(--color-brass-alpha-a30);
    font-size: 1.1em;
    font-weight: var(--font-weight-medium);
    line-height: 1;
    letter-spacing: var(--letter-spacing-widest);
    color: var(--fg-default);
  }

/* ─── Status badge + dots ─────────────────────────────────────── */

.how-reva-works__badge .how-reva-works__dot {
    width: 0.6em;
    height: 0.6em;
  }

.how-reva-works__badge .how-reva-works__dot--positive {
    background-color: var(--color-fern-500);
  }

.how-reva-works__dot {
    width: 0.7em;
    height: 0.7em;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background-color: var(--fg-placeholder);
  }

.how-reva-works__dot--positive {
    background-color: var(--constructive-fg);
  }

.how-reva-works__dot--attention {
    background-color: var(--brand-primary);
  }

.how-reva-works__dot--paused {
    background-color: var(--fg-placeholder);
  }

.how-reva-works__dot--savings {
    background-color: var(--brand-accent);
  }

.how-reva-works__dot--reserve {
    background-color: var(--brand-primary);
  }

/* ─── Rows ────────────────────────────────────────────────────── */

.how-reva-works__row {
    display: flex;
    align-items: center;
    gap: 1em;
  }

.how-reva-works__row-icon {
    flex-shrink: 0;
    width: 1.6em;
    height: 1.6em;
    color: var(--fg-muted);
  }

.how-reva-works__row-label {
    font-size: 1.3em;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-wider);
    color: var(--fg-default);
  }

.how-reva-works__row > .how-reva-works__row-label {
    flex: 1 1 0;
    min-width: 0;
  }

.how-reva-works__row-text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
  }

.how-reva-works__row-sub {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1.1em;
    letter-spacing: var(--letter-spacing-widest);
    color: var(--fg-muted);
  }

.how-reva-works__row-more {
    flex-shrink: 0;
    width: 1.6em;
    height: 1.6em;
    color: var(--fg-placeholder);
  }

/* Nested inset tiles — 12px padding/radius at panel scale (Figma item). */

.how-reva-works__panel-visual[data-hrw-panel="0"] .how-reva-works__row,
  .how-reva-works__panel-visual[data-hrw-panel="1"] .how-reva-works__row,
  .how-reva-works__goal,
  .how-reva-works__donut-box,
  .how-reva-works__panel-visual[data-hrw-panel="3"] .how-reva-works__feed-row {
    padding: 1.2em;
    border-radius: 1.2em;
    background-color: var(--color-white-alpha-a50);
    border: 0.1em solid var(--color-brass-alpha-a20);
  }

/* Panel 1 nested rows — Figma node 2307:3339. */

.how-reva-works__row-block {
    display: flex;
    flex-direction: column;
  }

.how-reva-works__panel-visual[data-hrw-panel="0"] .how-reva-works__row {
    gap: 0.8em;
  }

.how-reva-works__panel-visual[data-hrw-panel="0"] .how-reva-works__row-icon {
    color: var(--brand-primary);
  }

.how-reva-works__row-separator {
    display: block;
    width: 0;
    height: 1.2em;
    margin-left: 2em;
    border-left: 0.1em solid var(--color-brass-alpha-a30);
  }

/* Panel 2 nested tiles — Figma node 2308:874. */

.how-reva-works__panel-visual[data-hrw-panel="1"] .how-reva-works__row {
    gap: 1.2em;
  }

/* Money flows list — Figma node 2326:967. */

.how-reva-works__row-list {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
  }

.how-reva-works__panel-visual[data-hrw-panel="1"] .how-reva-works__row-list .how-reva-works__row-label {
    line-height: 1.2;
  }

.how-reva-works__panel-visual[data-hrw-panel="1"] .how-reva-works__row-list .how-reva-works__row-sub {
    gap: 0.4em;
    font-weight: var(--font-weight-medium);
    line-height: 1;
  }

.how-reva-works__panel-visual[data-hrw-panel="1"] .how-reva-works__row-list .how-reva-works__row-sub > :last-child {
    transform: translateY(-0.02em);
  }

.how-reva-works__panel-visual[data-hrw-panel="1"] .how-reva-works__row-list .how-reva-works__row-sub .how-reva-works__dot {
    width: 0.7em;
    height: 0.7em;
    flex-shrink: 0;
  }

.how-reva-works__panel-visual[data-hrw-panel="1"] .how-reva-works__row-list .how-reva-works__dot--positive {
    background-color: var(--color-fern-500);
  }

.how-reva-works__panel-visual[data-hrw-panel="1"] .how-reva-works__row-list .how-reva-works__recurring {
    gap: 0.6em;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: var(--letter-spacing-widest);
    color: var(--fg-default);
  }

.how-reva-works__panel-visual[data-hrw-panel="1"] .how-reva-works__row-list .how-reva-works__recurring svg {
    width: 1.333em;
    height: 1.333em;
    color: var(--brand-neutral);
  }

.how-reva-works__row--paused .how-reva-works__recurring {
    opacity: 0.3;
  }

.how-reva-works__hairline {
    height: 0.1em;
    margin: 0.2em 0;
    background-color: var(--color-black-alpha-a10);
  }

/* ─── Logo chips ──────────────────────────────────────────────── */

.how-reva-works__chip-stack {
    display: inline-flex;
    flex-shrink: 0;
  }

.how-reva-works__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2em;
    height: 3.2em;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background-color: var(--color-white-alpha-a80);
    box-shadow: 0 0 0 0.2em var(--color-white-alpha-a70);
    overflow: hidden;
  }

.how-reva-works__chip-stack .how-reva-works__chip:not(:first-child) {
    margin-left: -0.8em;
  }

.how-reva-works__chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.how-reva-works__chip--pdf {
    background-color: var(--destructive-solid);
    color: var(--color-white-solid);
  }

.how-reva-works__chip--pdf svg {
    width: 1.8em;
    height: 1.8em;
  }

/* 2px stroke, dashed 4px on / 4px off — drawn with a gradient rather
     than border-style:dashed so the dash length is exact. Figma 2307:3361. */

.how-reva-works__connector {
    display: block;
    width: 0.2em;
    height: 2.4em;
    background-image: repeating-linear-gradient(
      to bottom,
      var(--color-white-alpha-a30) 0,
      var(--color-white-alpha-a30) 0.4em,
      transparent 0.4em,
      transparent 0.8em
    );
  }

/* Gold square holding the Reva mark — 48px badge, 12px radius, 32px
     symbol, soft 16px ambient shadow. Figma node 2307:3617. */

.how-reva-works__reva-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.8em;
    height: 4.8em;
    flex-shrink: 0;
    border-radius: 1.2em;
    background-color: var(--brand-accent);
    box-shadow: 0 0 1.6em var(--color-black-alpha-a20);
  }

/* ─── Reva mark badge ─────────────────────────────────────────── */

.how-reva-works__reva-badge img {
    width: 2.4em;
    height: 2.4em;
  }

/* Figma node 2307:3437 — white-a70 fill, white-a30 hairline, a light
     2px frost, no shadow. The slimmer pill proportions are kept. */

.how-reva-works__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.8em;
    padding: 0.9em 1.8em 0.9em 1.4em;
    border-radius: var(--radius-full);
    background-color: var(--color-white-alpha-a70);
    border: 0.1em solid var(--color-white-alpha-a30);
    backdrop-filter: blur(0.2em);
    -webkit-backdrop-filter: blur(0.2em);
    line-height: 1;
  }

/* ─── Building-household pill (panel 1) ───────────────────────── */

.how-reva-works__pill-spinner {
    width: 1.6em;
    height: 1.6em;
    flex-shrink: 0;
    color: var(--fg-muted);
    transform-origin: center;
    animation: how-reva-works-spin 0.9s linear infinite;
  }

/* ─── Dashed connector ────────────────────────────────────────── */

.how-reva-works__pill-label {
    font-size: 1.3em;
    font-weight: var(--font-weight-medium);
    line-height: 1;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--fg-default);
  }

/* Figma node 2458:2590 — 80×24 area chart: a gold trend line over a
     faded gold fill, at the right of the cash-buffer row. */

.how-reva-works__sparkline {
    flex-shrink: 0;
    width: 8em;
    height: 2.4em;
  }

.how-reva-works__sparkline svg {
      display: block;
      width: 100%;
      height: 100%;
    }

/* ─── Sparkline (panel 2, operating-cash-buffer row) ──────────── */

.how-reva-works__sparkline-stop {
    stop-color: var(--brand-accent);
  }

.how-reva-works__sparkline-area {
    opacity: 0.3;
  }

.how-reva-works__sparkline-line {
    fill: none;
    stroke: var(--brand-accent);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

/* ─── Goals (panel 2) ─────────────────────────────────────────── */

.how-reva-works__goals {
    display: flex;
    gap: 0.4em;
  }

.how-reva-works__goal {
    display: flex;
    align-items: center;
    gap: 1.2em;
    flex: 1 1 0;
    min-width: 0;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wider);
    color: var(--fg-default);
  }

.how-reva-works__goal > span {
    font-size: 1.3em;
  }

.how-reva-works__goal-icon {
    width: 2.4em;
    height: 2.4em;
    flex-shrink: 0;
    color: var(--brand-primary);
  }

.how-reva-works__recurring {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    flex-shrink: 0;
    font-size: 1.1em;
    letter-spacing: var(--letter-spacing-widest);
    color: var(--fg-muted);
  }

.how-reva-works__recurring svg {
    width: 1.4em;
    height: 1.4em;
  }

/* Figma node 2418:1222 — 400px card, white-a70, 16px radius, light frost. */

.how-reva-works__card--treasury {
    width: 40em;
    gap: 0;
    padding: 0;
    border: none;
    border-radius: 1.6em;
    background-color: var(--color-white-alpha-a70);
    box-shadow: none;
    backdrop-filter: blur(0.4em);
    -webkit-backdrop-filter: blur(0.4em);
  }

/* 16px around the 1.3em title — the /1.3 holds it at 16px (not 20.8px)
     so the title's left edge lines up with the metrics below. */

.how-reva-works__card--treasury .how-reva-works__card-label {
    padding: calc(1.6em / 1.3);
    letter-spacing: var(--letter-spacing-normal);
  }

/* Chart is full-bleed — no horizontal padding on this section. */

.how-reva-works__card--treasury .how-reva-works__chart {
    padding: 0;
  }

/* ─── Surplus cash / savings rate ─────────────────────────────── */

.how-reva-works__cashflow-metrics {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1em;
    padding: 0 1.6em;
  }

/* ─── Cash flow forecast (panel 3) ────────────────────────────── */

.how-reva-works__metric {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
  }

.how-reva-works__metric--end {
    align-items: flex-end;
    text-align: right;
  }

.how-reva-works__metric-label {
    font-size: 1.2em;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-wider);
    color: var(--fg-muted);
  }

.how-reva-works__metric-value {
    font-size: 1.8em;
    font-weight: var(--font-weight-semibold);
    line-height: 1.1;
    letter-spacing: var(--letter-spacing-normal);
    color: var(--fg-default);
  }

/* ─── Cash-flow bar chart ─────────────────────────────────────── */

.how-reva-works__chart {
    display: flex;
    flex-direction: column;
  }

.how-reva-works__chart-svg {
    display: block;
    width: 100%;
    aspect-ratio: 400 / 184;
    overflow: visible;
  }

.how-reva-works__chart-baseline {
    stroke: var(--color-brass-alpha-a30);
    stroke-width: 1;
  }

.how-reva-works__chart-divider {
    stroke: var(--color-brass-alpha-a30);
    stroke-width: 2;
    stroke-dasharray: 4 4;
  }

/* Grow origin for the cascade signature: income rises from the
     baseline (bottom edge), outflow drops from it (top edge). */

.how-reva-works__bar--in {
    fill: #61ab54;
    fill-opacity: 0.75;
    transform-box: fill-box;
    transform-origin: bottom;
  }

/* Income above the baseline (fern), outflow below (mulberry), both at
     75% — Figma primitives fern/a75 + mulberry/a75. */

.how-reva-works__bar--out {
    fill: #bf4853;
    fill-opacity: 0.75;
    transform-box: fill-box;
    transform-origin: top;
  }

/* Forecast tail dimmed — Figma forecast Period opacity 0.5. */

.how-reva-works__bars--forecast {
    opacity: 0.5;
  }

.how-reva-works__chart-axis text {
    font-size: 9px;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wider);
    fill: var(--fg-muted);
    text-anchor: middle;
  }

/* ─── Personal / business split (donut + legend) ──────────────── */

.how-reva-works__cashflow-summary {
    padding: 1.6em;
  }

.how-reva-works__summary-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4em;
    padding: 1.6em;
    border-radius: 1.2em;
    background-color: var(--color-white-alpha-a50);
    border: 0.1em solid #ada06533;
  }

.how-reva-works__donut {
    display: block;
    width: 5.6em;
    height: 5.6em;
    flex-shrink: 0;
  }

.how-reva-works__donut-arc {
    fill: none;
    stroke-width: 8;
    stroke-linecap: butt;
    transform: rotate(-90deg);
    transform-origin: center;
  }

.how-reva-works__donut-arc--personal {
    stroke: var(--color-amber-500);
  }

.how-reva-works__donut-arc--business {
    stroke: #deac74;
  }

.how-reva-works__legend {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
  }

.how-reva-works__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.8em;
  }

.how-reva-works__legend-text {
    font-size: 1.3em;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-wider);
    color: var(--fg-default);
  }

.how-reva-works__panel-visual[data-hrw-panel="2"] .how-reva-works__dot--personal,
  .how-reva-works__panel-visual[data-hrw-panel="2"] .how-reva-works__dot--business {
    width: 0.8em;
    height: 0.8em;
  }

.how-reva-works__dot--personal {
    background-color: var(--color-amber-500);
  }

.how-reva-works__dot--business {
    background-color: #deac74;
  }

/* Figma node 2327:1182 — 440px content width at panel scale. */

.how-reva-works__panel-visual[data-hrw-panel="3"] .how-reva-works__card {
    width: 44em;
  }

.how-reva-works__feed-row {
    display: flex;
    align-items: center;
    gap: 1.2em;
  }

.how-reva-works__feed-icon {
    flex-shrink: 0;
    width: 2em;
    height: 2em;
    color: #78716c;
  }

.how-reva-works__feed-text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1em;
  }

.how-reva-works__feed-title {
    font-size: 1.3em;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wider);
    color: var(--fg-default);
  }

.how-reva-works__feed-sub {
    font-size: 1.1em;
    letter-spacing: var(--letter-spacing-widest);
    color: var(--fg-muted);
  }

.how-reva-works__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: calc(2.8em / 1.2);
    padding: 0 1em;
    border-radius: var(--radius-full);
    background-color: var(--muted);
    font-size: 1.2em;
    font-weight: var(--font-weight-medium);
    line-height: 1;
    letter-spacing: var(--letter-spacing-widest);
    color: var(--fg-default);
    white-space: nowrap;
  }

/* Spinner glyph in the panel-1 "building household" pill. */

@keyframes how-reva-works-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-reva-works__pill-spinner {
    animation: none;
  }
}

.founding-community {
  display: flex;
  align-items: center;
  min-height: 80dvh;
  /* Breathing room when content exceeds min-height on short viewports. */
  padding-top: var(--spacing-12);
}

/* Editorial layout — no card chrome. The grid panel carries its
     own rounded corners and shadow; the content sits naked beside it. */

.founding-community__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-12);
  }

/* DOM order is copy-first so the heading leads the reading order and,
       on mobile, the copy stacks above the grid panel. row-reverse puts
       the grid panel back on the left on desktop. */

@media (min-width: 64rem) {

.founding-community__card {
      flex-direction: row-reverse;
      gap: var(--spacing-30)
  }
    }

/* 2×2 illustration grid on the mesh-gradient panel — replaces the
     old static benefits image. Shown at every breakpoint. */

.founding-community__grid {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-content: center;
    gap: var(--spacing-6);
    width: 100%;
    max-width: 30rem;
    /* Preserve the 480x620 footprint of the image panel this replaced. */
    aspect-ratio: 480 / 620;
    padding: var(--spacing-10);
    overflow: hidden;
    background-image: url("/images/founding-community.jpg");
    background-size: cover;
    background-position: center;
    --_squircle-fallback: var(--squircle-3xl-fallback);
    --_squircle-enhanced: var(--squircle-3xl-enhanced);
    box-shadow: var(--site-shadow-card);
  }

@media (min-width: 48rem) {

.founding-community__grid {
      gap: var(--spacing-10);
      padding: var(--spacing-12)
  }
    }

/* No bottom padding — footer provides its own top spacing. */

.founding-community__grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
  }

.founding-community__grid-illustration {
    width: 80px;
    height: 80px;
    object-fit: contain;
  }

.founding-community__grid-label {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-wider);
    text-align: center;
    color: var(--fg-onColor-default);
  }

.founding-community__content {
    text-align: center;
    align-items: center;
  }

@media (min-width: 64rem) {

.founding-community__content {
      /* Fill the row beside the fixed-width grid panel. */
      flex: 1;
      text-align: left;
      align-items: flex-start
  }
    }

.founding-community__title {
    color: var(--brand-primary);
    font-size: var(--font-size-4xl);
    max-width: 30rem;
  }

/* 480px — wraps the heading to two balanced lines */

@media (min-width: 64rem) {

.founding-community__title {
      font-size: var(--font-size-6xl)
  }
    }

.founding-community__lead {
    color: var(--fg-muted);
    max-width: 34rem; /* ~540px */
  }

.founding-community__disclaimer {
    color: var(--fg-muted);
  }

.founding-community__disclaimer a {
      color: inherit;
      text-decoration: underline;
    }

.founding-community__disclaimer a:hover,
      .founding-community__disclaimer a:active,
      .founding-community__disclaimer a:focus {
        color: inherit;
      }

.footer {
  padding: var(--spacing-40) 0 var(--spacing-20) 0;
}

@media (min-width: 64rem) {

.footer {
    padding-top: var(--spacing-60)
}
  }

.footer__wrapper {
    max-width: 700px;
  }

.footer__footnote {
    color: var(--fg-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-widest);
  }

/* --- Intro section --- */

.hiring__intro {
  padding-block: var(--spacing-30);
}

.hiring__intro-block {
  max-width: 520px;
}

@media (min-width: 96rem) {

.hiring__intro-block {
    max-width: 620px
}
  }

.hiring__intro-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tighter);
}

.hiring__intro-body p {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--fg-default);
}

/* --- Pillars row --- */

.hiring__pillars {
  padding-bottom: var(--spacing-30);
}

.hiring__pillar-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-8);
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
}

@media (min-width: 64rem) {

.hiring__pillar-row {
    grid-template-columns: repeat(3, 1fr);
    max-width: none
}
  }

.hiring__pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  padding: var(--spacing-8);
  background-color: var(--color-brass-500);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  --_squircle-fallback: var(--squircle-3xl-fallback);
  --_squircle-enhanced: var(--squircle-3xl-enhanced);
  overflow: hidden;
  box-shadow:
    0 12px 32px -16px rgba(31, 24, 0, 0.13),
    0 12px 60px 0 rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(32, 16, 0, 0.06);
}

@media (min-width: 48rem) {

.hiring__pillar {
    padding: var(--spacing-10)
}
  }

.hiring__pillar--panel-1 {
  background-image: url('/images/hiring/Panel%2001.jpg');
}

.hiring__pillar--panel-2 {
  background-image: url('/images/hiring/Panel%2002.jpg');
}

.hiring__pillar--panel-3 {
  background-image: url('/images/hiring/Panel%2003.jpg');
}

.hiring__pillar-symbol {
  display: block;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

.hiring__pillar-symbol img {
    display: block;
    width: 100%;
    height: 100%;
  }

.hiring__pillar-text {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--fg-onColor-muted);
}

.hiring__pillar-text strong {
    font-weight: var(--font-weight-medium);
    color: var(--fg-onColor-default);
  }

/* --- Open roles --- */

.hiring__roles {
  /* No bottom padding — footer provides its own top spacing. */
}

.hiring__roles-card {
  background-color: var(--muted);
  --_squircle-fallback: var(--squircle-section-lg-fallback);
  --_squircle-enhanced: var(--squircle-section-lg-enhanced);
  padding: var(--spacing-10) var(--spacing-6);
}

@media (min-width: 48rem) {

.hiring__roles-card {
    padding: var(--spacing-16) var(--spacing-20)
}
  }

.hiring__roles-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tighter);
  color: var(--fg-default);
}

.hiring__roles-table {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 100%;
}

/* Mobile: each row is a vertical stack; header row hidden (its values are implicit on each card). */

.hiring__roles-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  align-items: flex-start;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--fg-default);
}

@media (min-width: 48rem) {

.hiring__roles-row {
    flex-direction: row;
    gap: var(--spacing-10)
}
  }

.hiring__roles-row--header {
  display: none;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--fg-placeholder);
}

@media (min-width: 48rem) {

.hiring__roles-row--header {
    display: flex
}
  }

.hiring__roles-col--role,
.hiring__roles-col--team {
  min-width: 0;
}

@media (min-width: 48rem) {

.hiring__roles-col--role,
.hiring__roles-col--team {
    flex: 1 0 0
}
  }

@media (min-width: 48rem) {

.hiring__roles-col--location {
    width: 200px;
    flex-shrink: 0;
    text-align: right
}
  }

.hiring__roles-divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-brass-alpha-a10);
}

.hiring__roles-footnote {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  color: var(--fg-default);
}

.hiring__roles-footnote a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Page section --- */

.partners {
  padding-top: var(--spacing-30);
  /* No bottom padding — footer provides its own top spacing. */
}

.partners__stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  width: 100%;
}

/* --- Hero --- */

.partners__hero {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
  max-width: 520px;
}

.partners__hero-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tighter);
  color: var(--fg-default);
}

.partners__hero-subtitle {
  font-family: var(--font-body);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--fg-muted);
}

/* Legal note under the form. Matches Figma — 13px, muted, with
   underlined links inheriting colour. */

.partners__form-legal {
  font-family: var(--font-body);
  /* 13px — matches the hero footnote and the Figma legal-note spec. */
  font-size: 0.8125rem;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-widest);
  color: var(--fg-muted);
}

.partners__form-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- 4-block grid --- */

.partners__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-8);
  width: 100%;
}

@media (min-width: 64rem) {

.partners__grid {
    grid-template-columns: repeat(2, 1fr)
}
  }

.partners__block {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: var(--spacing-6);
  background-color: var(--color-brass-500);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  --_squircle-fallback: var(--squircle-3xl-fallback);
  --_squircle-enhanced: var(--squircle-3xl-enhanced);
  overflow: hidden;
  box-shadow:
    0 12px 32px -16px rgba(31, 24, 0, 0.13),
    0 12px 60px 0 rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(32, 16, 0, 0.06);
}

.partners__block--panel-1 {
  background-image: url("/images/design-partner-program/Panel%2001.jpg");
}

.partners__block--panel-2 {
  background-image: url("/images/design-partner-program/Panel%2002.jpg");
}

.partners__block--panel-3 {
  background-image: url("/images/design-partner-program/Panel%2003.jpg");
}

.partners__block--panel-4 {
  background-image: url("/images/design-partner-program/Panel%2004.jpg");
}

.partners__block-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  width: 100%;
  max-width: 412px;
}

.partners__illustration {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.partners__block-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  flex: 1;
  min-width: 0;
}

.partners__block-title {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  color: var(--fg-onColor-default);
}

.partners__block-description {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--fg-onColor-muted);
}

/* --- Join the program ---
   Flat editorial block matching the Figma design — no card chrome.
   Stays narrower than the program-details block above (600px vs 700px). */

.partners__join {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
  width: 100%;
  max-width: 600px;
}

.partners__join-text {
  width: 100%;
}

.partners__join-title {
  font-family: var(--font-body);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  color: var(--fg-default);
}

.partners__join-body {
  font-family: var(--font-body);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--fg-muted);
}

.partners__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  width: 100%;
}

/* Group of fields (full-name + firm row, then email row). */

.partners__form-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 100%;
}

/* Side-by-side fields (Full name + Firm). Stacks on small screens. */

.partners__form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

@media (min-width: 48rem) {

.partners__form-row {
    grid-template-columns: 1fr 1fr
}
  }

/* Submit hugs its content (Figma) — the form is a column flex with the
   default `align-items: stretch`, which would otherwise pull the button
   to the full form width. */

.partners__form-submit {
  align-self: flex-start;
}

.partners__field-error,
.partners__form-error {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--destructive-fg);
}

.partners__join-success-text {
  font-family: var(--font-body);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--fg-default);
}

.legal {
  padding-top: var(--spacing-20);
}

@media (min-width: 64rem) {

.legal {
    padding-top: var(--spacing-40)
}
  }

.legal__content {
    max-width: 45rem;
  }

.legal__content h1 {
    margin-bottom: var(--spacing-30);
  }

.legal__content h2,
  .legal__content h3 {
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: 0;
  }

.legal__content h2 {
    font-size: var(--font-size-2xl);
    margin-top: var(--spacing-10);
    margin-bottom: var(--spacing-4);
  }

.legal__content h3 {
    font-size: var(--font-size-xl);
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-3);
  }

.legal__content p {
    margin-bottom: var(--spacing-4);
  }

.legal__content ol {
    margin-bottom: var(--spacing-4);
    padding-left: var(--spacing-6);
  }

.legal__content li {
    margin-bottom: var(--spacing-2);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-wider);
  }

.legal__content a {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

/* Auth pages overlay the header on the canvas so the auth-page wrapper
   can fill the whole viewport. With the header in normal flow, the
   content was centred in the post-header region and read as visually
   pushed down. Pages opt in via `<body class="auth-body">`. */

.auth-body .site-header {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
}

.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100dvh;
  /* Symmetric vertical padding ≥ the header height keeps the content
     clear of the absolutely-positioned logo while flex-centering on a
     full 100dvh box yields a true viewport-centre composition. */
  padding-block: var(--site-header-block-size);
  padding-inline: var(--spacing-6);
}

.auth-page__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tighter);
}

.auth-page__lead {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--fg-muted);
}

.section {
  padding-top: var(--spacing-20);
}

@media (min-width: 64rem) {

.section {
    padding-top: var(--spacing-40)
}
  }

.section__content {
    max-width: 45rem;
  }

.section__content h1 {
    margin-bottom: var(--spacing-6);
  }

.section__content a {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

.signin__wrapper {
  width: 100%;
  max-width: 400px;
}

.signin__heading {
  width: 100%;
}

.signin__subtitle {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--fg-muted);
}

.signin__form {
  width: 100%;
}

.signin__cta-label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
}

.signin__cta-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.signin__field-error {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--destructive-solid);
}

.signin__signup {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-1);
  width: 100%;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--fg-default);
}

.signin__signup-link {
  font-weight: var(--font-weight-medium);
}

.signup__wrapper {
  width: 100%;
  max-width: 600px;
  text-align: center;
}

.signup__copy {
  width: 100%;
}

.signup__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: var(--color-gold-alpha-a50);
}

.signup__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.signup__contact {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--fg-muted);
}

.signup__contact a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Rest state for elements opted in to the generic reveal animation
 * (`data-motion="reveal"`) and the hero card entrance
 * (`[data-motion-hero-card]`). Applied only when the user allows motion —
 * reduced-motion users see elements at their static end state. Timelines
 * are wired up in `src/scripts/benefits-motion.js`. */

@media (prefers-reduced-motion: no-preference) {
  [data-motion="reveal"] {
    opacity: 0;
    transform: translateY(12px);
    will-change: opacity, transform;
  }

  /* Hide the hero panel until the entrance animation runs — prevents the
     burgundy / JPG fallback from flashing before WebGL + motion init. */
  [data-motion-hero-card] {
    opacity: 0;
    transform: scale(0.97);
    will-change: opacity, transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-motion-hero-card] {
    opacity: 1;
    transform: none;
  }

  .hero__skeleton {
    display: none;
  }
}

/* Return visitors skip the skeleton + entrance choreography (see index.html
 * inline script + benefits-motion.js localStorage flag). */

html.hero-return-visitor .hero__skeleton {
  display: none;
}

html.hero-return-visitor [data-motion-hero-card] {
  opacity: 1;
  transform: none;
}

html.hero-return-visitor .hero [data-motion="reveal"] {
  opacity: 1;
  transform: none;
}

/* Squircle registry — import LAST in main.css so these rules win over component custom props.
   Components only set --_squircle-fallback / --_squircle-enhanced (no border-radius). */

.button--sm,
.button--md,
.button--lg,
.hero__cta-block > .button--solid,
.product__card,
.product__media,
.benefit__image-panel,
.infrastructure__card,
.founding-community__image-panel,
.text-input__field,
.text-input__toggle,
.error-alert,
.checkbox__input,
.partners__block,
.partners__how-card,
.partners__join,
.hiring__pillar,
.hiring__roles-card {
  border-radius: var(--_squircle-fallback);
}

@supports (corner-shape: squircle) {
  .button--sm,
  .button--md,
  .button--lg,
  .hero__cta-block > .button--solid,
  .product__card,
  .product__media,
  .benefit__image-panel,
  .infrastructure__card,
  .founding-community__grid,
  .text-input__field,
  .text-input__toggle,
  .error-alert,
  .checkbox__input,
  .partners__block,
  .partners__how-card,
  .partners__join,
  .hiring__pillar,
  .hiring__roles-card {
    corner-shape: squircle;
    border-radius: var(--_squircle-enhanced, var(--_squircle-fallback));
  }
}