/* Help centre: a sky-tinted search band, then answers by topic (only the matching ones while searching), then two ways
   to reach a person. */

.hp-hero { padding: 140px 0 40px; background: linear-gradient(180deg, var(--sky-light), rgba(224,242,254,0)) }
.hp-hero .h-xl { max-width: 14ch }
.hp-search { position: relative; max-width: 760px; margin: 30px 0 0 }
.hp-search svg { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none }
.hp-search input { box-sizing: border-box; width: 100%; height: 68px; padding: 0 22px 0 60px; border-radius: 20px; border: 2px solid var(--border); background: #fff;
  font: 500 19px/1 var(--font); color: var(--ink); box-shadow: 0 30px 60px -45px rgba(31,35,40,.45); outline: none; -webkit-appearance: none; appearance: none }
.hp-search input::placeholder { color: var(--faint) }
.hp-search input:focus { border-color: var(--sky-dark); box-shadow: 0 0 0 4px rgba(56,189,248,.25) }
.hp-topics[hidden] { display: none }
.hp-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0 }
.hp-topics button { all: unset; box-sizing: border-box; cursor: pointer; padding: 9px 15px; border-radius: 99px; border: 1px solid var(--border); background: #fff; font-size: 15px; font-weight: 600; color: var(--muted) }
.hp-topics button:hover { color: var(--ink); border-color: #C3CDD8 }
.hp-topics button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff }
.hp-topics button:focus-visible { outline: 3px solid var(--sky-dark); outline-offset: 2px }

.hp-list { padding-top: 10px; padding-bottom: clamp(50px, 8vh, 90px); max-width: 1000px; margin-left: max(0px, calc((100% - 1320px) / 2)) }
.hp-count { margin: 0 0 6px; min-height: 22px; font-size: 14.5px; font-weight: 600; color: var(--faint) }
.hp-topic { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px 40px; padding: 26px 0 }
.hp-topic + .hp-topic { border-top: 1px solid var(--border) }
.hp-topic h2 { margin: 18px 0 0; font: 800 20px/1.25 var(--font); letter-spacing: -0.01em }
.hp-topic[hidden], .hp-topic details[hidden] { display: none }
.hp-topic .faq-p details:last-child { border-bottom: 0 }
.hp-topic mark { background: #FDF0C4; color: inherit; border-radius: 3px; padding: 0 1px }
.hp-none { padding: 40px 0 } .hp-none[hidden] { display: none } .hp-none b { display: block; font-size: 22px } .hp-none p { margin: 8px 0 0; color: var(--muted); font-size: 17px }

.hp-support { padding: clamp(50px, 8vh, 90px) 0 clamp(70px, 11vh, 120px); background: #fff; border-top: 1px solid var(--border) }
.hp-support ul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; max-width: 900px }
.hp-support li { padding: 20px 0 0; border-top: 3px solid var(--sky) }
.hp-support b { font-size: 20px } .hp-support p { margin: 8px 0 10px; color: var(--muted); font-size: 16.5px }
.hp-support a { color: var(--link); font-weight: 700; font-size: 18px; text-decoration: none } .hp-support a:hover { text-decoration: underline }

@media (max-width: 760px) {
  .hp-hero { padding-top: 110px }
  .hp-search input { height: 58px; font-size: 17px }
  .hp-topic { grid-template-columns: 1fr; gap: 0 } .hp-topic h2 { margin: 0 0 4px }
  .hp-support ul { grid-template-columns: 1fr; gap: 26px }
}