/* ============================================================
   EasyUsenet - plans.css
   Page-specific rules. Extends and overrides base.css, so ALWAYS
   load it after base.css.
   ============================================================ */

.trial .box .btn{background:var(--sky)}
.pcard .price .amount{font-family:'Sora','Sora Fallback',sans-serif;font-size:64px;line-height:.9;font-weight:800;letter-spacing:-3.6px}
@media (max-width:720px){
.pcard .price .amount{font-size:58px}
}
@media (max-width:430px){
.pcard .price .amount{font-size:52px;letter-spacing:-2.4px}
}
.scrib-best{position:absolute;right:-64px;top:-62px;font-family:'Caveat','Caveat Fallback',cursive;font-weight:700;font-size:29px;line-height:1;color:var(--text);white-space:nowrap;pointer-events:none;transform:rotate(3deg)}
.scrib-best-ar{position:absolute;right:-86px;top:-20px;overflow:visible;pointer-events:none}
/* Measured: at 1100px there are 30px to the window edge; at 1024px the arrow
   sticks out by 8px and creates page overflow. This used to read 1320px - about
   140px too early. */
@media (max-width:1100px){
.scrib-best{display:none}
.scrib-best-ar{display:none}
}
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;max-width:800px;margin:0 auto}
@media (max-width:720px){
.plans{grid-template-columns:minmax(0,1fr)}
.plans{gap:26px}
}
.hero--page{padding:76px 0 84px}
@media (max-width:720px){
.hero{padding:56px 0 64px}
}
@media (max-width:430px){
.hero{padding:44px 0 52px}
}
.hero--page h1{text-align:center}
.hero--page .lead{text-align:center}
.hero--page .eyebrow-row{text-align:center}
.hero--page .specs-row{text-align:center}
.hero--page .specs-note{text-align:center}
.hero--page .wrap{max-width:1140px}
.hero--page h1{max-width:820px;margin-left:auto;margin-right:auto}
.hero--page .lead{max-width:820px;margin-left:auto;margin-right:auto}
.hero--page .eyebrow-row{max-width:820px;margin-left:auto;margin-right:auto}
.hero--page .proof{max-width:820px;margin-left:auto;margin-right:auto}
.hero--page h1{margin-bottom:20px}
.hero--page .lead{font-size:18px;line-height:1.6;color:var(--muted);margin:0 auto 26px;max-width:660px}
@media (max-width:430px){
.hero .lead{font-size:16px}
}
.hero--page .proof{display:flex;justify-content:center;margin-top:0}
.hero--page .trustline{font-size:15px;gap:9px}
.hero--page .trustline .meta{font-size:13px}
.hero--page .star{width:22px;height:22px}
@media (max-width:430px){
.trustline .star{width:20px;height:20px}
}
.hero--page .star svg{width:12px;height:12px}
@media (max-width:430px){
.trustline .star svg{width:11px;height:11px}
}
.hero--page .stars{gap:3px}
.plans--sub{max-width:800px}
.plans--sub .pcard .name{font-size:20px}
@media (max-width:430px){
.pcard .kicker .name{font-size:18px}
}
.note{text-align:center;font-size:15px;color:var(--muted);margin-top:26px}
.trial .box:active .btn{transform:none;box-shadow:0 0 0 0 var(--black)}
.trial .box .btn:active{transform:none;box-shadow:0 0 0 0 var(--black)}
@media (max-width:1000px){
.hero--page{padding:56px 0 64px}
}
@media (max-width:720px){
.hero{padding:56px 0 64px}
}
@media (max-width:430px){
.hero{padding:44px 0 52px}
}

.plans-top{margin-top:52px}
.scrib-best--plans{left:263px;top:-68px}
.scrib-best-ar--plans{left:409px}