/* Self-hosted Inter, same file the SPA preloads (see index.html). Declared
   here too because the backend-rendered plan and TDU pages are separate
   documents that never load the SPA's CSS bundle - before this they declared
   Inter and silently fell back, so the two halves of the site did not match. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-v1.woff2') format('woff2');
}
/* Plan pages. Tokens mirror src/frontend/index.css — if that palette changes,
   update these to match. Green is earned: only savings are green. Amber only
   marks real catches. */
:root {
  --bg-color: oklch(98% 0.004 260);
  --surface: oklch(99.4% 0.002 260);
  --surface-2: oklch(96.5% 0.005 260);
  --text-main: oklch(22% 0.012 265);
  --text-secondary: oklch(45% 0.01 265);
  --text-tertiary: oklch(51% 0.009 265);
  --border-color: oklch(90% 0.006 260);
  --primary-color: oklch(25% 0.015 265);
  --success-strong: oklch(47% 0.11 158);
  --warning-color: oklch(56% 0.13 60);
  --warning-soft: oklch(95% 0.045 80);
  --warning-border: oklch(82% 0.11 80);
  --badge-tou: oklch(48% 0.2 295);
  --badge-tou-border: oklch(86% 0.07 300);
  --radius-md: 8px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg-color); color: var(--text-main);
  font-size: 0.875rem; line-height: 1.55;
}
.page { max-width: 44rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.crumbs a { color: var(--text-secondary); text-decoration: none; font-size: 0.8125rem; }
h1 { font-size: 1.75rem; margin: 0.75rem 0 0.25rem; }
h2 { font-size: 1.125rem; margin: 2rem 0 0.5rem; }
h3 { font-size: 0.875rem; color: var(--text-secondary); margin: 1rem 0 0.25rem; }
.provider { color: var(--text-secondary); margin: 0 0 0.5rem; }
.rating { color: var(--text-tertiary); margin-left: 0.4rem; }
.badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.badge {
  font-size: 0.6875rem; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border-color); color: var(--text-secondary);
  background: var(--surface);
}
.badge-tou { color: var(--badge-tou); border-color: var(--badge-tou-border); }
.retired {
  background: var(--warning-soft); border: 1px solid var(--warning-border);
  border-radius: var(--radius-md); padding: 0.75rem; margin: 1rem 0;
}
.costs { border-collapse: collapse; width: 100%; }
.costs th, .costs td { border-bottom: 1px solid var(--border-color); padding: 6px 8px; text-align: left; }
.costs tr.you td { background: var(--surface-2); font-weight: 600; }
.you-badge {
  font-size: 0.6875rem; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  background: var(--primary-color); color: white; white-space: nowrap;
}
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.catch {
  background: var(--warning-soft); border: 1px solid var(--warning-border);
  border-radius: var(--radius-md); padding: 0.6rem 0.75rem; margin: 0.5rem 0;
}
.note { color: var(--text-tertiary); font-size: 0.8125rem; }
.docs { padding-left: 1.1rem; }
.beats { list-style: none; padding: 0; margin: 0; }
.beats li {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: var(--surface); padding: 0.6rem 0.75rem; margin: 0.4rem 0;
}
.beats .by { color: var(--text-secondary); font-size: 0.8125rem; }
.beats .areas { color: var(--text-tertiary); font-size: 0.75rem; }
.beats .num { margin-left: auto; }
.save { color: var(--success-strong); font-weight: 600; }
.cta { margin-top: 1rem; }
.button {
  display: inline-block; background: var(--primary-color); color: white;
  padding: 0.6rem 1rem; border-radius: var(--radius-md); text-decoration: none;
}
footer { margin-top: 3rem; color: var(--text-tertiary); font-size: 0.8125rem; }
@media (max-width: 480px) {
  .costs { display: block; overflow-x: auto; }
  h1 { font-size: 1.375rem; }
}