/* ============================================================
   Pricing -- pricing/
   On top of style.css and privacy.css (the hero band). Same tokens,
   Montserrat, yellow rules and blue links as the legal pages.
   ============================================================ */

/* under the dark head band: the page's title line and intro, centred on white like the reference */
.pr-intro{display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:clamp(48px,7vw,88px); margin-bottom:clamp(32px,4vw,48px)}
.pr-intro h2{margin:0; font-size:clamp(1.8rem,3.6vw,2.7rem); color:var(--ink); text-wrap:balance}
.pr-intro h2::after{content:""; display:block; width:96px; height:8px; background:var(--brand); margin:20px auto 0}
.pr-lede{margin:22px auto 0; max-width:62ch; font-size:clamp(1rem,1.5vw,1.15rem); line-height:1.7; color:var(--ink-soft)}

/* ---------- the price card, lifted over the band's edge ---------- */
.pr-price-band{background:var(--grey); padding-bottom:clamp(48px,7vw,88px)}
.pr-card{
  position:relative; max-width:520px; margin:0 auto;
  background:var(--white); border-radius:var(--r-lg); border-top:6px solid var(--brand);
  box-shadow:var(--shadow-lift); padding:clamp(26px,4vw,38px);
  display:flex; flex-direction:column; gap:18px;
}
.pr-card-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.pr-card-head h2{margin:0; font-size:1.3rem; color:var(--ink)}
.pr-badge{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background:var(--cream); color:var(--blue); border:1px solid var(--brand); border-radius:999px; padding:5px 12px}
.pr-amount{margin:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.pr-amount span{font-size:clamp(2.3rem,5vw,3rem); font-weight:800; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.pr-amount small{font-size:1rem; font-weight:600; color:var(--ink-mute)}
.pr-card-note{margin:0; font-size:.94rem; line-height:1.6; color:var(--ink-soft)}

/* ---------- section heads ---------- */
.pr-fit h2,.pr-billing h2,.pr-faq h2{font-size:clamp(1.6rem,3vw,2.2rem); color:var(--ink); margin:0 0 14px}
.pr-fit h2::after,.pr-billing h2::after,.pr-faq h2::after{content:""; display:block; width:64px; height:6px; background:var(--brand); margin-top:14px}
.pr-head{max-width:76ch; margin-bottom:clamp(26px,4vw,40px)}
.pr-head p{margin:0; line-height:1.75; color:var(--ink-soft)}

/* ---------- three steps ---------- */
.pr-steps{list-style:none; margin:0 0 clamp(26px,4vw,36px); padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(16px,2.5vw,24px)}
.pr-steps li{background:var(--white); border:1px solid var(--grey-line); border-radius:var(--r-lg); padding:clamp(22px,3vw,28px);
  display:flex; flex-direction:column; gap:10px; transition:box-shadow .2s var(--ease), transform .2s var(--ease)}
.pr-steps li:hover{box-shadow:var(--shadow); transform:translateY(-2px)}
.pr-step-no{display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:var(--brand); color:var(--ink); font-weight:800; font-size:1.05rem}
.pr-steps h3{margin:0; font-size:1.05rem; color:var(--ink)}
.pr-steps p{margin:0; font-size:.95rem; line-height:1.65; color:var(--ink-soft)}

/* ---------- billing ---------- */
.pr-billing{background:var(--grey)}
.pr-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(18px,3vw,32px); margin-top:clamp(18px,3vw,28px)}
.pr-grid > div{background:var(--white); border-radius:var(--r-lg); border-left:4px solid var(--brand); padding:20px 22px}
.pr-grid h3{margin:0 0 6px; font-size:1rem; color:var(--ink)}
.pr-grid p{margin:0; font-size:.95rem; line-height:1.65; color:var(--ink-soft)}

/* ---------- questions ---------- */
.pr-faq .wrap{max-width:900px}
.pr-q{padding:22px 0; border-bottom:1px solid var(--grey-line)}
.pr-q h3{margin:0 0 8px; font-size:1.08rem; color:var(--ink)}
.pr-q p{margin:0 0 10px; line-height:1.75; color:var(--ink-soft)}
.pr-q p:last-child{margin-bottom:0}
.pr-faq a{color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:3px}
.pr-faq a:hover{color:var(--blue-dark)}
.pr-small{margin:28px 0 0; font-size:.86rem; line-height:1.7; color:var(--ink-mute)}