/**
 * pricing.css: the /pricing page (ACT-277). The plan cards, toggle, comparison and FAQ are home.css (the Home specimen's pricing and
 * FAQ); this file is only the page head, which has to clear the floating nav, and the closing block. Tokens only; sizes the tokens do
 * not name are rem (1rem = 16px). Only transform and opacity move (public/js/pricing.js).
 */
.pr-head { padding: 11.25rem var(--act-gutter) 9.375rem; }
.pr-h1 { margin: 0; text-align: center; font-variation-settings: var(--act-display-wdth); font-weight: var(--act-weight-display); font-size: clamp(2.75rem, 6.6vw, 6.75rem); line-height: .92; letter-spacing: -.058em; }
.pr-close { padding: 9.375rem var(--act-gutter) 9.375rem; }
.pr-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1rem; }
.pr-ctas .btn { height: 3.25rem; padding: 0 1.625rem; font-size: 1rem; gap: .625rem; }
.home .pr-ctas .btn-ink:hover .glyph-white { background-image: url('/assets/third-party/shopify-glyph-black.png'); }

@media (max-width: 600px) {
  .pr-head { padding: 8rem var(--act-gutter) 4.5rem; }
  .pr-close { padding: 4.5rem var(--act-gutter) 4.5rem; }
  .pr-h1 { font-size: 2.75rem; }
}