/* Pricing Page Styles */
.pricing-header { text-align: center; margin-bottom: 40px; }
.pricing-header h1 { font-size: 2em; margin: 0 0 8px; }
.pricing-header p { color: var(--hksi-text-light); font-size: 1.1em; margin: 0; }

.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 800px; margin: 0 auto 48px; }

.pricing-card {
    background: var(--hksi-card-bg);
    border-radius: var(--hksi-radius-lg);
    box-shadow: var(--hksi-shadow);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.pricing-card-featured {
    border: 2px solid var(--hksi-primary);
    box-shadow: var(--hksi-shadow-lg);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--hksi-primary);
    color: #fff;
    padding: 4px 16px;
    border-radius: 999px;
    font-size: 0.8em;
    font-weight: 700;
    white-space: nowrap;
}

.pricing-card-header { text-align: center; margin-bottom: 24px; padding-top: 8px; }
.pricing-card-header h2 { font-size: 1.4em; margin: 0 0 12px; }

.pricing-price { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-bottom: 8px; }
.pricing-amount { font-size: 2.5em; font-weight: 800; color: var(--hksi-text); }
.pricing-period { font-size: 1em; color: var(--hksi-text-light); }

.pricing-desc { color: var(--hksi-text-light); font-size: 0.9em; margin: 0; }

.pricing-features { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.pricing-features li {
    padding: 8px 0 8px 28px;
    font-size: 0.9em;
    position: relative;
    border-bottom: 1px solid var(--hksi-gray-lighter);
}
.pricing-features li:last-child { border-bottom: none; }

.pricing-features li::before {
    position: absolute;
    left: 0;
    top: 8px;
    font-size: 1em;
}

.feature-yes::before { content: "\2713"; color: var(--hksi-success); font-weight: 700; }
.feature-no::before { content: "\2717"; color: var(--hksi-gray-light); }
.feature-no { color: var(--hksi-text-light); }

.pricing-action { margin-top: auto; }

/* Already-premium state */
.pricing-current-badge {
    display: inline-block;
    padding: 10px 24px;
    background: var(--hksi-success);
    color: #fff;
    border-radius: var(--hksi-radius);
    font-weight: 700;
    font-size: 0.95em;
    text-align: center;
    width: 100%;
}

/* FAQ */
.pricing-faq { max-width: 800px; margin: 0 auto; }
.pricing-faq h2 { text-align: center; font-size: 1.5em; margin-bottom: 24px; }
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.faq-item { background: var(--hksi-card-bg); padding: 20px; border-radius: var(--hksi-radius); box-shadow: var(--hksi-shadow); }
.faq-item h3 { font-size: 0.95em; margin: 0 0 8px; }
.faq-item p { font-size: 0.85em; color: var(--hksi-text-light); margin: 0; line-height: 1.5; }

@media (max-width: 768px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
    .faq-grid { grid-template-columns: 1fr; }
    .pricing-header h1 { font-size: 1.5em; }
}