/* ── Pricing grid: equal heights + CTA baseline align ── */
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; align-items: stretch; }
.pricing-grid--4col { /* alias kept for backward compat */ }
@media (max-width: 980px) { .pricing-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .pricing-grid { grid-template-columns: 1fr; } }

.plan {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.plan-name, .plan-price, .plan-desc, .plan-features, .plan-cta { min-width: 0; }
.plan-features { flex: 1 1 auto; }            /* grow to fill, push CTA to bottom */
.plan-cta { margin-top: auto; align-self: stretch; text-align: center; }
.plan.featured, .plan[data-tier="vip"] {
  outline: 2px solid rgba(0,118,255,.36);
  transform: translateY(-8px);
}
.plan[data-tier="vip"] { box-shadow: 0 18px 44px rgba(0,118,255,.18); }

/* ── FAQ-funnel: 2-col layout (QAs + capture card) ── */
.faq-funnel .section-inner { gap: 18px; }
.faq-funnel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
@media (max-width: 980px) {
  .faq-funnel-grid { grid-template-columns: 1fr; }
}

/* Q&A column */
.faq-funnel-qa { display: grid; gap: 14px; }
.faq-funnel-qa .faq-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  padding: 14px 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.faq-funnel-qa .faq-item:hover { border-color: rgba(0,118,255,.36); box-shadow: 0 8px 24px rgba(0,79,196,.10); }
.faq-funnel-qa .faq-item[open] { background: #fff; border-color: rgba(0,118,255,.36); }
.faq-funnel-qa .faq-q {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-weight: 800; color: var(--fg); font-size: 16px;
}
.faq-funnel-qa .faq-q::-webkit-details-marker { display: none; }
.faq-funnel-qa .faq-q::marker { content: ''; }
.faq-funnel-qa .faq-toggle { font-size: 22px; color: var(--blue); font-weight: 900; transition: transform .15s ease; }
.faq-funnel-qa .faq-item[open] .faq-toggle { transform: rotate(45deg); }
.faq-funnel-qa .faq-a { color: var(--muted); line-height: 1.55; margin: 10px 0 12px; font-size: 15px; }
.faq-step-cta {
  display: inline-block;
  margin-top: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0,118,255,.10);
  color: var(--blue);
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  border: 1px solid rgba(0,118,255,.28);
  transition: background .15s ease, transform .15s ease;
}
.faq-step-cta:hover { background: rgba(0,118,255,.18); transform: translateY(-1px); }
.faq-step-cta:focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; }

/* Capture card on the right (sticky on desktop) */
.faq-funnel-capture {
  position: sticky; top: 16px;
  padding: 22px 22px 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, #0a1f4d 0%, #071f55 100%);
  color: #fff;
  box-shadow: 0 18px 44px rgba(7,31,85,.30);
  display: grid; gap: 12px;
}
@media (max-width: 980px) {
  .faq-funnel-capture { position: static; }   /* unstick on mobile */
}
.faq-funnel-capture-eyebrow {
  display: inline-block; align-self: start;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #eaf3ff;
  font-size: 12px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.faq-funnel-capture-h {
  margin: 0; font-size: clamp(1.4rem, 2vw, 1.7rem); font-weight: 800; line-height: 1.2;
}
.faq-funnel-capture-sub { margin: 0; color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.5; }
.faq-funnel-form { display: flex; gap: 8px; flex-wrap: wrap; }
.faq-funnel-input {
  flex: 1 1 180px; min-width: 0;
  height: 44px; padding: 0 14px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.10); color: #fff;
  font: inherit; font-size: 15px; outline: none;
}
.faq-funnel-input::placeholder { color: rgba(255,255,255,.65); }
.faq-funnel-input:focus { border-color: #66b1ff; background: rgba(255,255,255,.18); }
.faq-funnel-cta {
  flex: 1 1 140px; min-width: 0;
  height: 44px; padding: 0 18px;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #2a8aff, #0064d8) !important;
  color: #fff !important; border: none !important;
  font-size: 15px; font-weight: 800;
  box-shadow: 0 8px 22px rgba(0, 80, 200, .45);
  cursor: pointer;
}
.faq-funnel-cta:hover { filter: brightness(1.08); }
.faq-funnel-cta:focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; }
.faq-funnel-ladder {
  list-style: none; padding: 10px 0 0; margin: 4px 0 0;
  border-top: 1px dashed rgba(255,255,255,.22);
  display: grid; gap: 6px;
  font-size: 13px; color: rgba(255,255,255,.86);
}
.faq-funnel-ladder b { color: #ffd400; font-weight: 800; }
.faq-funnel-ladder li[data-tier="vip"] b { color: #ffe65c; }
.faq-funnel-trust {
  font-size: 12px; color: rgba(255,255,255,.72);
  border-top: 1px dashed rgba(255,255,255,.22);
  padding-top: 10px;
}

/* ============================================================
   .section-cta — per-section conversion block (2026-07-15 Dmitrii)
   Pattern: one block drops at the bottom of any section.
   NOT a forbidden-term block (per brief); called Конверсионный блок.
   Per-section form id pattern: cta<section_slug>Capture
   Block ≤110 lines, capped at 350L total CSS.
   ============================================================ */

.section-cta {
  margin-top: 56px;
  padding: 22px 22px 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, #0a1f4d 0%, #071f55 100%);
  color: #fff;
  box-shadow: 0 18px 44px rgba(7,31,85,.30);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 22px;
  align-items: center;
}
@media (max-width: 720px) {
  .section-cta {
    grid-template-columns: 1fr;
    padding: 20px;
  }
}
.section-cta-copy { display: grid; gap: 10px; min-width: 0; }
.section-cta-eyebrow {
  display: inline-block; align-self: start;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #eaf3ff;
  font-size: 12px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.section-cta-h {
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 800; line-height: 1.2;
}
.section-cta-sub {
  margin: 0; color: rgba(255,255,255,.85);
  font-size: 14px; line-height: 1.5;
}
.section-cta-form {
  display: flex; gap: 8px; flex-wrap: wrap;
  min-width: 0;
}
.section-cta-input {
  flex: 1 1 180px; min-width: 0;
  height: 44px; padding: 0 14px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.10); color: #fff;
  font: inherit; font-size: 15px; outline: none;
}
.section-cta-input::placeholder { color: rgba(255,255,255,.65); }
.section-cta-input:focus { border-color: #66b1ff; background: rgba(255,255,255,.18); }
.section-cta-btn {
  flex: 1 1 140px; min-width: 0;
  height: 44px; padding: 0 18px;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #2a8aff, #0064d8) !important;
  color: #fff !important; border: none !important;
  font-size: 15px; font-weight: 800;
  box-shadow: 0 8px 22px rgba(0, 80, 200, .45);
  cursor: pointer;
}
.section-cta-btn:hover { filter: brightness(1.08); }
.section-cta-btn:focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; }
.section-cta-ladder {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: grid; gap: 4px;
  font-size: 12px; color: rgba(255,255,255,.86);
  grid-column: 1 / -1;
}
.section-cta-ladder b { color: #ffd400; font-weight: 800; }
.section-cta-ladder li[data-tier="vip"] b { color: #ffe65c; }
.section-cta-trust {
  grid-column: 1 / -1;
  font-size: 12px; color: rgba(255,255,255,.72);
  padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,.22);
}

/* ============================================================
   .section-cta progressive blue tones (2026-07-15 Dmitrii brief 6)
   After CTA deduplication: 3 forms total. Each gets a distinct
   shade so the user sees them as a ladder, not duplicates.
   Tones: tone-1 (deepest, default), tone-2 (mid), tone-3 (lightest).
   Text contrast ≥4.5:1 in BOTH light and dark mode (white text on
   blue gradient passes WCAG AA at all 3 tones).
   ============================================================ */

.section-cta[data-cta-tone="2"] {
  background: linear-gradient(180deg, #1d4f8a 0%, #134373 100%);
  box-shadow: 0 18px 44px rgba(19,67,115,.28);
}
.section-cta[data-cta-tone="3"] {
  background: linear-gradient(180deg, #4b7fc1 0%, #3465a8 100%);
  box-shadow: 0 18px 44px rgba(52,101,168,.26);
}