/* Pricing (design v9, the system of the Home and ModelDetail boards; FE9-2,
   FE9-SEL-C2): the page title and one line, one table for the live family
   with the units stated once, a calculator whose choices follow each
   model's capabilities and whose result is the page's 36px number, and the
   billing notes. Components marked "shared later" repeat on the model page
   until they move to base.css. */
.prices-page { background: var(--gray-50); }
/* The shared sheet draws main as a column and every main > section as a
   card; this page sets its own container. */
.prices-main { display: block; max-width: none; margin: 0; padding: 48px 0 96px; }
.prices-main h1, .prices-main h2 { margin: 0; letter-spacing: 0; }
.prices-main p { margin: 0; }
.prices-main .card { --table-edge: 24px; margin: 0; }
.prices-main .card-head { padding: 24px 24px 16px; }
.prices-main .card + .card { margin-top: 16px; }
.prices-main .card[hidden] { display: none; }

.prices-head { margin-bottom: 32px; }
.prices-title { color: var(--text-1); font: 600 30px/38px var(--font-sans); }
.prices-lead { max-width: 720px; margin-top: 8px !important; color: var(--text-2); font-size: 16px; line-height: 24px; }
.prices-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.prices-status-row.is-shown { margin-bottom: 24px; }
.prices-status { color: var(--text-2); font-size: 14px; line-height: 20px; }

/* The family table: the model column stays in view while a narrow window
   scrolls the rates sideways. */
.prices-table-wrap { overflow-x: auto; }
.prices-table { min-width: 560px; }
.prices-table th[scope="row"] { color: var(--text-1); font: 500 14px/20px var(--font-sans); text-align: left; vertical-align: middle; }
.prices-table .prices-model { position: sticky; left: 0; z-index: 1; background: var(--gray-0); }
.prices-table .prices-model a { color: var(--text-1); text-decoration: none; }
.prices-table .prices-model a:hover { color: var(--violet-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prices-table td { font-variant-numeric: tabular-nums; }
.prices-table tbody tr > td:first-child { padding-left: 12px; }
.prices-table .prices-none { color: var(--text-3); }
.prices-table tbody tr:hover > .prices-model { background: var(--gray-50); }
.prices-table tbody tr td, .prices-table tbody tr th { border-bottom: 1px solid var(--line-soft); }
.prices-table tbody tr:last-child > * { border-bottom: 0; }
.prices-table th[rowspan] { border-bottom: 1px solid var(--line-soft); }
.prices-skel-row .skel { width: 72%; height: 12px; }

/* Calculator: the choices beside the result. */
.prices-calc-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--line-soft); }
.prices-calc-form { display: flex; flex-direction: column; gap: 20px; padding: 24px; border-right: 1px solid var(--line-soft); }
.prices-seg { max-width: 100%; }
.prices-seg > .seg-item[hidden] { display: none; }
/* The lengths: the shared stepper as a slider beside its number field. The
   reference video switch is the whole row, its help under it, and its
   length under that once it is on. */
.field.prices-stepper { gap: 4px; }
.prices-reference { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.prices-reference > .prices-stepper { margin-top: 12px; }
.choice.prices-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; color: var(--text-1); font-size: 14px; line-height: 20px; }
.prices-calc-result { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 24px; background: var(--gray-25); }
.prices-result { color: var(--text-1); font: 600 36px/44px var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.prices-result-what { margin-top: 4px !important; color: var(--text-1); font-size: 14px; line-height: 20px; }
.prices-result-what:empty { display: none; }
.prices-result-formula { margin-top: 8px !important; color: var(--text-2); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.prices-result-reserve { color: var(--text-3); font-size: 13px; line-height: 20px; }
.prices-calc-result .btn { margin-top: 16px; }

/* Billing notes */
.prices-notes-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0 24px 24px 44px; color: var(--text-2); font-size: 14px; line-height: 22px; }

@media (max-width: 1023px) {
  .prices-calc-body { grid-template-columns: minmax(0, 1fr); }
  .prices-calc-form { border-right: 0; border-bottom: 1px solid var(--line-soft); }
}
@media (max-width: 767px) {
  .prices-main { padding: 24px 0 48px; }
  .prices-head { margin-bottom: 20px; }
  .prices-title { font-size: 24px; line-height: 32px; }
  .prices-main .card { --table-edge: 20px; }
  .prices-main .card-head { padding: 20px 20px 12px; }
  .prices-calc-form, .prices-calc-result { padding: 20px; }
  .choice.prices-switch { min-height: 44px; }
  .prices-seg { flex-wrap: wrap; width: 100%; height: auto; overflow: visible; }
  .prices-seg > .seg-item { flex: 1 1 auto; }
  /* The seven ratios: two even rows of four and three. */
  .seg.prices-ratios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* The four columns fit a phone: tighter cells, wrapping heads. */
  .prices-table { min-width: 0; }
  .prices-table th, .prices-table td { padding: 8px 6px; font-size: 13px; line-height: 20px; }
  .prices-table thead th { white-space: normal; }
  .prices-table tr > :first-child { padding-left: var(--table-edge); }
  .prices-table tr > :last-child { padding-right: var(--table-edge); }
  .prices-table tbody tr > td:first-child { padding-left: 6px; }
  .prices-table .prices-model { position: static; width: 34%; }
  .prices-calc-result .btn { align-self: stretch; }
  .prices-notes-list { padding: 0 20px 20px 36px; }
}