@import url("../rang.css");
@import url("../rang-brand.css");
.pricing { max-width:1120px; margin:auto; padding:clamp(24px,7vw,88px) 20px; } .hero { max-width:680px; margin-bottom:40px; } .eyebrow,.badge { color:var(--navy); font-size:12px; font-weight:700; letter-spacing:.12em; } h1 { margin:8px 0 16px; font-size:clamp(34px,6vw,58px); line-height:1.08; color:var(--navy); } h2 { margin:0; font-size:22px; } .lead,p { color:var(--muted); } .plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; } .plan,.groups { padding:24px; border:1px solid #e5e5e5; border-radius:12px; background:var(--surface); } .featured { border:2px solid var(--navy); } .price { margin:18px 0 8px; color:var(--ink); font-size:30px; font-weight:750; } small { color:var(--muted); font-size:14px; font-weight:400; } .plan p:not(.price) { min-height:72px; } .button { display:inline-flex; align-items:center; justify-content:center; padding:0 18px; border-radius:8px; background:var(--navy); color:#fff; font-weight:700; text-decoration:none; } .secondary { background:#fff; color:var(--navy); border:1px solid var(--navy); } .groups { margin-top:32px; } .group-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin:20px 0; } .group-grid div { display:flex; flex-direction:column; gap:4px; padding:16px; border:1px solid var(--line); border-radius:8px; } .group-grid span { color:var(--muted); } .badge { margin:0 0 12px; letter-spacing:0; }