/* Additions for the pricing page, on top of site.css: a short navy first screen, the four tier cards on white, and a short navy close. */
.pr .nav nav a.on{color:var(--fg)}
/* WHY: the page is short, so the first screen only needs room for the headline, not the whole window */
.pr .hero{min-height:0}
.pr .hbody{display:block;padding:72px clamp(20px,4vw,56px) 56px}
.pr .fadeband{height:90px}
.tiers{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,56px) 80px}
.tiers .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tier{display:flex;flex-direction:column;background:var(--white);border:1px solid #C9D3DF;box-shadow:0 24px 48px -32px rgba(14,27,44,.4);padding:22px 20px}
.tier h2{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.tier .price{margin-top:14px;font:400 28px/1.1 var(--mark);color:var(--navy)}
.tier .price small{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-right:6px}
.tier .price.talk{font:300 26px/1.15 var(--head);letter-spacing:-.01em}
.tier .for{margin-top:14px;padding-bottom:16px;border-bottom:1px solid var(--rule);font-size:17px;color:var(--ink)}
.tier ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.tier li{position:relative;padding-left:16px;font-size:15px;line-height:1.45;color:var(--ink2)}
.tier li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--amber)}
.tier .talkline{margin-top:auto;padding-top:18px;font:300 20px/1.2 var(--head);color:var(--navy)}
.tiers .own{margin-top:32px;text-align:center;font-size:17px;color:var(--ink2)}
.pr .close{padding-bottom:96px}
@media (max-width:1100px){.tiers .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.tiers .grid{grid-template-columns:1fr}.pr .hbody{padding:48px 20px 40px}}