/* The InfraRabbit design system, one stylesheet: the SAME white theme as every other page of the site (ir.css: white, near-black text, thin grey rules, one red accent used sparingly).
   A page opts in with <html class="ds"> and this file after style.css and ir.css. Tokens (--ds-*) are the palette and point at the ir.css values; the legacy names the shared chrome reads
   (--bg --fg --muted --line --accent) are left to ir.css. White only: no dark variant, no theme toggle (Levi, 12 Nov 2026: "keep the theme the same, white & minor red details").
   Text pairs are >= 4.5:1, graphics >= 3:1 (tests/test_vps_compare.py). No web fonts, no third-party requests, no inline styles (the site's CSP allows none). Components of the compare page are prefixed vc-. */
html.ds {
  --ds-page: #ffffff; --ds-surface: #ffffff; --ds-ink: #16181d; --ds-muted: #545b66; --ds-hair: #e3e5e8; --ds-ctl: #767676;
  --ds-accent: #b3121f; --ds-on-accent: #ffffff; --ds-tint: #f5f6f7; --ds-down: #15803d; --ds-up: #a15c07; --ds-hl: #e3e5e8; --ds-hl-ink: #16181d;
  --p0: #0b5fff; /* the home page's sparklines and bars only; the compare page uses no hue but the red */
  --ds-dot: #8a919b; --ds-g1: #16181d; --ds-g2: #5a616c; --ds-g3: #343a43;
  --ds-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
  color-scheme: light;
  background: var(--ds-page); color: var(--ds-ink);
}
html.ds > body { background: var(--ds-page); color: var(--ds-ink); }
html.ds a { text-decoration-color: var(--ds-accent); text-underline-offset: 2px; }
html.ds a:hover { color: var(--ds-accent); }
html.ds .ir-bar a, html.ds .module-header a { text-decoration: none; }
html.ds :focus-visible { outline: 3px solid var(--ds-accent); outline-offset: 2px; border-radius: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- the compare page: answer, overview, filter bar, plans, providers, chart, notes (in that order) */
.vc { font-variant-numeric: tabular-nums; padding-bottom: 8px; }
.vc a { color: var(--ds-ink); }
.vc h2 { font-size: 1.2rem; line-height: 1.3; margin: 0; }
.vc h3 { font-size: 1rem; margin: 18px 0 6px; }
.vc p, .vc li { max-width: 72ch; }
.vc-hint, .vc small, .vc .small { font-size: 14px; color: var(--ds-muted); }
.vc-answer { margin: 16px 0 8px; }
.vc-answer h1 { font-size: 1.4rem; line-height: 1.25; margin: 0 0 4px; max-width: 70ch; }
.vc-sub { font-size: 15px; color: var(--ds-muted); margin: 0; max-width: 80ch; }
.vc-unstated { font-size: 15px; color: var(--ds-ink); margin: 8px 0 0; max-width: 80ch; padding: 8px 12px; border: 1px solid var(--ds-ctl); border-radius: 8px; background: var(--ds-surface); }
.vc-lab { font-size: 13px; color: var(--ds-muted); margin: 0 4px 0 0; }
.vc .n { font-size: 14px; color: var(--ds-muted); font-weight: 400; }
.vc .unit { font-size: 13px; color: var(--ds-muted); font-weight: 400; }

/* overview strip */
.vc-strip { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; margin: 8px 0 0; border-top: 1px solid var(--ds-hair); border-bottom: 1px solid var(--ds-hair); }
.vc-strip > div { padding: 8px 14px 8px 0; min-width: 0; }
.vc-strip > div + div { padding-left: 14px; border-left: 1px solid var(--ds-hair); }
.vc-strip dt { font-size: 13px; color: var(--ds-muted); margin: 0 0 2px; }
.vc-strip dd { margin: 0; font-size: 14px; }
.vc-strip dd b.d { font-size: 16px; }
.vc-strip dd b { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.vc-strip dd small { display: block; font-size: 13px; overflow-wrap: anywhere; }
.vc-popular { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 8px 0 0; font-size: 13px; }
.vc-popular .vc-chip { min-height: 28px; font-size: 13px; padding: 0 10px; }
.vc-popular .vc-aside { font-size: 13px; color: var(--ds-muted); margin-left: 6px; }

/* the filter bar: sticky while the plans scroll (the wrapper .vc-list ends where the plans end) */
.vc-list { margin-top: 8px; }
.vc-filters { position: sticky; top: 0; z-index: 20; background: var(--ds-surface); border: 1px solid var(--ds-hair); border-bottom-color: var(--ds-ink); border-radius: 8px 8px 0 0; padding: 8px 12px 10px; }
.vc-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; }
.vc-x { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid var(--ds-ink); border-radius: 999px; background: var(--ds-tint); font-size: 14px; font-weight: 600; text-decoration: none !important; }
.vc-x span[aria-hidden] { color: var(--ds-accent); font-size: 12px; }
.vc-x:hover { border-color: var(--ds-accent); }
.vc-none { font-size: 14px; color: var(--ds-muted); }
.vc-resetlink { font-size: 13px; color: var(--ds-muted) !important; margin-left: 2px; }
.vc-sort { margin-left: auto; }
.vc-sort select { width: 10.5rem; }
.vc-countnote { font-size: 13px; color: var(--ds-muted); white-space: nowrap; }
.vc-count { margin-left: 4px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.vc-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.vc-form label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ds-muted); white-space: nowrap; }
.vc-form label:has(select) { gap: 0; }
.vc-form input[type="number"] { width: 4rem; min-height: 34px; padding: 0 8px; font: inherit; font-size: 15px; color: var(--ds-ink); background: var(--ds-surface); border: 1px solid var(--ds-ctl); border-radius: 6px; }
.vc-sort select, .vc-form select { min-height: 34px; padding: 0 8px; font: inherit; font-size: 14px; color: var(--ds-ink); background: var(--ds-surface); border: 1px solid var(--ds-ctl); border-radius: 6px; }
.vc-pop { position: relative; }
.vc-pop > summary { list-style: none; }
.vc-pop > summary::-webkit-details-marker, .vc-more-places > summary::-webkit-details-marker { display: none; }
.vc-drop { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 1px solid var(--ds-ctl); border-radius: 6px; font-size: 14px; cursor: pointer; user-select: none; }
.vc-drop::after { content: "\25BE"; font-size: 12px; color: var(--ds-muted); }
.vc-pop[open] > .vc-drop { border-color: var(--ds-ink); background: var(--ds-tint); }
.vc-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: min(520px, 90vw); padding: 12px 14px; background: var(--ds-surface); border: 1px solid var(--ds-ink); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.vc-q { font-size: 14px !important; font-weight: 600; margin: 0 0 6px !important; }
.vc-group { margin: 0 0 12px; }
.vc-group:last-child { margin-bottom: 0; }
.vc-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vc-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--ds-hair); border-radius: 999px; background: var(--ds-surface);
  color: var(--ds-ink) !important; font: inherit; font-size: 14px; line-height: 1.2; text-decoration: none !important; cursor: pointer; user-select: none; }
.vc-chip:hover { border-color: var(--ds-ink); }
.vc-chip .n, .vc-chip .sub { font-size: 13px; color: var(--ds-muted); }
.vc-chip.on { background: var(--ds-tint); border-color: var(--ds-ink); box-shadow: inset 0 0 0 1px var(--ds-ink); font-weight: 600; }
.vc-cur { font-size: 13px; color: var(--ds-muted); margin-left: 4px; }
.vc-more-places { flex: 1 1 100%; }
.vc-more-places > summary { list-style: none; display: inline-flex; }
.vc-more-places[open] > summary { margin-bottom: 6px; }
.vc-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 14px; max-height: 280px; overflow-y: auto; }
.vc-checks label { display: flex; align-items: center; gap: 6px; min-height: 30px; font-size: 14px; color: var(--ds-ink); white-space: normal; }
.vc-checks input { width: 16px; height: 16px; accent-color: var(--ds-accent); }
.vc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--ds-accent); background: var(--ds-accent);
  color: var(--ds-on-accent) !important; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none !important; cursor: pointer; }
.vc-btn.alt { background: var(--ds-surface); border-color: var(--ds-ctl); color: var(--ds-ink) !important; }
@media (min-width: 720px) { .vc-btn { min-height: 40px; } .vc-form .vc-btn { min-height: 34px; } }

/* plans and providers share one grammar: hairline rows, the price as the anchor on the right */
.vc-resulthead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0; padding: 14px 0 8px; }
.vc-resulthead h2 .n { margin-left: 6px; }
.vc-sortnote { margin: 0; font-size: 13px; color: var(--ds-muted); }
.vc-sortnote strong { font-weight: 400; }
.vc-results { scroll-margin-top: 200px; }
.vc-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; background: var(--ds-surface); }
.vc-table thead th { font-size: 13px; font-weight: 600; color: var(--ds-muted); text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--ds-ink); vertical-align: bottom; }
.vc-table td, .vc-table tbody th { padding: 10px 8px; border-bottom: 1px solid var(--ds-hair); vertical-align: top; text-align: left; font-weight: 400; overflow-wrap: break-word; }
.vc-table tbody tr:nth-child(even) > * { background: #fafafa; }
.vc-table .num, .vc-table td.pr, .vc-table td.pg { text-align: right; }
.vc-table .pl { width: 22%; }
.vc-plans .cpu { width: 5%; } .vc-plans .ram { width: 7%; } .vc-plans .dk { width: 8%; }
.vc-plans td.pr .unit { display: none; } .vc-plans .rg { width: 12%; } .vc-plans .pr { width: 12%; } .vc-plans .pg { width: 9%; } .vc-plans .vf { width: 18%; } .vc-plans .cm { width: 8%; }
.vc-provs .pl { width: 18%; } .vc-provs .pn { width: 19%; } .vc-provs .pr { width: 12%; } .vc-provs .ct { width: 8%; } .vc-provs .rn { width: 16%; } .vc-provs .vf { width: 15%; } .vc-provs .cm { width: 12%; }
.vc-provs td.pr .unit { display: none; }
.vc-table tbody th { white-space: normal; }
.vc-table .pv { display: block; font-size: 13px; color: var(--ds-muted); }
.vc-table .pvn { color: var(--ds-ink); font-size: 15px; font-weight: 600; }
.vc-table .pl a { font-weight: 600; font-size: 15px; }
.vc-table td small { display: block; font-size: 12.5px; line-height: 1.3; color: var(--ds-muted); }
.vc-table .none { color: var(--ds-muted); }
.vc-table td.pr .big { font-size: 18px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.vc-table td.pg { color: var(--ds-muted); white-space: nowrap; }
.vc-table .vf { font-size: 13px; color: var(--ds-muted); }
.vc-table td.vf { overflow-wrap: anywhere; }
.vc-table .stab.chg a { color: var(--ds-ink); }
.vc-sortlink { color: var(--ds-ink) !important; text-decoration: none !important; border-bottom: 1px dotted var(--ds-ctl); }
.vc-sortlink.on { border-bottom: 2px solid var(--ds-accent); }
.vc-sortlink span[aria-hidden] { color: var(--ds-accent); }
.vc-row, .vc-prow { scroll-margin-top: 200px; }
.vc-row.is-stale > *, .vc-prow.is-stale > * { color: var(--ds-muted); background: #fff !important; }
.vc-row.is-stale .pl a { color: var(--ds-muted); font-weight: 500; }
.vc-row.is-stale .old { font-style: italic; }
.vc-prow .why { font-size: 14px; }
.vc-badge { display: inline-block; padding: 0 8px; margin-left: 4px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; vertical-align: 1px; white-space: nowrap; }
.vc-badge.cheap, .vc-badge.pcheap { color: var(--ds-accent); border: 1px solid var(--ds-accent); background: var(--ds-surface); }
.vc-badge.value { color: var(--ds-ink); border: 1px solid var(--ds-ink); }
.vc-badge.spot { color: var(--ds-muted); border: 1px solid var(--ds-ctl); }
.vc-tag { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 12px; line-height: 1.6; color: var(--ds-muted); border: 1px solid var(--ds-ctl); white-space: nowrap; }
.vc-note { border: 1px solid var(--ds-hair); border-radius: 999px; padding: 0 6px; font-size: 12px; white-space: nowrap; }
.vc-plans .vc-pin .lab { display: none; }
.vc-pin { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--ds-ink) !important; text-decoration: none !important; font-size: 13px; cursor: pointer; }
.vc-pin .box { width: 18px; height: 18px; border: 2px solid var(--ds-muted); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--ds-surface); flex: none; }
.vc-pin:hover .box { border-color: var(--ds-ink); }
.vc-pin.on .box { background: var(--ds-accent); border-color: var(--ds-accent); }
.vc-pin.on .box::after { content: ""; width: 4px; height: 8px; border: solid var(--ds-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.vc-showlink { font-size: 13px; }
.vc-pager { max-width: none !important; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; color: var(--ds-muted); font-size: 14px; }
.vc-changelink { margin-left: auto; font-size: 14px; }
.vc-empty { padding: 16px; border: 1px solid var(--ds-hair); border-radius: 8px; }
.vc-old, .vc-grey { margin: 18px 0 0; border-top: 1px solid var(--ds-hair); }
.vc-old > summary, .vc-grey > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ds-muted); }
.vc-old .vc-table { margin-top: 4px; }
.vc-grey .vc-table td, .vc-grey .vc-table th { padding: 8px; }
.vc-prov { margin-top: 28px; scroll-margin-top: 200px; }
.vc-greyrows .pl { width: 22%; }

/* chart: pure SVG, grey dots, one bold red staircase, three provider markers in dark greys with different shapes */
.vc-explore { margin-top: 28px; }
.vc-chartbox { background: var(--ds-surface); border: 1px solid var(--ds-hair); border-radius: 8px; padding: 6px 6px 2px; }
.vc-chart { display: block; width: 100%; height: auto; }
.vc-narrow { display: none; }
.vc-chart .grid { stroke: var(--ds-hair); stroke-width: 1; }
.vc-chart .tick { fill: var(--ds-muted); font-size: 13px; }
.vc-chart .axis { fill: var(--ds-ink); font-size: 13px; }
.vc-chart .dots { fill: none; stroke: var(--ds-dot); stroke-width: 6; stroke-linecap: round; opacity: .7; }
.vc-chart .hl path { stroke: #fff; stroke-width: 1; }
.vc-chart .hl.circle path { fill: var(--ds-g1); }
.vc-chart .hl.square path { fill: var(--ds-g2); }
.vc-chart .hl.triangle path { fill: var(--ds-g3); }
.vc-chart .front { fill: none; stroke: var(--ds-accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.vc-chart .fp { fill: var(--ds-accent); stroke: #fff; stroke-width: 2; }
.vc-chart a:hover .fp, .vc-chart a:focus .fp { stroke: var(--ds-ink); }
.vc-chart .lbl { fill: var(--ds-ink); font-size: 13px; font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.vc-narrow .tick, .vc-narrow .axis, .vc-narrow .lbl { font-size: 12px; }
.vc-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; margin: 0; font-size: 13px; color: var(--ds-ink); }
.vc-legend .sw { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.vc-legend .sw.line { width: 20px; height: 0; border-top: 3px solid var(--ds-accent); vertical-align: 3px; }
.vc-legend .sw.dot { border-radius: 50%; background: var(--ds-dot); opacity: .8; }
.vc-legend .sw.circle { border-radius: 50%; background: var(--ds-g1); }
.vc-legend .sw.square { background: var(--ds-g2); }
.vc-legend .sw.triangle { background: var(--ds-g3); clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 13px; height: 12px; }
.vc-caption { margin: 8px 0 0; font-size: 15px; max-width: 90ch; }

/* compare tray: ticked plans side by side, specs as rows, plans as columns; a row that differs is bold */
.vc-tray { position: sticky; bottom: 0; z-index: 15; margin: 18px 0 0; background: var(--ds-surface); border: 1px solid var(--ds-ink); border-radius: 8px 8px 0 0; max-height: 50vh; overflow: auto; scroll-margin-top: 200px; }
.vc-tray > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 14px; font-weight: 600; list-style: none; }
.vc-tray > summary::-webkit-details-marker { display: none; }
.vc-tray > summary::before { content: "\25BE"; margin-right: 8px; }
.vc-tray:not([open]) > summary::before { content: "\25B8"; }
.vc-traybody { padding: 0 14px 12px; overflow-x: auto; }
.vc-cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
.vc-cmp th, .vc-cmp td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--ds-hair); vertical-align: top; font-weight: 400; min-width: 7.5rem; overflow-wrap: anywhere; }
.vc-cmp thead th { font-weight: 600; font-size: 15px; border-bottom-color: var(--ds-ink); }
.vc-cmp tbody th { color: var(--ds-muted); white-space: nowrap; min-width: 6.5rem; position: sticky; left: 0; background: var(--ds-surface); }
.vc-cmp td b { font-weight: 700; }
.vc-cmp td.best { background: var(--ds-tint); }
.vc-best { font-size: 11px; font-weight: 600; color: var(--ds-ink); border: 1px solid var(--ds-ink); border-radius: 999px; padding: 0 6px; margin-left: 4px; text-transform: uppercase; letter-spacing: .03em; }

/* use this data, notes */
.vc-use, .vc-honest { margin-top: 32px; }
.vc-use h2, .vc-honest h2 { margin-bottom: 8px; }
.vc-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 10px 0 8px; }
.vc-box { min-width: 0; margin: 0 0 12px; }
.vc-box label { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ds-ink); margin: 0 0 4px; }
.vc-box textarea { display: block; width: 100%; box-sizing: border-box; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ds-ink); background: var(--ds-surface);
  border: 1px solid var(--ds-hair); border-radius: 8px; padding: 10px 12px; resize: vertical; overflow-wrap: anywhere; }
.vc-honest { border-top: 1px solid var(--ds-hair); padding-top: 4px; font-size: 14px; }
.vc-honest p { margin: 0 0 10px; }

/* phones: the filter bar is not sticky, the plans and providers are cards with the price top right, the chart is the tall narrow drawing */
@media (max-width: 719px) {
  .vc-answer h1 { font-size: 1.15rem; }
  .vc-sub { font-size: 14px; }
  .vc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-strip > div { padding: 6px 8px 6px 0; }
  .vc-strip > div + div { padding-left: 10px; }
  .vc-strip > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .vc-strip > div:nth-child(n+3) { border-top: 1px solid var(--ds-hair); }
  .vc-strip dd b { font-size: 16px; }
  .vc-strip dd b.d { font-size: 14px; }
  .vc-strip dd small { display: none; }
  .vc-strip > div:first-child dd small { display: block; }
  .vc-popular { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .vc-popular > * { flex: none; }
  .vc-filters { position: static; border-radius: 8px; padding: 8px 10px 10px; }
  .vc-count { margin-left: 0; flex: 1 1 40%; font-size: 13px; }
  .vc-sort { margin-left: 0; flex: 1 1 45%; order: 2; }
  .vc-active { gap: 6px; }
  .vc-form { gap: 6px 8px; }
  .vc-form label { flex-direction: column; align-items: flex-start; gap: 2px; flex: 1 1 20%; font-size: 12px; }
  .vc-form input[type="number"] { width: 100%; box-sizing: border-box; }
  .vc-pop { flex: 1 1 28%; }
  .vc-drop { font-size: 13px; padding: 0 8px; width: 100%; box-sizing: border-box; justify-content: space-between; }
  .vc-pop[open] { flex-basis: 100%; }
  .vc-panel { position: static; width: auto; box-shadow: none; margin-top: 6px; }
  .vc-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-sort select { width: 100%; }
  .vc-form .vc-btn { flex: 1 1 100%; }
  .vc-boxes { grid-template-columns: minmax(0, 1fr); }
  .vc-table, .vc-table tbody, .vc-table td, .vc-table tbody th { display: block; width: auto; }
  .vc-table { background: transparent; }
  .vc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vc-table tbody tr > * { background: transparent !important; }
  .vc-row, .vc-prow { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 8.6rem 10px 2px; min-height: 4.2rem; border-bottom: 1px solid var(--ds-hair); }
  .vc-table td, .vc-table tbody th { border: 0 !important; padding: 0 !important; }
  .vc-table .pl { flex: 1 1 100%; width: auto; min-width: 0; max-width: 100%; box-sizing: border-box; }
  .vc-table td.pr { position: absolute; top: 10px; right: 2px; width: 8.2rem; text-align: right; }
  .vc-table .cpu, .vc-table .ram, .vc-table .dk, .vc-table .rg, .vc-table td.pg, .vc-table .pn, .vc-table .ct, .vc-table .rn { flex: none; width: auto; text-align: left; }
  .vc-table .vf { flex: 1 1 100%; width: auto; margin-top: 2px; order: 4; }
  .vc-table .cm { position: absolute; right: 2px; bottom: 8px; width: auto; }
  .vc-plans .vc-pin .lab { display: inline; }
  .vc-table .pl { overflow-wrap: anywhere; }
  .vc-table .pn { flex: 1 1 100%; }
  .vc-plans .cpu::after { content: " vCPU"; color: var(--ds-muted); }
  .vc-plans .dk small { display: inline; } .vc-plans .dk small::before { content: " · "; }
  .vc-plans .pg::after { content: " per GB RAM"; }
  .vc-provs .ct::after { content: " matching plans"; color: var(--ds-muted); } .vc-provs .rn::before { content: "range "; color: var(--ds-muted); }
  .vc-greyrows tr { display: block; padding: 8px 2px; border-bottom: 1px solid var(--ds-hair); }
  .vc-table td.pr .big { font-size: 20px; }
  .vc-plans td.pr .unit, .vc-provs td.pr .unit { display: block; }
  .vc-table .pl a { font-size: 16px; }
  .vc-wide { display: none; }
  .vc-narrow { display: block; }
  .vc-results, .vc-row, .vc-prow, .vc-prov, .vc-tray { scroll-margin-top: 8px; }
  .vc-changelink { margin-left: 0; }
}
@media (min-width: 720px) and (max-width: 959px) { .vc-boxes { grid-template-columns: minmax(0, 1fr); } .vc-strip dd b { font-size: 17px; } .vc-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { html.ds * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---- shared header and footer of every page on the design system (templates/_ds/) */
html.ds .ds-head { display: block; gap: 0; position: static; background: var(--ds-page); border-bottom: 1px solid var(--ds-hair); padding: 0 16px; margin: 0 -16px; }
body.wide .ds-head { margin: 0 -32px; padding: 0 32px; } body.wide .ds-nav { max-width: none; }
.ds-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; max-width: 1080px; margin: 0 auto; min-height: 52px; }
.ds-nav a { color: var(--ds-ink); font-size: .95rem; padding: 10px 0; text-decoration: none; }
.ds-nav a:hover { color: var(--ds-accent); }
.ds-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ds-accent); }
.ds-nav .ds-brand { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; padding: 8px 0; }
.ds-logo { width: 34px; height: 34px; flex: none; }
.ds-foot { margin-top: 32px; padding: 14px 0 24px; border-top: 1px solid var(--ds-hair); font-size: .9rem; color: var(--ds-muted); }
.ds-foot p { max-width: 72ch; margin: 0 0 10px; }
.ds-foot a { color: var(--ds-muted); }
.ds-foot a:hover { color: var(--ds-accent); }
.ds-foot-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 12px; }
.ds-foot-nav a { padding: 6px 0; }
.ds-asof { white-space: nowrap; }
@media (max-width: 560px) { .ds-nav { gap: 0 14px; } .ds-nav .ds-brand { flex-basis: 100%; } .ds-nav a { font-size: .92rem; padding: 6px 0; } body.wide .ds-head { margin: 0 -16px; padding: 0 16px; } }

/* ---- the home page (/) and the prices home (/prices/): hero, lookup, doors, boards. Same tokens, white only; no script, no inline style. */
.dh, .dp { font-variant-numeric: tabular-nums; }
.dh a, .dp a { color: var(--ds-ink); }
.dh h2, .dp h2 { font-size: 1.2rem; line-height: 1.3; margin: 40px 0 10px; }
.dh h3, .dp h3 { font-size: 1rem; margin: 18px 0 6px; }
.dh p, .dp p, .dh li, .dp li { max-width: 72ch; }
.dh .small, .dp .small, .dp .muted, .dh .muted { font-size: 14px; color: var(--ds-muted); }
.dh .bad, .dp .bad { color: var(--ds-muted); font-style: italic; }
.dh .up, .dp .up { color: var(--ds-up); }
.dh .down, .dp .down { color: var(--ds-down); }
.ds-hero { margin: 32px 0 8px; }
.ds-kicker { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-muted); margin: 0 0 8px; }
.ds-hero h1 { font-size: 2rem; line-height: 1.25; margin: 0 0 12px; max-width: 24ch; }
.ds-hero-prices h1 { font-size: 1.6rem; margin-bottom: 6px; max-width: none; }
.ds-lead { font-size: 18px; margin: 0 0 12px; max-width: 60ch; }
.ds-asof-line { font-size: 14px; color: var(--ds-muted); margin: 0 0 18px; max-width: 72ch; }
.ds-lookup { background: var(--ds-surface); border: 1px solid var(--ds-hair); border-radius: 14px; padding: 14px 16px 12px; max-width: 760px; }
.ds-tabradio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ds-tablist { display: flex; gap: 6px; margin: 0 0 12px; border-bottom: 1px solid var(--ds-hair); }
.ds-tablist label { cursor: pointer; padding: 10px 14px; font-size: 16px; color: var(--ds-muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.ds-tablist label:hover { color: var(--ds-ink); }
#ds-tab-site:checked ~ .ds-tablist label[for="ds-tab-site"], #ds-tab-price:checked ~ .ds-tablist label[for="ds-tab-price"] { color: var(--ds-ink); font-weight: 600; border-bottom-color: var(--ds-accent); }
#ds-tab-site:focus-visible ~ .ds-tablist label[for="ds-tab-site"], #ds-tab-price:focus-visible ~ .ds-tablist label[for="ds-tab-price"] { outline: 3px solid var(--ds-accent); outline-offset: 2px; border-radius: 6px; }
.ds-tabradio ~ .ds-panel { display: none; }
#ds-tab-site:checked ~ .ds-panel-site, #ds-tab-price:checked ~ .ds-panel-price { display: flex; }
.ds-panel { flex-wrap: wrap; gap: 10px; align-items: center; }
.ds-panel input[type="text"], .ds-panel input[type="search"] { flex: 1 1 260px; min-height: 48px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--ds-ink); background: var(--ds-page); border: 1px solid var(--ds-ctl); border-radius: 10px; }
.ds-panel button { min-height: 48px; padding: 0 22px; font: inherit; font-size: 16px; font-weight: 600; color: var(--ds-on-accent); background: var(--ds-accent); border: 1px solid var(--ds-accent); border-radius: 10px; cursor: pointer; }
.ds-panel button:hover { filter: brightness(.92); }
.ds-hint { flex: 1 1 100%; margin: 0; font-size: 14px; color: var(--ds-muted); }
.ds-search { display: flex; max-width: 640px; margin: 8px 0 10px; }

.ds-doors { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 28px 0 0; }
.ds-door { background: var(--ds-surface); border: 1px solid var(--ds-hair); border-radius: 14px; padding: 18px 20px 16px; display: flex; flex-direction: column; min-width: 0; }
.dh .ds-door h2 { font-size: 1.2rem; margin: 0 0 10px; }
.ds-door h2 a { color: var(--ds-ink); text-decoration: none; }
.ds-door h2 a:hover { color: var(--ds-accent); text-decoration: underline; }
.ds-door p { margin: 0 0 10px; }
.ds-door-big { font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.ds-door-big span { font-size: 16px; font-weight: 400; color: var(--ds-muted); letter-spacing: 0; }
.ds-src { font-size: 14px; color: var(--ds-muted); }
.ds-go { margin-top: auto !important; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.ds-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 16px; font-weight: 600; border: 1px solid var(--ds-ctl); border-radius: 10px; color: var(--ds-ink) !important; text-decoration: none !important; background: var(--ds-surface); }
.ds-btn:first-child { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-on-accent) !important; }
.ds-btn:hover { filter: brightness(.92); }
.ds-chip { display: inline-block; font-size: 12px; padding: 1px 8px; border: 1px solid var(--ds-ctl); border-radius: 999px; color: var(--ds-muted); background: var(--ds-surface); }
.ds-chip.ok { color: var(--ds-ink); border-color: var(--ds-ink); }
.ds-links { margin: 0 0 12px; padding-left: 18px; font-size: 15px; }
.ds-links li { margin: 0 0 4px; }
.ds-nums { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 12px; }
.ds-num { border-top: 1px solid var(--ds-hair); padding-top: 10px; }
.ds-num:first-child { border-top: 0; padding-top: 0; }
.ds-num p { margin: 0 0 2px; }
.ds-num-l, .ds-num-l a { font-size: 14px; color: var(--ds-muted) !important; text-decoration: none; }
.ds-num-v { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.ds-num-v span { font-size: 14px; font-weight: 400; color: var(--ds-muted); }
.ds-num-v.none { color: var(--ds-muted); }
.ds-note { font-size: 14px; color: var(--ds-muted); margin: 12px 0 0; max-width: 72ch; }
.ds-note.bad { color: var(--ds-muted); font-style: italic; }

.ds-changes ol { list-style: none; margin: 0 0 8px; padding: 0; }
.ds-changes li { padding: 10px 0; border-bottom: 1px solid var(--ds-hair); font-size: 17px; }
.ds-trust { margin: 40px 0 0; padding: 18px 20px; background: var(--ds-tint); border-radius: 14px; }
.ds-trust ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-weight: 600; }
.ds-trust ul li::before { content: "\2713\00a0"; color: var(--ds-ink); }
.ds-trust p { margin: 0; font-size: 15px; }
.ds-trust a { color: var(--ds-ink); }

.ds-counter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin: 18px 0 0; }
.ds-counter dt { color: var(--ds-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.ds-counter dd { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; }
.ds-counter dd.s { font-size: 13px; font-weight: 400; color: var(--ds-muted); line-height: 1.35; }
.ds-counter dd a { color: var(--ds-ink); }
.ds-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 8px; }
.ds-tile { background: var(--ds-surface); border: 1px solid var(--ds-hair); border-radius: 12px; padding: 12px 14px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-tl { font-size: 14px; margin: 0; color: var(--ds-muted); line-height: 1.3; }
.ds-tl a { color: var(--ds-muted) !important; text-decoration: none; }
.ds-tl a:hover { text-decoration: underline; }
.ds-tv { font-size: 24px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.ds-tv.none { color: var(--ds-muted); }
.ds-tm { font-size: 13px; color: var(--ds-muted); margin: 0; line-height: 1.4; }
.ds-tm.bad { color: var(--ds-muted); font-style: italic; }
html.ds svg.spark .sl { stroke: var(--p0); }
html.ds svg.spark .sd { fill: var(--p0); }
.ds-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin: 0 0 8px; }
.ds-cols section { min-width: 0; }
.ds-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; }
.ds-card { background: var(--ds-surface); border: 1px solid var(--ds-hair); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.dp .ds-card h3 { margin: 0 0 2px; }
.ds-card p { margin: 4px 0 0; }
.ds-card-v { font-size: 24px; font-weight: 700; }
.ds-card-v span { font-size: 14px; font-weight: 400; color: var(--ds-muted); }
.ds-pop { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; }
.ds-pop ul { margin: 4px 0 0; padding-left: 18px; }
.ds-boards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 10px 0 0; }
.ds-boards > section { min-width: 0; }
.ds-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ds-chart { margin: 0; min-width: 0; }
.ds-chart figcaption p, .ds-chart p { margin: 2px 0; }
.ds-chart h2 { margin: 0 0 4px; font-size: 1.2rem; }
.ds-chart svg.chart { max-width: 100%; height: auto; margin: 4px 0; }
.ds-chart ul.legend { margin: 0 0 4px; }
.ds-big { font-size: 22px; font-weight: 700; }
.ds-big .small { font-weight: 400; }
/* a chart panel: the page is white already, so it only gets the rule and the radius */
.ds-paper { border: 1px solid var(--ds-hair); border-radius: 12px; padding: 12px 14px; }
ol.ds-feed, ol.ds-board { list-style: none; margin: 0 0 10px; padding: 0; }
ol.ds-feed li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--ds-hair); align-items: baseline; }
.ds-feed time { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--ds-muted); white-space: nowrap; }
.ds-feed .ds-src, .ds-board .ds-src { display: block; overflow-wrap: anywhere; }
ol.ds-board li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--ds-hair); align-items: baseline; }
ol.ds-board li svg.bar { grid-column: 1 / -1; width: 100%; height: 6px; }
ol.ds-board li svg.bar rect { fill: var(--p0); }
.ds-pct { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-heat th, .ds-heat td { padding: 8px 10px; vertical-align: top; }
.ds-heat td.h0 { background: transparent; }
.ds-heat td { background: var(--ds-tint); }
.ds-heat td a { color: var(--ds-ink); text-decoration: none; display: block; }
.ds-heat td .s { font-size: 12px; color: var(--ds-muted); }
.ds-heat td.hu1 { background: #fdeee2; } .ds-heat td.hu2 { background: #fbd9bf; } .ds-heat td.hu3 { background: #f7bd93; }
.ds-heat td.hd1 { background: #e3f3ea; } .ds-heat td.hd2 { background: #c5e8d4; } .ds-heat td.hd3 { background: #a1d9ba; }
.ds-heat td.h0 { background: transparent; }
@media (min-width: 720px) {
  .ds-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .ds-counter { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ds-cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 36px; }
  .ds-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) { .ds-hero h1 { font-size: 1.6rem; } .ds-door-big { font-size: 30px; } }

/* ---- /prices/changes?since= */
.vc-steppers input[type="date"] { width: 11rem; }
.vc-month { margin: 32px 0 10px; }
.vc-month .n { font-size: 16px; font-weight: 400; color: var(--ds-muted); margin-left: 6px; }

/* ---- /vps/plans: the plans table, the one filter form, the bar chart (classes prefixed pl-; the filter chips, buttons and chart box are the vc- ones above) */
.pl-presets { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 10px 0 0; }
.pl-presets .vc-chip { min-height: 28px; font-size: 14px; padding: 0 10px; }
.pl-filters { border: 1px solid var(--ds-hair); border-bottom-color: var(--ds-ink); border-radius: 8px 8px 0 0; padding: 10px 12px 12px; margin: 12px 0 0; background: var(--ds-surface); }
.pl-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.pl-form label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ds-muted); }
.pl-form input[type="number"] { width: 6rem; box-sizing: border-box; min-height: 36px; padding: 0 8px; font: inherit; font-size: 15px; color: var(--ds-ink); background: var(--ds-surface); border: 1px solid var(--ds-ctl); border-radius: 6px; }
.pl-form select { min-height: 36px; max-width: 100%; padding: 0 8px; font: inherit; font-size: 15px; color: var(--ds-ink); background: var(--ds-surface); border: 1px solid var(--ds-ctl); border-radius: 6px; }
.pl-form .vc-checks label { flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: var(--ds-ink); }
.pl-table td, .pl-table th { white-space: nowrap; }
.pl-table td.name { white-space: normal; min-width: 8rem; }
.pl-form fieldset { flex: 1 1 100%; border: 0; margin: 0; padding: 0; min-width: 0; }
.pl-form legend { font-size: 13px; color: var(--ds-muted); padding: 0; margin: 0 0 3px; }
.pl-form .vc-btn { min-height: 36px; }
.pl-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0; }
.pl-count { margin: 10px 0 0; font-size: 17px; font-weight: 600; }
.pl-note { margin: 6px 0 0; font-size: 14px; color: var(--ds-ink); max-width: 80ch; }
.pl-related { margin: 8px 0 0; padding-left: 18px; max-width: 80ch; font-size: 15px; }
.pl-related li { margin: 5px 0; }
.pl-related .n { color: var(--ds-muted); font-size: 13px; display: block; }
.pl-tablewrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--ds-ink); margin: 10px 0 0; }
.pl-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 14px; background: var(--ds-surface); font-variant-numeric: tabular-nums; }
.pl-table caption { text-align: left; }
.pl-table th, .pl-table td { padding: 9px 8px; border-bottom: 1px solid var(--ds-hair); text-align: left; vertical-align: top; font-weight: 400; }
.pl-table thead th { font-size: 13px; font-weight: 600; color: var(--ds-muted); border-bottom-color: var(--ds-ink); vertical-align: bottom; }
.pl-table tbody tr:nth-child(even) > * { background: #fafafa; }
.pl-table .num { text-align: right; white-space: nowrap; }
.pl-table td.name a { font-weight: 600; }
.pl-table td.price b { font-size: 16px; }
.pl-table .none { color: var(--ds-muted); }
.pl-table small { display: block; font-size: 12.5px; color: var(--ds-muted); }
.pl-tag { display: inline-block; padding: 0 8px; border: 1px solid var(--ds-ctl); border-radius: 999px; font-size: 12.5px; color: var(--ds-ink); white-space: nowrap; }
.pl-section { margin-top: 28px; }
.pl-chart .grid { stroke: var(--ds-hair); stroke-width: 1; }
.pl-chart .tick, .pl-chart .axis { fill: var(--ds-ink); font-size: 13px; }
.pl-chart .tick { fill: var(--ds-muted); }
.pl-chart .lbl { fill: var(--ds-ink); font-size: 14px; font-weight: 700; }
.pl-chart .end { fill: var(--ds-ink); font-size: 14px; }
@media (max-width: 719px) {
  .pl-form label { min-width: 0; }
  .pl-form select { width: 100%; }
  .pl-form label, .pl-form select { flex: 1 1 40%; }
  .pl-form input[type="number"] { width: 100%; }
  .pl-form .vc-btn { flex: 1 1 100%; }
  .pl-count { font-size: 16px; }
}