*,
*::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;
}

:root {
  /* --- semantic --- */
  --color-bg: var(--color-brand-porcelain);
  --color-primary: var(--color-brand-amber);
  --color-primary-hover: var(--color-brand-amber-a90);
  --color-focus: var(--color-brand-gold);
  --color-border: #d9d9d9;

  /* --- intent --- */
  --color-error: var(--mulberry-500);
  --color-error-subtle: var(--mulberry-100);

  /* --- text --- */
  --color-text: var(--color-black-a90);
  --color-text-muted: var(--color-black-a50);
  --color-text-placeholder: var(--color-black-a35);
  --color-text-inverted-default: var(--color-white-solid);
  --color-text-inverted-muted: var(--color-white-a70);
  --color-text-success: #166534;
  --color-text-error: #991b1b;

  /* --- surface --- */
  --color-bg-canvas: var(--color-brand-porcelain);
  --color-bg-card: var(--color-brand-neutral-a10);

  /* --- brand colors --- */
  --color-brand-gold: #e2a336;
  --color-brand-amber: #ab6400;
  --color-brand-amber-light: #d78d3f;
  --color-brand-neutral: #a68d3f;
  --color-brand-burgundy: #460815;
  --color-brand-coffee-bean: #180207;
  --color-brand-olive: #8a7d42;
  --color-brand-deep-teal: #195257;
  --color-brand-eggshell: #ede9d9;
  --color-brand-soft-linen: #f0ede0;
  --color-brand-porcelain: #faf9f2;
  --color-brand-sand-dune: #ddd7ba;

  /* --- brand / gold --- */
  --color-brand-gold-solid: var(--color-brand-gold);
  --color-brand-gold-transparent: #e2a33600;
  --color-brand-gold-a5: #e2a3360d;
  --color-brand-gold-a10: #e2a3361a;
  --color-brand-gold-a15: #e2a33626;
  --color-brand-gold-a20: #e2a33633;
  --color-brand-gold-a25: #e2a33640;
  --color-brand-gold-a30: #e2a3364d;
  --color-brand-gold-a35: #e2a33659;
  --color-brand-gold-a40: #e2a33666;
  --color-brand-gold-a45: #e2a33673;
  --color-brand-gold-a50: #e2a33680;
  --color-brand-gold-a55: #e2a3368c;
  --color-brand-gold-a60: #e2a33699;
  --color-brand-gold-a65: #e2a336a6;
  --color-brand-gold-a70: #e2a336b2;
  --color-brand-gold-a75: #e2a336bf;
  --color-brand-gold-a80: #e2a336cc;
  --color-brand-gold-a85: #e2a336d9;
  --color-brand-gold-a90: #e2a336e5;
  --color-brand-gold-a95: #e2a336f2;

  /* --- brand / amber --- */
  --color-brand-amber-solid: var(--color-brand-amber);
  --color-brand-amber-transparent: #ab640000;
  --color-brand-amber-a5: #ab64000d;
  --color-brand-amber-a10: #ab64001a;
  --color-brand-amber-a15: #ab640026;
  --color-brand-amber-a20: #ab640033;
  --color-brand-amber-a25: #ab640040;
  --color-brand-amber-a30: #ab64004d;
  --color-brand-amber-a35: #ab640059;
  --color-brand-amber-a40: #ab640066;
  --color-brand-amber-a45: #ab640073;
  --color-brand-amber-a50: #ab640080;
  --color-brand-amber-a55: #ab64008c;
  --color-brand-amber-a60: #ab640099;
  --color-brand-amber-a65: #ab6400a6;
  --color-brand-amber-a70: #ab6400b2;
  --color-brand-amber-a75: #ab6400bf;
  --color-brand-amber-a80: #ab6400cc;
  --color-brand-amber-a85: #ab6400d9;
  --color-brand-amber-a90: #ab6400e5;
  --color-brand-amber-a95: #ab6400f2;

  /* --- brand / amber-light --- */
  --color-brand-amber-light-solid: var(--color-brand-amber-light);
  --color-brand-amber-light-transparent: #d78d3f00;
  --color-brand-amber-light-a5: #d78d3f0d;
  --color-brand-amber-light-a10: #d78d3f1a;
  --color-brand-amber-light-a15: #d78d3f26;
  --color-brand-amber-light-a20: #d78d3f33;
  --color-brand-amber-light-a25: #d78d3f40;
  --color-brand-amber-light-a30: #d78d3f4d;
  --color-brand-amber-light-a35: #d78d3f59;
  --color-brand-amber-light-a40: #d78d3f66;
  --color-brand-amber-light-a45: #d78d3f73;
  --color-brand-amber-light-a50: #d78d3f80;
  --color-brand-amber-light-a55: #d78d3f8c;
  --color-brand-amber-light-a60: #d78d3f99;
  --color-brand-amber-light-a65: #d78d3fa6;
  --color-brand-amber-light-a70: #d78d3fb2;
  --color-brand-amber-light-a75: #d78d3fbf;
  --color-brand-amber-light-a80: #d78d3fcc;
  --color-brand-amber-light-a85: #d78d3fd9;
  --color-brand-amber-light-a90: #d78d3fe5;
  --color-brand-amber-light-a95: #d78d3ff2;

  /* --- brand / neutral --- */
  --color-brand-neutral-solid: var(--color-brand-neutral);
  --color-brand-neutral-transparent: #a68d3f00;
  --color-brand-neutral-a5: #a68d3f0d;
  --color-brand-neutral-a10: #a68d3f1a;
  --color-brand-neutral-a15: #a68d3f26;
  --color-brand-neutral-a20: #a68d3f33;
  --color-brand-neutral-a25: #a68d3f40;
  --color-brand-neutral-a30: #a68d3f4d;
  --color-brand-neutral-a35: #a68d3f59;
  --color-brand-neutral-a40: #a68d3f66;
  --color-brand-neutral-a45: #a68d3f73;
  --color-brand-neutral-a50: #a68d3f80;
  --color-brand-neutral-a55: #a68d3f8c;
  --color-brand-neutral-a60: #a68d3f99;
  --color-brand-neutral-a65: #a68d3fa6;
  --color-brand-neutral-a70: #a68d3fb2;
  --color-brand-neutral-a75: #a68d3fbf;
  --color-brand-neutral-a80: #a68d3fcc;
  --color-brand-neutral-a85: #a68d3fd9;
  --color-brand-neutral-a90: #a68d3fe5;
  --color-brand-neutral-a95: #a68d3ff2;

  /* --- brand / burgundy --- */

  --color-brand-burgundy-solid: var(--color-brand-burgundy);
  --color-brand-burgundy-transparent: #46081500;
  --color-brand-burgundy-a5: #4608150d;
  --color-brand-burgundy-a10: #4608151a;
  --color-brand-burgundy-a15: #46081526;
  --color-brand-burgundy-a20: #46081533;
  --color-brand-burgundy-a25: #46081540;
  --color-brand-burgundy-a30: #4608154d;
  --color-brand-burgundy-a35: #46081559;
  --color-brand-burgundy-a40: #46081566;
  --color-brand-burgundy-a45: #46081573;
  --color-brand-burgundy-a50: #46081580;
  --color-brand-burgundy-a55: #4608158c;
  --color-brand-burgundy-a60: #46081599;
  --color-brand-burgundy-a65: #460815a6;
  --color-brand-burgundy-a70: #460815b2;
  --color-brand-burgundy-a75: #460815bf;
  --color-brand-burgundy-a80: #460815cc;
  --color-brand-burgundy-a85: #460815d9;
  --color-brand-burgundy-a90: #460815e5;
  --color-brand-burgundy-a95: #460815f2;

  /* --- brand / olive --- */
  --color-brand-olive-solid: var(--color-brand-olive);
  --color-brand-olive-transparent: #8a7d4200;
  --color-brand-olive-a5: #8a7d420d;
  --color-brand-olive-a10: #8a7d421a;
  --color-brand-olive-a15: #8a7d4226;
  --color-brand-olive-a20: #8a7d4233;
  --color-brand-olive-a25: #8a7d4240;
  --color-brand-olive-a30: #8a7d424d;
  --color-brand-olive-a35: #8a7d4259;
  --color-brand-olive-a40: #8a7d4266;
  --color-brand-olive-a45: #8a7d4273;
  --color-brand-olive-a50: #8a7d4280;
  --color-brand-olive-a55: #8a7d428c;
  --color-brand-olive-a60: #8a7d4299;
  --color-brand-olive-a65: #8a7d42a6;
  --color-brand-olive-a70: #8a7d42b2;
  --color-brand-olive-a75: #8a7d42bf;
  --color-brand-olive-a80: #8a7d42cc;
  --color-brand-olive-a85: #8a7d42d9;
  --color-brand-olive-a90: #8a7d42e5;
  --color-brand-olive-a95: #8a7d42f2;

  /* --- common colors --- */
  --color-black: var(--color-black-solid);
  --color-white: var(--color-white-solid);
  --color-transparent: var(--color-white-transparent);

  /* --- primitives / black --- */
  --color-black-solid: #000000;
  --color-black-transparent: #00000000;
  --color-black-a3: #00000008;
  --color-black-a5: #0000000d;
  --color-black-a10: #0000001a;
  --color-black-a15: #00000026;
  --color-black-a20: #00000033;
  --color-black-a25: #00000040;
  --color-black-a30: #0000004d;
  --color-black-a35: #00000059;
  --color-black-a40: #00000066;
  --color-black-a45: #00000073;
  --color-black-a50: #00000080;
  --color-black-a55: #0000008c;
  --color-black-a60: #00000099;
  --color-black-a65: #000000a6;
  --color-black-a70: #000000b2;
  --color-black-a75: #000000bf;
  --color-black-a80: #000000cc;
  --color-black-a85: #000000d9;
  --color-black-a90: #000000e5;
  --color-black-a95: #000000f2;

  /* --- primitives / white --- */
  --color-white-solid: #ffffff;
  --color-white-transparent: #ffffff00;
  --color-white-a5: #ffffff0d;
  --color-white-a10: #ffffff1a;
  --color-white-a15: #ffffff26;
  --color-white-a20: #ffffff33;
  --color-white-a25: #ffffff40;
  --color-white-a30: #ffffff4d;
  --color-white-a35: #ffffff59;
  --color-white-a40: #ffffff66;
  --color-white-a45: #ffffff73;
  --color-white-a50: #ffffff80;
  --color-white-a55: #ffffff8c;
  --color-white-a60: #ffffff99;
  --color-white-a65: #ffffffa6;
  --color-white-a70: #ffffffb2;
  --color-white-a75: #ffffffbf;
  --color-white-a80: #ffffffcc;
  --color-white-a85: #ffffffd9;
  --color-white-a90: #ffffffe5;
  --color-white-a95: #fffffff2;

  /* --- primitives / sand --- */
  --color-sand-50: #fafaf9;
  --color-sand-100: #f5f5f3;
  --color-sand-200: #e5e5e3;
  --color-sand-300: #d4d4d1;
  --color-sand-400: #a1a19c;
  --color-sand-500: #82827c;
  --color-sand-600: #53534e;
  --color-sand-700: #40403c;
  --color-sand-800: #262623;
  --color-sand-900: #171714;
  --color-sand-950: #0a0a08;

  /* --- primitives / mulberry — destructive (red maps to mulberry · 19-step) --- */
  --mulberry-50: oklch(98.5% 0.0031 18);
  --mulberry-100: oklch(95.18% 0.0149 18);
  --mulberry-150: oklch(91.73% 0.0272 18);
  --mulberry-200: oklch(88.13% 0.0401 18);
  --mulberry-250: oklch(84.35% 0.0536 18);
  --mulberry-300: oklch(80.33% 0.0679 18);
  --mulberry-350: oklch(75.99% 0.0834 18);
  --mulberry-400: oklch(71.19% 0.1005 18);
  --mulberry-450: oklch(65.56% 0.1206 18);
  --mulberry-500: oklch(56.55% 0.1528 18);
  --mulberry-550: oklch(48.27% 0.1249 18);
  --mulberry-600: oklch(43.1% 0.1075 18);
  --mulberry-650: oklch(38.68% 0.0926 18);
  --mulberry-700: oklch(34.7% 0.0792 18);
  --mulberry-750: oklch(31% 0.0667 18);
  --mulberry-800: oklch(27.53% 0.055 18);
  --mulberry-850: oklch(24.22% 0.0439 18);
  --mulberry-900: oklch(21.05% 0.0332 18);
  --mulberry-950: oklch(18% 0.0229 18);

  /* --- primitives / fern — success (green maps to fern · 19-step) --- */
  --fern-50: oklch(98.5% 0.0029 140.74);
  --fern-100: oklch(96.03% 0.0139 140.74);
  --fern-150: oklch(93.46% 0.0254 140.74);
  --fern-200: oklch(90.78% 0.0374 140.74);
  --fern-250: oklch(87.96% 0.05 140.74);
  --fern-300: oklch(84.96% 0.0633 140.74);
  --fern-350: oklch(81.73% 0.0778 140.74);
  --fern-400: oklch(78.15% 0.0938 140.74);
  --fern-450: oklch(73.95% 0.1125 140.74);
  --fern-500: oklch(67.24% 0.1425 140.74);
  --fern-550: oklch(56.66% 0.1165 140.74);
  --fern-600: oklch(50.06% 0.1002 140.74);
  --fern-650: oklch(44.42% 0.0864 140.74);
  --fern-700: oklch(39.33% 0.0738 140.74);
  --fern-750: oklch(34.61% 0.0622 140.74);
  --fern-800: oklch(30.17% 0.0513 140.74);
  --fern-850: oklch(25.94% 0.0409 140.74);
  --fern-900: oklch(21.9% 0.031 140.74);
  --fern-950: oklch(18% 0.0214 140.74);

  /* --- primitives / cobalt — info (blue maps to cobalt · 19-step) --- */
  --cobalt-50: oklch(98.5% 0.0022 245.46);
  --cobalt-100: oklch(95.45% 0.0106 245.46);
  --cobalt-150: oklch(92.29% 0.0194 245.46);
  --cobalt-200: oklch(88.99% 0.0285 245.46);
  --cobalt-250: oklch(85.52% 0.0382 245.46);
  --cobalt-300: oklch(81.83% 0.0484 245.46);
  --cobalt-350: oklch(77.86% 0.0594 245.46);
  --cobalt-400: oklch(73.45% 0.0717 245.46);
  --cobalt-450: oklch(68.29% 0.086 245.46);
  --cobalt-500: oklch(60.02% 0.1089 245.46);
  --cobalt-550: oklch(51% 0.089 245.46);
  --cobalt-600: oklch(45.36% 0.0766 245.46);
  --cobalt-650: oklch(40.55% 0.066 245.46);
  --cobalt-700: oklch(36.2% 0.0564 245.46);
  --cobalt-750: oklch(32.18% 0.0476 245.46);
  --cobalt-800: oklch(28.38% 0.0392 245.46);
  --cobalt-850: oklch(24.78% 0.0313 245.46);
  --cobalt-900: oklch(21.33% 0.0237 245.46);
  --cobalt-950: oklch(18% 0.0163 245.46);

  /* --- primitives / copper — warning (orange/yellow maps to copper · 19-step) --- */
  --copper-50: oklch(98.5% 0.0027 50.85);
  --copper-100: oklch(95.91% 0.0133 50.85);
  --copper-150: oklch(93.22% 0.0243 50.85);
  --copper-200: oklch(90.42% 0.0357 50.85);
  --copper-250: oklch(87.46% 0.0478 50.85);
  --copper-300: oklch(84.33% 0.0606 50.85);
  --copper-350: oklch(80.94% 0.0744 50.85);
  --copper-400: oklch(77.2% 0.0897 50.85);
  --copper-450: oklch(72.81% 0.1076 50.85);
  --copper-500: oklch(65.78% 0.1363 50.85);
  --copper-550: oklch(55.52% 0.1114 50.85);
  --copper-600: oklch(49.11% 0.0959 50.85);
  --copper-650: oklch(43.64% 0.0826 50.85);
  --copper-700: oklch(38.7% 0.0706 50.85);
  --copper-750: oklch(34.12% 0.0595 50.85);
  --copper-800: oklch(29.81% 0.0491 50.85);
  --copper-850: oklch(25.71% 0.0391 50.85);
  --copper-900: oklch(21.78% 0.0296 50.85);
  --copper-950: oklch(18% 0.0204 50.85);
}

:root {
  --font-body: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --- font sizes --- */
  --font-size-2xs: 0.6875rem; /* 11px */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-md: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 2rem; /* 32px */
  --font-size-4xl: 2.5rem; /* 40px */
  --font-size-5xl: 3rem; /* 48px */
  --font-size-6xl: 4rem; /* 64px */

  /* --- font weight --- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- line height --- */
  --line-height-tight: 1.15; /* display headings (48–64px) */
  --line-height-compact: 1.2; /* section headings (40px) */
  --line-height-normal: 1.3; /* body text, subtitles (12–24px) */
  --line-height-relaxed: 1.4; /* smaller body text, UI elements */

  /* --- letter spacing --- */
  --letter-spacing-dense: -0.02em; /* -2% · display headings (40–64px) */
  --letter-spacing-normal: 0em; /* 0% · body copy (20–24px) */
  --letter-spacing-relaxed: 0.01em; /* 1% · body text (18px) */
  --letter-spacing-wide: 0.02em; /* 2% · body text (14–16px) */
  --letter-spacing-loose: 0.04em; /* 4% · footnotes (12px) */
  --letter-spacing-spacious: 0.1em; /* 10% · uppercase headings (12px) */
}

:root {
  /* --- spacing scale (1 unit = 4px) --- */
  --spacing-half: 0.125rem; /* 2px */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-12: 3rem; /* 48px */
  --spacing-16: 4rem; /* 64px */
  --spacing-20: 5rem; /* 80px */
  --spacing-24: 6rem; /* 96px */
  --spacing-30: 7.5rem; /* 120px */
  --spacing-32: 8rem; /* 128px */
  --spacing-40: 10rem; /* 160px */
  --spacing-50: 12.5rem; /* 200px */
  --spacing-60: 15rem; /* 240px */
}

:root {
  --radius-xs: 0.125rem; /* 2px */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-2xl: 1rem; /* 16px */
  --radius-3xl: 1.5rem; /* 24px */
  --radius-4xl: 2rem; /* 32px */
  --radius-5xl: 2.5rem; /* 40px */
  --radius-6xl: 3rem; /* 48px */
  --radius-7xl: 3.5rem; /* 56px */
  --radius-full: 9999px;
  --radius-square: 0;

  --radius-section-card-lg: var(--radius-4xl);
  --radius-section-card-md: var(--radius-3xl);

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

:root {
  --shadow-card: 0 12px 60px 0 var(--color-black-a20), 0 12px 32px -16px var(--color-black-a30);
  /* drop-shadow follows squircle outline; box-shadow does not (rectangular halo at corners) */
  --filter-shadow-card: drop-shadow(0 12px 32px var(--color-black-a30))
    drop-shadow(0 12px 60px var(--color-black-a20));
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--color-text);
  background: linear-gradient(to bottom, var(--color-brand-eggshell), var(--color-brand-porcelain))
    no-repeat;
  background-size: 100% 100vh;
  background-color: var(--color-bg);
  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: 768px) {

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

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

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

main {
  flex: 1;
}

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

a:hover {
    color: var(--color-primary-hover);
  }

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

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--spacing-4);
  z-index: 1000;
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-primary);
  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-dense);
  font-size: var(--font-size-4xl);
}

@media (min-width: 1024px) {

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-dense);
  font-size: var(--font-size-3xl);
}

@media (min-width: 1024px) {

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-compact);
  letter-spacing: var(--letter-spacing-dense);
}

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-relaxed);
}

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-wide);
}

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

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: 1024px) {

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-loose);
}

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: 768px) {

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

@media (min-width: 1024px) {

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

@media (min-width: 1280px) {

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

@media (min-width: 1536px) {

.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-wide);
  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 {
  background-color: var(--color-brand-amber);
  color: var(--color-text-inverted-default);
}

.button--solid:hover {
    color: var(--color-text-inverted-default);
    background-color: var(--color-brand-amber-a90);
  }

.button--solid:active {
    color: var(--color-text-inverted-default);
    background-color: var(--color-brand-amber-a95);
  }

.button--solid:focus-visible {
    color: var(--color-text-inverted-default);
  }

.button--subtle {
  background-color: var(--color-brand-amber-a10);
  color: var(--color-brand-amber);
  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-brand-amber-a15);
    color: var(--color-brand-amber);
  }

.button--ghost {
  background-color: var(--color-black-transparent);
  color: var(--color-text-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-brand-neutral-a5);
    color: var(--color-text-muted);
  }

.button--ghost:active {
    background-color: var(--color-brand-neutral-a10);
    color: var(--color-text-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-brand-neutral-a10);
  }

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

/* --- sizes --- */

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

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

.button--lg {
  min-height: var(--button-size-lg);
  font-size: var(--font-size-md);
  padding-inline: var(--spacing-6);
  --_squircle-fallback: var(--squircle-lg-fallback);
  --_squircle-enhanced: var(--squircle-lg-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(--color-border);
    --_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(--color-brand-amber);
      border-color: var(--color-brand-amber);
      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(--color-focus);
      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-wide);
    color: var(--color-text);
    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(--color-border);
  }

.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(--color-text);
  }

.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(--color-error);
  color: var(--color-text-inverted-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-wide);
    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-a50);
  border: 1px solid var(--color-black-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-wide);
    color: var(--color-text);
    background: transparent;
    border: none;
  }

.inline-form__input::placeholder {
      color: var(--color-text-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-a80);
    outline-color: var(--color-focus);
  }

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

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

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

.inline-form__submit:focus-visible {
      outline: 2px solid var(--color-focus);
      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-wide);
    color: var(--color-text-success);
    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-wide);
  }

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

.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-wide);
    color: var(--color-text);
  }

.text-input__field {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--color-white-solid);
    border: 1px solid var(--color-border);
    --_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(--color-focus);
      box-shadow: 0 0 0 2px var(--color-brand-gold-a30);
    }

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

.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-wide);
    color: var(--color-text);
    background: transparent;
    border: none;
  }

.text-input__input::placeholder {
      color: var(--color-text-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(--color-text-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-a3);
      color: var(--color-text);
    }

.text-input__toggle:focus-visible {
      outline: 2px solid var(--color-focus);
      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: 768px) {

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

@media (min-width: 1024px) {

: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: 768px) {

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

@media (min-width: 1024px) {

.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: 480px) {

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

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

@media (min-width: 480px) {

.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: 480px) {

.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-md);
  background-color: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

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

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

@media (min-width: 480px) {

.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(--color-bg);
  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: 480px) {

.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-dense);
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
}

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

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

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

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

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

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

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: 768px) {

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

@media (min-width: 1024px) {

.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-lg);
    min-height: calc(100dvh - var(--site-header-block-size) - var(--spacing-2));
  }

@media (min-width: 768px) {

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

@media (min-width: 1024px) {

.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(--color-bg-card);
  }

.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-brand-burgundy);
    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: 768px) {

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

@media (min-width: 1024px) {

.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: 768px) {

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

@media (min-width: 1536px) {

.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-a15);
    backdrop-filter: blur(4px);
    color: var(--color-text-inverted-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-wide);
    transition: background-color 0.2s ease;
  }

.hero__pill:hover,
    .hero__pill:focus-visible,
    .hero__pill:active {
      color: var(--color-text-inverted-default);
      background-color: var(--color-white-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-a30);
  }

@media not (min-width: 480px) {
    .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-dense);
    color: var(--color-text-inverted-default);
  }

@media (min-width: 768px) {

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

@media (min-width: 1536px) {

.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(--color-text-inverted-muted);
  }

@media (min-width: 768px) {

.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: 480px) {

.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-brand-gold-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-a5);
      box-shadow:
        0 14px 36px -10px var(--color-black-a25),
        0 4px 10px -4px var(--color-black-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-brand-amber-a70);
        border-color: var(--color-white-a10);
        box-shadow:
          0 20px 44px -10px var(--color-black-a30),
          0 6px 14px -4px var(--color-black-a20),
          inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
      }

.hero__cta-block > .button--solid:active {
        background-color: var(--color-brand-amber-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-wide);
    color: var(--color-text-inverted-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: 1024px) {

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

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

@media (min-width: 1024px) {

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

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

@media (min-width: 768px) {

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

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

@media (min-width: 768px) {

.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: 768px) {

.product__media {
      height: 280px
  }
    }

@media (min-width: 1024px) {

.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: 768px) {

.product__media-mark {
      width: 175px
  }
    }

@media (min-width: 1024px) {

.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-compact);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-text);
  }

.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(--color-text-muted);
  }

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

.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-compact);
    color: var(--color-text);
  }

.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-compact);
    letter-spacing: var(--letter-spacing-dense);
  }

@media (min-width: 768px) {

.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: 768px) {

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

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

@media (min-width: 1024px) {

.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: 1024px) {

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

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

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

@media (min-width: 768px) {

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

@media (min-width: 1024px) {

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

@media (min-width: 1280px) {

.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: 768px) {

.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-brand-amber-light-transparent) 0%,
      var(--color-brand-amber-light) 50%,
      var(--color-brand-amber-light-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(--color-text-muted);
  }

@media (min-width: 768px) {

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

@media (min-width: 1024px) {

.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-brand-amber-light);
      box-shadow: 0 0 0 4px var(--color-brand-amber-light-a15);
    }

.vision__logo {
    display: none;
  }

@media (min-width: 1280px) {

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

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

@media (min-width: 1024px) {

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

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

@media (min-width: 1024px) {

.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-compact);
    color: var(--color-text);
  }

.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-compact);
    letter-spacing: var(--letter-spacing-dense);
    color: var(--color-text);
  }

@media (min-width: 768px) {

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

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

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

@media (min-width: 768px) {

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

@media (min-width: 1024px) {

.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(--color-bg-card);
    border-radius: var(--radius-xl);
    overflow: hidden;
  }

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

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

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

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

.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-compact);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-text);
  }

.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(--color-text-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(--mulberry-950);
  background-image: url("/images/infrastructure-mesh-gradient.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-text-inverted-default);
  padding-block: var(--spacing-20);

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

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

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

@media (min-width: 480px) {

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

@media (min-width: 768px) {

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

@media (min-width: 1024px) {

.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-brand-gold-a10);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid var(--color-white-a5);
    border-radius: var(--radius-full);
    padding: var(--spacing-1) var(--spacing-4) var(--spacing-1) var(--spacing-1);
  }

@media (min-width: 480px) {

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

.infrastructure__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-black-a15);
    border: 1px solid var(--color-white-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-loose);
    white-space: nowrap;
    color: var(--color-text-inverted-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-loose);
    white-space: nowrap;
    color: var(--color-text-inverted-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: 480px) {

.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(--color-text-inverted-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(--color-text-inverted-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: 1024px) {

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

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

@media (min-width: 1024px) {

.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: 1024px) {

.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(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-compact);
    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-compact);
    letter-spacing: -0.04em;
    color: var(--color-text);
    margin: 0;
  }

@media (min-width: 768px) {

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

.how-reva-works__title-muted {
    color: var(--color-text-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(--color-text);
    margin: 0;
    max-width: 38rem;
  }

@media (min-width: 768px) {

.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-brand-olive-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(--color-text);
    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(--color-focus);
      outline-offset: 4px;
      border-radius: var(--radius-sm);
    }

.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-brand-neutral-a10);
    color: var(--color-text);
    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-compact);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-text-muted);
  }

@media (min-width: 768px) {

.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-brand-neutral-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(--color-text);
  }

.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(--color-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-brand-neutral-a30);
  }

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

.how-reva-works__step-trigger[aria-expanded="true"] .how-reva-works__step-icon {
    color: var(--color-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(--color-text);
      margin: 0;
      max-width: 34rem;
    }

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

@media (min-width: 1024px) {

.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-lg);
    aspect-ratio: 1 / 1;
    width: 100%;
    container-type: inline-size;
    background-color: var(--color-brand-eggshell);
    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-a60);
    border: 0.1em solid var(--color-white-a45);
    box-shadow:
      0 0.6em 1.8em -0.4em var(--color-black-a20),
      0 0.15em 0.5em var(--color-black-a5);
    backdrop-filter: blur(1.2em) saturate(135%);
    -webkit-backdrop-filter: blur(1.2em) saturate(135%);
    color: var(--color-text);
    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-compact);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text);
  }

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

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

/* 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-brand-neutral-a30);
    font-size: 1.1em;
    font-weight: var(--font-weight-medium);
    line-height: 1;
    letter-spacing: var(--letter-spacing-loose);
    color: var(--color-text);
  }

/* ─── 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(--fern-500);
  }

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

.how-reva-works__dot--positive {
    background-color: var(--color-text-success);
  }

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

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

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

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

/* ─── 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(--color-text-muted);
  }

.how-reva-works__row-label {
    font-size: 1.3em;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-compact);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text);
  }

.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-loose);
    color: var(--color-text-muted);
  }

.how-reva-works__row-more {
    flex-shrink: 0;
    width: 1.6em;
    height: 1.6em;
    color: var(--color-text-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-a50);
    border: 0.1em solid var(--color-brand-neutral-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(--color-brand-amber);
  }

.how-reva-works__row-separator {
    display: block;
    width: 0;
    height: 1.2em;
    margin-left: 2em;
    border-left: 0.1em solid var(--color-brand-neutral-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(--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-loose);
    color: var(--color-text);
  }

.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(--color-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-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-a80);
    box-shadow: 0 0 0 0.2em var(--color-white-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(--color-error);
    color: var(--color-white);
  }

.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-a30) 0,
      var(--color-white-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(--color-brand-gold);
    box-shadow: 0 0 1.6em var(--color-black-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-a70);
    border: 0.1em solid var(--color-white-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(--color-text-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-wide);
    color: var(--color-text);
  }

/* 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(--color-brand-gold);
  }

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

.how-reva-works__sparkline-line {
    fill: none;
    stroke: var(--color-brand-gold);
    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-wide);
    color: var(--color-text);
  }

.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(--color-brand-amber);
  }

.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-loose);
    color: var(--color-text-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-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-compact);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-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(--color-text);
  }

/* ─── 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-brand-neutral-a30);
    stroke-width: 1;
  }

.how-reva-works__chart-divider {
    stroke: var(--color-brand-neutral-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-wide);
    fill: var(--color-text-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-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-brand-amber-light);
  }

.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-compact);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text);
  }

.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-brand-amber-light);
  }

.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-wide);
    color: var(--color-text);
  }

.how-reva-works__feed-sub {
    font-size: 1.1em;
    letter-spacing: var(--letter-spacing-loose);
    color: var(--color-text-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(--color-bg-card);
    font-size: 1.2em;
    font-weight: var(--font-weight-medium);
    line-height: 1;
    letter-spacing: var(--letter-spacing-loose);
    color: var(--color-text);
    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: 1024px) {

.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(--shadow-card);
  }

@media (min-width: 768px) {

.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-wide);
    text-align: center;
    color: var(--color-text-inverted-default);
  }

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

@media (min-width: 1024px) {

.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(--color-brand-amber);
    font-size: var(--font-size-4xl);
    max-width: 30rem;
  }

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

@media (min-width: 1024px) {

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

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

.founding-community__disclaimer {
    color: var(--color-text-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: 1024px) {

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

.footer__wrapper {
    max-width: 700px;
  }

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

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

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

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

@media (min-width: 1536px) {

.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-compact);
  letter-spacing: var(--letter-spacing-dense);
}

.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(--color-text);
}

/* --- 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: 1024px) {

.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-brand-olive);
  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: 768px) {

.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(--color-text-inverted-muted);
}

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

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

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

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

@media (min-width: 768px) {

.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-compact);
  letter-spacing: var(--letter-spacing-dense);
  color: var(--color-text);
}

.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(--color-text);
}

@media (min-width: 768px) {

.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(--color-text-placeholder);
}

@media (min-width: 768px) {

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

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

@media (min-width: 768px) {

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

@media (min-width: 768px) {

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

.hiring__roles-divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-brand-olive-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(--color-text);
}

.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-compact);
  letter-spacing: var(--letter-spacing-dense);
  color: var(--color-text);
}

.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(--color-text-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-loose);
  color: var(--color-text-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: 1024px) {

.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-brand-olive);
  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(--color-text-inverted-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(--color-text-inverted-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(--color-text);
}

.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-relaxed);
  color: var(--color-text-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: 768px) {

.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-wide);
  color: var(--color-text-error);
}

.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-relaxed);
  color: var(--color-text);
}

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

@media (min-width: 1024px) {

.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-compact);
    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-wide);
  }

.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-compact);
  letter-spacing: var(--letter-spacing-dense);
}

.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(--color-text-muted);
}

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

@media (min-width: 1024px) {

.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(--color-text-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-wide);
  color: var(--color-error);
}

.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-wide);
  color: var(--color-text);
}

.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-brand-gold-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-wide);
  color: var(--color-text-muted);
}

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

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

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

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

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

  .hero__skeleton {
    display: none;
  }
}

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

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

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

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

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

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

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