/* The pricing page. It wears the privacy page's reading layout; only the rate bars and the length table are its own.
   The bars use the comparison's grammar on the landing: every bar is drawn to scale, and the pen takes longer on the dearer ones. */
#home.price-doc .doc-head { padding-bottom: clamp(36px, 4.4vw, 60px); }
#home .price-rates { padding-bottom: clamp(56px, 7vw, 104px); }
#home .price-bar { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) minmax(150px, auto); align-items: center; gap: clamp(16px, 2.4vw, 36px); padding-block: 22px; border-top: 1px solid var(--line); }
#home .price-bar:last-child { border-bottom: 1px solid var(--line); }
#home .price-name { margin: 0; }
#home .price-name b { display: block; color: var(--ink); font: 750 clamp(21px, 2vw, 28px)/1.15 var(--sans); letter-spacing: -.035em; }
#home .price-name span { display: block; margin-top: 4px; color: var(--ink-3); font: 500 13.5px/1.45 var(--sans); letter-spacing: -.008em; }
#home .price-track { position: relative; display: block; height: 11px; }
#home .price-fill { position: absolute; inset-block: 0; left: 0; border-radius: 2px; background: var(--ink-4); transform-origin: left; animation: draw-x var(--draw, 900ms) cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--at, 0ms); }
#home .price-bar[data-rate="200"] .price-fill { width: 50%; background: var(--signal); --draw: 700ms; --at: 420ms; }
#home .price-bar[data-rate="300"] .price-fill { width: 75%; --draw: 1000ms; --at: 510ms; }
#home .price-bar[data-rate="400"] .price-fill { width: 100%; --draw: 1300ms; --at: 600ms; }
#home .price-val { margin: 0; color: var(--ink-3); font: 500 clamp(14px, 1.1vw, 16px)/1 var(--sans); letter-spacing: -.01em; text-align: right; white-space: nowrap; }
#home .price-val b { margin-right: .12em; color: var(--ink); font: 700 clamp(28px, 2.9vw, 44px)/1 var(--sans); letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
#home .price-bar[data-rate="200"] .price-val b { color: var(--signal-text); }
#home .price-basis { max-width: 46em; margin: 14px 0 0; color: var(--ink-3); font: 400 13.5px/1.5 var(--sans); }

#home.price-doc .doc-section a { color: var(--ink); text-underline-offset: 3px; }
#home.price-doc .doc-section a:hover { color: var(--signal-text); }
#home.price-doc code { font: 500 .88em/1.5 var(--mono); }
#home .price-table { max-width: var(--doc-read); margin-top: 16px; }
#home .price-table table { width: 100%; border-collapse: collapse; color: var(--ink-2); font: 400 15px/1.55 var(--sans); font-variant-numeric: tabular-nums; }
#home .price-table thead th { padding: 0 12px 8px 0; border-bottom: 1px solid var(--line-2); color: var(--ink-3); font: 600 12.5px/1.4 var(--sans); letter-spacing: -.004em; text-align: left; }
#home .price-table tbody :is(th, td) { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; }
#home .price-table tbody th { color: var(--ink); font-weight: 500; }

@media (max-width: 640px) {
  #home .price-bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; padding-block: 18px; }
  #home .price-track { grid-column: 1 / -1; order: 3; }
  #home .price-val b { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  #home .price-fill { animation: none; }
}