:root {
  --paper: #FBFAF6;
  --card: #FFFFFF;
  --sunken: #F3F1E9;
  --ink: #1F1E1B;
  --ink2: #56534C;
  --muted: #928E84;
  --line: #E7E3D7;
  --line-soft: #F0EDE3;
  --accent: #1F6F5E;
  --accent-soft: #E6F0EB;
  --period: #6495ED;
  --no: #B24A33;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

body {
  display: grid;
  place-items: start center;
  padding: 5rem 1.5rem 3rem;
}

main {
  width: 100%;
  max-width: 860px;
  text-align: left;
}

/* ---------- Sticky brand header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-header h1 {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1;
}
.site-header-cta { white-space: nowrap; }

h1 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h1 .period { color: var(--period); }

p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--ink2);
  margin: 0 0 1rem 0;
}

p strong {
  color: var(--ink);
  font-weight: 600;
}

p.feature {
  margin-bottom: 1.5rem;
}

p.feature strong {
  letter-spacing: -0.005em;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

a:hover { border-bottom-color: var(--accent); }

.tagline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.85rem;
  color: var(--ink);
  margin: 0 0 1.75rem 0;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.contact {
  margin-top: 3.5rem;
  padding: 2rem 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  text-align: center;
}
.contact a { font-weight: 600; }

.footer-links {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 1rem;
  color: var(--muted);
}
.footer-links a { margin: 0 0.4rem; }

/* ---------- Boxed sections ---------- */

.card-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.75rem 1.85rem 1.5rem;
}

.section {
  margin-top: 2.5rem;
}

.section.card-box {
  margin-top: 1.5rem;
}

.section.building {
  margin-top: 2.75rem;
}

.brand-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.15em;
  color: var(--accent);
  letter-spacing: -0.01em;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.feature-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.feature-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 0.3rem;
}
.feature-icon svg { width: 20px; height: 20px; }
.feature-card h3 {
  font: 600 1.2rem var(--serif);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
.feature-card p {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink2);
  margin: 0;
}
@media (max-width: 720px) {
  .feature-cards { grid-template-columns: 1fr; }
}

.section-header h2 {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

.section-sub {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 1.25rem 0;
}

/* ---------- Performance: chart + Brier table ---------- */

.perf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}
/* One-panel A/B variants (B = live only, C = Brier only): center it. */
.perf-grid.perf-grid--single {
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
}
/* Variant A (both panels): widen the whole card so the white box contains the
   roomier side-by-side, breaking out past the 860px text column. Centered on
   the viewport via margin-left:50% + translateX(-50%). */
@media (min-width: 900px) {
  .performance:has(.perf-grid:not(.perf-grid--single)) {
    width: min(1080px, 92vw);
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

.perf-panel {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 1rem 1.1rem 0.85rem;
  display: flex;
  flex-direction: column;
}

.chart-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
}

.chart-stat { display: flex; flex-direction: column; gap: 0.2rem; }

.chart-stat-k {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.chart-stat-v {
  font-family: var(--mono);
  font-size: 1.45rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.chart-stat-v.pos { color: var(--accent); }
.chart-stat-v.neg { color: var(--no); }

.panel-title {
  font: 600 1.2rem var(--serif);
  color: var(--ink);
  margin: 0 0 0.6rem 0;
  letter-spacing: -0.01em;
}

/* Keep the chart in a calm, wide box (~2.75:1) and center it vertically in
   the panel, which stretches to the taller Brier table in variant A. We
   center the box rather than stretch the chart, so it never looks squashed.
   preserveAspectRatio="none" + the JS overlays both map against the rendered
   box, so any box size stays aligned. */
.chart-svg-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 232;
  max-height: 300px;
  margin: auto 0;
}

.chart {
  width: 100%;
  height: 100%;
  display: block;
}

/* 100%-of-bankroll (break-even) reference line + its label */
.chart-baseline {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0.65;
}
.chart-baseline-label {
  position: absolute;
  right: 4px;
  transform: translateY(-50%);
  font: 500 10px var(--mono);
  color: var(--muted);
  background: var(--card);
  padding: 0 4px;
  pointer-events: none;
  white-space: nowrap;
}

/* Hover marker + tooltip (visibility toggled by JS) */
.chart-hover-line {
  stroke: var(--ink2);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  visibility: hidden;
}
.chart-hover-dot {
  fill: var(--accent);
  stroke: var(--card);
  stroke-width: 2;
  visibility: hidden;
}
.chart-tip {
  position: absolute;
  transform: translate(-50%, -135%);
  background: var(--ink);
  color: var(--paper);
  font: 600 11px var(--mono);
  white-space: nowrap;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(31, 30, 27, 0.18);
  z-index: 2;
}

.chart-grid line {
  stroke: var(--line-soft);
  stroke-width: 1;
}

.chart-line {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Animated reveal: dash-offset is set inline by JS to the path length;
   .animate triggers it. */
.chart-line.animate {
  transition: stroke-dashoffset 2.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  stroke-dashoffset: 0 !important;
}

.chart-area {
  opacity: 0;
  transition: opacity 0.8s ease 1.6s;
}
.chart-area.animate { opacity: 1; }

.chart-dot {
  fill: var(--accent);
  stroke: var(--card);
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.4s ease 2.2s;
}
.chart-dot.animate { opacity: 1; }

.chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  margin-top: 0.5rem;
}

/* Brier panel */
.brier-panel { padding-bottom: 1rem; }

.brier-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.85rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--line-soft);
}

.brier-k {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.brier-hint {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.brier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.05rem;
}

.brier-table thead { display: none; }

.brier-table th,
.brier-table td {
  padding: 0.55rem 0.1rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  font-weight: 400;
}

.brier-table tbody th {
  color: var(--ink);
  font-weight: 500;
}

.brier-table tbody td {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink2);
  width: 1%;
  white-space: nowrap;
}

.brier-table tbody tr:last-child th,
.brier-table tbody tr:last-child td { border-bottom: none; }

.brier-table tr.highlight th,
.brier-table tr.highlight td {
  color: var(--accent);
  font-weight: 600;
}

/* The Kalshi market price is the crowd baseline — call it out in red. */
.brier-table tr.market th,
.brier-table tr.market td {
  color: var(--no);
}

.fb-note {
  margin: 0.85rem 0 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink2);
}

.fb-tag {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink2);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  vertical-align: middle;
}

.brier-explain {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink2);
  margin: 0 0 0.85rem 0;
}

@media (max-width: 720px) {
  .perf-grid { grid-template-columns: 1fr; }
}

/* ---------- Buttons / waitlist ---------- */

.primary-btn {
  appearance: none;
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 0.7rem 1.25rem;
  font: 600 0.95rem var(--sans);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
a.primary-btn:hover { color: #fff; border-bottom-color: var(--accent); }
@media (hover: hover) {
  .primary-btn:hover { background: #185A4C; }
}
.primary-btn:active { transform: translateY(1px); }

.ghost-btn {
  appearance: none;
  background: transparent;
  color: var(--ink2);
  border: 1px solid var(--line);
  padding: 0.7rem 1.1rem;
  font: 500 0.95rem var(--sans);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
@media (hover: hover) {
  .ghost-btn:hover { border-color: var(--muted); color: var(--ink); }
}

.waitlist-cta {
  display: flex;
  justify-content: center;
  padding: 0.25rem 0 0.5rem;
}

/* ---------- Dialog ---------- */

.wl-dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 420px;
  width: calc(100% - 2rem);
}
.wl-dialog::backdrop {
  background: rgba(31, 30, 27, 0.42);
  backdrop-filter: blur(2px);
}

.wl-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.5rem 1.25rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-family: var(--sans);
  animation: wl-pop 0.18s ease-out;
}

@keyframes wl-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.wl-form h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.wl-lead {
  font-size: 0.95rem;
  color: var(--ink2);
  margin: 0 0 0.25rem 0;
}

.wl-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.25rem;
}

.wl-input {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  font: 400 1rem var(--sans);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.wl-input:focus {
  border-color: var(--accent);
  background: var(--card);
}

/* Honeypot — hidden from real users, visible to most naive bots. */
.wl-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}

.wl-error {
  margin: 0;
  font-size: 0.85rem;
  color: var(--no);
}

.wl-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.wl-actions-single { justify-content: center; }

.wl-close {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}
@media (hover: hover) {
  .wl-close:hover { color: var(--ink); background: var(--sunken); }
}

.wl-success { text-align: center; align-items: center; padding-top: 2rem; }
.wl-success .wl-lead { margin-bottom: 0.75rem; }

.wl-check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin: 0 auto 0.5rem;
}
.wl-check svg { width: 28px; height: 28px; }

/* Empty/loading state for the dynamic Brier table */
.brier-empty {
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 0.8rem 0;
}

/* ── Optional post-signup survey (inside the success dialog) ── */
.wl-survey {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  text-align: left;
  width: 100%;
}
.wl-survey-intro {
  font-size: 0.95rem;
  color: var(--ink2);
  margin: 0 0 0.9rem 0;
}
.wl-q { margin-bottom: 1rem; }
.wl-q-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.5rem 0;
}
.wl-q-opts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wl-q-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--ink2);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
}
.wl-q-opt:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}
.wl-q-opt input { accent-color: var(--accent); margin: 0; }
.wl-q-text {
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  resize: vertical;
}
.wl-q-text:focus { outline: none; border-color: var(--accent); }
.wl-q-other {
  margin-top: 0.5rem;
  width: 100%;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
}
.wl-q-other:focus { outline: none; border-color: var(--accent); }
.wl-survey-done { text-align: center; margin-top: 1rem; }

@media (max-width: 720px) {
  /* Typography: dial the wall-of-text intros down so they breathe on phones. */
  p { font-size: 1.05rem; }
  p.feature { margin-bottom: 1.25rem; }
  .section-sub { font-size: 1rem; }
  .brier-explain { font-size: 0.95rem; }

  /* Tap targets: 44px minimum, more thumb-friendly padding. */
  .primary-btn,
  .ghost-btn {
    min-height: 44px;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
  }

  /* Sticky header: tighten for the smaller viewport. */
  .site-header-inner { padding: 0.55rem 1rem; gap: 0.6rem; }
  .site-header h1 { font-size: 1.35rem; }
  .site-header-cta { padding: 0.5rem 0.85rem; font-size: 0.9rem; min-height: 38px; }

  /* Dialog actions: stack so primary lands under the thumb, full-width. */
  .wl-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.5rem;
  }
  .wl-actions .primary-btn,
  .wl-actions .ghost-btn { width: 100%; }
  .wl-actions-single { align-items: center; }
  .wl-actions-single .primary-btn { width: 100%; max-width: 240px; }

  /* Dialog close button: 44px tap area. */
  .wl-close {
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    top: 0.35rem;
    right: 0.35rem;
  }
}

@media (max-width: 480px) {
  body { padding: 4rem 1rem 2rem; }
  .card-box { padding: 1.4rem 1.25rem 1.15rem; }
  .chart-meta { gap: 0.5rem; }
  .chart-stat-v { font-size: 1.15rem; }
  .brier-table { font-size: 0.95rem; }
  .section-header h2 { font-size: 1.5rem; }
  .tagline { font-size: 1.5rem; }
  .wl-dialog { width: calc(100% - 1.5rem); }
  .wl-form { padding: 1.25rem 1.25rem 1.1rem; }
  .wl-form h3 { font-size: 1.35rem; }
}