/* ==========================================================================
   Help Center

   Shares tokens, header and footer with the landing page (styles.css) and adds
   the hero band, the FAQ accordion and the contact form, all measured against
   the 帮助中心 artboards at 1728px.
   ========================================================================== */

/* ── Hero band ─────────────────────────────────────────────────────────── */

.help-hero {
  position: relative;
  padding-top: calc(77 * var(--vw));
  padding-bottom: calc(88 * var(--vw));
  background: linear-gradient(180deg, #f0f5fc 0%, #fff 100%);
}

.help-hero__wave {
  position: absolute;
  left: 0;
  top: calc(118 * var(--vw));
  width: 100%;
  max-width: none;
  pointer-events: none;
}

.help-hero__inner {
  position: relative;
}

.sparkle--help {
  left: 38%;
  top: calc(-22 * var(--vw));
}

.help-hero__title {
  font-size: calc(40 * var(--vw));
  font-weight: 700;
  line-height: 1.1934;
  text-align: center;
}

.help-hero__sub {
  margin-top: calc(20 * var(--vw));
  color: var(--muted);
  font-size: calc(22 * var(--vw));
  font-weight: 510;
  line-height: 1.1934;
  text-align: center;
}

/* Figma puts the illustration at x1246..1519, y248..430 (110..292 from the top
   of the page), i.e. flush with the right gutter and overlapping both the
   heading and the first FAQ row. */
.help-hero__art {
  position: absolute;
  right: var(--gutter);
  top: calc(-43 * var(--vw));
  width: calc(273 * var(--vw));
  max-width: none;
}

/* ── FAQ list ──────────────────────────────────────────────────────────── */

.faq {
  position: relative;
  padding-top: calc(2 * var(--vw));
  /* While the contact section is hidden (see help.html), the list carries the
     page's bottom rhythm itself — this is the old section's bottom padding. */
  padding-bottom: calc(90 * var(--vw));
}

.faq__list {
  display: grid;
  gap: calc(20 * var(--vw));
}

.faq__item {
  overflow: hidden;
  border: calc(1.5 * var(--vw)) solid #e2e2e2;
  border-radius: calc(30 * var(--vw));
  background: #fff;
}

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(24 * var(--vw));
  width: 100%;
  /* 1.5px card border is included in the 33/40 artboard insets and in the
     90px collapsed height. */
  padding: calc(32 * var(--vw)) calc(38.5 * var(--vw));
  text-align: left;
  transition: padding-bottom 0.3s ease;
}

.faq__q-text {
  font-size: calc(20 * var(--vw));
  font-weight: 700;
  line-height: 1.1934;
}

.faq__chevron {
  flex: none;
  width: calc(13 * var(--vw));
  min-width: 10px;
  margin-top: calc(1.5 * var(--vw));
  transition: rotate 0.3s ease;
}

.faq__item.is-open .faq__q {
  padding-bottom: calc(30 * var(--vw));
}

.faq__item.is-open .faq__chevron {
  rotate: 90deg;
}

/* 0fr → 1fr keeps the open/close height animated without measuring content. */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}

.faq__a-inner {
  min-height: 0;
  overflow: hidden;
}

.faq__a p {
  padding-inline: calc(38.5 * var(--vw));
  color: var(--ink-soft);
  font-size: calc(17 * var(--vw));
  font-weight: 510;
  line-height: 1.1934;
}

.faq__a p + p {
  /* Figma separates paragraphs with one empty line, not a margin. */
  margin-top: calc(20 * var(--vw));
}

.faq__a p:last-child {
  padding-bottom: calc(30 * var(--vw));
}

/* ── Contact ───────────────────────────────────────────────────────────── */

.help-contact {
  display: grid;
  grid-template-columns: 672fr 608fr;
  column-gap: calc(32 * var(--vw));
  padding-top: calc(112 * var(--vw));
  padding-bottom: calc(90 * var(--vw));
}

/* The author `display: grid` above outranks the UA rule for [hidden]. */
.help-contact[hidden] {
  display: none;
}

.help-contact__copy {
  position: relative;
}

.sparkle--contact {
  left: calc(258 * var(--vw));
  top: calc(-22 * var(--vw));
}

.help-contact__title {
  font-size: calc(40 * var(--vw));
  font-weight: 700;
  line-height: 1.1934;
}

.help-contact__sub {
  max-width: calc(600 * var(--vw));
  margin-top: calc(20 * var(--vw));
  color: var(--muted);
  font-size: calc(22 * var(--vw));
  font-weight: 510;
  line-height: 1.1934;
}

/* The form sits 13px above the section's title line, exactly as in Figma. */
.help-form {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(19 * var(--vw)) calc(12 * var(--vw));
  margin-top: calc(-13 * var(--vw));
}

.field {
  display: grid;
  gap: calc(5 * var(--vw));
}

.field--wide {
  grid-column: 1 / -1;
}

.field__label {
  color: #9f9f9f;
  font-size: calc(18 * var(--vw));
  font-weight: 590;
  line-height: 1.6667;
}

.field__input {
  width: 100%;
  height: calc(46 * var(--vw));
  padding: 0 calc(13 * var(--vw));
  border: 0;
  border-radius: calc(16 * var(--vw));
  background: #f5f5f5;
  color: var(--ink);
  font: inherit;
  font-size: calc(16 * var(--vw));
  font-weight: 510;
  outline: none;
  transition: box-shadow 0.2s ease;
}

.field__input::placeholder {
  color: #ccc;
}

.field__input:focus-visible {
  box-shadow: 0 0 0 calc(2 * var(--vw)) rgba(58, 168, 255, 0.45);
}

textarea.field__input {
  height: calc(137 * var(--vw));
  min-height: 120px;
  padding-top: calc(14 * var(--vw));
  padding-bottom: calc(14 * var(--vw));
  resize: none;
}

.field__select {
  position: relative;
}

.field__select select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.field__select select:invalid {
  color: #ccc;
}

.field__select img {
  position: absolute;
  right: calc(15 * var(--vw));
  top: 50%;
  width: calc(14 * var(--vw));
  translate: 0 -50%;
  pointer-events: none;
}

.help-form__submit {
  grid-column: 1 / -1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(210 * var(--vw));
  height: calc(64 * var(--vw));
  margin-top: calc(7 * var(--vw));
  border-radius: calc(38.5 * var(--vw));
  background: #000;
  color: #fff;
  font-size: calc(20 * var(--vw));
  font-weight: 590;
  transition: opacity 0.2s ease;
}

.help-form__submit:hover {
  opacity: 0.85;
}

.help-form__status {
  position: absolute;
  right: 0;
  bottom: calc(-30 * var(--vw));
  color: var(--blue-ink);
  font-size: clamp(13px, calc(16 * var(--vw)), 16px);
  font-weight: 510;
  text-align: right;
}

/* ── Narrow viewports (≤960px) ────────────────────────────────────────── */

@media (max-width: 960px) {
  .help-hero {
    padding-top: 36px;
    padding-bottom: 8px;
  }

  .help-hero__wave {
    display: none;
  }

  .help-hero__art {
    position: relative;
    top: auto;
    right: auto;
    width: 180px;
    margin: 18px auto 0;
  }

  .sparkle--help {
  left: 38%;
  top: calc(-22 * var(--vw));
}

.help-hero__title {
    font-size: clamp(26px, 7vw, 34px);
  }

  .help-hero__sub {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.45;
  }

  .faq {
    padding-top: 12px;
    padding-bottom: var(--section-y);
  }

  .faq__list {
    gap: 12px;
  }

  .faq__item {
    border-width: 1px;
    border-radius: 20px;
  }

  .faq__q {
    gap: 14px;
    padding: 18px 18px;
  }

  .faq__q-text {
    font-size: 16px;
    line-height: 1.35;
  }

  .faq__chevron {
    width: 11px;
    margin-top: 3px;
  }

  .faq__item.is-open .faq__q {
    padding-bottom: 14px;
  }

  .faq__a p {
    padding-inline: 18px;
    font-size: 14px;
    line-height: 1.5;
  }

  .faq__a p:last-child {
    padding-bottom: 18px;
  }

  .faq__a p + p {
    margin-top: 12px;
  }

  .help-contact {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding-top: var(--section-y);
    padding-bottom: calc(var(--section-y) + 10px);
  }

  .help-contact__copy {
  position: relative;
}

.sparkle--contact {
  left: calc(258 * var(--vw));
  top: calc(-22 * var(--vw));
}

.help-contact__title {
    font-size: clamp(24px, 6.6vw, 30px);
  }

  .help-contact__sub {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.45;
  }

  .help-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 0;
  }

  .field {
    gap: 6px;
  }

  .field__label {
    font-size: 14px;
    line-height: 1.4;
  }

  .field__input {
    height: 46px;
    padding-inline: 14px;
    border-radius: 14px;
    font-size: 15px;
  }

  textarea.field__input {
    height: 132px;
    min-height: 132px;
    padding-block: 12px;
  }

  .field__select img {
    right: 14px;
    width: 12px;
  }

  .help-form__submit {
    justify-self: stretch;
    width: 100%;
    height: 52px;
    min-height: 52px;
    margin-top: 6px;
    border-radius: 26px;
    font-size: 16px;
  }

  .help-form__status {
    text-align: center;
  }
}