/* FinToolbox — Premium landing page. Builds on /css/styles.css tokens + .card/.btn/.tag. */

/* Hero */
.prem-hero { text-align: center; max-width: 720px; margin: 8px auto 40px; }
.prem-hero .badge-row { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
.prem-hero h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.08; margin: 0 0 14px; }
.prem-hero .tagline { font-size: 16px; color: var(--text-2); line-height: 1.6; margin: 0 auto 26px; max-width: 540px; }
.prem-price { display: inline-flex; align-items: baseline; gap: 4px; margin-bottom: 22px; }
.prem-price .amt { font-size: 46px; font-weight: 800; letter-spacing: -0.02em; }
.prem-price .per { font-size: 15px; color: var(--text-3); font-weight: 600; }
.prem-hero .cta-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.prem-hero .reassure { margin-top: 14px; font-size: 12.5px; color: var(--text-4); }

/* Section heads */
.prem-section-head { text-align: center; max-width: 640px; margin: 0 auto 22px; }
.prem-section-head h2 { font-size: 24px; margin: 0 0 8px; }
.prem-section-head p { font-size: 13.5px; color: var(--text-3); margin: 0; line-height: 1.6; }
.prem-section { margin: 48px 0; }

/* Features grid */
.prem-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.prem-feat { padding: 20px; }
.prem-feat .ic {
  width: 38px; height: 38px; border-radius: 9px; background: var(--green-soft);
  display: grid; place-items: center; color: var(--green); margin-bottom: 12px;
}
.prem-feat h4 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.prem-feat p { margin: 0; font-size: 13px; color: var(--text-3); line-height: 1.6; }

/* Comparison table */
.prem-compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; max-width: 760px; margin: 0 auto; }
table.prem-compare { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 480px; }
.prem-compare th, .prem-compare td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.prem-compare thead th { font-size: 13px; font-weight: 700; background: var(--card-2); }
.prem-compare thead th.col-prem { color: var(--green); }
.prem-compare tbody tr:last-child td { border-bottom: none; }
.prem-compare td.cell { text-align: center; width: 110px; }
.prem-compare .feat-name { font-weight: 600; color: var(--text-2); }
.prem-compare .yes { color: var(--green); font-weight: 700; }
.prem-compare .no { color: var(--text-4); }
.prem-compare .col-prem { background: color-mix(in srgb, var(--green) 6%, transparent); }

/* FAQ */
.prem-faq { padding: 26px 28px; max-width: 760px; margin: 0 auto; }
.prem-faq .q { margin-bottom: 16px; }
.prem-faq .q:last-child { margin-bottom: 0; }
.prem-faq .q h3 { margin: 0 0 5px; font-size: 15px; font-weight: 600; }
.prem-faq .q p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.65; }

/* Final CTA band */
.prem-cta {
  text-align: center; padding: 40px 28px; border-radius: 16px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--green) 14%, var(--card)), var(--card));
  border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line)); max-width: 760px; margin: 48px auto 0;
}
.prem-cta h2 { font-size: 24px; margin: 0 0 8px; }
.prem-cta p { font-size: 13.5px; color: var(--text-2); margin: 0 0 20px; }
.prem-cta .note { font-size: 12px; color: var(--text-4); margin-top: 14px; }

@media (max-width: 600px) {
  .prem-section { margin: 36px 0; }
}