/* ================================================================
   Circle Ledger — pricing.css
   Pricing page (pricing/index.html) specific styles.
   Loaded with: shared.css
================================================================ */

/* ── Container (pricing page uses .container not .section_inner) ── */
.container { max-width: 68.75rem; margin: 0 auto; padding: 0 var(--space-6); }
@media (max-width: 768px) { .container { padding: 0 var(--space-5); } }

/* ── Hero ── */
.pricing_hero {
    background: linear-gradient(160deg, var(--teal-950) 0%, var(--teal-800) 60%, var(--teal-700) 100%);
    padding: var(--space-20) var(--space-6) var(--space-16); text-align: center;
}
.pricing_title {
    font-family: var(--font-display); font-size: clamp(var(--text-4xl), 5vw, 3rem);
    font-weight: 700; color: #fff; letter-spacing: -0.03em; margin-bottom: var(--space-4); line-height: 1.1;
}
.pricing_sub { font-size: var(--text-2xl); color: var(--teal-200); line-height: 1.65; max-width: 36rem; margin: 0 auto; }

/* ── Plans section ── */
.pricing_plans { padding: var(--space-16) var(--space-6); }
.plan_grid {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: var(--space-5); align-items: stretch;
}
@media (max-width: 900px) { .plan_grid { grid-template-columns: 1fr; max-width: 28rem; margin: 0 auto; } }

.plan_card_page {
    background: var(--surface); border: var(--border-thin) solid var(--border);
    border-radius: var(--radius-lg); padding: var(--space-7) var(--space-6);
    display: flex; flex-direction: column; position: relative;
    transition: box-shadow var(--t), transform var(--t);
}
.plan_card_page:hover { box-shadow: var(--shadow-md); }
.plan_card_page_popular {
    border-color: var(--teal-500); box-shadow: var(--shadow-lg);
}
.plan_popular_badge {
    position: absolute; top: -0.875rem; left: 50%; transform: translateX(-50%);
    background: var(--teal-600); color: #fff;
    font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill);
    white-space: nowrap;
}
.plan_card_page_header { margin-bottom: var(--space-5); }
.plan_name {
    font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700;
    color: var(--teal-900); margin-bottom: var(--space-1);
}
.plan_tagline { font-size: var(--text-md); color: var(--slate-500); }
.plan_price_wrap { display: flex; align-items: baseline; gap: var(--space-1); margin-bottom: var(--space-1); }
.plan_price {
    font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 700;
    color: var(--teal-900); line-height: 1; letter-spacing: -0.03em;
}
.plan_card_page_popular .plan_price { color: var(--teal-600); }
.plan_price_wrap.plan_price_custom .plan_price { font-size: var(--text-4xl); }
.plan_period { font-size: var(--text-lg); color: var(--slate-400); }
.plan_price_annual { font-size: var(--text-sm); color: var(--teal-600); font-weight: 500; margin-bottom: var(--space-2); }
.plan_founding {
    font-size: var(--text-sm); color: var(--amber-600); font-weight: 600;
    background: var(--amber-50); border-radius: var(--radius-sm);
    padding: var(--space-1-5) var(--space-3); margin-bottom: var(--space-5);
    display: inline-block;
}
.plan_features {
    list-style: none; display: flex; flex-direction: column;
    gap: var(--space-3); flex: 1; margin-bottom: var(--space-6);
}
.plan_features li {
    display: flex; align-items: flex-start; gap: var(--space-2-5);
    font-size: var(--text-md); color: var(--slate-600); line-height: 1.5;
}
.plan_features li i { color: var(--teal-500); flex-shrink: 0; margin-top: var(--space-0-5); }
.plan_feature_no { color: var(--slate-400); }
.plan_feature_no i { color: var(--slate-300); }

/* ── Payment section ── */
.pricing_payment { padding: var(--space-16) var(--space-6); background: var(--slate-50); }
.pricing_payment_inner {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: flex-start;
}
@media (max-width: 768px) { .pricing_payment_inner { grid-template-columns: 1fr; } }
.pricing_payment h2 {
    font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700;
    color: var(--teal-900); letter-spacing: -0.02em; margin-bottom: var(--space-4);
}
.pricing_payment p { font-size: var(--text-lg); color: var(--slate-600); line-height: 1.8; margin-bottom: var(--space-3); }
.pricing_steps { display: flex; flex-direction: column; gap: var(--space-5); }
.pricing_step { display: flex; align-items: flex-start; gap: var(--space-4); }
.pricing_step_num {
    width: 2.25rem; height: 2.25rem; border-radius: 50%; flex-shrink: 0;
    background: var(--teal-600); color: #fff;
    font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.pricing_step strong { display: block; font-size: var(--text-xl); font-weight: 700; color: var(--teal-900); margin-bottom: var(--space-1); }
.pricing_step p { font-size: var(--text-md); color: var(--slate-500); line-height: 1.6; margin: 0; }

/* ── FAQ ── */
.pricing_faq { padding: var(--space-16) var(--space-6); }
.pricing_faq h2 {
    font-family: var(--font-display); font-size: clamp(var(--text-3xl), 3.5vw, var(--text-4xl));
    font-weight: 700; color: var(--teal-900); letter-spacing: -0.025em;
    margin-bottom: var(--space-8); text-align: center;
}
.faq_list { max-width: 44rem; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-2); }
.faq_item {
    background: var(--surface); border: var(--border-thin) solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: box-shadow var(--t);
}
.faq_item[open] { box-shadow: var(--shadow-sm); }
.faq_question {
    font-size: var(--text-lg); font-weight: 600; color: var(--teal-900);
    padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    transition: background var(--t);
}
.faq_question::-webkit-details-marker { display: none; }
.faq_question::after {
    content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: var(--icon-sm); color: var(--teal-600); flex-shrink: 0;
    transition: transform var(--t);
}
.faq_item[open] .faq_question::after { transform: rotate(180deg); }
.faq_question:hover { background: var(--teal-50); }
.faq_answer {
    padding: 0 var(--space-5) var(--space-5);
    font-size: var(--text-md); color: var(--slate-600); line-height: 1.7;
}

/* ── CTA ── */
.pricing_cta {
    background: linear-gradient(135deg, var(--teal-800) 0%, var(--teal-600) 100%);
    padding: var(--space-16) var(--space-6); text-align: center;
}
.pricing_cta h2 {
    font-family: var(--font-display); font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
    font-weight: 700; color: #fff; letter-spacing: -0.025em; margin-bottom: var(--space-3);
}
.pricing_cta p { font-size: var(--text-2xl); color: var(--teal-200); line-height: 1.65; margin-bottom: var(--space-7); }