/* The "Graphite" style: neutral near black greys, Inter for everything,
   flat controls with a hairline border, sentence case labels and much
   less glow. Loaded after landing.css. */

:root {
  --bg:          #0F1012;
  --surface-1:   #16171A;
  --surface-2:   #1C1D21;
  --surface-3:   #25272C;
  --border:      #2B2D33;
  --border-soft: rgba(255, 255, 255, 0.06);

  --text:        #ECEDEF;
  --text-2:      #A3A6AD;
  --muted:       #6F737B;

  --accent:      #45B5AE;
  --accent-hi:   #6DCAC4;
  --accent-lo:   #2F8C86;
  --accent-ink:  #061F1D;
  --accent-soft: rgba(69, 181, 174, 0.10);
  --accent-glow: rgba(69, 181, 174, 0.18);

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --shadow-1: none;

  --font-display: "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Consolas, monospace;
}

body { font-feature-settings: "cv11", "ss01"; }
h1, h2, h3 { letter-spacing: -0.03em; }
.hero h1 { font-weight: 650; }

/* labels: sentence case, no tracking */
.eyebrow {
  color: var(--text-2);
  font: 500 14px/1 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}
.badge {
  padding: 4px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font: 500 13px/1.4 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}
.label, .mini-head, .eqtable th, .wa-dist th, .wa-stat small, .wa-tag {
  letter-spacing: 0;
  text-transform: none;
}
.label, .mini-head { font-size: 13px; }
.eqtable th { font-size: 12px; }

/* buttons: flat, hairline border */
.btn { height: 40px; padding: 0 18px; border-radius: var(--r-md); font-weight: 600; font-size: 14px; }
.btn:active { transform: none; }
.btn-ghost { background: var(--surface-1); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-2); border-color: #393C43; }
.btn-sm { height: 34px; font-size: 13px; }

.nav { background: rgba(15, 16, 18, 0.85); }
.logo { font: 600 17px/1 var(--font-body); }

/* the glows step back */
.hero-visual::before { opacity: 0.22; }
.cta::before { opacity: 0.25; }
.neon-card { opacity: 0.1; filter: none; stroke: var(--text-2); }
.neon-card.small { opacity: 0.08; }

.window { border-color: var(--border); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); }

/* segmented: a track with a raised thumb */
.seg { background: var(--surface-2); padding: 2px; gap: 2px; border-color: var(--border-soft); }
.seg button { border-radius: 6px; font-weight: 500; }
.seg .on, .seg .on:hover {
  background: var(--surface-3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.pc { border-radius: var(--r-sm); }
.p4 { background: #8B8F97; }

/* hand strength ramp: teal into neutral grey */
.g1, .legend .g1::before { background: #6DCAC4; }
.g2, .legend .g2::before { background: #3F938E; }
.g3, .legend .g3::before { background: #2D625F; }
.g4, .legend .g4::before { background: #3A3D44; }
.g5, .legend .g5::before { background: #2A2C31; }
.s-story .stack .g3 { box-shadow: none; }

.stats { background: transparent; }
.stats strong { font-weight: 600; letter-spacing: -0.03em; }

.bento .card:hover { transform: none; border-color: var(--border); }
.card-icon { background: var(--surface-2); border: 1px solid var(--border-soft); }
.card-icon svg { stroke: var(--text-2); }
.bento .c-star { border-color: var(--border); background: var(--surface-1); }
.bento .c-star:hover { border-color: var(--accent-lo); }
.chips span { border-radius: var(--r-pill); }
.chips .more { border-radius: var(--r-pill); }

.step-n { border: 1px solid var(--border); background: var(--surface-1); color: var(--text-2); font: 600 15px/1 var(--font-body); }
.steps li.on .step-n { border-color: var(--accent); }

.plan-pro { border-color: var(--accent-lo); background: var(--surface-1); }
.faq details { border-radius: var(--r-lg); }

/* the walkthrough's small copy of the calculator, in the same style */
.wa-panel { border-color: var(--border-soft); }
.wa-player { background: var(--bg); }
.wa-n { border: 0; background: var(--surface-3); color: var(--text-2); font: 600 11px/1 var(--font-body); }
.wa-tag {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-size: 11px;
}
.wa-pill { border-radius: var(--r-pill); }
.wa-input { border-radius: var(--r-md); }
.wa-slot { border-radius: var(--r-md); }
.wa-runbar { background: var(--surface-1); border-color: var(--border); }
.wa-btn { border-radius: var(--r-md); background: var(--surface-2); }
.wa-run { background: var(--accent); }