/* =====================================================================
   Help center — public_html/assets/css/snk-help.css (ported from _mockups/.../help-mock.css)
   Layers a GOLD .snk-stats-help accent on the shared snacknap-ui .snk-stats primitives
   (mirrors snk-research.css's blue recolor), + help-page bits: "why an account" benefit grid,
   jump-nav, accordions, section rhythm, replay/contact footer.
   Chrome (header/footer, fixed-nav clearance via .container-top) is provided by header.php.
   NB: production body is `line-height:26px` (header.php:110-114); the tight root line-height
   below (+ explicit per-rule line-heights) stops that 26px strut bleeding into small text
   (e.g. benefit subtexts — a line-height on the inline <span> alone can't, the block strut wins).
   ===================================================================== */

/* Defeat the 26px body strut for the whole help subtree: descendants inherit a tight,
   font-scaled line-height; specific rules below override where a different value is wanted. */
.snk-help{line-height:1.5}

/* ---- gold hero recolor (clone of .snk-stats-research, gold instead of blue) */
.snk-stats-help .snk-eyebrow{color:var(--rr-gold)}
.snk-stats-help .snk-eyebrow i,.snk-stats-help .snk-eyebrow svg{color:var(--rr-gold)}
.snk-stats-help .snk-stats-h1{background:linear-gradient(90deg,var(--snk-text),var(--rr-gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.snk-stats-help .nav-pills .nav-link.active{
  background:linear-gradient(180deg,var(--rr-star),var(--rr-gold));color:#3a2a05;border-color:transparent}

/* ---- jump-nav (pills that scroll to a section) --------------------- */
.hlp-jump{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .4rem;position:sticky;top:calc(var(--rr-topgap,4.25rem));
  z-index:5;padding:.5rem 0;background:linear-gradient(var(--snk-bg,transparent) 70%,transparent)}
.hlp-jump a{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;font-weight:600;text-decoration:none;
  color:var(--snk-ink-600);border:1px solid var(--snk-border);border-radius:999px;padding:.34rem .72rem;
  background:var(--snk-surface);transition:border-color .15s,color .15s}
.hlp-jump a:hover{border-color:var(--rr-gold);color:var(--snk-text)}
.hlp-jump a i,.hlp-jump a svg{width:.85rem;height:.85rem;color:var(--rr-gold)}

/* ---- "why an account" band ----------------------------------------- */
.hlp-why{border:1px solid var(--snk-border);border-radius:var(--snk-radius);overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--rr-gold) 12%,var(--snk-surface)),var(--snk-surface) 60%);
  padding:1.2rem 1.2rem 1.3rem;margin:.4rem 0 1.4rem}
.hlp-why-top{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.hlp-why-top h2{font-size:1.2rem;font-weight:700;color:var(--snk-text);margin:0}
.hlp-why-badge{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--rr-amber);background:color-mix(in srgb,var(--rr-gold) 20%,var(--snk-surface));
  border:1px solid color-mix(in srgb,var(--rr-gold) 42%,transparent);border-radius:999px;padding:.2rem .62rem}
.hlp-why-sub{margin:.4rem 0 .95rem;color:var(--snk-ink-600);font-size:.92rem;line-height:1.5}
.hlp-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem}
@media(max-width:860px){.hlp-benefits{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.hlp-benefits{grid-template-columns:1fr}}
.hlp-ben{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .75rem;border:1px solid var(--snk-border);
  border-radius:var(--rr-r-md);background:var(--snk-surface)}
.hlp-ben-ic{flex:0 0 auto;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--rr-gold) 15%,var(--snk-surface));color:var(--rr-gold)}
.hlp-ben-ic i,.hlp-ben-ic svg{width:17px;height:17px}
.hlp-ben b{display:block;font-size:.88rem;font-weight:700;color:var(--snk-text);line-height:1.25}
.hlp-ben span{font-size:.79rem;color:var(--snk-ink-600);line-height:1.4}
.hlp-why-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.05rem}
.hlp-why-note{font-size:.82rem;color:var(--snk-ink-600);margin:.7rem 0 0}

/* ---- content sections + accordions --------------------------------- */
.hlp-sec{margin:2rem 0 0;scroll-margin-top:calc(var(--rr-topgap,4.25rem) + 3rem)}
.hlp-sec-h{display:flex;align-items:center;gap:.55rem;font-size:1.22rem;font-weight:700;color:var(--snk-text);margin:0 0 .2rem}
.hlp-sec-h i,.hlp-sec-h svg{width:1.15rem;height:1.15rem;color:var(--rr-gold)}
.hlp-sec-lead{color:var(--snk-ink-600);font-size:.92rem;line-height:1.55;margin:.15rem 0 .9rem;max-width:66ch}

details.hlp-ac{border:1px solid var(--snk-border);border-radius:var(--rr-r-md);background:var(--snk-surface);
  margin:.5rem 0;overflow:hidden}
details.hlp-ac[open]{border-color:color-mix(in srgb,var(--rr-gold) 45%,var(--snk-border))}
.hlp-ac>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;padding:.8rem .9rem;
  font-weight:600;font-size:.95rem;color:var(--snk-text)}
.hlp-ac>summary::-webkit-details-marker{display:none}
.hlp-ac>summary .chev{margin-left:auto;transition:transform .2s;color:var(--snk-ink-600)}
.hlp-ac>summary .chev i,.hlp-ac>summary .chev svg{width:1.05rem;height:1.05rem}
.hlp-ac[open]>summary .chev{transform:rotate(90deg)}
.hlp-ac>summary .lead-ic{color:var(--rr-gold)}
.hlp-ac>summary .lead-ic i,.hlp-ac>summary .lead-ic svg{width:1.05rem;height:1.05rem}
.hlp-ac-body{padding:.1rem .95rem 1.05rem 2.5rem}
.hlp-ac-body p{margin:.5rem 0;font-size:.925rem;line-height:1.62;color:var(--snk-text)}
.hlp-ac-body b{color:var(--snk-text);font-weight:700}
.hlp-ac-body ol,.hlp-ac-body ul{margin:.55rem 0;padding-left:1.15rem}
.hlp-ac-body li{font-size:.925rem;line-height:1.6;color:var(--snk-text);margin:.34rem 0}
.hlp-ac-body li::marker{color:var(--rr-gold);font-weight:700}
/* numbered step lists get a stronger treatment */
.hlp-steps{counter-reset:hs;list-style:none!important;padding-left:0!important;margin:.6rem 0 .2rem!important}
.hlp-steps>li{counter-increment:hs;position:relative;padding:.1rem 0 .1rem 2.1rem;margin:.5rem 0}
.hlp-steps>li::before{content:counter(hs);position:absolute;left:0;top:.02rem;width:1.45rem;height:1.45rem;
  display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--rr-gold) 16%,var(--snk-surface));
  color:var(--rr-amber);font-size:.78rem;font-weight:700;border:1px solid color-mix(in srgb,var(--rr-gold) 40%,transparent)}
.hlp-ac-body a{color:var(--rr-gold);font-weight:600;text-decoration:none}
.hlp-ac-body a:hover{text-decoration:underline}

/* ---- replay / contact footer band ---------------------------------- */
.hlp-foot{margin:2.4rem 0 0;border-top:1px solid var(--snk-border);padding-top:1.4rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.hlp-foot-tx b{display:block;font-size:1rem;color:var(--snk-text);font-weight:700}
.hlp-foot-tx span{font-size:.87rem;color:var(--snk-ink-600)}
.hlp-foot-btns{display:flex;gap:.5rem;flex-wrap:wrap}