/* Site-specific layout styles for the Coins of Record marketing site.
   Brand color/type/spacing come from the design-system tokens — only use
   token var()s here (no raw hex, no raw px for brand values), per the design
   system's adherence rules. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-app);
  color: var(--text-body);
  font: var(--fw-regular) var(--fs-body) / var(--lh-relaxed) var(--font-sans);
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Marketing top bar: solid ink chrome, identical to the account + app headers
   so the header reads the same whether signed in or out. Pinned to the top. */
.marketing-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  background: var(--surface-ink);
  border-bottom: 1px solid var(--border-strong);
}
.marketing-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
/* On-dark text for the ink bar. */
.marketing-bar .brand-lockup .wordmark { color: var(--text-on-dark); }
.marketing-bar .marketing-nav a:not(.btn) { color: var(--text-on-dark); opacity: .85; }
.marketing-bar .marketing-nav a:not(.btn):hover { color: var(--brass-2); opacity: 1; }
.marketing-bar .btn-ghost { color: var(--text-on-dark); border-color: var(--border-strong); }
.marketing-bar .btn-ghost:hover { background: rgba(236, 232, 220, .10); color: var(--text-on-dark); }
/* "Log in" reads as the secondary brand action — brass outline on the ink bar. */
.marketing-bar .btn-ghost[href="/login"] { color: var(--brass-2); border-color: var(--brass); }
.marketing-bar .btn-ghost[href="/login"]:hover { background: rgba(217, 182, 90, .14); color: var(--brass-2); }
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}
.brand-lockup img { height: 48px; width: auto; display: block; }
.brand-lockup .wordmark {
  font: var(--fw-bold) var(--fs-h3) / 1 var(--font-serif);
  color: var(--text-strong);
  letter-spacing: var(--ls-tight);
}

.marketing-nav {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}
.marketing-nav a { text-decoration: none; color: var(--text-body); }
.marketing-nav a:hover { color: var(--text-strong); }
.marketing-nav a.btn { color: inherit; }

/* === Unified app header =================================================== */
/* Server-rendered twin of the React AppShell top bar (frontend/src/shell/
   AppShell.jsx). Both the marketing and account shells include
   templates/shells/_appbar.html, so the header reads identically whether a
   page is an island or server-rendered, signed in or out. Values mirror the
   AppShell inline styles via tokens. */
.cor-appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  background: var(--ink);
  border-bottom: 1px solid var(--border-strong);
}
/* Brand lockup: gold COR mark + wordmark, links home. */
.cor-appbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  text-decoration: none;
}
/* Brand lockup in the ink top bar: full lockup on desktop, compact mark on mobile. */
.cor-appbar__logo { display: block; flex: none; height: 30px; width: auto; }
.cor-appbar__logo-mark { display: none; flex: none; width: 30px; height: 30px; }
.cor-appbar__wordmark {
  font: var(--fw-bold) var(--fs-h3) / 1 var(--font-serif);
  color: var(--text-on-brass);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}
/* Primary nav, left-justified straight after the brand — the same placement as
   the React shell's .cor-top-nav. It used to sit hard right here and hard left
   there, so the bar visibly jumped when you crossed between the two surfaces.
   `min-width: 0` lets it shrink (and scroll on mobile) instead of shoving the
   utility cluster off the bar. */
.cor-appbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-2);
  min-width: 0;
}
.cor-navlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  font: var(--fw-semibold) var(--fs-body) / 1 var(--font-sans);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--text-on-dark);
  opacity: 0.72;
  white-space: nowrap;
}
.cor-navlink:hover { opacity: 1; color: var(--text-on-dark); }
.cor-navlink.is-active {
  color: var(--text-on-brass);
  opacity: 1;
  background: rgba(217, 182, 90, .18);
}
/* Right cluster: Add coin + account (authed) or auth buttons (anon). Pinned
   right by its own auto margin now that the nav no longer pushes it there —
   which also keeps it right when the nav is hidden (pre-launch anon). */
.cor-appbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: none;
  margin-left: auto;
}
.cor-addcoin {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--brass-hover);
  background: var(--brass);
  color: var(--text-on-brass);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font: var(--fw-semibold) var(--fs-sm) / 1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sheen-brass);
  white-space: nowrap;
}
.cor-addcoin:hover { background: var(--brass-hover); color: var(--text-on-brass); }
.cor-addcoin svg { width: 15px; height: 15px; }

/* Capture. Drawn at 16/1.8 like every other icon in the bar — brass is what
   marks it as the one *action* in the cluster, not bulk.
   Twin of .cor-scan in AppShell.jsx. */
.cor-scan {
  display: grid;
  place-items: center;
  flex: none;
  /* Square hit area matching .cor-avatar beside it — this bar has no bell. */
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-sm);
  color: var(--brass-2);
  text-decoration: none;
  cursor: pointer;
}
.cor-scan svg { width: 16px; height: 16px; }
.cor-scan:hover { background: rgba(217, 182, 90, 0.16); }

/* Account menu (native <details> dropdown — no JS needed). */
.cor-acct { position: relative; }
.cor-acct__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  list-style: none;
}
.cor-acct__trigger::-webkit-details-marker { display: none; }
.cor-acct__name {
  font: var(--fw-semibold) var(--fs-sm) / 1 var(--font-sans);
  color: var(--text-on-brass);
  white-space: nowrap;
}
.cor-avatar {
  width: var(--space-8);
  height: var(--space-8);
  flex: none;
  border-radius: var(--radius-coin);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-2);
  color: var(--text-on-dark);
  font: var(--fw-bold) var(--fs-sm) / 1 var(--font-sans);
  border: 2px solid var(--brass);
  box-shadow: 0 0 0 2px var(--surface-ink);
}
.cor-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 13rem;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: 40;
  max-height: min(74vh, 620px);
  overflow-y: auto;
}
.cor-menu__head {
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-1);
}
.cor-menu__name {
  font: var(--fw-bold) var(--fs-body) / 1.2 var(--font-sans);
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cor-menu__email {
  margin-top: var(--space-1);
  font: var(--fw-regular) var(--fs-sm) / 1.3 var(--font-sans);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cor-menu__tier {
  display: inline-block;
  margin-top: var(--space-1);
  font: var(--fw-bold) var(--fs-overline) / 1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--brand);
}
.cor-menu__sep { border-top: 1px solid var(--border-subtle); margin: var(--space-1) 0; }
/* Account-menu section heading ("Your workspaces") — a {kind: heading} item
   from apps/common/navigation.py. Twin of the React shell's MenuHeading. */
.cor-menu__label {
  padding: var(--space-1) var(--space-3) var(--space-1);
  font: var(--fw-bold) var(--fs-overline) / 1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--brand);
}
.cor-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font: var(--fw-medium) var(--fs-sm) / 1 var(--font-sans);
  color: var(--text-body);
  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.cor-menu-item:hover { background: var(--brand-tint); color: var(--text-strong); }
.cor-menu-item.is-upgrade { color: var(--brand-ink); font-weight: var(--fw-semibold); }
.cor-acct .cor-menu__logout { margin: 0; }

/* Mobile: reclaim space by dropping the wordmark + account name, and let the
   primary nav scroll horizontally so every link stays reachable (anon visitors
   have no dropdown fallback, so the nav must not be hidden outright). The gold
   mark, Add coin, and avatar stay put. */
@media (max-width: 720px) {
  .cor-appbar { gap: var(--space-3); padding: 0 var(--space-4); }
  .cor-appbar__logo { display: none; }
  .cor-appbar__logo-mark { display: block; }
  .cor-appbar__wordmark,
  .cor-acct__name { display: none; }
  .cor-appbar__nav {
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cor-appbar__nav::-webkit-scrollbar { display: none; }
  .cor-navlink { padding: var(--space-2); }
}

.eyebrow {
  font: var(--fw-bold) var(--fs-overline) / 1.2 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--brand);
}

.hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-note { font-size: var(--fs-sm); color: var(--text-muted); margin: var(--space-4) 0 0; }

/* Two-column hero: copy + coin-cluster art */
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-12);
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { display: none; }
}

.hero-art { position: relative; height: 360px; }
.hero-art .coin {
  position: absolute;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sheen-brass), var(--shadow-lg),
    inset 0 0 0 7px rgba(92, 71, 17, .18);
}
.coin-brass {
  width: 210px; height: 210px; top: 40px; left: 90px; z-index: 3;
  background: radial-gradient(circle at 36% 30%, #ecd391, #cda43f 46%, #9c7423);
}
.coin-silver {
  width: 150px; height: 150px; top: 12px; left: 8px; z-index: 2;
  background: radial-gradient(circle at 36% 30%, #eceef1, #b9c0c8 48%, #8a929c);
  box-shadow: var(--shadow-md), inset 0 0 0 6px rgba(60, 66, 74, .15);
}
.coin-bronze {
  width: 130px; height: 130px; bottom: 6px; left: 150px; z-index: 1;
  background: radial-gradient(circle at 36% 30%, #e0b083, #b87a45 50%, #8a5a30);
  box-shadow: var(--shadow-md), inset 0 0 0 5px rgba(80, 50, 25, .2);
}
.hero-art .coin-qr {
  position: absolute; right: 4px; bottom: 60px; z-index: 4;
  width: 56px; height: 56px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-ink); color: var(--brass-2);
  box-shadow: var(--shadow-md);
}

.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--fs-lead); }

/* Supporting-surfaces row */
.surfaces-section { padding-bottom: var(--space-16); }
.surfaces-eyebrow { text-align: center; margin-bottom: var(--space-6); }
.surfaces {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6);
}
@media (max-width: 820px) { .surfaces { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .surfaces { grid-template-columns: 1fr; } }
.surface { text-align: left; }
.surface i, .surface svg {
  width: 26px; height: 26px; color: var(--brand); margin-bottom: var(--space-2);
}
.surface h3 {
  font: var(--text-h3); color: var(--text-strong); margin: 0 0 var(--space-1);
}
.surface p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* Closing CTA band (ink) */
.cta-band { background: var(--surface-ink); color: var(--text-on-dark); margin-top: var(--space-8); }
.cta-band-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); padding: var(--space-12) var(--space-6); flex-wrap: wrap;
}
.cta-band h2 { font: var(--text-h2); color: #fffdf7; margin: 0 0 var(--space-1); }
.cta-band p { margin: 0; color: var(--text-on-dark); opacity: .85; }

.hero {
  padding: var(--space-20) 0 var(--space-16);
}
.hero h1 {
  font: var(--text-display);
  color: var(--text-strong);
  text-wrap: balance;
  margin: var(--space-3) 0 var(--space-4);
  max-width: 18ch;
}
.hero p.lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 52ch;
  margin: 0 0 var(--space-8);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--fw-semibold) var(--fs-body) / 1 var(--font-sans);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn-primary {
  background: var(--brand);
  color: var(--text-on-brass);
  border: 1px solid var(--brass-hover);
  box-shadow: var(--sheen-brass), var(--shadow-xs);
}
.btn-primary:hover { background: var(--brand-hover); color: var(--text-on-brass); }
.btn-primary:active { transform: translateY(0.5px); }
.btn-ghost {
  background: transparent;
  color: var(--text-strong);
  border: 1px solid var(--border-default);
}
.btn-ghost:hover { background: var(--brand-tint); }

/* Base card surface — cream, hairline border, soft shadow. Public market/shop
   tiles and the leaderboard board use `class="… card"`; without this they had no
   boundary and read as floating coins rather than distinct tiles. */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-20);
}
@media (max-width: 720px) { .pillars { grid-template-columns: 1fr; } }
.pillar-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
}
.pillar-card h2 {
  font: var(--text-h2);
  color: var(--text-strong);
  margin: var(--space-2) 0 var(--space-3);
}

.btn-block { width: 100%; justify-content: center; margin-top: var(--space-2); }

.site-footer {
  background: var(--surface-ink);
  color: var(--text-on-dark);
  padding: var(--space-12) 0 var(--space-8);
  font-size: var(--fs-sm);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(236, 232, 220, .12);
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-brand p { color: var(--text-on-dark); opacity: .75; margin: var(--space-3) 0 0; line-height: 1.6; }
.footer-head {
  font: var(--fw-bold) var(--fs-overline) / 1.2 var(--font-sans);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--brass-2); margin: 0 0 var(--space-3);
}
.footer-col { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col a { color: var(--text-on-dark); opacity: .8; text-decoration: none; }
.footer-col a:hover { opacity: 1; color: var(--brass-2); }
.footer-fine { padding-top: var(--space-5); color: var(--text-on-dark); opacity: .6; }

/* --- Auth cards (B1–B4) --------------------------------------------------- */
.auth-wrap {
  min-height: calc(100vh - var(--topbar-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-5);
}
.auth-card {
  width: 400px;
  max-width: 100%;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8) var(--space-8);
}
.auth-logo { width: 44px; height: 44px; margin-bottom: var(--space-4); }
.auth-title { font: var(--text-h2); color: var(--text-strong); margin: 0 0 var(--space-1); }
.auth-subtitle { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--space-6); }
.auth-note {
  font-size: var(--fs-sm); color: var(--brand-ink);
  background: var(--brand-tint); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-4);
}
.auth-aux { font-size: var(--fs-sm); margin: var(--space-3) 0 0; }
.auth-footer {
  text-align: center; margin-top: var(--space-5);
  font-size: var(--fs-sm); color: var(--text-muted);
}

/* Form fields */
.field { margin-bottom: var(--space-4); }
.field > label {
  display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--text-strong); margin-bottom: var(--space-1);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field textarea,
.field select {
  width: 100%;
  font: var(--fw-regular) var(--fs-body) / 1.4 var(--font-sans);
  color: var(--text-body);
  background: var(--paper-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
.field textarea { resize: vertical; min-height: var(--space-16); }
.field input[type="file"] { font-size: var(--fs-sm); color: var(--text-body); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.field .help { font-size: var(--fs-xs); color: var(--text-muted); margin: var(--space-1) 0 0; }
.field .err { font-size: var(--fs-xs); color: var(--danger); margin: var(--space-1) 0 0; }
.field.has-error input, .field.has-error select { border-color: var(--danger); }
.field-check .check-label {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-sm); color: var(--text-body); font-weight: var(--fw-regular);
}
/* Heading for a multi-checkbox group (CheckboxSelectMultiple), e.g. waitlist
   personas on the no-JS /join page and the claim form. */
.field .field-group-label {
  display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--text-strong); margin: 0 0 var(--space-2);
}

/* Flash messages */
.messages { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.msg {
  font-size: var(--fs-sm); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); margin-bottom: var(--space-2);
}
.msg-success { background: var(--success-bg); color: var(--success); }
.msg-error { background: var(--danger-bg); color: var(--danger); }
.msg-info { background: var(--info-bg); color: var(--info); }

/* --- Account shell (M3) --------------------------------------------------- */
/* Ink top bar for logged-in account pages (settings, billing). */
.account-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  background: var(--surface-ink);
  border-bottom: 1px solid var(--border-strong);
}
.account-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.account-bar .brand-lockup .wordmark { color: var(--text-on-dark); }

.account-nav {
  display: flex;
  gap: var(--space-5);
  align-items: center;
}
.account-nav a,
.account-nav .linklike {
  color: var(--text-on-dark);
  text-decoration: none;
  font: var(--fw-semibold) var(--fs-sm) / 1 var(--font-sans);
  opacity: 0.85;
}
.account-nav a:hover,
.account-nav .linklike:hover { opacity: 1; }
.account-logout { margin: 0; }
.account-nav .linklike {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* --- G2 settings --------------------------------------------------------- */
.settings-wrap { max-width: var(--container-prose); }
.settings-h {
  font: var(--text-h2);
  color: var(--text-strong);
  margin: 0 0 var(--space-2);
}
.settings-sub {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin: 0 0 var(--space-8);
}
.settings-section {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.settings-section-h {
  font: var(--text-h3);
  color: var(--text-strong);
  margin: 0 0 var(--space-5);
}

.account-main { padding: var(--space-10) 0 var(--space-16); }

/* --- Account content pages (transfer, print, etc.) ------------------------ */
.account-page { padding: var(--space-10) 0 var(--space-16); }
.account-page.narrow { max-width: 640px; }
.account-page h1 {
  font: var(--text-h1); color: var(--text-strong);
  margin: var(--space-2) 0 var(--space-3);
}
.account-page .lede {
  font-size: var(--fs-lead); color: var(--text-muted);
  max-width: 60ch; margin: 0 0 var(--space-6);
}
.account-page .card {
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: var(--space-6); max-width: 560px;
}
.account-page .back-link { margin-top: var(--space-6); font-size: var(--fs-sm); }
.transfer-live .claim-link {
  width: 100%; font-family: var(--font-mono); font-size: var(--fs-sm);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); background: var(--surface-sunken);
  margin: var(--space-2) 0;
}
.transfer-note {
  font-style: italic; color: var(--text-muted);
  border-left: 3px solid var(--brand); padding-left: var(--space-3);
  margin: var(--space-4) 0;
}
/* Secure 6-digit transfer code: big enough to read aloud / hold up. */
.secure-code {
  font-family: var(--font-mono); font-size: var(--fs-display);
  font-weight: var(--fw-bold); letter-spacing: var(--space-2);
  color: var(--text-strong); text-align: center; user-select: all;
  padding: var(--space-4) var(--space-3); margin: var(--space-2) 0;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.transfer-status {
  list-style: none; padding: 0; margin: var(--space-4) 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.transfer-status li { display: flex; align-items: center; gap: var(--space-2); }
.claim-cover {
  display: block; width: 100%; max-width: 240px;
  border-radius: var(--radius-md); margin: 0 0 var(--space-4);
}
.form-error {
  color: var(--danger); font-size: var(--fs-sm);
  font-weight: var(--fw-medium); margin: 0 0 var(--space-4);
}
p.help { font-size: var(--fs-xs); color: var(--text-muted); margin: var(--space-2) 0 0; }

/* --- I1 maker apply (plan cards) ----------------------------------------- */
.mk-plan { margin-bottom: var(--space-4); }
.mk-plan-title { font: var(--text-h3); color: var(--text-strong); margin: 0 0 var(--space-1); }
.mk-plan-price { font-family: var(--font-serif); font-weight: var(--fw-bold); font-size: var(--fs-h2); color: var(--brass); margin: 0 0 var(--space-2); }
.mk-plan-per { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-muted); }
.mk-plan-desc { color: var(--text-muted); margin: 0 0 var(--space-4); }

/* --- K1 moderation queue ------------------------------------------------- */
.mod-list { list-style: none; padding: 0; margin: 0; }
.mod-item { margin-bottom: var(--space-4); max-width: none; }
.mod-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.mod-type { font-weight: var(--fw-bold); color: var(--text-strong); }
.mod-link { font-size: var(--fs-sm); color: var(--brand); }
.mod-by { font-size: var(--fs-sm); color: var(--text-muted); }
.mod-reason { color: var(--text-body); margin: 0 0 var(--space-3); }
.mod-actions { display: flex; gap: var(--space-2); }
.mod-empty { color: var(--text-muted); padding: var(--space-8) 0; }

/* --- FAQ accordions (shared: landing teaser + /faq page) ------------------ */
/* Native <details> — zero JS. Used on the landing FAQ teaser and the full FAQ. */
.faq-item {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
}
.faq-item > summary {
  font: var(--fw-semibold) var(--fs-lead) / 1.3 var(--font-sans);
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  font: var(--fw-regular) var(--fs-h3) / 1 var(--font-serif);
  color: var(--brand);
}
.faq-item[open] > summary::after { content: "–"; }
.faq-item > p { color: var(--text-muted); margin: var(--space-3) 0 0; }
.faq-item > p a { color: var(--link); }

/* --- Analytics consent banner ------------------------------------------- */
/* Rendered by the site-wide tracker (frontend/src/tracker). Styling lives here
   (not inline) so the tracker JS stays token-clean and dependency-free. */
.cor-consent {
  position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  z-index: 1000; margin: 0 auto; max-width: var(--container-prose);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  background: var(--surface-card); color: var(--text-body);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg, var(--shadow-md)); padding: var(--space-4) var(--space-5);
  font-family: var(--font-sans); font-size: var(--fs-sm);
}
.cor-consent[hidden] { display: none; }
.cor-consent-text { flex: 1 1 16rem; margin: 0; }
.cor-consent-actions { display: flex; gap: var(--space-2); flex: 0 0 auto; }
.cor-consent-btn {
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-bold);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  border: 1px solid var(--border-default); cursor: pointer; background: var(--surface-sunken);
  color: var(--text-strong);
}
.cor-consent-btn.is-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink, var(--surface-card)); }
.cor-consent-btn:hover { border-color: var(--border-strong); }
.cor-consent-btn.is-primary:hover { background: var(--brand-hover); }

/* ── "Coming soon" veil ───────────────────────────────────────────────
   Blurs + greys a content region and floats a "Coming soon" panel over
   it, while the surrounding page chrome (header, search, CTA) stays sharp.
   The veiled content is made inert (not clickable, not selectable). Add
   `cs-veil--soft` for a lighter blur, `cs-veil--lg` for a touch less blur.
   To launch an area, drop the `cs-veil` wrapper and the panel block. */
.cs-veil { position: relative; isolation: isolate; }

.cs-veil__content {
  filter: blur(7px) grayscale(0.95);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}
.cs-veil--soft .cs-veil__content {
  filter: blur(2.5px) grayscale(0.5);
  opacity: 0.8;
}
/* Coins + shop: a touch less blur than the default veil. */
.cs-veil--lg .cs-veil__content { filter: blur(6.3px) grayscale(0.95); }

/* Inline "coming soon" disable: blur + grey a single control (e.g. a chip). */
.cs-fuzz {
  filter: blur(2px) grayscale(0.6);
  opacity: 0.75;
  pointer-events: none;
  user-select: none;
}

/* The panel spans the veiled region; the badge sticks near the top of the
   viewport so it stays visible while scrolling a tall grid. */
.cs-veil__panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.cs-veil__badge {
  position: sticky;
  top: var(--space-10);
  width: fit-content;
  max-width: 26rem;
  margin: var(--space-10) auto 0;
  padding: var(--space-6) var(--space-8);
  text-align: center;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transform: scale(1.3);
  transform-origin: top center;
}
.cs-veil__badge .eyebrow { margin: 0 0 var(--space-2); }
.cs-veil__title {
  margin: 0;
  font: var(--fw-bold) var(--fs-h3) / 1.15 var(--font-serif);
  color: var(--text-strong);
}
.cs-veil__note {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}