/* =============================================================
   BulletPROOF — Pricing Page (Minimal Newsroom Aesthetic)
   Reuses your site variables and component vocabulary
   ========================================================== */

:root{
  --paper:#faf9f7;
  --ink:#111827;
  --subink:#374151;
  --accent-blue:#2b6cb0;
  --accent-red:#d7263d;
  --soft:#f3f4f6;
  --line:#e5e7eb;
  --good:#16a34a;
  --warn:#f59e0b;
  --bad:#ef4444;
}

html,body{scroll-behavior:smooth}

.navlink{
  color:#4b5563; padding:6px 0; position:relative;
}
.navlink::after{
  content:''; position:absolute; left:0; bottom:-6px;
  width:0%; height:2px; background:var(--accent-blue);
  transition:width .25s ease;
}
.navlink:hover{color:var(--ink)}
.navlink:hover::after{width:100%}

.btn{font-weight:600; padding:.6rem 1rem; border-radius:.5rem; transition:all .2s ease; border:1px solid transparent}
.btn-primary{background:linear-gradient(90deg, #3b82f6, var(--accent-blue)); color:#fff; box-shadow:0 8px 24px rgba(43,108,176,.18)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 12px 30px rgba(43,108,176,.25)}
.btn-outline{background:#fff; color:var(--ink); border-color:#d1d5db}
.btn-outline:hover{background:#f9fafb}
.btn-subtle{background:#fff; border:1px solid #e5e7eb; color:var(--ink)}
.btn-subtle:hover{background:#f9fafb}

.badge{display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:28px; padding:0 .5rem; border-radius:999px; font-weight:700; color:#fff; font-size:.85rem}
.badge-good{background:#22c55e}
.badge-warn{background:#f59e0b}
.badge-bad{background:#ef4444}

.notice{
  background:#fff; border:1px solid #e5e7eb; border-radius:.75rem; padding:1rem 1.25rem;
  box-shadow:0 10px 24px rgba(17,24,39,.06);
}

/* Category selector pills */
.cat-pill{
  background:#fff; border:1px solid #e5e7eb; color:#111827;
  padding:.5rem .8rem; border-radius:999px; font-weight:700; font-size:.9rem;
  transition:all .2s ease;
}
.cat-pill:hover{background:#f9fafb}
.cat-pill.active{border-color:var(--accent-blue); color:var(--accent-blue); box-shadow:0 6px 16px rgba(43,108,176,.12)}

/* Plan cards */
.plan-card{
  display:flex; flex-direction:column; justify-content:space-between; height:100%;
  background:#fff; border:1px solid #e5e7eb; border-radius:1rem; padding:1.25rem;
  box-shadow:0 10px 24px rgba(17,24,39,.06); transition:transform .2s ease, box-shadow .2s ease;
}
.plan-card:hover{transform:translateY(-3px); box-shadow:0 16px 32px rgba(17,24,39,.08)}
.plan-card .plan-head h3{font-weight:900; font-size:1.15rem}
.plan-card .kicker{color:#6b7280; font-size:.85rem}
.plan-card .flag{display:inline-block; margin-top:.35rem; font-size:.72rem; font-weight:800; color:#fff; background:var(--accent-blue); padding:.25rem .5rem; border-radius:.35rem}
.plan-card .price{font-size:1.9rem; font-weight:900; color:#111827; margin:.5rem 0}
.plan-card .price .unit{font-size:.9rem; color:#6b7280; font-weight:600; margin-left:.25rem}
.plan-card .bullets{margin:.5rem 0 1rem 1.1rem; list-style:disc; color:#4b5563}
.plan-card.featured{border-color:var(--accent-blue)}
.plan-card button{margin-top:auto}

/* Tables solid #e5e7eb */
.table-wrap{overflow-x:auto; border:1px solid #e5e7eb; border-radius:.75rem}
.comp-table{width:100%; border-collapse:separate; border-spacing:0; background:#fff}
.comp-table thead th{ top:0; font-weight:800; text-align:left;
  padding:.9rem; border-bottom:1px ;
}
.comp-table tbody td{padding:.9rem; border-bottom:1px dashed #e5e7eb; color:#374151}
.comp-table th:first-child,.comp-table td:first-child{position:sticky; left:0; background:inherit; font-weight:700}
.comp-table tr:hover td{background:#f9fafb}
.comp-table tr:last-child td{border-bottom:none}

/* Feature cards & FAQ */
.stat-card{background:#fff; border:1px solid #e5e7eb; border-radius:.75rem; padding:1rem; box-shadow:0 10px 24px rgba(17,24,39,.06)}
.faq{background:#fff; border:1px solid #e5e7eb; border-radius:.75rem; padding:1rem}
.faq h4{font-weight:800; margin-bottom:.35rem}
.link{color:var(--accent-blue); text-decoration:underline}

.in{
  width:100%; border:1px solid #e5e7eb; border-radius:.5rem; padding:.6rem .75rem; outline:none;
}
.in:focus{border-color:#cbd5e1; box-shadow:0 0 0 4px rgba(43,108,176,.08)}

/* Utilities */
.hidden{display:none}
.mobilelink{display:block; padding:.5rem .25rem; color:#374151}
.mobilelink:hover{color:#111827}
.reveal{opacity:0; transform:translateY(12px); transition:all .45s ease}
.reveal.visible{opacity:1; transform:translateY(0)}
.header-shadow{box-shadow: 0 10px 24px rgba(17,24,39,.06)!important}