/* VanBelkum Help — portal chrome shared by the index and the product hubs.
   Same tokens as the guides so moving between them feels like one site. */
:root{
  --ink-900:#0A0C10; --ink-850:#0E1117; --ink-800:#141821; --ink-700:#1C212C;
  --fg:#E8EBF2; --fg-dim:#98A0B0; --fg-faint:#6B7385;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18);
  --accent:#1F8FE5; --accent-2:#3D7BE8;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--ink-900); color:var(--fg); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:var(--accent); }
em{ font-style:normal; background:linear-gradient(92deg,var(--accent),#5AB0FF); -webkit-background-clip:text; background-clip:text; color:transparent; }

.nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px clamp(20px,4vw,44px); background:rgba(10,12,16,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav__mark{ display:flex; align-items:center; gap:10px; min-width:0; }
.nav__brand{ color:var(--fg); text-decoration:none; font-weight:700; font-size:15px; letter-spacing:-.02em; white-space:nowrap; }
.nav__brand em{ margin-left:3px; font-weight:700; }
.nav__sep{ width:1px; height:16px; background:var(--line-2); flex:0 0 auto; }
.nav__label{ color:var(--fg-dim); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav__label a{ color:var(--fg-dim); text-decoration:none; }
.nav__label a:hover{ color:var(--fg); }
.nav__support{ font-size:13px; color:var(--fg-dim); text-decoration:none; white-space:nowrap; }
.nav__support:hover{ color:var(--fg); }

.wrap{ width:min(920px,calc(100% - 40px)); margin-inline:auto; padding:72px 0 80px; }
.kicker{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint); margin:0 0 18px; }
h1{ font-size:clamp(2.2rem,6vw,3.6rem); line-height:1.05; letter-spacing:-.04em; margin:0 0 14px; font-weight:650; }
.sub{ color:var(--fg-dim); max-width:58ch; margin:0 0 44px; }
h2{ font-size:1.05rem; letter-spacing:.02em; font-weight:600; color:var(--fg-dim); margin:44px 0 14px; }

.list{ display:grid; gap:16px; }
.card{ display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; background:var(--ink-800); border:1px solid var(--line); border-radius:18px; padding:24px 26px; text-decoration:none; color:inherit; transition:border-color .25s var(--ease), transform .25s var(--ease); }
.card:hover,.card:focus-visible{ border-color:var(--line-2); transform:translateY(-2px); }
.card b{ display:block; font-size:1.15rem; letter-spacing:-.02em; margin-bottom:4px; }
.card p{ margin:0; color:var(--fg-dim); font-size:15px; }
.card .tag{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.card .arrow{ color:var(--fg-faint); font-size:1.4rem; }
.card--soon{ background:transparent; border-style:dashed; }
.card--soon .tag{ color:var(--fg-faint); }
.card--soon:hover{ transform:none; }
.count{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-faint); white-space:nowrap; }

.help{ margin-top:44px; padding:22px 24px; border:1px solid var(--line-2); border-radius:16px; background:rgba(255,255,255,.02); }
.help b{ display:block; margin-bottom:6px; }
.help p{ margin:0; color:var(--fg-dim); font-size:15.5px; }

.foot{ margin-top:64px; padding-top:24px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-faint); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.crumbs{ font-size:14px; color:var(--fg-faint); margin:0 0 28px; }
.crumbs a{ color:var(--fg-dim); text-decoration:none; }
.crumbs a:hover{ color:var(--fg); }

@media (max-width:600px){
  .card{ grid-template-columns:1fr; }
  .card .arrow{ display:none; }
  .nav__support{ display:none; }
}

.foot a{ color:inherit; text-decoration:none; }
.foot a:hover{ color:var(--fg); }