.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.pricing-hero { padding-bottom: var(--s8); }
.pricing-head { max-width: 46rem; }
.pricing-head h1 { margin-bottom: var(--s5); }
.pricing-head .lede { max-width: 54ch; margin-bottom: var(--s6); }

.price-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-bottom: var(--s6); }
.seg { display: inline-flex; gap: 4px; padding: 4px; margin: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-alt); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg label > span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 7px; font-weight: 600; font-size: 0.95rem; color: var(--fg-2); }
.seg em { font-style: normal; font-weight: 500; font-size: 0.8rem; padding: 2px 8px; border-radius: 99px; background: var(--ht-tint); color: var(--ht-action); }
.seg input:checked + span { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgba(17,24,39,.08), 0 0 0 1px var(--line); }
.seg input:focus-visible + span { outline: 3px solid var(--ht-action); outline-offset: 2px; }
.vat-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--fg-2); }
.vat-toggle input { width: 18px; height: 18px; accent-color: var(--ht-action); margin: 0; }

.plans.plans-3 { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan-top { min-height: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.best { font-size: 0.78rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--fg); color: var(--bg); }
.plan-for { margin: 6px 0 0; font-size: 0.92rem; color: var(--fg-muted); }
@media (min-width: 901px) { .plans-3 .plan-for { min-height: 2.9em; } }
.plan-note { margin: var(--s2) 0 0; font-size: 0.85rem; color: var(--fg-muted); text-align: center; }
@media (max-width: 900px) { .plans.plans-3 { grid-template-columns: minmax(0, 1fr); max-width: 30rem; } }

.free-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s6); margin-top: var(--s5); padding: var(--s4) var(--s5); border: 1px dashed var(--line); border-radius: var(--r-md); }
.free-line p { margin: 0; flex: 1 1 24rem; max-width: 72ch; color: var(--fg-2); font-size: 0.95rem; }
.free-line b { color: var(--fg); }

.promises { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--line); }
.promises-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--s5); }
.promise-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s7); max-width: 56rem; }
.promise-list a { color: var(--fg); }
.example { margin: var(--s5) 0 0; color: var(--fg-2); }
@media (max-width: 760px) { .promise-list { grid-template-columns: minmax(0, 1fr); } }

.counts tbody th { width: 30%; }
.counts td { font-weight: 500; }
.row-note { display: block; font-weight: 400; font-size: 0.86rem; color: var(--fg-muted); margin-top: 2px; max-width: 46ch; }
.counts-foot { margin-top: var(--s4); max-width: 64ch; }

.selfhost-rows { display: grid; gap: var(--s4); }
.selfhost-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s7); padding: var(--s5) var(--s6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.selfhost-row > div:first-child { flex: 1 1 26rem; max-width: 60ch; }
.selfhost-row .row-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--s2); }
.selfhost-row p { margin: 0; }
.selfhost-price { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); font-weight: 600; }

.term-block h3 { margin-bottom: var(--s3); }
.term-block p { color: var(--fg-2); max-width: 56ch; }
.term-block { padding-left: var(--s5); border-left: 2px solid var(--fg); }

@media (max-width: 760px) {
  table.compare.counts, .counts tbody { display: block; min-width: 0; }
  .counts thead { display: none; }
  .counts tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
  .counts tr:last-child { border-bottom: 0; }
  .counts tbody th { grid-column: 1 / -1; width: auto; border-bottom: 0; padding-bottom: 4px; }
  .counts td { border-bottom: 0; padding-top: 4px; padding-bottom: 8px; }
  .counts td::before { content: attr(data-label); display: block; font-size: 0.78rem; font-weight: 500; color: var(--fg-muted); }
}
@media (max-width: 560px) {
  .selfhost-row { padding: var(--s5); }
}

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg em { color: #FF9B78; } }
:root[data-theme="dark"] .seg em { color: #FF9B78; }