/* Help pages: FAQ · Contact · Wholesale (Paper 14a–c). Prefix sb-help-. */

.sb-help {
  max-width: var(--sb-max); margin-inline: auto;
  display: flex; gap: 80px;
  padding: 72px var(--sb-gutter) 80px;
  color: var(--sb-ink);
}
.sb-help__intro { flex: 0 0 380px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sb-help__eyebrow {
  font: 400 12px/16px var(--sb-font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sb-cobalt);
}
.sb-help__title {
  font: 800 72px/68px var(--sb-font-display); letter-spacing: -0.05em;
  color: var(--sb-cobalt); text-wrap: balance;
}
.sb-help__lede { font: 400 16px/25px var(--sb-font-text); text-wrap: pretty; }
.sb-help-faq .sb-help__lede { line-height: 24px; }
.sb-help__mail { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .sb-help__mail:hover { text-decoration-thickness: 2px; } }

/* ---------- 14a FAQ ---------- */
.sb-help-faq__list { flex: 1 1 0; min-width: 0; border-top: 1.5px solid var(--sb-cobalt); }
.sb-help-faq__list .sb-faq { border-top: 0; }
.sb-help-faq__list .sb-faq .sb-faq__trigger { padding: 20px 0; font: 700 19px/24px var(--sb-font-text); }
.sb-help-faq__list .sb-faq__item:last-child { border-bottom: 0; }
/* Paper uses +/− instead of the kit chevron */
.sb-help-faq__list .sb-faq__indicator { width: 16px; justify-content: center; transform: none !important; }
.sb-help-faq__list .sb-faq__indicator > * { display: none; }
.sb-help-faq__list .sb-faq__indicator::before { content: "+"; font: 700 19px/24px var(--sb-font-text); color: var(--sb-cobalt); }
.sb-help-faq__list .sb-faq__trigger[data-panel-open] .sb-faq__indicator::before { content: "−"; }
.sb-help-faq__list .sb-faq .sb-faq__trigger[data-panel-open] { padding-bottom: 10px; }
.sb-help-faq__list .sb-faq__answer { padding: 0 0 20px; font: 400 16px/25px var(--sb-font-text); max-width: none; }
.sb-help-faq__answer a, .sb-help-faq__list .sb-faq__answer a { color: var(--sb-cobalt); text-underline-offset: 3px; }

.sb-help-faq__fallback { padding: 20px 0; border-bottom: 1px solid var(--sb-line); }
.sb-help-faq__fallback:last-of-type { border-bottom: 0; }
.sb-help-faq__fallback summary { font: 700 19px/24px var(--sb-font-text); cursor: pointer; }
.sb-help-faq__answer { padding-top: 10px; font: 400 16px/25px var(--sb-font-text); }

/* ---------- Forms (14b, 14c) ---------- */
.sb-help-formwrap { flex: 1 1 0; min-width: 0; }
.sb-help-formwrap > form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.sb-help-form__row { display: flex; gap: 14px; }
.sb-help-form__row > * { flex: 1 1 0; min-width: 0; }
.sb-help-form__field { display: flex; flex-direction: column; gap: 6px; }
.sb-help-form__label { font: 600 14px/18px var(--sb-font-text); color: var(--sb-ink); }
.sb-help-form__input {
  box-sizing: border-box; width: 100%; height: 52px; margin: 0;
  padding: 0 16px;
  background: var(--sb-cream);
  border: 1.5px solid color-mix(in srgb, var(--sb-cobalt) 35%, transparent);
  border-radius: 12px;
  font: 400 16px/20px var(--sb-font-text); color: var(--sb-ink);
  appearance: none;
  transition: border-color 150ms var(--sb-ease), box-shadow 150ms var(--sb-ease);
}
.sb-help-form__input--area { height: 140px; padding: 14px 16px; line-height: 24px; resize: vertical; }
.sb-help-form__input::placeholder { color: color-mix(in srgb, var(--sb-ink) 62%, transparent); opacity: 1; }
.sb-help-form__input:focus { outline: none; border-color: var(--sb-cobalt); }
.sb-help-form__input:focus-visible { outline: 2px solid var(--sb-cobalt); outline-offset: 2px; }
.sb-help-form__input[type="number"] { -moz-appearance: textfield; }
.sb-help-form__input::-webkit-inner-spin-button, .sb-help-form__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sb-help-form__submit { align-self: flex-start; padding: 15px 30px; font-size: 16px; line-height: 20px; }
.sb-help-form__submit:focus-visible { outline: 2px solid var(--sb-ink); outline-offset: 3px; }
.sb-help-form__status {
  padding: 14px 16px; border-radius: 12px;
  background: var(--sb-sprout); color: var(--sb-ink);
  font: 600 15px/22px var(--sb-font-text);
}
.sb-help-form__status--error { background: var(--sb-peach); }

/* ---------- 14b Contact ---------- */
.sb-help-contact { padding-bottom: 72px; background: #fff; max-width: none; padding-inline: max(var(--sb-gutter), calc((100% - var(--sb-max)) / 2 + var(--sb-gutter))); }

/* ---------- 14c Wholesale ---------- */
.sb-help-wholesale {
  max-width: none;
  padding: 72px max(var(--sb-gutter), calc((100% - var(--sb-max)) / 2 + var(--sb-gutter))) 96px;
  background: var(--sb-cobalt); color: var(--sb-cream);
}
.sb-help-wholesale__intro { flex-basis: 520px; gap: 16px; }
.sb-help-wholesale .sb-help__eyebrow { color: var(--sb-lime); }
.sb-help-wholesale .sb-help__title { color: var(--sb-cream); }
.sb-help-wholesale__body { font-size: 17px; line-height: 26px; }
.sb-help-wholesale__main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sb-help-wholesale__facts { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sb-help-wholesale__fact {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px;
  padding: 18px; border-radius: 16px; background: var(--sb-cream);
}
.sb-help-wholesale__value { font: 800 30px/36px var(--sb-font-display); letter-spacing: -0.04em; color: var(--sb-cobalt); }
.sb-help-wholesale__label { font: 400 14px/18px var(--sb-font-text); color: var(--sb-ink); }
.sb-help-formwrap--filled .sb-help-form__row { gap: 12px; }
.sb-help-formwrap--filled .sb-help-form__input { border-color: transparent; font-size: 15px; }
.sb-help-formwrap--filled .sb-help-form__input:focus { border-color: var(--sb-lime); }
.sb-help-formwrap--filled .sb-help-form__input:focus-visible { outline-color: var(--sb-lime); }
.sb-help-wholesale .sb-help-form__submit:focus-visible { outline-color: var(--sb-lime); }

/* ---------- Tablet / mobile ---------- */
@media (max-width: 1100px) {
  .sb-help { gap: 48px; }
  .sb-help__intro { flex-basis: 300px; }
  .sb-help-wholesale__intro { flex-basis: 380px; }
}
@media (max-width: 860px) {
  .sb-help, .sb-help-contact, .sb-help-wholesale {
    flex-direction: column; gap: 32px;
    padding: 48px 20px 64px;
  }
  .sb-help__intro, .sb-help-wholesale__intro { flex-basis: auto; }
  .sb-help__title { font-size: 48px; line-height: 46px; }
  .sb-help-faq__list, .sb-help-formwrap, .sb-help-wholesale__main { flex: none; width: 100%; }
}
@media (max-width: 560px) {
  .sb-help-form__row { flex-direction: column; }
  .sb-help-formwrap--filled .sb-help-form__input { font-size: 16px; }
  .sb-help-form__submit { align-self: stretch; white-space: normal; }
  .sb-help-wholesale__facts { gap: 8px; }
  .sb-help-wholesale__fact { padding: 14px 12px; }
  .sb-help-wholesale__value { font-size: 24px; line-height: 30px; }
  .sb-help-wholesale__label { font-size: 13px; line-height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-help-form__input { transition: none; }
}
.sb-help-wholesale__main > .sb-help-formwrap { flex: none; }