/* =========================================================
   Page — Help centre

   A reading page, not a selling one. No hero glow and no
   gradient: the visitor arrived with a sentence already in
   mind, and the page's job is to get out of its way.

   Layer 3 only — every value below reads a token.
   ========================================================= */

/* ---------------------------------------------------------
   The head

   Narrower than the marketing heroes. The field under the
   headline is the control this page opens with, and a search
   box set at 46rem reads as a form rather than as a search.
   --------------------------------------------------------- */
.hp-head {
  padding-block: var(--space-16) var(--space-8);
}

.hp-head__inner {
  max-width: 42rem;
}

.hp-head__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.hp-head__lead {
  margin: 0 0 var(--space-8);
  color: var(--color-text-secondary);
}

.hp-head__meta {
  margin: var(--space-4) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   The filter

   Hidden in the markup and unhidden by help.js, so the field
   never exists without the behaviour behind it.

   The icon sits inside the field rather than beside it, and the
   padding that clears it is logical — inline-start — so the
   magnifier does not end up under the caret when the page flips
   to English.
   --------------------------------------------------------- */
.hp-search {
  position: relative;
}

.hp-search__icon {
  position: absolute;
  inset-block-start: 0.95rem;
  inset-inline-start: var(--space-4);
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  pointer-events: none;
}

.hp-search__input {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  padding-inline-start: calc(var(--space-4) + 20px + var(--space-3));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-base);
}

.hp-search__input::placeholder {
  color: var(--color-text-muted);
}

.hp-search__input:focus-visible {
  outline: 2px solid var(--color-gold-text);
  outline-offset: 2px;
  border-color: transparent;
}

/* WebKit draws its own × inside a type=search and puts it on the
   wrong edge in RTL. Escape clears the field, and help.js says so. */
.hp-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.hp-search__count {
  margin: var(--space-3) 0 0;
  min-height: 1.25rem;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------
   The topic jump
   --------------------------------------------------------- */
.hp-jump {
  padding-block: 0 var(--space-8);
}

.hp-jump__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hp-jump__chip {
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.hp-jump__chip:hover {
  color: var(--color-gold-text);
  border-color: var(--color-line-strong);
}

/* ---------------------------------------------------------
   The topics

   One column at a readable measure. A two-column FAQ makes the
   reader choose a side before they have read a question, and
   halves the line length of the answers for nothing.

   scroll-margin is the jump links' doing: without it an anchor
   lands the heading under the sticky header.
   --------------------------------------------------------- */
.hp-topics__inner {
  max-width: 52rem;
}

.hp-topic {
  scroll-margin-block-start: calc(var(--header-height) + var(--space-8));
}

.hp-topic + .hp-topic {
  margin-block-start: var(--space-16);
}

.hp-topic__head {
  margin-block-end: var(--space-5);
}

.hp-topic__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

.hp-topic__lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* The link under an answer. It carries the accordion body's own
   bottom padding, so an answer with a link and one without close
   at the same distance from the rule beneath them. */
.hp-topic__link {
  margin: 0;
  padding-bottom: var(--space-5);
}

.accordion__body + .hp-topic__link {
  margin-block-start: calc(var(--space-2) * -1);
}

.hp-empty {
  margin: 0;
  padding-block: var(--space-12);
  color: var(--color-text-secondary);
  text-align: center;
  text-wrap: balance;
}

/* ---------------------------------------------------------
   The way out

   Two cards and no buttons. A merchant reading this arrived
   because something is not working, and a page that answers
   them and then asks them to buy reads as a page that was
   waiting for the ask all along.
   --------------------------------------------------------- */
.hp-out {
  padding-block: var(--space-12) var(--space-24);
}

.hp-out__grid {
  margin-block-start: var(--space-10);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.hp-out__title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h4);
}

.hp-out__body {
  margin: 0 0 var(--space-4);
  max-width: 34rem;
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

@media (max-width: 720px) {
  .hp-head {
    padding-block: var(--space-12) var(--space-6);
  }

  .hp-topic + .hp-topic {
    margin-block-start: var(--space-12);
  }

  .hp-out__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}