/* Help Centre — frames pumt123-help-centre (1440) and -mobile (390).
 * This frame pads the page 80, not 48. */

.page--help { --container-pad: 80px; --container: 1280px; }

/* ── hero: 1440×600, left 530 (pad 80) / gutter / quick support 540 ───── */
.help-hero { display: flex; min-height: 600px; }
.help-hero__left {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 530px; flex: none; padding: var(--space-80);
}
.help-hero__intro { display: flex; flex-direction: column; gap: var(--space-24); width: 370px; }
.help-hero__intro .eyebrow { font-size: var(--fs-2xs); line-height: 14px; letter-spacing: .18em; text-transform: uppercase; }
.help-hero__intro .eyebrow--rule::before { width: 20px; }
.help-hero__title {
  color: var(--color-text-alt);
  font-family: var(--font-display); font-weight: 900;
  font-size: 44px; line-height: 72px; letter-spacing: -.02em;
}
.help-hero__lead { color: var(--color-muted-2); font-size: 15px; line-height: 24px; }
.help-hero__cta {
  color: var(--color-brand-2); text-decoration: none;
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-xs); line-height: 15px;
}
.help-hero__cta:hover { color: var(--color-brand-hover); }
.help-hero__divider { flex: 1; display: flex; align-items: flex-end; }
.help-hero__divider::before { content: ""; width: 100%; height: 1px; background: var(--color-border); }

.quick-support {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 540px; flex: none; padding: var(--space-48);
  background: var(--color-surface-3);
}
.quick-support__inner { display: flex; flex-direction: column; gap: var(--space-24); }
.quick-support__eyebrow, .quick-support__label {
  color: var(--color-brand-2);
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-2xs); line-height: 14px;
}
.quick-support__label { color: var(--color-muted-2); }
.quick-support__box { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24); background: var(--color-chip); }
.quick-support__q { color: var(--color-text-alt); font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xs); line-height: 14px; }
.quick-support__phone { display: flex; flex-direction: column; gap: var(--space-6); }
.quick-support__name { color: var(--color-text-alt); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-body); line-height: 20px; }
.quick-support__number {
  color: var(--color-brand-2); text-decoration: none;
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-h3); line-height: 35px;
}
.quick-support__number:hover { color: var(--color-brand-hover); }
.quick-support__note { color: var(--color-muted-2); font-size: var(--fs-sm); line-height: 17px; }
.quick-support__rule { border: 0; border-top: 1px solid var(--color-border); }
.quick-support__betstop { display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start; }
.quick-support__btn { min-height: 38px; background: var(--color-brand-2); font-weight: 900; }

/* ── intro: 1440×218, pad 80/80/40, gap 12 ────────────────────────────── */
.help-intro { padding: var(--space-80) 0 var(--space-40); }
.help-intro .container { display: flex; flex-direction: column; gap: var(--space-12); }
.help-intro .eyebrow { font-weight: 900; font-size: var(--fs-2xs); line-height: 14px; }
.help-intro__title { color: var(--color-text-alt); font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h2); line-height: 40px; }
.help-intro__lead { color: var(--color-muted-2); font-size: 15px; line-height: 20px; }

/* ── categories: 1440×433, pad 0/80/80, 3 × 416 cards 107 tall ────────── */
.help-cats { padding-bottom: var(--space-80); }
.help-cats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); }
.cat {
  display: flex; flex-direction: column; gap: var(--space-12);
  min-height: 107px; padding: var(--space-24);
  border: 0; background: var(--color-surface-3); color: var(--color-text-alt);
  text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.cat:hover { background: var(--color-surface-4); }
.cat.is-active { background: var(--color-chip); }
.cat__head { display: flex; align-items: center; justify-content: space-between; }
.cat__no { color: var(--color-brand-2); font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h4); line-height: 30px; }
.cat__arrow { color: var(--color-brand-2); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); line-height: 17px; transition: transform var(--dur-fast) var(--ease); }
.cat:hover .cat__arrow { transform: translateX(4px); }
.cat__title { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-base); line-height: 17px; }

/* ── workspace: 1440×596, pad 80/80/100, panel 308 / gutter / faq 845 ── */
.workspace { padding: var(--space-80) 0 100px; background: var(--color-surface-3); }
.workspace__topic { display: flex; align-items: flex-start; gap: var(--space-48); }
.topic-panel { display: flex; flex-direction: column; gap: var(--space-24); width: 308px; flex: none; }
.topic-panel__head { display: flex; flex-direction: column; gap: var(--space-8); }
.topic-panel__eyebrow { color: var(--color-brand-2); font-family: var(--font-display); font-weight: 900; font-size: var(--fs-2xs); line-height: 14px; }
.topic-panel__row { display: flex; align-items: center; gap: var(--space-16); }
.topic-panel__no { color: var(--color-brand-2); font-family: var(--font-display); font-weight: 900; font-size: 48px; line-height: 60px; }
.topic-panel__title { color: var(--color-text-alt); font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h4); line-height: 30px; }
.topic-panel__blurb { color: var(--color-muted-2); font-size: var(--fs-base); line-height: 22px; }
.topic-panel__count {
  align-self: flex-start; padding: 4px 8px;
  background: var(--color-chip); color: var(--color-brand-2);
  font-family: var(--font-display); font-weight: 900; font-size: var(--fs-3xs); line-height: 12px;
}
.workspace__divider { flex: 1; align-self: stretch; display: flex; align-items: flex-end; }
.workspace__divider::before { content: ""; width: 100%; height: 1px; background: var(--color-border); }

.faq { display: flex; flex-direction: column; gap: var(--space-12); width: 845px; flex: none; }
.faq-row { background: var(--color-surface-2); transition: background var(--dur-fast) var(--ease); }
.faq-row.is-open { background: var(--color-chip); }
.faq-row__h { margin: 0; }
.faq-row__btn {
  display: flex; align-items: center; gap: var(--space-16);
  width: 100%; min-height: 80px; padding: var(--space-24);
  border: 0; background: none; color: var(--color-text-alt); cursor: pointer; text-align: left;
}
.faq-row__no { color: var(--color-brand-2); font-family: var(--font-display); font-weight: 900; font-size: var(--fs-base); line-height: 17px; }
.faq-row__q { flex: 1; font-family: var(--font-display); font-weight: 900; font-size: var(--fs-base); line-height: 17px; }
.faq-row__btn:hover .faq-row__q { color: var(--color-brand-2); }
.faq-row__ind {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  background: var(--color-chip);
  font-family: var(--font-display); font-weight: 900; font-size: var(--fs-base); line-height: 17px;
  transition: background var(--dur-fast) var(--ease);
}
.faq-row.is-open .faq-row__ind { background: var(--color-border-2); }
.faq-row__a { padding: 0 var(--space-24) var(--space-24) 88px; color: var(--color-muted-2); font-size: var(--fs-base); line-height: 22px; }
/* The open row is 140 tall in the mockup: header 32 + 16 + answer 44, pad 24. */
.faq-row.is-open .faq-row__btn { min-height: 0; padding-bottom: 0; }
.faq-row.is-open .faq-row__a { padding-top: var(--space-16); }

/* ── mobile: frame pumt123-help-centre-mobile (390) ───────────────────── */
@media (max-width: 1199px) {
  .page--help { --container-pad: var(--container-pad-m); }

  /* hero 390×295 + quick support 390×330 stacked */
  .help-hero { flex-direction: column; min-height: 0; }
  .help-hero__left { width: 100%; gap: var(--space-24); padding: var(--space-40) var(--container-pad-m); }
  .help-hero__intro { width: 100%; gap: var(--space-16); }
  .help-hero__intro .eyebrow { font-size: var(--fs-3xs); line-height: 12px; letter-spacing: .1em; }
  .help-hero__intro .eyebrow--rule::before { width: 12px; }
  .help-hero__title { color: var(--color-text); font-size: var(--fs-h2); line-height: 35px; letter-spacing: 0; }
  .help-hero__lead { font-size: var(--fs-base); line-height: 21px; }
  .help-hero__cta { font-size: var(--fs-2xs); line-height: 14px; }
  .help-hero__divider { display: none; }
  .quick-support { width: 100%; gap: var(--space-24); min-height: 330px; padding: var(--space-24); }
  .quick-support__box { padding: var(--space-20); }
  .quick-support__number { font-size: var(--fs-h4); line-height: 30px; }
  .quick-support__rule { display: none; }
  .quick-support__btn { width: 100%; }

  /* intro 390×184: pad 40/16/20, gap 8 */
  .help-intro { padding: var(--space-40) 0 var(--space-20); }
  .help-intro .container { gap: var(--space-8); }
  .help-intro .eyebrow { font-size: var(--fs-3xs); line-height: 12px; }
  .help-intro__title { color: var(--color-text); font-size: var(--fs-h4); line-height: 30px; }
  .help-intro__lead { font-size: var(--fs-base); line-height: 18px; }

  /* categories 390×771: one column, gap 8, pad 0/16/32 */
  .help-cats { padding-bottom: var(--space-32); }
  .help-cats__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .cat { min-height: 75px; padding: var(--space-16); gap: var(--space-8); }
  .cat__no { font-size: var(--fs-body); line-height: 20px; }
  .cat__arrow { font-size: var(--fs-xs); line-height: 15px; }
  .cat__title { color: var(--color-text); font-size: var(--fs-xs); line-height: 15px; }

  /* workspace: topic panel 390×205 over a full-width FAQ list */
  .workspace { padding: 0; background: none; }
  .workspace .container { padding-inline: 0; }
  .workspace__topic { flex-direction: column; gap: 0; }
  .topic-panel { width: 100%; gap: var(--space-20); padding: var(--space-24); background: var(--color-surface-3); }
  .topic-panel__no { font-size: var(--fs-h2); line-height: 40px; }
  .topic-panel__title { font-size: var(--fs-h5); line-height: 25px; }
  .topic-panel__blurb { font-size: var(--fs-sm); line-height: 20px; }
  .workspace__divider { display: none; }
  .faq { width: 100%; gap: 0; background: var(--color-surface-2); }
  .faq-row { box-shadow: inset 0 -1px 0 var(--color-border); }
  .faq-row__btn { min-height: 64px; padding: var(--space-16); gap: var(--space-12); }
  .faq-row__no, .faq-row__q { font-size: var(--fs-xs); line-height: 15px; }
  .faq-row__ind { width: 28px; height: 28px; font-size: var(--fs-sm); }
  .faq-row__a { padding: 0 var(--space-16) var(--space-16) 40px; font-size: var(--fs-sm); line-height: 20px; }
  .faq-row.is-open .faq-row__a { padding-top: var(--space-8); }
}