/* Yolmira help center — shared by every help page (EN + FR).
   Builds on /style.css (tokens, nav, footer) and /guides/guide.css (.prose, .faq, .gcards, figure.phone). */

.hhead{padding:clamp(24px,5vh,52px) 0 clamp(22px,3vh,34px);max-width:820px;}
.hhead .label{display:block;margin:20px 0 12px;}
.hhead h1{font-family:'Fraunces',serif;font-weight:300;letter-spacing:-.02em;
  font-size:clamp(32px,4.8vw,54px);line-height:1.05;margin:0;text-wrap:balance;}
.hhead .dek{font-size:clamp(17px,1.7vw,19px);color:var(--mute);max-width:58ch;margin:16px 0 0;line-height:1.55;}

/* Numbered steps — a real sequence, so numbers carry meaning */
.prose ol.steps{list-style:none;counter-reset:step;padding:0;margin:0 0 1.4em;}
.prose ol.steps > li{counter-increment:step;position:relative;padding:2px 0;padding-inline-start:46px;margin:0 0 14px;}
.prose ol.steps > li::before{content:counter(step);position:absolute;inset-inline-start:0;top:1px;width:30px;height:30px;border-radius:10px;
  display:grid;place-items:center;background:var(--night);color:var(--on-night);font-size:14.5px;font-weight:700;}
.prose p.tip,.prose p.plan{border-radius:16px;padding:14px 18px;font-size:16.5px;line-height:1.6;}
.prose p.tip{background:var(--panel);border:1px solid var(--line);}
.prose p.plan{background:color-mix(in srgb,var(--s-today) 16%,var(--panel));border:1px solid color-mix(in srgb,var(--s-today) 45%,var(--line));}

/* Section navigation on the right */
.hnav{position:sticky;top:96px;font-size:14.5px;}
.hnav .label{display:block;margin-bottom:12px;}
.hnav ul{list-style:none;margin:0 0 22px;padding:0;border-inline-start:2px solid var(--line);}
.hnav li a{display:block;padding:6px 0;padding-inline-start:14px;margin-inline-start:-2px;border-inline-start:2px solid transparent;color:var(--mute);line-height:1.4;}
.hnav li a:hover{color:var(--ink);border-inline-start-color:var(--accent);}
.hnav li a[aria-current="page"]{color:var(--ink);font-weight:600;border-inline-start-color:var(--accent);}
.hnav .all{font-weight:600;color:var(--accent-ink);}

.contactbox{border:1px dashed var(--line);border-radius:20px;padding:20px 24px;margin:2.2em 0 0;font-size:16.5px;}
.contactbox a{font-weight:600;}

/* Help index */
.hsearch{position:relative;max-width:620px;margin:26px 0 0;}
.hsearch input{width:100%;font:inherit;font-size:17px;padding:15px 18px;padding-inline-start:48px;border-radius:16px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);}
.hsearch input:focus{outline:2px solid var(--accent);outline-offset:2px;}
.hsearch svg{position:absolute;inset-inline-start:17px;top:50%;width:19px;height:19px;transform:translateY(-50%);color:var(--mute);pointer-events:none;}
.hsearch-status{font-size:14.5px;color:var(--mute);margin:12px 0 0;min-height:1.4em;}
.hgroup{margin:clamp(34px,5vh,54px) 0 0;}
.hgroup h2{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(24px,3vw,32px);margin:0 0 18px;letter-spacing:-.015em;}
.hcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.hcard{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 20px;transition:border-color .2s;}
.hcard:hover{border-color:var(--accent);}
.hcard h3{font-size:17px;font-weight:700;margin:0;line-height:1.35;}
.hcard p{margin:0;color:var(--mute);font-size:15px;line-height:1.5;}
.hcard[hidden],.hgroup[hidden]{display:none;}

@media (prefers-reduced-motion:reduce){ .hcard{transition:none;} }
@media(max-width:1060px){ .hnav{position:static;border-top:1px solid var(--line);padding-top:26px;} }

/* Screens of the page, side by side after the intro */
.hshots{display:flex;gap:18px;overflow-x:auto;padding:6px 2px 18px;margin:1.4em 0 1.8em;scroll-snap-type:x mandatory;}
.hshots figure{margin:0;flex:0 0 200px;scroll-snap-align:start;}
.hshots img{width:100%;height:auto;aspect-ratio:540/1173;border-radius:24px;display:block;
  box-shadow:0 22px 50px -26px var(--shot-shadow),0 5px 14px -8px var(--shot-shadow);}
.hshots figcaption{font-size:14px;color:var(--mute);margin-top:10px;line-height:1.45;}
@media(max-width:760px){ .hshots figure{flex-basis:170px;} }