:root {
  --bg: #FAF6EC;
  --surface: #FFFFFF;
  --surface-tint: #F6E9CB;
  --line: #E9E0CC;
  --ink: #201A10;
  --ink-muted: #78705E;
  --accent: #A8762E;
  --accent-hover: #8F6423;
  --on-accent: #FFFDF7;
  --live-green: #4E9B5D;
  --error: #B33A2E;
  /* Mark fade: gold at #1, fading to muted by #5 — same idea as the
     slot-title sizes (25/20/15/12/12), just as a 5-bar gradient. */
  --mark-1: #A8762E;
  --mark-2: #B08C4E;
  --mark-3: #93835A;
  --mark-4: #83795F;
  --mark-5: #78705E;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17130D;
    --surface: #201A11;
    --surface-tint: #362712;
    --line: rgba(245,239,226,0.14);
    --ink: #F5EFE1;
    --ink-muted: #B3A78D;
    --accent: #E0A857;
    --accent-hover: #EEBB70;
    --on-accent: #1B1408;
    --live-green: #6FBE7C;
    --error: #E2897A;
    --mark-1: #E0A857;
    --mark-2: #D3A868;
    --mark-3: #C4A578;
    --mark-4: #B8A481;
    --mark-5: #B3A78D;
  }
}
:root[data-theme="dark"] {
  --bg: #17130D;
  --surface: #201A11;
  --surface-tint: #362712;
  --line: rgba(245,239,226,0.14);
  --ink: #F5EFE1;
  --ink-muted: #B3A78D;
  --accent: #E0A857;
  --accent-hover: #EEBB70;
  --on-accent: #1B1408;
  --live-green: #6FBE7C;
  --error: #E2897A;
  --mark-1: #E0A857;
  --mark-2: #D3A868;
  --mark-3: #C4A578;
  --mark-4: #B8A481;
  --mark-5: #B3A78D;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg); color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  line-height: 1.5; font-size: 15px;
}
h1, h2, h3 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; text-wrap: balance; letter-spacing: -0.02em; }
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
img { max-width: 100%; }

.wrap { max-width: 920px; margin: 0 auto; padding: 0 24px; }

/* ---------- config banner ---------- */
.config-banner {
  background: var(--surface-tint); color: var(--accent); text-align: center;
  font-size: 13px; padding: 10px 16px;
}
.config-banner code { font-family: ui-monospace, monospace; }

/* ---------- topbar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 24px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand .mark { width: 30px; height: 30px; flex: none; }
.brand .wordmark { font-weight: 800; font-size: 25px; }
.topbar-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.live-pill {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px 6px 11px; white-space: nowrap;
}
.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; position: relative; }
.dot-green { background: var(--live-green); }
@media (prefers-reduced-motion: no-preference) {
  .dot-green::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--live-green);
    animation: pulse 2.2s ease-out infinite;
  }
}
@keyframes pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3.4); opacity: 0; } }
.nav-link { font-size: 13.5px; color: var(--ink-muted); text-decoration: none; }
.nav-link:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero { text-align: center; padding: 30px 24px 4px; }
.hero h1 {
  font-size: clamp(26px, 4vw, 38px); font-weight: 800; line-height: 1.1; margin: 0 0 8px;
}
.hero h1 .accent-text { color: var(--accent); }
.hero-sub { font-size: 15px; color: var(--ink-muted); max-width: 50ch; margin: 0 auto 18px; }

.submit-pill-row {
  display: flex; align-items: flex-start; gap: 8px; max-width: 780px; margin: 0 auto; flex-wrap: wrap;
}
.field-col { display: flex; flex-direction: column; gap: 5px; flex: 1 1 160px; min-width: 0; }
.field-col.select-col { flex: 0 1 190px; }
.pill-field {
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  display: flex; align-items: center; width: 100%;
}
.pill-field.field-invalid { border-color: var(--error); }
.pill-field input, .pill-field select {
  width: 100%; border: none; background: none; padding: 13px 18px; font-size: 14.5px; color: var(--ink);
}
.pill-field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 12px; }
.pill-field input:focus-visible, .pill-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; }
.field-error { font-size: 12px; color: var(--error); padding: 0 14px; }
.btn-claim-pill {
  background: var(--accent); color: var(--on-accent); border: none; border-radius: 999px;
  padding: 13px 24px; font-weight: 700; font-size: 14.5px; cursor: pointer; white-space: nowrap; flex: none;
}
.btn-claim-pill:hover { background: var(--accent-hover); }
.btn-claim-pill:disabled { opacity: 0.6; cursor: not-allowed; }
@media (max-width: 620px) {
  .submit-pill-row { flex-direction: column; align-items: stretch; }
  .field-col.select-col { flex: 1 1 auto; }
  .btn-claim-pill { width: 100%; }
}

.form-msg { text-align: center; font-size: 13.5px; margin-top: 12px; }
.form-msg.error-msg { color: var(--error); }
.form-msg.success-msg { color: var(--live-green); }
.form-msg a { text-decoration: underline; cursor: pointer; color: var(--accent); }
.form-full-msg {
  max-width: 480px; margin: 0 auto; text-align: center; font-size: 14.5px; color: var(--accent);
  background: var(--surface-tint); border-radius: 999px; padding: 13px 22px;
}
.trust-line { text-align: center; font-size: 12.5px; color: var(--ink-muted); margin: 10px 0 0; }

/* ---------- swatches ---------- */
.swatch {
  display: flex; align-items: center; justify-content: center; border-radius: 12px; flex: none;
  font-weight: 800; color: #FFFDF7; object-fit: cover; background-color: var(--surface);
  width: 40px; height: 40px; font-size: 15px;
}

/* ---------- slot cards — one design for every rank; only .slot-title's
   inline font-size (set per-rank in JS) creates the hierarchy ---------- */
.rows-list { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 4px; }
.slot-card { display: flex; align-items: flex-start; gap: 16px; border-radius: 20px; padding: 16px 20px; }
.slot-card.claimed { background: var(--surface-tint); }
.slot-card.open { background: var(--surface); border: 1px dashed var(--line); }
/* Nudged down slightly so they line up with the title's cap-height, not
   the top edge of the card — align-items:flex-start alone sits them a
   touch high since the title's line-height has its own leading above it. */
.slot-rank { font-size: 22px; font-weight: 800; color: var(--accent); width: 40px; text-align: center; flex: none; margin-top: 2px; }
.slot-card.open .slot-rank { color: var(--ink-muted); }
.slot-card .swatch { margin-top: 7px; }
.slot-body { min-width: 0; flex: 1 1 auto; }
.slot-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 4px; }
.slot-title {
  font-weight: 700; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slot-title.muted { color: var(--ink-muted); font-weight: 600; }
.slot-desc { font-size: 13.5px; color: var(--ink-muted); margin: 0 0 6px; max-width: 60ch; }
.slot-meta { font-size: 13px; color: var(--ink-muted); margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.slot-meta a.link { color: var(--accent); text-decoration: none; }
.slot-meta a.link:hover { text-decoration: underline; }
.expiry { font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; flex: none; }
.expiry.soon { color: var(--error); font-weight: 600; }
.badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}

.empty-feed { padding: 6px 0 20px; font-size: 14.5px; color: var(--ink-muted); text-align: center; }

/* ---------- stats section ---------- */
.stats-section { padding: 32px 0 8px; text-align: center; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 520px; margin: 0 auto; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 10px; }
.stat-num {
  display: block; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; margin-bottom: 2px;
}
.stat-label { font-size: 11.5px; color: var(--ink-muted); }

/* ---------- how it works ---------- */
.how { padding: 48px 0 40px; }
.how h2 { font-size: 18px; margin: 0 0 20px; text-align: center; }
.how ol { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 16px; max-width: 560px; }
.how li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; }
.how .step-num { font-size: 14px; font-weight: 800; color: var(--accent); padding-top: 1px; }
.how p { margin: 0; font-size: 14.5px; color: var(--ink-muted); }
.how strong { color: var(--ink); font-weight: 700; }

/* ---------- footer ---------- */
footer { padding: 26px 0 56px; border-top: 1px solid var(--line); margin-top: 8px; text-align: center; }
footer p { font-size: 12.5px; color: var(--ink-muted); margin: 0 0 10px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.footer-links a { font-size: 12.5px; color: var(--ink-muted); text-decoration: underline; }
.footer-links a:hover { color: var(--ink); }

/* ---------- simple page header (pricing/legal pages) ---------- */
.simple-header { padding: 20px 24px; }
.simple-header .brand { text-decoration: none; color: inherit; }

/* ---------- pricing page ---------- */
.pricing-hero { text-align: center; padding: 20px 24px 8px; }
.pricing-hero h1 { font-size: clamp(28px, 4.5vw, 40px); font-weight: 800; margin: 0 0 12px; }
.pricing-hero p { font-size: 15.5px; color: var(--ink-muted); max-width: 56ch; margin: 0 auto; }

.tier-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;
  margin: 32px 0; max-width: 720px; margin-left: auto; margin-right: auto;
}
.tier-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 20px 16px; text-align: center;
}
.tier-card.tier-1 { background: var(--surface-tint); border-color: var(--accent); }
.tier-rank { font-size: 13px; font-weight: 700; color: var(--ink-muted); margin: 0 0 8px; }
.tier-card.tier-1 .tier-rank { color: var(--accent); }
.tier-price { font-size: 26px; font-weight: 800; margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.tier-note { font-size: 12px; color: var(--ink-muted); margin: 0; }

.free-banner {
  max-width: 720px; margin: 0 auto 32px; background: var(--surface); border: 1px dashed var(--line);
  border-radius: 16px; padding: 16px 20px; text-align: center; font-size: 14.5px; color: var(--ink-muted);
}
.free-banner strong { color: var(--ink); }

/* ---------- legal prose pages ---------- */
.legal { max-width: 720px; margin: 0 auto; padding: 24px 24px 64px; }
.legal h1 { font-size: clamp(26px, 4vw, 34px); font-weight: 800; margin: 0 0 6px; }
.legal .updated { font-size: 13px; color: var(--ink-muted); margin: 0 0 32px; }
.legal h2 { font-size: 18px; font-weight: 700; margin: 32px 0 10px; }
.legal p { font-size: 15px; line-height: 1.65; color: var(--ink); margin: 0 0 14px; }
.legal ul, .legal ol { margin: 0 0 14px; padding-left: 22px; }
.legal li { font-size: 15px; line-height: 1.65; color: var(--ink); margin: 0 0 8px; }
.legal a { color: var(--accent); text-decoration: underline; }
.legal strong { font-weight: 700; }

@media (prefers-reduced-motion: no-preference) {
  .just-claimed { animation: settle 0.6s ease; }
  @keyframes settle { from { background: var(--surface-tint); } to { background: transparent; } }
}