/*
 * skin.css: the old theme's markup, drawn by v3.
 *
 * A skinned page (v3/bootstrap.php tdb_v3_skinned()) keeps its own body: every
 * word, form, link and schema block as before. The old theme's stylesheets
 * and the colours typed into its style attributes are gone; this file draws
 * what is left with v3's tokens, in both themes.
 *
 *   1. layout: the Bootstrap grid and utilities the old templates use
 *   2. components: cards, buttons, badges, accordions, tables, lists
 *   3. the old theme's own families (*-card, *-grid, *-title ...)
 *   4. decoration that only made sense in the old design: hidden
 */

/* 1. layout ---------------------------------------------------------------- */

.v3-skin {
  display: block;
  padding-bottom: var(--sp-8);
}

.v3-skin .container,
.v3-skin .container-fluid,
.v3-skin .container-lg,
.v3-skin .container-xl {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.v3-skin .container .container {
  padding-inline: 0;
}

.v3-skin section {
  padding-block: var(--sp-7);
}

.v3-skin section section {
  padding-block: var(--sp-5);
}

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

.v3-skin .row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--sp-3) * -1);
  row-gap: var(--sp-5);
}

.v3-skin .row > * {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  padding-inline: var(--sp-3);
}

.v3-skin .row > .col {
  flex: 1 0 0%;
}

.v3-skin .col-6 { width: 50%; }
.v3-skin .col-4 { width: 33.333%; }
.v3-skin .col-3 { width: 25%; }

@media (min-width: 576px) {
  .v3-skin .col-sm-6 { width: 50%; }
  .v3-skin .col-sm-4 { width: 33.333%; }
}

@media (min-width: 768px) {
  .v3-skin .col-md { flex: 1 0 0%; }
  .v3-skin .col-md-3 { width: 25%; }
  .v3-skin .col-md-4 { width: 33.333%; }
  .v3-skin .col-md-5 { width: 41.666%; }
  .v3-skin .col-md-6 { width: 50%; }
  .v3-skin .col-md-7 { width: 58.333%; }
  .v3-skin .col-md-8 { width: 66.666%; }
  .v3-skin .col-md-12 { width: 100%; }
  .v3-skin .d-md-block { display: block; }
  .v3-skin .d-md-flex { display: flex; }
  .v3-skin .d-md-none { display: none; }
}

@media (min-width: 992px) {
  .v3-skin .col-lg { flex: 1 0 0%; }
  .v3-skin .col-lg-2 { width: 16.666%; }
  .v3-skin .col-lg-3 { width: 25%; }
  .v3-skin .col-lg-4 { width: 33.333%; }
  .v3-skin .col-lg-5 { width: 41.666%; }
  .v3-skin .col-lg-6 { width: 50%; }
  .v3-skin .col-lg-7 { width: 58.333%; }
  .v3-skin .col-lg-8 { width: 66.666%; }
  .v3-skin .col-lg-9 { width: 75%; }
  .v3-skin .col-lg-10 { width: 83.333%; }
  .v3-skin .col-lg-12 { width: 100%; }
  .v3-skin .d-lg-block { display: block; }
  .v3-skin .d-lg-flex { display: flex; }
  .v3-skin .d-lg-none { display: none; }
  .v3-skin .offset-lg-1 { margin-left: 8.333%; }
  .v3-skin .offset-lg-2 { margin-left: 16.666%; }
}

@media (min-width: 1200px) {
  .v3-skin .col-xl-3 { width: 25%; }
  .v3-skin .col-xl-4 { width: 33.333%; }
  .v3-skin .col-xl-6 { width: 50%; }
}

.v3-skin .justify-content-center { justify-content: center; }
.v3-skin .justify-content-between { justify-content: space-between; }
.v3-skin .justify-content-end { justify-content: flex-end; }
.v3-skin .align-items-center { align-items: center; }
.v3-skin .align-items-start { align-items: flex-start; }
.v3-skin .flex-wrap { flex-wrap: wrap; }
.v3-skin .flex-column { flex-direction: column; }
.v3-skin .d-flex { display: flex; }
.v3-skin .d-inline-flex { display: inline-flex; }
.v3-skin .d-grid { display: grid; }
.v3-skin .d-block { display: block; }
.v3-skin .d-inline-block { display: inline-block; }
.v3-skin .d-none { display: none; }
.v3-skin .gap-1 { gap: var(--sp-1); }
.v3-skin .gap-2 { gap: var(--sp-2); }
.v3-skin .gap-3 { gap: var(--sp-3); }
.v3-skin .gap-4 { gap: var(--sp-4); }
.v3-skin .gap-5 { gap: var(--sp-5); }
.v3-skin .g-3,
.v3-skin .g-4,
.v3-skin .g-5 { row-gap: var(--sp-5); }
.v3-skin .w-100 { width: 100%; }
.v3-skin .h-100 { height: 100%; }
.v3-skin .mx-auto { margin-inline: auto; }
.v3-skin .text-center { text-align: center; }
.v3-skin .text-start { text-align: left; }
.v3-skin .text-end { text-align: right; }

.v3-skin .text-center .lede,
.v3-skin .text-center > p {
  margin-inline: auto;
}

.v3-skin .mb-0 { margin-bottom: 0; }
.v3-skin .mb-1 { margin-bottom: var(--sp-1); }
.v3-skin .mb-2 { margin-bottom: var(--sp-2); }
.v3-skin .mb-3 { margin-bottom: var(--sp-3); }
.v3-skin .mb-4 { margin-bottom: var(--sp-5); }
.v3-skin .mb-5 { margin-bottom: var(--sp-7); }
.v3-skin .mt-0 { margin-top: 0; }
.v3-skin .mt-1 { margin-top: var(--sp-1); }
.v3-skin .mt-2 { margin-top: var(--sp-2); }
.v3-skin .mt-3 { margin-top: var(--sp-3); }
.v3-skin .mt-4 { margin-top: var(--sp-5); }
.v3-skin .mt-5 { margin-top: var(--sp-7); }
.v3-skin .my-3 { margin-block: var(--sp-3); }
.v3-skin .my-4 { margin-block: var(--sp-5); }
.v3-skin .my-5 { margin-block: var(--sp-7); }
.v3-skin .py-3 { padding-block: var(--sp-3); }
.v3-skin .py-4 { padding-block: var(--sp-5); }
.v3-skin .py-5 { padding-block: var(--sp-7); }
.v3-skin .p-3 { padding: var(--sp-3); }
.v3-skin .p-4 { padding: var(--sp-5); }

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

/* 2. components ------------------------------------------------------------ */

.v3-skin h1 {
  font-size: var(--step-5);
  line-height: 1.05;
  max-width: 22ch;
}

.v3-skin .text-center h1,
.v3-skin h1.text-center {
  margin-inline: auto;
}

.v3-skin h2 {
  font-size: var(--step-3);
  max-width: 32ch;
}

.v3-skin .text-center h2,
.v3-skin h2.text-center {
  margin-inline: auto;
}

.v3-skin h3 {
  font-size: var(--step-1);
}

.v3-skin h1 + p,
.v3-skin h2 + p,
.v3-skin h3 + p {
  margin-top: var(--sp-3);
}

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

.v3-skin p,
.v3-skin li {
  color: var(--ink-2);
}

.v3-skin strong,
.v3-skin b {
  color: var(--ink);
}

.v3-skin .lead,
.v3-skin .lede {
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 60ch;
}

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

.v3-skin .text-muted,
.v3-skin .text-secondary,
.v3-skin .opacity-75 {
  color: var(--ink-3);
}

.v3-skin .fw-bold,
.v3-skin .fw-semibold {
  font-weight: 700;
}

.v3-skin .list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.v3-skin ul:not([class]),
.v3-skin ol:not([class]) {
  padding-left: var(--sp-5);
}

.v3-skin img {
  max-width: 100%;
  height: auto;
}

/* Cards */
.v3-skin .card {
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
}

.v3-skin .card-body {
  padding: var(--sp-5);
}

.v3-skin .card-header,
.v3-skin .card-footer {
  padding: var(--sp-3) var(--sp-5);
  border-color: var(--line);
}

/* Buttons the old markup draws with Bootstrap or its own classes. */
.v3-skin .btn-primary,
.v3-skin .btn-success,
.v3-skin .btn-warning,
.v3-skin .btn-cyber-primary,
.v3-skin [class*="btn-cta"],
.v3-skin [class*="cta-primary"],
.v3-skin [class*="btn--primary"] {
  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;
  text-decoration: none;
}

.v3-skin .btn-outline-light,
.v3-skin .btn-outline-primary,
.v3-skin .btn-outline-secondary,
.v3-skin .btn-outline-warning,
.v3-skin .btn-secondary,
.v3-skin .btn-light,
.v3-skin .btn-dark,
.v3-skin [class*="btn-ghost"]:not([class*="ts2-"]),
.v3-skin [class*="btn--ghost"],
.v3-skin [class*="cta-secondary"],
.v3-skin [class*="btn--secondary"] {
  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-2-line);
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.v3-skin .btn-primary:hover,
.v3-skin .btn-success:hover,
.v3-skin .btn-cyber-primary:hover,
.v3-skin [class*="btn-cta"]:hover,
.v3-skin [class*="cta-primary"]:hover {
  background: color-mix(in srgb, var(--btn-bg) 86%, var(--ink));
  color: var(--btn-ink);
}

.v3-skin .btn-sm {
  min-height: 36px;
  padding-inline: var(--sp-3);
  font-size: var(--step--1);
}

.v3-skin .btn-lg {
  min-height: 52px;
}

.v3-skin .rounded-pill {
  border-radius: var(--radius-pill);
}

/* Badges and chips */
.v3-skin .badge,
.v3-skin [class*="__badge"],
.v3-skin [class*="-badge"],
.v3-skin [class*="__chip"],
.v3-skin [class*="-chip"]:not([class*="-chips"]),
.v3-skin [class*="-pill"]:not([class*="ts2-"]),
.v3-skin [class*="-tag"]:not(body) {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Accordions: every answer open, one under another. */
.v3-skin .accordion-item {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}

.v3-skin .accordion-header {
  margin: 0;
  font-size: var(--step-0);
}

.v3-skin .accordion-button {
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: default;
}

.v3-skin .accordion-collapse {
  display: block;
}

.v3-skin .accordion-body {
  margin-top: var(--sp-2);
  max-width: 70ch;
  color: var(--ink-2);
}

/* Tables */
.v3-skin table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

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

.v3-skin thead th {
  color: var(--ink-3);
  font-weight: 500;
}

.v3-skin .table-responsive {
  overflow-x: auto;
}

/* Forms the old pages draw */
.v3-skin .form-control,
.v3-skin .form-select {
  width: 100%;
}

.v3-skin .form-label {
  display: block;
  margin-bottom: var(--sp-1);
}

.v3-skin details > summary {
  cursor: pointer;
  font-weight: 600;
}

/* 3. the old theme's own families ------------------------------------------ */

/* Anything the old theme called a card or a panel. */
.v3-skin [class*="-card"]:not([class*="-card__"]):not([class*="-cards"]):not([class*="ts2-"]),
.v3-skin [class*="__card"]:not([class*="__card-"]),
.v3-skin [class*="-panel"]:not([class*="-panel__"]):not([class*="-panels"]),
.v3-skin [class*="-box"]:not([class*="-box__"]):not([class*="-boxes"]):not(input) {
  padding: var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
}

/* Anything it laid out as a grid of cards or items. */
.v3-skin [class*="-grid"]:not([class*="-grid__"]):not([class*="grid-bg"]):not([class*="ts2-"]),
.v3-skin [class*="__grid"],
.v3-skin [class*="-cards"],
.v3-skin [class*="-tiles"],
.v3-skin [class*="-steps"]:not(ol):not(ul):not([class*="ts2-"]),
.v3-skin [class*="-features"]:not(ul):not(ol) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

/* Headings and titles inside them. */
.v3-skin [class*="-title"]:not(h1):not(h2):not(title),
.v3-skin [class*="__title"]:not(h1):not(h2),
.v3-skin [class*="-name"]:not(input) {
  color: var(--ink);
  font-weight: 700;
}

.v3-skin [class*="-desc"],
.v3-skin [class*="__desc"],
.v3-skin [class*="-sub"]:not(sub):not([class*="-submit"]):not([class*="ts2-"]),
.v3-skin [class*="__sub"] {
  color: var(--ink-2);
}

/* The small label the old theme put over a heading: plain small text now. */
.v3-skin [class*="eyebrow"]:not([class*="ts2-"]),
.v3-skin [class*="kicker"],
.v3-skin [class*="-label"]:not(label):not([class*="-labels"]) {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--ink-3);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* Prices */
.v3-skin [class*="-price"]:not([class*="-prices"]):not([class*="-price__"]):not([class*="ts2-"]) {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Lists the old theme drew with ticks. */
.v3-skin [class*="-features"]:is(ul, ol),
.v3-skin [class*="-checklist"],
.v3-skin [class*="-list"]:is(ul, ol) {
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}

.v3-skin [class*="-features"]:is(ul, ol) > li,
.v3-skin [class*="-checklist"] > li,
.v3-skin [class*="-list"]:is(ul, ol) > li {
  position: relative;
  padding-left: var(--sp-5);
}

.v3-skin [class*="-features"]:is(ul, ol) > li + li,
.v3-skin [class*="-checklist"] > li + li,
.v3-skin [class*="-list"]:is(ul, ol) > li + li {
  margin-top: var(--sp-2);
}

.v3-skin [class*="-features"]:is(ul, ol) > li::before,
.v3-skin [class*="-checklist"] > li::before,
.v3-skin [class*="-list"]:is(ul, ol) > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 0.65em;
  height: 0.32em;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* Icons from a font this page no longer loads. */
.v3-skin i.bi,
.v3-skin i.fa,
.v3-skin i.fas,
.v3-skin i.fab,
.v3-skin i[class^="bi-"] {
  display: none;
}

/* Inline SVG icons keep a sensible size without their old CSS. */
.v3-skin svg:not([width]) {
  width: 1.25em;
  height: 1.25em;
}

.v3-skin svg {
  max-width: 100%;
  flex-shrink: 0;
}

/* 3b. the "ts2" families: the service pages (/dpf-removal/, /stage-1-remapping/
   ...), drawn on purpose rather than by the broad rules above (which now leave
   them alone). Same words, v3's rhythm: a page head, a stats row, cards,
   steps, the file grid, the questions, the TunerSuite band, the closing call. */

.v3-skin .ts2 {
  display: block;
}

/* The last section ends with its own padding: no more under it. */
main.v3-skin:has(> .ts2) {
  padding-bottom: 0;
}

main.v3-skin:has(> .ts2) + .v3-footer {
  margin-top: 0;
}

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

.v3-skin .ts2-wrap-narrow {
  max-width: calc(52rem + 2 * var(--gutter));
}

.v3-skin .ts2-glow,
.v3-skin .ts2-feature-card-icon {
  display: none;
}

.v3-skin .ts2-section-alt {
  background: var(--bg-sunk);
}

/* The page head. */
.v3-skin .ts2-page-header {
  padding-block: var(--sp-7) var(--sp-6);
}

.v3-skin .ts2-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  color: var(--ink-3);
  font-size: var(--step--1);
}

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

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

.v3-skin .ts2-page-header-inner {
  max-width: 52rem;
}

.v3-skin .ts2-eyebrow,
.v3-skin .ts2-mini-eyebrow {
  display: block;
  margin: 0 0 var(--sp-2);
  color: var(--ink-3);
  font-size: var(--step--1);
  font-weight: 500;
}

.v3-skin .ts2-page-header h1 {
  margin: 0;
  font-size: var(--step-5);
  line-height: var(--leading-tight);
}

.v3-skin .ts2-page-header-sub {
  max-width: 60ch;
  margin-top: var(--sp-4);
  color: var(--ink-2);
  font-size: var(--step-1);
}

.v3-skin .ts2-metric-pill {
  display: inline-block;
  margin-top: var(--sp-4);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.v3-skin .ts2-h2 em,
.v3-skin .ts2-page-header h1 em,
.v3-skin .ts2-cta-banner h2 em {
  color: var(--accent-ink);
  font-style: normal;
}

/* Buttons. */
.v3-skin .ts2-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.v3-skin .ts2-btn {
  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-2-line);
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.v3-skin .ts2-btn:hover {
  background: var(--bg-hover);
}

.v3-skin .ts2-btn-primary,
.v3-skin .ts2-btn-cyan {
  border-color: var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-ink);
}

.v3-skin .ts2-btn-primary:hover,
.v3-skin .ts2-btn-cyan:hover {
  background: color-mix(in srgb, var(--btn-bg) 86%, var(--ink));
  color: var(--btn-ink);
}

.v3-skin .ts2-btn-ghost {
  background: transparent;
}

/* The stats row. */
.v3-skin .ts2-trust {
  padding-block: var(--sp-5);
  border-block: 1px solid var(--line);
}

.v3-skin .ts2-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

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

.v3-skin .ts2-stat {
  display: grid;
  gap: 2px;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--line-strong);
}

.v3-skin .ts2-stat:first-child {
  border-left-color: var(--accent);
}

.v3-skin .ts2-stat-num {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1.1;
}

.v3-skin .ts2-stat-lbl {
  color: var(--ink-3);
  font-size: var(--step--1);
}

/* A section's heading. */
.v3-skin .ts2-section-head {
  max-width: 46rem;
  margin-bottom: var(--sp-6);
}

.v3-skin .ts2-h2 {
  margin: 0;
  font-size: var(--step-4);
  line-height: var(--leading-tight);
}

/* The long text. */
.v3-skin .ts2-wrap-narrow > .ts2-feature-card {
  padding: 0;
  border: 0;
  background: none;
}

.v3-skin .ts2-content {
  color: var(--ink-2);
  line-height: var(--leading-body);
}

.v3-skin .ts2-content h2 {
  margin: var(--sp-6) 0 var(--sp-3);
  color: var(--ink);
  font-size: var(--step-3);
}

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

.v3-skin .ts2-content ul {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  padding-left: 1.2em;
}

.v3-skin .ts2-content strong {
  color: var(--ink);
}

/* Cards. */
.v3-skin .ts2-feature-grid,
.v3-skin .ts2-step-flow {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 640px) {
  .v3-skin .ts2-feature-grid,
  .v3-skin .ts2-step-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .v3-skin .ts2-feature-grid.ts2-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .v3-skin .ts2-feature-grid.ts2-cols-4,
  .v3-skin .ts2-step-flow.ts2-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.v3-skin .ts2-feature-card,
.v3-skin .ts2-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
}

.v3-skin .ts2-feature-card h3,
.v3-skin .ts2-step h3 {
  margin: 0;
  font-size: var(--step-1);
}

.v3-skin .ts2-feature-card p,
.v3-skin .ts2-step p {
  margin: 0;
  color: var(--ink-2);
}

.v3-skin .ts2-step-num {
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

/* The file grid. */
.v3-skin .ts2-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--sp-3);
}

.v3-skin .ts2-service-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
  color: var(--ink);
  text-decoration: none;
}

.v3-skin .ts2-service-card:hover {
  border-color: var(--line-strong);
  background: var(--bg-hover);
}

.v3-skin .ts2-service-card h3 {
  margin: 0;
  font-size: var(--step-0);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.v3-skin .ts2-service-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.v3-skin .ts2-service-card-price {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.v3-skin .ts2-service-card-cta {
  color: var(--accent-ink);
  font-size: var(--step--1);
  font-weight: 600;
}

/* The questions. */
.v3-skin .ts2-faq-grid {
  display: grid;
  gap: var(--sp-2);
  max-width: 52rem;
}

.v3-skin .ts2-faq-grid details {
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
}

.v3-skin .ts2-faq-grid summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  list-style: none;
  cursor: pointer;
}

.v3-skin .ts2-faq-grid summary::-webkit-details-marker {
  display: none;
}

.v3-skin .ts2-faq-grid summary::after {
  content: "+";
  color: var(--ink-3);
  font-size: var(--step-1);
  line-height: 1;
}

.v3-skin .ts2-faq-grid details[open] summary::after {
  content: "\2212";
}

.v3-skin .ts2-faq-grid .tdb-faq-q {
  margin: 0;
  font-size: var(--step-0);
  font-weight: 600;
}

.v3-skin .ts2-faq-grid details > p {
  margin: 0;
  padding: 0 var(--sp-5) var(--sp-4);
  color: var(--ink-2);
}

/* The TunerSuite band. */
.v3-skin .ts2-xsell {
  border-block: 1px solid var(--line);
  background: var(--bg-sunk);
}

.v3-skin .ts2-xsell-grid {
  display: grid;
  align-items: center;
  gap: var(--sp-5);
}

@media (min-width: 900px) {
  .v3-skin .ts2-xsell-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

.v3-skin .ts2-xsell-h {
  margin: 0 0 var(--sp-2);
  font-size: var(--step-3);
}

.v3-skin .ts2-xsell-sub {
  color: var(--ink-2);
}

.v3-skin .ts2-xsell-cta {
  display: grid;
  justify-items: start;
  gap: var(--sp-2);
}

.v3-skin .ts2-xsell-tier {
  color: var(--ink-3);
  font-size: var(--step--1);
}

/* The closing call. */
.v3-skin .ts2-cta-banner {
  padding: var(--sp-7) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
  text-align: center;
}

.v3-skin .ts2-cta-banner h2 {
  margin: 0;
  font-size: var(--step-4);
}

.v3-skin .ts2-cta-banner p {
  max-width: 56ch;
  margin: var(--sp-3) auto 0;
  color: var(--ink-2);
}

.v3-skin .ts2-cta-banner .ts2-cta-row {
  justify-content: center;
}

/* The FAQ page's filter chips: wrapped, never wider than the phone. */
.v3-skin .tdbf-chipbar {
  max-width: 100%;
}

.v3-skin .tenq-chips,
.v3-skin .tdbf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* Its filter: the page's script marks what to hide and which chip is on. */
.v3-skin .tdbf-gone {
  display: none;
}

.v3-skin .tdbf-chip {
  cursor: pointer;
}

.v3-skin .tdbf-chip.is-on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* 3c. the services page's own "ts2-fs" families (/services/). */

.v3-skin .ts2-fs-step-icon,
.v3-skin .ts2-fs-svc-icon,
.v3-skin .ts2-fs-proof-dot {
  display: none;
}

/* The figures in its head. */
.v3-skin .ts2-fs-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

@media (min-width: 760px) {
  .v3-skin .ts2-fs-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.v3-skin .ts2-fs-stat {
  display: grid;
  gap: 2px;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--line-strong);
}

.v3-skin .ts2-fs-stat:first-child {
  border-left-color: var(--accent);
}

.v3-skin .ts2-fs-stat-num {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1.1;
}

.v3-skin .ts2-fs-stat-num small {
  color: var(--ink-3);
  font-size: var(--step--1);
}

.v3-skin .ts2-fs-stat-lbl {
  color: var(--ink-3);
  font-size: var(--step--1);
}

/* The four steps. */
.v3-skin .ts2-fs-steps {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 640px) {
  .v3-skin .ts2-fs-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .v3-skin .ts2-fs-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.v3-skin .ts2-fs-step {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
}

.v3-skin .ts2-fs-step-num {
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.v3-skin .ts2-fs-step h3 {
  margin: 0;
  font-size: var(--step-1);
}

.v3-skin .ts2-fs-step p {
  margin: 0;
  color: var(--ink-2);
}

/* The price list: each category a heading over rows of service and price. */
.v3-skin .ts2-fs-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-6);
}

.v3-skin .ts2-fs-svc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
  color: var(--ink);
  text-decoration: none;
}

.v3-skin .ts2-fs-svc:hover {
  border-color: var(--line-strong);
  background: var(--bg-hover);
}

.v3-skin .ts2-fs-svc-name {
  font-weight: 600;
}

.v3-skin .ts2-fs-svc-cat {
  color: var(--ink-3);
  font-size: var(--step--1);
}

.v3-skin .ts2-fs-svc-price {
  flex: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

/* The cars we tune most: a photo, the car, its Stage 1 power; each a page of its own. */
.v3-skin .ts2-fs-cars-h {
  margin: var(--sp-6) 0 var(--sp-3);
  color: var(--ink-3);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.v3-skin .ts2-fs-cars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v3-skin .ts2-fs-car {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
  color: var(--ink);
  text-decoration: none;
}

.v3-skin .ts2-fs-car:hover {
  border-color: var(--line-strong);
  background: var(--bg-hover);
}

.v3-skin .ts2-fs-car img {
  flex: none;
  width: 96px;
  height: 64px;
  border-radius: var(--radius-1);
  background: var(--paper-0);
  object-fit: cover;
}

.v3-skin .ts2-fs-car b,
.v3-skin .ts2-fs-car span span {
  display: block;
}

.v3-skin .ts2-fs-car span span {
  color: var(--ink-3);
  font-size: var(--step--1);
}

/* ECU families, makes and tools. */
.v3-skin .ts2-fs-ecu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--sp-2);
}

.v3-skin .ts2-fs-ecu-card {
  display: grid;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
}

.v3-skin .ts2-fs-ecu-family {
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 500;
}

.v3-skin .ts2-fs-ecu-count {
  color: var(--ink-3);
  font-size: var(--step--1);
}

.v3-skin .ts2-fs-makes,
.v3-skin .ts2-fs-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.v3-skin .ts2-fs-make-chip,
.v3-skin .ts2-fs-tool-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-size: var(--step--1);
}

.v3-skin .ts2-fs-make-chip strong {
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 500;
}

.v3-skin .ts2-note-inline {
  color: var(--ink-3);
}

/* Its closing call. */
.v3-skin .ts2-fs-cta-banner {
  padding: var(--sp-7) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
  text-align: center;
}

.v3-skin .ts2-fs-cta-banner h2 {
  margin: 0;
  font-size: var(--step-4);
}

.v3-skin .ts2-fs-cta-banner h2 em {
  color: var(--accent-ink);
  font-style: normal;
}

.v3-skin .ts2-fs-cta-banner p {
  max-width: 56ch;
  margin: var(--sp-3) auto 0;
  color: var(--ink-2);
}

.v3-skin .ts2-fs-cta-banner .ts2-cta-row {
  justify-content: center;
}

/* An element the old markup moved off-screen on purpose (a form's spam trap). */
.v3-skin [data-v3-offscreen] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 4. decoration from the old design ---------------------------------------- */

.v3-skin canvas:not(.v3-light),
.v3-skin [class*="glow"],
.v3-skin [class*="orb"]:not([class*="orbit"]),
.v3-skin [class*="particles"],
.v3-skin [class*="grid-bg"],
.v3-skin [class*="__bg"],
.v3-skin [class*="-bg"][aria-hidden="true"],
.v3-skin [class*="noise"],
.v3-skin [class*="aurora"],
.v3-skin [class*="__ruler"],
.v3-skin [class*="-blob"],
.v3-skin [class*="spotlight"],
.v3-skin [class*="scanline"] {
  display: none;
}