/* The pricing page, and the page Stripe sends people back to. Loaded after site.css. */
.head-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:44px 0 0}
.plan{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:16px;background:var(--surface);border:1px solid var(--line);transition:border-color .2s}
.plan:hover{border-color:var(--line-2)}
.plan .tag{align-self:flex-start}
.plan h2{font:620 22px/1.1 var(--sans);letter-spacing:-.02em}
.plan p{font-size:14.5px;margin:0}
.plan p.price{display:flex;align-items:baseline;gap:8px;font:620 42px/1 var(--sans);letter-spacing:-.04em;color:var(--text)}
.price small{font:500 11.5px/1 var(--mono);font-variation-settings:"wdth" 87.5;letter-spacing:.02em;text-transform:uppercase;color:var(--faint)}
.ticks{list-style:none;margin:auto 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:10px}
.ticks li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:var(--muted)}
.ticks li::before{content:"";flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--cu)}
.plans-note{margin-top:20px;font-size:14px}
.band{padding:84px 0 0}
.band .lbl{display:flex;align-items:center;gap:10px}
.band .lbl::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cu)}
.band h2{margin-top:14px;font:620 clamp(28px,3.2vw,38px)/1.08 var(--sans);letter-spacing:-.035em}
.band-lead{margin-top:16px;max-width:66ch;font-size:16.5px}
.packs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px}
.pack{display:grid;gap:6px;padding:20px 22px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.pack b{font:620 30px/1.05 var(--sans);letter-spacing:-.035em}
.pack span{font-size:14.5px;color:var(--muted)}
.band .faq{margin-top:24px;max-width:820px}
.ending{padding:96px 0 128px;text-align:center}
.ending h2{font:620 clamp(30px,3.6vw,44px)/1.05 var(--sans);letter-spacing:-.035em;margin:0 auto;max-width:22ch}
.ending p{margin:16px auto 0}
.ending .btn.lg{margin-top:10px;padding:14px 24px;font-size:16px}
/* where Stripe sends people back to */
.back{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:96px 0 140px}
.back .mark{--size:64px;margin-bottom:6px}
.back .lbl{display:flex;align-items:center;gap:10px}
.back .lbl::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--faint)}
.back.success .lbl::before{background:var(--ok)}
.back.cancelled .lbl::before{background:var(--cu)}
.back h1{font:620 clamp(34px,4.4vw,52px)/1.04 var(--sans);letter-spacing:-.04em}
.back .lead{margin:0;font-size:18px;line-height:1.55;max-width:48ch}
.back .small{margin:0;font-size:14.5px}
@media (max-width:1100px){.plans,.packs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.plans,.packs{grid-template-columns:1fr}.band{padding-top:64px}.page-head{padding-top:52px}}