/* The landing page (`overrides/home.html`). Linked only there. */

/* The article and its sidebars are not the page here. (The previous/next
   band is hidden by `hide: footer` in the page's front matter.) */

.md-main__inner {
  margin: 0;
}
.md-content {
  display: none;
}
@media screen and (min-width: 60em) {
  .md-sidebar--secondary {
    display: none;
  }
}
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    display: none;
  }
}

/* The theme pads its article, not `.md-grid`; these sections use the grid
   directly, so they carry the same gutter the article has — 0.8rem, 1.2rem
   from the desktop breakpoint — or the text meets the edge on a phone. */
.sv-hero__inner,
.sv-stack__inner,
.sv-section > .md-grid {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

@media screen and (min-width: 76.25em) {
  .sv-hero__inner,
  .sv-stack__inner,
  .sv-section > .md-grid {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}

/* ---------------------------------------------------------------- hero */

/* Continues the header: white in the light scheme, near-black in the dark
   one. Outside `.md-typeset`, so the type is set here. */
.sv-hero {
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  padding: 2.8rem 0 3rem;
  font-family: var(--md-text-font-family, sans-serif);
  -webkit-font-smoothing: antialiased;
}

[data-md-color-scheme='slate'] .sv-hero {
  background: linear-gradient(to bottom, #1f1f1f, #2a2a2a);
  color: #ffffff;
}

.sv-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.4rem 3.2rem;
  align-items: center;
}

.sv-hero__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sv-accent-ink);
}

.sv-hero__title {
  margin: 0 0 0.8rem;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.sv-hero__text {
  max-width: 40ch;
  margin: 0 0 1.4rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--sv-muted);
}

[data-md-color-scheme='slate'] .sv-hero__text {
  color: rgba(255, 255, 255, 0.78);
}

.sv-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

/* Material buttons: one filled, one outlined. */
.sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.4rem;
  padding: 0 1.2rem;
  border: 1px solid transparent;
  border-radius: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 125ms, box-shadow 125ms, filter 125ms;
}

.sv-btn--filled {
  background: var(--md-accent-fg-color);
  border-color: var(--md-accent-fg-color);
  color: #fff;
}

.sv-btn--filled:hover {
  filter: brightness(1.08);
  box-shadow: 0 0.2rem 0.6rem rgba(25, 118, 210, 0.35);
}

.sv-btn--outlined {
  border-color: var(--md-default-fg-color--lighter);
  color: var(--md-default-fg-color);
}

.sv-btn--outlined:hover {
  background-color: var(--md-code-bg-color);
}

[data-md-color-scheme='slate'] .sv-btn--outlined {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

[data-md-color-scheme='slate'] .sv-btn--outlined:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.sv-btn:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

.sv-btn__icon {
  width: 1rem;
  height: 1rem;
}

.sv-btn__icon svg {
  width: 100%;
  height: 100%;
  fill: currentcolor;
}

/* The screenshots: one frame, stacked images, the active one visible. */
.sv-hero__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: var(--md-code-bg-color);
  box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.14);
}

[data-md-color-scheme='slate'] .sv-hero__frame {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1.6rem 3rem rgba(0, 0, 0, 0.5);
}

.sv-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 220ms ease;
}

.sv-hero__img--active {
  opacity: 1;
}

/* The tabs beneath: Material's segmented row, one active. */
.sv-hero__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.9rem;
}

.sv-hero__tab {
  min-height: 1.8rem;
  padding: 0 0.7rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  background: transparent;
  color: var(--sv-muted);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 125ms, color 125ms, border-color 125ms;
}

.sv-hero__tab:hover {
  background-color: var(--md-code-bg-color);
  color: var(--md-default-fg-color);
}

.sv-hero__tab--active,
.sv-hero__tab--active:hover {
  background-color: var(--md-accent-fg-color--transparent);
  border-color: transparent;
  color: var(--sv-accent-ink);
}

.sv-hero__tab:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

[data-md-color-scheme='slate'] .sv-hero__tab {
  color: rgba(255, 255, 255, 0.6);
}

[data-md-color-scheme='slate'] .sv-hero__tab:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}

[data-md-color-scheme='slate'] .sv-hero__tab--active,
[data-md-color-scheme='slate'] .sv-hero__tab--active:hover {
  background-color: rgba(100, 181, 246, 0.16);
  color: #64b5f6;
}

@media (prefers-reduced-motion: reduce) {
  .sv-hero__img {
    transition: none;
  }
}

/* ------------------------------------------------------------- sections */

.sv-section {
  padding: 3rem 0;
}

.sv-section--alt {
  background: var(--md-code-bg-color);
}

.sv-section h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
}

.sv-section__lead {
  max-width: 36rem;
  margin: 0 0 1.6rem;
  color: var(--sv-muted);
}

/* -------------------------------------------------------------- features */

/* No cards. A tonal square for the icon, the name, one line — three across,
   with room between them. Outside `.md-typeset`, so the type is set here. */
.sv-ft {
  font-family: var(--md-text-font-family, sans-serif);
  -webkit-font-smoothing: antialiased;
  color: var(--md-default-fg-color);
}

.sv-ft__head {
  max-width: 36rem;
  margin-bottom: 2.4rem;
}

.sv-ft__title {
  margin: 0 0 0.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
}

.sv-ft__lead {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--sv-muted);
}

.sv-ft__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem 3rem;
}

.sv-ft__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.9rem;
  border-radius: 0.6rem;
  background: var(--md-accent-fg-color--transparent);
  color: var(--sv-accent-ink);
}

.sv-ft__icon svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: currentcolor;
}

.sv-ft__name {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

.sv-ft__text {
  margin: 0;
  max-width: 34ch;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--sv-muted);
}

@media screen and (max-width: 76.1875em) {
  .sv-ft__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 44.9375em) {
  .sv-ft__grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
}

/* -------------------------------------------------------------- download */

/* Three cards, one button each. The visitor's card is the one with the
   filled button and the accent outline; the others are outlined, so there
   is one primary action on the screen. Outside `.md-typeset`. */
.sv-dl {
  font-family: var(--md-text-font-family, sans-serif);
  -webkit-font-smoothing: antialiased;
  color: var(--md-default-fg-color);
}

.sv-dl__head {
  max-width: 36rem;
  margin-bottom: 1.6rem;
}

.sv-dl__title {
  margin: 0 0 0.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
}

.sv-dl__lead {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--sv-muted);
}

.sv-dl__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem;
}

.sv-dl__card {
  display: flex;
  flex-direction: column;
  padding: 1.4rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
  background: var(--md-default-bg-color);
  transition: border-color 150ms, box-shadow 150ms;
}

.sv-dl__card--yours {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 0 0 1px var(--md-accent-fg-color);
}

.sv-dl__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.sv-dl__icon {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--md-default-fg-color);
}

.sv-dl__icon svg {
  width: 100%;
  height: 100%;
  fill: currentcolor;
}

/* The "your system" chip: Material's assist chip, in the accent. */
.sv-dl__yours {
  padding: 0.1rem 0.5rem;
  border-radius: 1rem;
  background: var(--md-accent-fg-color--transparent);
  color: var(--sv-accent-ink);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sv-dl__os {
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.sv-dl__note {
  margin: 0 0 1rem;
  font-size: 0.7rem;
  color: var(--sv-muted);
}

/* The button: outlined by default, filled on the visitor's card. */
.sv-dl__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.2rem;
  padding: 0 1rem;
  border: 1px solid var(--md-accent-fg-color);
  border-radius: 0.3rem;
  color: var(--sv-accent-ink);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 125ms, color 125ms, box-shadow 125ms;
}

.sv-dl__button:hover {
  background-color: var(--md-accent-fg-color--transparent);
}

.sv-dl__button:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

.sv-dl__card--yours .sv-dl__button {
  background-color: var(--md-accent-fg-color);
  color: #fff;
}

.sv-dl__card--yours .sv-dl__button:hover {
  box-shadow: 0 0.2rem 0.6rem rgba(25, 118, 210, 0.35);
}

.sv-dl__button-icon {
  width: 1rem;
  height: 1rem;
}

.sv-dl__button-icon svg {
  width: 100%;
  height: 100%;
  fill: currentcolor;
}

.sv-dl__others-label {
  margin: 1rem 0 0.3rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sv-muted);
}

.sv-dl__others {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
}

.sv-dl__others a {
  font-size: 0.72rem;
  color: var(--md-typeset-a-color);
  text-decoration: none;
}

.sv-dl__others a:hover {
  text-decoration: underline;
}

/* One line under the cards: version, integrity, the two links. */
.sv-dl__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0;
  margin: 1.2rem 0 0;
  font-size: 0.72rem;
  color: var(--sv-muted);
}

.sv-dl__meta > * + *::before {
  content: '·';
  margin: 0 0.5rem;
  color: var(--sv-muted);
}

.sv-dl__meta a {
  color: var(--md-typeset-a-color);
  text-decoration: none;
}

.sv-dl__meta a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------- compare */

/* A matrix on a surface: one card, dividers only, the row labels pinned
   while the columns scroll on a narrow screen, and StackVo's column tinted
   so the eye lands there. Outside `.md-typeset`, so the type is set here. */
.sv-compare {
  font-family: var(--md-text-font-family, sans-serif);
  -webkit-font-smoothing: antialiased;
  color: var(--md-default-fg-color);
}

.sv-compare__head {
  max-width: 36rem;
  margin-bottom: 1.6rem;
}

.sv-compare__title {
  margin: 0 0 0.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
}

.sv-compare__lead {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--sv-muted);
}

.sv-compare__surface {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  background: var(--md-default-bg-color);
  overflow: hidden;
}

.sv-compare__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sv-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  line-height: 1.4;
}

.sv-compare__table th,
.sv-compare__table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}

.sv-compare__table tbody tr:last-child th,
.sv-compare__table tbody tr:last-child td {
  border-bottom: 0;
}

.sv-compare__table thead th {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sv-muted);
}

/* The row label: left-aligned, and pinned while the rest scrolls. */
.sv-compare__label {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 13rem;
  background: var(--md-default-bg-color);
  text-align: left !important;
  font-weight: 500;
}

.sv-compare__table tbody tr:hover td,
.sv-compare__table tbody tr:hover th {
  background-color: var(--md-code-bg-color);
}

/* Our column: a tint, and the name in the accent. */
.sv-compare__table .sv-compare__us {
  background-color: var(--md-accent-fg-color--transparent);
}

.sv-compare__table thead .sv-compare__us {
  color: var(--sv-accent-ink);
  font-weight: 700;
  box-shadow: inset 0 2px 0 var(--md-accent-fg-color);
}

.sv-compare__table tbody tr:hover .sv-compare__us {
  background-color: var(--md-accent-fg-color--transparent);
}

/* Cells */
.sv-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.sv-cell svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentcolor;
}

.sv-cell--yes {
  color: var(--sv-accent-ink);
}

.sv-cell--partial {
  color: var(--sv-muted);
}

.sv-cell--no {
  color: var(--sv-muted);
}

[data-md-color-scheme='slate'] .sv-cell--no {
  color: rgba(255, 255, 255, 0.25);
}

.sv-cell__note {
  font-size: 0.65rem;
  color: var(--sv-muted);
}

.sv-cell--text {
  color: var(--md-default-fg-color);
}

.sv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Under the table: the legend on the left, the way to the full table on
   the right. */
.sv-compare__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.6rem;
  margin-top: 1rem;
}

.sv-compare__legend {
  display: flex;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.7rem;
  color: var(--sv-muted);
}

.sv-compare__legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.sv-compare__more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--md-typeset-a-color);
  text-decoration: none;
}

.sv-compare__more:hover {
  text-decoration: underline;
}

.sv-compare__arrow {
  width: 1rem;
  height: 1rem;
  transition: transform 150ms;
}

.sv-compare__arrow svg {
  width: 100%;
  height: 100%;
  fill: currentcolor;
}

.sv-compare__more:hover .sv-compare__arrow {
  transform: translateX(0.15rem);
}

/* --------------------------------------------------------------- pricing */

/* The price card and, beside it, what the price hides. Outside
   `.md-typeset`, so the type is set here. */
.sv-pricing {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 2.4rem 4rem;
  align-items: center;
  font-family: var(--md-text-font-family, sans-serif);
  -webkit-font-smoothing: antialiased;
  color: var(--md-default-fg-color);
}

/* Material's outlined card, with the accent on the top edge only. */
.sv-pricing__card {
  padding: 1.6rem 1.8rem 1.8rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-top: 3px solid var(--md-accent-fg-color);
  border-radius: 0.6rem;
  background: var(--md-default-bg-color);
}

.sv-pricing__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sv-muted);
}

.sv-pricing__price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 0.3rem;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--md-default-fg-color);
}

.sv-pricing__per {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--sv-muted);
}

.sv-pricing__title {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
}

.sv-pricing__text {
  margin: 0 0 1.2rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--sv-muted);
}

.sv-pricing__list {
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
}

.sv-pricing__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  line-height: 1.5;
}

.sv-pricing__check {
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  margin-top: 0.1rem;
  color: var(--sv-accent-ink);
}

.sv-pricing__check svg {
  width: 100%;
  height: 100%;
  fill: currentcolor;
}

.sv-pricing__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.2rem;
  padding: 0 1.2rem;
  border-radius: 0.3rem;
  background: var(--md-accent-fg-color);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow 125ms, filter 125ms;
}

.sv-pricing__button:hover {
  filter: brightness(1.08);
  box-shadow: 0 0.2rem 0.6rem rgba(25, 118, 210, 0.35);
}

.sv-pricing__button:focus-visible,
.sv-pricing__link:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

/* The facts: a row each, icon in a tonal square, title and one line. */
.sv-pricing__aside-title {
  margin: 0 0 1.2rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
}

.sv-pricing__facts {
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
}

.sv-pricing__facts li {
  display: flex;
  gap: 0.9rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.sv-pricing__facts li:last-child {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.sv-pricing__fact-icon {
  display: inline-flex;
  flex: 0 0 2rem;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: var(--md-code-bg-color);
  color: var(--sv-muted);
}

.sv-pricing__fact-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentcolor;
}

.sv-pricing__fact-body {
  display: block;
  min-width: 0;
}

.sv-pricing__fact-title {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
}

.sv-pricing__fact-text {
  display: block;
  max-width: 48ch;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--sv-muted);
}

.sv-pricing__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--md-typeset-a-color);
  text-decoration: none;
}

.sv-pricing__link:hover {
  text-decoration: underline;
}

.sv-pricing__link:hover .sv-compare__arrow {
  transform: translateX(0.15rem);
}

/* ------------------------------------------------------------------- faq */

/* Material's expansion list: one column, a divider between rows, a chevron
   that turns, the answer in the secondary colour. No boxes, no icons, no
   colour on the question — the colour is spent on the one thing that
   changes, the chevron of the open row. Outside `.md-typeset`, so the type
   is set here. */
.sv-faq {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 2rem 4rem;
  align-items: center;
  font-family: var(--md-text-font-family, sans-serif);
  -webkit-font-smoothing: antialiased;
  color: var(--md-default-fg-color);
}

.sv-faq__title {
  margin: 0 0 0.8rem;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.sv-faq__lead {
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sv-muted);
}

.sv-faq__list {
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.sv-faq__item {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.sv-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.8rem;
  padding: 0.7rem 0.4rem;
  margin: 0 -0.4rem;
  border-radius: 0.3rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  transition: background-color 125ms;
}

.sv-faq__question::-webkit-details-marker {
  display: none;
}

.sv-faq__question:hover {
  background-color: var(--md-default-fg-color--lightest);
}

.sv-faq__question:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: -2px;
}

.sv-faq__chevron {
  flex: 0 0 1.2rem;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--sv-muted);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), color 125ms;
}

.sv-faq__chevron svg {
  width: 100%;
  height: 100%;
  fill: currentcolor;
}

.sv-faq__item[open] .sv-faq__chevron {
  transform: rotate(180deg);
  color: var(--sv-accent-ink);
}

.sv-faq__answer {
  padding: 0 2.6rem 1rem 0;
  animation: sv-faq-open 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sv-faq__answer p {
  margin: 0;
  max-width: 60ch;
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--sv-muted);
}

@keyframes sv-faq-open {
  from {
    opacity: 0;
    transform: translateY(-0.2rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv-faq__chevron,
  .sv-faq__answer {
    transition: none;
    animation: none;
  }
}

.sv-faq__more {
  margin: 0;
  font-size: 0.8rem;
  color: var(--sv-muted);
}

.sv-faq__more a {
  color: var(--md-typeset-a-color);
  font-weight: 500;
  text-decoration: none;
}

.sv-faq__more a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 59.9375em) {
  .sv-pricing,
  .sv-faq {
    grid-template-columns: 1fr;
  }
  .sv-faq__title {
    font-size: 1.7rem;
  }
}

/* ------------------------------------------------------------ hero meta */

.sv-hero__meta {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  font-size: 0.7rem;
  color: var(--sv-muted);
}

.sv-hero__meta > * + *::before {
  content: '·';
  margin: 0 0.4rem;
}

[data-md-color-scheme='slate'] .sv-hero__meta {
  color: rgba(255, 255, 255, 0.6);
}

/* ----------------------------------------------------------------- stack */

/* What it runs. Outlined cards, one per category; each row an icon and a
   name in one colour. Outside `.md-typeset`, so the type is set here. */
.sv-stack {
  font-family: var(--md-text-font-family, sans-serif);
  -webkit-font-smoothing: antialiased;
  color: var(--md-default-fg-color);
}

.sv-stack__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1.6rem;
}

.sv-stack__title {
  margin: 0 0 0.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
}

.sv-stack__lead {
  max-width: 36rem;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--sv-muted);
}

.sv-stack__link {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--md-typeset-a-color);
  text-decoration: none;
  white-space: nowrap;
}

.sv-stack__link:hover {
  text-decoration: underline;
}

.sv-stack__link:hover .sv-compare__arrow {
  transform: translateX(0.15rem);
}

.sv-stack__cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
}

.sv-stack__card {
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
  background: var(--md-default-bg-color);
}

.sv-stack__group {
  margin: 0 0 0.8rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
}

.sv-stack__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-stack__items li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 1.7rem;
  font-size: 0.75rem;
  line-height: 1.3;
}

.sv-stack__mark {
  display: inline-flex;
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  color: var(--sv-muted);
}

.sv-stack__mark svg {
  width: 100%;
  height: 100%;
  fill: currentcolor;
}

.sv-stack__more {
  margin: 1rem 0 0;
  font-size: 0.72rem;
  color: var(--sv-muted);
}

@media screen and (max-width: 76.1875em) {
  .sv-stack__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 59.9375em) {
  .sv-stack__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .sv-stack__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 44.9375em) {
  .sv-stack__cards {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------- steps */

/* Material's vertical stepper: a disc with the number, a connector down to
   the next disc, the label and one supporting line. Outside `.md-typeset`,
   so the type is set here. */
.sv-steps {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 2.4rem 4rem;
  align-items: center;
  font-family: var(--md-text-font-family, sans-serif);
  -webkit-font-smoothing: antialiased;
  color: var(--md-default-fg-color);
}

.sv-steps__title {
  margin: 0 0 0.6rem;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.sv-steps__lead {
  margin: 0 0 1.6rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sv-muted);
}

.sv-stepper {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sv-stepper__step {
  position: relative;
  display: flex;
  gap: 1rem;
  padding-bottom: 1.6rem;
}

.sv-stepper__step:last-child {
  padding-bottom: 0;
}

/* The connector: from the bottom of this disc to the top of the next. */
.sv-stepper__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 0.7rem;
  top: 1.6rem;
  bottom: 0.2rem;
  width: 1px;
  background: var(--md-default-fg-color--lightest);
}

.sv-stepper__disc {
  flex: 0 0 1.4rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--md-accent-fg-color);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.4rem;
  text-align: center;
}

.sv-stepper__body {
  min-width: 0;
  padding-top: 0.1rem;
}

.sv-stepper__label {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

.sv-stepper__text {
  margin: 0;
  max-width: 44ch;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--sv-muted);
}

.sv-steps__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 1.6rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--md-typeset-a-color);
  text-decoration: none;
}

.sv-steps__cta:hover {
  text-decoration: underline;
}

.sv-steps__cta:hover .sv-compare__arrow {
  transform: translateX(0.15rem);
}

.sv-steps__shot {
  margin: 0;
}

.sv-steps__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.08);
}

.sv-steps__shot figcaption {
  margin-top: 0.6rem;
  font-size: 0.7rem;
  text-align: center;
  color: var(--sv-muted);
}

/* ------------------------------------------------------------------ more */

/* A list of links, three across: title, one line, the arrow. The whole row
   is the link; hover lifts it with the surface tint, not with colour.
   Outside `.md-typeset`, so the type is set here. */
.sv-more {
  font-family: var(--md-text-font-family, sans-serif);
  -webkit-font-smoothing: antialiased;
  color: var(--md-default-fg-color);
}

.sv-more__head {
  max-width: 36rem;
  margin-bottom: 1.6rem;
}

.sv-more__title {
  margin: 0 0 0.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
}

.sv-more__lead {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--sv-muted);
}

.sv-more__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.sv-more__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 125ms, border-color 125ms;
}

.sv-more__item:hover {
  background-color: var(--md-code-bg-color);
  border-color: var(--md-default-fg-color--lighter);
}

.sv-more__item:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

.sv-more__body {
  display: block;
  min-width: 0;
}

.sv-more__name {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
}

.sv-more__text {
  display: block;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--sv-muted);
}

.sv-more__arrow {
  flex: 0 0 1.1rem;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--sv-muted);
  transition: transform 150ms, color 150ms;
}

.sv-more__arrow svg {
  width: 100%;
  height: 100%;
  fill: currentcolor;
}

.sv-more__item:hover .sv-more__arrow {
  transform: translateX(0.15rem);
  color: var(--sv-accent-ink);
}

@media screen and (max-width: 76.1875em) {
  .sv-more__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 44.9375em) {
  .sv-more__grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------- sponsor */

/* In the page's own scheme — the surface tint the alternating sections
   use, so it reads as a section and not as a footer. Centred, one column
   of text, one filled button and one text link. */
.sv-sponsor {
  background: var(--md-code-bg-color);
  color: var(--md-default-fg-color);
  padding: 4rem 0;
  font-family: var(--md-text-font-family, sans-serif);
  -webkit-font-smoothing: antialiased;
}

.sv-sponsor__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 34rem;
  text-align: center;
}

/* The heart in a tonal circle, as Material sets an icon it wants noticed. */
.sv-sponsor__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  margin-bottom: 1.2rem;
  border-radius: 50%;
  background: rgba(233, 30, 99, 0.12);
  color: #e91e63;
}

[data-md-color-scheme='slate'] .sv-sponsor__icon {
  background: rgba(233, 30, 99, 0.16);
  color: #f06292;
}

.sv-sponsor__icon svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: currentcolor;
}

.sv-sponsor__eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sv-muted);
}

.sv-sponsor__title {
  margin: 0 0 0.8rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.sv-sponsor__text {
  margin: 0 0 1.6rem;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--sv-muted);
}

.sv-sponsor__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.4rem;
}

.sv-sponsor__button {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0 1.2rem;
  border-radius: 0.3rem;
  background: var(--md-accent-fg-color);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow 125ms, filter 125ms;
}

.sv-sponsor__button:hover {
  filter: brightness(1.08);
  box-shadow: 0 0.2rem 0.6rem rgba(25, 118, 210, 0.35);
}

.sv-sponsor__button:focus-visible,
.sv-sponsor__link:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

.sv-sponsor__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--md-typeset-a-color);
  text-decoration: none;
}

.sv-sponsor__link:hover {
  text-decoration: underline;
}

.sv-sponsor__link:hover .sv-compare__arrow {
  transform: translateX(0.15rem);
}

/* ---------------------------------------------------------------- narrow */

@media screen and (max-width: 59.9375em) {
  .sv-hero__inner,
  .sv-steps {
    grid-template-columns: 1fr;
  }
  .sv-hero__title,
  .sv-steps__title {
    font-size: 1.7rem;
  }
  /* The download meta line becomes a short list; the separators go. */
  .sv-dl .sv-dl__meta {
    flex-direction: column;
    gap: 0.3rem;
  }
  .sv-dl .sv-dl__meta > * + *::before {
    content: none;
    margin: 0;
  }
}

/* ---- accessibility: the other-format links are 24px targets */
.sv-dl__others a {
  display: inline-flex;
  align-items: center;
  min-height: 1.2rem;
  padding: 0.1rem 0.25rem;
  margin: -0.1rem -0.25rem;
}