/* ==========================================================================
   Support pages — faqs, contact
   Built from base.css tokens only.
   ========================================================================== */

/* ---------- Shared shells ---------- */
.section.is-banner.co-banner {
  position: relative;
  padding-bottom: var(--space-small);
  background-color: var(--white);
  overflow: hidden;
}
.banner-head {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; max-width: 880px; margin: 0 auto; text-align: center;
}
.banner-head h1 { max-width: 900px; }
.banner-head .paragraph-large { max-width: 720px; }
.banner-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.banner-note {
  display: inline-flex; align-items: flex-start; gap: 10px; max-width: 620px; margin-top: 4px;
  font-size: var(--fs-p-small); color: var(--gray-light); text-align: left;
}
.banner-note svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--blue-600); }
.banner-note a { color: var(--blue-600); text-decoration: underline; }

.co-section { position: relative; padding: var(--space-small) 0; background-color: var(--white); overflow: hidden; }
.co-section.is-tint { background-color: var(--bg-color); }
/* Standalone spacer rows sit outside a clipping section, so clip them here
   (index.html's spacers are always inside an overflow:hidden section) */

.icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 44px; height: 44px; padding: 10px;
  border-radius: 12px; background-color: var(--paste-color); color: var(--blue-700);
}
.icon-tile svg { width: 24px; height: 24px; }

.note-strip {
  display: flex; align-items: flex-start; gap: 16px;
  max-width: 900px; margin: 40px auto 0; padding: 20px 24px;
  border: 1px solid var(--stroke-color); border-radius: 16px;
  background-color: var(--card-bg); color: var(--gray-color);
  font-size: var(--fs-p-small); line-height: var(--lh-x-large);
}
.note-strip.in-column { margin-top: 0; }
.note-strip > svg { flex: none; width: 24px; height: 24px; color: var(--blue-600); }
.note-strip strong { color: var(--dark-green); }
.note-strip a { color: var(--blue-600); text-decoration: underline; }

/* Link card row, shared by both pages */
.link-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.link-card-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.link-card-grid.mt-40 { margin-top: 40px; }
.link-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px; border: 1px solid var(--stroke-color); border-radius: 16px;
  background-color: var(--white); color: var(--gray-color);
  transition: border-color .3s ease, transform .3s ease;
}
.link-card:hover { border-color: var(--blue-400); transform: translateY(-2px); }
.link-card-title { display: inline-flex; align-items: center; gap: 8px; color: var(--dark-green); font-weight: var(--fw-semi-bold); }
.link-card-title svg { width: 16px; height: 16px; color: var(--blue-600); transition: transform .3s ease; }
.link-card:hover .link-card-title svg { transform: translateX(4px); }
.link-card p { font-size: var(--fs-p-small); line-height: var(--lh-x-large); }

/* ==========================================================================
   FAQS
   ========================================================================== */
.faq-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.faq-jump a {
  padding: 8px 14px; border: 1px solid var(--stroke-color); border-radius: 999px;
  background-color: var(--white); color: var(--btn-text);
  font-size: var(--fs-p-small); font-weight: var(--fw-semi-bold); line-height: 20px;
  transition: border-color .3s ease, color .3s ease;
}
.faq-jump a:hover { border-color: var(--blue-400); color: var(--blue-700); }

.faq-groups { display: flex; flex-direction: column; gap: var(--space-small); max-width: 960px; margin: 0 auto; }
.faq-group { scroll-margin-top: calc(var(--nav-height) + 30px); }
.faq-group-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
.faq-group-head h2 { color: var(--dark-green); font-size: var(--fs-h3); }
.faq-group-head p { font-size: var(--fs-p-small); }
.faq-group .faq-accordion-wrap { max-width: none; }
.faq-group .accordion-text-wrap { max-width: 720px; }
.faq-group .accordion-text-wrap a { color: var(--blue-600); text-decoration: underline; }
.faq-group .accordion-text-wrap strong { color: var(--dark-green); }
.faq-group .accordion-divider { background-color: var(--stroke-color); }
.faq-group .accordion-divider.is-strong { background-color: var(--dark-green); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.contact-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 36px; border: 1px solid var(--stroke-color); border-radius: 20px; background-color: var(--white);
}
.contact-card h2 { color: var(--dark-green); font-size: var(--fs-h3); }
.contact-card > p { font-size: var(--fs-p-small); }
.contact-card .form-block { margin-top: 12px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.span-2 { grid-column: 1 / -1; }
.field label { color: var(--dark-green); font-size: var(--fs-p-small); font-weight: var(--fw-semi-bold); }
.contact-form .text-field {
  padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--stroke-color); background-color: var(--white); color: var(--gray-color);
}
.contact-form .text-field::placeholder { color: var(--gray-light); }
.contact-form .text-field:focus { border-color: var(--blue-600); }
.contact-form textarea.text-field { min-height: 132px; resize: vertical; }
.contact-form select.text-field { appearance: none; cursor: pointer; }
.form-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.form-foot p { flex: 1; min-width: 240px; font-size: var(--fs-p-small); color: var(--gray-light); }
.contact-form .submit-button { background-color: var(--blue-600); color: var(--white); font-weight: var(--fw-semi-bold); box-shadow: var(--shadow-skeu); }
.contact-form .submit-button:hover { background-color: var(--blue-700); }
.contact-card .form-message { margin-top: 16px; }

.route-list { display: flex; flex-direction: column; gap: 16px; }
.contact-route {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 24px; border: 1px solid var(--stroke-color); border-radius: 16px; background-color: var(--white);
}
.contact-route-text { display: flex; flex-direction: column; gap: 8px; }
.contact-route h3 { color: var(--dark-green); font-size: var(--fs-h4); font-weight: var(--fw-semi-bold); line-height: var(--lh-large); }
.contact-route p { font-size: var(--fs-p-small); line-height: var(--lh-x-large); }
.contact-route-link { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-600); font-size: var(--fs-p-small); font-weight: var(--fw-semi-bold); }
.contact-route-link svg { width: 16px; height: 16px; transition: transform .3s ease; }
.contact-route-link:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
  .link-card-grid, .link-card-grid.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-card { padding: 28px; }
}
@media (max-width: 767px) {
  .link-card-grid, .link-card-grid.is-three { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-card { padding: 24px; }
  .contact-route { padding: 20px; }
  .faq-group-head h2 { font-size: var(--fs-h4); }
  .note-strip { padding: 18px 20px; }
  .form-foot .submit-button { width: 100%; }
}
@media (max-width: 479px) {
  .banner-actions .button-secondary, .banner-actions .primary-button-wrapper { width: 100%; }
}

/* ==========================================================================
   Closing CTA — same block as index.html (rules copied, not imported)
   ========================================================================== */