/* ===== Support / Contact page ===== */
.sup-hero {
  padding: var(--s12) 0 var(--s8);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s10);
}
.sup-hero h1 { font-size: var(--text-3xl); margin-bottom: var(--s3); }
.sup-hero p { font-size: var(--text-lg); color: var(--ink-2); max-width: 640px; }

/* Channel cards */
.sup-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  margin-bottom: var(--s12);
}
.sup-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s6);
  background: #fff;
  display: flex; flex-direction: column;
  transition: border-color .15s ease, transform .15s ease;
}
.sup-card:hover { border-color: var(--brand-light); transform: translateY(-2px); }
.sup-card__ico {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: var(--brand-tint);
  color: var(--brand);
  margin-bottom: var(--s4);
}
.sup-card__ico svg { width: 24px; height: 24px; }
.sup-card h3 { font-size: var(--text-lg); margin-bottom: var(--s2); }
.sup-card p { font-size: var(--text-base); color: var(--ink-2); margin-bottom: var(--s4); flex: 1; }
.sup-card__meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: 600; color: var(--emerald-dark);
  margin-bottom: var(--s4);
}
.sup-card__meta svg { width: 14px; height: 14px; color: var(--emerald); }
.sup-card__cta {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: var(--text-base); font-weight: 600; color: var(--brand);
}
.sup-card__cta svg { width: 15px; height: 15px; }
.sup-card__cta:hover { color: var(--brand-dark); }
.sup-card--accent .sup-card__ico { background: var(--coral-tint); color: var(--coral); }

/* Two-column: form + side info */
.sup-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s12);
  margin-bottom: var(--s12);
  align-items: start;
}
.sup-form-wrap h2 { font-size: var(--text-2xl); margin-bottom: var(--s2); }
.sup-form-wrap .sub { color: var(--ink-2); margin-bottom: var(--s6); }

.sup-form { display: grid; gap: var(--s5); }
.sup-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.sup-field { display: flex; flex-direction: column; gap: var(--s2); }
.sup-field label { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.sup-field input,
.sup-field select,
.sup-field textarea {
  font-family: inherit; font-size: var(--text-base); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--s3) var(--s4); background: #fff;
  transition: border-color .15s ease;
}
.sup-field input:focus,
.sup-field select:focus,
.sup-field textarea:focus { outline: none; border-color: var(--brand); }
.sup-field input::placeholder,
.sup-field textarea::placeholder { color: var(--ink-3); }
.sup-field textarea { resize: vertical; min-height: 120px; }

/* Callback toggle */
.sup-callback {
  border: 1px dashed var(--border); border-radius: var(--r-md);
  padding: var(--s4); background: var(--surface-2);
}
.sup-callback__head { display: flex; align-items: center; gap: var(--s3); cursor: pointer; }
.sup-callback__head input { width: 18px; height: 18px; accent-color: var(--brand); }
.sup-callback__head .t { font-weight: 600; font-size: var(--text-base); }
.sup-callback__head .badge-opt {
  font-size: var(--text-xs); font-weight: 600; color: var(--ink-3);
  border: 1px solid var(--border); border-radius: var(--r-full); padding: 2px 8px; margin-left: auto;
}
.sup-callback__body { display: none; margin-top: var(--s4); gap: var(--s4); }
.sup-callback.is-open .sup-callback__body { display: grid; grid-template-columns: 1fr 1fr; }
.sup-callback__note { font-size: var(--text-sm); color: var(--ink-2); margin-top: var(--s3); display: flex; align-items: flex-start; gap: 6px; }
.sup-callback__note svg { width: 14px; height: 14px; color: var(--ink-3); flex-shrink: 0; margin-top: 2px; }

.sup-submit {
  background: var(--brand); color: #fff; font-weight: 600; font-size: var(--text-base);
  border: none; border-radius: var(--r-md); padding: var(--s4) var(--s6);
  cursor: pointer; justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s ease;
}
.sup-submit:hover { background: var(--brand-dark); }
.sup-submit svg { width: 16px; height: 16px; }
.sup-consent { font-size: var(--text-sm); color: var(--ink-3); }

/* Side panel */
.sup-side { display: grid; gap: var(--s6); }
.sup-panel {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s6); background: var(--surface-2);
}
.sup-panel h3 { font-size: var(--text-lg); margin-bottom: var(--s4); display: flex; align-items: center; gap: 8px; }
.sup-panel h3 svg { width: 18px; height: 18px; color: var(--brand); }
.sup-hours { display: grid; gap: var(--s3); }
.sup-hours__row { display: flex; justify-content: space-between; font-size: var(--text-base); }
.sup-hours__row span:first-child { color: var(--ink-2); }
.sup-hours__row span:last-child { color: var(--ink); font-weight: 600; }
.sup-tz { font-size: var(--text-sm); color: var(--ink-3); margin-top: var(--s3); }

.sup-times { display: grid; gap: var(--s4); }
.sup-times__row { display: flex; align-items: center; gap: var(--s3); font-size: var(--text-base); }
.sup-times__row .ico { width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; }
.sup-times__row .lbl { color: var(--ink-2); }
.sup-times__row .val { color: var(--ink); font-weight: 600; margin-left: auto; }

/* FAQ */
.sup-faq { margin-bottom: var(--s16); }
.sup-faq h2 { font-size: var(--text-2xl); margin-bottom: var(--s6); }
.sup-faq__list { display: grid; gap: var(--s3); max-width: 820px; }
.sup-faq__item { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.sup-faq__q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; color: var(--ink);
  padding: var(--s4) var(--s5); display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.sup-faq__q svg { width: 16px; height: 16px; color: var(--ink-3); transition: transform .2s ease; flex-shrink: 0; }
.sup-faq__item.is-open .sup-faq__q svg { transform: rotate(90deg); color: var(--brand); }
.sup-faq__a { display: none; padding: 0 var(--s5) var(--s5); color: var(--ink-2); font-size: var(--text-base); line-height: 1.6; }
.sup-faq__item.is-open .sup-faq__a { display: block; }

/* Mobile */
@media (max-width: 860px) {
  .sup-channels { grid-template-columns: 1fr; }
  .sup-grid { grid-template-columns: 1fr; gap: var(--s8); }
  .sup-row { grid-template-columns: 1fr; }
  .sup-callback.is-open .sup-callback__body { grid-template-columns: 1fr; }
  .sup-hero h1 { font-size: var(--text-2xl); }
}