/* ═══════════════════════════════════════════════════════════════════════
   5arz · brand.css — the single coherent design system
   Imported by every page. One typeface (Switzer), one palette
   (ink + gold + mint + ember-for-urgency), one spacing scale.
   Loaded AFTER each page's own <style> so it unifies tokens + type
   site-wide. Last updated 2026-06-25.
   ═══════════════════════════════════════════════════════════════════════ */
@import url('https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600,700,800&f[]=jetbrains-mono@400,500,600&display=swap');

:root {
  /* surfaces */
  --bg:#07080B; --bg-0:#07080B; --bg-1:#0E1016; --bg-2:#151821; --bg-3:#1E2230;
  --card:#13161F; --card-2:#1A1E29;
  --line:rgba(232,222,198,.09); --line-2:rgba(232,222,198,.17); --rule:rgba(232,222,198,.09); --rule-2:rgba(232,222,198,.17);
  /* text */
  --text:#F4EEE2; --text-2:rgba(244,238,226,.72); --text-3:rgba(244,238,226,.46); --text-4:rgba(244,238,226,.30);
  /* brand — gold(primary) · mint(earn/positive) · ember(urgency only) */
  --gold:#E8C66B; --gold-l:#F7E2A0; --gold-d:#C9A547;
  --mint:#52E5B5; --mint-l:#8AF0CB; --mint-d:#2FB88C;
  --ember:#FF7A45; --ember-d:#E5612C;
  --gold-tint:rgba(232,198,107,.12); --mint-tint:rgba(82,229,181,.12);
  /* legacy aliases collapsed onto the coherent palette */
  --violet:#E8C66B; --blue:#52E5B5; --rose:#E8C66B; --accent:#E8C66B; --green:#52E5B5;
  /* scale */
  --maxw:1200px; --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(16px,3.2vw,26px); --vgap:clamp(20px,3.4vw,32px); --sp:clamp(56px,7vw,104px);
  --r:18px; --r-sm:12px; --r-lg:22px;
}

/* ── enforce ONE typeface everywhere (kills the IBM-Plex→serif fallback mix) ── */
html, body { font-family:'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif !important; letter-spacing:-.011em; }
h1, h2, h3, h4, h5, h6, button, input, select, textarea, .btn, .logo, .brand,
.hero-h, .earn-h, .serif, .mono-display { font-family:'Switzer', system-ui, -apple-system, sans-serif !important; }
h1, h2, h3, h4 { letter-spacing:-.03em; }
code, pre, kbd, samp, .mono, [class*="mono"], [class*="tabular"] { font-family:'JetBrains Mono', ui-monospace, Menlo, monospace !important; }

::selection { background:rgba(232,198,107,.28); color:#fff; }

/* ── reusable, opt-in components (use on redesigned pages) ── */
.bx-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:15px;
  padding:14px 26px; border-radius:999px; cursor:pointer; border:1px solid transparent; transition:transform .18s var(--ease),box-shadow .25s var(--ease); }
.bx-btn-gold { background:linear-gradient(180deg,var(--gold-l),var(--gold)); color:#14140a; box-shadow:0 10px 30px -12px rgba(232,198,107,.55); }
.bx-btn-gold:hover { transform:translateY(-2px); }
.bx-btn-ghost { background:rgba(255,255,255,.04); color:var(--text); border-color:var(--line-2); }
.bx-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:clamp(18px,2.4vw,26px); }
.bx-container { max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.bx-eyebrow { font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.bx-grad { background:linear-gradient(110deg,var(--gold-l),var(--mint) 80%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ════ STANDARD PAGE SHELL — every redesigned page uses these ════ */
.bx-nav { position:sticky; top:0; z-index:100; background:rgba(7,8,11,.66); backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px); border-bottom:1px solid var(--line); }
.bx-nav-row { display:flex; align-items:center; justify-content:space-between; height:64px; }
.bx-logo { font-weight:700; font-size:22px; letter-spacing:-.04em; color:var(--text); display:inline-flex; align-items:baseline; }
.bx-logo span { color:var(--gold); }
.bx-logo small { font-weight:500; font-size:13px; color:var(--text-3); margin-left:6px; letter-spacing:0; }
.bx-nav-links { display:flex; gap:26px; }
.bx-nav-links a { font-size:15px; color:var(--text-2); font-weight:500; }
.bx-nav-links a:hover { color:var(--text); }
.bx-nav-cta { display:flex; align-items:center; gap:10px; }
@media (max-width:820px){ .bx-nav-links{ display:none; } }

.bx-section { padding:var(--sp) 0; position:relative; }
.bx-center { text-align:center; max-width:740px; margin:0 auto; }
.bx-h1 { font-size:clamp(40px,7vw,68px); font-weight:700; letter-spacing:-.035em; line-height:1.03; }
.bx-h2 { font-size:clamp(28px,4.4vw,44px); font-weight:600; letter-spacing:-.03em; line-height:1.05; }
.bx-lede { font-size:clamp(17px,2vw,21px); color:var(--text-2); font-weight:400; line-height:1.5; }
.bx-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--vgap); }
.bx-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.bx-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:820px){ .bx-grid-3,.bx-grid-4{ grid-template-columns:repeat(2,1fr); } .bx-grid-2{ grid-template-columns:1fr; } }
@media (max-width:520px){ .bx-grid-3,.bx-grid-4{ grid-template-columns:1fr; } }

.bx-input { width:100%; background:rgba(0,0,0,.3); border:1px solid var(--line-2); border-radius:12px; padding:13px 15px; color:var(--text); font-size:15px; }
.bx-input:focus { outline:none; border-color:var(--mint); }
.bx-faq summary { font-size:17px; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; padding:20px 4px; border-bottom:1px solid var(--line); }
.bx-faq summary::-webkit-details-marker { display:none; }
.bx-faq details[open] summary { border-bottom:none; }
.bx-faq p { color:var(--text-2); font-size:15px; padding:0 4px 20px; border-bottom:1px solid var(--line); }

.bx-foot { border-top:1px solid var(--line); padding:56px 0 40px; margin-top:var(--sp); }
.bx-foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
@media (max-width:800px){ .bx-foot-grid{ grid-template-columns:1fr 1fr; gap:28px; } }
.bx-foot h4 { font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-bottom:14px; }
.bx-foot a { display:block; color:var(--text-2); font-size:15px; padding:5px 0; }
.bx-foot a:hover { color:var(--gold); }
.bx-foot-brand p { color:var(--text-3); font-size:15px; margin-top:12px; max-width:320px; }
.bx-foot-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:40px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; color:var(--text-3); }

.bx-reveal { opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease),transform .8s var(--ease); }
.bx-reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .bx-reveal{ opacity:1; transform:none; } }