*,
*::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-sunflower-50: oklch(98.6% 0.0129 86.05);
  --color-sunflower-100: oklch(96.88% 0.0263 86.05);
  --color-sunflower-150: oklch(95.13% 0.04 86.05);
  --color-sunflower-200: oklch(93.32% 0.0541 86.05);
  --color-sunflower-250: oklch(91.44% 0.0687 86.05);
  --color-sunflower-300: oklch(89.5% 0.0839 86.05);
  --color-sunflower-350: oklch(87.45% 0.0999 86.05);
  --color-sunflower-400: oklch(85.25% 0.117 86.05);
  --color-sunflower-450: oklch(82.81% 0.136 86.05);
  --color-sunflower-500: oklch(79.52% 0.1617 86.05);
  --color-sunflower-550: oklch(72.35% 0.1311 84.67);
  --color-sunflower-600: oklch(65.19% 0.112 83.65);
  --color-sunflower-650: oklch(58.02% 0.0957 82.72);
  --color-sunflower-700: oklch(50.85% 0.081 81.87);
  --color-sunflower-750: oklch(43.68% 0.0674 81.05);
  --color-sunflower-800: oklch(36.51% 0.0546 80.26);
  --color-sunflower-850: oklch(29.34% 0.0424 79.5);
  --color-sunflower-900: oklch(22.17% 0.0307 78.77);
  --color-sunflower-950: oklch(15% 0.0194 78.05);
  --color-sunflower-alpha-a4: oklch(79.52% 0.1617 86.05 / 0.04);
  --color-sunflower-alpha-a5: oklch(79.52% 0.1617 86.05 / 0.05);
  --color-sunflower-alpha-a6: oklch(79.52% 0.1617 86.05 / 0.06);
  --color-sunflower-alpha-a8: oklch(79.52% 0.1617 86.05 / 0.08);
  --color-sunflower-alpha-a10: oklch(79.52% 0.1617 86.05 / 0.1);
  --color-sunflower-alpha-a15: oklch(79.52% 0.1617 86.05 / 0.15);
  --color-sunflower-alpha-a20: oklch(79.52% 0.1617 86.05 / 0.2);
  --color-sunflower-alpha-a25: oklch(79.52% 0.1617 86.05 / 0.25);
  --color-sunflower-alpha-a30: oklch(79.52% 0.1617 86.05 / 0.3);
  --color-sunflower-alpha-a35: oklch(79.52% 0.1617 86.05 / 0.35);
  --color-sunflower-alpha-a40: oklch(79.52% 0.1617 86.05 / 0.4);
  --color-sunflower-alpha-a45: oklch(79.52% 0.1617 86.05 / 0.45);
  --color-sunflower-alpha-a50: oklch(79.52% 0.1617 86.05 / 0.5);
  --color-sunflower-alpha-a55: oklch(79.52% 0.1617 86.05 / 0.55);
  --color-sunflower-alpha-a60: oklch(79.52% 0.1617 86.05 / 0.6);
  --color-sunflower-alpha-a65: oklch(79.52% 0.1617 86.05 / 0.65);
  --color-sunflower-alpha-a70: oklch(79.52% 0.1617 86.05 / 0.7);
  --color-sunflower-alpha-a75: oklch(79.52% 0.1617 86.05 / 0.75);
  --color-sunflower-alpha-a80: oklch(79.52% 0.1617 86.05 / 0.8);
  --color-sunflower-alpha-a85: oklch(79.52% 0.1617 86.05 / 0.85);
  --color-sunflower-alpha-a90: oklch(79.52% 0.1617 86.05 / 0.9);
  --color-sunflower-alpha-a95: oklch(79.52% 0.1617 86.05 / 0.95);
  --color-sunflower-alpha-transparent: oklch(79.52% 0.1617 86.05 / 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);
  --faint: var(--color-brass-alpha-a4);
  --subtle: var(--color-brass-alpha-a6);
  --muted: var(--color-brass-alpha-a10);
  --default: var(--color-brass-alpha-a15);
  --emphasized: var(--color-brass-alpha-a25);
  --subtle-solid: var(--color-brass-100);
  --muted-solid: var(--color-brass-150);
  --default-solid: var(--color-brass-200);
  --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-onSolid-default: var(--color-white-solid);
  --fg-onSolid-muted: var(--color-white-alpha-a60);
  --fg-onSolid-subtle: var(--color-white-alpha-a40);
  --fg-onSolid-placeholder: var(--color-white-alpha-a30);
  --fg-onSolid-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-faint: var(--color-amber-alpha-a6);
  --primary-subtle: var(--color-amber-alpha-a10);
  --primary-muted: var(--color-amber-alpha-a15);
  --primary-default: var(--color-amber-alpha-a20);
  --primary-emphasized: var(--color-amber-alpha-a30);
  --primary-strong: var(--color-amber-alpha-a45);
  --primary-faint-solid: var(--color-amber-50);
  --primary-subtle-solid: var(--color-amber-100);
  --primary-muted-solid: var(--color-amber-150);
  --primary-default-solid: var(--color-amber-200);
  --primary-emphasized-solid: var(--color-amber-300);
  --primary-strong-solid: var(--color-amber-400);
  --primary-fg-default: var(--color-amber-600);
  --primary-fg-highContrast: var(--color-amber-700);
  --primary-fg-onSolid: var(--color-amber-50);
  --primary-border: var(--color-amber-200);
  --accent-solid: var(--color-gold-500);
  --accent-faint: var(--color-gold-alpha-a6);
  --accent-subtle: var(--color-gold-alpha-a10);
  --accent-muted: var(--color-gold-alpha-a15);
  --accent-default: var(--color-gold-alpha-a20);
  --accent-emphasized: var(--color-gold-alpha-a30);
  --accent-strong: var(--color-gold-alpha-a45);
  --accent-faint-solid: var(--color-gold-50);
  --accent-subtle-solid: var(--color-gold-100);
  --accent-muted-solid: var(--color-gold-150);
  --accent-default-solid: var(--color-gold-200);
  --accent-emphasized-solid: var(--color-gold-300);
  --accent-strong-solid: var(--color-gold-400);
  --accent-fg-default: var(--color-gold-600);
  --accent-fg-highContrast: var(--color-gold-700);
  --accent-fg-onSolid: var(--color-gold-950);
  --accent-border: var(--color-gold-200);
  --neutral-solid: var(--color-brass-500);
  --neutral-faint: var(--color-brass-alpha-a6);
  --neutral-subtle: var(--color-brass-alpha-a10);
  --neutral-muted: var(--color-brass-alpha-a15);
  --neutral-default: var(--color-brass-alpha-a20);
  --neutral-emphasized: var(--color-brass-alpha-a30);
  --neutral-strong: var(--color-brass-alpha-a45);
  --neutral-faint-solid: var(--color-brass-50);
  --neutral-subtle-solid: var(--color-brass-100);
  --neutral-muted-solid: var(--color-brass-150);
  --neutral-default-solid: var(--color-brass-200);
  --neutral-emphasized-solid: var(--color-brass-300);
  --neutral-strong-solid: var(--color-brass-400);
  --neutral-fg-default: var(--color-brass-600);
  --neutral-fg-highContrast: var(--color-brass-700);
  --neutral-fg-onSolid: var(--color-white-solid);
  --neutral-border: var(--color-brass-200);
  --destructive-solid: var(--color-mulberry-500);
  --destructive-faint: var(--color-mulberry-alpha-a6);
  --destructive-subtle: var(--color-mulberry-alpha-a10);
  --destructive-muted: var(--color-mulberry-alpha-a15);
  --destructive-default: var(--color-mulberry-alpha-a20);
  --destructive-emphasized: var(--color-mulberry-alpha-a30);
  --destructive-strong: var(--color-mulberry-alpha-a45);
  --destructive-faint-solid: var(--color-mulberry-50);
  --destructive-subtle-solid: var(--color-mulberry-100);
  --destructive-muted-solid: var(--color-mulberry-150);
  --destructive-default-solid: var(--color-mulberry-200);
  --destructive-emphasized-solid: var(--color-mulberry-300);
  --destructive-strong-solid: var(--color-mulberry-400);
  --destructive-fg-default: var(--color-mulberry-600);
  --destructive-fg-highContrast: var(--color-mulberry-700);
  --destructive-fg-onSolid: var(--color-white-solid);
  --destructive-border: var(--color-mulberry-200);
  --constructive-solid: var(--color-fern-500);
  --constructive-faint: var(--color-fern-alpha-a6);
  --constructive-subtle: var(--color-fern-alpha-a10);
  --constructive-muted: var(--color-fern-alpha-a15);
  --constructive-default: var(--color-fern-alpha-a20);
  --constructive-emphasized: var(--color-fern-alpha-a30);
  --constructive-strong: var(--color-fern-alpha-a45);
  --constructive-faint-solid: var(--color-fern-50);
  --constructive-subtle-solid: var(--color-fern-100);
  --constructive-muted-solid: var(--color-fern-150);
  --constructive-default-solid: var(--color-fern-200);
  --constructive-emphasized-solid: var(--color-fern-300);
  --constructive-strong-solid: var(--color-fern-400);
  --constructive-fg-default: var(--color-fern-600);
  --constructive-fg-highContrast: var(--color-fern-700);
  --constructive-fg-onSolid: var(--color-white-solid);
  --constructive-border: var(--color-fern-200);
  --warning-solid: var(--color-copper-500);
  --warning-faint: var(--color-copper-alpha-a6);
  --warning-subtle: var(--color-copper-alpha-a10);
  --warning-muted: var(--color-copper-alpha-a15);
  --warning-default: var(--color-copper-alpha-a20);
  --warning-emphasized: var(--color-copper-alpha-a30);
  --warning-strong: var(--color-copper-alpha-a45);
  --warning-faint-solid: var(--color-copper-50);
  --warning-subtle-solid: var(--color-copper-100);
  --warning-muted-solid: var(--color-copper-150);
  --warning-default-solid: var(--color-copper-200);
  --warning-emphasized-solid: var(--color-copper-300);
  --warning-strong-solid: var(--color-copper-400);
  --warning-fg-default: var(--color-copper-600);
  --warning-fg-highContrast: var(--color-copper-700);
  --warning-fg-onSolid: var(--color-white-solid);
  --warning-border: var(--color-copper-200);
  --caution-solid: var(--color-sunflower-500);
  --caution-faint: var(--color-sunflower-alpha-a6);
  --caution-subtle: var(--color-sunflower-alpha-a10);
  --caution-muted: var(--color-sunflower-alpha-a15);
  --caution-default: var(--color-sunflower-alpha-a20);
  --caution-emphasized: var(--color-sunflower-alpha-a30);
  --caution-strong: var(--color-sunflower-alpha-a45);
  --caution-faint-solid: var(--color-sunflower-50);
  --caution-subtle-solid: var(--color-sunflower-100);
  --caution-muted-solid: var(--color-sunflower-150);
  --caution-default-solid: var(--color-sunflower-200);
  --caution-emphasized-solid: var(--color-sunflower-300);
  --caution-strong-solid: var(--color-sunflower-400);
  --caution-fg-default: var(--color-sunflower-600);
  --caution-fg-highContrast: var(--color-sunflower-700);
  --caution-fg-onSolid: var(--color-sunflower-950);
  --caution-border: var(--color-sunflower-200);
  --info-solid: var(--color-cobalt-500);
  --info-faint: var(--color-cobalt-alpha-a6);
  --info-subtle: var(--color-cobalt-alpha-a10);
  --info-muted: var(--color-cobalt-alpha-a15);
  --info-default: var(--color-cobalt-alpha-a20);
  --info-emphasized: var(--color-cobalt-alpha-a30);
  --info-strong: var(--color-cobalt-alpha-a45);
  --info-faint-solid: var(--color-cobalt-50);
  --info-subtle-solid: var(--color-cobalt-100);
  --info-muted-solid: var(--color-cobalt-150);
  --info-default-solid: var(--color-cobalt-200);
  --info-emphasized-solid: var(--color-cobalt-300);
  --info-strong-solid: var(--color-cobalt-400);
  --info-fg-default: var(--color-cobalt-600);
  --info-fg-highContrast: var(--color-cobalt-700);
  --info-fg-onSolid: 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);
  --chart-primary-stroke: var(--color-amber-600);
  --chart-primary-fill: var(--color-amber-600);
  --chart-primary-area-start: var(--color-amber-alpha-a20);
  --chart-primary-area-end: var(--color-amber-alpha-transparent);
  --chart-primary-projected: var(--color-amber-alpha-a45);
  --chart-accent-stroke: var(--color-gold-500);
  --chart-accent-fill: var(--color-gold-500);
  --chart-accent-area-start: var(--color-gold-alpha-a20);
  --chart-accent-area-end: var(--color-gold-alpha-transparent);
  --chart-accent-projected: var(--color-gold-alpha-a45);
  --chart-neutral-stroke: var(--color-brass-500);
  --chart-neutral-fill: var(--color-brass-500);
  --chart-neutral-area-start: var(--color-brass-alpha-a20);
  --chart-neutral-area-end: var(--color-brass-alpha-transparent);
  --chart-neutral-projected: var(--color-brass-alpha-a45);
  --chart-positive-stroke: var(--color-fern-500);
  --chart-positive-fill: var(--color-fern-500);
  --chart-positive-area-start: var(--color-fern-alpha-a20);
  --chart-positive-area-end: var(--color-fern-alpha-transparent);
  --chart-positive-projected: var(--color-fern-alpha-a45);
  --chart-negative-stroke: var(--color-mulberry-500);
  --chart-negative-fill: var(--color-mulberry-500);
  --chart-negative-area-start: var(--color-mulberry-alpha-a20);
  --chart-negative-area-end: var(--color-mulberry-alpha-transparent);
  --chart-negative-projected: var(--color-mulberry-alpha-a45);
  --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-a8);
  --input: var(--color-olive-750);
  --popover: var(--color-olive-900);
  --modal: var(--color-olive-800);
  --tooltip: var(--color-olive-100);
  --faint: var(--color-white-alpha-a6);
  --subtle: var(--color-white-alpha-a8);
  --muted: var(--color-white-alpha-a10);
  --default: var(--color-white-alpha-a15);
  --emphasized: var(--color-white-alpha-a25);
  --subtle-solid: var(--color-olive-850);
  --muted-solid: var(--color-olive-800);
  --default-solid: var(--color-olive-750);
  --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-onSolid-default: var(--color-white-solid);
  --fg-onSolid-muted: var(--color-white-alpha-a60);
  --fg-onSolid-subtle: var(--color-white-alpha-a40);
  --fg-onSolid-placeholder: var(--color-white-alpha-a30);
  --fg-onSolid-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-faint: var(--color-amber-alpha-a10);
  --primary-subtle: var(--color-amber-alpha-a20);
  --primary-muted: var(--color-amber-alpha-a30);
  --primary-default: var(--color-amber-alpha-a35);
  --primary-emphasized: var(--color-amber-alpha-a45);
  --primary-strong: var(--color-amber-alpha-a60);
  --primary-faint-solid: var(--color-amber-950);
  --primary-subtle-solid: var(--color-amber-900);
  --primary-muted-solid: var(--color-amber-850);
  --primary-default-solid: var(--color-amber-800);
  --primary-emphasized-solid: var(--color-amber-700);
  --primary-strong-solid: var(--color-amber-600);
  --primary-fg-default: var(--color-amber-300);
  --primary-fg-highContrast: var(--color-amber-200);
  --primary-fg-onSolid: var(--color-amber-950);
  --primary-border: var(--color-amber-800);
  --accent-solid: var(--color-gold-500);
  --accent-faint: var(--color-gold-alpha-a10);
  --accent-subtle: var(--color-gold-alpha-a20);
  --accent-muted: var(--color-gold-alpha-a30);
  --accent-default: var(--color-gold-alpha-a35);
  --accent-emphasized: var(--color-gold-alpha-a45);
  --accent-strong: var(--color-gold-alpha-a60);
  --accent-faint-solid: var(--color-gold-950);
  --accent-subtle-solid: var(--color-gold-900);
  --accent-muted-solid: var(--color-gold-850);
  --accent-default-solid: var(--color-gold-800);
  --accent-emphasized-solid: var(--color-gold-700);
  --accent-strong-solid: var(--color-gold-600);
  --accent-fg-default: var(--color-gold-300);
  --accent-fg-highContrast: var(--color-gold-200);
  --accent-fg-onSolid: var(--color-gold-950);
  --accent-border: var(--color-gold-800);
  --neutral-solid: var(--color-olive-300);
  --neutral-faint: var(--color-olive-alpha-a10);
  --neutral-subtle: var(--color-olive-alpha-a20);
  --neutral-muted: var(--color-olive-alpha-a30);
  --neutral-default: var(--color-olive-alpha-a35);
  --neutral-emphasized: var(--color-olive-alpha-a45);
  --neutral-strong: var(--color-olive-alpha-a60);
  --neutral-faint-solid: var(--color-olive-900);
  --neutral-subtle-solid: var(--color-olive-850);
  --neutral-muted-solid: var(--color-olive-800);
  --neutral-default-solid: var(--color-olive-750);
  --neutral-emphasized-solid: var(--color-olive-700);
  --neutral-strong-solid: var(--color-olive-600);
  --neutral-fg-default: var(--color-brass-300);
  --neutral-fg-highContrast: var(--color-brass-200);
  --neutral-fg-onSolid: var(--color-olive-950);
  --neutral-border: var(--color-olive-700);
  --destructive-solid: var(--color-mulberry-500);
  --destructive-faint: var(--color-mulberry-alpha-a10);
  --destructive-subtle: var(--color-mulberry-alpha-a20);
  --destructive-muted: var(--color-mulberry-alpha-a30);
  --destructive-default: var(--color-mulberry-alpha-a35);
  --destructive-emphasized: var(--color-mulberry-alpha-a45);
  --destructive-strong: var(--color-mulberry-alpha-a60);
  --destructive-faint-solid: var(--color-mulberry-950);
  --destructive-subtle-solid: var(--color-mulberry-900);
  --destructive-muted-solid: var(--color-mulberry-850);
  --destructive-default-solid: var(--color-mulberry-800);
  --destructive-emphasized-solid: var(--color-mulberry-700);
  --destructive-strong-solid: var(--color-mulberry-600);
  --destructive-fg-default: var(--color-mulberry-300);
  --destructive-fg-highContrast: var(--color-mulberry-200);
  --destructive-fg-onSolid: var(--color-white-solid);
  --destructive-border: var(--color-mulberry-800);
  --constructive-solid: var(--color-fern-500);
  --constructive-faint: var(--color-fern-alpha-a10);
  --constructive-subtle: var(--color-fern-alpha-a20);
  --constructive-muted: var(--color-fern-alpha-a30);
  --constructive-default: var(--color-fern-alpha-a35);
  --constructive-emphasized: var(--color-fern-alpha-a45);
  --constructive-strong: var(--color-fern-alpha-a60);
  --constructive-faint-solid: var(--color-fern-950);
  --constructive-subtle-solid: var(--color-fern-900);
  --constructive-muted-solid: var(--color-fern-850);
  --constructive-default-solid: var(--color-fern-800);
  --constructive-emphasized-solid: var(--color-fern-700);
  --constructive-strong-solid: var(--color-fern-600);
  --constructive-fg-default: var(--color-fern-300);
  --constructive-fg-highContrast: var(--color-fern-200);
  --constructive-fg-onSolid: var(--color-white-solid);
  --constructive-border: var(--color-fern-800);
  --warning-solid: var(--color-copper-500);
  --warning-faint: var(--color-copper-alpha-a10);
  --warning-subtle: var(--color-copper-alpha-a20);
  --warning-muted: var(--color-copper-alpha-a30);
  --warning-default: var(--color-copper-alpha-a35);
  --warning-emphasized: var(--color-copper-alpha-a45);
  --warning-strong: var(--color-copper-alpha-a60);
  --warning-faint-solid: var(--color-copper-950);
  --warning-subtle-solid: var(--color-copper-900);
  --warning-muted-solid: var(--color-copper-850);
  --warning-default-solid: var(--color-copper-800);
  --warning-emphasized-solid: var(--color-copper-700);
  --warning-strong-solid: var(--color-copper-600);
  --warning-fg-default: var(--color-copper-300);
  --warning-fg-highContrast: var(--color-copper-200);
  --warning-fg-onSolid: var(--color-white-solid);
  --warning-border: var(--color-copper-800);
  --caution-solid: var(--color-sunflower-500);
  --caution-faint: var(--color-sunflower-alpha-a10);
  --caution-subtle: var(--color-sunflower-alpha-a20);
  --caution-muted: var(--color-sunflower-alpha-a30);
  --caution-default: var(--color-sunflower-alpha-a35);
  --caution-emphasized: var(--color-sunflower-alpha-a45);
  --caution-strong: var(--color-sunflower-alpha-a60);
  --caution-faint-solid: var(--color-sunflower-950);
  --caution-subtle-solid: var(--color-sunflower-900);
  --caution-muted-solid: var(--color-sunflower-850);
  --caution-default-solid: var(--color-sunflower-800);
  --caution-emphasized-solid: var(--color-sunflower-700);
  --caution-strong-solid: var(--color-sunflower-600);
  --caution-fg-default: var(--color-sunflower-300);
  --caution-fg-highContrast: var(--color-sunflower-200);
  --caution-fg-onSolid: var(--color-sunflower-950);
  --caution-border: var(--color-sunflower-800);
  --info-solid: var(--color-cobalt-500);
  --info-faint: var(--color-cobalt-alpha-a10);
  --info-subtle: var(--color-cobalt-alpha-a20);
  --info-muted: var(--color-cobalt-alpha-a30);
  --info-default: var(--color-cobalt-alpha-a35);
  --info-emphasized: var(--color-cobalt-alpha-a45);
  --info-strong: var(--color-cobalt-alpha-a60);
  --info-faint-solid: var(--color-cobalt-950);
  --info-subtle-solid: var(--color-cobalt-900);
  --info-muted-solid: var(--color-cobalt-850);
  --info-default-solid: var(--color-cobalt-800);
  --info-emphasized-solid: var(--color-cobalt-700);
  --info-strong-solid: var(--color-cobalt-600);
  --info-fg-default: var(--color-cobalt-300);
  --info-fg-highContrast: var(--color-cobalt-200);
  --info-fg-onSolid: 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);
  --chart-primary-stroke: var(--color-amber-500);
  --chart-primary-fill: var(--color-amber-500);
  --chart-primary-area-start: var(--color-amber-alpha-a35);
  --chart-primary-area-end: var(--color-amber-alpha-transparent);
  --chart-primary-projected: var(--color-amber-alpha-a60);
  --chart-accent-stroke: var(--color-gold-500);
  --chart-accent-fill: var(--color-gold-500);
  --chart-accent-area-start: var(--color-gold-alpha-a35);
  --chart-accent-area-end: var(--color-gold-alpha-transparent);
  --chart-accent-projected: var(--color-gold-alpha-a60);
  --chart-neutral-stroke: var(--color-olive-300);
  --chart-neutral-fill: var(--color-olive-300);
  --chart-neutral-area-start: var(--color-olive-alpha-a35);
  --chart-neutral-area-end: var(--color-olive-alpha-transparent);
  --chart-neutral-projected: var(--color-olive-alpha-a60);
  --chart-positive-stroke: var(--color-fern-500);
  --chart-positive-fill: var(--color-fern-500);
  --chart-positive-area-start: var(--color-fern-alpha-a35);
  --chart-positive-area-end: var(--color-fern-alpha-transparent);
  --chart-positive-projected: var(--color-fern-alpha-a60);
  --chart-negative-stroke: var(--color-mulberry-500);
  --chart-negative-fill: var(--color-mulberry-500);
  --chart-negative-area-start: var(--color-mulberry-alpha-a35);
  --chart-negative-area-end: var(--color-mulberry-alpha-transparent);
  --chart-negative-projected: var(--color-mulberry-alpha-a60);
  --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. Top-edge inset highlight matches
     hero CTA placement (sections/hero.css) — no border ring so the glow
     sits flush against the shape edge (inherits the base 1px transparent
     border for box-model parity with other variants). A quieter cousin of the
     hero CTA's frosted treatment, which still overrides this. First declaration
     is the no-color-mix fallback. */
  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-onSolid-default);
  box-shadow:
    inset 0 1px 0 0 var(--color-white-alpha-a20),
    inset 0 4px 8px -4px var(--color-white-alpha-a30);
}

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

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

.button--solid:focus-visible {
    color: var(--fg-onSolid-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-onSolid-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-default);
    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-default);
    }

.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-onSolid-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-onSolid-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-onSolid-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-onSolid-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-onSolid-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;
      /* Stretch both cards to equal height (like the benefits grid). When one
         card's copy wraps to more lines, the shorter card just gains empty
         space beneath its copy rather than centring at a smaller height. */
      align-items: stretch;
      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-onSolid-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-onSolid-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-onSolid-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-onSolid-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-onSolid-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-default);
  }

.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-onSolid-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-onSolid-muted);
}

.hiring__pillar-text strong {
    font-weight: var(--font-weight-medium);
    color: var(--fg-onSolid-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-onSolid-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-onSolid-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-default);
}

.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;
}

/* Page-level enter/leave for `.site-header` + `#main` — wired in
   `src/scripts/page-transition.js`. Mirrors auth fade + lift vocabulary
   (10px offset, 4px blur). Hidden until JS marks the document ready so
   the first paint doesn't flash content before the header entrance. */

@media (prefers-reduced-motion: no-preference) {
  html:not(.page-transition-ready) .site-header,
  html:not(.page-transition-ready) #main {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(4px);
    will-change: opacity, transform, filter;
  }

  html.page-transition-leaving {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.page-transition-ready) .site-header,
  html:not(.page-transition-ready) #main {
    opacity: 1;
    transform: none;
    filter: 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));
  }
}