/*
 * headwaystack.com/help - the help centre. Loads after site.css and uses its
 * tokens; everything here is scoped under body.help so nothing leaks into the
 * brand pages. Generated pages come from scripts/help-build.mjs.
 *
 * Three shapes: the hub (search, start-here, category grid), the article
 * (rail / body / on-this-page), and the gated module page (locked titles and
 * an SSO door). One reading measure - 680px - and one type scale.
 */

body.help {
  --help-amber-tint: #fdf9ec;
  --help-amber-line: #f0dfa3;
  --help-amber-deep: #95700f;
  --help-green-tint: #e4f4ec;
  --help-green-deep: #2e8f5c;
  --help-red-tint: #fdeae3;
  --help-red-deep: #c8542f;
  --help-page: #eef0f3;
  --help-radius: 14px;
  --help-radius-lg: 18px;
  --help-shadow: 0 1px 3px rgba(40, 50, 90, 0.05);
  background: #fff;
  font-size: 15px;
  line-height: 1.65;
  color: var(--body);
}
body.help .nav-links a.is-here { color: var(--ink); }

/* ---------- shared bits ---------- */

.help .crumb { font: 600 11.5px var(--mono); letter-spacing: 0.04em; color: var(--muted); }
.help .crumb a { color: var(--muted); }
.help .crumb a:hover { color: var(--ink); }
.help .crumb b { color: var(--ink); font-weight: 600; }

.help .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.help .chip {
  display: inline-block; font: 600 10.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 8px; background: var(--surface-3); color: var(--body); border: 1px solid var(--border);
}
.help .chip-howto { background: var(--accent-tint); color: var(--accent-deep); border-color: transparent; }
.help .chip-concept { background: var(--help-green-tint); color: var(--help-green-deep); border-color: transparent; }
.help .chip-reference { background: var(--surface-3); color: var(--body); }
.help .chip-fix { background: var(--help-red-tint); color: var(--help-red-deep); border-color: transparent; }
.help .chip-who { background: #fff; color: var(--ink); }
.help .chip-min { background: transparent; color: var(--muted); border-color: transparent; padding-left: 2px; }

.help .search {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; color: var(--muted);
}
.help .search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 13.5px var(--ui); color: var(--ink);
}
.help .search input::placeholder { color: var(--muted); }
.help .search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.help .search-big { max-width: 560px; margin: 0 auto; padding: 13px 18px; border-radius: var(--help-radius); box-shadow: var(--help-shadow); }
.help .search-big input { font-size: 15.5px; }

.help .btn-mini {
  display: inline-block; font: 600 12.5px var(--ui); color: var(--ink); background: #fff;
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 11px; margin-left: 6px;
}
.help .btn-mini:hover { border-color: #b9bfca; color: var(--ink); }

.help-contact { background: var(--surface-2); border-top: 1px solid var(--border-soft); }
.help-contact-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 26px; padding-bottom: 26px; font-size: 14px; color: var(--body);
}
.help-contact-inner strong { color: var(--ink); }
.help-contact .btn { padding: 11px 18px; font-size: 13.5px; border-radius: 10px; white-space: nowrap; }

/* ---------- hub ---------- */

.help-hero { background: var(--surface-2); border-bottom: 1px solid var(--border-soft); }
.help-hero-inner { padding-top: 64px; padding-bottom: 44px; text-align: center; }
.help-hero h1 { font: 800 44px/1.05 var(--display); letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.help-hero p { margin: 10px auto 22px; font-size: 16px; color: var(--body); max-width: 46ch; }
.help-popular { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--muted); align-items: center; }
.help-popular a { color: var(--accent-deep); background: var(--accent-tint); padding: 3px 10px; border-radius: 8px; font-weight: 600; }
.help-popular a:hover { background: #e2e5ff; }

.help-results { padding-top: 28px; }
.help-results-title { font: 700 16px var(--ui); color: var(--ink); margin-bottom: 10px; }
.help-results-list { list-style: none; border: 1px solid var(--border); border-radius: var(--help-radius); overflow: hidden; }
.help-results-list li + li { border-top: 1px solid var(--border); }
.help-results-list a { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 12px 16px; color: var(--ink); }
.help-results-list a:hover { background: var(--surface-2); }
.help-results-list .r-title { grid-column: 1; grid-row: 1; font-weight: 700; }
.help-results-list .r-sum { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--body); }
.help-results-list .r-cat { grid-column: 2; grid-row: 1 / span 3; align-self: center; font: 600 10.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.help-main { padding-top: 40px; padding-bottom: 56px; }
.help-start { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; }
.start-card {
  background: var(--dark); color: #fff; border-radius: var(--help-radius-lg); padding: 26px 28px;
  box-shadow: 0 20px 40px -24px rgba(31, 36, 48, 0.5);
}
.start-card .eyebrow { color: var(--amber-soft); }
.start-card h2 { font: 700 22px var(--display); letter-spacing: -0.02em; margin-top: 8px; color: #fff; }
.start-card p { color: var(--dark-muted); font-size: 13.5px; margin: 6px 0 12px; }
.start-card ol { padding-left: 20px; font-size: 14px; }
.start-card li { margin: 4px 0; }
.start-card a { color: #fff; }
.start-card a:hover { color: var(--amber-soft); }
.popular-card { border: 1px solid var(--border); border-radius: var(--help-radius-lg); padding: 22px 24px; background: #fff; }
.popular-card h2 { font: 700 15px var(--ui); color: var(--ink); margin-bottom: 8px; }
.popular-card ol { padding-left: 20px; font-size: 14px; }
.popular-card li { margin: 5px 0; }
.popular-card a { color: var(--accent-deep); }

.help-browse { font: 700 22px var(--display); letter-spacing: -0.02em; color: var(--ink); margin: 40px 0 14px; }
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cat {
  display: block; border: 1px solid var(--border); border-radius: var(--help-radius); padding: 18px 18px 16px;
  background: #fff; color: var(--body); transition: border-color 0.15s ease, transform 0.15s ease;
}
.cat:hover { border-color: #c9cee0; color: var(--body); transform: translateY(-1px); }
.cat-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--accent-tint); color: var(--accent-deep); margin-bottom: 10px; }
.cat h3 { font: 700 15px var(--ui); color: var(--ink); }
.cat-n { display: block; font: 600 10.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.cat ul { list-style: none; margin-top: 10px; font-size: 13px; }
.cat li { margin: 3px 0; color: var(--accent-deep); }
.cat-locked { background: var(--surface-2); border-style: dashed; }
.cat-locked .cat-ic { background: var(--surface-3); color: var(--muted); }
.cat-lock { display: inline-flex; align-items: center; gap: 5px; font: 600 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.cat-locked p { font-size: 13px; margin-top: 10px; color: var(--body); }

/* ---------- category ---------- */

.help-cat { max-width: 760px; padding-top: 48px; padding-bottom: 56px; }
.help-cat h1 { font: 800 36px/1.1 var(--display); letter-spacing: -0.025em; color: var(--ink); margin-top: 12px; }
.help-cat-blurb { font-size: 16px; color: var(--body); margin-top: 8px; }
.cat-list { list-style: none; margin-top: 28px; border-top: 1px solid var(--border); }
.cat-list li { border-bottom: 1px solid var(--border); }
.cat-list a { display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; padding: 14px 4px; color: var(--ink); }
.cat-list a:hover { background: var(--surface-2); }
.cat-list-title { grid-column: 1; grid-row: 1; font-weight: 700; font-size: 15.5px; }
.cat-list-sum { grid-column: 1; grid-row: 2; font-size: 13.5px; color: var(--body); }
.cat-list .chips { grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-content: flex-end; }

/* ---------- article ---------- */

.help-article {
  display: grid; grid-template-columns: 220px minmax(0, 680px) 190px; gap: 0 44px;
  padding-top: 40px; padding-bottom: 64px; align-items: start;
}
.rail { position: sticky; top: 84px; font-size: 13.5px; }
.rail .search { margin-bottom: 18px; }
.rail .eyebrow { display: block; margin: 16px 0 6px; color: var(--muted); }
.rail .eyebrow:nth-of-type(1) { margin-top: 0; }
.rail ul { list-style: none; }
.rail li { padding: 4px 9px; border-radius: 7px; }
.rail li a { color: var(--body); display: block; }
.rail li a:hover { color: var(--ink); }
.rail li.on { background: var(--accent-tint); }
.rail li.on a { color: var(--accent-deep); font-weight: 600; }

.body h1 { font: 800 34px/1.1 var(--display); letter-spacing: -0.025em; color: var(--ink); margin: 12px 0 10px; text-wrap: balance; }
.body .chips { margin-bottom: 18px; }
.summary {
  background: var(--surface-3); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0;
  padding: 12px 16px; font-size: 15.5px; color: var(--ink); margin-bottom: 22px;
}
.summary .eyebrow { display: block; margin-bottom: 4px; color: var(--accent-deep); }
.body h2 { font: 700 20px var(--display); letter-spacing: -0.01em; color: var(--ink); margin: 30px 0 8px; }
.body h3 { font: 700 15.5px var(--ui); color: var(--ink); margin: 20px 0 6px; }
.body p { margin: 0 0 12px; }
.body ul, .body ol { margin: 0 0 14px; padding-left: 24px; }
.body li { margin: 6px 0; }
.body li strong, .body p strong { color: var(--ink); }
.body code { font: 600 12.5px var(--mono); color: var(--accent-deep); background: var(--surface-3); padding: 1px 5px; border-radius: 5px; }
.body pre { margin: 8px 0 14px; padding: 14px 16px; border-radius: 10px; background: var(--dark); color: #e8ebf2; font: 500 12.5px/1.6 var(--mono); overflow-x: auto; }
.body pre code { background: transparent; color: inherit; padding: 0; font: inherit; }
.body .table-wrap { overflow-x: auto; margin: 8px 0 16px; }
.body table { border-collapse: collapse; width: 100%; font-size: 14px; }
.body th, .body td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.body th { font: 600 10.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.body td:first-child { color: var(--ink); font-weight: 600; }
.callout { border-radius: 10px; padding: 12px 15px; margin: 16px 0; font-size: 14px; color: var(--ink); }
.callout-label { display: block; font: 600 10.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; }
.callout-feeds { background: var(--help-amber-tint); border: 1px solid var(--help-amber-line); }
.callout-feeds .callout-label { color: var(--help-amber-deep); }
.callout-note { background: var(--surface-3); border: 1px solid var(--border); }
.callout-note .callout-label { color: var(--muted); }
.related { border-top: 1px solid var(--border); margin-top: 28px; padding-top: 14px; font-size: 14px; }
.related .eyebrow { display: block; margin-bottom: 6px; color: var(--muted); }
.related a { display: block; margin: 4px 0; color: var(--accent-deep); }
.answered { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 22px; padding: 12px 14px; background: var(--surface-3); border-radius: 10px; font-size: 13.5px; color: var(--body); }

.otp { position: sticky; top: 84px; font-size: 13px; }
.otp .eyebrow { display: block; color: var(--muted); margin-bottom: 6px; }
.otp ul { list-style: none; }
.otp li { padding: 3px 0 3px 10px; border-left: 2px solid var(--border); }
.otp li a { color: var(--body); }
.otp li a:hover { color: var(--ink); }
.otp-box { margin-top: 16px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; color: var(--body); }
.otp-box b { display: block; color: var(--ink); margin-bottom: 2px; font-size: 12.5px; }
.otp-box a { color: var(--accent-deep); }

/* ---------- gated module ---------- */

.help-gate { display: grid; grid-template-columns: 1fr 400px; gap: 48px; padding-top: 48px; padding-bottom: 64px; align-items: start; }
.gate-left h1 { font: 800 36px/1.1 var(--display); letter-spacing: -0.025em; color: var(--ink); margin: 12px 0 12px; }
.gate-left p { font-size: 15.5px; max-width: 52ch; margin-bottom: 10px; }
.gate-muted { color: var(--muted); font-size: 14px; }
.gate-list { list-style: none; margin-top: 18px; font-size: 14.5px; max-width: 52ch; }
.gate-list li { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px dashed var(--border); color: var(--muted); }
.gate-list li:last-child { border-bottom: 1px dashed var(--border); }
.gate-right { position: sticky; top: 84px; }
.gate-form { background: #fff; border: 1px solid var(--border); border-radius: var(--help-radius-lg); box-shadow: 0 20px 40px -30px rgba(31, 36, 48, 0.35); padding: 24px 24px 20px; }
.gate-form .eyebrow { display: block; margin-bottom: 6px; }
.gate-form h2 { font: 700 19px var(--display); letter-spacing: -0.01em; color: var(--ink); }
.gate-form p { font-size: 13.5px; margin: 6px 0 16px; }
.gate-form label { display: block; font: 600 12px var(--ui); color: var(--ink); margin-bottom: 6px; }
.gate-form input {
  width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; font: 500 14px var(--ui); color: var(--ink);
  background: #fff; margin-bottom: 12px; outline: 0;
}
.gate-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.gate-form .btn { width: 100%; justify-content: center; padding: 12px; font-size: 14px; border: 0; cursor: pointer; }
.gate-fine { font-size: 12px; color: var(--muted); text-align: center; margin: 12px 0 0; }
.gate-resp { margin-top: 14px; background: var(--help-amber-tint); border: 1px solid var(--help-amber-line); border-radius: 10px; padding: 11px 13px; font-size: 13px; color: var(--ink); }
.gate-resp b { display: block; margin-bottom: 3px; }
.gate-resp a { color: var(--accent-deep); }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .help-article { grid-template-columns: 200px minmax(0, 1fr); }
  .otp { display: none; }
}
@media (max-width: 920px) {
  .help-hero h1 { font-size: 34px; }
  .help-start { grid-template-columns: 1fr; }
  .cats { grid-template-columns: 1fr 1fr; }
  .help-article { grid-template-columns: 1fr; gap: 0; padding-top: 28px; }
  .rail { position: static; order: 2; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--border); }
  .body { order: 1; }
  .body h1 { font-size: 28px; }
  .help-gate { grid-template-columns: 1fr; gap: 28px; }
  .gate-right { position: static; }
  .cat-list a { grid-template-columns: 1fr; }
  .cat-list .chips { grid-column: 1; grid-row: 3; justify-content: flex-start; margin-top: 4px; }
}
@media (max-width: 600px) {
  .cats { grid-template-columns: 1fr; }
  .help-hero-inner { padding-top: 44px; padding-bottom: 32px; }
  .help-cat h1, .gate-left h1 { font-size: 30px; }
}