/*
 * tuning-database.co.uk, v3: /tunersuite-pricing/
 * (templates/page-tunersuite-pricing.php). The founder strip, the hero, the
 * four licences and three hosting plans (site.css .plans), the founder meter,
 * the feature tiles, the brand list, the questions.
 */

/* 1. the founder strip and the hero ------------------------------------------- */

.tsp-strip {
  margin: 0;
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--line);
  background: var(--bg-sunk);
  color: var(--ink-2);
  font-size: var(--step--1);
  text-align: center;
}

.tsp-strip strong {
  color: var(--accent-ink);
}

.tsp-strip .go {
  margin-left: var(--sp-2);
  white-space: nowrap;
}

.tsp-hero h1 {
  max-width: 18ch;
}

.tsp-sub {
  margin: var(--sp-2) 0 0;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.tsp-stats__h {
  margin: 0 0 var(--sp-4);
  color: var(--ink-2);
  font-size: var(--step-0);
  font-weight: 600;
}

.tsp-accent {
  color: var(--accent-ink);
}

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

.tsp-meta strong {
  color: var(--ink);
}

.tsp-hero .split {
  align-items: center;
}

.tsp-bill {
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
  box-shadow: var(--shadow-float);
}

.tsp-bill__h {
  margin: 0 0 var(--sp-3);
  color: var(--ink);
  font-weight: 700;
}

/* The two ways to pay after the licence: your own server, or our hosting (19 Oct 2026). */
.tsp-bill__sub {
  margin: var(--sp-4) 0 var(--sp-1);
  color: var(--accent-ink);
  font-size: var(--step--1);
  font-weight: 700;
}

.tsp-bill dl {
  margin: 0 0 var(--sp-3);
}

.tsp-bill dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.tsp-bill dt {
  color: var(--ink-2);
}

.tsp-bill dd {
  margin: 0;
  white-space: nowrap;
}

.tsp-bill dd b {
  color: var(--ink);
  font-size: var(--step-2);
}

.tsp-bill del {
  margin-right: var(--sp-2);
  color: var(--ink-3);
}

/* 2. the figures under the hero -------------------------------------------------- */

.tsp-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  color: var(--ink-3);
  font-size: var(--step--1);
  list-style: none;
}

.tsp-stats li {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-strong);
}

.tsp-stats b {
  display: block;
  color: var(--ink);
  font-size: var(--step-4);
  line-height: 1.1;
}

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

/* 3. the plans: a ribbon that takes no row of the card's grid -------------------- */

.tsp .plan {
  position: relative;
}

.plan__ribbon {
  position: absolute;
  top: calc(var(--sp-3) * -1);
  right: var(--sp-4);
  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;
}

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

/* 4. the founder meter ----------------------------------------------------------- */

.tsp-ea {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
}

.tsp-ea__top {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-2);
  color: var(--ink-2);
}

.tsp-ea__top b {
  color: var(--ink);
  font-size: var(--step-2);
}

/* A <progress>: the browser's own bar, drawn in the tokens. */
.tsp-ea__track {
  display: block;
  width: 100%;
  height: 10px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-sunk);
  color: var(--ink);
  appearance: none;
}

.tsp-ea__track::-webkit-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--bg-sunk);
}

.tsp-ea__track::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.tsp-ea__track::-moz-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--accent);
}

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

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

.tsp-ea__col {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
}

.tsp-ea__col--now {
  border-color: var(--accent);
}

.tsp-ea__badge {
  margin: 0 0 var(--sp-2);
  color: var(--ink-3);
  font-size: var(--step--1);
  font-weight: 600;
}

.tsp-ea__price {
  margin: 0 0 var(--sp-3);
  color: var(--ink-2);
}

.tsp-ea__price b {
  color: var(--ink);
  font-size: var(--step-4);
}

.tsp-ea__list {
  margin: 0;
  padding-left: var(--sp-5);
  color: var(--ink-2);
}

/* 5. the feature tiles ----------------------------------------------------------- */

.tsp-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.tsp-tile h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--step-1);
}

.tsp-tile p {
  margin: 0;
  color: var(--ink-2);
}

.tsp-tile .go {
  display: inline-block;
  margin-top: var(--sp-3);
}

.tsp-tile--big {
  border-color: var(--accent);
}

.tsp-tile__num {
  color: var(--accent-ink);
  font-size: var(--step-5);
  font-weight: 700;
  line-height: 1;
}

.tsp-tile p.tsp-tile__num {
  margin-bottom: var(--sp-2);
  color: var(--accent-ink);
}

.tsp-tile p.tsp-new {
  margin-bottom: var(--sp-2);
  color: var(--ok);
  font-size: var(--step--1);
  font-weight: 600;
}

/* 6. the brand list and the Gains API --------------------------------------------- */

.tsp-brand {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--sp-5) var(--sp-7);
  margin: 0;
}

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

.tsp-brand dt {
  margin-bottom: var(--sp-1);
  color: var(--ink);
  font-weight: 700;
}

.tsp-brand dd {
  margin: 0;
  color: var(--ink-2);
}

.tsp-xsell {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
}

@media (min-width: 900px) {
  .tsp-xsell {
    grid-template-columns: 1fr auto;
  }
}

.tsp-xsell h3 {
  font-size: var(--step-2);
}

.tsp .faq summary h3 {
  display: inline;
  font-size: inherit;
}