/*
 * Help Centre — FAQ.1 production port of the human-approved SYN system
 * (lab: help-centre-lab/faq1-global-help, FINAL-RECOMMENDATION §H).
 * Landing: Navy Help Hero (asset-free fallback — the HF-01 media slot is a
 * deferred optional asset, so V1 ships the approved single-column graceful
 * composition) → Most Asked accordions → C2+ topic cards (compact rows
 * ≤767) → Guides (asset-independent) → Still Need Help. I2 duotone icon
 * chips. All colour/type from design-system tokens.
 */

/* ---------- scaffolding ---------- */
.pp-hc { background: #fff; color: var(--pp-ink); }
.pp-hc-wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 767px) { .pp-hc-wrap { padding: 0 16px; } }
.pp-hc h1, .pp-hc h2, .pp-hc h3, .pp-hc p { margin: 0; }
.pp-hc :focus-visible { outline: 2px solid var(--pp-navy); outline-offset: 2px; border-radius: 4px; }
.pp-hc svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.pp-hc-sec { padding: 42px 0 8px; }
.pp-hc-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.pp-hc-sec-title { font: 600 27px/1.12 var(--pp-font-display); letter-spacing: -.01em; }
.pp-hc-sec-title--s { font-size: 24px; }
.pp-hc-sec-sub { font: 400 14.5px/1.5 var(--pp-font-body); color: var(--pp-secondary-text); margin-top: 6px; max-width: 620px; }
@media (max-width: 429px) { .pp-hc-sec-title { font-size: 25px; } }

/* eyebrow — HS.1 family, hero-only (SYN eyebrow discipline) */
.pp-hc-eb { display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; font: 700 12px/1.3 var(--pp-font-body); letter-spacing: .08em; color: rgba(255, 255, 255, .72); }
.pp-hc-eb::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pp-lime); flex: none; }

/* ---------- hero (Navy, asset-free single column) ---------- */
.pp-hc-hero { background: var(--pp-navy); }
.pp-hc-hero-inner { padding: 46px 0 48px; max-width: 720px; }
.pp-hc-hero-title { font: 600 clamp(28px, 3.2vw, 38px)/1.06 var(--pp-font-display); letter-spacing: -.012em; margin: 12px 0 8px; color: #fff; }
.pp-hc-hero-sub { font: 400 14.5px/1.55 var(--pp-font-body); color: rgba(255, 255, 255, .78); max-width: 480px; }
@media (max-width: 1023px) { .pp-hc-hero-inner { padding: 36px 0 34px; } }

/* ---------- search ---------- */
.pp-hc-search { position: relative; max-width: 640px; margin-top: 22px; }
.pp-hc-search-box { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--pp-border); border-radius: 14px; padding: 0 8px 0 18px; height: 54px; box-shadow: 0 10px 30px rgba(17, 17, 17, .06); }
/* Focus belongs to the whole search shell (human micro-fix §3): one
   restrained Navy ring via :focus-within, no inner rectangle, no layout
   shift (box-shadow ring), keyboard focus stays clearly visible. */
.pp-hc-search-box:focus-within { border-color: var(--pp-navy); box-shadow: 0 0 0 3px var(--pp-navy-tint-strong), 0 10px 30px rgba(20, 47, 81, .12); }
/* The inner input owns NO independent focus paint (human final correction):
   the shell's :focus-within ring above is the one visible, accessible focus
   treatment. Covers :focus AND :focus-visible — the design-system's
   zero-specificity :where() focus language paints a 1px ink --pp-focus-ring
   box-shadow (not an outline) on bare inputs, so box-shadow must be
   suppressed too. Scoped to the Help search input only. */
.pp-hc-search-input:focus, .pp-hc-search-input:focus-visible { outline: none; box-shadow: none; border: 0; }
.pp-hc-search-box > svg { width: 19px; height: 19px; flex: none; color: var(--pp-secondary-text); }
/* width:0 + flex:1 — a flex input otherwise contributes ~193px intrinsic
   min-content in Chromium despite min-width:0 (FAQ.1 lab finding). */
.pp-hc-search-input { flex: 1; min-width: 0; width: 0; border: 0; background: none; font: 400 15.5px/1.2 var(--pp-font-body); color: var(--pp-ink); height: 100%; }

.pp-hc-search-input::placeholder { color: #9AA0A3; }
.pp-hc-search-input::-webkit-search-cancel-button { display: none; }
.pp-hc-search-clear { flex: none; display: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--pp-secondary-text); cursor: pointer; align-items: center; justify-content: center; }
.pp-hc-search-clear svg { width: 15px; height: 15px; }
.pp-hc-search-clear:hover { background: rgba(20, 47, 81, .06); color: var(--pp-ink); }
.pp-hc-search.has-q .pp-hc-search-clear { display: inline-flex; }
/* the selected lab search shell: icon + input + explicit Search button */
.pp-hc-search-btn { flex: none; height: 42px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--pp-navy); color: #fff; font: 600 14px/1 var(--pp-font-body); cursor: pointer; }
.pp-hc-search-btn:hover { background: var(--pp-navy-hover); }
@media (max-width: 429px) { .pp-hc-search-btn { padding: 0 14px; } }

.pp-hc-search-panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; background: #fff; border: 1px solid var(--pp-border); border-radius: 14px; box-shadow: 0 16px 40px rgba(17, 17, 17, .14); padding: 10px; display: none; text-align: left; max-height: 430px; overflow: auto; }
.pp-hc-search.open .pp-hc-search-panel { display: block; }
.pp-hc-sp-label { font: 700 10.5px/1 var(--pp-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--pp-secondary-text); padding: 10px 10px 8px; }
.pp-hc-sp-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 10px; border-radius: 10px; font: 500 14.5px/1.4 var(--pp-font-body); color: var(--pp-ink); text-decoration: none; }
.pp-hc-sp-item:hover { background: rgba(20, 47, 81, .06); }
.pp-hc-sp-item svg { width: 15px; height: 15px; flex: none; color: var(--pp-secondary-text); }
.pp-hc-sp-item .cat { margin-left: auto; flex: none; font: 600 11px/1 var(--pp-font-body); color: var(--pp-secondary-text); background: var(--pp-soft-surface); border: 1px solid #ECEDEB; border-radius: 999px; padding: 5px 9px; }
.pp-hc-sp-item mark { background: rgba(215, 255, 0, .55); color: inherit; border-radius: 3px; padding: 0 1px; }
.pp-hc-sp-empty { padding: 18px 12px 8px; }
.pp-hc-sp-empty b { font: 600 15px/1.4 var(--pp-font-body); }
.pp-hc-sp-empty p { font: 400 13.5px/1.5 var(--pp-font-body); color: var(--pp-secondary-text); margin: 4px 0 12px; }
.pp-hc-sp-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 10px 12px; }
.pp-hc-sp-chip { display: inline-block; border: 1px solid var(--pp-border); background: #fff; border-radius: 999px; padding: 8px 14px; font: 500 13px/1.3 var(--pp-font-body); color: var(--pp-ink); cursor: pointer; text-decoration: none; }
.pp-hc-sp-chip:hover { border-color: var(--pp-navy); }
.pp-hc-sp-contact { display: block; border-top: 1px solid #EEEFED; margin-top: 6px; padding: 12px 10px; font: 500 13.5px/1.4 var(--pp-font-body); color: var(--pp-navy); text-decoration: none; }

/* ---------- I2 duotone icon chip ---------- */
.pp-hc-ic { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 13px; background: rgba(20, 47, 81, .06); color: var(--pp-navy); }
.pp-hc-ic::before { content: ""; position: absolute; right: 6px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--pp-lime); }
.pp-hc-ic::after { content: ""; position: absolute; left: 7px; bottom: 7px; width: 16px; height: 16px; border-radius: 50%; background: rgba(20, 47, 81, .10); }
.pp-hc-ic svg { width: 24px; height: 24px; position: relative; z-index: 1; }

/* ---------- Most Asked (accordion grid) ---------- */
.pp-hc-ma-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; align-items: start; }
@media (max-width: 819px) { .pp-hc-ma-grid { grid-template-columns: 1fr; } }
.pp-hc-ma-grid .pp-hc-acc { border: 1px solid #E8EAE8; border-radius: 12px; background: #fff; transition: border-color .15s; }
.pp-hc-ma-grid .pp-hc-acc:hover { border-color: var(--pp-navy); }
.pp-hc-ma-grid .pp-hc-acc-q { padding: 15px 16px; }
.pp-hc-ma-grid .pp-hc-acc-a { padding: 0 16px 18px; }

/* accordion primitives (shared: Most Asked + hub lists) */
.pp-hc-acc-q { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 15px 2px; font: 500 15px/1.4 var(--pp-font-body); color: var(--pp-ink); text-decoration: none; }
.pp-hc-acc-q:hover { color: var(--pp-navy); }
.pp-hc-acc-q .n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(20, 47, 81, .06); color: var(--pp-navy); display: inline-flex; align-items: center; justify-content: center; font: 600 12px/1 var(--pp-font-body); }
.pp-hc-acc-q .pp-hc-chev, .pp-hc-acc-q .pp-hc-arrow { width: 16px; height: 16px; flex: none; margin-left: auto; color: var(--pp-secondary-text); transition: transform .18s; }
.pp-hc-acc-q[aria-expanded="true"] .pp-hc-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .pp-hc-acc-q .pp-hc-chev { transition: none; } }
/* UI.1 directional (Human Lock §7): a row that links to its article carries a
   forward arrow, which travels 2px with the row on the shared 120ms
   (design-system.css .pp-i--fwd); the chevron of an in-place answer is a
   state caret and only rotates. */
.pp-hc-acc-q .pp-hc-arrow { transition: transform var(--pp-motion-micro) var(--pp-ease-out); }
.pp-hc-acc-a { padding: 0 2px 18px; font: 400 14px/1.62 var(--pp-font-body); color: #333; max-width: 640px; }
.pp-hc-acc-a p { margin: 0 0 10px; }
.pp-hc-acc-a ol { margin: 10px 0; padding-left: 20px; }
.pp-hc-acc-a ol li { margin: 6px 0; padding-left: 4px; }
.pp-hc-acc-a table { border-collapse: collapse; margin: 12px 0; width: 100%; font-size: 13.5px; }
.pp-hc-acc-a th { text-align: left; font: 600 12px/1 var(--pp-font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--pp-secondary-text); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--pp-border); }
.pp-hc-acc-a td { padding: 9px 12px 9px 0; border-bottom: 1px solid #EEEFED; }

.pp-hc-note { border-radius: 10px; padding: 12px 14px; margin: 12px 0; font-size: 13.5px; line-height: 1.55; }
.pp-hc-note--warn { background: #FDF8EA; border: 1px solid #F0E2B8; color: #8A6D1F; }
.pp-hc-note--info { background: rgba(20, 47, 81, .06); border: 1px solid rgba(20, 47, 81, .14); color: var(--pp-navy); }
.pp-hc-rel { margin-top: 12px; }
.pp-hc-rel-label { font: 700 11px/1 var(--pp-font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--pp-secondary-text); margin-bottom: 8px; display: block; }
.pp-hc-rel a { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1.3 var(--pp-font-body); color: var(--pp-navy); border: 1px solid var(--pp-border); border-radius: 999px; padding: 7px 13px; margin: 0 6px 6px 0; text-decoration: none; }
.pp-hc-rel a:hover { border-color: var(--pp-navy); }

/* ---------- C2+ topic cards / mobile compact rows ---------- */
.pp-hc-cats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1179px) { .pp-hc-cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pp-hc-cat { position: relative; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--pp-border); border-radius: 14px; padding: 19px 20px 16px; text-align: left; min-width: 0; transition: border-color .15s, box-shadow .15s; }
/* UI.1 (Human Lock §9): a topic card holds several independent links (title,
   questions, View all), so it no longer answers HOVER — or a mouse click — as
   one card; that implied a single destination. Each link carries its own
   hover below. The card highlight is kept for KEYBOARD focus only (a focus
   style), with the old focus-within as the fallback where :has() is
   unsupported. */
.pp-hc-cat:has(:focus-visible) { border-color: var(--pp-navy); box-shadow: 0 10px 26px rgba(20, 47, 81, .09); }
@supports not selector(:has(*)) {
	.pp-hc-cat:focus-within { border-color: var(--pp-navy); box-shadow: 0 10px 26px rgba(20, 47, 81, .09); }
}
.pp-hc-cat-title { font: 600 16.5px/1.25 var(--pp-font-body); color: var(--pp-ink); display: flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; }
.pp-hc-cat-title:hover { color: var(--pp-navy); }
.pp-hc-cat-desc { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font: 400 12.5px/1.5 var(--pp-font-body); color: var(--pp-secondary-text); }
.pp-hc-cat-count { position: absolute; top: 21px; right: 18px; font: 600 11px/1 var(--pp-font-body); color: #9AA0A3; }
.pp-hc-cat-qs { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid #EEEFED; padding-top: 10px; margin-top: 2px; }
.pp-hc-cat-qs a { font: 500 13px/1.4 var(--pp-font-body); color: var(--pp-navy); text-decoration: none; padding: 5px 0; display: flex; gap: 7px; align-items: baseline; }
.pp-hc-cat-qs a:hover { text-decoration: underline; }
.pp-hc-cat-qs a::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--pp-border); flex: none; transform: translateY(-2px); }
.pp-hc-cat-viewall { font: 600 13px/1 var(--pp-font-body); color: var(--pp-navy); margin-top: auto; padding-top: 4px; text-decoration: none; }
.pp-hc-cat-viewall:hover { text-decoration: underline; }
/* UI.1 directional (Human Lock §7): the "View all →" arrow (the same text
   glyph, now in its own inline box) travels 2px with its link. */
.pp-hc-cat-viewall-arrow { display: inline-block; transition: transform var(--pp-motion-micro) var(--pp-ease-out); }
@media (hover: hover) { .pp-hc-cat-viewall:hover .pp-hc-cat-viewall-arrow { transform: translateX(var(--pp-dir-travel)); } }
.pp-hc-cat-chev { display: none; }
@media (max-width: 767px) {
	.pp-hc-cats-grid { grid-template-columns: 1fr; gap: 8px; }
	.pp-hc-cat { flex-direction: row; align-items: center; gap: 12px; padding: 13px 14px 13px 12px; }
	.pp-hc-cat-desc, .pp-hc-cat-qs, .pp-hc-cat-viewall { display: none; }
	.pp-hc-cat .pp-hc-ic { width: 38px; height: 38px; border-radius: 11px; }
	.pp-hc-cat .pp-hc-ic svg { width: 20px; height: 20px; }
	.pp-hc-cat-title { font-size: 14.5px; flex: 1 1 auto; }
	.pp-hc-cat-count { position: static; margin-left: auto; flex: none; order: 3; }
	.pp-hc-cat-chev { display: block; width: 17px; height: 17px; flex: none; color: var(--pp-secondary-text); order: 4; }
	/* the title link is the row's single target */
	.pp-hc-cat-title::after { content: ""; position: absolute; inset: 0; }
}

/* ---------- guides (asset-independent) ---------- */
.pp-hc-guides-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 819px) { .pp-hc-guides-grid { grid-template-columns: 1fr; } }
.pp-hc-guide { display: flex; align-items: center; gap: 14px; border: 1px solid var(--pp-border); border-radius: 14px; background: #fff; padding: 18px; text-decoration: none; transition: border-color .15s, transform var(--pp-motion-component) var(--pp-ease-out); }
.pp-hc-guide:hover { border-color: var(--pp-navy); }
.pp-hc-guide-body { min-width: 0; }
.pp-hc-guide-body b { font: 600 15.5px/1.3 var(--pp-font-body); color: var(--pp-ink); display: block; }
.pp-hc-guide-body span { font: 400 12.5px/1.5 var(--pp-font-body); color: var(--pp-secondary-text); }
.pp-hc-guide .pp-hc-arrow { width: 17px; height: 17px; flex: none; margin-left: auto; color: var(--pp-navy); opacity: .6; transition: opacity .15s, transform var(--pp-motion-micro) var(--pp-ease-out); }
.pp-hc-guide:hover .pp-hc-arrow { opacity: 1; }
/* UI.1 C2 (Human Lock §9): a guide card has ONE destination, so on hover-capable
   input the whole card lifts ~1px on its existing Navy keyline (200ms, no
   shadow); its forward arrow travels 2px with it (§7, design-system.css). */
@media (hover: hover) { .pp-hc-guide:hover { transform: translateY(calc(var(--pp-card-rise) * -1)); } }

/* ---------- Still Need Help (Navy, real routes only) ---------- */
.pp-hc-contact { margin-top: 46px; background: var(--pp-navy); }
.pp-hc-contact-inner { padding: 46px 0 42px; }
.pp-hc-contact-title { font: 600 28px/1.15 var(--pp-font-display); color: #fff; }
.pp-hc-contact-sub { font: 400 14.5px/1.55 var(--pp-font-body); color: rgba(255, 255, 255, .75); max-width: 520px; margin-top: 8px; }
.pp-hc-contact-routes { display: grid; grid-template-columns: minmax(0, 420px); gap: 12px; margin-top: 26px; }
.pp-hc-croute { display: block; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: 18px; text-decoration: none; transition: border-color .15s, background-color .15s, transform var(--pp-motion-component) var(--pp-ease-out); }
.pp-hc-croute:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08); }
@media (hover: hover) { .pp-hc-croute:hover { transform: translateY(calc(var(--pp-card-rise) * -1)); } } /* UI.1 C2: one destination — ~1px lift on its existing keyline response */
.pp-hc-croute b { display: flex; align-items: center; gap: 9px; font: 600 14.5px/1.3 var(--pp-font-body); color: #fff; }
.pp-hc-croute b svg { width: 17px; height: 17px; flex: none; color: rgba(255, 255, 255, .85); }
.pp-hc-croute p { font: 400 12.5px/1.5 var(--pp-font-body); color: rgba(255, 255, 255, .65); margin-top: 8px; }
.pp-hc-croute-meta { display: inline-block; margin-top: 12px; font: 600 12px/1 var(--pp-font-body); color: var(--pp-lime); }
.pp-hc-order-reminder { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; font: 400 13px/1.5 var(--pp-font-body); color: rgba(255, 255, 255, .62); }

/* ---------- breadcrumb + hub ---------- */
.pp-hc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 12.5px/1.3 var(--pp-font-body); color: var(--pp-secondary-text); padding: 22px 0 0; }
.pp-hc-crumbs a { color: var(--pp-secondary-text); text-decoration: none; }
.pp-hc-crumbs a:hover { color: var(--pp-navy); text-decoration: underline; }
.pp-hc-crumbs svg { width: 12px; height: 12px; color: var(--pp-border); transform: rotate(-90deg); }
.pp-hc-hub-head { padding: 26px 0 4px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px; align-items: end; }
@media (max-width: 1023px) { .pp-hc-hub-head { grid-template-columns: 1fr; } }
.pp-hc-hub-title { font: 600 36px/1.08 var(--pp-font-display); letter-spacing: -.012em; margin-top: 12px; }
.pp-hc-hub-desc { font: 400 14.5px/1.55 var(--pp-font-body); color: var(--pp-secondary-text); margin-top: 10px; max-width: 560px; }
.pp-hc-hub-search .pp-hc-search { margin-top: 0; }
.pp-hc-hub-search .pp-hc-search-box { height: 50px; box-shadow: none; }
.pp-hc-subtopics { display: flex; flex-wrap: wrap; gap: 8px; padding: 26px 0 0; }
.pp-hc-subtopic { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--pp-border); border-radius: 999px; background: #fff; padding: 10px 16px; font: 500 13.5px/1.3 var(--pp-font-body); color: var(--pp-ink); text-decoration: none; }
.pp-hc-subtopic:hover { border-color: var(--pp-navy); }
.pp-hc-subtopic .ct { font: 600 11.5px/1 var(--pp-font-body); color: var(--pp-secondary-text); }

.pp-hc-feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1023px) { .pp-hc-feat-grid { grid-template-columns: 1fr; } }
.pp-hc-feat { background: #fff; border: 1px solid var(--pp-border); border-radius: 14px; padding: 20px; text-align: left; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform var(--pp-motion-component) var(--pp-ease-out); }
.pp-hc-feat:hover { border-color: var(--pp-navy); box-shadow: 0 10px 26px rgba(20, 47, 81, .09); }
.pp-hc-feat b { font: 600 15.5px/1.35 var(--pp-font-body); color: var(--pp-ink); display: block; }
.pp-hc-feat p { font: 400 13px/1.55 var(--pp-font-body); color: var(--pp-secondary-text); margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pp-hc-feat .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font: 600 13px/1 var(--pp-font-body); color: var(--pp-navy); }
.pp-hc-feat .more svg { width: 14px; height: 14px; }
/* UI.1 C2 (Human Lock §9): one destination — ~1px lift on the existing
   keyline response; "Read answer →" travels 2px with it (§7). */
@media (hover: hover) { .pp-hc-feat:hover { transform: translateY(calc(var(--pp-card-rise) * -1)); } }

.pp-hc-artgroup { margin-bottom: 26px; max-width: 860px; }
.pp-hc-artgroup h3 { font: 700 11.5px/1 var(--pp-font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--pp-secondary-text); padding-bottom: 10px; border-bottom: 1px solid #E8EAE8; margin: 0 0 4px; }
.pp-hc-artgroup .pp-hc-acc { border-bottom: 1px solid #F1F2F0; }
/* deep-link target: give the jumped-to item breathing room under the header */
.pp-hc-acc { scroll-margin-top: 90px; }
.pp-hc-artgroup[id] { scroll-margin-top: 90px; }
#pp-hc-most-asked { scroll-margin-top: 90px; } /* INT.1 footer FAQ anchor */

/* ---------- article ---------- */
.pp-hc-article { max-width: 760px; margin-left: auto; margin-right: auto; padding-bottom: 20px; }
.pp-hc-crumbs--article { max-width: 760px; margin-left: auto; margin-right: auto; }
.pp-hc-art-title { font: 600 clamp(28px, 3.4vw, 38px)/1.12 var(--pp-font-display); letter-spacing: -.012em; margin-top: 14px; }
.pp-hc-short { background: rgba(20, 47, 81, .06); border: 1px solid rgba(20, 47, 81, .12); border-radius: 14px; padding: 20px 22px; margin: 26px 0; }
.pp-hc-short .lbl { display: block; font: 700 11px/1 var(--pp-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--pp-navy); margin-bottom: 9px; }
.pp-hc-short p { font: 400 15.5px/1.6 var(--pp-font-body); color: var(--pp-ink); }
.pp-hc-art-body { font: 400 15px/1.66 var(--pp-font-body); color: #2a2a2a; }
.pp-hc-art-body h2 { font: 600 21px/1.25 var(--pp-font-display); color: var(--pp-ink); margin: 30px 0 10px; }
.pp-hc-art-body ul { list-style: none; padding: 0; margin: 0 0 14px; }
.pp-hc-art-body ul li { padding: 7px 0 7px 22px; position: relative; }
.pp-hc-art-body ul li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--pp-navy); opacity: .35; }
.pp-hc-decision { border: 1px solid var(--pp-border); border-radius: 14px; overflow: hidden; margin: 22px 0; }
.pp-hc-decision-q { background: var(--pp-soft-surface); padding: 14px 18px; font: 600 14px/1.4 var(--pp-font-body); }
.pp-hc-decision-row { display: grid; grid-template-columns: 84px 1fr; border-top: 1px solid #EEEFED; }
.pp-hc-decision-row b { padding: 13px 0 13px 18px; font: 700 12px/1.4 var(--pp-font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--pp-navy); }
.pp-hc-decision-row div { padding: 13px 18px 13px 0; font: 400 13.5px/1.55 var(--pp-font-body); color: #333; }

/* article/hub contact spacing */
#pp-help-hub .pp-hc-contact, #pp-help-article .pp-hc-contact { margin-top: 40px; }

/* HD.1 final correction — on the Help Centre landing the transition area above the hero (the fixed header's spacer,
   behind the header at rest; >= 768 only) carries the hero's own Navy, so a fast scroll-up that runs ahead of the
   header's scroll-linked height (a frame or two) never shows a white band between the header and the hero. A
   zero-blur outer shadow paints only outside the hero's box. */
@media screen and (min-width: 768px) {
	#pp-main > .pp-hc:first-child > .pp-hc-hero:first-child { box-shadow: 0 calc(-1 * var(--pp-header-full-h, 150px)) 0 0 var(--pp-navy); }
}