.pricing-page { padding: 60px 0; background: #f8fafc; min-height: 80vh; }
.pricing-header { text-align: center; margin-bottom: 60px; }
.pricing-header h1 { font-size: 2.5rem; margin: 0 0 10px; color: #1e293b; }
.pricing-header p { font-size: 1.15rem; color: #64748b; margin: 0 0 24px; }
.billing-toggle { display: inline-flex; background: #fff; border-radius: 10px; padding: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.toggle-btn { background: transparent; border: 0; padding: 10px 24px; font-weight: 600; color: #64748b; cursor: pointer; border-radius: 8px; transition: all 0.2s; }
.toggle-btn.active { background: #f97316; color: #fff; }
.save-badge { display: inline-block; background: #10b981; color: #fff; font-size: 0.75rem; padding: 2px 8px; border-radius: 12px; margin-left: 6px; font-weight: 500; }
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 380px)); justify-content: center; gap: 24px; margin: 0 auto 80px; max-width: 820px; }
.plan-card { background: #fff; border-radius: 16px; padding: 36px 28px; position: relative; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: transform 0.2s; display: flex; flex-direction: column; }
.plan-card > .btn { margin-top: auto; align-self: flex-start; }
.plan-card.featured > .btn { align-self: stretch; text-align: center; }
.plans-grid { align-items: stretch; }
.plan-card:hover { transform: translateY(-4px); }
.plan-card.featured { border: 2px solid #f97316; }
.popular-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #f97316; color: #fff; font-size: 0.75rem; font-weight: 600; padding: 4px 14px; border-radius: 999px; }
.plan-card h3 { font-size: 1.5rem; margin: 0 0 10px; color: #1e293b; }
.plan-price { font-size: 2.5rem; font-weight: 700; color: #1e293b; margin: 10px 0; }
.plan-price .period { font-size: 1rem; color: #94a3b8; font-weight: 400; }
.plan-price .plan-custom { font-size: 2rem; }
.plan-desc { color: #64748b; margin: 0 0 24px; font-size: 0.95rem; }
.plan-features { list-style: none; padding: 0; margin: 0 0 30px; }
.plan-features li { padding: 8px 0; color: #475569; border-bottom: 1px solid #f1f5f9; font-size: 0.95rem; }
.plan-features li:last-child { border: 0; }
.btn-plan { width: 100%; padding: 12px; background: #fff; border: 2px solid #f97316; color: #f97316; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-plan:hover { background: #fff7ed; }
.btn-plan.btn-featured { background: #f97316; color: #fff; }
.btn-plan.btn-featured:hover { background: #ea580c; }
.pricing-faq { max-width: 800px; margin: 0 auto; }
.pricing-faq h2 { text-align: center; font-size: 2rem; margin: 0 0 40px; color: #1e293b; }
.faq-item { background: #fff; border-radius: 10px; padding: 24px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.faq-item h4 { margin: 0 0 10px; color: #1e293b; font-size: 1.05rem; }
.faq-item p { margin: 0; color: #475569; line-height: 1.6; }
@media (max-width: 900px) { .plans-grid { grid-template-columns: 1fr; } }

/* ============================================ */
/* PRICING ENHANCEMENT LAYER (Udacity-inspired) */
/* Purely additive - safe to remove if needed   */
/* ============================================ */

.pricing-page { background: linear-gradient(180deg, #f8fafc 0%, #eef3f9 100%); min-height: 100vh; }
.pricing-header h1 { font-size: clamp(36px, 4.4vw, 60px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; }
.pricing-header p { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; opacity: 0.85; }

.billing-toggle { background: #fff; padding: 6px; border-radius: 100px; box-shadow: 0 2px 8px rgba(15,23,42,0.06); display: inline-flex; }
.toggle-btn { transition: background 200ms ease, color 200ms ease, transform 160ms ease; border-radius: 100px; padding: 8px 18px; font-weight: 700; }
.toggle-btn.active { background: #f97316; color: #fff; box-shadow: 0 2px 8px rgba(249,115,22,0.30); }
.toggle-btn:not(.active):hover { background: rgba(249,115,22,0.08); color: #f97316; }
.save-badge { background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; padding: 2px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; box-shadow: 0 2px 6px rgba(22,163,74,0.3); animation: pulse-glow 2.4s ease-in-out infinite; }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 2px 6px rgba(22,163,74,0.3); } 50% { box-shadow: 0 2px 14px rgba(22,163,74,0.6); } }

.plans-grid { gap: 24px; }
.plan-card { background: #fff; border-radius: 20px; padding: 32px; box-shadow: 0 1px 3px rgba(15,23,42,0.05), 0 4px 12px rgba(15,23,42,0.06); transition: transform 280ms cubic-bezier(.2,.8,.2,1), box-shadow 280ms ease, border-color 280ms ease; position: relative; }
.plan-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(15,23,42,0.12); }
.plan-card.featured { border: 2px solid #f97316; transform: translateY(-4px); box-shadow: 0 12px 32px rgba(249,115,22,0.18); position: relative; overflow: visible; }
.plan-card.featured::before { content: ''; position: absolute; inset: -2px; border-radius: 22px; background: linear-gradient(135deg, rgba(249,115,22,0.20), rgba(249,115,22,0)); z-index: -1; pointer-events: none; }
.plan-card.featured:hover { transform: translateY(-10px); box-shadow: 0 24px 48px rgba(249,115,22,0.25); }
.popular-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #f97316, #fb923c); color: #fff; padding: 6px 16px; border-radius: 100px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(249,115,22,0.45); }

.plan-price { font-size: clamp(40px, 4vw, 56px); font-weight: 800; letter-spacing: -0.025em; line-height: 1; }
.period { font-size: 14px; font-weight: 600; opacity: 0.65; }
.plan-features { list-style: none; padding: 0; }
.plan-features li { padding: 8px 0; transition: color 160ms ease, transform 160ms ease; }
.plan-features li:hover { color: #1566c0; transform: translateX(2px); }

.btn-plan { width: 100%; padding: 14px 22px; border-radius: 12px; font-weight: 700; font-size: 15px; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.btn-plan:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,23,42,0.12); }
.btn-featured { background: linear-gradient(135deg, #f97316, #fb923c); color: #fff; box-shadow: 0 4px 14px rgba(249,115,22,0.35); }
.btn-featured:hover { box-shadow: 0 10px 24px rgba(249,115,22,0.50); }

.faq-item { background: #fff; border-radius: 14px; padding: 18px 20px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(15,23,42,0.04); transition: box-shadow 200ms ease, transform 200ms ease; }
.faq-item:hover { box-shadow: 0 4px 14px rgba(15,23,42,0.08); transform: translateY(-1px); }

/* === Pricing rebuild additions === */
.pricing-hero{padding:40px 0 24px;text-align:center}
.pricing-hero h1{font-size:2rem;margin:0 0 12px;color:var(--text-primary,#0f172a)}
.pricing-hero .lead{max-width:780px;margin:0 auto;color:var(--text-secondary,#475569);line-height:1.6}
.pricing-section{margin:48px 0}
.pricing-section h2{font-size:1.5rem;margin:0 0 8px;color:var(--text-primary,#0f172a)}
.pricing-section .muted{color:var(--text-secondary,#64748b);margin:0 0 20px;line-height:1.55}
.pricing-section .small{font-size:.875rem}
.plans-grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.table-wrap{overflow-x:auto;border:1px solid #e2e8f0;border-radius:12px}
.pricing-table{width:100%;border-collapse:collapse;background:#fff;font-size:.95rem}
.pricing-table th,.pricing-table td{padding:12px 16px;text-align:left;border-bottom:1px solid #e2e8f0}
.pricing-table thead th{background:#f1f5f9;color:#0f172a;font-weight:600}
.pricing-table tbody tr:last-child th,.pricing-table tbody tr:last-child td{border-bottom:none}
.pricing-table tbody th{font-weight:500;color:#0f172a}
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.check-list li{padding-left:22px;position:relative;color:#334155}
.check-list li::before{content:"✓";position:absolute;left:0;color:#0ea5e9;font-weight:700}
details{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;margin:8px 0}
details>summary{cursor:pointer;font-weight:600;color:#0f172a}
details>p{margin:8px 0 0;color:#475569;line-height:1.55}
.footer-disclaimer{font-size:.8rem;color:#94a3b8;line-height:1.5;max-width:900px;margin:0 auto 8px;padding:0 12px;text-align:center}

/* Software & Enterprise Seats tiles - added v=21 */
#software .section-subtitle { color: #555; max-width: 720px; margin: 0 0 28px; line-height:1.55; }
.pricing-tier-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 380px)); justify-content: center; gap: 24px; margin: 8px auto 32px; max-width: 820px; }
@media (max-width: 880px) { .pricing-tier-grid { grid-template-columns: 1fr; } }
.tier-card { position:relative; background:#fff; border:1px solid #e6e6e6; border-radius:12px; padding:28px 24px 24px; display:flex; flex-direction:column; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.tier-card h3 { margin:0 0 12px; font-size:20px; color:#0a0a0a; }
.tier-featured { border-color: #f6921e; box-shadow: 0 4px 16px rgba(246,146,30,0.18); }
.tier-badge { position:absolute; top:-12px; left:24px; background:#f6921e; color:#fff; font-size:12px; font-weight:600; letter-spacing:0.04em; padding:4px 10px; border-radius:999px; text-transform:uppercase; }
.tier-price { display:flex; align-items:baseline; gap:6px; margin: 4px 0 18px; }
.tier-price .amount { font-size:36px; font-weight:800; color:#0a0a0a; letter-spacing:-0.02em; }
.tier-price .period { font-size:14px; color:#666; }
.tier-features { list-style:none; padding:0; margin:0 0 20px; flex:1; }
.tier-features li { padding:6px 0 6px 22px; position:relative; color:#333; font-size:14px; line-height:1.45; }
.tier-features li::before { content:""; position:absolute; left:0; top:11px; width:14px; height:8px; border-left:2px solid #f6921e; border-bottom:2px solid #f6921e; transform:rotate(-45deg); }
.tier-cta { align-self:stretch; text-align:center; }

#software { scroll-margin-top: 110px; }
/* Card layout polish: equal-height with CTA anchored to bottom (Issue #48) */
.plan-card { display: flex; flex-direction: column; }
.plan-card > a.btn, .plan-card > .btn { margin-top: auto; align-self: flex-start; }
.tier-card > a.tier-cta, .tier-card .tier-cta { margin-top: auto; }

/* Center section headers + cards together (Issue #49) */
.pricing-section h2, #software h2 { text-align: center; }
.pricing-section > p.muted, #software .section-subtitle { text-align: center; margin-left: auto; margin-right: auto; }

/* Issue #50: Stop billing toggles from stretching to full card width */
.plan-card [role="radiogroup"], .tier-card [role="radiogroup"] { align-self: flex-start; }