/* FAQ page (Figma frame 8263:14005) */

.faq-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 01 Hero (8264:14105) ---------- */

.faq-hero .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-7);
  height: 476px;
  padding-top: var(--hero-top);
}
.faq-hero__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  width: 887px;
}
.faq-hero__intro .t-body-l { width: 560px; }
.faq-hero__search {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

/* FAQ search field (8262:13992) — Empty: 1px border-strong inside; Typed: 2px accent ring outside */
.faq-search {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 792px;
  height: 64px;
  padding: 0 var(--sp-5);
  background: var(--bg-raised);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  cursor: text;
}
.faq-search.is-typed {
  padding-right: var(--sp-3);
  box-shadow: 0 0 0 2px var(--text-accent);
}
.faq-search__icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.faq-search__icon img {
  position: absolute;
  top: 0;
  left: 0;
}
.faq-search__icon-typed,
.faq-search.is-typed .faq-search__icon-empty { display: none; }
.faq-search.is-typed .faq-search__icon-typed { display: block; }

.faq-search__input {
  flex: 1 0 0;
  min-width: 1px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--text-primary);
  caret-color: var(--text-accent);
  font-family: inherit;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  -webkit-appearance: none;
  appearance: none;
}
.faq-search__input::placeholder { color: var(--text-tertiary); opacity: 1; }
.faq-search__input::-webkit-search-cancel-button,
.faq-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.faq-search__clear {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.faq-search__clear img { width: 20px; height: 20px; }
.faq-search.has-query .faq-search__clear { display: flex; }

/* FAQ search results (8263:14004) — overlay 8264:58226 at x120 / y452, above the sections, below the nav */
.faq-results {
  position: absolute;
  z-index: 50;
  top: 452px;
  left: var(--page-padding);
  display: flex;
  flex-direction: column;
  width: 792px;
  padding: var(--sp-2);
  overflow: hidden;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.35);
}
.faq-results[hidden] { display: none; }
.faq-results__list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.faq-results.is-empty .faq-results__list { display: none; }
.faq-results__summary {
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12px;
  white-space: nowrap;
}
.faq-result {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  overflow: hidden;
  border-radius: var(--r-md);
  cursor: pointer;
}
.faq-result.is-active { background: var(--surface-selected); }
.faq-result__text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 1px;
  overflow: hidden;
}
.faq-result__q {
  width: 100%;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}
.faq-result__q strong { font-weight: 500; }
.faq-result__a {
  width: 100%;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.faq-result__a strong { font-weight: 500; color: var(--text-primary); }
.faq-result__topic {
  flex-shrink: 0;
  width: 112px;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12px;
  text-align: right;
}
.faq-results__empty {
  display: none;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  white-space: nowrap;
}
.faq-results.is-empty .faq-results__empty { display: flex; }
.faq-results__empty-title {
  color: var(--text-primary);
  font-size: 16px;
  line-height: 26px;
}
.faq-results__empty-hint {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 22px;
}
.faq-results__empty-hint a { color: var(--text-accent); }

/* ---------- 02 Questions (8264:14128) ---------- */

.faq-questions .wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
  padding-bottom: var(--sp-10);
}

/* Topic index (8264:14129) */
.faq-index {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  flex-shrink: 0;
  width: 282px;
  padding-top: var(--sp-9);
}
.faq-index__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  width: 100%;
}

/* Topic link (8261:13995): Default / Hover / Current */
.faq-topic-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  cursor: pointer;
}
.faq-topic-link__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: var(--text-secondary); /* icon stroke #A4A4A4 */
  -webkit-mask: var(--icon) center / 20px 20px no-repeat;
  mask: var(--icon) center / 20px 20px no-repeat;
}
.faq-topic-link__label {
  flex: 1 0 0;
  min-width: 1px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  transition: color 0.15s ease-out;
}
.faq-topic-link__count {
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12px;
  white-space: nowrap;
}
.faq-topic-link:hover .faq-topic-link__label { color: var(--text-primary); }
.faq-topic-link.is-current { background: var(--surface-selected); }
.faq-topic-link.is-current .faq-topic-link__label { color: var(--text-primary); }
.faq-topic-link.is-current .faq-topic-link__icon { background-color: var(--blue-500); /* icon stroke #3366FF */ }

.faq-index__support {
  width: 100%;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-subtle);
}
.faq-support {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 24px;
}
.faq-support .c-accent { color: var(--blue-400); }

/* Topics (8264:14131) */
.faq-topics {
  display: flex;
  flex-direction: column;
  width: 894px;
  flex-shrink: 0;
}
.faq-topic {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  width: 100%;
  padding-top: var(--sp-9);
  /* SCROLL_TO puts the group's top (with its 96px padding) at the top of the viewport */
  scroll-margin-top: calc(var(--nav-h) * -1);
}
.faq-topic__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.faq-topic__title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  white-space: nowrap;
}
.faq-topic__head > .t-body-s { white-space: nowrap; }
.faq-topic__list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* FAQ item (6781:320 Collapsed / 6781:327 Expanded) */
.faq-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--alpha-100);
  cursor: pointer;
}
.faq-item__head {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  width: 100%;
}
.faq-item__q {
  flex: 1 0 0;
  min-width: 1px;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
}
.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  overflow: hidden;
}
.faq-item__plus,
.faq-item__minus {
  position: absolute;
  left: 20.83%;
  right: 20.83%;
  transition: opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.faq-item__plus { top: 20.83%; bottom: 20.83%; }
.faq-item__minus { top: 50%; bottom: 50%; opacity: 0; }
.faq-item__plus img {
  position: absolute;
  inset: -8.57%;
  width: 117.14%;
  height: 117.14%;
}
.faq-item__minus img {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -8.57%;
  right: -8.57%;
  width: 117.14%;
  height: 2px;
}
.faq-item.is-open .faq-item__plus { opacity: 0; }
.faq-item.is-open .faq-item__minus { opacity: 1; }

/* Smart animate: expand 250ms / collapse 200ms, cubic-bezier(0.23, 1, 0.32, 1) */
.faq-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.faq-item.is-open .faq-item__body {
  grid-template-rows: 1fr;
  transition-duration: 0.25s;
}
.faq-item__inner {
  min-height: 0;
  overflow: hidden;
}
.faq-item__a {
  width: 640px;
  padding-top: var(--sp-3);
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.faq-topics__support { padding-top: var(--sp-8); }

/* ---------- 03 Final CTA (8263:14234) ---------- */

.faq-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--sp-10);
}
.faq-cta__band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  padding: var(--sp-9) 0;
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
}
.faq-cta__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1200px;
  padding-left: 40px;
  overflow: hidden;
  background: var(--bg-raised);
  border-radius: var(--r-xl);
}
.faq-cta__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.faq-cta__text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  min-width: 1px;
}
.faq-cta__title { width: 562px; }
.faq-cta__ctas {
  display: flex;
  gap: var(--sp-3);
}
.faq-cta__visual {
  position: relative;
  flex-shrink: 0;
  width: 556px;
  height: 513px;
}
.faq-cta__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.faq-cta__photo img {
  position: absolute;
  top: -63.93%;
  left: -6.21%;
  width: 106.29%;
  height: 172.77%;
}

/* Glass "VPN server list" cards (8393:37832 / 8393:37090) */
.faq-glass {
  position: absolute;
  display: flex;
  padding: 8px;
  overflow: hidden;
  background: rgba(19, 19, 21, 0.6);
  border: 0.958px solid var(--bg-raised);
  border-radius: 9.526px;
}
.faq-glass--vpn { left: 214px; top: 347px; }
.faq-glass--vault { left: 254px; top: 427px; }
.faq-glass__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 261.704px;
  padding: 7.667px 9.526px;
  background: var(--bg-base);
  border-radius: 7.145px;
  filter: drop-shadow(0 4px 4.4px rgba(47, 47, 47, 0.4));
}
.faq-glass__row--vault { padding: 4.763px 9.526px; }
.faq-glass__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: nowrap;
}
.faq-glass__info--gap { gap: 2px; }
.faq-glass__title {
  color: var(--neutral-200);
  font-size: 11.908px;
  font-weight: 500;
  line-height: 19.168px;
  letter-spacing: -0.1533px;
}
.faq-glass__sub {
  color: var(--text-tertiary);
  font-size: 10.717px;
  font-weight: 400;
  line-height: 15.335px;
  letter-spacing: -0.115px;
}
.faq-glass__icon {
  display: flex;
  align-items: center;
  padding: 6px;
  background: var(--accent-tint);
  border-radius: 4px;
}
.faq-glass__icon img { width: 20px; height: 20px; }

/* toggol (333:9826 Default / 333:9828 Variant2) — Dissolve 300ms ease-out between the two states */
.faq-toggle {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 24px;
  border-radius: 44px;
}
.faq-toggle__state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2px;
  border-radius: 44px;
  transition: opacity 0.3s ease-out;
}
.faq-toggle__state--off { align-items: flex-start; background: var(--text-tertiary); }
.faq-toggle__state--on { align-items: flex-end; background: var(--blue-400); opacity: 0; }
.faq-toggle.is-on .faq-toggle__state--on { opacity: 1; }
.faq-toggle.is-on .faq-toggle__state--off { opacity: 0; }
.faq-toggle__knob {
  width: 28px;
  height: 20px;
  background: #fcfcfc;
  border-radius: 22px;
}

/* Ecosystem reference (8263:14236) */
.faq-eco {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.faq-eco__step {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--sp-3);
}
.faq-eco__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  white-space: nowrap;
}
.faq-eco__product {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.faq-eco__connector {
  position: relative;
  flex: 1 0 0;
  min-width: 1px;
  height: 0;
}
.faq-eco__connector img {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
}

/* Topic link icons (icon swap per instance; strokes recoloured by state via mask) */
.faq-topic-link__icon--getting-started { --icon: url("../img/faq/topic-getting-started.svg"); }
.faq-topic-link__icon--vpn { --icon: url("../img/faq/topic-vpn.svg"); }
.faq-topic-link__icon--vault { --icon: url("../img/faq/topic-vault.svg"); }
.faq-topic-link__icon--privacy { --icon: url("../img/faq/topic-privacy.svg"); }
.faq-topic-link__icon--apps { --icon: url("../img/faq/topic-apps.svg"); }
.faq-topic-link__icon--plans { --icon: url("../img/faq/topic-plans.svg"); }
.faq-topic-link__icon--cloud { --icon: url("../img/faq/topic-cloud.svg"); }

/* CTA visual stage: the 556×513 composition; below 1440 it is scaled to its box (see faq.js). */
.faq-cta__stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 556px;
  height: 513px;
}

/* ==========================================================================
   Responsive (Figma has only the 1440 frame; below it the same layout reflows).
   Breakpoints: fluid <=1439, laptop <=1279, tablet <=1023, phone <=767.
   ========================================================================== */

@media (max-width: 1439px) {
  /* 01 Hero */
  .faq-hero .wrap { height: auto; }
  .faq-hero__intro { width: 100%; max-width: 887px; }
  .faq-hero__intro .t-body-l { width: auto; max-width: 560px; }
  .faq-hero__search { width: 100%; }
  .faq-search { width: 100%; max-width: 792px; }
  .faq-results { right: var(--page-padding); width: auto; max-width: 792px; }

  /* 02 Questions */
  .faq-topics { flex: 1 1 0; min-width: 0; width: auto; }
  .faq-topic__head > .t-body-s { white-space: normal; }
  .faq-item__a { width: auto; max-width: 640px; }

  /* 03 Final CTA */
  .faq-cta__card { width: calc(100% - 2 * var(--page-padding)); max-width: 1200px; }
  .faq-cta__title { width: auto; max-width: 562px; }
  .faq-cta__visual { width: 48%; max-width: 556px; height: auto; aspect-ratio: 556 / 513; }
  .faq-cta__stage { transform: scale(var(--s, 1)); transform-origin: 0 0; }
  .faq-cta__text { padding-right: var(--sp-5); }
}

@media (max-width: 1023px) {
  /* 02 Questions: topic list above the topics, as a wrapping row */
  .faq-questions .wrap { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--sp-9); }
  .faq-index { width: 100%; padding-top: var(--sp-8); }
  .faq-index__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-1);
  }
  .faq-topic-link { flex: none; width: auto; white-space: nowrap; }
  .faq-topics { width: 100%; }
  .faq-topic { padding-top: var(--sp-8); }

  /* 03 Final CTA: text above the visual */
  .faq-cta__band { padding: var(--sp-8) 0; }
  .faq-cta__card { flex-direction: column; align-items: stretch; padding-left: 0; }
  .faq-cta__text { padding: 40px 40px var(--sp-7); }
  .faq-cta__visual { width: 100%; max-width: none; }
  .faq-eco { flex-wrap: wrap; row-gap: var(--sp-5); }
  .faq-eco__connector { min-width: 24px; }
  .faq-cta { padding-bottom: var(--sp-9); }
}

@media (max-width: 767px) {
  /* Search results: topic name moves under the text */
  .faq-result { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
  .faq-result__text { width: 100%; flex: none; }
  .faq-result__topic { width: auto; text-align: left; }
  .faq-results__empty { white-space: normal; }

  .faq-index { padding-top: var(--sp-7); }
  .faq-topic { padding-top: var(--sp-7); gap: var(--sp-4); }
  .faq-topic__title { flex-wrap: wrap; white-space: normal; }
  .faq-item__q { font-size: 18px; }
  .faq-item__head { gap: var(--sp-4); }
  .faq-topics__support { padding-top: var(--sp-7); }

  .faq-cta__band { padding: var(--sp-7) 0; }
  .faq-cta__card { border-radius: var(--r-lg); }
  .faq-cta__text { padding: var(--sp-6) var(--sp-5) var(--sp-6); }
  .faq-cta__ctas { flex-wrap: wrap; }

  /* Ecosystem steps stack; the connectors turn to short vertical links between them */
  .faq-eco { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .faq-eco__connector { flex: none; width: 24px; min-width: 0; height: 0; margin-left: 4px; transform: rotate(90deg); transform-origin: 50% 50%; margin-top: 12px; margin-bottom: 12px; }
  .faq-eco__product { flex-wrap: wrap; }
}