/* ==========================================================================
   Eternal Rust — homepage stylesheet
   Flattened from the design system (Eternal Rust Design System, 7c33a511).
   Source order preserved: fonts → colors → typography → spacing → radii →
   schemes → base → core components → site layer.
   Flattened deliberately: @import chains create a serial request waterfall,
   and this site ships with no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — tokens/fonts.css
   The DS shipped 7 static weights. Google now serves Inter as a variable
   font, so one file per subset covers 400/500/600. Latin is 48 KB; latin-ext
   only downloads if the page actually renders a character in its range.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: var(--font-sans);
  --font-body: var(--font-sans);
}

/* --------------------------------------------------------------------------
   2. Colors — tokens/colors.css (verbatim)
   -------------------------------------------------------------------------- */
:root {
  /* Neutral — the spine of the palette. shade-0 lightest → shade-7 darkest. */
  --color-white: #ffffff;
  --color-neutral-lightest: #f2f2f2;
  --color-neutral-lighter: #dadad9;
  --color-neutral-light: #b6b6b4;
  --color-neutral: #858682;
  --color-neutral-dark: #545550;
  --color-neutral-darker: #24251e;
  --color-neutral-darkest: #0c0d05;

  /* Purple Heart — the one accent. */
  --color-purple-heart-lightest: #f3e9fc;
  --color-purple-heart-lighter: #e7d4f9;
  --color-purple-heart-light: #ad6aea;
  --color-purple-heart: #8a2be2;
  --color-purple-heart-dark: #6e22b4;
  --color-purple-heart-darker: #37115a;
  --color-purple-heart-darkest: #290c43;

  /* Bunker — cool near-black, for deep surfaces. */
  --color-bunker-lightest: #e6e7e7;
  --color-bunker-lighter: #cecfd0;
  --color-bunker-light: #56585b;
  --color-bunker: #0e1116;
  --color-bunker-dark: #0b0d11;
  --color-bunker-darker: #050608;
  --color-bunker-darkest: #040506;

  /* Shark — cool dark grey, one step above Bunker. */
  --color-shark-lightest: #e8e8e9;
  --color-shark-lighter: #d1d1d3;
  --color-shark-light: #5e6065;
  --color-shark: #1a1d24;
  --color-shark-dark: #14171c;
  --color-shark-darker: #0a0b0e;
  --color-shark-darkest: #07080a;

  /* Laser Lemon — reserved highlight, unused on the homepage. */
  --color-laser-lemon-lightest: #feffef;
  --color-laser-lemon-lighter: #fdffdf;
  --color-laser-lemon-light: #f8ff8f;
  --color-laser-lemon: #f5ff5f;
  --color-laser-lemon-dark: #c4cc4c;
  --color-laser-lemon-darker: #626626;
  --color-laser-lemon-darkest: #494c1c;

  /* Transparency ramps — borders, hovers, scrims. Never invent new alphas. */
  --color-white-5: color-mix(in srgb, var(--color-white), transparent 95%);
  --color-white-10: color-mix(in srgb, var(--color-white), transparent 90%);
  --color-white-15: color-mix(in srgb, var(--color-white), transparent 85%);
  --color-white-20: color-mix(in srgb, var(--color-white), transparent 80%);
  --color-white-30: color-mix(in srgb, var(--color-white), transparent 70%);
  --color-white-40: color-mix(in srgb, var(--color-white), transparent 60%);
  --color-white-50: color-mix(in srgb, var(--color-white), transparent 50%);
  --color-white-60: color-mix(in srgb, var(--color-white), transparent 40%);
  --color-neutral-darkest-5: color-mix(in srgb, var(--color-neutral-darkest), transparent 95%);
  --color-neutral-darkest-10: color-mix(in srgb, var(--color-neutral-darkest), transparent 90%);
  --color-neutral-darkest-15: color-mix(in srgb, var(--color-neutral-darkest), transparent 85%);
  --color-neutral-darkest-20: color-mix(in srgb, var(--color-neutral-darkest), transparent 80%);
  --color-neutral-darkest-30: color-mix(in srgb, var(--color-neutral-darkest), transparent 70%);
  --color-neutral-darkest-40: color-mix(in srgb, var(--color-neutral-darkest), transparent 60%);
  --color-neutral-darkest-50: color-mix(in srgb, var(--color-neutral-darkest), transparent 50%);
  --color-neutral-darkest-60: color-mix(in srgb, var(--color-neutral-darkest), transparent 40%);

  /* Semantic aliases — fallbacks for anything outside a scheme. */
  --text-body: var(--color-neutral-darkest);
  --text-inverse: var(--color-white);
  --text-accent: var(--color-purple-heart);
  --surface-page: var(--color-white);
  --surface-raised: var(--color-neutral-lightest);
  --surface-inverse: var(--color-neutral-darkest);
  --surface-accent: var(--color-purple-heart);
  --border-default: var(--color-neutral-darkest-15);
  --border-inverse: var(--color-white-20);
  --scrim-media: var(--color-neutral-darkest-50);
}

/* --------------------------------------------------------------------------
   3. Typography — tokens/typography.css (verbatim)
   Mobile-first. Desktop values apply at lg (992px), as in the source export.
   -------------------------------------------------------------------------- */
:root {
  --text-h1: 2.5rem;   --text-h1-line-height: 1.2; --text-h1-letter-spacing: -1%;
  --text-h2: 2.25rem;  --text-h2-line-height: 1.2; --text-h2-letter-spacing: -1%;
  --text-h3: 2rem;     --text-h3-line-height: 1.2; --text-h3-letter-spacing: -1%;
  --text-h4: 1.5rem;   --text-h4-line-height: 1.3; --text-h4-letter-spacing: -1%;
  --text-h5: 1.25rem;  --text-h5-line-height: 1.4; --text-h5-letter-spacing: -1%;
  --text-h6: 1.125rem; --text-h6-line-height: 1.4; --text-h6-letter-spacing: -1%;
  --text-large: 1.125rem;  --text-large-line-height: 1.5;
  --text-medium: 1rem;     --text-medium-line-height: 1.5;
  --text-regular: 0.875rem; --text-regular-line-height: 1.5;
  --text-small: 0.75rem;   --text-small-line-height: 1.5;
  --text-tiny: 0.625rem;   --text-tiny-line-height: 1.5;
  /* Display numerals — the stat/countdown figure sizes, verbatim. */
  --text-stat: 3.5rem; --text-stat-line-height: 1.3;
  /* Weights. The source remaps "bold" to 400 — headings are regular weight. */
  --font-weight-regular: 400;
  --font-weight-bold: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
}
@media (min-width: 992px) {
  :root {
    --text-h1: 3.5rem; --text-h2: 3rem; --text-h3: 2.5rem;
    --text-h4: 2rem; --text-h5: 1.5rem; --text-h6: 1.25rem;
    --text-large: 1.25rem; --text-medium: 1.125rem; --text-regular: 1rem;
    --text-small: 0.875rem; --text-tiny: 0.75rem;
    --text-stat: 5rem;
  }
}

/* --------------------------------------------------------------------------
   4. Spacing — tokens/spacing.css (verbatim)
   -------------------------------------------------------------------------- */
:root {
  /* Breakpoints (reference values — media queries can't read custom props). */
  --breakpoint-sm: 480px; --breakpoint-md: 768px; --breakpoint-lg: 992px;

  /* Container widths. Page shell is xxl (80rem); text columns cap at lg. */
  --container-xxs: 20rem; --container-xs: 25rem; --container-sm: 30rem;
  --container-md: 35rem; --container-lg: 48rem; --container-xl: 64rem;
  --container-xxl: 80rem;

  /* Section rhythm. Every section is inset 5% horizontally, stepped vertically. */
  --page-inset: 5%;
  --section-py: 4rem;     /* base   — py-16 */
  --section-py-md: 6rem;  /* ≥768px — py-24 */
  --section-py-lg: 7rem;  /* ≥992px — py-28 */
  --footer-py: 3rem; --footer-py-md: 4.5rem; --footer-py-lg: 5rem;

  /* Block gaps used inside sections. */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;
  --space-18: 4.5rem; --space-20: 5rem; --space-30: 7.5rem;

  /* Line weights. One hairline everywhere — no thick rules. */
  --border-width: 1px; --divider-width: 1px;

  /* Navbar height — not in the DS, but the fixed bar needs a scroll offset. */
  --navbar-h: 4.5rem;
}

/* --------------------------------------------------------------------------
   5. Radii & motion — tokens/radii.css (verbatim)
   Everything is square. 0px is a brand decision, not a default — do not round.
   -------------------------------------------------------------------------- */
:root {
  --radius-button: 0rem;
  --radius-card: 0rem;
  --radius-checkbox: 0rem;
  --radius-carousel: 0rem;
  --radius-form: 0rem;
  --radius-badge: 0rem;
  --radius-image: 0rem;
  --duration-fast: 0.2s;
  --duration-medium: 0.3s;
  --duration-slow: 0.4s;
  --ease-default: ease-in-out;
  --ease-out: ease-out;
  --ease-tabs: cubic-bezier(0.4, 0, 0.2, 1);
  --blur-glass: 10px;
}

/* --------------------------------------------------------------------------
   6. Schemes — tokens/schemes.css (verbatim)
   A section picks one class; every child reads --color-scheme-*.
   -------------------------------------------------------------------------- */
.scheme-1 {
  --color-scheme-background: var(--color-white);
  --color-scheme-foreground: var(--color-neutral-lightest);
  --color-scheme-text: var(--color-neutral-darkest);
  --color-scheme-border: var(--color-neutral-darkest-15);
  --color-scheme-btn-text: var(--color-white);
  background-color: var(--color-scheme-background);
  color: var(--color-scheme-text);
}
.scheme-2 {
  --color-scheme-background: var(--color-neutral-lightest);
  --color-scheme-foreground: var(--color-white);
  --color-scheme-text: var(--color-neutral-darkest);
  --color-scheme-border: var(--color-neutral-darkest-15);
  --color-scheme-btn-text: var(--color-white);
  background-color: var(--color-scheme-background);
  color: var(--color-scheme-text);
}
.scheme-3 {
  --color-scheme-background: var(--color-neutral-darkest);
  --color-scheme-foreground: var(--color-neutral-darker);
  --color-scheme-text: var(--color-white);
  --color-scheme-border: var(--color-white-20);
  --color-scheme-btn-text: var(--color-white);
  background-color: var(--color-scheme-background);
  color: var(--color-scheme-text);
}
.scheme-4 {
  --color-scheme-background: var(--color-neutral-dark);
  --color-scheme-foreground: var(--color-neutral);
  --color-scheme-text: var(--color-white);
  --color-scheme-border: var(--color-white-20);
  --color-scheme-btn-text: var(--color-white);
  background-color: var(--color-scheme-background);
  color: var(--color-scheme-text);
}
/* Section modifiers that travel with dark schemes. */
.alternate { --scheme-is-dark: 1; }
.logo-alt img[alt*="logo" i],
.logo-alt img[src*="logo" i] { filter: brightness(0) invert(1); }

/* --------------------------------------------------------------------------
   7. Base — tokens/base.css (verbatim, plus scroll offset for the fixed bar)
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--navbar-h); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-medium);
  line-height: var(--text-medium-line-height);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  margin: 0;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--text-h1); line-height: var(--text-h1-line-height); }
h2 { font-size: var(--text-h2); line-height: var(--text-h2-line-height); }
h3 { font-size: var(--text-h3); line-height: var(--text-h3-line-height); }
h4 { font-size: var(--text-h4); line-height: var(--text-h4-line-height); }
h5 { font-size: var(--text-h5); line-height: var(--text-h5-line-height); }
h6 { font-size: var(--text-h6); line-height: var(--text-h6-line-height); }
p { margin: 0; }
a { color: inherit; text-decoration: none; transition: opacity var(--duration-fast) var(--ease-default); }
a:hover { opacity: 0.75; }
button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; }
img, svg { max-width: 100%; display: block; }

.er-container { margin-inline: auto; max-width: var(--container-xxl); }
.er-section {
  padding-left: var(--page-inset);
  padding-right: var(--page-inset);
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
}
@media (min-width: 768px) {
  .er-section { padding-top: var(--section-py-md); padding-bottom: var(--section-py-md); }
}
@media (min-width: 992px) {
  .er-section { padding-top: var(--section-py-lg); padding-bottom: var(--section-py-lg); }
}

/* Visually hidden, still announced. */
.er-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;
}

/* Focus ring. core.css kills the outline on .er-btn; WCAG 2.4.7 needs a
   visible indicator, so it is reinstated here as a brand-coloured ring. */
:where(a, button, [tabindex]):focus-visible,
.er-btn:focus-visible {
  outline: 2px solid var(--color-purple-heart-light);
  outline-offset: 3px;
  border-radius: 0;
}
.er-skip-link {
  position: absolute; left: var(--page-inset); top: 0.5rem; z-index: 1200;
  transform: translateY(-200%);
  padding: 0.625rem 1.25rem;
  background: var(--color-neutral-darkest); color: var(--color-white);
  font-size: var(--text-regular); font-weight: var(--font-weight-medium);
}
.er-skip-link:focus-visible { transform: translateY(0); opacity: 1; }

/* --------------------------------------------------------------------------
   8. Core components — components/core/core.css (verbatim)
   -------------------------------------------------------------------------- */

/* Button — square, hairline-bordered, 200ms ease-in-out on everything. */
.er-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  border-radius: var(--radius-button); white-space: nowrap;
  border: var(--border-width) solid transparent;
  background: none; color: inherit;
  font-family: var(--font-body); font-size: var(--text-medium); line-height: 1.5;
  transition: all var(--duration-fast) var(--ease-default);
}
.er-btn:disabled { pointer-events: none; opacity: 0.5; }
.er-btn--size-default { padding: 0.625rem 1.5rem; }
.er-btn--size-sm { padding: 0.5rem 1.25rem; }
.er-btn--size-link { padding: 0; }
.er-btn--size-icon { width: 2.5rem; height: 2.5rem; padding: 0; }
.er-btn--default {
  border-color: var(--color-purple-heart);
  background-color: var(--color-purple-heart);
  color: var(--color-scheme-btn-text, var(--color-white));
  font-weight: var(--font-weight-medium);
}
.er-btn--default:hover {
  border-color: var(--color-purple-heart-dark);
  background-color: var(--color-purple-heart-dark);
}
.btn-dark .er-btn--default {
  border-color: var(--color-neutral-darkest);
  background-color: var(--color-neutral-darkest);
  color: var(--color-white);
}
.btn-dark .er-btn--default:hover {
  border-color: var(--color-neutral-darker);
  background-color: var(--color-neutral-darker);
}
.btn-light .er-btn--default {
  border-color: var(--color-white);
  background-color: var(--color-white);
  color: var(--color-neutral-darkest);
}
.btn-light .er-btn--default:hover {
  border-color: var(--color-neutral-lighter);
  background-color: var(--color-neutral-lighter);
}
.er-btn--alternate {
  border-color: var(--color-white);
  background-color: var(--color-white);
  color: var(--color-neutral-darkest);
  font-weight: var(--font-weight-medium);
}
.er-btn--alternate:hover {
  border-color: var(--color-neutral-lighter);
  background-color: var(--color-neutral-lighter);
}
.er-btn--secondary {
  border-color: var(--color-scheme-border, var(--border-default));
  background-color: transparent;
  font-weight: var(--font-weight-medium);
  backdrop-filter: blur(var(--blur-glass));
}
.er-btn--secondary:hover { background-color: var(--color-neutral-darkest-5); }
.alternate .er-btn--secondary { border-color: var(--color-white-20); }
.alternate .er-btn--secondary:hover { background-color: var(--color-white-10); }
.er-btn--secondary-alt {
  border-color: var(--color-white-20);
  background-color: transparent;
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
  backdrop-filter: blur(var(--blur-glass));
}
.er-btn--secondary-alt:hover { background-color: var(--color-white-10); }
.er-btn--link { gap: 0.5rem; color: var(--color-scheme-text, var(--text-body)); }
.er-btn--link-alt { gap: 0.5rem; color: var(--color-white); }
.er-btn--ghost:hover { background-color: var(--color-neutral-darkest); color: var(--color-white); }

/* Accordion — hairline rules top and bottom of each item, no card, no radius. */
.er-accordion { width: 100%; }
.er-accordion-item { border-bottom: var(--border-width) solid var(--color-scheme-border, var(--border-default)); }
.er-accordion-item:first-child { border-top: var(--border-width) solid var(--color-scheme-border, var(--border-default)); }
.er-accordion-trigger {
  display: flex; width: 100%; flex: 1; align-items: center;
  justify-content: space-between; gap: 1rem; padding: 1rem 0;
  background: none; border: 0; color: inherit;
  font-family: var(--font-body); font-size: var(--text-medium);
  font-weight: var(--font-weight-bold); text-align: left;
  transition: all var(--duration-fast) var(--ease-default);
}
@media (min-width: 768px) { .er-accordion-trigger { padding: 1.25rem 0; } }
.er-accordion-chevron {
  flex-shrink: 0; width: 1.75rem; height: 1.75rem;
  transition: transform var(--duration-medium) var(--ease-default);
}
@media (min-width: 768px) { .er-accordion-chevron { width: 2rem; height: 2rem; } }
.er-accordion-trigger[data-state="open"] .er-accordion-chevron { transform: rotate(180deg); }
.er-accordion-content { overflow: hidden; }
.er-accordion-content-inner { padding-bottom: 1.25rem; font-size: var(--text-medium); }
@media (min-width: 768px) { .er-accordion-content-inner { padding-bottom: 1.5rem; } }

/* Accordion open/close. The DS defined no height animation (Radix supplied it
   in React); grid-template-rows 0fr→1fr animates to content height with no JS
   measurement and degrades to an instant toggle where unsupported. */
.er-accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-medium) var(--ease-default);
}
/* The track must carry no padding of its own: a grid item's border-box can
   never shrink below its padding, so padding here floors the 0fr row at 20px
   and leaks a line of the answer while the item is closed. */
.er-accordion-content-track { min-height: 0; overflow: hidden; }
.er-accordion-item[data-state="open"] > .er-accordion-content { grid-template-rows: 1fr; }

/* --------------------------------------------------------------------------
   9. Site layer — section layout
   Translated from ui_kits/homepage/Sections.jsx + Sections2.jsx. The JSX used
   inline styles with hard-coded desktop grids and no breakpoints; the layout
   values are kept verbatim and the missing mobile rules are added here.
   -------------------------------------------------------------------------- */

/* --- Navbar ------------------------------------------------------------- */
.er-navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  display: flex; width: 100%; align-items: center; min-height: var(--navbar-h);
  padding-inline: var(--page-inset);
  background: transparent;
  color: var(--color-white);
  border-bottom: var(--border-width) solid transparent;
  transition: background var(--duration-medium) var(--ease-default),
              color var(--duration-medium) var(--ease-default),
              border-color var(--duration-medium) var(--ease-default);
}
/* Scrolled state — set by main.js past 40px, matching the JSX threshold. */
.er-navbar[data-scrolled="true"] {
  background: var(--color-white);
  color: var(--color-neutral-darkest);
  border-bottom-color: var(--color-neutral-darkest-15);
}
.er-navbar__inner {
  margin: 0 auto; width: 100%;
  /* The JSX left the navbar row uncapped while every section caps at 80rem,
     so the logo drifted out of alignment on wide screens. Capped to match. */
  max-width: var(--container-xxl);
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 1rem;
}
@media (min-width: 992px) {
  .er-navbar__inner { grid-template-columns: 0.375fr 1fr 0.375fr; }
}
.er-navbar__brand { display: inline-flex; align-items: center; }
.er-navbar__brand:hover { opacity: 1; }
/* The lockup is Purple Heart on transparent with a soft light halo, so the
   one file reads correctly on both navbar states — over the dark hero and
   on the white scrolled bar. No filter swap needed. */
.er-navbar__logo { height: 26px; width: auto; }
@media (min-width: 768px) { .er-navbar__logo { height: 32px; } }
.er-navbar__links { display: none; align-items: center; justify-content: center; }
.er-navbar__links a { padding: 0.5rem 1rem; font-size: var(--text-medium); }
.er-navbar__actions { justify-self: end; display: flex; align-items: center; gap: 0.75rem; }
/* Below lg the bar has no room for both the CTA and the toggle — the CTA
   would push the toggle off-screen. It reappears inside the drawer. */
.er-navbar__cta { display: none; padding: 0.5rem 1.5rem; }
/* The source swapped this button's variant on scroll: secondary-alt over the
   hero, solid purple once the bar goes white — a white-bordered, white-text
   button would be invisible against it. Driven off the same data attribute. */
.er-navbar__cta {
  border-color: var(--color-white-20);
  background-color: transparent;
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
  backdrop-filter: blur(var(--blur-glass));
}
.er-navbar__cta:hover { background-color: var(--color-white-10); }
.er-navbar[data-scrolled="true"] .er-navbar__cta {
  border-color: var(--color-purple-heart);
  background-color: var(--color-purple-heart);
  color: var(--color-white);
  backdrop-filter: none;
}
.er-navbar[data-scrolled="true"] .er-navbar__cta:hover {
  border-color: var(--color-purple-heart-dark);
  background-color: var(--color-purple-heart-dark);
}
.er-navbar__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-right: -0.625rem;
  background: none; border: 0; color: inherit;
}
.er-navbar__toggle svg { width: 1.5rem; height: 1.5rem; }
.er-navbar__toggle .er-icon-close,
.er-navbar[data-menu="open"] .er-navbar__toggle .er-icon-menu { display: none; }
.er-navbar[data-menu="open"] .er-navbar__toggle .er-icon-close { display: block; }
@media (min-width: 992px) {
  .er-navbar__links { display: flex; }
  .er-navbar__toggle { display: none; }
  .er-navbar__cta { display: inline-flex; }
}

/* Mobile drawer. Same 0fr→1fr collapse as the accordion. */
.er-navbar__drawer {
  position: absolute; top: 100%; left: 0; right: 0;
  display: grid; grid-template-rows: 0fr;
  background: var(--color-white); color: var(--color-neutral-darkest);
  border-bottom: var(--border-width) solid var(--color-neutral-darkest-15);
  transition: grid-template-rows var(--duration-medium) var(--ease-default);
}
.er-navbar[data-menu="open"] .er-navbar__drawer { grid-template-rows: 1fr; }
.er-navbar__drawer-inner { overflow: hidden; min-height: 0; }
.er-navbar__drawer nav { display: flex; flex-direction: column; padding: 0.5rem var(--page-inset) 1.5rem; }
.er-navbar__drawer nav a {
  padding: 0.875rem 0; font-size: var(--text-large);
  border-bottom: var(--border-width) solid var(--color-neutral-darkest-15);
}
.er-navbar__drawer .er-btn { margin-top: 1.5rem; width: 100%; }
@media (min-width: 992px) { .er-navbar__drawer { display: none; } }

/* --- Hero --------------------------------------------------------------- */
.er-hero { position: relative; padding-inline: var(--page-inset); overflow: hidden; }
.er-hero__inner {
  display: flex; max-height: 60rem; min-height: 100svh;
  position: relative; z-index: 10;
}
.er-hero__body { padding-block: 7rem; width: 100%; display: flex; }
.er-hero__copy { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; }
.er-hero h1 { color: var(--color-white); text-wrap: balance; }
.er-hero__lede {
  margin-top: 1.5rem; max-width: var(--container-md);
  color: var(--color-white-60); font-size: var(--text-large);
}
.er-hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.er-hero__media { position: absolute; inset: 0; z-index: 0; background: var(--color-neutral-darker); }
.er-hero__media picture { display: block; width: 100%; height: 100%; }
.er-hero__media img, .er-hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 50%;
}
/* A tall phone viewport crops a 16:9 hero to roughly its middle quarter. The
   advancing squad sits lower-right of frame, so pan the crop toward it below
   md rather than landing on empty rail yard. */
@media (max-width: 767px) {
  .er-hero__media img, .er-hero__media video { object-position: 68% 62%; }
}
/* Flat scrim as specified by the design system, plus a top band: the key art
   has a bright sky behind the transparent navbar, and the logo and nav links
   lose contrast against it without one. */
.er-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--color-neutral-darkest-60) 0, transparent 24%),
    var(--scrim-media);
}

/* --- Tagline ------------------------------------------------------------ */
.er-tagline__inner { max-width: var(--container-lg); text-align: center; margin: 0 auto; }
.er-eyebrow { margin-bottom: 1rem; font-weight: var(--font-weight-semibold); }
.er-tagline h2 { margin-bottom: 1.5rem; font-size: var(--text-h5); line-height: var(--text-h5-line-height); }
.er-actions-center {
  margin-top: 2rem; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 1rem;
}

/* --- Stats -------------------------------------------------------------- */
.er-stats__inner { display: flex; flex-direction: column; align-items: flex-start; }
.er-stats__head { margin-bottom: 3rem; width: 100%; max-width: var(--container-lg); }
.er-stats__grid {
  display: grid; width: 100%; grid-template-columns: 1fr;
  gap: 2rem; align-items: start;
}
.er-stat {
  width: 100%;
  border-left: var(--border-width) solid var(--color-scheme-border);
  padding-left: 1.5rem;
}
.er-stat__figure {
  margin-bottom: 0.5rem;
  font-size: var(--text-stat); line-height: var(--text-stat-line-height);
}
/* "Bi-weekly" is a word, not a numeral: at the full 5rem stat size it wraps
   and drops its label out of line with the other two. Sizing the figure to
   its own column keeps all three on one line and on a shared baseline. */
@supports (font-size: 1cqw) {
  .er-stat { container-type: inline-size; }
  .er-stat__figure { font-size: min(var(--text-stat), 17cqw); white-space: nowrap; }
}
.er-stat__label { font-size: var(--text-h6); line-height: var(--text-h6-line-height); }
@media (min-width: 768px) {
  .er-stats__grid { grid-template-columns: repeat(3, 1fr); column-gap: 3rem; }
  .er-stat { padding-left: 2rem; }
}
@media (min-width: 992px) { .er-stats__head { margin-bottom: 5rem; } }

/* --- Countdown ---------------------------------------------------------- */
.er-countdown__inner { max-width: var(--container-lg); margin: 0 auto; text-align: center; }
.er-countdown h2 { margin-bottom: 1.5rem; }
.er-countdown__clock {
  margin: 2.5rem 0; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem; list-style: none; padding: 0;
}
@media (min-width: 768px) { .er-countdown__clock { gap: 1.5rem; } }
.er-countdown__unit {
  border-top: var(--border-width) solid var(--color-scheme-border);
  padding-top: 1rem;
}
.er-countdown__value {
  font-size: var(--text-stat); line-height: var(--text-stat-line-height);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.er-countdown__label {
  margin-top: 0.25rem; font-size: var(--text-small);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-white-60);
}
/* Fallback shown if the target date has passed or is unset. Both elements
   set `display`, which outranks the UA `[hidden]` rule — so restate it. */
.er-countdown__clock[hidden], .er-countdown__live[hidden] { display: none; }
.er-countdown__live { display: block; margin: 2.5rem 0; font-size: var(--text-h4); }

/* --- Ruleset ------------------------------------------------------------ */
.er-ruleset__grid {
  display: grid; grid-template-columns: 1fr; align-items: start;
  row-gap: 2.5rem; column-gap: 5rem;
}
@media (min-width: 992px) { .er-ruleset__grid { grid-template-columns: 1fr 1fr; } }
.er-ruleset__body p:first-child { margin-bottom: 2rem; font-size: var(--text-medium); }
.er-ruleset__pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding-block: 0.5rem;
}
.er-ruleset__pair h3 { margin-bottom: 0.5rem; font-size: var(--text-h2); }
.er-actions-inline {
  margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
}

/* --- Discord CTA -------------------------------------------------------- */
.er-discord { position: relative; overflow: hidden; }
/* Submark floated behind the section at 12%, as in the source. */
.er-discord__watermark {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; pointer-events: none;
}
.er-discord__watermark img {
  width: min(48rem, 80%); height: auto; opacity: 0.14;
}
.er-discord__inner {
  position: relative; max-width: var(--container-lg); margin: 0 auto; text-align: center;
}
.er-discord h2 { margin-bottom: 1.5rem; }
.er-discord p:last-of-type { margin-bottom: 1.5rem; font-size: var(--text-medium); }

/* --- FAQ ---------------------------------------------------------------- */
.er-faq__inner { max-width: var(--container-lg); margin: 0 auto; }
.er-faq__head { margin-bottom: 3rem; text-align: center; }
.er-faq__head h2 { margin-bottom: 1.5rem; }
.er-faq__tail {
  margin: 3rem auto 0; max-width: var(--container-md); text-align: center;
}
.er-faq__tail h3 { margin-bottom: 1rem; font-size: var(--text-h4); line-height: var(--text-h4-line-height); }
@media (min-width: 992px) {
  .er-faq__head { margin-bottom: 5rem; }
  .er-faq__tail { margin-top: 5rem; }
}

/* --- Footer ------------------------------------------------------------- */
.er-footer { padding-inline: var(--page-inset); padding-block: var(--footer-py); }
@media (min-width: 768px) { .er-footer { padding-block: var(--footer-py-md); } }
@media (min-width: 992px) { .er-footer { padding-block: var(--footer-py-lg); } }
.er-footer__top {
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: var(--footer-py);
}
@media (min-width: 992px) { .er-footer__top { padding-bottom: var(--footer-py-lg); } }
.er-footer__brand { margin-bottom: 2rem; display: inline-flex; align-items: center; }
.er-footer__brand:hover { opacity: 1; }
.er-footer__logo { height: 2.25rem; width: auto; }
@media (min-width: 768px) { .er-footer__logo { height: 3rem; } }
.er-footer__links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem 1.5rem; list-style: none; margin: 0; padding: 0;
}
.er-footer__links li { font-weight: var(--font-weight-semibold); }
.er-footer__rule { height: var(--divider-width); width: 100%; background: var(--color-scheme-border); }
.er-footer__bottom {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  align-items: center; justify-content: space-between;
  padding-top: 2rem; font-size: var(--text-small);
}

/* --- Motion preferences -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}