/*
 * tuning-database.co.uk, v3: the shell and everything every page shares.
 *
 * Read tokens.css first; this file holds no colour of its own. Sections:
 *   1. reset and base      5. header and navigation
 *   2. layout              6. footer
 *   3. type and prose      7. page heads, bands, lists, tables, notices
 *   4. buttons and forms   8. motion and print
 *
 * Shop, product, cart and checkout live in shop.css.
 */

/* 1. reset and base ------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-weight: 400;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

svg {
  fill: currentColor;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

.screen-reader-text,
.v3-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.v3-skip {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
}

.v3-skip:focus {
  top: var(--sp-2);
}

/* 2. layout ---------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow {
  max-width: calc(var(--measure) + 2 * var(--gutter));
}

.band {
  padding-block: clamp(var(--sp-7), 7vw, var(--sp-9));
}

.band + .band {
  border-top: 1px solid var(--line);
}

.band--sunk {
  background: var(--bg-sunk);
}

.band--tight {
  padding-block: var(--sp-7);
}

.split {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-8);
  }

  .split--wide-left {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }

  .split--wide-right {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }
}

.stack > * + * {
  margin-top: var(--sp-4);
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
}

/* 3. type and prose -------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-4);
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  letter-spacing: 0;
}

h4 {
  font-size: var(--step-0);
  letter-spacing: 0;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 58ch;
}

.muted {
  color: var(--ink-3);
}

.small {
  font-size: var(--step--1);
}

.mono,
code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
}

code {
  padding: 0.1em 0.35em;
  background: var(--code-bg);
  border-radius: var(--radius-1);
}

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: 1em;
}

.prose h2 {
  margin-top: 1.8em;
  font-size: var(--step-2);
}

.prose h3 {
  margin-top: 1.5em;
}

.prose ul,
.prose ol {
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: 0.35em;
}

.prose blockquote {
  margin-inline: 0;
  padding-left: var(--sp-4);
  border-left: 3px solid var(--accent);
  color: var(--ink-2);
}

.prose img {
  border-radius: var(--radius-2);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.prose th,
.prose td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: 2em;
}

/* 4. buttons and forms ----------------------------------------------------- */

.btn,
.button,
button.button,
input[type="submit"].button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 46px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius-1);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
}

.btn:hover,
.button:hover {
  background: color-mix(in srgb, var(--btn-bg) 86%, var(--ink));
  border-color: color-mix(in srgb, var(--btn-bg) 86%, var(--ink));
  color: var(--btn-ink);
}

.btn:active {
  transform: translateY(1px);
}

.btn--quiet,
.button.v3-quiet {
  background: transparent;
  border-color: var(--btn-2-line);
  color: var(--ink);
}

.btn--quiet:hover,
.button.v3-quiet:hover {
  background: var(--bg-hover);
  border-color: var(--ink-3);
  color: var(--ink);
}

.btn--lg {
  min-height: 54px;
  padding: 0 var(--sp-6);
  font-size: var(--step-1);
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.button.disabled,
.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.go {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
}

.go::after {
  content: "\2192";
  transition: transform var(--dur-1) var(--ease-out);
}

.go:hover::after {
  transform: translateX(3px);
}

label {
  display: inline-block;
  margin-bottom: var(--sp-1);
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--ink-2);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
  width: 100%;
  min-height: 46px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-1);
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.4;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-3);
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--focus);
  outline-offset: 0;
  border-color: var(--focus);
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  vertical-align: -3px;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

/* 5. header and navigation ------------------------------------------------- */

/* The strip on top: what we sell first, the 24/7 file service, the portal. */
.v3-strip {
  background: var(--bg-sunk);
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--step--1);
}

.v3-strip__in {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 36px;
}

.v3-strip a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.v3-strip a:hover {
  color: var(--ink);
}

.v3-strip__news {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  margin-right: auto;
  min-width: 0;
}

.v3-strip__news b {
  color: var(--accent-ink);
  font-weight: 600;
}

.v3-strip__news span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.v3-strip__news svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.v3-strip__live {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-right: auto;
}

.v3-strip__live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}

.v3-strip__wide {
  display: none;
}

@media (min-width: 768px) {
  .v3-strip__news {
    display: inline-flex;
  }

  .v3-strip__live {
    margin-right: 0;
  }

  .v3-strip__wide {
    display: inline;
  }
}

/* The bar. */
.v3-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
}

.admin-bar .v3-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .v3-header {
    top: 0;
  }
}

.v3-strip .wrap,
.v3-header .wrap {
  max-width: calc(1360px + 2 * var(--gutter));
}

.v3-header__in {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 64px;
}

.v3-brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}

/* The logo: the split diamond and the name, its hyphen an orange bar. */
.v3-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}

.v3-logo__mark {
  width: 1.55em;
  height: 1.55em;
  flex: none;
}

.v3-logo__mark .a {
  fill: currentColor;
}

.v3-logo__mark .b {
  fill: var(--accent);
}

.v3-logo__dash {
  display: inline-block;
  width: 0.42em;
  height: 0.14em;
  margin: 0 0.1em;
  overflow: hidden;
  background: var(--accent);
  color: transparent;
  vertical-align: 0.26em;
  transform: skewX(-20deg);
}

/* The menus in the bar, from 1200 px. */
.v3-menu {
  display: none;
}

.v3-menu__list {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v3-menu__btn,
.v3-menu__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--radius-2);
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.v3-menu__btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0.65;
  transition: transform var(--dur-1) var(--ease-out);
}

.v3-menu__btn:hover,
.v3-menu__link:hover,
.v3-menu__btn[aria-expanded="true"] {
  background: var(--bg-hover);
}

.v3-menu__btn[aria-expanded="true"] svg {
  opacity: 1;
  transform: rotate(180deg);
}

.v3-menu__link[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: 0;
}

/* A menu's panel: columns of entries, a highlighted card, a row of links. */
.v3-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0 var(--gutter) var(--sp-5);
}

.v3-mega[hidden] {
  display: none;
}

.v3-mega__in {
  max-width: 1120px;
  margin: var(--sp-2) auto 0;
  overflow: hidden;
  background: var(--header-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-float);
  animation: v3-drop var(--dur-1) var(--ease-out);
}

@keyframes v3-drop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.v3-mega__cols {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}

.v3-mega__col {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
}

.v3-mega__col + .v3-mega__col {
  border-left: 1px solid var(--line);
}

.v3-mega__title {
  margin: 0 0 var(--sp-3);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.v3-mega ul,
.v3-drawer__group ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v3-mega__item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
  margin-inline: calc(-1 * var(--sp-2));
  padding: var(--sp-2);
  border-radius: var(--radius-2);
  color: var(--ink);
  text-decoration: none;
}

.v3-mega__item:hover,
.v3-mega__item:focus-visible {
  background: var(--bg-hover);
}

.v3-mega__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg);
  color: var(--accent-ink);
}

.v3-mega__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v3-mega__item b {
  display: block;
  font-weight: 600;
}

.v3-mega__item small {
  display: block;
  color: var(--ink-3);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
}

.v3-mega__feature {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border-left: 1px solid var(--line);
  background: var(--bg-sunk);
  color: var(--ink-2);
  text-decoration: none;
}

.v3-mega__feature b {
  color: var(--ink);
  font-size: var(--step-2);
  line-height: var(--leading-tight);
}

.v3-mega__tag {
  align-self: flex-start;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-1);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
}

.v3-mega__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  color: var(--accent-ink);
  font-weight: 600;
}

.v3-mega__feature:hover .v3-mega__cta {
  text-decoration: underline;
}

.v3-mega__cta svg,
.v3-mega__all svg,
.v3-drawer__feature svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.v3-mega__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--bg-sunk);
  font-size: var(--step--1);
}

.v3-mega__foot a {
  color: var(--ink-2);
  text-decoration: none;
}

.v3-mega__foot a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.v3-mega__foot .v3-mega__all {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
  color: var(--ink);
  font-weight: 600;
}

/* The tools at the right of the bar. */
.v3-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
}

.v3-icon,
.v3-search-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: var(--radius-2);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.v3-icon:hover,
.v3-search-btn:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

.v3-icon svg,
.v3-search-btn svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v3-search-btn__label,
.v3-search-btn kbd {
  display: none;
}

.v3-cart-count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.v3-cart-count:empty,
.v3-cart-count[data-count="0"] {
  display: none;
}

/* Which icon the toggle shows follows the scene it would switch away from. */
.v3-theme .sun {
  display: none;
}

:root[data-theme="light"] .v3-theme .sun {
  display: block;
}

:root[data-theme="light"] .v3-theme .moon {
  display: none;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .v3-theme .sun {
    display: block;
  }

  :root:not([data-theme="dark"]) .v3-theme .moon {
    display: none;
  }
}

.v3-signin,
.v3-cta {
  display: none;
  min-height: 40px;
  padding-inline: var(--sp-4);
  font-size: var(--step--1);
}

.v3-signin {
  margin-left: var(--sp-2);
}

.v3-menu-btn {
  display: inline-grid;
}

.v3-menu-btn__close,
.v3-menu-btn[aria-expanded="true"] .v3-menu-btn__open {
  display: none;
}

.v3-menu-btn[aria-expanded="true"] .v3-menu-btn__close {
  display: block;
}

/* Phones: the logo, search, cart and the menu; the rest is in the menu. */
@media (max-width: 639px) {
  .v3-tools .v3-wide {
    display: none;
  }

  .v3-header__in {
    gap: var(--sp-2);
  }
}

@media (max-width: 379px) {
  .v3-logo {
    font-size: 0.95rem;
  }

  .v3-icon,
  .v3-search-btn {
    width: 38px;
  }
}

/* Tablets and up: the search box in the bar, with its / key. */
@media (min-width: 768px) {
  .v3-search-btn {
    display: inline-flex;
    gap: var(--sp-2);
    width: auto;
    height: 40px;
    padding: 0 var(--sp-2) 0 var(--sp-3);
    border: 1px solid var(--field-line);
    background: var(--field-bg);
    color: var(--ink-3);
  }

  .v3-search-btn__label {
    display: inline;
    font-size: var(--step--1);
    white-space: nowrap;
  }

  .v3-search-btn kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-1);
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.4;
  }
}

@media (min-width: 900px) {
  .v3-cta {
    display: inline-flex;
    margin-left: var(--sp-2);
  }
}

/* Laptops: the menus move into the bar. */
@media (min-width: 1200px) {
  .v3-menu {
    display: flex;
  }

  .v3-menu-btn,
  .v3-drawer {
    display: none;
  }

  .v3-signin {
    display: inline-flex;
  }

  .v3-cta {
    margin-left: 0;
  }
}

/* Between 1200 and 1440 px the search box keeps only its icon and key. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .v3-search-btn__label {
    display: none;
  }
}

/* TVs and big monitors: a wider column and a step larger. */
@media (min-width: 1920px) {
  .v3-strip .wrap,
  .v3-header .wrap {
    max-width: calc(1600px + 2 * var(--gutter));
  }

  .v3-header__in {
    height: 72px;
  }

  .v3-logo {
    font-size: 1.25rem;
  }

  .v3-menu__btn,
  .v3-menu__link {
    padding-inline: var(--sp-4);
    font-size: 1.0625rem;
  }

  .v3-mega__in {
    max-width: 1280px;
  }
}

.v3-search {
  border-bottom: 1px solid var(--line);
  background: var(--bg-sunk);
  padding-block: var(--sp-4);
}

.v3-search form {
  display: flex;
  gap: var(--sp-2);
}

/* The phone and tablet menu: each menu folds (a <details>), the two buttons
   stay at the bottom under the thumb. */
.v3-drawer {
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  padding-block: var(--sp-2) 0;
}

.v3-drawer__group {
  border-bottom: 1px solid var(--line);
}

.v3-drawer__group summary,
.v3-drawer__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  color: var(--ink);
  font-size: var(--step-1);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.v3-drawer__link {
  border-bottom: 1px solid var(--line);
}

.v3-drawer__group summary::-webkit-details-marker {
  display: none;
}

.v3-drawer__group summary span,
.v3-drawer__link span {
  margin-left: auto;
  color: var(--ink-3);
  font-size: var(--step--1);
  font-weight: 400;
  text-align: right;
}

.v3-drawer__group summary svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform var(--dur-1) var(--ease-out);
}

.v3-drawer__group[open] summary svg {
  transform: rotate(180deg);
}

.v3-drawer__group ul {
  margin-bottom: var(--sp-3);
}

@media (min-width: 640px) {
  .v3-drawer__group ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-5);
  }
}

.v3-drawer__group .v3-mega__item {
  margin-inline: 0;
}

.v3-drawer__feature {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.v3-drawer .v3-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}

.v3-drawer__end {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  background: var(--header-bg);
}

@media (prefers-reduced-motion: reduce) {
  .v3-mega__in {
    animation: none;
  }

  .v3-menu__btn svg,
  .v3-drawer__group summary svg {
    transition: none;
  }
}

/* A notice the owner sets in the admin, shown above everything. */
.v3-alert {
  background: var(--warn);
  color: var(--bg);
  padding-block: var(--sp-2);
  font-weight: 600;
  font-size: var(--step--1);
}

/* 6. footer ---------------------------------------------------------------- */

.v3-footer {
  margin-top: var(--sp-9);
  background: var(--bg-sunk);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--step--1);
}

/* A page that already ends on a sunk band meets the footer directly, instead
   of leaving a strip of page colour between two grey blocks. */
main:has(> .band--sunk:last-child) + .v3-footer {
  margin-top: 0;
}

.v3-footer a {
  color: var(--ink-2);
  text-decoration: none;
}

.v3-footer a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.v3-footer__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-5);
  padding-block: var(--sp-8) var(--sp-7);
}

.v3-footer__about {
  grid-column: 1 / -1;
}

.v3-footer__logo {
  color: var(--ink);
}

@media (min-width: 1040px) {
  .v3-footer__about {
    grid-column: auto;
  }
}

@media (min-width: 1040px) {
  .v3-footer__top {
    grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  }
}

.v3-footer h2 {
  margin-bottom: var(--sp-3);
  font-size: var(--step-0);
  color: var(--ink);
}

.v3-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.v3-footer li + li {
  margin-top: var(--sp-2);
}

.v3-footer__about p + p {
  margin-top: var(--sp-3);
}

.v3-footer__langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line);
}

.v3-footer__langs a[aria-current] {
  color: var(--ink);
  font-weight: 600;
}

.v3-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-6);
  padding-block: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
}

.v3-footer__base p {
  max-width: 70ch;
}

/* The policy links another plugin prints after the footer. */
.tdb-policy-strip {
  padding: var(--sp-3) var(--gutter) var(--sp-5);
  background: var(--bg-sunk);
  color: var(--ink-3);
  font-size: var(--step--1);
  text-align: center;
}

.tdb-policy-strip a {
  color: var(--ink-2);
}

.tdb-policy-strip .sep {
  margin-inline: var(--sp-2);
}

/* 7. page heads, bands, lists, tables, notices ----------------------------- */

.page-head {
  padding-block: var(--sp-7) var(--sp-6);
  border-bottom: 1px solid var(--line);
}

.page-head + .band--tight {
  padding-top: var(--sp-6);
}

.page-head h1 + p {
  margin-top: var(--sp-4);
}

.page-head .row {
  margin-top: var(--sp-5);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
  color: var(--ink-3);
  font-size: var(--step--1);
}

.crumbs li + li::before {
  content: "/";
  margin-right: var(--sp-2);
  color: var(--line-strong);
}

.crumbs a {
  color: var(--ink-2);
  text-decoration: none;
}

.crumbs a:hover {
  text-decoration: underline;
}

.section-head {
  max-width: 60ch;
  margin-bottom: var(--sp-6);
}

.section-head p {
  margin-top: var(--sp-3);
  color: var(--ink-2);
}

/* A spec sheet: label on the left, value on the right, a rule between rows. */
.specs {
  margin: 0;
  border-top: 1px solid var(--line);
}

.specs > div {
  display: grid;
  grid-template-columns: minmax(8rem, 38%) 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.specs dt {
  color: var(--ink-3);
}

.specs dd {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* A list of plain points with a tick drawn in the accent. */
.ticks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  position: relative;
  padding-left: 1.6em;
}

.ticks li + li {
  margin-top: var(--sp-2);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.45em;
  width: 0.7em;
  height: 0.38em;
  border-left: 2px solid var(--accent-ink);
  border-bottom: 2px solid var(--accent-ink);
  transform: rotate(-45deg);
}

/* Steps the visitor takes, in the order they take them. */
.steps {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
  }
}

.steps li {
  padding-top: var(--sp-4);
  border-top: 2px solid var(--line-strong);
}

.steps li:first-child {
  border-top-color: var(--accent);
}

.steps h3 {
  margin-bottom: var(--sp-2);
}

.steps p {
  color: var(--ink-2);
}

.panel {
  padding: var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.table th {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink-3);
  font-weight: 500;
  font-size: var(--step--1);
  text-align: left;
  white-space: nowrap;
}

.table td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.table tbody tr:hover {
  background: var(--bg-hover);
}

.table .num {
  text-align: right;
  white-space: nowrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-size: var(--step--1);
  white-space: nowrap;
}

.price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.price del {
  margin-right: var(--sp-2);
  color: var(--ink-3);
  font-weight: 400;
}

.price ins {
  text-decoration: none;
}

/* WooCommerce and our own notices share one look. */
.notice,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-1);
  background: var(--bg-raised);
  color: var(--ink);
  list-style: none;
}

.woocommerce-error {
  border-left-color: var(--bad);
}

.woocommerce-message {
  border-left-color: var(--ok);
}

.woocommerce-message .button,
.woocommerce-info .button {
  float: right;
  min-height: 36px;
  margin-left: var(--sp-4);
  padding: 0 var(--sp-4);
}

.woocommerce-error li + li {
  margin-top: var(--sp-1);
}

/* The cookie choice, the only bar that floats. */
.v3-consent {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  max-width: 760px;
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-float);
}

/* Its own display rule outranks [hidden]; without this the bar never went away. */
.v3-consent[hidden] {
  display: none;
}

.v3-consent p {
  flex: 1 1 280px;
  color: var(--ink-2);
  font-size: var(--step--1);
}

.v3-consent .row {
  gap: var(--sp-2);
}

/* The 10% offer on cart and checkout, when someone heads for the door. */
.v3-dialog {
  max-width: 440px;
  width: calc(100% - 2 * var(--sp-4));
  padding: var(--sp-6);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
  color: var(--ink);
  box-shadow: var(--shadow-float);
}

.v3-dialog::backdrop {
  background: color-mix(in srgb, var(--scrim) 60%, transparent);
}

.v3-dialog h2 {
  font-size: var(--step-2);
}

.v3-dialog p {
  margin-top: var(--sp-2);
  color: var(--ink-2);
}

.v3-dialog form {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.v3-dialog .v3-x {
  float: right;
  margin: calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)) 0 0;
}

.v3-trap {
  position: absolute;
  left: -9999px;
}

/* The demo gate (another plugin) asks for a name before the demo opens; it
   shows and hides itself with the hidden attribute. */
.tdb-dg {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
}

.tdb-dg[hidden] {
  display: none;
}

html.tdb-dg-lock {
  overflow: hidden;
}

.tdb-dg-err:empty {
  display: none;
}

.tdb-dg-f label {
  display: block;
}

.tdb-dg-back {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--scrim) 60%, transparent);
}

.tdb-dg-box {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: var(--sp-6);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-float);
}

.tdb-dg-box > * + * {
  margin-top: var(--sp-3);
}

.tdb-dg-x {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 1.4rem;
}

.tdb-dg-lead,
.tdb-dg-hint,
.tdb-dg-priv {
  color: var(--ink-2);
  font-size: var(--step--1);
}

.tdb-dg-err {
  color: var(--bad);
  font-size: var(--step--1);
}

.tdb-dg-go {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: var(--radius-1);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-weight: 600;
}

.tdb-dg-trap {
  position: absolute;
  left: -9999px;
}

/* A search field with its button, the way into the files from anywhere. */
.searchbar {
  display: flex;
  gap: var(--sp-2);
  max-width: 640px;
}

.searchbar input[type="search"] {
  min-height: 52px;
  font-size: var(--step-1);
}

.searchbar .btn {
  min-height: 52px;
}

@media (max-width: 479px) {
  .searchbar {
    flex-direction: column;
  }
}

/* A real screenshot in a plain frame. */
.shot {
  margin: 0;
}

.shot img {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-float);
}

.shot figcaption {
  margin-top: var(--sp-3);
  color: var(--ink-3);
  font-size: var(--step--1);
}

/* Things we sell, one per row: name, what it does, price. */
.rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.rows li {
  border-bottom: 1px solid var(--line);
}

.rows a {
  display: grid;
  gap: var(--sp-1) var(--sp-5);
  padding: var(--sp-4) var(--sp-2);
  color: var(--ink-2);
  text-decoration: none;
}

@media (min-width: 760px) {
  .rows a {
    grid-template-columns: 12rem 1fr auto;
    align-items: baseline;
  }
}

.rows a:hover {
  background: var(--bg-hover);
}

.rows__name {
  color: var(--ink);
  font-weight: 700;
  font-size: var(--step-1);
}

.rows__price {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Questions that open in place. */
.faq details {
  border-bottom: 1px solid var(--line);
}

.faq details:first-child {
  border-top: 1px solid var(--line);
}

.faq summary {
  position: relative;
  padding: var(--sp-4) var(--sp-7) var(--sp-4) 0;
  font-weight: 600;
  font-size: var(--step-1);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: var(--sp-2);
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-ink);
  font-size: 1.4em;
  font-weight: 400;
  transition: transform var(--dur-2) var(--ease-out);
}

.faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq details p {
  padding-bottom: var(--sp-4);
  color: var(--ink-2);
  max-width: 62ch;
}

/* 9. the homepage ---------------------------------------------------------- */

.home-hero {
  padding-block: clamp(var(--sp-7), 8vw, var(--sp-9)) var(--sp-8);
}

.home-hero h1 {
  max-width: 18ch;
  font-size: var(--step-5);
  letter-spacing: -0.02em;
}

.home-hero .lede {
  margin-top: var(--sp-4);
}

.home-paths {
  display: grid;
  gap: var(--sp-7);
  margin-top: var(--sp-8);
}

@media (min-width: 900px) {
  .home-paths {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .home-path + .home-path {
    padding-left: var(--sp-7);
    border-left: 1px solid var(--line-strong);
  }

  .home-path:first-child {
    padding-right: var(--sp-7);
  }
}

.home-path {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.home-path h2,
.home-path h3 {
  font-size: var(--step-2);
  padding-top: var(--sp-4);
  border-top: 3px solid var(--accent);
}

/* Forms we draw ourselves (contact, enquiries). */
.form > * + *,
.form fieldset + * {
  margin-top: var(--sp-4);
}

.form legend {
  margin-bottom: var(--sp-2);
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--ink-2);
}

.form__two {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 560px) {
  .form__two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.form label {
  display: block;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: var(--step--1);
  cursor: pointer;
}

.choice:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.contact__ways .specs dd a {
  font-weight: 600;
}

.contact__company-h {
  margin-top: var(--sp-6);
  font-size: var(--step-2);
}

.contact__form h2 {
  font-size: var(--step-2);
}

.contact__form > p {
  margin-top: var(--sp-2);
}

.contact__form .form {
  margin-top: var(--sp-5);
}

/* Plans side by side. Each plan shares the same rows (name to features) with
   its neighbours through subgrid, so prices and lists line up across the row
   whether or not a plan has an old price to strike through. */
.plans {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 720px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1120px) {
  .plans {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.plan {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 7;
  row-gap: var(--sp-2);
  align-content: start;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong);
  border-radius: var(--radius-2);
}

.plan > * {
  margin: 0;
}

.plan--lead {
  background: var(--bg-raised);
  border-top-color: var(--accent);
}

.plan__name {
  font-size: var(--step-2);
}

.plan__for {
  color: var(--ink-2);
}

.plan__old {
  min-height: 1.4em;
  color: var(--ink-3);
}

.plan__price {
  color: var(--ink-2);
}

.plan__price b {
  color: var(--ink);
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: -0.02em;
}

.plan__from {
  color: var(--ink-3);
}

.plan__sub {
  color: var(--ink-2);
  font-size: var(--step--1);
}

.plan__gets {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--step--1);
}

.plans__note {
  margin-top: var(--sp-5);
  color: var(--ink-2);
}

.hosting th[scope="row"] {
  color: var(--ink);
  font-weight: 700;
  font-size: var(--step-1);
  white-space: nowrap;
}

.hosting td {
  color: var(--ink-2);
}

/* Short statements in a grid, separated by rules rather than boxes. */
.facts {
  display: grid;
  gap: var(--sp-6) var(--sp-7);
}

@media (min-width: 720px) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fact {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-strong);
}

.fact h3 {
  margin-bottom: var(--sp-2);
}

.fact p {
  color: var(--ink-2);
}

.screens {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 900px) {
  .screens {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Steps stacked in one column, inside a split. */
.steps--stacked {
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

@media (min-width: 900px) {
  .steps--stacked {
    grid-template-columns: 1fr;
  }
}

.service .page-head .home-price,
.service .page-head .row {
  margin-top: var(--sp-4);
}

.services .home-paths {
  margin-top: var(--sp-7);
}

.services__note {
  margin-top: var(--sp-4);
}

.faq-page__group + .faq-page__group {
  margin-top: var(--sp-7);
}

.faq-page__group h2 {
  margin-bottom: var(--sp-3);
  font-size: var(--step-2);
}

.faq-page__more {
  margin-top: var(--sp-7);
  color: var(--ink-2);
}

/* Published figures in a row. */
.figures-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-5);
  margin: 0;
}

.figures-row > div {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-strong);
}

.figures-row dt {
  color: var(--ink-3);
  font-size: var(--step--1);
}

.figures-row dd {
  margin: var(--sp-1) 0 0;
  color: var(--ink);
  font-size: var(--step-3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.about__cta {
  margin-top: var(--sp-7);
}

/* Legal documents: contents beside the text on a wide screen. */
.legal__trader {
  margin-top: var(--sp-3);
  color: var(--ink-2);
  font-size: var(--step--1);
}

.legal__layout {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 1040px) {
  .legal__layout {
    grid-template-columns: 260px minmax(0, var(--measure));
    gap: var(--sp-8);
    align-items: start;
  }

  .legal__toc {
    position: sticky;
    top: calc(64px + var(--sp-5));
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

.legal__toc h2 {
  margin-bottom: var(--sp-2);
  font-size: var(--step-0);
}

.legal__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
}

.legal__toc li + li {
  margin-top: var(--sp-1);
}

.legal__toc a {
  color: var(--ink-2);
  text-decoration: none;
}

.legal__toc a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.legal__text section + section {
  margin-top: var(--sp-7);
}

.legal__text section > h2 {
  margin-top: 0;
}

.catalogue__group + .catalogue__group {
  border-top: 1px solid var(--line);
}

.catalogue__more {
  margin-top: var(--sp-4);
  color: var(--ink-2);
}

/* A picture with a dark and a light version shows the one for the scene. */
.when-light {
  display: none;
}

:root[data-theme="light"] .when-light {
  display: block;
}

:root[data-theme="light"] .when-dark {
  display: none;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .when-light {
    display: block;
  }

  :root:not([data-theme="dark"]) .when-dark {
    display: none;
  }
}

pre.code {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3);
  overflow-x: auto;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  font-size: var(--step--1);
}

pre.code code {
  padding: 0;
  background: none;
  white-space: pre;
}

/* System status */
.status__now {
  font-weight: 600;
  color: var(--ink);
}

.status__now--operational {
  color: var(--ok);
}

.status__now--degraded,
.status__now--maintenance {
  color: var(--warn);
}

.status__now--outage {
  color: var(--bad);
}

.status__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--ink-3);
  vertical-align: 0;
}

.status__dot--operational {
  background: var(--ok);
}

.status__dot--degraded,
.status__dot--maintenance {
  background: var(--warn);
}

.status__dot--outage {
  background: var(--bad);
}

.status__h {
  margin: var(--sp-7) 0 var(--sp-3);
  font-size: var(--step-2);
}

/* The TunerSuite page */
.suite__head .split {
  align-items: center;
}

.suite__buy {
  max-width: 440px;
}

.suite__buy .buybox__price {
  margin: 0;
}

.suite__buy .row {
  margin-top: var(--sp-4);
}

.suite__wide {
  margin-top: var(--sp-7);
}

.suite__own {
  font-size: var(--step-1);
}

.suite__demo {
  margin-top: var(--sp-6);
}

/* 10. articles and lists of them -------------------------------------------- */

.article__meta {
  margin-top: var(--sp-3);
}

.article__img {
  margin: 0 0 var(--sp-6);
}

.article__img img {
  width: 100%;
  border-radius: var(--radius-2);
}

.article__next {
  margin-top: 0;
}

.post-list {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.post-list li {
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.post-list a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.post-list a:hover {
  text-decoration: underline;
}

.post-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.post-rows li {
  border-bottom: 1px solid var(--line);
}

.post-rows a {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-5) var(--sp-2);
  color: var(--ink-2);
  text-decoration: none;
}

.post-rows a:hover {
  background: var(--bg-hover);
}

.post-rows__date {
  color: var(--ink-3);
  font-size: var(--step--1);
}

.post-rows__title {
  color: var(--ink);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: var(--leading-snug);
}

.post-rows a:hover .post-rows__title {
  text-decoration: underline;
}

.home-path > p:not(.small):not(.home-price):not(.row) {
  color: var(--ink-2);
  max-width: 46ch;
}

.home-price {
  color: var(--ink-2);
}

.home-price b {
  color: var(--ink);
  font-size: var(--step-2);
  margin-right: 0.15em;
}

.home-more {
  margin-top: var(--sp-6);
}

.home-suite .ticks {
  margin-block: var(--sp-2);
}

.talk .lede {
  margin-top: var(--sp-3);
}

.talk .row {
  margin-top: var(--sp-5);
}

/* 8. motion and print ------------------------------------------------------ */

/* Things that arrive as they scroll into view, once. Hidden only when the
   script that reveals them is running (the head script adds .js); without it,
   everything is simply there. */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms;
    animation-duration: 1ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
  }

  .js .reveal,
  .js .figures.reveal .bar {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .v3-header,
  .v3-footer,
  .v3-consent,
  .tdb-policy-strip {
    display: none;
  }

  body {
    background: none;
    color: black;
  }
}

/* The breadcrumb trail the footer prints (inc/core/seo.php markup). */
.tdb-breadcrumbs-footer {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}

.tdb-breadcrumbs-footer .container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tdb-breadcrumbs-footer .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  color: var(--ink-3);
}

.tdb-breadcrumbs-footer .breadcrumb-item {
  margin: 0;
}

.tdb-breadcrumbs-footer .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  margin-right: var(--sp-2);
  color: var(--ink-3);
}

/* The opening of a legal page, read from the old template (the trader block). */
.legal__intro {
  margin-bottom: var(--sp-7);
}

.legal__intro .legal-highlight {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-1);
  background: var(--bg-raised);
}

.legal__intro .legal-highlight p + p {
  margin-top: var(--sp-3);
}

.legal__intro .bi {
  display: none;
}

/* ---- The four ways to run TunerSuite (parts/run-ways.php, 19 Oct 2026) ----
 * Printed by the hosting products, the pricing page, the homepage and
 * /our-software/: icons in a tinted square, the four cards with a capacity
 * meter, the server to rent and a website for the portal.
 */

/* Icons in a tinted square, drawn as strokes. */
.hp-ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-1);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.hp-ico svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hp-ico--ok {
  width: 1.5rem;
  height: 1.5rem;
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: var(--ok);
}

.hp-ico--ok svg {
  width: 1rem;
  height: 1rem;
}

h3 .hp-ico {
  width: 1.75rem;
  height: 1.75rem;
  margin-right: var(--sp-2);
  vertical-align: middle;
}

.chip--ok {
  border-color: var(--ok);
  color: var(--ok);
}

/* The four ways to run it. */
.hp-rule {
  max-width: var(--measure);
  color: var(--ink-2);
}

.hp-rail {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.hp-way {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong);
  border-radius: var(--radius-2);
  background: var(--bg);
}

.hp-way > * {
  margin: 0;
}

/* The link or the "this plan" mark sits at the foot of every card. */
.hp-way > :last-child {
  margin-top: auto;
}

.hp-way--lead {
  border-top-color: var(--accent);
  background: var(--bg-raised);
}

.hp-way.is-current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.hp-way__ribbon {
  align-self: flex-start;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--step--1);
  font-weight: 700;
}

.hp-way__name {
  display: flex;
  align-items: center;
  font-size: var(--step-1);
}

.hp-way__note {
  color: var(--ink-2);
  font-size: var(--step--1);
}

.hp-way__price {
  color: var(--ink-2);
  font-size: var(--step--1);
}

.hp-way__price b {
  display: block;
  color: var(--ink);
  font-size: var(--step-3);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* How many files it carries, as a bar: unlimited on your own server. */
.hp-meter {
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--line);
}

.hp-meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transform-origin: left center;
}

.hp-meter--starter > span { width: 10%; }
.hp-meter--pro > span { width: 60%; }
.hp-meter--fileservice > span { width: 80%; }
.hp-meter--own > span { width: 100%; }

.js .reveal .hp-meter > span {
  transform: scaleX(0);
}

.js .reveal.is-in .hp-meter > span {
  transform: scaleX(1);
  transition: transform var(--dur-3) var(--ease-out) 0.25s;
}

.hp-way__facts {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
}

.hp-way__facts > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
}

.hp-way__facts dt {
  color: var(--ink-3);
}

.hp-way__facts dd {
  margin: 0;
  color: var(--ink);
  text-align: right;
}

.hp-way__here {
  align-self: flex-start;
  padding: 2px var(--sp-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  color: var(--accent-ink);
  font-size: var(--step--1);
  font-weight: 700;
}

/* The server to rent for your own. */
.hp-servers {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-2);
}

.hp-servers__head > * {
  margin: 0;
}

.hp-servers__head h3 {
  display: flex;
  align-items: center;
  font-size: var(--step-1);
}

.hp-servers__head p {
  margin-top: var(--sp-2);
  font-size: var(--step--1);
}

.hp-server {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: var(--bg-raised);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}

.hp-server:hover,
.hp-server:focus-visible {
  border-color: var(--accent);
  background: var(--bg-hover);
}

.hp-server__name {
  font-weight: 700;
  font-size: var(--step-1);
}

.hp-server__use {
  color: var(--ink-2);
  font-size: var(--step--1);
}

.hp-server__spec {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.hp-server__eur {
  color: var(--ink-2);
  font-size: var(--step--1);
}

.hp-server__eur b {
  color: var(--ink);
  font-size: var(--step-1);
}


.hp-web {
  display: grid;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
}

.hp-web > *,
.hp-web__text > * {
  margin: 0;
}

.hp-web__text h3 {
  font-size: var(--step-1);
}

.hp-web__text p {
  margin-top: var(--sp-1);
  color: var(--ink-2);
  font-size: var(--step--1);
}

.hp-web__price {
  color: var(--ink-2);
}

.hp-web__price b {
  color: var(--ink);
  font-size: var(--step-2);
  white-space: nowrap;
}

@media (min-width: 560px) {
  .hp-servers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hp-servers__head {
    grid-column: 1 / -1;
  }
}

@media (min-width: 720px) {
  .hp-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .hp-web {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }
}

@media (min-width: 1120px) {
  .hp-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal .hp-meter > span,
  .js .reveal.is-in .hp-meter > span {
    transform: none;
    transition: none;
  }
}