/* the specifications: a data sheet, set in the page's tables */
.logo { text-decoration: none; color: var(--fg); }
.hero-small { padding-block: 40px 20px; }
.hero-small h1 { font-size: clamp(44px, 8vw, 96px); }
.toc { display: flex; flex-wrap: wrap; gap: 8px; }
.toc a { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: #cfcfcb; text-decoration: none; }
.toc a:hover { border-color: var(--muted); color: var(--fg); }
.sub { margin: 40px 0 14px; font-size: 22px; font-weight: 800; font-stretch: 88%; scroll-margin-top: 20px; }
.spec code { font: 12.5px/1.5 var(--mono); color: var(--fg); }
.spec td a { color: var(--fg); }
.opts td:nth-child(2) { color: var(--fg); }
.opts td:first-child { white-space: normal; min-width: 160px; }
.opts tr.grp td { background: var(--panel); color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; padding-block: 10px; }
.cta-gap { margin-top: 28px; }
section { scroll-margin-top: 10px; }
footer a { color: inherit; }
/* phones: every row a small card instead of a table to scroll sideways */
@media (max-width: 640px) {
  .spec, .spec tbody { display: block; width: 100%; min-width: 0; }
  .spec thead { display: none; }
  .spec tr { display: block; padding: 12px 14px; border-top: 1px solid var(--line); }
  .spec tr:first-child { border-top: 0; }
  .spec td { display: block; padding: 2px 0; border: 0; }
  .spec td:first-child { white-space: normal; margin-bottom: 4px; }
  .opts td:nth-child(3) { color: var(--muted); font-size: 14px; }
  .opts tr.grp { padding: 0; }
  .opts tr.grp td { padding: 10px 14px; }
}