/* Clickt Studio — Plans page (monthly services).
   Chrome, brand tokens, nav/footer/hero/CTA come from pricing.css (enqueued first).
   This file only adds the monthly-tier grid, the "most popular" highlight, and the bundle. */

.plans-section { max-width:1320px; margin:0 auto; padding:clamp(40px,6vw,80px) clamp(18px,4vw,56px); }
.plans-head { margin-bottom:clamp(28px,4vw,48px); max-width:62ch; }
.plans-sub { font-size:16.5px; line-height:1.55; color:rgba(236,232,241,0.72); font-weight:500; margin:14px 0 0; max-width:54ch; }

.plan-tiers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,28px); align-items:start; }
@media (max-width:860px){ .plan-tiers { grid-template-columns:1fr; } }

.plan-card { position:relative; background:#fff; color:var(--ink); border:1px solid rgba(43,34,54,0.14); border-radius:20px; box-shadow:0 18px 38px -22px rgba(43,34,54,0.38); padding:clamp(26px,3vw,38px); }
.plan-card.is-popular { border:2px solid var(--orange); box-shadow:0 26px 52px -22px rgba(248,107,60,0.45); transform:translateY(-6px); }
@media (max-width:860px){ .plan-card.is-popular { transform:none; } }
.plan-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); white-space:nowrap; background:var(--orange); color:var(--ink); font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:6px 14px; border-radius:999px; box-shadow:0 10px 22px -12px rgba(248,107,60,0.7); }

.plan-name { font-family:"JetBrains Mono",ui-monospace,monospace; font-weight:700; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--purple); margin:0 0 12px; }
.plan-price { display:flex; align-items:baseline; gap:6px; margin-bottom:20px; }
.plan-amount { font-family:"Inter",system-ui,sans-serif; font-weight:800; font-size:clamp(40px,5vw,56px); line-height:0.9; color:var(--ink); letter-spacing:-0.04em; }
.plan-per { font-size:15px; font-weight:600; color:rgba(43,34,54,0.55); }

.plan-features { list-style:none; display:flex; flex-direction:column; gap:11px; margin:0; padding:0; }
.plan-features li { position:relative; padding-left:26px; font-size:14.5px; line-height:1.45; color:rgba(43,34,54,0.8); font-weight:500; }
.plan-features li::before { content:""; position:absolute; left:0; top:1px; width:17px; height:17px; border-radius:50%; background:rgba(137,123,158,0.18); }
.plan-features li::after { content:""; position:absolute; left:5px; top:5.5px; width:7px; height:4px; border-left:2px solid var(--purple); border-bottom:2px solid var(--purple); transform:rotate(-45deg); }
.plan-card.is-popular .plan-features li::before, .bundle-card .plan-features li::before { background:rgba(248,107,60,0.16); }
.plan-card.is-popular .plan-features li::after, .bundle-card .plan-features li::after { border-color:var(--orange); }

.plans-note { font-size:13px; line-height:1.5; color:rgba(236,232,241,0.55); margin:clamp(20px,2.5vw,28px) 0 0; max-width:72ch; }

/* Care + Insight bundle */
.bundle-card { position:relative; background:#fff; color:var(--ink); border:2px solid var(--orange); border-radius:24px; box-shadow:0 28px 56px -26px rgba(248,107,60,0.4); padding:clamp(30px,3.6vw,48px); }
.bundle-inner { display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,56px); align-items:center; }
@media (max-width:760px){ .bundle-inner { grid-template-columns:1fr; gap:24px; } }
.bundle-saving { font-size:14.5px; line-height:1.5; color:rgba(43,34,54,0.7); margin:14px 0 0; font-weight:500; }
.bundle-features { gap:12px; }
.bundle-features li { font-size:15px; }

/* CTA padding mirrors the site's #quote section */
#cta { padding:clamp(40px,5vw,72px) clamp(14px,3vw,40px) clamp(52px,7vw,104px); }