/* ══════════════════════════════
   PRICING PAGE — Full Styles
   ══════════════════════════════ */

/* Reveal animation — class-based so inline styles don't override */
.reveal-pending {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal-done {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

/* ── Trust bar ── */
.pricing-trust {
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:0; background:var(--off2); border-radius:16px; overflow:hidden;
  margin-bottom:2.5rem; box-shadow:var(--shadow-sm);
}
.pt-item {
  display:flex; align-items:center; gap:.75rem;
  padding:1.125rem 2rem; flex:1; min-width:180px;
}
.pt-icon { font-size:1.375rem; flex-shrink:0; }
.pt-item strong { display:block; font-size:.9rem; font-weight:700; color:var(--ink); line-height:1.2; }
.pt-item span { font-size:.78rem; color:var(--grey-4); }
.pt-divider { width:1px; height:40px; background:var(--grey-1); flex-shrink:0; }

/* ── Billing toggle ── */
.billing-toggle {
  display:flex; align-items:center; gap:.375rem;
  background:var(--off2); padding:.375rem; border-radius:9999px;
  width:fit-content; margin:0 auto 3rem; box-shadow:inset 0 1px 3px rgba(0,0,0,.06);
}
.btog-btn {
  padding:.625rem 1.5rem; border-radius:9999px; font-size:.9rem; font-weight:600;
  color:var(--grey-4); cursor:pointer; transition:all .25s; background:transparent; border:none;
  display:flex; align-items:center; gap:.5rem;
}
.btog-btn.active { background:#fff; color:var(--green-dd); box-shadow:var(--shadow-sm); }
.btog-save {
  background:var(--green-tint); color:var(--green-ddd);
  border:1px solid var(--green-bdr); border-radius:9999px;
  font-size:.68rem; font-weight:700; padding:.1rem .5rem; letter-spacing:.04em;
}

/* ── Section headers ── */
.pricing-section { margin-bottom:1rem; }
.pricing-eyebrow {
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--green-dd); margin-bottom:.75rem;
}
.pricing-h2 {
  font-family:var(--display); font-size:clamp(1.625rem,3vw,2.25rem); font-weight:800;
  color:var(--ink); letter-spacing:-.025em; margin-bottom:1rem;
}
.pricing-sub {
  font-size:1rem; color:var(--grey-4); line-height:1.8; max-width:720px;
  margin-bottom:2.25rem;
}

/* ── Plan cards ── */
.plans-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }

.plan-card {
  background:#fff; border:1.5px solid var(--grey-1); border-radius:20px;
  padding:2rem; display:flex; flex-direction:column; gap:1rem;
  position:relative; transition:all .35s var(--ease); box-shadow:var(--shadow-sm);
}
.plan-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--green-bdr); }
.plan-card.plan-featured {
  border-color:var(--green-dark); box-shadow:var(--shadow-green);
  background:linear-gradient(160deg,var(--green-pale) 0%,#fff 50%);
}
.plan-popular {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--green); color:var(--ink); font-size:.72rem; font-weight:800;
  padding:.25rem 1rem; border-radius:9999px; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap; box-shadow:var(--shadow-green-sm);
}
.plan-badge {
  font-family:var(--display); font-size:.75rem; font-weight:700;
  color:var(--text-400); text-transform:uppercase; letter-spacing:.08em;
}
.plan-price { display:flex; align-items:baseline; gap:.2rem; }
.plan-currency { font-family:var(--display); font-size:1.25rem; font-weight:700; color:var(--green-dd); }
.plan-amount  { font-family:var(--display); font-size:2.75rem; font-weight:900; color:var(--green-dd); line-height:1; }
.plan-period  { font-size:.875rem; color:var(--grey-4); font-weight:500; }
.plan-sub     { font-size:.8125rem; color:var(--grey-3); margin-top:-.5rem; }
.plan-desc    { font-size:.875rem; color:var(--grey-4); line-height:1.7; }
.plan-divider { height:1px; background:var(--grey-1); margin:.25rem 0; }

.plan-features { display:flex; flex-direction:column; gap:.875rem; flex:1; }
.plan-features li { display:flex; align-items:flex-start; gap:.75rem; }
.plan-features li::before { display:none; }
.pf-check { color:var(--green-dark); font-size:.9rem; flex-shrink:0; margin-top:.1rem; font-weight:700; }
.pf-no    { color:var(--grey-2); font-size:.9rem; flex-shrink:0; margin-top:.1rem; }
.plan-features li > div strong { font-size:.875rem; font-weight:700; color:var(--ink); display:block; margin-bottom:.2rem; }
.plan-features li > div p { font-size:.8rem; color:var(--grey-4); margin:0; line-height:1.55; }
.pf-missing { font-size:.875rem; color:var(--grey-2); }

.plan-cta {
  display:block; text-align:center; padding:.875rem; border-radius:9999px;
  font-weight:700; font-size:.9375rem; transition:all .3s var(--ease);
}
.plan-cta-primary { background:var(--green); color:var(--ink); }
.plan-cta-primary:hover { background:var(--green-d); transform:translateY(-2px); box-shadow:var(--shadow-green); }
.plan-cta-outline { background:transparent; color:var(--green-dd); border:1.5px solid var(--green-dark); }
.plan-cta-outline:hover { background:var(--green-tint); transform:translateY(-2px); }
.plan-cta-note { font-size:.75rem; color:var(--grey-3); text-align:center; margin-top:.375rem; }

/* ── Comparison table ── */
.compare-table { margin-top:2.5rem; }
.ct-title {
  font-family:var(--display); font-size:1rem; font-weight:700; color:var(--ink);
  margin-bottom:1.25rem; text-align:center;
}
.ct-wrap { overflow-x:auto; border-radius:16px; border:1.5px solid var(--grey-1); box-shadow:var(--shadow-sm); }
.ct-wrap table { width:100%; border-collapse:collapse; min-width:600px; }
.ct-wrap thead th {
  padding:.875rem 1rem; background:var(--off); text-align:center;
  font-size:.78rem; font-weight:700; color:var(--grey-4); text-transform:uppercase;
  letter-spacing:.06em; border-bottom:2px solid var(--grey-1);
}
.ct-wrap thead th:first-child { text-align:left; }
.ct-wrap thead th.ct-featured { background:var(--green-tint); color:var(--green-ddd); }
.ct-wrap tbody td {
  padding:.75rem 1rem; font-size:.875rem; color:var(--grey-4);
  border-bottom:1px solid var(--off2); text-align:center; vertical-align:middle;
}
.ct-wrap tbody td:first-child { text-align:left; font-weight:600; color:var(--ink-2); }
.ct-wrap tbody td.ct-featured { background:rgba(10,200,34,.04); font-weight:600; color:var(--green-dd); }
.ct-wrap tbody tr:last-child td { border-bottom:none; padding:1.25rem 1rem; }
.ct-cta {
  display:inline-block; padding:.5rem 1.25rem; border-radius:9999px;
  font-size:.8125rem; font-weight:700; transition:all .25s;
}
.ct-cta-primary { background:var(--green); color:var(--ink); }
.ct-cta-primary:hover { background:var(--green-d); }
.ct-cta-outline { background:transparent; color:var(--green-dd); border:1.5px solid var(--green-dark); }
.ct-cta-outline:hover { background:var(--green-tint); }

/* ── Cybersecurity cards ── */
.cyber-plans-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.5rem; }
.cyber-card {
  background:#fff; border:1.5px solid var(--grey-1); border-radius:20px;
  padding:2rem; display:flex; flex-direction:column; gap:1.125rem;
  position:relative; transition:all .35s var(--ease); box-shadow:var(--shadow-sm);
}
.cyber-card:hover { border-color:var(--green-bdr); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.cyber-card.cyber-featured {
  border-color:var(--green-dark); box-shadow:var(--shadow-green);
  background:linear-gradient(160deg,var(--green-pale) 0%,#fff 55%);
}
.cyber-card.cc-small { padding:1.5rem; }
.cc-popular {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--green); color:var(--ink); font-size:.7rem; font-weight:800;
  padding:.2rem .875rem; border-radius:9999px; white-space:nowrap; letter-spacing:.06em; text-transform:uppercase;
}
.cc-header { display:flex; align-items:flex-start; gap:.875rem; }
.cc-icon { font-size:2rem; flex-shrink:0; }
.cc-name { font-family:var(--display); font-size:1.0625rem; font-weight:800; color:var(--ink); margin-bottom:.25rem; }
.cc-price { font-family:var(--display); font-size:1.375rem; font-weight:900; color:var(--green-dd); }
.cc-desc { font-size:.875rem; color:var(--grey-4); line-height:1.7; }
.cc-features { display:flex; flex-direction:column; gap:.875rem; flex:1; }
.cc-feat { display:flex; align-items:flex-start; gap:.75rem; }
.cc-feat > span { color:var(--green-dark); font-size:.875rem; font-weight:700; flex-shrink:0; margin-top:.1rem; }
.cc-feat > div strong { font-size:.875rem; font-weight:700; color:var(--ink); display:block; margin-bottom:.2rem; }
.cc-feat > div p { font-size:.8rem; color:var(--grey-4); margin:0; line-height:1.55; }

/* ── Web plans ── */
.web-plans-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.web-plan {
  background:#fff; border:1.5px solid var(--grey-1); border-radius:20px;
  padding:2rem; display:flex; flex-direction:column; gap:1rem;
  position:relative; transition:all .35s var(--ease); box-shadow:var(--shadow-sm);
}
.web-plan:hover { border-color:var(--green-bdr); transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.web-plan.wp-featured {
  border-color:var(--green-dark); box-shadow:var(--shadow-green);
  background:linear-gradient(160deg,var(--green-pale) 0%,#fff 55%);
}
.wp-popular {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--green); color:var(--ink); font-size:.72rem; font-weight:800;
  padding:.25rem 1rem; border-radius:9999px; white-space:nowrap; letter-spacing:.06em; text-transform:uppercase;
}
.wp-name  { font-family:var(--display); font-size:1.125rem; font-weight:800; color:var(--ink); }
.wp-price { font-family:var(--display); font-size:2rem; font-weight:900; color:var(--green-dd); line-height:1.1; }
.wp-price span { font-size:.875rem; font-weight:500; color:var(--grey-4); }
.wp-desc { font-size:.875rem; color:var(--grey-4); line-height:1.7; }
.wp-features { display:flex; flex-direction:column; gap:.875rem; flex:1; }
.wp-features li { display:flex; align-items:flex-start; gap:.75rem; }
.wp-features li::before { display:none; }
.wp-features li > div strong { font-size:.875rem; font-weight:700; color:var(--ink); display:block; margin-bottom:.15rem; }
.wp-features li > div p { font-size:.8rem; color:var(--grey-4); margin:0; line-height:1.55; }

/* ── Care plans ── */
.care-section { margin-top:2.5rem; display:flex; flex-direction:column; gap:1.75rem; }
.care-intro h3, .care-h3 {
  font-family:var(--display); font-size:1.375rem; font-weight:800;
  color:var(--ink); letter-spacing:-.02em; margin-bottom:.75rem;
}
.care-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.care-card {
  background:#fff; border:1.5px solid var(--grey-1); border-radius:16px;
  padding:1.75rem; display:flex; flex-direction:column; gap:.875rem;
  position:relative; transition:all .35s var(--ease); box-shadow:var(--shadow-sm);
}
.care-card:hover { border-color:var(--green-bdr); transform:translateY(-3px); }
.care-card.care-featured { border-color:var(--green-dark); background:var(--green-pale); }
.care-popular-tag {
  position:absolute; top:-12px; left:1.375rem;
  background:var(--green); color:var(--ink); font-size:.68rem; font-weight:800;
  padding:.2rem .75rem; border-radius:9999px; letter-spacing:.06em; text-transform:uppercase;
}
.care-name  { font-family:var(--display); font-size:1rem; font-weight:800; color:var(--ink); }
.care-price { font-family:var(--display); font-size:1.625rem; font-weight:900; color:var(--green-dd); }
.care-price span { font-size:.875rem; font-weight:500; color:var(--grey-4); }
.care-desc  { font-size:.8125rem; color:var(--grey-4); line-height:1.6; }
.care-list  { display:flex; flex-direction:column; gap:.4rem; flex:1; }
.care-list li { font-size:.8125rem; color:var(--grey-4); display:flex; gap:.5rem; }
.care-list li::before { display:none; }

/* ── Onboarding steps ── */
.onboard-steps {
  display:flex; align-items:flex-start; gap:.875rem; flex-wrap:wrap;
  margin-top:1.5rem;
}
.ob-step {
  flex:1; min-width:180px;
  background:#fff; border:1.5px solid var(--grey-1); border-radius:16px;
  padding:1.5rem; display:flex; flex-direction:column; gap:.875rem;
  box-shadow:var(--shadow-sm);
}
.ob-num {
  width:40px; height:40px; background:var(--green); color:var(--ink);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:900; font-size:1.125rem; flex-shrink:0;
}
.ob-title { font-family:var(--display); font-size:.9375rem; font-weight:800; color:var(--ink); }
.ob-body p { font-size:.8375rem; color:var(--grey-4); line-height:1.65; margin:0; }
.ob-arrow {
  font-size:1.25rem; color:var(--grey-2); padding-top:2.5rem; flex-shrink:0;
}

/* ── FAQ ── */
.faq-list { display:flex; flex-direction:column; gap:.625rem; max-width:800px; margin:0 auto; }
.faq-item { background:#fff; border:1.5px solid var(--grey-1); border-radius:12px; overflow:hidden; transition:border-color .2s; }
.faq-item.open { border-color:var(--green-bdr); }
.faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:1.125rem 1.375rem; font-size:.9375rem; font-weight:600; color:var(--ink);
  cursor:pointer; background:transparent; border:none; text-align:left; gap:1rem; transition:background .15s;
}
.faq-q:hover { background:var(--off); }
.faq-icon { font-size:1.25rem; color:var(--green-dd); flex-shrink:0; font-weight:400; }
.faq-a {
  max-height:0; overflow:hidden;
  transition:max-height .45s cubic-bezier(.16,1,.3,1), padding .3s;
  font-size:.9rem; color:var(--grey-4); line-height:1.8; padding:0 1.375rem;
}
.faq-item.open .faq-a { max-height:400px; padding:0 1.375rem 1.25rem; }

/* ── Responsive ── */
@media(max-width:1100px) {
  .plans-grid,.web-plans-grid { grid-template-columns:1fr; max-width:560px; margin:0 auto; }
  .cyber-plans-grid { grid-template-columns:1fr; max-width:560px; margin:0 auto; }
  .compare-table { display:none; } /* hide on mobile — too wide */
  .onboard-steps { flex-direction:column; }
  .ob-arrow { display:none; }
  .care-grid { grid-template-columns:1fr; }
  .pt-divider { display:none; }
  .pricing-trust { flex-direction:column; align-items:flex-start; gap:.5rem; padding:.875rem 1.25rem; }
}
@media(max-width:768px) {
  .plans-grid,.web-plans-grid,.cyber-plans-grid { max-width:100%; }
}