/* ===== Pricing page: every rule is scoped to .pricing-page (nothing here touches header/footer) ===== */
.pricing-page{
  --pbg:#FBFAF7;
  --shadow:0 12px 30px -14px rgba(32,28,25,.3);
  max-width:1240px; margin:0 auto; padding:36px 32px 48px;
  color:var(--ink); line-height:1.5;
}
.pricing-page *{box-sizing:border-box}
.pricing-page ul{list-style:none; padding:0; margin:0}
.pricing-page section{padding:0}            /* global "section" padding was shifting the plans */

/* intro */
.pricing-page .p-intro{text-align:center; margin:0 auto 28px; max-width:720px}
.pricing-page .p-intro h1{font-size:clamp(30px,4.4vw,46px); font-weight:800; margin:12px 0 8px; color:var(--ink)}
.pricing-page .p-intro h1 span{color:var(--saffron-deep)}
.pricing-page .p-intro p{color:var(--slate); font-size:16px}

/* buttons (local look, doesn't touch site .btn) */
.pricing-page .btn{display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; padding:11px 20px; border-radius:12px; border:1.5px solid transparent; transition:transform .15s}
.pricing-page .btn:hover{transform:translateY(-2px)}
.pricing-page .b-saf{background:var(--saffron); color:#fff; box-shadow:0 8px 18px -8px rgba(255,153,51,.6)}
.pricing-page .b-out{border-color:var(--green); color:var(--green); background:transparent}
.pricing-page .b-out:hover{background:var(--green); color:#fff}
.pricing-page .b-navy{background:var(--navy); color:#fff}
.pricing-page .b-gold{background:var(--gold); color:var(--navy-deep)}
.pricing-page a:focus-visible{outline:3px solid var(--saffron); outline-offset:2px}

/* plans */
.pricing-page .plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:20px; align-items:stretch; margin:0; padding:10px 0 0}
.pricing-page .plan{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:26px 22px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column; position:relative; overflow:hidden}
.pricing-page .plan::before{content:""; position:absolute; inset:0 0 auto 0; height:6px; background:var(--c)}
.pricing-page .plan h2{font-size:24px; font-weight:700; margin-top:6px}
.pricing-page .pr{font-family:var(--sat); font-weight:800; font-size:46px; line-height:1; margin:8px 0 2px}
.pricing-page .pr small{font-size:15px; font-weight:500; color:var(--slate); font-family:var(--body)}
.pricing-page .for{font-size:14px; color:var(--slate); margin-bottom:14px; min-height:42px}
.pricing-page .plan ul{margin-bottom:18px; flex:1}
.pricing-page .plan li{position:relative; padding:5px 0 5px 24px; font-size:14.5px}
.pricing-page .plan li::before{content:"✓"; position:absolute; left:0; font-weight:800; color:var(--green)}
.pricing-page .plan.hot{background:linear-gradient(160deg,var(--navy),var(--navy-deep)); color:#fff; border-color:var(--gold); transform:translateY(-8px)}
.pricing-page .plan.hot h2{color:#fff}
.pricing-page .plan.hot .for,.pricing-page .plan.hot .pr small{color:#C9CFE6}
.pricing-page .plan.hot li::before{color:var(--gold)}
.pricing-page .ribbon{position:absolute; top:14px; right:14px; background:var(--saffron); color:#fff; font-size:12px; font-weight:700; padding:3px 10px; border-radius:99px}

/* info strip */
.pricing-page .strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:32px 0 0}
.pricing-page .strip div{background:var(--soft); border-radius:14px; padding:16px 18px; font-size:14px; color:var(--slate)}
.pricing-page .strip b{display:block; color:var(--ink); font-family:var(--sat); font-size:17px}

/* headings */
.pricing-page h3.sec{font-size:30px; font-weight:800; margin:40px 0 16px; border-left:5px solid var(--saffron); padding-left:14px}

/* comparison table */
.pricing-page .scroll{overflow-x:auto; border-radius:16px; border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow)}
.pricing-page table{border-collapse:collapse; width:100%; min-width:660px}
.pricing-page th,.pricing-page td{padding:10px 16px; text-align:center; font-size:14.5px; border-bottom:1px solid var(--line)}
.pricing-page th:first-child,.pricing-page td:first-child{text-align:left; font-weight:500}
.pricing-page thead th{background:var(--navy); color:#fff; font-family:var(--sat); font-size:17px; border:0}
.pricing-page thead th:nth-child(4){background:var(--gold); color:var(--navy-deep)}
.pricing-page tbody tr:nth-child(even){background:var(--soft)}
.pricing-page td:nth-child(4){font-weight:600}
.pricing-page tr:last-child td{border-bottom:0}
.pricing-page .y{color:var(--green); font-weight:800}
.pricing-page .n{color:var(--slate); opacity:.5}

/* verified cards */
.pricing-page .two{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px}
.pricing-page .card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px}
.pricing-page .card h4{font-size:20px; margin-bottom:8px}
.pricing-page .card li{padding:3px 0 3px 22px; position:relative; font-size:14.5px; color:var(--slate)}
.pricing-page .card li::before{content:"★"; position:absolute; left:0; color:var(--gold); font-size:12px; top:6px}

/* CTA */
.pricing-page .cta{margin:40px 0 0; background:linear-gradient(135deg,var(--green),var(--green-deep)); color:#fff; border-radius:20px; padding:30px 34px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between}
.pricing-page .cta h3{font-size:26px; font-weight:800; color:#fff}
.pricing-page .cta p{opacity:.9}

@media(max-width:640px){
  .pricing-page{padding:26px 18px 36px}
  .pricing-page .plan.hot{transform:none}
  .pricing-page h3.sec{font-size:24px}
  .pricing-page .cta{padding:24px 20px}
}

/* ===== Tighter, even spacing ===== */
.pricing-page{padding:24px 24px 32px}
.pricing-page .p-intro{margin-bottom:20px}
.pricing-page .p-intro h1{margin:10px 0 6px}
.pricing-page .plans{gap:16px; padding-top:0}
.pricing-page .plan{padding:22px 20px 20px}
.pricing-page .plan.hot{transform:none; box-shadow:0 18px 36px -16px rgba(11,31,69,.55)}   /* same line as other cards */
.pricing-page .strip{margin-top:20px; gap:14px}
.pricing-page h3.sec{margin:28px 0 12px}
.pricing-page .two{gap:16px}
.pricing-page .cta{margin-top:28px; padding:24px 28px}
@media(max-width:640px){
  .pricing-page{padding:18px 14px 28px}
  .pricing-page h3.sec{margin:24px 0 10px}
}