/* Echoes of the Unforged — marketing site
   Implements the "Marketing website redesign" Claude Design project: the Whimsical-Adventure
   design system (glassmorphism + tactile modernism) rendered on a DARK cosmic backdrop rather
   than the system's default light one — deep-navy gradient + brand-colour glows for the page
   chrome, near-opaque white glass cards as light islands with dark text inside. MudBlazor stays
   in light mode so card interiors keep the right contrast; this file supplies the dark chrome,
   the boot loader, the sticky top bar, and the pill/glow/scale treatment Material doesn't do. */

:root {
  /* Design-system token values (tokens/colors.css, radii.css, shadows.css). */
  --color-primary: #0062a2;
  --color-primary-container: #4faaff;
  --color-primary-fixed-dim: #9dcaff;
  --color-golden-sunlight: #fcd03d;
  --color-secondary: #745c00;
  --color-secondary-container: #fcd03d;
  --color-mint: #20b8b3;
  --color-tertiary: #006a67;
  --color-tertiary-container: #20b8b3;
  --color-rose: #ff6b81;
  --color-on-surface: #181c21;
  --color-on-surface-variant: #404751;
  --color-surface-container-high: #e5e8ef;

  --radius-sm: 0.5rem;
  --radius: 1rem;
  --radius-md: 1.5rem;
  --radius-lg: 2rem;
  --radius-full: 9999px;

  --font-serif: "Noto Serif", serif;
  --font-sans: "Plus Jakarta Sans", sans-serif;

  --shadow-panel: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-glow-primary: 0 0 40px rgba(0, 98, 162, 0.35);

  /* Glass over a dark world backdrop — push toward opaque so panels read white. */
  --surface-glass: rgba(255, 255, 255, 0.97);
  --surface-glass-strong: rgba(255, 255, 255, 0.99);

  --topbar-h: 64px;
}

html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-sans);
  color: #fff;
  overflow-x: hidden;
}

/* Anchor jumps (e.g. "Join the Alpha" -> #waitlist) must clear the fixed top bar. */
html { scroll-padding-top: calc(var(--topbar-h) + 12px); }

/* Horizontal-overflow guard. Kept off .mud-main-content on purpose: setting overflow-x
   there makes overflow-y compute to `auto`, turning it into a scroll container, which
   breaks the top bar's positioning. MudGrid's negative spacing margins are clipped at
   .section instead (see below). */
#app {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Dark cosmic field the glass panels sit over — a layered navy gradient plus soft brand-colour
   glows (primary blue, teal, gold, rose), matching the redesign mockup's hero backdrop. */
body {
  background:
    radial-gradient(48% 38% at 14% 6%, rgba(0, 98, 162, 0.50), transparent 62%),
    radial-gradient(42% 32% at 88% 14%, rgba(32, 184, 179, 0.28), transparent 60%),
    radial-gradient(55% 40% at 50% 46%, rgba(252, 208, 61, 0.10), transparent 65%),
    radial-gradient(38% 30% at 82% 82%, rgba(255, 107, 129, 0.16), transparent 60%),
    radial-gradient(40% 32% at 10% 92%, rgba(0, 98, 162, 0.22), transparent 60%),
    linear-gradient(180deg, #080b14 0%, #0d1526 22%, #101a2d 55%, #0c1220 100%);
  background-attachment: fixed;
  background-color: #0a0f1c;
}

/* ---------- Boot loader (pre-WASM) — redesign "Boot / Loading" mockup ---------- */

.boot-loader {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 60px 24px;
  text-align: center;
}

.boot-sigil {
  position: relative;
  width: 132px;
  height: 132px;
  filter: drop-shadow(0 0 26px rgba(0, 98, 162, 0.55));
}

.boot-sigil svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.boot-ring-outer { animation: boot-spin 14s linear infinite; }
.boot-ring-inner { animation: boot-spin-rev 20s linear infinite; }
.boot-draw { animation: boot-rune-draw 2.4s ease-in-out infinite alternate; }
.boot-draw-fast { animation: boot-rune-draw-fast 1.8s ease-out infinite alternate; }

.boot-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--color-primary-container) 70%);
  animation: boot-core-pulse 1.6s ease-in-out infinite;
}

.boot-text { display: flex; flex-direction: column; gap: 8px; align-items: center; }

.boot-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  color: #fff;
}

.boot-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  animation: boot-fade 2s ease-in-out infinite;
}

.boot-track {
  width: 220px;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.boot-fill {
  width: 60%;
  height: 100%;
  border-radius: var(--radius-full);
  background-image:
    repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.4) 0 6px, transparent 6px 16px),
    linear-gradient(90deg, var(--color-primary-container), var(--color-primary));
  animation: boot-shimmer 1.1s linear infinite;
}

@keyframes boot-spin { to { transform: rotate(360deg); } }
@keyframes boot-spin-rev { to { transform: rotate(-360deg); } }
@keyframes boot-rune-draw { to { stroke-dashoffset: 0; } }
@keyframes boot-rune-draw-fast { to { stroke-dashoffset: 0; } }
@keyframes boot-core-pulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes boot-fade { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
@keyframes boot-shimmer { 0% { background-position: -120px 0; } 100% { background-position: 240px 0; } }

/* ---------- Sticky top bar (Layout/MainLayout.razor) ---------- */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px clamp(14px, 4vw, 40px);
  min-height: var(--topbar-h);
  box-sizing: border-box;
  background: rgba(8, 11, 20, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* The fixed bar is out of flow — push the page content below it. */
.mud-main-content { padding-top: var(--topbar-h); }

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #fff;
  text-decoration: none;
}

.topbar-logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 2px 12px rgba(0, 98, 162, 0.4);
}

.topbar-wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 17px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-brand { flex: 1 1 auto; }

.topbar-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  flex-shrink: 0;
}

.topbar-link {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 120ms ease-out;
}

.topbar-link:hover, .topbar-link.active { color: #fff; }

/* EN / FR pill toggle (Shared/CultureSelector.razor) shown in the top bar. */
.topbar-nav .culture-selector {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  padding: 3px;
}

.topbar-nav .culture-selector .culture-current,
.topbar-nav .culture-selector .mud-link {
  padding: 5px 11px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.topbar-nav .culture-selector .culture-current {
  background: var(--color-primary);
  color: #fff;
}

.topbar-nav .culture-selector .mud-link {
  color: rgba(255, 255, 255, 0.55) !important;
  margin: 0 !important;
}

.topbar-nav .culture-selector .mud-link:hover { color: #fff !important; }

@media (max-width: 860px) {
  .topbar-nav .topbar-link { display: none; }
}

@media (max-width: 560px) {
  .topbar-nav .culture-selector { display: none; }
  .topbar-wordmark { display: none; }
}

/* ---------- Content on the dark field ---------- */

.section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px clamp(20px, 4vw, 40px);
  width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}

.section--narrow { max-width: 760px; }
.section--form { max-width: 520px; }
.section--center { text-align: center; }

@media (max-width: 600px) {
  .section { padding: 40px 20px; }
  /* Design token --text-story-display-mobile (28/34). Mud's h1/h2 sizes are desktop-fixed. */
  h1.mud-typography-h1 { font-size: 1.9rem !important; line-height: 1.2 !important; }
  h2.mud-typography-h2 { font-size: 1.4rem !important; line-height: 1.3 !important; }
  .flavor-text { font-size: 1rem; }
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary-container);
}

/* Headings/lede that sit directly on the dark field. */
.on-dark h1, .on-dark h2, .on-dark h3,
h1.on-dark, h2.on-dark, h3.on-dark { color: #fff; }

.mud-typography.heading-serif,
.heading-serif { font-family: var(--font-serif) !important; font-weight: 700; color: #fff; }

/* App.razor's <FocusOnNavigate Selector="h1"> sets tabindex="-1" and .focus()es the page
   heading after every navigation for screen-reader users — that draws a UA focus ring around
   the (block-level, full-width) H1. Suppress it: the heading isn't interactively focusable. */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible { outline: none; }

.lede-on-dark { color: rgba(255, 255, 255, 0.70); max-width: 640px; }

/* Hero flavour text — World Lore voice, serif italic (design system "Content Fundamentals"). */
.flavor-text {
  font-family: var(--font-serif) !important;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- Glass surfaces (near-opaque over the dark field) ---------- */

.glass-panel {
  background: var(--surface-glass) !important;
  color: var(--color-on-surface) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
}

.glass-panel-strong {
  background: var(--surface-glass-strong) !important;
  color: var(--color-on-surface) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel), var(--shadow-glow-primary);
}

/* Text colour inside light cards — Mud sets its own; keep these dark. */
.glass-panel .mud-typography,
.glass-panel-strong .mud-typography { color: var(--color-on-surface); }
.glass-panel .mud-typography-body2,
.glass-panel-strong .mud-typography-body2 { color: var(--color-on-surface-variant); }

/* Raw HTML inside cards (rendered markdown on the legal / blog pages). */
.glass-panel :where(h1, h2, h3, h4, p, li, td, th, blockquote),
.glass-panel-strong :where(h1, h2, h3, h4, p, li, td, th, blockquote) { color: var(--color-on-surface); }
.glass-panel a,
.glass-panel-strong a { color: var(--color-primary); }

/* World Lore body treatment kept for the legal / blog markdown panels. */
.lore-copy { font-family: var(--font-serif); }
.lore-copy p { line-height: 1.7; }

/* ---------- Form controls inside glass cards + the select dropdown ----------
   MudBlazor paints input text with the palette's (light) TextPrimary, which is
   invisible on the white waitlist card. Force dark; do the same for the MudSelect
   popover, which renders in a portal at the document root, not inside the card. */

.glass-panel .mud-input-slot,
.glass-panel-strong .mud-input-slot,
.glass-panel .mud-input-slot input,
.glass-panel-strong .mud-input-slot input,
.glass-panel .mud-select .mud-input-control .mud-input-slot,
.glass-panel-strong .mud-select .mud-input-control .mud-input-slot {
  color: var(--color-on-surface) !important;
}

.glass-panel .mud-input-label,
.glass-panel-strong .mud-input-label,
.glass-panel .mud-input-helper-text,
.glass-panel-strong .mud-input-helper-text {
  color: var(--color-on-surface-variant) !important;
}

.glass-panel .mud-input-outlined-border,
.glass-panel-strong .mud-input-outlined-border {
  border-color: rgba(24, 28, 33, 0.28) !important;
}

.glass-panel .mud-select .mud-input-adornment .mud-icon-root,
.glass-panel-strong .mud-select .mud-input-adornment .mud-icon-root {
  color: var(--color-on-surface-variant) !important;
}

/* MudSelect dropdown (rendered by MudPopoverProvider at the page root). */
.mud-popover.mud-popover-open {
  background: #fff;
  color: var(--color-on-surface);
}

.mud-popover .mud-list-item,
.mud-popover .mud-list-item .mud-typography,
.mud-popover .mud-list-item-text {
  color: var(--color-on-surface) !important;
}

.mud-popover .mud-list-item:hover,
.mud-popover .mud-list-item-clickable:hover {
  background-color: var(--color-surface-container-high);
}

.mud-popover .mud-selected-item,
.mud-popover .mud-selected-item .mud-typography {
  color: var(--color-primary) !important;
}

/* ---------- Buttons / links (design: pill, hover = 1.05x scale, never colour) ---------- */

.mud-button-root,
.mud-fab,
.mud-chip { border-radius: var(--radius-full) !important; }

.mud-button-root:hover,
.mud-button-root:focus-visible {
  transform: scale(1.05);
  transition: transform 120ms ease-out;
}

.mud-button-root:disabled { opacity: 0.5; }

/* Ghost/outline pill used for the Discord + Dev-blog CTAs on the dark field. */
.ghost-pill {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 150ms ease, background 150ms ease;
}

.ghost-pill:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

a { color: var(--color-primary-fixed-dim); }

/* Platform strip above the waitlist form — the alpha ships on Android + Windows (Home.razor). */
.platform-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.03em;
}

.platform-chip .mud-icon-root { font-size: 1.05rem; }

.platform-strip__note {
  flex-basis: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Interactive class picker (Shared/ClassPicker.razor) ---------- */

.classpicker-tabs {
  display: flex;
  gap: 4px;
  max-width: 420px;
  padding: 4px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
}

.classpicker-tab {
  flex: 1;
  border: 0;
  cursor: pointer;
  padding: 9px 12px;
  border-radius: var(--radius-full);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: background 140ms ease, color 140ms ease;
}

.classpicker-tab:hover { color: #fff; }

.classpicker-tab.is-active {
  background: var(--color-primary);
  color: #fff;
}

.classpicker-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.classpicker-head {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.classpicker-badge {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  border: 2px solid var(--accent);
  color: var(--accent);
}

.classpicker-badge svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.classpicker-name {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-on-surface);
}

.classpicker-weapon {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-on-surface-variant);
}

.classpicker-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-on-surface-variant);
}

.classpicker-pros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.classpicker-pro { display: flex; gap: 8px; align-items: flex-start; }

.classpicker-pro-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.classpicker-pro-label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.classpicker-pro-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-on-surface);
}

.classpicker-sigil {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--color-surface-container-high);
}

.classpicker-sigil-pill {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.classpicker-sigil-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-on-surface);
}

.classpicker-locked-label {
  margin: 26px 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}

.classpicker-locked-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.classpicker-locked-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.5);
  opacity: 0.5;
  cursor: not-allowed;
}

.classpicker-lock-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--color-on-surface-variant);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.classpicker-locked-text { min-width: 0; }

.classpicker-locked-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.classpicker-locked-weapon {
  font-size: 10.5px;
  color: var(--color-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Footer ---------- */

.site-footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px clamp(20px, 4vw, 40px) 48px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}

.site-footer a { color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.site-footer a:hover { color: #fff; }

/* ---------- Blazor error strip ---------- */

#blazor-error-ui {
  background: var(--color-rose);
  color: #3a0012;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.8rem 1.2rem 0.6rem 1.2rem;
  position: fixed;
  width: 100%;
  z-index: 2000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.8rem;
  top: 0.5rem;
}

/* ---------- Analytics consent banner ---------- */

/* A bar, not a modal: it never covers the content, traps focus or blocks scrolling. Nothing is
   collected while it is on screen, so there is no reason to hold the page hostage until it is
   answered. Sits below the Blazor error strip (z-index 2000) so a real error is never hidden. */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1900;
  padding: 12px clamp(14px, 4vw, 40px) calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(12, 15, 21, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.4);
}

.consent-banner-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.consent-text {
  margin: 0;
  flex: 1 1 320px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.consent-text a {
  color: var(--color-primary-fixed-dim);
  text-decoration: underline;
}

/* Both buttons identical in size and weight - refusing must be exactly as easy as accepting, so
   neither gets a colour or scale advantage. */
.consent-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.consent-actions .mud-button-root {
  min-width: 116px;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.consent-actions .mud-button-root:hover {
  border-color: rgba(255, 255, 255, 0.7) !important;
}

@media (max-width: 600px) {
  .consent-banner-inner { justify-content: stretch; }
  .consent-actions { width: 100%; }
  .consent-actions .mud-button-root { flex: 1 1 0; min-width: 0; }
}

/* Footer link row + the preferences trigger, which is a real <button> for keyboard and screen
   readers but has to sit visually flush with the anchors beside it. */
.site-footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 24px 0 12px;
  flex-wrap: wrap;
}

.site-footer-linkbtn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
}

.site-footer-linkbtn:hover { color: #fff; }