/* ============================================================================
   Shield & Shred — site theme v2 (2026-08-10)
   Chitin dark + toxic green, in the GAME'S OWN type: Lilita One is the display
   font the game itself uses, Baloo 2 its body font. Both are on Google Fonts,
   which is what lets the site read as "the game's site" rather than "a site
   about the game".

   IMAGE SLOTS DEGRADE, NEVER BREAK. Every place a generated image will land is
   layered over a CSS-drawn fallback (gradients / inline SVG), and the <img>
   removes itself on error — so the site looks finished before any art exists
   and simply gets richer as PNGs drop into /img/.
   ========================================================================== */

:root {
  --bg:        #0b0812;
  --bg-2:      #120c1d;
  --surface:   #171022;
  --raised:    #1d1530;
  --border:    #2c2440;
  --border-hi: #3d3158;

  --text:      #edeaf6;
  --dim:       #a79fc2;
  --faint:     #6f688c;

  /* the game's locked art palette */
  --green:     #8be04a;
  --green-hi:  #d6ff9e;
  --green-ink: #0d1a05;   /* dark ink ON green — the game's button standard */
  --green-dp:  #3f7d1e;
  --violet:    #6b4a8f;
  --violet-dp: #3a2352;

  /* element identities */
  --fire:  #ff6b3d;
  --water: #4da6ff;
  --air:   #7fd8d0;
  --earth: #c9964b;
  --toxic: #8be04a;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;

  --disp: "Lilita One", "Arial Black", sans-serif;
  --body: "Baloo 2", "Segoe UI", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--green); }

::selection { background: var(--green); color: var(--green-ink); }

/* ---- layout ------------------------------------------------------------- */
.wrap   { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 820px;  margin: 0 auto; padding: 0 22px; }

section { padding: 84px 0; position: relative; }
section.tight { padding: 56px 0; }

/* section headers: small green kicker over a big display heading */
.kicker {
  display: block;
  font-family: var(--body); font-weight: 800;
  font-size: 0.82rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--green); margin-bottom: 10px;
}
h2.sec {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  letter-spacing: 0.02em; line-height: 1.12;
  text-transform: uppercase;
}
.sec-head { margin-bottom: 40px; }
.sec-head.center { text-align: center; }
.sec-head p.sub { color: var(--dim); max-width: 620px; margin-top: 12px; font-size: 1.05rem; }
.sec-head.center p.sub { margin-left: auto; margin-right: auto; }

/* ---- top nav ------------------------------------------------------------ */
.topnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 8, 18, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(44, 36, 64, 0.6);
}
.nav-in {
  max-width: 1080px; margin: 0 auto; padding: 0 22px;
  height: 64px; display: flex; align-items: center; gap: 20px;
}
.brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--text);
  font-family: var(--disp); font-size: 1.12rem; letter-spacing: 0.03em;
  white-space: nowrap;
}
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand em { color: var(--green); font-style: normal; }
.topnav .links { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.topnav .links a {
  color: var(--dim); text-decoration: none;
  font-weight: 700; font-size: 0.95rem;
  transition: color 0.15s;
}
.topnav .links a:hover { color: var(--green-hi); }
.topnav .links a.cta {
  background: linear-gradient(180deg, var(--green-hi) 0%, var(--green) 45%, #63b32c 100%);
  color: var(--green-ink);
  padding: 9px 18px; border-radius: 999px;
  font-weight: 800; font-size: 0.9rem;
  box-shadow: 0 2px 14px rgba(139, 224, 74, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}
.topnav .links a.cta:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(139, 224, 74, 0.5); color: var(--green-ink); }

@media (max-width: 620px) {
  .nav-in { gap: 12px; height: 58px; }
  .brand span { display: none; }           /* icon-only brand on phones */
  .topnav .links { gap: 14px; }
  .topnav .links a { font-size: 0.86rem; }
  .topnav .links a.cta { padding: 8px 14px; }
}

/* ---- hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 96px 0 88px;
  text-align: center;
  overflow: hidden;
  /* layered: key art (if present) over drawn atmosphere. A missing image layer
     is simply skipped by the browser, so this never renders broken. */
  background-image:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(107, 74, 143, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 15% 100%, rgba(139, 224, 74, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 100%, rgba(77, 60, 110, 0.22) 0%, transparent 55%),
    url("/img/hero-bg.jpg"),
    linear-gradient(180deg, #140e21 0%, var(--bg) 100%);
  background-size: auto, auto, auto, cover, auto;
  background-position: center top, left bottom, right bottom, center 30%, center;
  background-repeat: no-repeat;
}
/* dark veil so the H1 stays readable over any key art */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,8,18,0.55) 0%, rgba(11,8,18,0.25) 40%, rgba(11,8,18,0.92) 100%);
  pointer-events: none;
}
.hero-in { position: relative; z-index: 1; }

.hero .mark {
  width: 118px; height: 118px; border-radius: 26px;
  margin: 0 auto 26px;
  box-shadow:
    0 0 0 1px rgba(139, 224, 74, 0.25),
    0 10px 40px rgba(0, 0, 0, 0.6),
    0 0 70px rgba(139, 224, 74, 0.22);
  animation: heroFloat 5.2s ease-in-out infinite;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.hero h1 {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  letter-spacing: 0.03em; line-height: 1.05;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55);
}
.hero h1 span { color: var(--green); }
.hero p.tag {
  color: var(--dim); font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  font-weight: 600; margin-top: 14px;
}

.cta-row { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-weight: 800; font-size: 1.02rem;
  padding: 15px 30px; border-radius: 999px; text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn.primary {
  background: linear-gradient(180deg, var(--green-hi) 0%, var(--green) 45%, #63b32c 100%);
  color: var(--green-ink);
  box-shadow: 0 4px 24px rgba(139, 224, 74, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(139, 224, 74, 0.55), inset 0 1px 0 rgba(255,255,255,0.35); }
.btn.ghost {
  color: var(--green-hi); border: 2px solid rgba(139, 224, 74, 0.45);
  background: rgba(139, 224, 74, 0.06);
}
.btn.ghost:hover { border-color: var(--green); background: rgba(139, 224, 74, 0.12); transform: translateY(-2px); }
.btn.soon { cursor: default; opacity: 0.95; }
.btn .sub { display: block; font-size: 0.72rem; font-weight: 700; opacity: 0.75; line-height: 1; }
.btn .stack { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1; }

.free-note {
  margin-top: 18px; color: var(--faint); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.04em;
}

/* hero stat strip */
.stats {
  list-style: none; display: flex; justify-content: center; gap: clamp(28px, 7vw, 72px);
  margin-top: 52px; padding: 0;
}
.stats b {
  display: block; font-family: var(--disp); font-weight: 400;
  font-size: clamp(1.7rem, 4.5vw, 2.5rem); color: var(--green);
  line-height: 1;
}
.stats span {
  color: var(--dim); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---- feature grid -------------------------------------------------------- */
.features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.feature {
  background: linear-gradient(180deg, var(--raised) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 26px 24px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.feature:hover {
  transform: translateY(-4px);
  border-color: var(--border-hi);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
.feature .ico {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(139, 224, 74, 0.1);
  border: 1px solid rgba(139, 224, 74, 0.22);
  margin-bottom: 16px;
}
.feature .ico svg { width: 28px; height: 28px; }
.feature h3 {
  font-family: var(--disp); font-weight: 400; font-size: 1.12rem;
  letter-spacing: 0.03em; margin-bottom: 8px; text-transform: uppercase;
}
.feature p { color: var(--dim); font-size: 0.96rem; }

/* ---- titan element showcase ---------------------------------------------- */
.elements {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
@media (max-width: 900px) { .elements { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .elements { grid-template-columns: repeat(2, 1fr); } }

.element {
  --ec: var(--green);
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.element:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--ec) 55%, var(--border)); box-shadow: 0 16px 36px rgba(0,0,0,0.45); }
.element.fire  { --ec: var(--fire); }
.element.water { --ec: var(--water); }
.element.air   { --ec: var(--air); }
.element.earth { --ec: var(--earth); }
.element.toxic { --ec: var(--toxic); }

/* drawn fallback: element-coloured atmosphere + big glyph. The generated card
   art covers ALL of this when it exists. */
.element .fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse 90% 55% at 50% 100%, color-mix(in srgb, var(--ec) 26%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--raised) 0%, var(--surface) 100%);
}
.element .fallback svg { width: 44%; height: 44%; opacity: 0.9; filter: drop-shadow(0 4px 18px color-mix(in srgb, var(--ec) 45%, transparent)); }

.element img.art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.element .label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 26px 14px 12px;
  text-align: center;
  background: linear-gradient(180deg, transparent 0%, rgba(11, 8, 18, 0.88) 55%);
}
.element .label b {
  display: block; font-family: var(--disp); font-weight: 400;
  font-size: 1.02rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ec);
}
.element .label span { color: var(--dim); font-size: 0.78rem; font-weight: 600; }

.rarity-note {
  margin-top: 26px; text-align: center; color: var(--dim); font-size: 0.95rem;
}
.rarity-note b.n { color: #cfc9e0; } .rarity-note b.r { color: #6fb7ff; }
.rarity-note b.u { color: #c58cff; } .rarity-note b.m { color: #ffb84d; }

/* ---- gameplay phones ------------------------------------------------------ */
.phones {
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(14px, 3vw, 34px);
  flex-wrap: wrap;
}
.phone {
  width: min(250px, 78vw);
  border-radius: 34px;
  border: 1px solid var(--border-hi);
  background: #0a0714;
  padding: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  transition: transform 0.25s;
}
.phone:hover { transform: translateY(-6px); }
.phone.mid { width: min(280px, 82vw); }
.phone .screen {
  position: relative;
  border-radius: 24px; overflow: hidden;
  aspect-ratio: 9 / 19.5;
  background: var(--surface);
}
.phone .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* drawn fallback: a faint match-3 board so an empty phone still reads as gameplay */
.phone .screen .fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    linear-gradient(rgba(139, 224, 74, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 224, 74, 0.05) 1px, transparent 1px),
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(107, 74, 143, 0.3) 0%, transparent 65%),
    linear-gradient(180deg, #191129 0%, #0f0a1a 100%);
  background-size: 44px 44px, 44px 44px, auto, auto;
}
.phone .screen .fallback span {
  color: var(--faint); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.phone .cap {
  text-align: center; color: var(--dim); font-weight: 700;
  font-size: 0.9rem; padding: 12px 0 4px;
}

/* ---- split (base building) ----------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; gap: 28px; } }
.split .copy h2 { margin-bottom: 14px; }
.split .copy p { color: var(--dim); margin-bottom: 12px; }
.split .copy ul { list-style: none; margin-top: 18px; }
.split .copy li {
  padding-left: 30px; position: relative; margin: 10px 0; color: var(--text); font-weight: 600;
}
.split .copy li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--green-hi), var(--green) 60%, var(--green-dp));
  box-shadow: 0 0 10px rgba(139, 224, 74, 0.5);
}
.split .visual {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse 70% 60% at 50% 88%, rgba(139, 224, 74, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 90% 80% at 50% 0%, rgba(107, 74, 143, 0.35) 0%, transparent 70%),
    linear-gradient(180deg, #1b1229 0%, #0e0918 100%);
}
.split .visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split .visual .fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.split .visual .fallback svg { width: 46%; opacity: 0.85; filter: drop-shadow(0 6px 24px rgba(139, 224, 74, 0.3)); }

/* ---- odds / fair play band ------------------------------------------------ */
.band {
  background: linear-gradient(180deg, var(--raised) 0%, var(--surface) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.band-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
}
.band-in .copy { max-width: 560px; }
.band-in h3 { font-family: var(--disp); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 8px; }
.band-in p { color: var(--dim); font-size: 0.98rem; }

/* ---- FAQ ------------------------------------------------------------------ */
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.faq details[open] { border-color: rgba(139, 224, 74, 0.35); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 18px 52px 18px 22px;
  font-weight: 800; font-size: 1.02rem;
  position: relative;
  user-select: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--disp); font-size: 1.3rem; color: var(--green);
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .a { padding: 0 22px 20px; color: var(--dim); font-size: 0.97rem; }
.faq .a a { font-weight: 700; }

/* ---- final CTA ------------------------------------------------------------ */
.cta-final {
  text-align: center;
  background:
    radial-gradient(ellipse 60% 90% at 50% 100%, rgba(139, 224, 74, 0.13) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(107, 74, 143, 0.25) 0%, transparent 65%);
}
.cta-final h2 { font-family: var(--disp); font-weight: 400; font-size: clamp(1.8rem, 5vw, 2.8rem); letter-spacing: 0.03em; text-transform: uppercase; }
.cta-final p { color: var(--dim); margin-top: 12px; }
.cta-final .cta-row { margin-top: 30px; }

/* ---- footer --------------------------------------------------------------- */
footer.site {
  border-top: 1px solid var(--border);
  padding: 52px 0 40px;
  background: #0a0711;
  margin-top: 0;
}
.foot-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px;
}
@media (max-width: 700px) { .foot-grid { grid-template-columns: 1fr; gap: 26px; } }
.foot-grid .brandcol { display: flex; flex-direction: column; gap: 12px; }
.foot-grid .brandcol .brand { font-size: 1.05rem; }
.foot-grid .brandcol p { color: var(--faint); font-size: 0.9rem; max-width: 300px; }
.foot-grid h4 {
  font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 12px;
}
.foot-grid ul { list-style: none; }
.foot-grid li { margin: 8px 0; }
.foot-grid a { color: var(--dim); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.foot-grid a:hover { color: var(--green-hi); }
.foot-legal {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid rgba(44, 36, 64, 0.5);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  color: var(--faint); font-size: 0.85rem;
}

/* ---- scroll reveal -------------------------------------------------------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: 0.08s; } .rv.d2 { transition-delay: 0.16s; }
.rv.d3 { transition-delay: 0.24s; } .rv.d4 { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* ============================================================================
   ARTICLE PAGES (guides / updates) — shared editorial styling
   ========================================================================== */
.page-head {
  padding: 64px 0 20px;
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(107, 74, 143, 0.22) 0%, transparent 65%);
}
.page-head h1 {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(2rem, 6vw, 3rem); letter-spacing: 0.03em; text-transform: uppercase;
}
.page-head p.lead { color: var(--dim); margin-top: 12px; max-width: 640px; font-size: 1.05rem; }

.article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: clamp(24px, 4vw, 40px);
  margin: 26px 0;
}
.article h2 {
  font-family: var(--disp); font-weight: 400; font-size: 1.45rem;
  letter-spacing: 0.03em; text-transform: uppercase;
  margin-bottom: 14px;
}
.article h2 .tag {
  font-family: var(--body); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.14em; vertical-align: middle;
  color: var(--green-ink); background: var(--green);
  border-radius: 999px; padding: 4px 10px; margin-left: 10px;
}
.article h3 { font-size: 1.06rem; font-weight: 800; margin: 22px 0 8px; color: var(--green-hi); }
.article p  { color: var(--dim); margin: 10px 0; }
.article strong { color: var(--text); }
.article ul { margin: 12px 0 12px 22px; color: var(--dim); }
.article li { margin: 7px 0; }
.article li::marker { color: var(--green); }

/* data tables (odds, elements) */
.article table, article.legal table {
  width: 100%; border-collapse: collapse; margin: 16px 0;
  font-size: 0.97rem;
}
.article th, article.legal th {
  text-align: left; padding: 10px 14px;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint); border-bottom: 2px solid var(--border-hi);
}
.article td, article.legal td {
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  color: var(--text);
}
.article tr:last-child td { border-bottom: none; }
.article td.pct { font-family: var(--disp); color: var(--green); letter-spacing: 0.04em; }

/* release timeline (updates page) */
.release { position: relative; padding-left: 34px; margin: 34px 0; }
.release::before {
  content: ""; position: absolute; left: 8px; top: 10px; bottom: -34px;
  width: 2px; background: var(--border);
}
.release:last-child::before { display: none; }
.release::after {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--green-hi), var(--green) 60%, var(--green-dp));
  box-shadow: 0 0 12px rgba(139, 224, 74, 0.5);
}
.release.future::after { background: var(--raised); border: 2px solid var(--border-hi); box-shadow: none; }
.release h2 {
  font-family: var(--disp); font-weight: 400; font-size: 1.4rem;
  letter-spacing: 0.03em;
}
.release .date { color: var(--faint); font-size: 0.88rem; font-weight: 700; margin: 2px 0 10px; }

/* guide hub cards */
.guide-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 26px 0; }
.guide-card {
  display: block; text-decoration: none;
  background: linear-gradient(180deg, var(--raised) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px;
  transition: transform 0.2s, border-color 0.2s;
}
.guide-card:hover { transform: translateY(-4px); border-color: rgba(139, 224, 74, 0.4); }
.guide-card h3 { font-family: var(--disp); font-weight: 400; font-size: 1.05rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); margin-bottom: 6px; }
.guide-card p { color: var(--dim); font-size: 0.92rem; }
.guide-card .soon-tag { display: inline-block; margin-top: 10px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; color: var(--faint); text-transform: uppercase; }

/* ============================================================================
   LEGAL (privacy) — the 66KB generated document keeps its class contract
   ========================================================================== */
article.legal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 34px clamp(18px, 4vw, 44px);
  margin: 26px 0;
}
article.legal h1 { font-family: var(--disp); font-weight: 400; font-size: 1.9rem; letter-spacing: 0.03em; margin-bottom: 6px; }
article.legal h2 { font-size: 1.3rem; margin: 30px 0 10px; color: var(--green); font-weight: 800; }
article.legal h3 { font-size: 1.1rem; margin: 22px 0 8px; font-weight: 800; }
article.legal h4 { font-size: 1rem; margin: 18px 0 6px; color: var(--dim); font-weight: 700; }
article.legal p { margin: 10px 0; color: var(--dim); }
article.legal strong { color: var(--text); }
article.legal ul { margin: 10px 0 10px 24px; color: var(--dim); }
article.legal li { margin: 6px 0; }
article.legal a { color: var(--green); word-break: break-word; }

/* legacy header used by privacy.html until its chrome is swapped */
header.site { display: flex; align-items: center; gap: 14px; padding: 18px 0 26px; }
header.site img { width: 44px; height: 44px; border-radius: 11px; }
header.site .name { font-family: var(--disp); font-size: 1.15rem; letter-spacing: 0.03em; }
header.site nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
header.site nav a { color: var(--dim); text-decoration: none; font-weight: 700; font-size: 0.92rem; }
header.site nav a:hover { color: var(--green); }

/* ---- 404 ------------------------------------------------------------------ */
.notfound { text-align: center; padding: 120px 0; }
.notfound h1 { font-family: var(--disp); font-weight: 400; font-size: clamp(3.4rem, 14vw, 6.5rem); color: var(--green); letter-spacing: 0.04em; line-height: 1; }
.notfound p { color: var(--dim); margin: 16px 0 30px; font-size: 1.1rem; }