/* Pricing-page comparison, styled independently from the homepage. */
.price-comparison {
  --bg: #10141e; --panel: #181f2c; --panel-2: #212a3b;
  --text: #eef1f5; --muted: #bcc7d6; --border: #303c4e;
  --accent: #72bc59; --accent-2: #a2b4fb; --comparison-accent-text: #8bcf75;
  --vox-text-shadow: 1px 2px 0 #0006;
  max-width: 1100px; margin: 64px auto; scroll-margin-top: 24px;
}
:root[data-theme="light"] .price-comparison {
  --bg: #f2f5f8; --panel: #fff; --panel-2: #e8eef3;
  --text: #213046; --muted: #46586b; --border: #c3cfdb;
  --accent: #367937; --accent-2: #405cac; --comparison-accent-text: #246f33;
  --vox-text-shadow: none;
}
/* A compact, sourced comparison of like-sized monthly plans. */
.price-comparison .comparison-heading { display: flex; align-items: end; justify-content: space-between; max-width: none; gap: 24px; margin-bottom: 30px; }
.price-comparison .comparison-heading h2 { margin: 0; font-size: clamp(16px, 1.7vw, 22px); line-height: 1.7; letter-spacing: -.5px; }
.price-comparison .comparison-heading p { margin: 14px 0 0; color: var(--muted); font: 16px/1.8 system-ui, sans-serif; }
.price-comparison .comparison-panel { border: 1px solid var(--border); border-radius: 3px; box-shadow: 0 4px #070a1133; background: var(--bg); }
.price-comparison .comparison-table { width: 100%; margin: 0; border-collapse: collapse; font: 15px/1.6 system-ui, sans-serif; }
.price-comparison .comparison-table th, .price-comparison .comparison-table td { padding: 23px 28px; text-align: start; vertical-align: middle; border: 0; border-bottom: 1px solid var(--border); }
.price-comparison .comparison-table thead th { padding-block: 15px; background: var(--panel-2); color: var(--muted); font-size: 13px; font-weight: 600; }
.price-comparison .comparison-table th:first-child { width: 37%; }
.price-comparison .comparison-table th:last-child, .price-comparison .comparison-table td:last-child { text-align: end; }
.price-comparison .comparison-provider { display: block; color: var(--text); font: 650 18px/1.5 system-ui, sans-serif; }
.price-comparison .comparison-tier, .price-comparison .comparison-cpu > span { display: block; margin-top: 4px; color: var(--muted); font: 400 13px/1.7 system-ui, sans-serif; }
.price-comparison .comparison-cpu { color: var(--text); max-width: 300px; }
.price-comparison .comparison-price { white-space: nowrap; }
.price-comparison .comparison-price strong { color: var(--text); font: 650 26px/1.5 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.price-comparison .comparison-price > span { margin-inline-start: 5px; color: var(--muted); font-size: 13px; }
.price-comparison .comparison-crafty { background: color-mix(in srgb, var(--bg) 87%, var(--accent)); }
.price-comparison .comparison-crafty > th { box-shadow: inset 3px 0 var(--accent); }
.price-comparison .comparison-crafty .comparison-provider, .price-comparison .comparison-crafty .comparison-price strong { color: var(--comparison-accent-text); }
.price-comparison .comparison-footnote { display: flex; align-items: start; justify-content: space-between; gap: 32px; padding: 20px 28px; }
.price-comparison .comparison-footnote p { margin: 0; max-width: 760px; color: var(--muted); font: 13px/1.8 system-ui, sans-serif; }
.price-comparison .comparison-footnote p:last-child { flex: none; text-align: end; }
.price-comparison .comparison-footnote time { display: block; font-variant-numeric: tabular-nums; }
:root[dir="rtl"] .price-comparison .comparison-crafty > th { box-shadow: inset -3px 0 var(--accent); }
@media (max-width: 920px) {
  .price-comparison .comparison-table th, .price-comparison .comparison-table td { padding-inline: 20px; }
  .price-comparison .comparison-heading { align-items: start; flex-direction: column; gap: 15px; }
}
@media (max-width: 680px) {
  .price-comparison .comparison-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .price-comparison .comparison-table tbody { display: block; }
  .price-comparison .comparison-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 22px 18px; gap: 12px; border-bottom: 1px solid var(--border); }
  .price-comparison .comparison-table th, .price-comparison .comparison-table td { display: block; width: auto; padding: 0; border: 0; }
  .price-comparison .comparison-table th:first-child { width: auto; }
  .price-comparison .comparison-crafty { box-shadow: inset 3px 0 var(--accent); }
  .price-comparison .comparison-crafty > th { box-shadow: none; }
  .price-comparison .comparison-cpu { grid-column: 1 / -1; grid-row: 2; font-size: 14px; }
  .price-comparison .comparison-price { grid-column: 2; grid-row: 1; }
  .price-comparison .comparison-price strong { font-size: 23px; }
  .price-comparison .comparison-price > span { display: block; margin: 0; }
  .price-comparison .comparison-provider { font-size: 17px; }
  .price-comparison .comparison-footnote { padding: 20px 18px; flex-direction: column; gap: 12px; }
  .price-comparison .comparison-footnote p:last-child { text-align: start; }
  .price-comparison .comparison-footnote time { display: inline; }
  :root[dir="rtl"] .price-comparison .comparison-crafty { box-shadow: inset -3px 0 var(--accent); }
  :root[dir="rtl"] .price-comparison .comparison-crafty > th { box-shadow: none; }
}