/* Help Centre (frames help-centre 1440 / help-centre-mobile 390). Numbers from fig-spec. */

/* ── hero ─────────────────────────────────────────────────────────────── */
.hhero { display: grid; grid-template-columns: 840px 1fr; height: 540px; overflow: hidden; background: var(--color-surface); }
.hhero__copy { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 0 48px 0 var(--container-pad); }
.hhero__eyebrow { font-family: var(--font-body); font-weight: 800; line-height: 12px; letter-spacing: 1.5px; }
.hhero__eyebrow::before { width: 12px; height: 2px; }
.hhero__stack { display: flex; flex-direction: column; gap: 28px; }
.hhero__titles { display: contents; }
.hhero__title { font-family: var(--font-display); font-weight: 900; font-size: 52px; line-height: 57px; letter-spacing: -2.08px; color: var(--color-text); }
.hhero__lead { font-size: 16px; line-height: 24px; color: var(--color-muted-4); }
.hhero__lead-m, .hhero__pic-m { display: none; }
.hsearch {
  display: flex; align-items: center; gap: var(--space-12); height: 60px; padding: 0 20px;
  border-radius: var(--radius-lg); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-line-dark);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.hsearch:focus-within { box-shadow: inset 0 0 0 1px var(--color-brand), var(--focus-ring); }
.hsearch__icon { width: 20px; height: 20px; color: var(--color-muted); flex-shrink: 0; }
.hsearch__input { flex: 1; min-width: 0; align-self: stretch; border: 0; background: none; outline: none; font-size: 15px; line-height: 16px; color: var(--color-text); }
.hsearch__input::placeholder { color: var(--color-muted); }
.hsearch__input::-webkit-search-cancel-button { appearance: none; }
.hsearch__kbd { padding: 4px 8px; border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-line-dark); font-family: var(--font-mono); font-weight: 400; font-size: 11px; line-height: 14px; color: var(--color-muted); }
.hhero__quick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); font-size: 13px; line-height: 14px; }
.hhero__quick-label { font-weight: 700; color: var(--color-muted); }
.hhero__quick-link { padding: 0; border: 0; background: none; cursor: pointer; font-size: 13px; line-height: 14px; font-weight: 600; color: var(--color-brand); transition: color var(--dur-fast) var(--ease); }
.hhero__quick-link:hover { text-decoration: underline; }
.hhero__media { position: relative; background: var(--color-bg); }
.hhero__pic { position: absolute; inset: 0; }
.hhero__pic img { width: 100%; height: 100%; object-fit: cover; }
.hhero__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #0b0b10 0%, rgba(11, 11, 16, .5) 30%, rgba(11, 11, 16, 0) 70%); pointer-events: none; }

/* ── knowledge base ───────────────────────────────────────────────────── */
.kb { display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: start; padding: 80px var(--container-pad) 120px; background: var(--color-light); color: var(--color-ink); }
.kb__side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-24); border-radius: var(--radius-xl); background: var(--color-light-2); box-shadow: inset 0 0 0 1px var(--color-line-light); }
.kb__toggle { display: none; }
.kb__panel > div { display: flex; flex-direction: column; gap: var(--space-20); }
.kb__label { font-size: 11px; line-height: 12px; font-weight: 800; letter-spacing: 2px; color: var(--color-muted-light); }
.kb__list { display: flex; flex-direction: column; gap: var(--space-4); }
.kb__link {
  display: block; padding: 10px 12px 10px 16px; border-radius: var(--radius-md);
  font-size: 14px; line-height: 15px; font-weight: 500; color: var(--color-ink); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.kb__link:hover { background: rgba(124, 111, 255, .1); }
.kb__link.is-current { color: var(--color-brand-ink); font-weight: 700; }
.kb__rule { height: 0; margin: 0; border: 0; border-top: 1px solid var(--color-line-light); }
.kb__cta { display: flex; flex-direction: column; gap: var(--space-8); }
.kb__cta-text { font-size: 13px; line-height: 14px; color: var(--color-muted-light); }

.kb__content { display: flex; flex-direction: column; }
.topic { display: flex; flex-direction: column; gap: var(--space-32); }
.topic__head { display: flex; flex-direction: column; gap: var(--space-12); padding-bottom: 24px; }
.topic__kicker { font-size: 11px; line-height: 12px; font-weight: 800; color: var(--color-brand-ink); }
.topic__title { font-family: var(--font-display); font-weight: 900; font-size: 36px; line-height: 45px; color: var(--color-ink); }
.topic__lead { font-size: 16px; line-height: 24px; color: var(--color-muted-light); }
.topic__items { display: flex; flex-direction: column; gap: var(--space-32); }
.topic__empty { padding: var(--space-24) 0; font-size: 15px; line-height: 24px; color: var(--color-muted-light); }
.topic__empty a { color: var(--color-brand-ink); }

.hitem { display: flex; flex-direction: column; gap: var(--space-16); padding-bottom: 32px; box-shadow: inset 0 -1px 0 var(--color-line-light); }

.hitem__head { display: flex; align-items: center; gap: var(--space-16); }
.hitem__num { font-family: var(--font-mono); font-weight: 800; font-size: 18px; line-height: 23px; color: var(--color-brand-ink); }
.hitem__title { font-family: var(--font-display); font-weight: 900; font-size: 18px; line-height: 22px; color: var(--color-ink); }
.hitem__body { display: flex; flex-direction: column; gap: var(--space-12); padding-inline: 36px; }
.hitem__text { font-size: 15px; line-height: 24px; color: var(--color-ink); }
.hitem__badge { color: #b91c1c; }
.hitem__callout { display: flex; align-items: center; gap: var(--space-12); padding: 12px; border-radius: var(--radius-md); background: var(--color-light-2); font-size: 13px; line-height: 14px; color: var(--color-ink); }
.hitem__login { display: flex; align-items: center; gap: var(--space-16); align-self: flex-start; padding: 14px; border-radius: var(--radius-md); background: var(--color-surface); }
.hitem__login-text { font-size: 13px; line-height: 14px; color: var(--color-muted); }
.hitem__login-btns { display: flex; gap: var(--space-16); }
.hitem__mock { padding: 8px 16px; border: 0; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; line-height: 14px; font-weight: 700; color: var(--color-text); transition: background-color var(--dur-fast) var(--ease); }
.hitem__mock--ghost { background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-line-dark); }
.hitem__mock--ghost:hover { background: var(--color-ink); }
.hitem__mock--brand { background: var(--color-brand); }
.hitem__mock--brand:hover { background: var(--color-brand-hover); }
.hitem__flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-12); }
.hitem__step { display: flex; flex-direction: column; gap: var(--space-4); padding: 12px; border-radius: var(--radius-md); background: var(--color-light-2); box-shadow: inset 0 0 0 1px var(--color-line-light); }
.hitem__step-num { font-family: var(--font-mono); font-weight: 800; font-size: 11px; line-height: 14px; color: var(--color-brand-ink); }
.hitem__step-name { font-size: 13px; line-height: 14px; font-weight: 700; color: var(--color-ink); }
.hitem__step:last-child .hitem__step-name { color: var(--color-muted-light); }
.hitem__checks { display: flex; flex-direction: column; gap: var(--space-8); padding: 16px; border-radius: var(--radius-md); background: var(--color-light-2); }
.hitem__check { display: flex; align-items: center; gap: var(--space-12); padding-bottom: 4px; font-size: 13px; line-height: 14px; }
.hitem__check-icon { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--color-brand); color: #fff; }
.hitem__check-icon .icon { width: 10px; height: 10px; }
.hitem__check-name { font-weight: 700; color: var(--color-ink); }
.hitem__check-desc { color: var(--color-muted-light); }
.hitem__link { align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer; font-size: 14px; line-height: 15px; font-weight: 700; color: var(--color-brand-ink); text-decoration: none; }
.hitem__link:hover { text-decoration: underline; }

/* ── mobile (frame help-centre-mobile 390) ────────────────────────────── */
@media (max-width: 1199px) {
  .hhero { grid-template-columns: 1fr; height: auto; background: var(--color-bg); }
  .hhero__copy { gap: 30px; padding: 40px var(--container-pad-m) 32px; justify-content: flex-start; }
  .hhero__stack { gap: 30px; }
  .hhero__eyebrow { font-size: 10px; line-height: 11px; height: 23px; }
  .hhero__titles { display: flex; flex-direction: column; gap: var(--space-12); }
  .hhero__title { font-size: 32px; line-height: 34px; letter-spacing: -1.28px; }
  .hhero__lead { font-size: 14px; line-height: 20px; }
  .hhero__lead-d { display: none; }
  .hhero__lead-m { display: inline; }
  .hhero__quick { display: none; }
  .hhero__pic-m { display: block; height: 220px; border-radius: var(--radius-lg); overflow: hidden; }
  .hhero__pic-m img { width: 100%; height: 100%; object-fit: cover; }
  .hhero__media { display: none; }

  .kb { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .kb__side { position: static; gap: 0; padding: 32px var(--container-pad-m) 16px; border-radius: 0; background: var(--color-light); box-shadow: none; }
  .kb__toggle {
    display: flex; justify-content: space-between; align-items: center; width: 100%; height: 60px; padding: 16px;
    border: 0; border-radius: var(--radius-lg); background: var(--color-light-2); cursor: pointer; text-align: left;
  }
  .kb__toggle-text { display: flex; flex-direction: column; gap: 2px; }
  .kb__toggle-label { font-size: 10px; line-height: 11px; color: var(--color-muted-light); }
  .kb__toggle-current { font-size: 14px; line-height: 15px; font-weight: 700; color: var(--color-bg); }
  .kb__chev { width: 18px; height: 18px; color: var(--color-ink); transition: transform var(--dur-base) var(--ease); }
  .kb__toggle[aria-expanded="true"] .kb__chev { transform: rotate(180deg); }
  .kb__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease); }
  .kb__panel.is-open { grid-template-rows: 1fr; }
  .kb__panel > div { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s var(--dur-base); }
  .kb__panel.is-open > div { visibility: visible; transition-delay: 0s; padding-top: 12px; }
  .kb__label { display: none; }
  .kb__content { padding: 16px var(--container-pad-m) 40px; }
  .topic { gap: var(--space-48); }
  .topic__head { padding-bottom: 0; }
  .topic__kicker { font-size: 10px; line-height: 11px; }
  .topic__title { font-size: 30px; line-height: 33px; color: var(--color-bg); }
  .topic__lead { font-size: 15px; line-height: 21px; color: var(--color-bg); }
  .topic__items { gap: var(--space-48); }
  .hitem { padding-bottom: 0; box-shadow: none; }
  .hitem__head { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .hitem__num { font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 35px; color: var(--color-brand); }
  .hitem__title { font-size: 22px; line-height: 27px; color: var(--color-bg); }
  .hitem__body { padding-inline: 0; gap: var(--space-16); }
  .hitem__text { line-height: 23px; color: var(--color-bg); }
  .hitem__callout { padding: 14px; border-radius: var(--radius-10); line-height: 14px; color: var(--color-bg); }
  .hitem__login { flex-direction: column; align-items: stretch; align-self: stretch; padding: 20px; border-radius: var(--radius-lg); background: var(--color-bg); }
  .hitem__login-text { font-size: 14px; line-height: 15px; color: var(--color-text); }
  .hitem__login-btns { gap: var(--space-12); }
  .hitem__mock { flex: 1; height: 44px; padding: 0; border-radius: var(--radius-md); font-size: 14px; line-height: 15px; }
  .hitem__flow { grid-template-columns: 1fr; gap: var(--space-8); }
  .hitem__step { flex-direction: row; align-items: center; gap: var(--space-12); height: 50px; padding: 16px; border-radius: var(--radius-lg); box-shadow: none; }
  .hitem__step-num { font-size: 14px; line-height: 18px; }
  .hitem__step-name { font-size: 14px; line-height: 15px; }
  .hitem__checks { gap: 0; border-radius: var(--radius-lg); }
  .hitem__check { display: grid; grid-template-columns: 14px 1fr; column-gap: 8px; row-gap: 0; align-items: center; padding: 12px 0; }
  .hitem__check-icon { width: 14px; height: 14px; }
  .hitem__check-desc { grid-column: 1 / -1; margin-top: 4px; font-size: 12px; line-height: 13px; }
  .hitem__link { font-size: 13px; line-height: 14px; color: var(--color-brand); }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .hhero { grid-template-columns: minmax(0, 1fr) 40%; }
}

/* mobile fixes from the frame-by-frame style check */
@media (max-width: 1199px) {
  .hitem__check { box-shadow: inset 0 -1px 0 var(--color-line-light); }
  .hitem__check:last-child { box-shadow: none; }
  .kb__toggle-label { font-weight: 800; }
  .hitem__login-text { font-weight: 700; }
  .hhero__lead { opacity: .6; }
  .topic__lead { opacity: .8; }
}

/* wider than the 1440 frame: the copy column keeps its frame width next to the centred content,
   the photo column takes the rest (the side padding sits on the full-bleed hero, so the token resolves right) */
@media (min-width: 1441px) {
  .hhero { padding-left: var(--container-pad); grid-template-columns: 760px minmax(0, 1fr); }
  .hhero__copy { padding-left: 0; }
}