/* ===== Help Centre ===== */

/* Hero */
.hc-hero { padding: 96px 0; border-bottom: 1px solid var(--c-ink); }
.hc-hero__content { display: flex; flex-direction: column; gap: 24px; max-width: 808px; }
.hc-hero__title { display: flex; flex-direction: column; gap: 2px; }
.hc-hero__line { font-size: 96px; line-height: 88px; color: var(--c-paper); }
.hc-hero__line--mobile { display: none; }
.hc-hero__text { font: 400 16px/26px var(--f-plex); color: var(--c-gray); }

/* Topic directory */
.hc-dir { background: var(--c-paper); color: var(--c-ink); padding: 96px 0; }
.hc-dir__inner { display: flex; flex-direction: column; gap: 48px; }
.hc-dir__head { display: flex; flex-direction: column; gap: 12px; }
.hc-dir__title { font: 700 40px/var(--lh-osw) var(--f-osw); letter-spacing: 1px; color: var(--c-bg); }
.hc-dir__sub { font: 400 14px/var(--lh-plex) var(--f-plex); color: var(--c-gray); }

.hc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 2px; }
.hc-grid__cell { display: flex; }
.hc-card {
  position: relative; flex: 1; min-width: 0; height: 116px; padding: 20px;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; text-align: left;
  background: #fff; box-shadow: inset 0 0 0 1px var(--c-ink);
  transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.hc-card:hover { box-shadow: inset 0 0 0 1px var(--c-orange); transform: translateY(-1px); }
.hc-card:active { transform: scale(.99); }
.hc-card__top { display: flex; justify-content: space-between; align-items: center; }
.hc-card__num { font: 700 24px/var(--lh-osw) var(--f-osw); color: var(--c-orange); opacity: .3; transition: opacity var(--t-fast), color var(--t-fast); }
.hc-card:hover .hc-card__num { opacity: .6; }
.hc-card__icon { width: 24px; height: 24px; flex: none; display: flex; color: var(--c-bg); transition: transform var(--t-med) var(--ease-out); }
.hc-card__icon svg { width: 24px; height: 24px; }
.hc-card:hover .hc-card__icon { transform: translateX(3px); }
.hc-card .hc-card__icon--active { display: none; }
.hc-card__arrow { display: none; }
.hc-card__title { font: 700 20px/var(--lh-osw) var(--f-osw); color: var(--c-bg); }
.hc-card.is-active { background: var(--c-orange); box-shadow: inset 0 0 0 2px var(--c-orange); }
.hc-card.is-active .hc-card__num { color: #000; opacity: 1; }
.hc-card.is-active .hc-card__icon { color: #000; }
.hc-card.is-active .hc-card__icon--idle { display: none; }
.hc-card.is-active .hc-card__icon--active { display: flex; }
.hc-grid.is-loading { cursor: progress; }

/* Topic (accordion) */
.hc-topic { background: var(--c-bg); padding: 96px 0; scroll-margin-top: 68px; }
.hc-topic__inner { display: flex; flex-direction: column; gap: 48px; }
.hc-topic__head { display: flex; flex-direction: column; gap: 12px; transition: opacity var(--t-med) var(--ease); }
.hc-topic__title { font: 700 40px/var(--lh-osw) var(--f-osw); letter-spacing: 1px; color: var(--c-paper); }
.hc-topic__sub { font: 400 14px/var(--lh-plex) var(--f-plex); color: var(--c-gray); }
.hc-topic__acc { transition: opacity var(--t-med) var(--ease); }
/* Design: 16px between the question row and the open answer (32px when closed) */
.hc-topic .acc__head { padding-bottom: 16px; transition: padding-bottom .45s var(--ease-out); }
.hc-topic .acc__item:not(.is-open) .acc__head { padding-bottom: 32px; }
.hc-topic .acc__item { animation: hc-item-in .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes hc-item-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hc-topic.is-loading .hc-topic__head, .hc-topic.is-loading .hc-topic__acc { opacity: .35; }

@media (max-width: 1099px) {
  .hc-hero { padding: 64px 0; }
  .hc-hero__line { font-size: 72px; line-height: 66px; }
  .hc-dir, .hc-topic { padding: 64px 0; }
  .hc-dir__inner, .hc-topic__inner { gap: 32px; }
  .hc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .hc-hero { padding: 56px 0 48px; }
  .hc-hero__content { gap: 16px; max-width: none; }
  .hc-hero__line { font-size: 48px; line-height: 44px; }
  .hc-hero__line--desktop { display: none; }
  .hc-hero__line--mobile { display: block; }
  .hc-hero__text { font-size: 15px; line-height: 22px; }

  .hc-dir { padding: 48px 0; }
  .hc-dir__inner { gap: 32px; }
  .hc-dir__head { gap: 8px; }
  .hc-dir__title { font-size: 28px; letter-spacing: 0; color: var(--c-ink); }
  .hc-dir__sub { font-size: 13px; line-height: 18px; color: var(--c-gray-2); }
  .hc-grid { display: flex; flex-direction: column; gap: 2px; }
  .hc-card { flex-direction: row; align-items: center; gap: 16px; height: 64px; padding: 0 16px; box-shadow: inset 0 0 0 1px #000; }
  .hc-card:hover { transform: none; box-shadow: inset 0 0 0 1px var(--c-orange); }
  .hc-card__top { display: contents; }
  .hc-card__num { order: 0; width: 32px; flex: none; font-size: 20px; opacity: 1; }
  .hc-card:hover .hc-card__num { opacity: 1; }
  .hc-card .hc-card__icon, .hc-card.is-active .hc-card__icon--active { display: none; }
  .hc-card__title { order: 1; flex: 1; min-width: 0; font-size: 16px; color: var(--c-ink); }
  .hc-card__arrow { order: 2; display: block; flex: none; font: 700 18px/var(--lh-osw) var(--f-osw); color: var(--c-ink); text-align: right; transition: transform var(--t-med) var(--ease-out); }
  .hc-card:hover .hc-card__arrow { transform: translateX(3px); }
  .hc-card.is-active { box-shadow: inset 0 0 0 1px #000; }
  .hc-card.is-active .hc-card__title, .hc-card.is-active .hc-card__arrow { color: #000; }

  .hc-topic { background: var(--c-surface); padding: 48px 0; scroll-margin-top: 56px; }
  .hc-topic__inner { gap: 32px; }
  .hc-topic__title { font-size: 30px; letter-spacing: 0; }
  .hc-topic__sub { font-size: 13px; line-height: 18px; }
  .hc-topic .acc__head { padding-bottom: 12px; }
  .hc-topic .acc__item:not(.is-open) .acc__head { padding-bottom: 24px; }
}