/* Help page. Who reads it: someone stuck. Its one job: fix the problem or reach us. Next step: write to us. */
.hp-jump{display:grid;margin-block-start:var(--s6);border-top:1px solid var(--line-2)}
.hp-jump a{display:flex;align-items:center;gap:var(--s3);min-height:64px;padding-block:var(--s3);border-bottom:1px solid var(--line-2);color:var(--navy);text-decoration:none}
.hp-jump a:hover b{text-decoration:underline;text-underline-offset:.25em}
.hp-jump a:active{background:var(--pale-2)}
.hp-jump .i{color:var(--navy)}
.hp-jump b{display:block;color:var(--ink);font-weight:700;line-height:1.35}
.hp-jump small{display:block;color:var(--muted);font-size:var(--t-s);line-height:1.4}
html[dir=rtl] .hp-mail{text-align:right}
@media (min-width:760px){.hp-jump{grid-template-columns:1fr 1fr;column-gap:var(--s6)}}

/* section heads stay below the page's h1 at every width */
.hp-h{font-size:clamp(26px,3.2vw,40px)}

/* heading beside its content */
.hp-side{display:grid;gap:var(--s5)}
.hp-side>*{min-width:0}
.hp-side__h .p3-link{margin-block-start:var(--s2)}
@media (min-width:960px){
  .hp-side{grid-template-columns:4fr 8fr;gap:var(--s8);align-items:start}
  .hp-side__h{position:sticky;top:calc(var(--hdr) + var(--s5))}
}

.hp-sec .p3-acc__a ul{list-style:disc;padding-inline-start:1.2em}
.hp-sec .p3-acc__a li+li{margin-block-start:var(--s2)}
.hp-sec .p3-acc__a li::marker{color:var(--muted)}

/* add to home screen: two devices, numbered steps; the visitor's own phone comes first (help.js) */
.hp-devices{display:grid;gap:var(--s7)}
.hp-dev{min-width:0}
.hp-dev .p3-small{margin-block-start:var(--s4)}
.hp-first{order:-1}
.hp-steps{counter-reset:s;margin-block-start:var(--s4)}
.hp-steps li{position:relative;counter-increment:s;padding-inline-start:48px;padding-block:var(--s3);border-top:1px solid var(--line-2)}
.hp-steps li::before{content:counter(s);position:absolute;inset-inline-start:0;top:var(--s3);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--navy);color:var(--white);font-size:var(--t-15);font-weight:700;font-variant-numeric:tabular-nums}
.hp-glyph{display:inline-block;width:22px;height:22px;margin-inline-start:var(--s2);color:var(--navy);vertical-align:-5px}
.hp-after{display:grid;gap:var(--s3);max-width:44rem;margin-block-start:var(--s7);padding-block-start:var(--s5);border-top:1px solid var(--line-2)}
.hp-after b{color:var(--ink);font-weight:700}
@media (min-width:760px){.hp-devices{grid-template-columns:1fr 1fr;gap:var(--s7)}}
@media (min-width:1100px){.hp-devices{gap:var(--s8)}}

/* first steps: plain columns of text, not cards */
.hp-more{margin-block-start:var(--s2)}
.hp-guides{counter-reset:g;display:grid;gap:var(--s6)}
.hp-g{min-width:0;padding-block-start:var(--s4);border-top:1px solid var(--line)}
.hp-sub{margin-block-start:var(--s2);padding-inline-start:1.3em;list-style:decimal}
.hp-sub li{padding-block:var(--s1);font-size:var(--t-16)}
.hp-sub li::marker{color:var(--muted);font-variant-numeric:tabular-nums}
@media (min-width:760px){.hp-guides{grid-template-columns:1fr 1fr;column-gap:var(--s7)}}
@media (min-width:1280px){.hp-guides{grid-template-columns:repeat(3,1fr)}}

/* write to us: the page's next step */
.hp-contact a{color:var(--white)}
.hp-contact .hp-side__h p{margin-block-start:var(--s3)}
.mailbox{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);padding-block-end:var(--s5);margin-block-end:var(--s5);border-bottom:1px solid var(--line-navy)}
.mailbox .addr{min-width:0;font-family:var(--disp);font-size:clamp(24px,3.4vw,40px);font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.mailbox .addr a{display:inline-flex;align-items:center;min-height:44px;text-decoration-color:var(--line-navy)}
.mailbox .addr a:hover{text-decoration-color:currentColor}
.hp-contact .p3-ticks{margin-block-start:var(--s3)}
.hp-warn{display:flex;gap:var(--s3);align-items:flex-start;margin-block-start:var(--s5);color:var(--on-navy)}
.hp-warn .i{width:22px;height:22px;margin-block-start:.2em}
.hp-contact .p3-small{margin-block-start:var(--s4)}