@import url("https://ui.thebmtblueprint.com/v1/tokens.css");
/* ==========================================================================
   BMT Start Here. Shared stylesheet for the gate and the guide.

   Palette is the locked BMT set. Do not drift it. Any new colour here has to
   come from the token block, not from picking something that looks close.
   ========================================================================== */

:root{
  --bg:#0C0B09; --bg2:#131210; --bg3:#1A1814;
  --navy:#0A1628;
  --gold:#C9A84C; --gold-light:#E8C96A; --gold-dark:#7A6228;
  --cream:#F5F0E4;
  --text1:#F0EDE6; --text2:#EAE6DE; --text3:#D4CFC6; --text4:#5A5648;
  --border:#2A2620; --border-light:#333028;
  --green:#4FB286; --green-deep:#2E6B52;
  --loss:#D66060;
  --radius:12px; --radius-sm:9px; --radius-xs:6px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --display:'Bebas Neue',Impact,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --quote:'Libre Baskerville',Georgia,serif;
  --mono:'Roboto Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{
  color-scheme:dark;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background-color:var(--bg);
  /* Guide is for prospects: shared black gradient (Dev 2026-10-17; members get blue). */
  background-image:var(--bmt-bg-prospect,radial-gradient(ellipse 60% 45% at 50% -8%,rgba(201,168,76,.07),transparent 70%),radial-gradient(ellipse 70% 60% at 100% 100%,rgba(42,38,32,.55),transparent 60%),linear-gradient(160deg,#1A1814 0%,#0C0B09 45%,#060505 100%));
  background-attachment:fixed;
  color:var(--text2);
  font-family:var(--body);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.015em;color:var(--text1);line-height:1.04;margin:0}

a{color:var(--gold)}

.wrap{max-width:720px;margin:0 auto;padding:0 22px}

/* ---------- eyebrow ---------- */
.eyebrow{
  font-family:var(--mono);
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--gold);
  margin:0 0 18px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--display);
  font-size:23px;
  letter-spacing:.035em;
  padding:15px 38px 12px;
  border-radius:var(--radius-sm);
  border:0;
  cursor:pointer;
  text-decoration:none;
  background:linear-gradient(180deg,var(--gold-light),var(--gold));
  color:#17130A;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease);
  box-shadow:0 5px 22px rgba(201,168,76,.17);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 9px 30px rgba(201,168,76,.28);filter:brightness(1.05)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:grayscale(.4)}
@media (prefers-reduced-motion:reduce){ .btn,.btn:hover{transform:none;transition:none} }

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* Reduced motion must still SHOW the content. Hiding it and skipping the
   animation leaves a blank page for anyone who asked for less movement. */
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} }

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;margin:26px 0;font-size:15.5px;display:block;overflow-x:auto;white-space:nowrap}
.tbl th,.tbl td{padding:12px 16px;border-bottom:1px solid var(--border);text-align:left}
.tbl th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:400}
.tbl td{color:var(--text3)}
.tbl tr:last-child td{border-bottom:0}
.tbl .tot td{color:var(--text1);font-weight:600;border-top:1px solid var(--gold-dark)}
.pos{color:var(--green)} .neg{color:var(--loss)}
@media(min-width:620px){ .tbl{display:table;white-space:normal} }

/* ---------- callouts ---------- */
.risk{
  border-left:2px solid var(--gold-dark);
  background:rgba(122,98,40,.07);
  border-radius:0 var(--radius-xs) var(--radius-xs) 0;
  padding:15px 20px;
  margin:26px 0;
  font-size:15px;
  line-height:1.7;
  color:var(--text3);
}
.src{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--text4);margin:16px 0 0}
.src a{color:var(--gold-dark);text-decoration:none;border-bottom:1px solid rgba(122,98,40,.4)}
.src a:hover{color:var(--gold)}

.pull{
  font-family:var(--quote);
  font-style:italic;
  font-size:19px;
  line-height:1.6;
  color:var(--cream);
  border-left:2px solid var(--gold);
  padding-left:22px;
  margin:30px 0;
}

/* Defined term. */
.term{color:var(--gold-light);font-weight:600}