/* Five Tool File tokens. Source of truth: design-system.md. Builders add piece CSS in their own file, not here. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap');

:root {
  --canvas: #ffffff;
  --paper: #f8f5ed;
  --panel: #ffffff;
  --ink: #0b0b0b;
  --graphite: #707070;
  --hairline: #e6e1d6;
  --hairline-on-white: #ececec;
  --signal: #6ece9d;
  --highlight: #ffda6e;
  --down: #e5484d;
  --numeral-circle: #e9e5da;

  --font: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --container: 1200px;
  --gutter: 120px;
  --section-gap: 128px;
  --card-pad: 48px;
  --radius-card: 24px;
  --radius-panel: 12px;
  --radius-pill: 9999px;
  --radius-input: 6px;
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body {
  margin: 0;
  font-family: var(--font);
  font-feature-settings: "ss03", "ss04";
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
.num, .stat-value, td.num { font-variant-numeric: tabular-nums; }

.display-hero { font-size: 96px; line-height: 1.1; letter-spacing: -0.02em; }
.display { font-size: 64px; line-height: 1.2; letter-spacing: -0.016em; }
.card-heading { font-size: 26px; line-height: 1.3; }
.stat-value { font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; }
.body { font-size: 18px; color: var(--graphite); }
.ui { font-size: 16px; line-height: 1.4; }
.caption { font-size: 14px; line-height: 1.4; color: var(--graphite); }
.step-label { font-size: 14px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; line-height: 1; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 28px; border-radius: var(--radius-pill);
  font-size: 16px; font-weight: 500; color: var(--ink); border: 0; cursor: pointer;
  font-family: inherit;
}
.btn-primary { background: var(--signal); }
.btn-secondary { background: var(--paper); }

.card { background: var(--paper); border-radius: var(--radius-card); padding: var(--card-pad); }
.panel { background: var(--panel); border-radius: var(--radius-panel); padding: 24px; }

.tbd {
  display: inline-block; font-size: 14px; color: var(--graphite);
  border: 1px dashed var(--hairline); border-radius: 4px; padding: 0 6px; line-height: 20px;
}

/* Mobile-only helpers. Hidden on desktop, shown under 720px. */
.chart-table { display: none; }
.tabs-wrap { display: contents; }

@media (max-width: 720px) {
  :root { --section-gap: 80px; --card-pad: 24px; }
  body { font-size: 16px; }
  .display-hero { font-size: 44px; line-height: 1.05; }
  .display { font-size: 36px; }
  .card-heading { font-size: 22px; }
  .stat-value { font-size: 28px; }
  .body { font-size: 16px; line-height: 1.4; }
  .caption { font-size: 13px; }
  .card { padding: var(--card-pad); }
  .panel { padding: 16px; }
  .btn { height: 48px; }

  /* Tab rows: one line, swipeable, with a right-edge fade */
  .tabs-wrap { display: block; position: relative; width: 100%; min-width: 0; }
  .tabs-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 32px;
    background: linear-gradient(to right, rgba(248, 245, 237, 0), var(--paper));
    pointer-events: none;
  }
  .tabs {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs > li, .tabs > .tab { flex: none; scroll-snap-align: start; }
  .tabs > li > a, .tabs > .tab { height: 44px; }
  .tabs > li:last-child, .tabs > .tab:last-child { margin-right: 32px; }

  /* Chart panels give way to a compact table */
  .chart-table { display: block; }
  .chart-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
  .chart-table th, .chart-table td {
    padding: 0 4px; text-align: right; font-weight: 400; vertical-align: middle;
    border-bottom: 1px solid var(--hairline-on-white);
  }
  .chart-table th { height: 36px; font-size: 13px; color: var(--graphite); vertical-align: bottom; padding-bottom: 6px; }
  .chart-table td { height: 36px; color: var(--ink); font-variant-numeric: tabular-nums; }
  .chart-table th:first-child, .chart-table td:first-child { text-align: left; padding-left: 0; }
  .chart-table th:last-child, .chart-table td:last-child { padding-right: 0; }
  .chart-table tr:last-child td { border-bottom: 0; }
  .chart-table td .tbd { border: 0; padding: 0; color: var(--graphite); }
  .chart-table .chart-table-note { margin-top: 12px; }
}