.product-intro {
  display: grid;
  gap: var(--space-5);
  align-items: start;
  margin-block-end: var(--space-5);
}
.product-intro-text { min-width: 0; max-width: var(--measure); }
.product-intro-text .lead { margin-block-end: var(--space-3); }
.product-intro-figure { margin: 0; min-width: 0; }
.product-intro-figure .illustration { width: 100%; max-width: 480px; height: auto; display: block; margin-inline: auto; }
.product-status { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-4); }
.product-ranges-title { font-size: var(--text-lg); margin-block: var(--space-4) var(--space-2); }
@media (min-width: 900px) {
  .product-intro { grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: var(--space-7); }
  .product-intro-compact { grid-template-columns: 1fr; }
}

.product-ranges {
  margin: 0;
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--text-legal);
}
.product-ranges-row {
  display: grid;
  grid-template-columns: minmax(7em, 1fr) minmax(0, 3fr);
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
}
.product-ranges-row + .product-ranges-row { border-block-start: var(--border-width) solid var(--line); }
.product-ranges dt { color: var(--muted); font-weight: var(--weight-bold); }
.product-ranges dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 479px) {
  .product-ranges-row { grid-template-columns: 1fr; gap: 2px; }
}

.data-table { min-width: 480px; }
.data-table th, .data-table td { text-align: start; white-space: normal; }
.data-table th.num, .data-table td.num { text-align: end; white-space: nowrap; }
.data-table--text th, .data-table--text td:not(.num) { min-width: 10em; overflow-wrap: normal; } 

.checklist { list-style: none; margin: 0; padding: 0; max-width: var(--measure); display: grid; gap: var(--space-3); }
.checklist li { position: relative; padding-inline-start: calc(var(--space-5) + 4px); }
.checklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.45em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
}

.link-cards { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.link-card {
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-md);
  min-width: 0;
}
.link-card a { display: inline-flex; align-items: center; min-height: var(--tap-target); font-weight: var(--weight-bold); font-size: var(--text-lg); }
.link-card p { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-legal); }

.calc-switch { margin-block: var(--space-4) var(--space-5); }

.calc-block { padding-block-start: var(--space-5); scroll-margin-top: var(--space-4); }
.calc-block + .calc-block { border-block-start: var(--border-width) solid var(--line); }
.calc-block-head { max-width: var(--measure); }
.calc-block-summary { font-size: var(--text-lg); }
.calc-block-ranges { margin-block: var(--space-3); }
.calc-block-ranges summary { cursor: pointer; min-height: var(--tap-target); display: flex; align-items: center; font-weight: var(--weight-bold); color: var(--primary); }
.calc-block-ranges[open] summary { margin-block-end: var(--space-2); }
.calc-block .calc { margin-block-start: var(--space-4); }

.cost-formulas { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-4); }
.cost-formula {
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-lg);
  min-width: 0;
}
.cost-formula-title { margin-block-end: var(--space-3); font-weight: var(--weight-bold); }
.cost-formula-period { font-weight: var(--weight-regular); color: var(--muted); }
.cost-formula-line { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-2) var(--space-3); margin-block-end: var(--space-2); font-variant-numeric: tabular-nums; }
.cost-formula-part { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--paper); }
.cost-formula-part strong { font-size: var(--text-lg); white-space: nowrap; }
.cost-formula-label { font-size: var(--text-sm); color: var(--muted); font-weight: var(--weight-bold); }
.cost-formula-op { align-self: center; font-family: var(--font-display); font-size: var(--text-2xl); color: var(--muted); }
.cost-formula-total { background: var(--primary-tint); }
.cost-formula-total strong { font-family: var(--font-display); font-size: var(--text-xl); color: var(--accent); }
.cost-formula-detail { margin: 0; font-size: var(--text-legal); color: var(--muted); }
@media (max-width: 479px) {
  .cost-formula-line { flex-direction: column; align-items: stretch; }
  .cost-formula-op { align-self: flex-start; padding-inline-start: var(--space-3); }
}