/* 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;
}

@media (max-width: 720px) {
  .display-hero { font-size: 56px; }
  .display { font-size: 40px; }
  .card { padding: 32px; }
}