/* Gript — Pricing */
.page-hero{padding:var(--hero-pad-top) var(--hero-pad-x) clamp(40px,5vw,60px);text-align:center}
.page-hero h1{font-family:var(--font);font-size:var(--hero-h1-size);font-weight:700;letter-spacing:var(--hero-h1-tracking);line-height:var(--hero-h1-leading);max-width:860px;margin:0 auto 16px}
.page-hero p{font-size:var(--hero-sub-size);color:var(--ink-2);max-width:480px;margin:0 auto;line-height:var(--hero-sub-leading)}

.pricing-section{padding:clamp(60px,7vw,100px) clamp(20px,5.6vw,48px);text-align:center}
.pricing-header{text-align:center;margin-bottom:12px}
.pricing-header h2{font-family:var(--font);font-size:clamp(24px,3vw,36px);font-weight:700;letter-spacing:-1.5px}
.pricing-header p{font-size:clamp(14px,1.2vw,16px);color:var(--ink-2);margin-top:8px}

.toggle-wrap{display:flex;justify-content:center;padding:clamp(20px,3vw,32px) clamp(20px,5.6vw,48px) clamp(32px,4vw,48px)}
.toggle{display:inline-flex;background:var(--surface);border:1.5px solid var(--line);border-radius:8px;padding:3px;flex-wrap:wrap;justify-content:center}
.toggle-btn{padding:10px 24px;border:none;background:none;border-radius:6px;font-family:var(--body);font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:8px}
.toggle-btn.active{background:var(--ink);color:var(--bg)}
.save-pill{padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;background:rgba(255,255,255,0.2)}

.pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.5vw,32px);max-width:960px;margin:0 auto clamp(40px,5vw,64px);padding:0 clamp(20px,5.6vw,48px)}
.plan{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:clamp(24px,3vw,40px);position:relative;transition:box-shadow 0.2s}
.plan:hover{box-shadow:0 8px 32px rgba(0,0,0,0.06)}
.plan.featured{border-color:var(--ink)}
.plan.featured::before{content:attr(data-badge);position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:4px 16px;background:var(--ink);color:var(--bg);font-family:var(--font);font-size:11px;font-weight:700;border-radius:100px;white-space:nowrap}
.plan-name{font-family:var(--font);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--ink-3);margin-bottom:8px}
.plan-price{font-family:var(--font);font-size:clamp(40px,5vw,56px);font-weight:700;letter-spacing:-3px;line-height:1}
.plan-price sup{font-size:24px;vertical-align:super}
.plan-unit{font-size:14px;color:var(--ink-2);margin:4px 0}
.plan-annual{font-size:13px;color:var(--ink-3);height:20px}
.plan-desc{font-size:14px;color:var(--ink-2);margin:20px 0;line-height:1.6}
.plan-cta{display:block;width:100%;padding:13px;border-radius:8px;font-family:var(--body) !important;font-size:15px;font-weight:600;border:1.5px solid var(--line);background:none;color:var(--ink);cursor:pointer;transition:all 0.15s;margin-bottom:24px;text-align:center;text-decoration:none;white-space:nowrap}
.plan-cta:hover{border-color:var(--ink)}
.plan-cta-fill{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.plan-cta-fill:hover{background:#333}
.plan button,.plan a,.plan input[type=button],.plan input[type=submit]{font-family:var(--body) !important}
.plan-features{list-style:none;display:flex;flex-direction:column;gap:6px}
.plan-features li{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.plan-features li::before{content:'+';color:var(--ink-3);font-weight:700;font-size:14px}

.programs{max-width:720px;margin:0 auto clamp(48px,6vw,80px);padding:0 clamp(20px,5.6vw,48px)}
.programs h3{font-family:var(--font);font-size:20px;font-weight:700;letter-spacing:-0.5px;margin-bottom:20px;text-align:center}
.prog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:clamp(10px,1.5vw,16px)}
.prog-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px;text-align:center;transition:box-shadow 0.2s}
.prog-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.04)}
.prog-emoji{font-size:24px;margin-bottom:8px}
.prog-card h4{font-family:var(--font);font-size:13px;font-weight:700;margin-bottom:4px}
.prog-price{font-family:var(--font);font-size:20px;font-weight:700;color:var(--ink)}
.prog-detail{font-size:11px;color:var(--ink-3);margin-top:4px;line-height:1.4}

/* --- SSO ADD-ON (pricing page) --- */
.sso-section{max-width:960px;margin:0 auto clamp(40px,5vw,64px);padding:0 clamp(20px,5.6vw,48px)}
.sso-addon{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:clamp(20px,2.6vw,28px) clamp(20px,3vw,32px);display:flex;align-items:center;gap:clamp(16px,2.4vw,24px)}
.sso-addon-icon{flex-shrink:0;width:48px;height:48px;border-radius:12px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.sso-addon-icon svg{width:24px;height:24px}
.sso-addon-text{flex:1;min-width:0}
.sso-addon-heading{font-family:var(--font);font-size:clamp(15px,1.6vw,17px);font-weight:700;letter-spacing:-0.4px;margin:0 0 6px}
.sso-addon-body{font-size:14px;color:var(--ink-2);line-height:1.6;margin:0}
.sso-addon-cta{flex-shrink:0;display:inline-block;padding:12px 24px;border-radius:8px;font-family:var(--body);font-size:14px;font-weight:600;background:var(--ink);color:var(--bg);border:1.5px solid var(--ink);text-decoration:none;transition:all 0.15s;white-space:nowrap}
.sso-addon-cta:hover{background:#333}
.compare-addon .addon-val{font-weight:600;color:var(--ink-2)}

.compare-section{max-width:960px;margin:0 auto clamp(48px,6vw,80px);padding:0 clamp(20px,5.6vw,48px)}
.compare-section h2{font-family:var(--font);font-size:20px;font-weight:700;letter-spacing:-0.5px;margin-bottom:20px;text-align:center}
.compare-table{width:100%;border-collapse:collapse;font-size:13px}
.compare-table th{text-align:left;padding:10px 14px;font-weight:600;border-bottom:2px solid var(--ink);font-size:12px}
.compare-table th:not(:first-child){text-align:center;width:120px}
.compare-table th.feat-col{background:#f5f5f5}
.compare-table td{padding:10px 14px;border-bottom:1px solid var(--line)}
.compare-table td:not(:first-child){text-align:center}
.compare-table td.feat-col{background:#fafafa}
.ck{color:#059669;font-weight:700}.cx{color:var(--ink-3)}

.competitor{max-width:960px;margin:0 auto clamp(48px,6vw,80px);padding:24px 32px;background:var(--surface);border:1px solid var(--line);border-radius:10px;text-align:center;font-size:14px;color:var(--ink-2);line-height:1.6}
.competitor strong{color:var(--ink)}

.faq-section{max-width:960px;margin:0 auto clamp(48px,6vw,80px);padding:0 clamp(20px,5.6vw,48px)}
.faq-section h2{font-family:var(--font);font-size:20px;font-weight:700;letter-spacing:-0.5px;margin-bottom:24px;text-align:center}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{padding:16px 0;font-size:15px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;width:100%;background:none;border:none;font-family:inherit;color:var(--ink);text-align:left}
.faq-q:hover{color:var(--ink-2)}
.faq-q:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}
.faq-chevron{transition:transform 0.2s;font-size:18px;color:var(--ink-3)}
.faq-item.open .faq-chevron{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.3s var(--ease);font-size:14px;color:var(--ink-2);line-height:1.7}
.faq-item.open .faq-a{max-height:400px}
.faq-a-inner{padding:0 0 16px}

.cta-strip{padding:clamp(60px,7vw,100px) clamp(20px,5.6vw,48px);text-align:center;background:var(--ink);border-top:1px solid rgba(255,255,255,.1)}
.cta-strip h2{font-family:var(--font);font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-2px;margin-bottom:16px;color:var(--bg)}
.cta-strip p{font-size:clamp(14px,1.2vw,16px);color:var(--ink-3);margin-bottom:32px}
.cta-strip .btn-dark{background:var(--bg);color:var(--ink)}
.cta-strip .btn-dark:hover{background:var(--line)}

/* --- TESTIMONIALS (pricing page) --- */
/* .tcard base styles duplicated here — home.css is not loaded on the pricing page */
.ptm-section{max-width:960px;margin:0 auto clamp(48px,6vw,80px);padding:0 clamp(20px,5.6vw,48px)}
.ptm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px}
.ptm-section .tcard{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:clamp(18px,2.5vw,28px);display:flex;flex-direction:column;gap:16px}
.ptm-section .tcard-stars{display:flex;align-items:center;gap:2px}
.ptm-section .star{width:16px;height:16px;display:block}
.ptm-section .star-half-wrap{position:relative;width:16px;height:16px;display:inline-block;flex-shrink:0}
.ptm-section .star-half-wrap .star{position:absolute;inset:0}
.ptm-section .star-fg{clip-path:inset(0 50% 0 0)}
.ptm-section .tcard-quote{font-size:14px;color:var(--ink);line-height:1.6;flex:1}
.ptm-section .tcard-author{display:flex;align-items:center;gap:12px}
.ptm-section .tcard-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--line)}
.ptm-section .tcard-meta{display:flex;flex-direction:column;gap:2px}
.ptm-section .tcard-name{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-0.3px}
.ptm-section .tcard-role{font-size:12px;color:var(--ink-3)}

/* When pricing-grid/toggle-wrap are inside .pricing-section (home page), the section already
   provides the horizontal padding — remove the inner duplicate to avoid double-inset on mobile */
.pricing-section .pricing-grid{padding-left:0;padding-right:0}
.pricing-section .toggle-wrap{padding-left:0;padding-right:0}

/* Pricing cards stack to 1-col below 560px; hide one compare column on very small screens */
@media(max-width:640px){
  .sso-addon{flex-direction:column;align-items:flex-start;text-align:left}
  .sso-addon-cta{width:100%;text-align:center}
}

@media(max-width:560px){
  .pricing-grid{grid-template-columns:1fr}
  .compare-table th:nth-child(2){display:none}
  .compare-table td:nth-child(2){display:none}
  .competitor{margin-left:0;margin-right:0}
}

/* Quiet demo link under the Business plan button. Deliberately a text link, not
   a second button: the plan CTA has to stay the obvious action in the card. */
.plan-demo-link {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.plan-demo-link:hover { color: var(--ink); border-bottom-color: var(--ink-3); }