/* ---------- Packages section ---------- */
.packages { padding-top: 100px; padding-bottom: 100px; }
.packages__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1260px;
  margin: 0 auto;
}
.packages__grid {
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

/* Free first call card */
.free-call {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  border-radius: var(--radius);
  background: var(--grey-blue);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  white-space: nowrap;
}
.free-call__btn { width: 100%; }

/* ---------- Accordion ---------- */
.accordion { display: flex; flex-direction: column; gap: 14px; }

.pkg {
  border: 1px solid var(--grey-blue);
  border-radius: var(--radius);
  overflow: hidden;
  transition: background-color 0.2s ease;
}
.pkg:hover,
.pkg.is-open { background: var(--white); }

.pkg__heading { font: inherit; }
.pkg__head {
  display: flex;
  align-items: center;
  gap: 56px;
  width: 100%;
  padding: 23px 24px;
  text-align: left;
  border-radius: var(--radius);
}
.pkg__head:focus-visible { outline-offset: -3px; }
.pkg__text { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.pkg__title { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; }

.pkg__icon {
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--grey-blue);
  border-radius: 50%;
  background: url("../assets/icons/plus.svg") center / 20px 20px no-repeat;
  transition: background-color 0.2s ease, transform 0.25s ease;
}
.pkg__head:hover .pkg__icon { background-color: var(--grey-blue); }
.pkg__head[aria-expanded="true"] .pkg__icon {
  border-color: var(--soft-black);
  background: var(--soft-black) url("../assets/icons/close.svg") center / 24px 24px no-repeat;
}

.pkg__panel { border-top: 1px solid var(--line); }
.pkg__panel[hidden] { display: none; }
.pkg.is-open .pkg__panel { animation: pkg-reveal 0.25s ease; }

@keyframes pkg-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.pkg__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
}
.pkg__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px;
}
.pkg__col:first-child { padding-left: 0; }
.pkg__col:last-child { padding-right: 0; }
.pkg__col + .pkg__col { border-left: 1px solid var(--line); }
.pkg__col .caption { padding-top: 0; }
.pkg__cta { padding: 24px; }

/* ---------- FAQ (index.html #faq, js/faq.js): the same accordion ---------- */
.faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding-top: 100px;
  padding-bottom: 100px;
}
.faq[hidden] { display: none; }
.faq__list { width: 100%; max-width: 860px; }
.faq .pkg__title { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.faq__answer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px 24px;
  white-space: pre-line;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .packages__grid { grid-template-columns: 1fr; }
  .free-call { order: 2; }
  .free-call__text { max-width: 520px; }
  .free-call__btn { max-width: 360px; }
}

@media (max-width: 767px) {
  .packages { padding: 32px 16px; }
  .packages__inner { gap: 24px; }
  .accordion { gap: 12px; }
  .pkg__head { gap: 16px; align-items: flex-start; padding: 20px 16px; }
  .pkg__title { font-size: 22px; line-height: 28px; }
  .pkg__cols { grid-template-columns: 1fr; padding: 0 16px; }
  .pkg__col { padding: 16px 0; }
  .pkg__col + .pkg__col { border-left: 0; border-top: 1px solid var(--line); }
  .pkg__cta { padding: 16px; }
  .pkg__cta .btn { width: 100%; }
  .free-call__btn { max-width: none; }
  .faq { gap: 32px; padding: 48px 16px; }
  .faq__answer { padding: 16px; }
}