/* Section shell — transparent, continues the global .site-bg canvas.
   Normal document flow on purpose (no sticky/scroll-track): this is a
   calm, hover/click-driven "doubt terminal", not another scroll-scene —
   the same flow-based robustness configurator settled on, applied here
   from the start instead of rediscovering the same lesson twice. */
.faq {
  position: relative;
  background: transparent;
  font-family: var(--font-body);
  padding: var(--section-padding) 0 calc(var(--section-padding) * 1.5);
}

.faq__container {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--section-padding);
}

/* ===== HUD ===== */
.faq__hud {
  max-width: 680px;
  margin-bottom: 48px;
}

.faq__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: var(--ls-heading);
  margin: 18px 0 0;
  color: var(--color-text-primary-strong);
  text-wrap: balance;
}

.faq__title span {
  color: var(--color-accent);
}

.faq__subtitle {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 14px 0 0;
  max-width: 560px;
}

/* ===== Stage — question list left, answer panel right. The panel sizes
   to its own (now content-rich) height rather than stretching to match
   the taller 10-row list — stretching was the real source of the
   "empty panel" feeling, not just a lack of content. ===== */
.faq__stage {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.faq__list {
  width: 420px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ===== Question row ===== */
.faq-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, var(--color-surface-glass-start), var(--color-surface-glass-end));
  border: 1px solid var(--color-border-soft);
  text-align: left;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s var(--ease-rise);
}

.faq-row:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
}

.faq-row:focus-visible {
  outline: 1.5px solid var(--color-accent);
  outline-offset: 2px;
}

.faq-row.is-active {
  border-color: var(--color-accent-border-strong);
  background: linear-gradient(135deg, rgba(200, 255, 46, .09), rgba(200, 255, 46, .02));
  box-shadow: 0 0 0 1px rgba(200, 255, 46, .08) inset, 0 14px 30px rgba(0, 0, 0, .35);
  transform: translateY(-1px);
}

.faq-row__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  color: var(--color-text-dim-3);
  width: 18px;
  flex-shrink: 0;
  transition: color .25s ease;
}

.faq-row.is-active .faq-row__num {
  color: var(--color-accent);
}

.faq-row__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.faq-row__label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-dim-3);
  transition: color .25s ease;
}

.faq-row.is-active .faq-row__label {
  color: var(--color-accent);
}

.faq-row__question {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-text-primary);
}

.faq-row__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  background: transparent;
  flex-shrink: 0;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.faq-row.is-active .faq-row__dot {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 8px rgba(200, 255, 46, .8);
}

/* ===== Answer panel — sticky so it travels down with the list instead
   of staying pinned at the top while questions 8-10 scroll far below
   it. Bounded automatically by .faq__stage's own height (the flex
   container's content box is this item's containing block), so it
   settles at the bottom of the list once the section ends rather than
   escaping into whatever comes next. ===== */
.faq__panel {
  position: sticky;
  top: calc(var(--header-height) + 32px);
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-mockup);
  overflow: hidden;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-elevated);
}

.faq__panel-scan.is-scanning {
  animation: faqScan .6s ease-out;
}

@keyframes faqScan {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Safe-centering: same fix as configurator's mock — auto margins on the
   content wrapper center short answers vertically but can never push
   tall ones up past the browser-bar, at any content length. */
.faq__panel-body {
  position: relative;
  min-height: 320px;
  padding: 56px 36px 32px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.faq__panel-body > [data-faq-content] {
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
}

/* Staggered reveal for the panel's own content on every question switch */
.faq-rise {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(2px);
  transition: opacity .35s var(--ease-rise), transform .35s var(--ease-rise), filter .35s var(--ease-rise);
}

.faq__panel-body.is-in .faq-rise {
  opacity: 1;
  transform: none;
  filter: none;
}

.faq-rise--1 { transition-delay: .02s; }
.faq-rise--2 { transition-delay: .08s; }
.faq-rise--3 { transition-delay: .14s; }
.faq-rise--4 { transition-delay: .2s; }
.faq-rise--5 { transition-delay: .26s; }

.faq__panel-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--color-accent);
  margin-bottom: 16px;
}

/* Mobile-only twin of .faq__panel-num that lives inside the browser
   bar instead — see the max-width: 1023px block below for why, and
   for where it's shown/where .faq__panel-num hides instead. Hidden
   unconditionally here so it never doubles up with .faq__panel-num on
   desktop. */
.faq__panel-id {
  display: none;
}

.faq__panel-question {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  color: var(--color-text-primary-strong);
  margin: 0 0 16px;
  max-width: 560px;
}

.faq__panel-answer {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-text-dim-5);
  margin: 0 0 22px;
  max-width: 580px;
}

.faq__panel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

/* Reuse the shared floating .chip component inline instead of its
   default absolutely-positioned use elsewhere. */
.faq__panel-chips .chip {
  position: static;
}

/* ===== Thematic visual module — one per question, all sharing this
   floor height so switching between them doesn't feel like a jump.
   Shorter modules (e.g. the Tilda chain) center inside it; taller ones
   (grids, timeline, split) just fill or slightly exceed it. ===== */
.faq-viz {
  min-height: 138px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-faint);
}

.faq-viz__status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .05em;
  color: var(--color-text-dim-3);
}

.faq-viz__status .status-pill__dot {
  flex-shrink: 0;
}

.faq-viz__counter {
  margin-left: auto;
  font-weight: 700;
  color: var(--color-accent);
}

.faq-viz__status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--color-text-dim-3);
}

.faq-viz__arrow {
  color: var(--color-text-dim-3);
  font-family: var(--font-mono);
  font-size: 13px;
  flex-shrink: 0;
}

.faq-viz__arrow--big {
  font-size: 18px;
  color: var(--color-accent);
}

/* -- 01 Tilda: node chain -- */
.faq-viz__chain {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.faq-viz__node {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-dim-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  border-radius: 6px;
  padding: 9px 14px;
  white-space: nowrap;
}

.faq-viz__node--accent {
  color: var(--color-accent-on-accent);
  background: var(--color-accent);
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(200, 255, 46, .45);
}

/* -- 02 Format / 05 Start: small cell grid -- */
.faq-viz__grid {
  display: grid;
  gap: 8px;
}

.faq-viz__grid--6 {
  grid-template-columns: repeat(3, 1fr);
}

.faq-viz__grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.faq-viz__cell {
  padding: 9px 11px;
  border-radius: 7px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.faq-viz__cell b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--color-text-primary);
}

.faq-viz__cell span {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .04em;
  color: var(--color-text-dim-3);
}

.faq-viz__check-cell {
  position: relative;
  width: 100%;
  padding: 9px 11px 9px 30px;
  border-radius: 7px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  font-family: var(--font-body);
  font-size: 11.5px;
  text-align: left;
  color: var(--color-text-dim-4);
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s var(--ease-rise);
}

.faq-viz__check-cell:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
}

.faq-viz__check-cell:focus-visible {
  outline: 1.5px solid var(--color-accent);
  outline-offset: 2px;
}

.faq-viz__check-cell::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  transform: translateY(-50%);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.faq-viz__check-cell.is-done {
  color: var(--color-text-primary);
  border-color: var(--color-accent-border);
}

.faq-viz__check-cell.is-done::before {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 6px rgba(200, 255, 46, .7);
}

/* -- 03 Price: horizontal bar stack -- */
.faq-viz__stack {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.faq-viz__price-row {
  display: grid;
  grid-template-columns: 96px 1fr 78px;
  align-items: center;
  gap: 10px;
}

.faq-viz__price-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--color-text-dim-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.faq-viz__price-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .06);
}

.faq-viz__price-bar {
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(200, 255, 46, .35), var(--color-accent));
}

.faq-viz__price-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9.5px;
  color: var(--color-accent);
  text-align: right;
  white-space: nowrap;
}

/* -- 04 Timing: timeline -- */
.faq-viz__timeline {
  display: flex;
  align-items: flex-start;
}

.faq-viz__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.faq-viz__step-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(200, 255, 46, .14);
  border: 1px solid var(--color-accent-border);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 8.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.faq-viz__step-label {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: .02em;
  color: var(--color-text-dim-3);
  white-space: nowrap;
}

.faq-viz__step-line {
  flex: 1;
  min-width: 8px;
  height: 1px;
  background: var(--color-border-strong);
  margin-top: 9px;
}

/* -- 06 Texts: meaning builder columns -- */
.faq-viz__builder {
  display: flex;
  align-items: center;
  gap: 16px;
}

.faq-viz__builder-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.faq-viz__label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-dim-3);
  margin-bottom: 2px;
}

.faq-viz__tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--color-text-dim-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  border-radius: 4px;
  padding: 5px 9px;
}

.faq-viz__tag--accent {
  color: var(--color-accent);
  background: rgba(200, 255, 46, .07);
  border-color: var(--color-accent-border);
}

/* -- 07 Adaptive: desktop -> mobile -- */
.faq-viz__devices {
  display: flex;
  align-items: center;
  gap: 14px;
}

.faq-viz__device-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-viz__device-col--end {
  flex: 0 0 auto;
}

.faq-viz__device-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-dim-3);
}

.faq-viz__device-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.faq-viz__arrow-label {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .08em;
  color: var(--color-text-dim-3);
  white-space: nowrap;
}

.faq-viz__desktop {
  height: 74px;
  border-radius: 6px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.faq-viz__desktop-menu {
  display: flex;
  gap: 5px;
  margin-bottom: 1px;
}

.faq-viz__desktop-menu span {
  width: 15px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
}

.faq-viz__desktop-menu span:first-child {
  background: var(--color-accent);
}

.faq-viz__desktop-btn {
  align-self: flex-start;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 8px;
  color: var(--color-accent-on-accent);
  background: var(--color-accent);
  padding: 3px 9px;
  border-radius: 3px;
}

.faq-viz__mobile {
  width: 62px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border-strong);
  padding: 9px 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.faq-viz__mobile-cta {
  display: block;
  height: 12px;
  border-radius: 3px;
  background: var(--color-accent);
  margin-bottom: 2px;
}

/* -- 08 Edit: tilda edit panel -- */
.faq-viz__edit-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.faq-viz__edit-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 6px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-dim-4);
}

.faq-viz__edit-icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: rgba(200, 255, 46, .1);
  border: 1px solid var(--color-accent-border);
  color: var(--color-accent);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.faq-viz__edit-icon-rub {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}

/* -- 09 Forms: lead flow -- */
.faq-viz__flow {
  display: flex;
  align-items: center;
  gap: 16px;
}

.faq-viz__mini-form {
  width: 192px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-viz__form-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.faq-viz__form-field-label {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-dim-3);
}

.faq-viz__form-row {
  height: 15px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--color-border-faint);
}

.faq-viz__form-row--tall {
  height: 24px;
}

.faq-viz__form-submit {
  align-self: stretch;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9.5px;
  white-space: nowrap;
  color: var(--color-accent-on-accent);
  background: var(--color-accent);
  padding: 8px 11px;
  border-radius: 4px;
  margin-top: 2px;
  box-shadow: 0 6px 16px rgba(200, 255, 46, .22);
}

.faq-viz__form-ready {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .03em;
  color: var(--color-text-dim-3);
}

.faq-viz__destinations {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.faq-viz__dest {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--color-text-dim-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  border-radius: 5px;
  padding: 7px 10px;
  text-align: center;
}

/* -- 10 Redesign: before / after split -- */
.faq-viz__split {
  position: relative;
  display: flex;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
}

.faq-viz__before,
.faq-viz__after {
  flex: 1;
  min-width: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.faq-viz__before {
  background: rgba(255, 255, 255, .015);
}

.faq-viz__after {
  background: rgba(200, 255, 46, .03);
}

.faq-viz__scanline {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
  flex-shrink: 0;
}

.faq-viz__mini-line {
  position: relative;
  padding-left: 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--color-text-dim-4);
}

.faq-viz__mini-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-border-strong);
  transform: translateY(-50%);
}

.faq-viz__mini-line--accent {
  color: var(--color-text-primary);
}

.faq-viz__mini-line--accent::before {
  background: var(--color-accent);
  box-shadow: 0 0 5px rgba(200, 255, 46, .7);
}

/* ===== Reduced motion — not a scroll-driven section, so there is no
   layout to unwind; just drop the cascade/scan choreography and switch
   instantly. ===== */
@media (prefers-reduced-motion: reduce) {
  .faq-row,
  .faq-row:hover,
  .faq-row.is-active {
    transform: none;
  }

  .faq__panel-scan {
    display: none;
  }

  .faq-rise {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .faq-viz__check-cell,
  .faq-viz__check-cell:hover {
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Responsive — large screens down to phone
   ============================================================ */

@media (max-width: 1199px) {
  .faq__list {
    width: 340px;
  }

  .faq__stage {
    gap: 22px;
  }
}

/* Portrait tablet / phone — the sticky side-panel layout depends on
   there being room beside the list; below 1024px it becomes a rich
   accordion instead. js/faq.js reparents the SAME panel element
   (data-faq-body's container) to sit right after whichever row is
   open — not a rebuilt/duplicated answer, the exact node that already
   renders FAQ_ITEMS[index] on desktop, just moved in the DOM and
   restyled here to sit inline instead of stickied to one side. */
@media (max-width: 1023px) {
  .faq__stage {
    flex-direction: column;
  }

  .faq__list {
    width: 100%;
  }

  /* position:relative (not static) — .browser-bar inside this panel
     (the 3 dots + "ОТВЕТ ГОТОВ") is position:absolute;top:0;left:0 and
     needs THIS element as its containing block. Making the panel
     static here was the reported bug: with no positioned ancestor
     closer than the whole .faq section, the dots jumped all the way
     up to the section's top-left corner and sat on top of the badge
     instead of staying inside the answer card. */
  .faq__panel {
    display: none;
    position: relative;
    top: auto;
    width: 100%;
    margin-top: 8px;
  }

  .faq__panel.is-open {
    display: block;
  }

  .faq__panel-body {
    min-height: 0;
    padding: 26px 20px 24px;
  }

  /* One header row instead of two: dots+status lived in the browser
     bar (position:absolute, top of the panel) while "01 / TILDA" was
     the first line of the regenerated answer content further down —
     visually two separate rows, wasting height and reading as
     disconnected pieces rather than one window chrome. .faq__panel-id
     (updated by text only — see js/faq.js) takes over that same
     label inside the browser bar itself, right after the dots;
     .faq__panel-num (still used as-is on desktop) hides here so it
     isn't duplicated. */
  .faq__panel-id {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--color-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
  }

  .faq__panel-num {
    display: none;
  }
}

@media (max-width: 599px) {
  .faq__panel-body {
    padding: 22px 16px 20px;
  }
}