/* The help center (/help and /help/<slug>, built by help-pages.mjs). Loaded only on those pages. */
.lp-help-hero .lp-findex__head { padding-bottom: clamp(32px, 5vw, 56px); }
/* One column for an article: the question, the steps, what's next. */
.lp-help-hero:not(.lp-help-hero--index) .lp-findex__head, .lp-help-next .lp-fnext__in, .lp-help-ask__in { max-width: 960px; }
.lp-help-hero .lp-fhero__title { font-size: clamp(32px, 4.6vw, 48px); text-wrap: balance; }
.lp-help-crumbs { display: flex; flex-wrap: wrap; gap: var(--pp-space-2); font-size: var(--pp-body-sm-size); color: var(--pp-text-subtle); }
.lp-help-crumbs a { color: var(--pp-text-muted); text-decoration: none; }
.lp-help-crumbs a:hover { color: var(--pp-text); text-decoration: underline; }
.lp-help-meta { display: flex; flex-wrap: wrap; gap: var(--pp-space-2); margin: 0; padding: 0; list-style: none; }
.lp-help-meta li { padding: 4px 12px; border: var(--pp-border-width) solid var(--pp-border); border-radius: var(--pp-radius-full); font-size: var(--pp-body-sm-size); color: var(--pp-text-muted); background: var(--pp-bg-surface); }

/* Search and the jump links on the index */
.lp-help-search { position: relative; max-width: 560px; }
.lp-help-search .pp-icon { position: absolute; left: 16px; top: 50%; translate: 0 -50%; color: var(--pp-text-subtle); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.lp-help-search input { width: 100%; height: 52px; padding: 0 16px 0 48px; font: inherit; font-size: var(--pp-body-lg-size); color: var(--pp-text); background: var(--pp-bg-surface); border: var(--pp-border-width) solid var(--pp-border-control); border-radius: var(--pp-radius-full); }
.lp-help-search input::placeholder { color: var(--pp-text-subtle); }
.lp-help-search input:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; }
.lp-help-jump { display: flex; flex-wrap: wrap; gap: var(--pp-space-2); }
.lp-help-jump a { padding: 6px 14px; border-radius: var(--pp-radius-full); font-size: var(--pp-body-sm-size); color: var(--pp-text-muted); text-decoration: none; background: var(--pp-bg-surface); border: var(--pp-border-width) solid var(--pp-border); }
.lp-help-jump a:hover { color: var(--pp-text); border-color: var(--pp-border-control); }

.lp-help-group { padding: clamp(40px, 6vw, 72px) 0 0; background: var(--pp-bg-canvas); scroll-margin-top: var(--lp-nav-h); }
.lp-help-group:last-of-type { padding-bottom: clamp(40px, 6vw, 72px); }
.lp-help-group__head { display: grid; gap: var(--pp-space-2); margin-bottom: var(--pp-space-5); }
.lp-help-list { display: grid; gap: var(--pp-space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .lp-help-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .lp-help-list { grid-template-columns: 1fr 1fr 1fr; } }
.lp-help-card { display: grid; align-content: start; gap: var(--pp-space-2); height: 100%; padding: var(--pp-space-5); border: var(--pp-border-width) solid var(--pp-border); border-radius: var(--pp-radius-xl); background: var(--pp-bg-surface); text-decoration: none; }
.lp-help-card b { font: var(--pp-weight-bold) var(--pp-h4-size)/var(--pp-h4-line) var(--pp-font-heading); color: var(--pp-text); }
.lp-help-card span { font-size: var(--pp-body-sm-size); line-height: 1.55; color: var(--pp-text-muted); }
.lp-help-card:hover { border-color: var(--pp-border-control); }
.lp-help-card:hover b { text-decoration: underline; text-underline-offset: 3px; }
.lp-help-none { padding: var(--pp-space-10) 0; background: var(--pp-bg-canvas); }
.lp-help-none p { margin: 0; font-size: var(--pp-body-lg-size); color: var(--pp-text-muted); }
.lp-help-none a, .lp-help-ask a, .lp-help-step__copy a { color: var(--pp-link, var(--pp-text-link)); }

/* A step: its number and the one thing to do, then the screen with that thing boxed */
.lp-help-step { padding: clamp(28px, 4vw, 48px) 0 0; background: var(--pp-bg-canvas); scroll-margin-top: var(--lp-nav-h); }
.lp-help-step__in { display: grid; gap: var(--pp-space-4); max-width: 960px; }
.lp-help-step__copy { display: grid; grid-template-columns: 36px 1fr; column-gap: var(--pp-space-3); row-gap: var(--pp-space-1); align-items: start; }
.lp-help-step__n { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: var(--pp-weight-bold) 16px/1 var(--pp-font-heading); color: #fff; background: #e5202a; }
.lp-help-step__copy h2 { margin: 0; padding-top: 4px; font: var(--pp-weight-semibold) var(--pp-h4-size)/1.4 var(--pp-font-heading); color: var(--pp-text); text-wrap: pretty; }
.lp-help-step__copy b { font-weight: var(--pp-weight-bold); }
.lp-help-step__copy p { grid-column: 2; margin: 0; color: var(--pp-text-muted); line-height: 1.6; }
.lp-help-step__shot { margin: 0; }
.lp-help-step__shot--phone .lp-screen--phone { width: min(300px, 100%); margin-inline: 48px auto; }
@media (max-width: 640px) { .lp-help-step__shot--phone .lp-screen--phone { margin-inline: auto; } }
.lp-help-next { margin-top: clamp(40px, 6vw, 72px); }
.lp-help-next__title { grid-column: 1 / -1; margin: 0; font: var(--pp-weight-bold) var(--pp-h3-size)/var(--pp-h3-line) var(--pp-font-heading); color: var(--pp-text); }
.lp-help-ask { padding: var(--pp-space-8) 0 clamp(48px, 7vw, 88px); background: var(--pp-bg-canvas); }
.lp-help-ask__in { display: grid; gap: var(--pp-space-2); }
.lp-help-ask h2 { margin: 0; font: var(--pp-weight-bold) var(--pp-h4-size)/var(--pp-h4-line) var(--pp-font-heading); color: var(--pp-text); }
.lp-help-ask p { margin: 0; color: var(--pp-text-muted); }