/* ==========================================================================
   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%);
  /* One step the DS ramp does not have. The hero scrim was set by eye against
     the key art and landed between 50 and 60; it is the only user. */
  --color-neutral-darkest-55: color-mix(in srgb, var(--color-neutral-darkest), transparent 45%);
  --color-neutral-darkest-60: color-mix(in srgb, var(--color-neutral-darkest), transparent 40%);

  /* Purple hairlines. Rules and dividers pick up the accent instead of a flat
     white alpha — on a purple-black ground a neutral hairline reads grey. */
  --color-purple-line: color-mix(in srgb, var(--color-purple-heart-light), transparent 76%);
  --color-purple-line-strong: color-mix(in srgb, var(--color-purple-heart-light), transparent 62%);
  --color-purple-wash: color-mix(in srgb, var(--color-purple-heart-light), transparent 90%);

  /* Semantic aliases — fallbacks for anything outside a scheme. */
  --text-body: var(--color-white);
  --text-inverse: var(--color-neutral-darkest);
  --text-accent: var(--color-purple-heart-light);
  --surface-page: var(--color-neutral-darkest);
  --surface-raised: var(--color-purple-heart-darkest);
  --surface-inverse: var(--color-white);
  --surface-accent: var(--color-purple-heart);
  --border-default: var(--color-purple-line);
  --border-inverse: var(--color-neutral-darkest-15);
  --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-*.
   -------------------------------------------------------------------------- */
/* Two dark surfaces — black and deep purple — that sections alternate
   between down the page: hero black, tagline purple, stats black, countdown
   purple, and so on. The four scheme slots survive from the design system, so
   1 and 3 are the black surface and 2 and 4 are the purple one; a section
   picks whichever number keeps the alternation going. Text is white on both
   (17:1 on black, 14:1 on purple). */
.scheme-1, .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-purple-line);
  --color-scheme-btn-text: var(--color-white);
  background-color: var(--color-scheme-background);
  color: var(--color-scheme-text);
}
.scheme-2, .scheme-4 {
  --color-scheme-background: var(--color-purple-heart-darkest);
  --color-scheme-foreground: var(--color-purple-heart-darker);
  --color-scheme-text: var(--color-white);
  --color-scheme-border: var(--color-purple-line-strong);
  --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. Every scheme is dark now,
   so .alternate no longer changes any colour — it is kept because .logo-alt
   rides alongside it and a future light scheme would need it back. */
.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);
  /* Also what the overscroll bounce exposes, so it has to be the purple-black
     ground and not white. */
  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-purple-heart); 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));
}
/* Every scheme sits on a dark ground now, so the hover wash has to lift the
   surface — a neutral-darkest tint was invisible against purple-black. */
.er-btn--secondary:hover { background-color: var(--color-purple-wash); }
.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.
   -------------------------------------------------------------------------- */

/* Inline links inside body copy — the only place a link is not a button. */
.er-inline-link {
  color: var(--color-purple-heart-light);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --- 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: color-mix(in srgb, var(--color-neutral-darkest), transparent 8%);
  color: var(--color-white);
  border-bottom-color: var(--color-purple-line);
  backdrop-filter: blur(var(--blur-glass));
}
.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 purple-black 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-neutral-darkest); color: var(--color-white);
  border-bottom: var(--border-width) solid var(--color-purple-line);
  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-purple-line);
}
.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%;
}
/* The clip sits on top of the still rather than replacing it, so the still
   covers every case where playback does not happen: a phone, reduced motion,
   a blocked autoplay, a codec the browser will not take. It is transparent
   until main.js confirms the first painted frame, which keeps the swap from
   flashing black. */
.er-hero__video {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 400ms ease;
}
.er-hero__video[data-ready="true"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .er-hero__video { display: none; } }

/* A tall phone viewport crops a 16:9 hero to roughly its middle quarter. The
   figure occupies 58.6-84.4% of the frame width, almost exactly the width of
   that window, so the crop has to land on him precisely. object-position
   distributes the overflow rather than centring on the percentage, so 79% is
   what puts the window at 58.6-84.4%. The muzzle flash sits further left and
   does not survive a phone crop; the figure is the part that has to. */
@media (max-width: 767px) {
  .er-hero__media img, .er-hero__media video { object-position: 79% 50%; }
  .er-hero__video { display: none; }
}
/* Sits between the media and the copy — the copy is in .er-hero__inner at
   z-index 10, so this only ever dims the image. The design system's flat
   --scrim-media is 50%; this was held at 20% to keep the armour's contrast,
   but the muzzle flash blows out at that level, so it runs at 55%. The top
   band stays: the navbar is transparent and the raised launcher passes
   behind it. */
.er-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--color-neutral-darkest-60) 0, transparent 24%),
    var(--color-neutral-darkest-55);
}

/* --- Tagline ------------------------------------------------------------ */
/* This one opts out of the section rhythm. Its content is three short lines
   — 158px of it — and the standard 7rem top and bottom left the band more
   than half empty, which reads as a mistake now that it is a purple slab
   between two black ones. Sized to sit as a strip under the hero instead. */
.er-tagline {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 768px) {
  .er-tagline { padding-top: 3rem; padding-bottom: 3rem; }
}
@media (min-width: 992px) {
  .er-tagline { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}
.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;
  }
}