/* Styles extracted from help-center.php inline <style> (static blocks). */
.hc-hero{background:var(--blue-color);color:#fff;padding:54px 0 48px;text-align:center}
  .hc-hero h1{margin:0 0 10px;font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.5px}
  .hc-hero p{margin:0 auto;max-width:560px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.82)}
  .hc-hero p a{color:#fff;text-decoration:underline}
  .hc-wrap{max-width:1140px;margin:0 auto;padding:0 16px}
  /* Topic buttons in a left rail, questions on the right — the same shape as the blog page.
     The rail sticks while the answers scroll, so the topics stay reachable all the way down. */
  /* No negative pull any more. The old -32px lifted the card grid onto the navy hero on purpose;
     now the whole two-column block would ride up with it and the "Frequently asked questions"
     heading landed as dark text on the dark hero. */
  .hc-layout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:26px;align-items:start;margin-top:34px;position:relative;z-index:2}
  .hc-side{position:sticky;top:96px}
  .hc-main{min-width:0}
  .hc-cards{display:flex;flex-direction:column;gap:10px;margin:0 0 26px}
  .hc-card{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #e9ebf0;
    border-radius:5px;padding:15px 16px;text-decoration:none;color:#1a1a2e;font-weight:600;font-size:13.5px;
    box-shadow:0 4px 18px rgba(20,20,50,.06);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
  .hc-card:hover{transform:translateY(-2px);border-color:rgba(201,15,83,.4);box-shadow:0 10px 26px rgba(201,15,83,.12);color:#1a1a2e}
  .hc-card__ic{width:38px;height:38px;flex-shrink:0;border-radius:5px;display:flex;align-items:center;
    justify-content:center;background:#fdeef4;color:var(--main-color);font-size:15px}
  .hc-acc{margin:0 0 50px}
  .hc-sec-title{font-size:20px;font-weight:800;color:#0e1120;margin:0 0 16px}
  /* scroll-margin-top keeps a question clear of the fixed site header when it is scrolled into
     view on open — cleaner than offset maths, and it works whichever element does the scrolling. */
  .hc-item{border:1px solid #e9ebf0;border-radius:5px;margin-bottom:10px;background:#fff;overflow:hidden;scroll-margin-top:96px}
  .hc-item.is-open{border-color:rgba(201,15,83,.45);box-shadow:0 6px 20px rgba(201,15,83,.08)}
  .hc-q{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;cursor:pointer;
    padding: var(--btn-py) 18px;font-size:15px;font-weight: var(--btn-fw);color:#0e1120;text-align:left}
  .hc-q__ic{width:34px;height:34px;flex-shrink:0;border-radius:5px;display:flex;align-items:center;
    justify-content:center;background:#fdeef4;color:var(--main-color);font-size:14px}
  .hc-q__txt{flex:1}
  .hc-q__car{color:var(--main-color);font-size:13px;transition:transform .2s ease}
  .hc-item.is-open .hc-q__car{transform:rotate(90deg)}
  .hc-a{display:none;padding:0 18px 18px 64px}
  .hc-item.is-open .hc-a{display:block}
  .hc-a ul{margin:0;padding:0 0 0 18px}
  .hc-a li{margin:7px 0;font-size:14px;line-height:1.65;color:#41465a}
  .hc-a a{color:var(--main-color);font-weight:600;text-decoration:none}
  .hc-a a:hover{text-decoration:underline}
  .hc-cta{background:#fbfbfd;border:1px solid #e9ebf0;border-radius:5px;padding:30px 26px;text-align:center;margin-bottom:54px}
  .hc-cta h3{margin:0 0 8px;font-size:19px;font-weight:800;color:#0e1120}
  .hc-cta p{margin:0 0 18px;color:#6b7080;font-size:14px}
  .hc-btn{display:inline-flex;align-items:center;gap:8px;padding: var(--btn-py) var(--btn-px);border-radius:5px;
    background:var(--main-color);color:#fff;font-weight: var(--btn-fw);font-size:14px;text-decoration:none;transition:background .16s ease}
  .hc-btn:hover{background:var(--main-dark);color:#fff}
  @media only screen and (min-width: 320px) and (max-width: 539px),
         only screen and (min-width: 540px) and (max-width: 767px) {
    .hc-a { padding-left: 18px; }
  }
  /* One column on tablets and phones: topics first, then the questions. */
  @media (max-width: 900px) {
    .hc-layout{grid-template-columns:1fr;gap:0;margin-top:28px}
    .hc-side{position:static}
    .hc-cards{margin-bottom:34px}
  }