/* SAM landing page. Static rework of the SAM design mockup: all styling lives
   here (no inline styles, no runtime), so the strict marinade-stats CSP
   (default-src 'none'; style-src 'self'; font-src 'self'; ...) is satisfied.
   Geist is self-hosted (variable weight); the mono eyebrows fall back to the
   system monospace stack (no Geist Mono shipped). */

:root {
  --accent: #2EC4A6;
  --bg: #0D1211;
  --ink: #E8EEEC;
  --muted: #B8C4C1;
  --dim: #9AA8A5;
  --panel: #141B1A;
  --line: #22302E;
  --skip: #3A4644;
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("geist-latin.woff2") format("woff2");
}

html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}
a { color: var(--accent); }
a:hover { color: #5FD9C0; }

.wrap { max-width: 1160px; margin: 0 auto; }
.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow.muted { color: var(--dim); }

.section-title {
  margin: 0;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}

/* Header */
.site-header {
  padding: 28px 32px;
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; align-items: center;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  font-weight: 600; font-size: 17px; letter-spacing: -0.01em;
}
.brand-logo { height: 26px; width: auto; display: block; }
.brand-sub { color: var(--dim); font-weight: 400; }

/* Lucide icons, matching the stats page: inline SVG, stroke = currentColor. */
.icon { display: inline-block; flex: none; }
.card-icon { width: 28px; height: 28px; color: var(--accent); }
.card-icon.warn { color: #E8A65A; }
.nav { display: flex; gap: 24px; font-size: 15px; flex-wrap: wrap; }
.nav-link { color: var(--dim); text-decoration: none; }

/* Hero */
.hero {
  padding: 56px 32px 88px;
  display: flex; flex-wrap: wrap; gap: 56px; align-items: center;
}
.hero-copy {
  flex: 1 1 440px; min-width: 0;
  display: flex; flex-direction: column; gap: 28px;
}
.hero-title {
  margin: 0; font-size: 60px; line-height: 1.02;
  letter-spacing: -0.035em; font-weight: 700;
}
.hero-lede {
  margin: 0; font-size: 20px; line-height: 1.5;
  color: var(--muted); max-width: 520px;
}
.bid-form { display: flex; flex-wrap: wrap; gap: 12px; max-width: 540px; }
.bid-input {
  flex: 1 1 280px; min-width: 0; height: 52px; box-sizing: border-box;
  padding: 0 16px; border-radius: 10px; border: 1px solid #2A3836;
  background: var(--panel); color: var(--ink);
  font-family: var(--mono); font-size: 14px;
}
.btn-primary {
  height: 52px; padding: 0 22px; border-radius: 10px; border: none;
  background: var(--accent); color: #06100E;
  font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.form-note { font-size: 14px; color: #8E9C99; }

/* Chart card */
.chart-card {
  flex: 1 1 460px; min-width: 0; margin: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 20px;
}
.chart-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
}
.chart-head-label { font-size: 15px; color: var(--dim); }
.chart-head-note { font-family: var(--mono); font-size: 13px; color: var(--dim); }
.chart-stat { display: flex; align-items: baseline; gap: 12px; }
.chart-stat-num {
  font-size: 56px; font-weight: 700; letter-spacing: -0.03em; color: var(--accent);
}
.chart-stat-cap { font-size: 17px; color: var(--muted); }

.chart {
  position: relative; height: 220px;
  display: flex; align-items: flex-end; gap: 4px;
  border-bottom: 1px solid #2A3836;
}
.bar { flex: 1 1 0; min-width: 0; border-radius: 3px 3px 0 0; }
.bar.is-won { background: var(--accent); }
.bar.is-skipped { background: var(--skip); }
/* Heights: price / 0.032 * 220px, rounded (see the source mockup's renderVals). */
.bar:nth-child(1)  { height: 129px; }
.bar:nth-child(2)  { height: 137px; }
.bar:nth-child(3)  { height: 142px; }
.bar:nth-child(4)  { height: 143px; }
.bar:nth-child(5)  { height: 109px; }
.bar:nth-child(6)  { height: 109px; }
.bar:nth-child(7)  { height: 109px; }
.bar:nth-child(8)  { height: 109px; }
.bar:nth-child(9)  { height: 37px; }
.bar:nth-child(10) { height: 41px; }
.bar:nth-child(11) { height: 135px; }
.bar:nth-child(12) { height: 135px; }
.bar:nth-child(13) { height: 76px; }
.bar:nth-child(14) { height: 58px; }
.bar:nth-child(15) { height: 62px; }
.bar:nth-child(16) { height: 109px; }
.bar:nth-child(17) { height: 109px; }
.bar:nth-child(18) { height: 109px; }
.bar:nth-child(19) { height: 55px; }
.bar:nth-child(20) { height: 118px; }
.bar:nth-child(21) { height: 172px; }
.bar:nth-child(22) { height: 177px; }
.bar:nth-child(23) { height: 182px; }
.bar:nth-child(24) { height: 177px; }
.bar:nth-child(25) { height: 165px; }
.bar:nth-child(26) { height: 175px; }
.bar:nth-child(27) { height: 171px; }
.bar:nth-child(28) { height: 199px; }
.bar:nth-child(29) { height: 183px; }
.bar:nth-child(30) { height: 175px; }
.bid-line {
  position: absolute; left: 0; right: 0; bottom: 135px;
  border-top: 2px dashed var(--ink);
}
.bid-label {
  position: absolute; right: 0; bottom: 141px;
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  background: var(--panel); padding: 2px 6px; border-radius: 4px;
}
.legend { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; color: var(--muted); }
.legend-item { display: flex; align-items: center; gap: 8px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; }
.swatch-won { background: var(--accent); }
.swatch-skip { background: var(--skip); }

/* Downside section */
.downside { border-top: 1px solid #1C2725; border-bottom: 1px solid #1C2725; background: #101716; }
.section-inner { padding: 88px 32px; display: flex; flex-direction: column; gap: 44px; }
.section-head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;
}
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 28px; display: flex; flex-direction: column; gap: 12px;
}
.card-title { margin: 0; font-size: 22px; font-weight: 600; }
.card-text { margin: 0; font-size: 17px; line-height: 1.55; color: var(--muted); }

/* Steps */
.steps { padding: 88px 32px; display: flex; flex-direction: column; gap: 40px; }
.steps-list {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px;
}
.step {
  display: flex; flex-direction: column; gap: 10px;
  border-top: 2px solid #2A3836; padding-top: 20px;
}
.step.is-active { border-top-color: var(--accent); }
.step-num { font-family: var(--mono); font-size: 14px; color: var(--dim); }
.step.is-active .step-num { color: var(--accent); }
.step-title { font-size: 21px; font-weight: 600; }
.step-text { font-size: 16px; line-height: 1.55; color: var(--muted); }

/* CTA */
.cta { padding: 0 32px 96px; }
.cta-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  padding: 56px 48px; display: flex; flex-wrap: wrap; gap: 28px;
  align-items: center; justify-content: space-between;
}
.cta-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cta-title { margin: 0; font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
.cta-text { margin: 0; font-size: 17px; color: var(--muted); }
.btn-cta {
  display: inline-flex; align-items: center; height: 56px; padding: 0 28px;
  border-radius: 12px; background: var(--accent); color: #06100E;
  font-size: 17px; font-weight: 600; text-decoration: none;
}
.btn-cta:hover { color: #06100E; }