/* ============================================================
   SUPPORT & CONTENT PAGES — help-centre look
   ============================================================ */

/* Hero */
.sup-hero {
  background: var(--hs-tint);
  border-bottom: 1px solid #D5E5F6;
  padding: 0 0 30px;
}
.sup-hero .crumbs { padding-top: 14px; }
.sup-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: var(--r-1);
  background: var(--hs-brand);
  color: #fff;
  font-size: 12px; font-weight: 700;
}
.sup-hero__title { margin-top: 12px; font-size: clamp(26px, 1.4vw + 18px, 36px); font-weight: 800; letter-spacing: -.01em; }
.sup-hero__lede { margin-top: 10px; font-size: 16px; color: var(--hs-ink-2); max-width: 72ch; }

.sup-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.sup-fact { background: #fff; border-radius: var(--r-3); box-shadow: var(--sh-card); padding: 16px 18px; }
.sup-fact__n { font-size: 28px; font-weight: 800; color: var(--hs-ink); line-height: 1.1; }
.sup-fact__l { margin-top: 4px; font-size: 13px; color: var(--hs-ink-2); }

/* Journey (8 stages) */
.journey__track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.jstep {
  display: flex; gap: 12px;
  padding: 16px;
  border: 1px solid var(--hs-line);
  border-radius: var(--r-3);
  background: #fff;
}
.jstep__node {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--hs-bg); color: var(--hs-ink-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.jstep--done .jstep__node { background: var(--hs-brand); color: #fff; }
.jstep__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jstep__n { font-size: 11px; font-weight: 700; color: var(--hs-gray); }
.jstep__t { font-size: 15px; font-weight: 700; }
.jstep__d { font-size: 13px; color: var(--hs-ink-2); }
.jstep__time {
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: var(--r-1);
  background: var(--hs-brand-100);
  font-size: 12px; font-weight: 700;
}

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.step-card {
  position: relative;
  padding: 18px;
  border-radius: var(--r-3);
  background: #fff;
  box-shadow: var(--sh-card);
  display: flex; flex-direction: column; gap: 6px;
}
.step-card__n {
  position: absolute; top: 14px; right: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--hs-brand); color: var(--hs-ink);
  font-size: 13px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.step-card__icon { color: var(--hs-ink); }
.step-card__t { font-size: 16px; font-weight: 700; margin-top: 4px; }
.step-card__d { font-size: 14px; color: var(--hs-ink-2); }
.step-card__d a { color: var(--hs-ink); text-decoration: underline; }
.step-card__meta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 700; color: var(--hs-gray); }

/* Callout */
.callout {
  display: flex; gap: 12px;
  padding: 16px 18px;
  border-radius: var(--r-3);
  background: var(--hs-tint);
  border: 1px solid #D5E5F6;
}
.callout + .callout { margin-top: 12px; }
.callout__icon { color: var(--hs-ink); margin-top: 1px; }
.callout__t { font-size: 15px; font-weight: 700; }
.callout__d { margin-top: 3px; font-size: 14px; color: var(--hs-ink-2); }
.callout__d a { color: var(--hs-ink); text-decoration: underline; }
.callout--ok { background: #EEF7EA; border-color: #BFE0B2; }
.callout--ok .callout__icon { color: var(--hs-green); }
.callout--warn { background: var(--hs-brand-50); border-color: #F2DE9C; }
.callout--warn .callout__icon { color: #9A6B00; }

/* Help cards */
.help-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.help-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px;
  border-radius: var(--r-3);
  background: #fff;
  border: 1px solid var(--hs-line);
  transition: border-color .15s, box-shadow .15s;
}
a.help-card:hover { border-color: var(--hs-ink); box-shadow: inset 0 0 0 1px var(--hs-ink); }
.help-card__icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--hs-tint); color: var(--hs-ink);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.help-card__t { font-size: 16px; font-weight: 700; }
.help-card__d { font-size: 14px; color: var(--hs-ink-2); }
.help-card__go { margin-top: auto; padding-top: 4px; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.help-card__go svg { display: none; }
.band--ice .help-card { border-color: transparent; box-shadow: var(--sh-card); }

/* FAQ */
.faq { border-top: 1px solid var(--hs-line); max-width: 900px; }
.faq__item { border-bottom: 1px solid var(--hs-line); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0;
  text-align: left;
  font-size: 16px; font-weight: 700;
}
.faq__q svg { transition: transform .2s; flex-shrink: 0; }
.faq__q[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq__a { display: none; padding: 0 0 18px; font-size: 15px; color: var(--hs-ink-2); max-width: 80ch; }
.faq__a.is-open { display: block; }
.faq__a a { color: var(--hs-ink); text-decoration: underline; }
.faq__a p + p { margin-top: 8px; }
.band--ice .faq { background: #fff; border-radius: var(--r-3); border: 0; box-shadow: var(--sh-card); padding: 0 20px; }
.band--ice .faq__item:last-child { border-bottom: 0; }

/* CTA band */
.cta-band {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 28px;
  border-radius: var(--r-3);
  background: var(--hs-brand-100);
}
.cta-band__t { font-size: 20px; font-weight: 800; }
.cta-band__d { margin-top: 4px; font-size: 14px; color: var(--hs-ink-2); max-width: 70ch; }
.cta-band__actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }

/* Info table */
.itable {
  width: 100%;
  border: 1px solid var(--hs-line);
  border-radius: var(--r-3);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #fff;
  font-size: 14px;
}
.itable th { background: var(--hs-bg); text-align: left; font-size: 13px; font-weight: 700; padding: 12px 16px; }
.itable td { padding: 12px 16px; border-top: 1px solid var(--hs-line); color: var(--hs-ink-2); vertical-align: top; }
.itable td strong { color: var(--hs-ink); }

/* Contact ticket */
.ticket-wrap { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ticket-card { background: #fff; border-radius: var(--r-3); box-shadow: var(--sh-card); padding: 24px; }
.ticket-card__head { display: flex; gap: 14px; margin-bottom: 18px; }
.ticket-card__icon {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
  background: var(--hs-brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.ticket-card__t { font-size: 20px; font-weight: 700; }
.ticket-card__d { font-size: 14px; color: var(--hs-gray); margin-top: 2px; }
.ticket-form { display: flex; flex-direction: column; gap: 14px; }
.ticket-row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ticket-field { display: flex; flex-direction: column; gap: 5px; }
.ticket-field label { font-size: 13px; font-weight: 700; }
.ticket-req { color: var(--hs-red); }
.ticket-help { font-size: 12px; color: var(--hs-gray); }
.ticket-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ticket-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ticket-submit {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 28px;
  border-radius: var(--pill);
  background: var(--hs-brand); color: #fff;
  font-size: 16px; font-weight: 700;
}
.ticket-submit:hover { background: var(--hs-brand-dark); }
.ticket-notice { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-2); margin-bottom: 16px; font-size: 14px; }
.ticket-notice--ok { background: #EEF7EA; color: var(--hs-ink); }
.ticket-notice--ok .ticket-notice__icon { color: var(--hs-green); }
.ticket-notice--err { background: #FDECEC; }
.ticket-notice--err .ticket-notice__icon { color: var(--hs-red); }
.ticket-aside { display: flex; flex-direction: column; gap: 12px; }
.ticket-aside .callout + .callout { margin-top: 0; }

/* Track order */
.track-wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.track-form-card { background: #fff; border-radius: var(--r-3); box-shadow: var(--sh-card); padding: 24px; }
.track-aside { display: flex; flex-direction: column; gap: 12px; }
.track-aside .callout + .callout { margin-top: 0; }

/* Legal */
.legal-page { padding-bottom: 48px; }
.legal-page__head { padding: 28px 0 20px; border-bottom: 1px solid var(--hs-line); margin-bottom: 28px; }
.legal-page__title { font-size: clamp(26px, 1.4vw + 18px, 34px); font-weight: 800; }
.legal-page__updated { margin-top: 6px; font-size: 13px; color: var(--hs-gray); }
.legal-page__layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
.legal-toc {
  position: sticky; top: 140px;
  background: var(--hs-tint);
  border-radius: var(--r-3);
  padding: 16px 18px;
}
.legal-toc__title { font-size: 14px; font-weight: 800; margin-bottom: 8px; }
.legal-toc ol { padding-left: 18px; font-size: 14px; }
.legal-toc li + li { margin-top: 6px; }
.legal-toc a:hover { color: var(--hs-ink); text-decoration: underline; }
.legal-page__content { max-width: 78ch; font-size: 15px; line-height: 1.75; color: var(--hs-ink-2); }
.legal-page__content h2 { color: var(--hs-ink); scroll-margin-top: 140px; }

/* Generic page & article */
.hs-page { padding-bottom: 48px; max-width: 900px; }
.hs-page__head { padding: 8px 0 18px; }
.hs-page__t { font-size: clamp(26px, 1.4vw + 18px, 34px); font-weight: 800; }
.hs-page__body { font-size: 16px; line-height: 1.75; color: var(--hs-ink-2); }

/* Inline two-up blocks in the templates fold on phones */
@media (max-width: 1023px) {
  .sup-facts, .journey__track, .steps, .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ticket-wrap, .track-wrap { grid-template-columns: 1fr; }
  .legal-page__layout { grid-template-columns: 1fr; gap: 20px; }
  .legal-toc { position: static; }
}

@media (max-width: 639px) {
  .sup-hero { padding-bottom: 22px; }
  .sup-hero__lede { font-size: 15px; }
  .sup-fact { padding: 12px 14px; }
  .sup-fact__n { font-size: 22px; }
  .journey__track, .steps, .help-grid { grid-template-columns: 1fr; }
  .js-two-up { grid-template-columns: 1fr !important; }
  .cta-band { flex-direction: column; align-items: flex-start; padding: 20px; }
  .ticket-row--two { grid-template-columns: 1fr; }
  .ticket-card, .track-form-card { padding: 18px 16px; }
  .itable thead { display: none; }
  .itable, .itable tbody, .itable tr, .itable td { display: block; width: 100%; }
  .itable tr + tr { border-top: 1px solid var(--hs-line); }
  .itable td { border-top: 0; padding: 8px 14px; }
  .itable td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: var(--hs-gray); text-transform: uppercase; letter-spacing: .04em; }
}

/* Side-by-side callouts sit level; one help band per page is enough. */
.js-two-up .callout + .callout { margin-top: 0; }
body:has(.cta-band) .hs-footer__help { display: none; }