/* help-front.css — PUB-07 (Michael 2026-10-20 21:41): the PUBLIC Help Center (help/index.php). The platform marketing pages' own look: the same tokens, the same top nav,
 * the same footer — so Help reads as the same site. Mobile first: a 16 px gutter, 44 px touch targets, no sideways scroll (rp-responsive.css loads after this). */
:root{--brand:#1d4ed8;--brand-dark:#1e40af;--brand-light:#eff6ff;--text:#111827;--muted:#4b5563;--border:#e5e7eb;--bg:#f9fafb;--card:#fff}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:16px;line-height:1.6}
img,svg,video{max-width:100%;height:auto}
a{color:var(--brand)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* top nav — as the platform pages */
.top-nav{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.top-nav__inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:88px}
.top-nav__brand{display:flex;align-items:center;text-decoration:none}
.top-nav__logo{height:42px;width:auto;display:block}
.top-nav__links{display:flex;gap:28px;align-items:center}
.top-nav__links a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500}
.top-nav__links a:hover,.top-nav__links a.active{color:var(--brand)}
.btn-nav{background:var(--brand);color:#fff !important;padding:7px 16px;border-radius:8px;font-size:13px;font-weight:600}
.btn-nav:hover{background:var(--brand-dark) !important}

.page-wrap{max-width:860px;margin:0 auto;padding:0 24px}
.hf-main{padding-top:32px;padding-bottom:48px}

/* hero + search */
.hf-hero{text-align:center;padding:56px 24px 40px;background:linear-gradient(180deg,var(--brand-light) 0%,var(--bg) 100%)}
.hf-hero h1{font-size:38px;font-weight:800;letter-spacing:-.03em;margin-bottom:12px}
.hf-hero p{font-size:18px;color:var(--muted);max-width:560px;margin:0 auto 24px}
.hf-search{display:flex;gap:8px;max-width:560px;margin:0 auto}
.hf-search input{flex:1 1 auto;min-width:0;height:48px;padding:0 16px;border:1px solid #9ca3af;border-radius:10px;font:inherit;font-size:16px;background:#fff;color:var(--text)}
.hf-search input:focus{outline:2px solid var(--brand);outline-offset:1px}
.hf-search button{flex:0 0 auto;height:48px;padding:0 22px;border:0;border-radius:10px;background:var(--brand);color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.hf-search button:hover{background:var(--brand-dark)}

h2{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0 0 8px}
.hf-note{color:var(--muted);font-size:15px;margin:0 0 14px}
section{margin-bottom:36px}

/* sign-in cards */
.hf-signin__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:12px 0}
.hf-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px}
.hf-card--link{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--text);min-height:44px}
.hf-card--link:hover,.hf-card--link:focus-visible{border-color:var(--brand);box-shadow:0 2px 10px rgba(29,78,216,.12)}
.hf-card--link span{color:var(--muted);font-size:14px}
.hf-card--link em{font-style:normal;color:var(--brand);font-weight:700;font-size:14px;margin-top:4px}

/* article lists */
.hf-list{list-style:none;display:grid;gap:10px;margin:8px 0 0}
.hf-list a{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 18px;text-decoration:none;color:var(--text);min-height:44px}
.hf-list a:hover,.hf-list a:focus-visible{border-color:var(--brand)}
/* the shell's own 44-px rule (li > a:only-child → inline-flex, centred) is more specific than a bare class: say it again, as strongly */
html body ul.hf-list > li > a{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;width:100%}
.hf-list strong{color:var(--brand);font-size:16px}
.hf-list span{color:var(--muted);font-size:14px}

/* article */
.hf-crumbs{font-size:14px;color:var(--muted);margin-bottom:16px}
.hf-crumbs a{color:var(--muted)}
.hf-article h1{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:8px}
.hf-lede{font-size:18px;color:var(--muted);margin-bottom:24px}
.hf-body{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:28px}
.hf-body h2{font-size:20px;margin:26px 0 8px}
.hf-body h2:first-child{margin-top:0}
.hf-body p{margin:0 0 12px}
.hf-body ul,.hf-body ol{margin:0 0 14px 22px}
.hf-body li{margin-bottom:6px}
.hf-body code{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:.92em}
.hf-more{margin-top:32px}

/* contact */
.hf-contact{background:var(--brand-light);border:1px solid #bfdbfe;border-radius:10px;padding:22px 24px;margin-top:36px}
.hf-contact__row{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:flex-start}
.hf-contact__num a{font-size:22px;font-weight:800;text-decoration:none;display:inline-block;line-height:44px}
.hf-links{list-style:none;margin:0;padding:0;min-width:0;overflow-wrap:anywhere}
.hf-links li{margin:0}

footer{text-align:center;padding:32px 24px;font-size:13px;color:var(--muted);border-top:1px solid var(--border);background:#fff}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--brand)}
.foot-links{margin-top:6px}

@media(max-width:767.98px){
  .top-nav__inner{height:auto;flex-wrap:wrap;gap:6px 14px;padding:12px 16px}
  .top-nav__links{flex-wrap:wrap;gap:10px 14px;justify-content:center;width:100%}
  .page-wrap{padding:0 16px}
  .hf-hero{padding:36px 16px 28px}
  .hf-hero h1{font-size:clamp(26px,7.5vw,38px)}
  .hf-hero p{font-size:16px}
  .hf-search{flex-direction:column}
  .hf-search button{width:100%}
  .hf-signin__grid{grid-template-columns:1fr}
  .hf-article h1{font-size:clamp(24px,7vw,32px)}
  .hf-body{padding:20px 16px}
  .hf-contact{padding:18px 16px}
  .hf-contact__row{flex-direction:column;gap:8px}
}