:root {
  --ink: #080616;
  --accent: #2F2FE4;
  --indigo: #162E93;
  --violet: #1A1953;
}
  * { box-sizing: border-box; }
  body { margin: 0; background: #f1f1fb; color: var(--ink); font: 1rem/1.65 system-ui, Tahoma, sans-serif; }
  .wrap { width: min(70rem, calc(100% - 2rem)); margin-inline: auto; }
  header { padding: 0 0 clamp(1.25rem, 4vw, 2.5rem); color: #fff; background: linear-gradient(180deg, var(--ink), var(--violet)); }
  .banner { display: block; width: 100%; height: auto; margin-bottom: clamp(.9rem, 3vw, 1.75rem); }
  h1 { margin: .35rem 0; font-size: clamp(1.65rem, 4.2vw, 3rem); line-height: 1.18; }
  header p { margin: .5rem 0 0; color: #dfdfff; }
  nav { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
  nav a { padding: .45rem .8rem; border: 1px solid #a9a9ff; border-radius: .5rem; color: #fff; text-underline-offset: .2em; }
  nav a[aria-current="page"] { background: var(--accent); color: #fff; }
  nav a:not([aria-current]):hover { background: var(--indigo); color: #fff; }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  main { padding-block: 1.5rem 3rem; }
  section + section { margin-top: 2.75rem; }
  h2 { margin: 0 0 .6rem; font-size: clamp(1.35rem, 4vw, 2rem); }
  .table { overflow-x: auto; background: #fff; border: 1px solid #c9cae4; border-radius: .75rem; }
  table { width: 100%; border-collapse: collapse; }
  th, td { padding: .75rem .9rem; border-bottom: 1px solid #dcdcf0; }
  thead { background: var(--violet); color: #fff; }
  th { text-align: left; }
  tbody tr:nth-child(even) { background: #f5f5ff; }
  tbody tr:last-child > * { border-bottom: 0; }
  #prices table { min-width: 37rem; }
  #prices td, #prices th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
  .note { margin: .65rem 0 0; color: #49486c; font-size: .9rem; }
  .package-service, .fit { display: block; margin-top: .25rem; font-weight: 400; font-size: .9rem; }
  #prices td[colspan] { text-align: center; }

header { border-bottom: .2rem solid var(--indigo); }
header :focus-visible { outline-color: #b6b6ff; }
main a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: .2em; }
article { border-top: .25rem solid var(--indigo); }
.fit { color: #49486c; }
#prices th:has(.package-service) { width: 55%; }
#prices td { white-space: nowrap; }

.size-label { display: none; }

@media (max-width: 640px) {
  .wrap { width: calc(100% - 1.5rem); }
  .banner { margin-bottom: .75rem; }
  header p { font-size: .9rem; }
  nav a { display: flex; align-items: center; min-height: 44px; }
  main { padding-top: 1rem; }
  section + section { margin-top: 1.5rem; }
  .table { overflow: visible; }
  #prices table { display: block; min-width: 0; }
  #prices thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #prices tbody { display: block; }
  #prices tbody tr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: .7rem; }
  #prices tbody tr + tr { border-top: 1px solid #dcdcf0; }
  #prices tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 .45rem; }
  #prices tbody td { padding: .2rem 0; text-align: center; font-size: .85rem; }
  #prices tbody th, #prices tbody td { border: 0; }
  #prices td[colspan] { grid-column: 1 / -1; text-align: left; }
  .size-label { display: block; font-size: .72rem; font-weight: 700; color: var(--indigo); }
}