/* ── TOKENS ──────────────────────────────────────────────────────────── */
:root {
  --bg:        #0E0D0B;
  --bg2:       #141310;
  --surf:      #1A1916;
  --surf2:     #201F1C;
  --surf3:     #272521;
  --border:    #2E2C28;
  --text:      #E8E4DC;
  --muted:     #8A8479;
  --faint:     #484540;
  --gold:      #C8A84B;
  --gold-h:    #DFC05A;
  --gold-dim:  #2E2510;
  --navy:      #1A2744;
  --navy-l:    #243660;
  --green:     #3A8A50;
  --red:       #8A3A3A;
  --yellow:    #8A7830;

  --font-head: 'Cabinet Grotesk', sans-serif;
  --font-body: 'Satoshi', sans-serif;
  --font-serif:'Playfair Display', serif;

  --sidebar-w: 240px;
  --r-sm: 0.375rem;
  --r-md: 0.5rem;
  --r-lg: 0.75rem;
  --r-xl: 1rem;
  --r-full: 9999px;
  --trans: 160ms cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); font-size: 1rem; color: var(--text); background: var(--bg); line-height: 1.65; }
img,svg { display:block; max-width:100%; }
ul { list-style: none; }
p,li { text-wrap: pretty; }
h1,h2,h3,h4 { font-family: var(--font-head); text-wrap: balance; line-height: 1.1; }
a,button,input { transition: color var(--trans), background var(--trans), border-color var(--trans); }
button { cursor: pointer; background: none; border: none; color: inherit; font-family: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--r-sm); }

/* ── LAYOUT ──────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--surf);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 50;
  overflow-y: auto;
  padding: 1.5rem 0;
}
.main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
}
.topbar { display: none; }

@media (max-width: 860px) {
  .sidebar { display: none; }
  .sidebar.open { display: flex; }
  .main { margin-left: 0; }
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 56px;
    background: var(--surf);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 60;
  }
  .topbar-logo { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; }
  .menu-btn { font-size: 1.25rem; color: var(--text); padding: 0.25rem 0.5rem; }
}

/* ── SIDEBAR ─────────────────────────────────────────────────────────── */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
}
.sidebar-nav { flex: 1; padding: 1rem 0; }
.sidebar-nav li { }
.slink {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.25rem;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  border-left: 3px solid transparent;
  transition: color var(--trans), border-color var(--trans), background var(--trans);
}
.slink:hover { color: var(--text); background: var(--surf2); }
.slink.active { color: var(--gold); border-left-color: var(--gold); background: color-mix(in oklab, var(--gold-dim) 80%, transparent); }
.snum { font-size: 0.7rem; color: var(--faint); font-weight: 700; letter-spacing: 0.05em; min-width: 20px; }
.slink.active .snum { color: var(--gold); opacity: 0.7; }
.sidebar-footer { padding: 1rem 1.25rem 0; font-size: 0.7rem; color: var(--faint); border-top: 1px solid var(--border); }

/* ── SECTIONS ────────────────────────────────────────────────────────── */
.section { padding: clamp(3rem,6vw,5rem) clamp(1.5rem,5vw,3.5rem); }
.section--alt { background: var(--bg2); }
.section-inner { max-width: 840px; }
.sec-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }
.sec-title { font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 900; letter-spacing: -0.035em; color: var(--text); margin-bottom: 1rem; }
.sec-body { font-size: 1.05rem; color: var(--muted); max-width: 58ch; margin-bottom: 2rem; line-height: 1.7; }
.subsec { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 2rem 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }

/* ── COVER ───────────────────────────────────────────────────────────── */
.cover {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(3rem,8vw,6rem) clamp(1.5rem,5vw,3.5rem);
}
.cover-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.35;
}
.cover-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 30% 50%, color-mix(in oklab,var(--gold) 8%, transparent), transparent 70%);
}
.cover-inner { position: relative; z-index: 1; max-width: 680px; }
.cover-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.25rem; }
.cover-title {
  font-size: clamp(3.5rem,7vw,6rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 1.25rem;
}
.cover-title em { font-style: italic; font-family: var(--font-serif); color: var(--gold); }
.cover-subtitle { font-size: 1.15rem; color: var(--muted); max-width: 50ch; line-height: 1.65; margin-bottom: 1.75rem; }
.cover-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.pill { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.8rem; border-radius: var(--r-full); background: var(--surf2); border: 1px solid var(--border); color: var(--muted); }
.cover-stats { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.cstat { display: flex; flex-direction: column; gap: 0.1rem; }
.cstat-n { font-family: var(--font-head); font-size: 1.75rem; font-weight: 900; color: var(--gold); letter-spacing: -0.03em; }
.cstat-l { font-size: 0.72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.cstat-div { width: 1px; height: 40px; background: var(--border); }
.cover-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--gold); color: #111; font-family: var(--font-head); font-weight: 800;
  font-size: 0.95rem; padding: 0.7rem 1.75rem; border-radius: var(--r-full);
  text-decoration: none;
}
.cover-cta:hover { background: var(--gold-h); transform: translateY(-1px); }

/* ── CALLOUT ─────────────────────────────────────────────────────────── */
.callout {
  display: flex; gap: 1rem; align-items: flex-start;
  background: color-mix(in oklab, var(--gold-dim) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
  border-left: 4px solid var(--gold);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.callout-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 0.1rem; }
.callout p { font-size: 0.95rem; color: var(--text); line-height: 1.65; }

/* ── CARDS ───────────────────────────────────────────────────────────── */
.card-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 2rem; }
@media (max-width: 700px) { .card-row { grid-template-columns: 1fr; } }
.card {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  position: relative;
  transition: border-color var(--trans), transform var(--trans);
}
.card:hover { border-color: var(--gold); transform: translateY(-3px); }
.card--featured { border-color: var(--gold); background: color-mix(in oklab, var(--surf) 70%, var(--gold-dim)); }
.card-badge { position:absolute; top:-11px; left:1.25rem; background:var(--gold); color:#111; font-size:0.65rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; padding:0.15rem 0.65rem; border-radius:var(--r-full); }
.card-icon { font-size: 2rem; }
.card h3 { font-size: 1rem; font-weight: 700; color: var(--text); }
.card p { font-size: 0.875rem; color: var(--muted); line-height: 1.6; }
.card-range { display:flex; justify-content:space-between; align-items:center; padding:0.6rem 0.75rem; background:var(--surf2); border-radius:var(--r-md); border:1px solid var(--border); margin-top:0.5rem; }
.card-range span { font-size: 0.7rem; color: var(--muted); }
.card-range strong { font-family: var(--font-head); font-weight: 800; font-size: 0.9rem; color: var(--gold); }

/* ── FLOW ────────────────────────────────────────────────────────────── */
.flow { display:flex; align-items:center; gap:0; flex-wrap:wrap; margin:1.5rem 0 2rem; }
.flow-step { background:var(--surf); border:1px solid var(--border); border-radius:var(--r-lg); padding:0.9rem 1.1rem; flex:1; min-width:120px; display:flex; flex-direction:column; gap:0.35rem; }
.flow-num { width:28px;height:28px;background:var(--gold);color:#111;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:900;font-size:0.8rem; flex-shrink:0;}
.flow-text { font-size:0.8rem; color:var(--muted); line-height:1.4; }
.flow-text strong { color: var(--text); display:block; margin-bottom:0.1rem; }
.flow-arrow { font-size:1.1rem; color:var(--gold); padding:0 0.4rem; flex-shrink:0; }
@media (max-width:700px) { .flow { flex-direction:column; align-items:stretch; } .flow-arrow { transform:rotate(90deg); align-self:center; } }

/* ── TABLES ──────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin: 0.75rem 0; border-radius: var(--r-lg); border: 1px solid var(--border); }
table { width:100%; border-collapse:collapse; }
thead tr { background: var(--navy); }
th { padding:0.7rem 1rem; text-align:left; font-family:var(--font-head); font-size:0.78rem; font-weight:700; color:#E8E4DC; white-space:nowrap; }
td { padding:0.65rem 1rem; font-size:0.875rem; color:var(--muted); border-top:1px solid var(--border); }
tbody tr:nth-child(even) { background:var(--surf); }
tbody tr:hover td { background: color-mix(in oklab, var(--surf2) 80%, transparent); color: var(--text); }
.total-row td { background: color-mix(in oklab, var(--gold-dim) 60%, transparent) !important; color: var(--text) !important; border-top: 2px solid var(--gold) !important; }
.table-note { font-size:0.78rem; color:var(--faint); margin-top:0.5rem; font-style:italic; }

/* ── TOOL GRID ───────────────────────────────────────────────────────── */
.tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.75rem; margin:1rem 0; }
@media (max-width:700px) { .tool-grid { grid-template-columns:1fr 1fr; } }
.tool-card { background:var(--surf); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.25rem; display:flex; flex-direction:column; gap:0.4rem; transition:border-color var(--trans); }
.tool-card:hover { border-color: var(--gold); }
.tool-card--free { opacity: 0.85; }
.tool-cost { font-family:var(--font-head); font-weight:900; font-size:1.3rem; color:var(--gold); letter-spacing:-0.02em; }
.tool-cost span { font-size:0.75rem; font-weight:500; color:var(--muted); }
.tool-cost.free { color: var(--green); }
.tool-name { font-weight:700; font-size:0.9rem; color:var(--text); }
.tool-desc { font-size:0.78rem; color:var(--muted); line-height:1.5; }
.total-callout { background: color-mix(in oklab, var(--gold-dim) 60%, transparent); border:1px solid color-mix(in oklab, var(--gold) 30%, transparent); border-radius:var(--r-lg); padding:0.85rem 1.25rem; font-size:0.9rem; color:var(--muted); margin-top:1rem; }
.total-callout strong { color: var(--gold); font-family: var(--font-head); font-size:1.1rem; }

/* ── AUTH ────────────────────────────────────────────────────────────── */
.auth-cards { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:1rem; margin:1.5rem 0; }
@media (max-width:700px) { .auth-cards { grid-template-columns:1fr; } }
.auth-card { background:var(--surf); border:1px solid var(--border); border-radius:var(--r-xl); padding:1.5rem; display:flex; flex-direction:column; gap:0.6rem; transition:border-color var(--trans); }
.auth-card:hover { border-color:var(--gold); }
.auth-card--primary { border-color: var(--gold); }
.auth-abbr { font-family:var(--font-head); font-weight:900; font-size:1.75rem; color:var(--gold); letter-spacing:0.05em; }
.auth-card h3 { font-size:0.95rem; font-weight:700; color:var(--text); }
.auth-card p { font-size:0.83rem; color:var(--muted); line-height:1.55; }
.auth-card ul { padding-left:1rem; list-style:disc; display:flex; flex-direction:column; gap:0.25rem; }
.auth-card li { font-size:0.78rem; color:var(--muted); }

/* ── ROSTER TABS ─────────────────────────────────────────────────────── */
.tier-tabs { display:flex; gap:0.5rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.tier-btn { background:var(--surf); border:1px solid var(--border); border-radius:var(--r-full); padding:0.5rem 1.1rem; font-family:var(--font-head); font-size:0.8rem; font-weight:700; color:var(--muted); display:flex; align-items:center; gap:0.5rem; transition:all var(--trans); }
.tier-btn:hover { border-color:var(--muted); color:var(--text); }
.tier-btn.active { background:var(--gold); border-color:var(--gold); color:#111; }
.tier-fee { font-size:0.68rem; opacity:0.75; }
.roster-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:0.75rem; }
.rcard { background:var(--surf); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.1rem 1.25rem; display:flex; flex-direction:column; gap:0.3rem; transition:border-color var(--trans), transform var(--trans); }
.rcard:hover { border-color:var(--gold); transform:translateY(-2px); }
.rcard-name { font-family:var(--font-head); font-weight:700; color:var(--text); font-size:0.95rem; }
.rcard-role { font-size:0.78rem; color:var(--gold); font-weight:600; }
.rcard-notes { font-size:0.75rem; color:var(--muted); margin-top:0.15rem; line-height:1.45; }
.rcard-tags { display:flex; gap:0.3rem; flex-wrap:wrap; margin-top:0.4rem; }
.rtag { font-size:0.6rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; padding:0.12rem 0.45rem; border-radius:var(--r-full); background:var(--surf2); border:1px solid var(--border); color:var(--muted); }
.rtag-funko { background:color-mix(in oklab, var(--gold-dim) 60%, transparent); border-color:color-mix(in oklab, var(--gold) 40%, transparent); color:var(--gold); }
.rtag-horror { background:color-mix(in oklab, #8A0000 15%, transparent); border-color:#5A2020; color:#CC6666; }
.rtag-voice { background:color-mix(in oklab, #006080 15%, transparent); border-color:#2A5060; color:#6AADBD; }
.rtag-star { background:color-mix(in oklab, var(--navy) 50%, transparent); border-color:var(--navy-l); color:#8AA4CC; }

/* ── OUTREACH ────────────────────────────────────────────────────────── */
.outreach-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0.75rem; margin-bottom:2rem; }
.outreach-card { background:var(--surf); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.25rem; display:flex; flex-direction:column; gap:0.5rem; transition:border-color var(--trans); }
.outreach-card:hover { border-color:var(--gold); }
.oc-num { width:32px;height:32px;background:var(--gold);color:#111;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:900;font-size:0.85rem; flex-shrink:0;}
.outreach-card h3 { font-size:0.9rem; font-weight:700; color:var(--text); }
.outreach-card p { font-size:0.8rem; color:var(--muted); line-height:1.55; }
.email-template { background:var(--surf); border:1px solid var(--border); border-left:4px solid var(--navy-l); border-radius:var(--r-lg); padding:1.5rem; font-size:0.85rem; line-height:1.7; margin-top:0.75rem; }
.email-subject { font-weight:700; color:var(--text); margin-bottom:0.75rem; font-family:var(--font-head); }
.email-body { color:var(--muted); white-space:pre-line; }

/* ── ROADMAP ─────────────────────────────────────────────────────────── */
.roadmap { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:0; align-items:start; margin-top:1.5rem; }
.roadmap-month { background:var(--surf); border:1px solid var(--border); border-radius:var(--r-xl); padding:1.5rem; }
.roadmap-connector { display:flex; align-items:center; justify-content:center; padding:0 0.5rem; padding-top:2.5rem; }
.rc-line { width:40px; height:2px; background: linear-gradient(90deg, var(--border), var(--gold), var(--border)); }
.rm-header { display:flex; flex-direction:column; gap:0.25rem; margin-bottom:1rem; padding-bottom:0.75rem; border-bottom:1px solid var(--border); }
.rm-num { font-family:var(--font-head); font-weight:900; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); }
.rm-theme { font-family:var(--font-head); font-weight:700; font-size:1.05rem; color:var(--text); }
.rm-list { display:flex; flex-direction:column; gap:0.5rem; padding-left:0; }
.rm-list li { font-size:0.8rem; color:var(--muted); padding-left:1.1rem; position:relative; line-height:1.5; }
.rm-list li::before { content:"→"; position:absolute; left:0; color:var(--gold); font-size:0.7rem; top:0.15rem; }
.rm-list em { color:var(--text); font-style:italic; }
.rm-list strong { color:var(--text); }
@media (max-width:800px) { .roadmap { grid-template-columns:1fr; } .roadmap-connector { display:none; } .roadmap-month { margin-bottom:1rem; } }

/* ── SCENARIOS ───────────────────────────────────────────────────────── */
.scenario-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.5rem 0; }
@media (max-width:600px) { .scenario-grid { grid-template-columns:1fr; } }
.scenario-card { background:var(--surf); border:1px solid var(--border); border-radius:var(--r-xl); padding:1.5rem; position:relative; display:flex; flex-direction:column; gap:1rem; transition:border-color var(--trans); }
.scenario-card:hover { border-color:var(--gold); }
.scenario-card--base { border-color:var(--gold); background: color-mix(in oklab, var(--surf) 80%, var(--gold-dim)); }
.scenario-badge { position:absolute;top:-11px;left:1.25rem;background:var(--gold);color:#111;font-size:0.62rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;padding:0.15rem 0.6rem;border-radius:var(--r-full); }
.scenario-label { font-family:var(--font-head); font-weight:700; font-size:0.8rem; color:var(--muted); letter-spacing:0.05em; text-transform:uppercase; }
.scenario-stats { display:flex; gap:0.75rem; flex-wrap:wrap; }
.ss { display:flex; flex-direction:column; gap:0.1rem; }
.ss span { font-family:var(--font-head); font-weight:900; font-size:1.2rem; color:var(--text); letter-spacing:-0.02em; }
.ss small { font-size:0.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; }
.scenario-net { display:flex; flex-direction:column; gap:0.15rem; padding-top:0.75rem; border-top:1px solid var(--border); }
.sn-label { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); }
.sn-val { font-family:var(--font-head); font-weight:900; font-size:1.5rem; color:var(--gold); letter-spacing:-0.03em; }

/* ── RISKS ───────────────────────────────────────────────────────────── */
.risk-list { display:flex; flex-direction:column; gap:0; margin-top:1.5rem; }
.risk-item { padding:1.25rem 0; border-bottom:1px solid var(--border); }
.risk-item:last-child { border-bottom:none; }
.risk-header { display:flex; align-items:center; gap:0.65rem; margin-bottom:0.6rem; flex-wrap:wrap; }
.risk-header strong { color:var(--text); font-size:0.95rem; font-family:var(--font-head); }
.risk-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.risk-dot--med { background:#B88030; }
.risk-dot--low { background:var(--green); }
.risk-level { font-size:0.65rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:0.1rem 0.5rem; border-radius:var(--r-full); margin-left:auto; background:#3A2800; color:#B88030; border:1px solid #5A3800; }
.risk-level.level-low { background:#0E2A1A; color:#5ABA7A; border-color:#1A4A2A; }
.risk-item > p { font-size:0.875rem; color:var(--muted); line-height:1.65; padding-left:1.35rem; }

/* ── FOOTER ──────────────────────────────────────────────────────────── */
.plan-footer { background:var(--surf); border-top:1px solid var(--border); padding:2rem clamp(1.5rem,5vw,3.5rem); }
.pf-inner { max-width:840px; }
.pf-logo { display:flex; align-items:center; gap:0.5rem; font-family:var(--font-head); font-weight:800; font-size:1rem; margin-bottom:0.5rem; }
.plan-footer p { font-size:0.85rem; color:var(--muted); margin-bottom:0.25rem; }
.pf-note { font-size:0.75rem; color:var(--faint); }

/* ── REVEAL ANIMATION ────────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.55s ease, transform 0.55s ease; }
.reveal.in { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; transition:none; } }