/* Pricing page specific styles */
.pricing-hero { position: relative; min-height: 560px; padding: 60px 0; }
.pricing-bg { position:absolute; inset:0; background-size: cover; background-position: center; filter: saturate(.95) brightness(.98); z-index:0; opacity:0.95; }
.pricing-container { position:relative; z-index:2; display:grid; grid-template-columns: 440px 1fr; gap:28px; align-items:start; }
.left-panel { max-width:440px; padding:12px 6px; background: transparent; }
.left-panel .title { font-size:64px; margin:6px 0 12px; color:#1f2933; font-weight:800; }
.left-panel .subtitle { font-weight:700; color: #374151; margin-bottom:6px; }
.left-panel .lead { color:#475569; margin-bottom:18px; max-width:380px; }
.contact-box { display:flex; flex-direction:column; gap:14px; margin-top:10px; }
.contact-box input, .contact-box textarea { border-radius:28px; padding:14px 20px; border:1px solid rgba(16,24,32,.12); background: rgba(255,255,255,0.92); color:#111; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 rgba(0,0,0,0.02); }
.contact-box textarea { min-height:100px; }
.contact-box .btn-primary { border-radius:28px; padding:12px 18px; background: rgba(255,255,255,0.95); color:#111; border:2px solid rgba(0,0,0,0.5); box-shadow: 0 4px 0 rgba(0,0,0,0.04); }

.right-panel.pricing-card { padding:20px 22px; background: transparent; }
.credit-flow { display:flex; align-items:center; gap:14px; justify-content:flex-start; }
.credit-flow img { max-height:64px; display:block; opacity:0.95; }
.packages { display:flex; gap:22px; margin-top:22px; justify-content:flex-start; }
.pkg { background: rgba(255,255,255,0.98); border-radius:12px; padding:16px 18px; display:flex; gap:16px; align-items:center; flex:1 1 260px; box-shadow: 0 8px 22px rgba(15,17,23,.06); border:1px solid rgba(16,24,32,.06); }
.pkg img { width:64px; height:auto; flex-shrink:0; }
.pkg-body { display:flex; flex-direction:column; gap:6px; }
.pkg-title { font-weight:700; color:#111827; font-size:1rem; }
.pkg-amount { font-size:1.05rem; font-weight:800; color:#0f172a; }
.pkg-price { color:#374151; font-size:0.98rem; }

.separator { border:none; height:1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06) 20%, rgba(0,0,0,0.06) 80%, transparent); margin:18px 0; }

@media (max-width:980px){
  .pricing-container { grid-template-columns: 1fr; }
  .left-panel { order:2; }
  .right-panel { order:1; }
  .packages { flex-direction:column; }
}

.sr-only { position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
/* Pricing page specific styles */
body.pricing-page {
  background-image: url('../images/web_assets/background.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.pricing-complete {
  width: 100%;
  height: auto;
}

.footer-small { color: #5b6b78; margin-top: 36px; }

/* Pricing card panel inside site hero */
.pricing-card-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,245,247,0.98));
  border-radius: 12px;
  padding: 18px 18px 20px;
  max-width: 820px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.06);
}
.pricing-card-panel.bare {
  background: transparent;
  box-shadow: none;
  border: 0;
  /* extra left gutter so the first card doesn't touch the text column */
  padding: 0 8px 0 28px;
}
.pricing-card-panel.bare .plans-grid { margin-top: 0; }
.pricing-card-panel .card-header { display:flex; gap:14px; align-items:center; padding-bottom:6px; }
.pricing-card-panel .card-header .big { font-size:22px; font-weight:800; color:#0f172a; }
.pricing-card-panel .card-header .small { font-size:13px; color:#6b7280; margin-top:6px; }
.pricing-card-panel .packages { margin-top:14px; display:flex; gap:18px; }
.pricing-card-panel .pkg { background:#ffffff; border-radius:10px; padding:18px 20px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.06); display:flex; flex-direction:column; gap:8px; align-items:flex-start; min-width:220px; }
.pricing-card-panel .pkg .pkg-title{ font-size:14px; color:#374151; font-weight:700; }
.pricing-card-panel .pkg .pkg-amount{ font-weight:900; font-size:26px; color:#0f172a; }
.pricing-card-panel .pkg .pkg-price{ font-size:14px; color:#6b7280; }

/* When using simplified packages layout */
.pricing-card-panel .packages.simple-packages { align-items:stretch; }
.pricing-card-panel .packages.simple-packages .pkg { align-items:flex-start; }

@media (max-width:980px){
  .pricing-card-panel { max-width:100%; }
  .pricing-card-panel .packages { flex-direction:column; }
  /* On mobile, remove the extra left gutter to center content */
  .pricing-card-panel.bare { padding: 0 12px; }
}

/* New professional plan grid */
.plans-grid { display:grid; grid-template-columns: repeat(3, 210px); gap:16px; margin-top:14px; justify-content:center; }
.plan-card { background:#fff; border:1px solid rgba(16,24,40,.08); border-radius:14px; box-shadow: 0 10px 30px rgba(16,24,40,.08); display:flex; flex-direction:column; overflow:hidden; transition: transform .18s ease, box-shadow .18s ease; }
.plan-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(16,24,40,.12); }
.plan-card .plan-header { display:flex; align-items:center; justify-content:center; padding:14px 16px; border-bottom:1px solid rgba(16,24,40,.06); background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,252,0.98)); text-align:center; }
.plan-card .plan-header h3 { margin:0; font-size:16px; font-weight:800; color:#111827; letter-spacing: -.01em; width:100%; text-align:center; }
.plan-card .badge { background:#111827; color:#fff; font-size:11px; letter-spacing:.02em; padding:4px 8px; border-radius:999px; }
.plan-card .badge.muted { background:rgba(17,24,39,.08); color:#374151; }
.plan-card.featured { border:2px solid rgba(17,24,39,.85); box-shadow: 0 12px 36px rgba(16,24,40,.14); }
.plan-card .plan-main { padding:16px; display:flex; flex-direction:column; gap:12px; min-height: 200px; flex: 1 1 auto; }
.plan-card .amount { font-weight:900; font-size:24px; color:#0f172a; text-align:center; }
.plan-card .price-row { display:flex; flex-direction: column; align-items:center; gap:4px; text-align:center; }
.plan-card .price { font-size:28px; font-weight:900; color:#0f172a; }
.plan-card .price .unit { font-size:.65em; font-weight:700; opacity:.7; margin-left:2px; }
.plan-card .per-credit { color:#6b7280; font-size:13px; white-space: nowrap; }
.plan-card .features { margin:4px 0 2px; padding-left:18px; color:#475569; font-size:14px; }
.plan-card .btn-buy { align-self:center; margin-top:auto; margin-bottom: 2px; min-width: 120px; text-align:center; border-radius:999px; }

@media (max-width:1200px){
  /* on medium screens, let grid auto-fit up to three columns */
  .plans-grid { grid-template-columns: repeat(3, minmax(210px, 1fr)); justify-content:flex-start; }
}
@media (max-width:980px){
  .plans-grid { grid-template-columns: 1fr; justify-content:stretch; }
}

/* Nicely formatted equation to the left of plans */
.equation { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 20px; }
.equation .eq-chip { background: rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.08); padding:6px 10px; border-radius:999px; font-weight:700; color:#0f172a; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.equation .eq-op { color:#6b7280; font-weight:800; letter-spacing:.02em; }
.equation-center { justify-content:center; }