/* ═══════════════════════════════════════════════════════════════
   Fog Engine Pricing — Light Gradient Card System
   Soft per-plan pastels top to white · Real icon checks · GSAP-ready
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero variant ──────────────────────────────────────────── */
.hero--sub {
  padding: 72px 0 52px !important;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, #dbeafe 0%, transparent 60%),
    #f8faff;
  position: relative;
  overflow: hidden;
}
.hero--sub::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #bfdbfe 1.2px, transparent 1.2px);
  background-size: 30px 30px;
  opacity: .22;
  pointer-events: none;
  will-change: transform;
}
.hero--sub .container { position: relative; z-index: 1; }

/* ── Trust strip ───────────────────────────────────────────── */
.pricing-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  max-width: 640px;
  margin: 32px auto 0;
  box-shadow: 0 2px 8px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.04);
}
.pricing-trust__item {
  flex: 1;
  padding: 18px 12px;
  text-align: center;
  border-right: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.pricing-trust__item:last-child { border-right: none; }
.pricing-trust__icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.pricing-trust__icon svg { width: 14px; height: 14px; stroke: #2563eb; stroke-width: 2; fill: none; }
.pricing-trust__val {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.03em;
  line-height: 1;
}
.pricing-trust__label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
}

/* ── Plans grid ─────────────────────────────────────────────── */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 48px;
  align-items: stretch;
}
.plans-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px;
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

/* ── Plan card base ─────────────────────────────────────────── */
.plan {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  border: 1.5px solid var(--plan-border, #e2e8f0);
  /* Light gradient: soft color top → white bottom */
  background: var(--plan-gradient, linear-gradient(180deg, #f8faff 0%, #ffffff 50%));
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
  position: relative;
}
.plan:hover {
  box-shadow: 0 16px 48px rgba(15,23,42,.11);
  transform: translateY(-4px);
  border-color: var(--plan-accent, #2563eb);
}

/* ── Hood area — sits on the gradient, no own background ───── */
.plan__hood {
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* No background — inherits card gradient */
}
.plan__hood-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.plan__icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--plan-icon-bg, #eff6ff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--plan-icon-border, #bfdbfe);
}
.plan__icon-wrap svg {
  width: 18px;
  height: 18px;
  stroke: var(--plan-accent, #2563eb);
  stroke-width: 2;
  fill: none;
}
.plan__tier {
  font-size: 11px;
  font-weight: 700;
  color: var(--plan-accent, #2563eb);
  letter-spacing: .1em;
  text-transform: uppercase;
  flex: 1;
}
.plan__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--plan-icon-bg, #eff6ff);
  color: var(--plan-accent, #2563eb);
  border: 1px solid var(--plan-icon-border, #bfdbfe);
  white-space: nowrap;
  letter-spacing: .02em;
}
.plan__badge svg {
  width: 10px; height: 10px;
  stroke: var(--plan-accent, #2563eb);
  fill: none;
}
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--plan-divider, rgba(15,23,42,.07));
}
.plan__amt {
  font-size: 44px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.045em;
}
.plan__per {
  font-size: 13.5px;
  font-weight: 500;
  color: #64748b;
}

/* ── Body ────────────────────────────────────────────────────── */
.plan__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 22px 22px;
  gap: 18px;
  background: transparent;
}

/* ── Feature list ────────────────────────────────────────────── */
.plan__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: #334155;
  line-height: 1.4;
}
.plan__check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--plan-check-bg, #ecfdf5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.plan__check svg {
  width: 10px; height: 10px;
  stroke: var(--plan-accent, #059669);
  stroke-width: 2.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── CTA ─────────────────────────────────────────────────────── */
.plan__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 46px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  font-family: inherit;
  transition: background .15s ease, box-shadow .15s ease, transform .12s ease, border-color .15s ease;
  background: var(--plan-btn, #2563eb);
  color: #fff;
}
.plan__cta svg {
  width: 14px; height: 14px;
  stroke: #fff; stroke-width: 2.5; fill: none;
  transition: transform .15s ease;
}
.plan__cta:hover {
  background: var(--plan-btn-hover, #1d4ed8);
  box-shadow: 0 4px 16px var(--plan-shadow, rgba(37,99,235,.28));
  transform: translateY(-1px);
}
.plan__cta:hover svg { transform: translateX(3px); }
.plan__cta--ghost {
  background: transparent;
  color: var(--plan-accent, #475569);
  border-color: var(--plan-border, #e2e8f0);
}
.plan__cta--ghost svg { stroke: var(--plan-accent, #475569); }
.plan__cta--ghost:hover {
  background: var(--plan-icon-bg, #f1f5f9);
  border-color: var(--plan-accent, #94a3b8);
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════
   PLAN THEMES — light gradient system
   Each plan: gradient bg, accent color, icon, button
   ═══════════════════════════════════════════════════ */

.plan--trial {
  --plan-gradient:     linear-gradient(170deg, #f1f5f9 0%, #ffffff 48%);
  --plan-border:       #cbd5e1;
  --plan-accent:       #475569;
  --plan-icon-bg:      #f1f5f9;
  --plan-icon-border:  #cbd5e1;
  --plan-check-bg:     #f1f5f9;
  --plan-divider:      rgba(71,85,105,.1);
  --plan-btn:          #334155;
  --plan-btn-hover:    #1e293b;
  --plan-shadow:       rgba(51,65,85,.22);
}

.plan--daily {
  --plan-gradient:     linear-gradient(170deg, #fffbeb 0%, #ffffff 48%);
  --plan-border:       #fde68a;
  --plan-accent:       #b45309;
  --plan-icon-bg:      #fffbeb;
  --plan-icon-border:  #fcd34d;
  --plan-check-bg:     #fffbeb;
  --plan-divider:      rgba(180,83,9,.1);
  --plan-btn:          #d97706;
  --plan-btn-hover:    #b45309;
  --plan-shadow:       rgba(217,119,6,.3);
}

.plan--weekly {
  --plan-gradient:     linear-gradient(170deg, #ecfdf5 0%, #ffffff 48%);
  --plan-border:       #6ee7b7;
  --plan-accent:       #059669;
  --plan-icon-bg:      #ecfdf5;
  --plan-icon-border:  #a7f3d0;
  --plan-check-bg:     #ecfdf5;
  --plan-divider:      rgba(5,150,105,.1);
  --plan-btn:          #059669;
  --plan-btn-hover:    #047857;
  --plan-shadow:       rgba(5,150,105,.28);
}

.plan--monthly {
  --plan-gradient:     linear-gradient(170deg, #eff6ff 0%, #ffffff 48%);
  --plan-border:       #93c5fd;
  --plan-accent:       #2563eb;
  --plan-icon-bg:      #eff6ff;
  --plan-icon-border:  #bfdbfe;
  --plan-check-bg:     #eff6ff;
  --plan-divider:      rgba(37,99,235,.1);
  --plan-btn:          #2563eb;
  --plan-btn-hover:    #1d4ed8;
  --plan-shadow:       rgba(37,99,235,.28);
  /* Featured ring */
  box-shadow: 0 0 0 2.5px rgba(37,99,235,.25), 0 8px 28px rgba(37,99,235,.1);
}
.plan--monthly:hover {
  box-shadow: 0 0 0 3px rgba(37,99,235,.35), 0 20px 48px rgba(37,99,235,.16);
}

/* Disabled / maintenance */
.plan--disabled { opacity: .6; pointer-events: none; }
.plan--maintenance .plan__cta { cursor: not-allowed; opacity: .7; }
.plan--maintenance .plan__cta:hover { transform: none; box-shadow: none; }

/* ── Payment note ──────────────────────────────────────────── */
.payment-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.payment-note__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #64748b;
  font-weight: 500;
}
.payment-note__item svg {
  width: 14px; height: 14px;
  stroke: #94a3b8; stroke-width: 2; fill: none; flex-shrink: 0;
}
.payment-note__sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #cbd5e1;
  flex-shrink: 0;
}

/* ── Features section — NOT 3 identical white cards ──────────
   Feature 1 (support): blue tinted bg
   Feature 2 (delivery): white with accent stat
   Feature 3 (anti-ban): green tinted bg
   ──────────────────────────────────────────────────────────── */
.pricing-features .feature:nth-child(1) {
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 60%);
  border-color: #bfdbfe;
}
.pricing-features .feature:nth-child(2) {
  background: #fff;
}
.pricing-features .feature:nth-child(3) {
  background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 60%);
  border-color: #a7f3d0;
}

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq {
  display: grid;
  gap: 0;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  max-width: 680px;
  margin: 0 auto;
  background: #fff;
}
.faq__item { border-bottom: 1px solid #f1f5f9; }
.faq__item:last-child { border-bottom: none; }
.faq__item summary {
  padding: 18px 22px;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: background .15s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '';
  flex-shrink: 0;
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform .22s ease;
}
.faq__item[open] > summary::after {
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.faq__item summary:hover { background: #f8faff; }
.faq__item[open] > summary { color: #2563eb; }
.faq__body { padding: 0 22px 18px; font-size: 14px; color: #475569; line-height: 1.7; }
.faq__body a { color: #2563eb; text-decoration: underline; text-underline-offset: 3px; }

/* ── CTA block (overrides landing.css base) ──────────────────── */
.cta-block {
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 55%, #3b82f6 100%);
  border-radius: 24px;
  padding: 44px 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.cta-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.cta-block > * { position: relative; z-index: 1; }
.cta-block h2 { color: #fff !important; font-size: clamp(22px, 3vw, 32px) !important; }
.cta-block p { color: rgba(255,255,255,.72); margin-top: 8px; font-size: 15px; }
.cta-block .btn--primary {
  background: #fff; color: #1d4ed8;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  font-weight: 700;
}
.cta-block .btn--primary:hover { background: #f0f7ff; }
.cta-block .btn--ghost {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.3);
  color: #fff; font-weight: 600;
}
.cta-block .btn--ghost:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.5);
}

/* ── Feature cards ───────────────────────────────────────────── */
.feature {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.feature:hover {
  box-shadow: 0 8px 28px rgba(15,23,42,.09);
  border-color: #bfdbfe;
  transform: translateY(-2px);
}
.feature__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
}
.feature__icon svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; }
.feature__icon.green  { background: #ecfdf5; color: #059669; }
.feature__icon.teal   { background: #f0fdfa; color: #0d9488; }
.feature__icon.violet { background: #f5f3ff; color: #7c3aed; }
.feature__title { font-size: 15.5px; font-weight: 700; color: #0f172a; }
.feature__desc  { font-size: 13.5px; color: #64748b; line-height: 1.65; }

/* ── GSAP animation initial states ──────────────────────────── */
/* Elements start invisible — GSAP brings them in.
   .no-gsap shows them immediately as fallback. */
.gsap-reveal {
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}
.gsap-reveal.gsap-ready { opacity: 1; transform: none; }

/* Loading spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 960px) {
  .cta-block { padding: 36px 32px; }
}
@media (max-width: 900px) {
  .plans { grid-template-columns: repeat(2, 1fr); }
  .pricing-trust { max-width: 100%; }
}
@media (max-width: 640px) {
  .plans { grid-template-columns: 1fr; gap: 14px; }
  .plan__amt { font-size: 38px; }
  .plan--monthly { box-shadow: 0 0 0 2.5px rgba(37,99,235,.25); }
  .pricing-trust { border-radius: 16px; }
  .pricing-trust__item { padding: 14px 8px; }
  .pricing-trust__val { font-size: 17px; }
  .cta-block { padding: 28px 22px; flex-direction: column; align-items: flex-start; }
  .cta-block > div:last-child { display: flex; flex-direction: column; width: 100%; gap: 10px; }
  .cta-block .btn { width: 100%; justify-content: center; }
}
@media (max-width: 400px) {
  .pricing-trust { flex-wrap: wrap; }
  .pricing-trust__item { flex: 1 1 50%; border-right: none; border-bottom: 1px solid #f1f5f9; }
  .pricing-trust__item:nth-child(odd) { border-right: 1px solid #f1f5f9; }
}