/* Beetry marketing site — shared styles.
   Reskinned to match the actual SpriteKit game's pixel-art UI system
   (UI/Theme/PixelUI.swift, RetryTheme.swift): gold riveted "crate" buttons,
   bevelled green plate buttons, navy/blue HUD pills, the Beetry Pixel
   display face, and the game's sky-blue → grass → dirt world palette.
   Fonts self-hosted from the same files the app bundles — no CDNs, works
   fully offline. */

@font-face {
  font-family: "BeetryPixel";
  src: url("fonts/BeetryPixel.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "OpenSansWeb";
  src: url("fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "OpenSansWeb";
  src: url("fonts/OpenSans-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "OpenSansWeb";
  src: url("fonts/OpenSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Sky (Welcome Bay day palette) */
  --sky-top: #4F8FDB;
  --sky-mid: #6FB3EA;
  --sky-low: #9FD2F2;
  --sky-haze: #E4F5FC;

  /* Terrain */
  --grass: #8FCB4A;
  --grass-dark: #6FAE33;
  --dirt: #C98A46;
  --dirt-dark: #A96B32;
  --dirt-deep: #8A5527;

  /* Gold crate */
  --crate-face-hi: #F7CC54;
  --crate-face: #ECCB44;
  --crate-shade: #E99B37;
  --crate-border: #7C5119;
  --crate-border-dark: #5A3A10;
  --crate-rivet: #FCE9A8;

  /* Green plate (the game's PLAY button) */
  --green-hi: #9BD45A;
  --green-face: #7AC23C;
  --green-bevel: #4E8B22;
  --green-deep: #3F7A1C;

  /* Blue HUD */
  --hud-blue: #6597F8;
  --hud-blue-hi: #7FA9FA;
  --hud-blue-border: #3C75E6;
  --hud-chip: #1E4E80;

  /* Coins */
  --coin-gold: #F2B829;
  --coin-gold-ring: #C8901A;

  --pink: #E8556A;

  --ink: #14232E;
  --paper: #F2FAFF;
  --paper-dim: #E3F1FB;
  --text-on-sky: #FBFDFF;
  --text-dim-sky: #D8ECFB;
  --text-dark: #1C2E3A;
  --text-dark-dim: #4E6577;

  --radius: 12px;
  --pixel-font: "BeetryPixel", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --body-font: "OpenSansWeb", -apple-system, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body-font);
  background: var(--paper);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* ---------- Focus visibility (accessibility baseline) ----------
   The components below use custom gradients/borders heavy enough that a
   bare browser-default outline isn't a safe bet on every one of them, so
   every interactive element gets an explicit, consistent keyboard-focus
   indicator. Colors/offsets are free to be retuned per-component later. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--hud-chip);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Shared pixel-text treatment: chunky hard-edge drop shadow, all-caps,
   the blocky display face used for every headline/label in the game. */
.pixel {
  font-family: var(--pixel-font);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.pixel-shadow {
  text-shadow: 2px 2px 0 rgba(10, 16, 20, 0.5);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--text-on-sky);
  background: linear-gradient(
    180deg,
    var(--sky-top) 0%,
    var(--sky-mid) 42%,
    var(--sky-low) 74%,
    var(--sky-haze) 100%
  );
}

.pixel-cloud {
  position: absolute;
  background: #ffffff;
  box-shadow:
    1.4em -0.6em 0 0 #ffffff,
    2.6em 0 0 0 #ffffff,
    0.9em 0.7em 0 0 #ffffff,
    2.2em 0.7em 0 0 #ffffff,
    -1.2em 0.3em 0 0 #ffffff;
  animation: drift linear infinite;
  opacity: 0.92;
}
.cloud-a { width: 1.6em; height: 1.6em; font-size: 14px; top: 12%; left: -140px; animation-duration: 42s; }
.cloud-b { width: 1.6em; height: 1.6em; font-size: 10px; top: 24%; left: -140px; animation-duration: 58s; animation-delay: -20s; opacity: 0.75; }
.cloud-c { width: 1.6em; height: 1.6em; font-size: 17px; top: 6%; left: -160px; animation-duration: 66s; animation-delay: -34s; opacity: 0.85; }

@keyframes drift {
  to { transform: translateX(calc(100vw + 240px)); }
}

/* Jagged pixel terrain strip anchoring the hero, matching the in-game
   ground silhouette (grass zigzag over dirt). */
.ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 128px;
  background: linear-gradient(180deg, var(--dirt) 0%, var(--dirt-dark) 70%, var(--dirt-deep) 100%);
}
.ground::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='18'%3E%3Cpath d='M0 18 L0 8 L4 8 L4 12 L8 12 L8 5 L12 5 L12 9 L16 9 L16 2 L20 2 L20 9 L24 9 L24 5 L28 5 L28 12 L32 12 L32 18 Z' fill='%238FCB4A'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 32px 18px;
  image-rendering: pixelated;
}

nav.site {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 0;
}
.brand {
  font-family: var(--pixel-font);
  font-size: 1.5rem;
  /* The pixel face's advance widths run tighter than its glyph shapes -- with
     no space to break up "BEETRY" the letters collide into an unreadable
     smear at this size unless tracking is opened up well past normal. */
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--text-on-sky);
  text-transform: uppercase;
  text-shadow: 2px 2px 0 rgba(10, 16, 20, 0.4);
}
.brand span { color: var(--coin-gold); }
nav.site a.nav-link {
  font-family: var(--pixel-font);
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: linear-gradient(180deg, var(--crate-face-hi), var(--crate-face) 55%, var(--crate-shade));
  border: 2px solid var(--crate-border);
  box-shadow: inset 0 0 0 1px var(--crate-face-hi);
  padding: 10px 18px;
  border-radius: 8px;
  transition: transform 0.15s ease;
}
nav.site a.nav-link:hover { transform: translateY(-2px); }
nav.site a.nav-link:active { transform: translateY(0); }

.hero-content {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 24px 8vh;
  /* Soft dark vignette behind the text column. The sky gradient alone
     leaves gold/white text well under WCAG AA (as low as ~1.3:1 for gold
     on the mid-sky blue) -- a translucent scrim gets every hero text
     element to a safe contrast ratio without flattening the pixel-art
     sky into a solid color. Fades out before reaching the clouds/edges. */
  background: radial-gradient(
    ellipse 68% 64% at 50% 46%,
    rgba(8, 14, 20, 0.58) 0%,
    rgba(8, 14, 20, 0.36) 60%,
    rgba(8, 14, 20, 0) 88%
  );
}

.eyebrow {
  font-family: var(--pixel-font);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-on-sky);
  margin: 0 0 18px;
  text-shadow: 2px 2px 0 rgba(10, 16, 20, 0.45);
  opacity: 0;
  animation: rise 0.7s ease forwards;
  animation-delay: 0.1s;
}

h1.headline {
  font-family: var(--pixel-font);
  text-transform: uppercase;
  font-size: clamp(2.4rem, 7.4vw, 4.6rem);
  line-height: 1.06;
  margin: 0 0 22px;
  letter-spacing: 0.01em;
  text-shadow:
    3px 3px 0 rgba(10, 16, 20, 0.45),
    0 0 40px rgba(255, 209, 102, 0.3);
  opacity: 0;
  animation: rise 0.8s ease forwards;
  animation-delay: 0.22s;
}
h1.headline .accent-word {
  color: var(--coin-gold);
  /* Gold-on-sky is inherently low contrast; a thin dark stroke (on top of
     the vignette behind the whole hero text block) keeps the brand gold
     without ever reading as washed-out against a bright sky frame. */
  -webkit-text-stroke: 1px rgba(8, 14, 20, 0.5);
}

.tagline {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  max-width: 34ch;
  margin: 0 0 34px;
  color: var(--text-on-sky);
  line-height: 1.5;
  opacity: 0;
  animation: rise 0.8s ease forwards;
  animation-delay: 0.34s;
}

.cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  animation: rise 0.8s ease forwards;
  animation-delay: 0.46s;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Plate buttons (green primary / gold secondary) ----------
   Recreates GreenButton / CrateButton from PixelUI.swift: flat riveted
   plate, dark frame, blocky pixel-font label, hard drop shadow. */

.badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 10px;
  font-family: var(--pixel-font);
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  /* Dark ink on the gold face (same pairing as nav-link) -- white text on
     this gold gradient only manages ~1.5:1 contrast, which the in-game
     crate buttons can get away with (icon glyphs, not marketing copy) but
     a real link label can't. */
  color: var(--ink);
  background: linear-gradient(180deg, var(--crate-face-hi), var(--crate-face) 55%, var(--crate-shade));
  border: 3px solid var(--crate-border);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.badge::before,
.badge::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.55);
}
.badge::before { left: 6px; }
.badge::after { right: 6px; }
.badge:hover { transform: translateY(-2px); }
.badge:active { transform: translateY(0); }
.badge[aria-disabled="true"] { cursor: default; opacity: 0.94; }
.badge[aria-disabled="true"]:hover,
.badge[aria-disabled="true"]:active { transform: none; }

.badge.primary {
  color: #ffffff;
  /* Deeper than the in-game green-hi/green-face pairing on purpose: white
     on the bright game green is only ~2.2:1. This still reads unmistakably
     "green plate" but keeps the label comfortably above 4.5:1. */
  background: linear-gradient(180deg, var(--green-bevel), var(--green-deep));
  border-color: var(--green-deep);
  text-shadow: 1.5px 1.5px 0 rgba(10, 16, 20, 0.45);
}
.badge.primary::before,
.badge.primary::after { background: rgba(255, 255, 255, 0.75); }

.badge .glyph { font-size: 1.1rem; line-height: 1; }
.badge .glyph-icon { display: block; flex-shrink: 0; }
.badge small {
  display: block;
  font-family: var(--body-font);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.72rem;
  opacity: 0.85;
  font-weight: 600;
}

.scroll-cue {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 22px;
  height: 34px;
  border: 2px solid rgba(251, 253, 255, 0.6);
  border-radius: 10px;
}
.scroll-cue::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 8px;
  background: var(--coin-gold);
  border-radius: 1px;
  transform: translateX(-50%);
  animation: cue 1.6s ease infinite;
}
@keyframes cue {
  0% { opacity: 1; top: 6px; }
  70% { opacity: 0; top: 16px; }
  100% { opacity: 0; top: 16px; }
}

/* ---------- Content sections ---------- */

section.panel { padding: 96px 0; }
.panel.alt { background: var(--paper-dim); }
@media (max-width: 640px) {
  /* Three stacked sections at 96px top+bottom each add up to over 500px of
     pure padding before mobile's narrower single-column content even
     starts -- trims the scroll without losing the section rhythm. */
  section.panel { padding: 60px 0; }
}

.kicker {
  font-family: var(--pixel-font);
  text-transform: uppercase;
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  color: var(--hud-chip);
  margin: 0 0 10px;
}
h2.section-title {
  font-family: var(--pixel-font);
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin: 0 0 44px;
  max-width: 30ch;
  color: var(--text-dark);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}
.feature-card {
  background: #ffffff;
  border: 3px solid var(--hud-blue-border);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: 0 4px 0 rgba(60, 117, 230, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 0 rgba(60, 117, 230, 0.2);
}
.icon-chip {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--hud-blue-hi), var(--hud-blue));
  border: 2px solid var(--hud-blue-border);
  margin-bottom: 16px;
}
.feature-card .icon { width: 26px; height: 26px; }
.feature-card h3 {
  font-family: var(--pixel-font);
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--text-dark);
}
.feature-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-dark-dim);
}

/* World tiles — small crate-framed island swatches, echoing the hub map's
   riveted gold crates. */
.worlds-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}
.world-chip {
  display: flex;
  flex-direction: column;
  width: 172px;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  border: 3px solid var(--crate-border);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-dark);
}
.world-chip .swatch {
  display: block;
  width: 100%;
  height: 56px;
  border-bottom: 3px solid var(--crate-border);
  position: relative;
}
.world-chip .swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,0.5) 0 6px, transparent 7px),
    radial-gradient(circle at 68% 62%, rgba(255,255,255,0.35) 0 8px, transparent 9px);
}
.world-chip span:last-child {
  padding: 10px 12px;
  font-family: var(--pixel-font);
  text-transform: uppercase;
  font-size: 0.85rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.fair-block {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 760px) {
  .fair-block { grid-template-columns: 1fr; }
}
.fair-block ul {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 14px;
}
.fair-block li {
  padding-left: 34px;
  position: relative;
  color: var(--text-dark-dim);
  line-height: 1.5;
}
.fair-block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--green-hi), var(--green-face));
  border: 2px solid var(--green-deep);
}
.fair-block li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.fair-card {
  /* Drops the light hud-blue-hi stop the hero-adjacent panels use --
     gold text on that pale top band was only ~1.3:1. This range also
     reads closer to the fairly saturated blue of the in-game stats
     dialogue box (see finished_game_screen.png) than the lighter gradient did. */
  background: linear-gradient(180deg, var(--hud-blue-border), var(--hud-chip));
  color: var(--text-on-sky);
  border-radius: var(--radius);
  border: 3px solid var(--hud-blue-border);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
}
.fair-card::before,
.fair-card::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.6);
}
.fair-card::before { left: 8px; }
.fair-card::after { right: 8px; }
.fair-card .price-tag {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--pixel-font);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 2.2rem;
  /* White, not coin-gold -- gold only reaches ~1.6-2.4:1 across this blue,
     white clears AA everywhere on the card. The coin-icon dot below carries
     the gold brand color instead, where contrast isn't text-critical. */
  color: var(--text-on-sky);
  text-shadow: 2px 2px 0 rgba(10, 16, 20, 0.4);
  margin: 0;
}
.fair-card p.note {
  position: relative;
  color: var(--text-dim-sky);
  font-size: 0.9rem;
  margin: 10px 0 0;
  line-height: 1.55;
}

/* Small gold coin disc -- the game leans on this shape constantly (HUD
   counters, checkpoint price buttons, coin pickups) and the site had no
   trace of it. Decorative only; the price-tag text carries the meaning. */
.coin-icon {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--crate-rivet), var(--coin-gold) 55%, var(--coin-gold-ring) 100%);
  border: 2px solid var(--coin-gold-ring);
  flex-shrink: 0;
}

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

footer.site {
  /* Skips the lightest "dirt" stop -- the foot-links sit right at the top
     of this gradient, where the plain-dirt tone only gave white text
     ~2.9:1. Starting at dirt-dark keeps the whole link row at 4.3:1+. */
  background: linear-gradient(180deg, var(--dirt-dark) 0%, var(--dirt-deep) 55%, var(--dirt-deep) 100%);
  color: var(--text-dim-sky);
  padding: 44px 0 30px;
  position: relative;
}
footer.site::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='10'%3E%3Cpath d='M0 10 L0 4 L4 4 L4 7 L8 7 L8 2 L12 2 L12 5 L16 5 L16 0 L20 0 L20 5 L24 5 L24 2 L28 2 L28 7 L32 7 L32 10 Z' fill='%238FCB4A'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 32px 10px;
  image-rendering: pixelated;
}
footer.site .brand { font-size: 1.3rem; }
footer.site .foot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(251, 253, 255, 0.16);
  padding-bottom: 24px;
  margin-bottom: 20px;
}
footer.site .foot-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 0.88rem;
  font-weight: 600;
}
footer.site .foot-links a { text-decoration: none; color: var(--text-on-sky); }
footer.site .foot-links a:hover { color: var(--crate-rivet); }
footer.site .copyright { font-size: 0.78rem; color: rgba(228, 245, 252, 0.75); }

/* ---------- Legal / privacy page ---------- */

.legal-hero {
  /* Same low-contrast problem as the main hero (gold/white text directly on
     the sky gradient) -- a top-weighted dark scrim layered under the sky
     gradient keeps the kicker/h1/subtitle legible without darkening the
     whole panel evenly. */
  background:
    linear-gradient(180deg, rgba(8, 14, 20, 0.4) 0%, rgba(8, 14, 20, 0.16) 45%, rgba(8, 14, 20, 0) 75%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 60%, var(--sky-low) 100%);
  color: var(--text-on-sky);
  padding: 120px 0 64px;
  position: relative;
  overflow: hidden;
}
.legal-hero .kicker { color: var(--text-on-sky); }
.legal-hero h1 {
  font-family: var(--pixel-font);
  text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.04em;
  margin: 0 0 12px;
  text-shadow: 2px 2px 0 rgba(10, 16, 20, 0.45);
}
.legal-hero p.updated { color: var(--text-dim-sky); margin: 0; font-weight: 600; }

.legal-body {
  padding: 60px 0 100px;
}
.legal-body .wrap { max-width: 760px; }
.legal-body h2 {
  font-family: var(--pixel-font);
  text-transform: uppercase;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  margin: 40px 0 14px;
  color: var(--text-dark);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li {
  line-height: 1.7;
  color: var(--text-dark-dim);
  font-size: 1.08rem;
}
.legal-body ul { padding-left: 22px; }
.legal-body a { color: var(--hud-blue-border); text-decoration: underline; }
.callout {
  background: var(--paper-dim);
  border: 2px solid var(--hud-blue-border);
  border-left-width: 6px;
  padding: 16px 20px;
  border-radius: 0 10px 10px 0;
  margin: 28px 0;
  font-size: 1.02rem;
}

/* ---------- FAQ (support page) ---------- */

.faq-list {
  display: grid;
  gap: 12px;
}
details.faq-item {
  background: #ffffff;
  border: 3px solid var(--crate-border);
  border-radius: 10px;
  padding: 4px 20px;
}
details.faq-item[open] {
  border-color: var(--hud-blue-border);
}
details.faq-item summary {
  cursor: pointer;
  padding: 16px 0;
  font-family: var(--pixel-font);
  text-transform: uppercase;
  font-size: 1.12rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--text-dark);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: "+";
  font-family: var(--pixel-font);
  font-size: 1.2rem;
  color: var(--hud-blue-border);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
details.faq-item[open] summary::after { transform: rotate(45deg); }
details.faq-item p {
  margin: 0 0 18px;
  color: var(--text-dark-dim);
  font-size: 1.04rem;
  line-height: 1.6;
}

.contact-card {
  background: linear-gradient(180deg, var(--hud-blue-hi), var(--hud-blue) 55%, var(--hud-chip));
  color: var(--text-on-sky);
  border: 3px solid var(--hud-blue-border);
  border-radius: var(--radius);
  padding: 30px 28px;
  margin-top: 40px;
}
.contact-card h2 { color: var(--text-on-sky); margin-top: 0; }
.contact-card p { color: var(--text-dim-sky); }
.contact-card a.badge {
  margin-top: 10px;
  /* .legal-body a's underline otherwise wins the cascade here (higher
     specificity than the bare .badge rule) and draws a stray line through
     the plate label -- no button in the game's own UI is ever underlined. */
  text-decoration: none;
}

/* ---------- Press / marketing page ---------- */

.fact-sheet {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 0;
  border: 3px solid var(--crate-border);
  border-radius: 10px;
  overflow: hidden;
}
.fact-sheet tr:nth-child(odd) { background: var(--paper-dim); }
.fact-sheet tr { border-bottom: 1px solid rgba(20, 35, 46, 0.08); }
.fact-sheet tr:last-child { border-bottom: none; }
.fact-sheet th, .fact-sheet td {
  text-align: left;
  padding: 12px 14px;
  font-size: 0.94rem;
  vertical-align: top;
}
.fact-sheet th {
  font-family: var(--pixel-font);
  text-transform: uppercase;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  color: var(--text-dark);
  width: 34%;
  font-weight: 400;
}
.fact-sheet td { color: var(--text-dark-dim); }

.press-quote {
  font-family: var(--pixel-font);
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: var(--text-dark);
  border-left: 6px solid var(--hud-blue-border);
  padding-left: 20px;
  margin: 24px 0;
  line-height: 1.5;
}