/* Cost calculator page. Tokens only, no hard-coded colours, matches design-system.css. */

.calc-main { padding: 120px 0 80px; }

.calc-intro { text-align: center; max-width: 720px; }
.calc-eyebrow {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); margin: 0 0 12px;
}
.calc-intro h1 {
  font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.03em; margin: 0 0 16px; color: var(--text);
}
.calc-lead { font-size: var(--fs-xl); line-height: 1.6; color: var(--muted); margin: 0 auto; }

.calc-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 28px; align-items: start; margin-top: 48px;
}

.calc-inputs, .calc-output {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm);
}

.calc-field { margin-bottom: 22px; }
.calc-field:last-child { margin-bottom: 0; }
.calc-field > label {
  display: block; font-size: var(--fs-md); font-weight: 600;
  color: var(--text); margin-bottom: 8px;
}
.calc-field input[type="number"] {
  width: 100%; font-family: var(--font-sans); font-size: var(--fs-xl);
  font-weight: 600; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--hairline-2); border-radius: var(--radius-sm);
  padding: 13px 16px; box-sizing: border-box;
}
.calc-field input[type="number"]:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}
.calc-hint { font-size: var(--fs-sm); color: var(--muted); margin: 8px 0 0; }

.calc-check { display: flex; align-items: flex-start; gap: 12px; }
.calc-check input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--brand); }
.calc-check label { font-size: var(--fs-md); color: var(--text); font-weight: 500; line-height: 1.5; }

.calc-headline { text-align: center; padding-bottom: 20px; border-bottom: 1px solid var(--hairline); margin-bottom: 20px; }
.calc-headline-label { font-size: var(--fs-lg); color: var(--muted); margin: 0 0 6px; }
.calc-saving {
  font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 600; letter-spacing: -0.03em; color: var(--brand); margin: 0;
}
.calc-saving.is-loss { color: var(--red-600); }
.calc-breakeven { font-size: var(--fs-md); color: var(--muted); margin: 8px 0 0; }

.calc-bars { display: grid; gap: 18px; margin-bottom: 24px; }
.calc-bar-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: var(--fs-md); color: var(--muted); }
.calc-bar-head strong { font-size: var(--fs-lg); color: var(--text); font-variant-numeric: tabular-nums; }
.calc-bar-track { height: 14px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.calc-bar-fill { height: 100%; border-radius: 999px; width: 0; transition: width 0.3s ease; }
.calc-bar-own { background: var(--brand); }
.calc-bar-saas { background: var(--accent); }

.calc-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; font-size: var(--fs-md); }
.calc-table th, .calc-table td { text-align: right; padding: 11px 8px; border-bottom: 1px solid var(--hairline); font-variant-numeric: tabular-nums; }
.calc-table th:first-child, .calc-table td:first-child { text-align: left; color: var(--muted); font-weight: 500; }
.calc-table thead th { color: var(--text); font-weight: 600; }
.calc-table tbody tr:last-child td { border-bottom: none; font-weight: 700; color: var(--text); }

.calc-cta { width: 100%; justify-content: center; text-align: center; }
.calc-enterprise { font-size: var(--fs-sm); color: var(--muted); text-align: center; margin: 16px 0 0; }

.calc-notes { margin-top: 56px; max-width: 760px; }
.calc-notes h2 { font-family: var(--font-display); font-size: var(--fs-3xl); letter-spacing: -0.02em; margin: 0 0 16px; color: var(--text); }
.calc-notes ul { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.calc-notes li { font-size: var(--fs-base); line-height: 1.65; color: var(--muted); }

@media (max-width: 860px) {
  .calc-main { padding: 96px 0 64px; }
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
}