/* Help page (study of 5 October 2026). Drawn by help-studies.js in place of what is inside the shop's .help-layout.
   Loaded by the shop and by compare/help-page-live.html.
   In the shop: Topic beside its questions on a laptop, Topic above its questions on a phone. The grey box is not drawn.
   The shop's own type: questions in 600, answers in grey, thin lines, green only for the arrows and links.
   No box at the side, no cards, no labels above headings, no heavy top borders, no left-border decorations. */
.hp button{-webkit-tap-highlight-color:transparent}
.hp-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s var(--ease)}
.hp-a>div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility .26s}
.is-open>.hp-a{grid-template-rows:1fr}
.is-open>.hp-a>div{visibility:visible}
.hp-q{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:20px;width:100%;min-height:64px;padding:16px 0;border:0;background:none;text-align:left;font:600 18px/1.4 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.hp-q i{display:grid;place-items:center;width:28px;height:28px;color:var(--green);transition:transform .26s var(--ease)}
.is-open>.hp-q i{transform:rotate(180deg)}
.hp-item .hp-a p{padding:0 48px 22px 0;font-size:17px;line-height:1.6;color:var(--muted)}
.hp-item{border-bottom:1px solid var(--line)}
.hp-folds{border-top:1px solid var(--line)}
@media(hover:hover){.hp-q:hover span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}}
@media(prefers-reduced-motion:reduce){.hp-a,.hp-a>div,.hp-q i{transition:none}}

/* Topic beside its questions (laptop, in the shop): the home page's two halves, once per topic. */
.hp-pc-beside .hp-group{display:grid;grid-template-columns:.7fr 1fr;gap:80px;align-items:start}
.hp-pc-beside .hp-group+.hp-group{margin-top:44px}
.hp-pc-beside .hp-group h2{font-size:28px;line-height:1.2;padding-top:15px}
/* A narrow window: the name moves above its questions. */
@media(max-width:900px){.hp-pc-beside .hp-group{grid-template-columns:1fr;gap:14px}.hp-pc-beside .hp-group h2{padding-top:0}.hp-pc-beside .hp-group+.hp-group{margin-top:52px}}

/* ---- On a phone (in the shop): Topic above its questions. Designed at 390px, checked at 320px. ---- */
@media(max-width:600px){
 .hp-q{min-height:60px;padding:15px 0;column-gap:12px;font-size:16px}
 .hp-item .hp-a p{padding:0 8px 20px 0;font-size:16px;line-height:1.55}
 /* Topic above its questions: the name is a heading, close to its own list and far from the one before. */
 .hp-above .hp-group h2{font-size:25px;line-height:1.2;margin:0 0 12px}
 .hp-above .hp-group+.hp-group{margin-top:44px}
 .hp-above .hp-folds{border-top-color:var(--line-strong)}
}

/* The support email at the foot of the page (15 October 2026). */
.hp-contact{margin:56px 0 0;font:400 18px/1.5 var(--sans)}.hp-contact a{color:var(--green);font-weight:600;text-underline-offset:4px}
@media(max-width:600px){.hp-contact{margin-top:44px;font-size:16px}}