* { box-sizing: border-box; }
body { margin: 0; background: #f2f6fc; color: #152841; font: 16px/1.55 system-ui, sans-serif; }
main { max-width: 960px; margin: auto; padding: 22px 18px 40px; }
a { color: #174e96; }
header, section { border-radius: 14px; padding: 16px clamp(14px, 3vw, 22px); margin-top: 12px; }
header { background: #15365d; color: white; }
section { background: white; }
h1, h2 { line-height: 1.2; }
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 0; list-style-position: inside; }
.flow li, #summary { background: #e8f1fc; padding: 12px; border-radius: 8px; }
.scroll { overflow: auto; }
select { font: inherit; max-width: 100%; }
table { width: 100%; border-collapse: collapse; text-align: left; }
caption { text-align: left; padding: 8px 0; }
th, td { padding: 8px; border-bottom: 1px solid #d8e4f1; vertical-align: top; }

  header > :first-child, section > :first-child { margin-top: 0; }
  header > :last-child, section > :last-child { margin-bottom: 0; }
  section h2 { margin-bottom: 10px; }
  section h2 + p { margin-top: 0; }
  figure { margin: 12px 0; }
.comparison-chart { margin: 16px 0; }
.chart-rows { list-style: none; padding: 0; margin: 6px 0; }
.chart-rows li { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(36px, 2fr) minmax(48px, auto); gap: 8px; align-items: center; padding: 6px; border-radius: 4px; font-size: .875rem; }
.chart-selected { background: #edf4ff; box-shadow: inset 3px 0 #2569bb; }
.chart-track { display: block; height: 12px; background: #dce7f5; border-radius: 3px; }
.chart-track span { display: block; height: 100%; background: #2569bb; border-radius: inherit; }
.chart-rows strong { text-align: right; font-variant-numeric: tabular-nums; }