/* ════════════════════════════════════════════════════════════════════
 * PRICING PAGE - net-new pieces (reuses tokens.css + homepage.css)
 * Transparency = the brand. LIGHT hero (clarity over drama).
 * ════════════════════════════════════════════════════════════════════ */

/* ── LIGHT hero ── */
.hero-light{ position:relative; background:var(--bg); overflow:hidden; padding-block:var(--space-20) var(--space-12); text-align:center; border-bottom:1px solid var(--border-subtle); }
.hero-light::before{ content:''; position:absolute; top:-30%; left:50%; width:760px; height:560px; transform:translateX(-50%); background:radial-gradient(ellipse, rgba(124,58,237,.08) 0%, transparent 65%); pointer-events:none; }
.hero-light-inner{ position:relative; max-width:var(--container-prose); margin-inline:auto; }
.hero-light .hero-eyebrow{ color:var(--brand-purple); justify-content:center; }
.hero-light h1{ font-family:var(--font-display); font-size:clamp(48px,8vw,92px); font-weight:var(--weight-black); line-height:1.02; letter-spacing:var(--tracking-tight); margin-bottom:var(--space-5); text-wrap:balance; }
.hero-light h1 .grad{ background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.hero-light p{ font-size:var(--text-body-lg); color:var(--text-secondary); line-height:var(--leading-relaxed); max-width:560px; margin-inline:auto; }

/* ── Dominant centered pricing card ── */
.price-hero{ background:var(--bg-subtle); }
.price-card{ position:relative; max-width:480px; margin-inline:auto; background:var(--bg-card); border:2px solid var(--brand-purple); border-radius:var(--radius-2xl); box-shadow:var(--shadow-xl); padding:var(--space-12) var(--space-8) var(--space-10); text-align:center; }
.price-card .badge{ position:absolute; top:calc(-1 * var(--space-3)); left:50%; transform:translateX(-50%); background:var(--brand-purple); color:#fff; padding:var(--space-1) var(--space-4); font-size:11px; font-weight:var(--weight-bold); letter-spacing:var(--tracking-wider); border-radius:var(--radius-sm); white-space:nowrap; }
.price-card .pc-amt{ font-family:var(--font-mono); font-size:88px; font-weight:var(--weight-black); line-height:1; letter-spacing:var(--tracking-tighter); background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.price-card .pc-amt-sub{ font-size:var(--text-body-lg); color:var(--text-secondary); margin-top:var(--space-2); }
.price-card .pc-terms{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-2); margin:var(--space-5) 0 var(--space-8); }
.pc-pill{ font-family:var(--font-mono); font-size:var(--text-caption); color:var(--text-secondary); background:var(--bg-subtle); border:1px solid var(--border-subtle); border-radius:var(--radius-full); padding:var(--space-1) var(--space-3); }
.pc-list{ list-style:none; padding:0; margin:0 0 var(--space-8); display:flex; flex-direction:column; gap:var(--space-3); text-align:left; }
.pc-list li{ display:flex; gap:var(--space-3); align-items:flex-start; font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-snug); }
.pc-list li .ck{ flex:none; width:20px; height:20px; border-radius:var(--radius-full); background:var(--color-success-bg); color:var(--color-success-text); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:var(--weight-bold); margin-top:1px; }
.price-card .btn{ width:100%; }
.price-card-note{ text-align:center; max-width:520px; margin:var(--space-8) auto 0; font-size:var(--text-body-sm); color:var(--text-tertiary); font-style:italic; }

/* ── Covers / doesn't cover (icon + headline + description) ── */
.cover-feats{ display:grid; grid-template-columns:1fr; gap:var(--space-5) var(--space-8); max-width:920px; margin-inline:auto; }
@media (min-width:680px){ .cover-feats{ grid-template-columns:1fr 1fr; } }
.cf-item{ display:flex; gap:var(--space-3); align-items:flex-start; }
.cf-ic{ flex:none; width:24px; height:24px; border-radius:var(--radius-full); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:var(--weight-bold); margin-top:2px; }
.cf-item.yes .cf-ic{ background:var(--color-success-bg); color:var(--color-success-text); }
.cf-item.no .cf-ic{ background:var(--border-subtle); color:var(--text-tertiary); }
.cf-item h3{ font-size:var(--text-body); margin-bottom:2px; }
.cf-item p{ font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-relaxed); }
.cf-item.no h3{ color:var(--text-secondary); }

/* tier name on pricing card */
.pc-tier{ font-family:var(--font-display); font-size:var(--text-h4); font-weight:var(--weight-semibold); color:var(--text-secondary); margin-bottom:var(--space-3); }

/* ── Covers / doesn't cover ── */
.covers-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-6); max-width:920px; margin-inline:auto; }
@media (min-width:760px){ .covers-grid{ grid-template-columns:3fr 2fr; align-items:start; } }
.covers-card{ background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); padding:var(--space-8); }
.covers-card.yes{ border-top:3px solid var(--color-success); }
.covers-card.no{ border-top:3px solid var(--text-tertiary); background:var(--bg-subtle); }
.covers-card h3{ font-size:var(--text-h4); margin-bottom:var(--space-5); }
.covers-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--space-3); }
.covers-list li{ display:flex; gap:var(--space-3); align-items:flex-start; font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-snug); }
.covers-list li .ic{ flex:none; width:18px; height:18px; border-radius:var(--radius-full); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:var(--weight-bold); margin-top:1px; }
.covers-card.yes .ic{ background:var(--color-success-bg); color:var(--color-success-text); }
.covers-card.no .ic{ background:var(--border-subtle); color:var(--text-tertiary); }
.covers-note{ text-align:center; max-width:680px; margin:var(--space-10) auto 0; font-size:var(--text-body); color:var(--text-secondary); font-style:italic; }
.covers-note a{ font-style:normal; }

/* ── Payment terms 3-col ── */
.terms-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-6); max-width:980px; margin-inline:auto; }
@media (min-width:760px){ .terms-grid{ grid-template-columns:repeat(3,1fr); } }
.term-card{ background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-6); }
.term-icon{ width:40px; height:40px; border-radius:var(--radius-md); background:var(--brand-purple-light); color:var(--brand-purple); display:inline-flex; align-items:center; justify-content:center; margin-bottom:var(--space-4); }
.term-icon svg{ width:20px; height:20px; }
.term-card h3{ font-size:var(--text-h4); margin-bottom:var(--space-2); }
.term-card p{ font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-relaxed); }