/* =============================================================================
   PRICING  |  One-off and subscription plan cards.
   HTML: index.html -> <!-- SECTION: PRICING -->     JS: js/pricing.js
   Edit only this file when you want to change how pricing looks.
   ============================================================================= */

.pr2{display:grid;gap:1rem;max-width:980px;margin:0 auto}
@media(min-width:800px){
  .pr2{grid-template-columns:1fr 1fr;gap:1.2rem}
}
.plan{padding:clamp(1.4rem,3vw,2.2rem);display:flex;flex-direction:column;gap:1rem}
.plan.pop{border-color:rgba(142,198,65,.55)}
.plan h3{font-size:clamp(1.5rem,3vw,2rem)}
.plan p{margin:0;color:var(--muted)}
.badge{align-self:flex-start;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .75rem;border-radius:99px;background:rgba(142,198,65,.18);color:var(--green-d)}
.hint{font-weight:700;font-size:1.15rem;letter-spacing:-.02em}
.hint:empty{display:none}
.segw{display:flex;gap:.5rem}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem;flex:1;align-content:start}
.plan li{display:flex;gap:.65rem;font-size:.95rem}
.plan li::before{content:"";flex:none;width:18px;height:18px;margin-top:.18rem;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/10px no-repeat}
.plan .note{font-size:.88rem;border-top:1.5px solid rgba(10,10,10,.1);padding-top:.9rem}
[data-theme=dark] .plan .note{border-top-color:rgba(255,255,255,.14)}
.plan>.btn{align-self:flex-start}
@media(max-width:559px){
  .plan>.btn{align-self:stretch;justify-content:center}
}