.plans--block{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;max-width:1000px}
@media (max-width:720px){
.plans{grid-template-columns:minmax(0,1fr)}
.plans{gap:26px}
}
.ladder{max-width:1000px;margin:0 auto 10px;display:flex;justify-content:flex-start;align-items:flex-end;gap:8px;pointer-events:none}
.ladder span{font-family:'Caveat','Caveat Fallback',cursive;font-weight:700;font-size:29px;line-height:1;transform:rotate(-3deg);padding-bottom:6px}
.ladder svg{display:block;flex:none}
@media (max-width:1000px){
.ladder{display:none}
}
.plans--block .pcard{padding:26px 24px}
.plans--block .price .amount{font-size:52px;letter-spacing:-2.4px}
@media (max-width:720px){
.pcard .price .amount{font-size:58px}
}
@media (max-width:430px){
.pcard .price .amount{font-size:52px;letter-spacing:-2.4px}
}
.plans--block .price .unit{font-size:18px;padding-bottom:3px}
.per{font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:13px;color:var(--muted);margin-top:6px}
/* The hero and the subscription note share the same surface; the edge between them
   is invisible. The two paddings therefore add up to ONE gap - previously
   104 + 76 = 180px. The leading html[data-cut] is needed because base.css sets
   the lower height of the hero through exactly this hook. */
html[data-cut="flat"] .hero--page{padding-bottom:40px}
.sec--switch{background:var(--plansbg,var(--ground));border-bottom:none;padding-top:32px}
.switch{background:var(--plansbg,var(--ground));border:var(--bd);border-radius:var(--r);box-shadow:5px 5px 0 0 var(--black);padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:32px;max-width:1000px;margin:0 auto;transition:transform .16s ease,box-shadow .16s ease}
.switch :is(h2,h3){font-size:25px;font-weight:800;letter-spacing:-.7px;margin-bottom:8px}
.switch p{font-size:16px;color:var(--muted)}
.switch .btn{flex:none;background:var(--plansbg,var(--ground))}
.switch .btn:hover{background:#FBE3C3}
@media (max-width:1000px){
.plans--block{grid-template-columns:minmax(0,1fr);max-width:420px}
}
@media (max-width:720px){
.plans{grid-template-columns:minmax(0,1fr)}
.switch{flex-direction:column;align-items:flex-start}
}
.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}
@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{padding-top:68px}