/* Help Centre, guides and changelog. Builds on styles.css tokens. */
.nav-links a[aria-current="page"] { color: var(--navy); font-weight: var(--fw-semibold); }

/* Hero */
.help-hero { background: url(/images/hero-bg.svg) center/cover no-repeat var(--tint-2); padding: 72px 0 64px; border-bottom: 1px solid var(--line); }
.help-hero .eyebrow { margin-bottom: 16px; }
.help-hero h1 { font-size: var(--fs-h1); }
.help-hero .lede { margin: 20px 0 32px; max-width: 520px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-xs); margin-bottom: 28px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--navy); }
.crumbs span[aria-current] { color: var(--navy); }

/* Search */
.search { position: relative; max-width: 640px; }
.search svg { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.search input { width: 100%; height: 60px; padding: 0 20px 0 52px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); font: var(--fw-regular) var(--fs-body) var(--body); color: var(--navy); box-shadow: var(--shadow-sm); }
.search input:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus-ring); }
.search-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px); list-style: none; margin: 0; padding: 6px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-md); max-height: 420px; overflow: auto; }
.search-results a { display: block; padding: 12px 14px; border-radius: var(--r-sm); text-decoration: none; }
.search-results a:hover, .search-results a.active { background: var(--tint); }
.search-results strong { display: block; color: var(--navy); font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); }
.search-results span { display: block; font-size: var(--fs-xs); color: var(--muted); }
.search-results mark { background: var(--highlight); color: inherit; border-radius: 2px; }
.search-results .empty { padding: 14px; font-size: var(--fs-small); color: var(--muted); }
.help-hero .fine { margin-top: 16px; }

/* Start here */
.section.start { padding-top: 88px; }
.start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.start-card { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; transition: border-color .2s, transform .2s; }
.start-card:hover { border-color: var(--navy); transform: translateY(-2px); }
.start-card p { flex: 1; font-size: var(--fs-body-sm); }
.start-num { font-family: var(--head); font-weight: var(--fw-semibold); color: var(--orange); font-size: var(--fs-lead); }
.start-card .link { font-size: var(--fs-small); }

/* Topics */
.section.topics { padding-top: 96px; }
.topic-grid { columns: 3 320px; column-gap: 24px; }
.topic { break-inside: avoid; margin: 0 0 24px; padding: 26px 26px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); scroll-margin-top: 100px; }
.topic h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.topic h3 span { font: var(--fw-medium) var(--fs-caption) var(--body); color: var(--muted); background: var(--tint); border-radius: var(--r-pill); padding: 3px 10px; letter-spacing: 0; }
.topic ul { list-style: none; padding: 0; margin: 0; }
.topic li { border-top: 1px solid var(--line); }
.topic a { display: block; padding: 11px 0; font-size: var(--fs-body-sm); color: var(--navy); text-decoration: none; }
.topic a:hover { color: var(--blue); }

/* Support band */
.help-cta { margin-top: 120px; background: url(/images/band-bg.svg) center/cover no-repeat var(--navy); }
.help-cta-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; padding-top: 64px; padding-bottom: 64px; }
.help-cta h2 { color: var(--white); font-size: var(--fs-h3); }
.help-cta p { color: var(--on-dark); margin-top: 12px; max-width: 520px; }

/* Guide layout */
.guide-wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; padding-top: 48px; align-items: start; }
.guide-side { position: sticky; top: 108px; max-height: calc(100vh - 128px); overflow: auto; padding-right: 8px; }
.side-list details { border-bottom: 1px solid var(--line); }
.side-list summary { cursor: pointer; list-style: none; padding: 12px 24px 12px 0; position: relative; font-weight: var(--fw-semibold); font-size: var(--fs-small); color: var(--navy); }
.side-list summary::-webkit-details-marker { display: none; }
.side-list summary::after { content: "+"; position: absolute; right: 4px; top: 9px; font-size: var(--fs-lead); font-weight: var(--fw-regular); color: var(--muted); }
.side-list details[open] summary::after { content: "–"; }
.side-list ul { list-style: none; padding: 0 0 10px; margin: 0; }
.side-list li a { display: block; padding: 6px 10px; border-radius: var(--r-xs); font-size: var(--fs-xs); line-height: 1.4; color: var(--muted); text-decoration: none; }
.side-list li a:hover { color: var(--navy); background: var(--tint); }
.side-list li a[aria-current="page"] { color: var(--navy); background: var(--tint); font-weight: var(--fw-semibold); box-shadow: inset 3px 0 0 var(--orange); }
.side-mobile { display: none; }

.guide { max-width: 760px; min-width: 0; }
.guide .eyebrow { margin-bottom: 14px; }
.guide h1 { font-size: var(--fs-h1); }
.guide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 20px 0 36px; font-size: var(--fs-xs); }
.pill { background: var(--tint); border: 1px solid var(--line); color: var(--navy); border-radius: var(--r-pill); padding: 5px 12px; font-weight: var(--fw-medium); }

/* Prose */
.prose { color: var(--text); font-size: var(--fs-body); line-height: var(--lh-prose); }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-size: var(--fs-h4); margin-top: 44px; scroll-margin-top: 100px; }
.prose h3 { font-size: var(--fs-h6); margin-top: 32px; }
.prose a { color: var(--blue); text-underline-offset: 3px; }
.prose a:hover { color: var(--navy); }
.prose strong { color: var(--navy); font-weight: var(--fw-semibold); }
.prose ul, .prose ol { padding-left: 0; list-style: none; }
.prose ul > li { position: relative; padding-left: 22px; margin-top: 10px; }
.prose ul > li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.prose ol { counter-reset: step; }
.prose ol > li { counter-increment: step; position: relative; padding: 14px 16px 14px 60px; margin-top: 10px; background: var(--tint-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.prose ol > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 16px; top: 14px; font-family: var(--head); font-weight: var(--fw-semibold); color: var(--orange); }
.prose h3.step-head { display: flex; align-items: baseline; gap: 16px; margin-top: 32px; padding: 14px 16px; background: var(--tint-2); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--fs-body); }
.prose h3.step-head .step-num { font-family: var(--head); font-weight: var(--fw-semibold); color: var(--orange); }
.prose h2 + h3.step-head { margin-top: 20px; }
.prose code { font-size: .9em; background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-xs); padding: 1px 5px; }
.prose pre { background: var(--navy); color: var(--code-bg); padding: 18px; border-radius: var(--r-md); overflow: auto; }
.prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.prose figure { margin: 28px 0; }
.prose figure img { border-radius: var(--r-md); border: 1px solid var(--line); }
.prose figcaption { font-size: var(--fs-xs); margin-top: 8px; color: var(--muted); }
.prose blockquote { margin: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--orange); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.prose .table-wrap { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--tint); color: var(--navy); font-weight: var(--fw-semibold); }
.prose details.toggle { border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 16px; }
.prose details.toggle summary { cursor: pointer; padding: 14px 0; font-weight: var(--fw-semibold); color: var(--navy); }
.prose .video { position: relative; aspect-ratio: 16 / 9; }
.prose .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--r-md); }
.prose video { width: 100%; border-radius: var(--r-md); }

/* Notes: Where / Expected result / Tips and limits / Effect */
.note { border-radius: var(--r-md); padding: 18px 20px; border: 1px solid var(--line); background: var(--tint); }
.note p + p { margin-top: 6px; }
.note-label { font: var(--fw-semibold) var(--fs-eyebrow) var(--body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--navy); }
.note-where { background: var(--white); border-left: 4px solid var(--blue); }
.note-expected { background: var(--success-bg); border-color: var(--success-line); }
.note-expected .note-label { color: var(--success); }
.note-tips { background: var(--warning-bg); border-color: var(--warning-line); }
.note-tips .note-label { color: var(--warning); }
.note-effect { background: var(--info-bg); border-color: var(--info-line); }
.note-effect .note-label { color: var(--blue); }
.note-callout { display: flex; gap: 12px; }
.note-icon { font-size: var(--fs-h6); line-height: 1.4; }

/* Pager + related */
.guide-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
.pager { display: block; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: var(--navy); font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); transition: border-color .2s; }
.pager:hover { border-color: var(--navy); }
.pager span { display: block; font: var(--fw-medium) var(--fs-eyebrow) var(--body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.pager.next { text-align: right; }
.related { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.related h2 { font-size: var(--fs-h4); margin-bottom: 20px; }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.related li { padding: 18px 20px; background: var(--tint); border-radius: var(--r-md); }
.related a { color: var(--navy); font-weight: var(--fw-semibold); text-decoration: none; }
.related a:hover { color: var(--blue); }
.related p { font-size: var(--fs-small); margin-top: 6px; }

/* Changelog */
.current-version { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; padding: 18px 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); }
.current-version strong { font-family: var(--head); font-size: var(--fs-h3); color: var(--navy); letter-spacing: var(--ls-tight); }
.current-version > span:last-child { font-size: var(--fs-small); }
.section.changelog { padding-top: 64px; }
.type-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.tag { display: inline-block; font: var(--fw-semibold) var(--fs-eyebrow) var(--body); letter-spacing: var(--ls-tag); text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-xs); white-space: nowrap; }
.tag-new { background: var(--success-soft); color: var(--success); }
.tag-update { background: var(--info-soft); color: var(--blue-hover); }
.tag-improve { background: var(--accent-soft); color: var(--accent); }
.tag-fix { background: var(--danger-soft); color: var(--danger); }
.tag-current { background: var(--orange); color: var(--navy); }
.releases { list-style: none; padding: 0; margin: 0; }
.release { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; padding: 36px 0; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.release-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; align-content: start; }
.release-head h2 { font-size: var(--fs-h3); letter-spacing: var(--ls-tight); }
.release-head time { width: 100%; font-size: var(--fs-small); }
.release-items { display: grid; gap: 14px; }
.change { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); }
.change h3 { font-size: var(--fs-h6); margin: 12px 0 6px; }
.change p { font-size: var(--fs-body-sm); }

@media (max-width: 1100px) {
  .guide-wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 28px; }
  .guide-side { position: static; max-height: none; overflow: visible; padding: 0; }
  .side-desktop { display: none; }
  .side-mobile { display: block; border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 16px; }
  .side-mobile > summary { cursor: pointer; padding: 14px 0; font-weight: var(--fw-semibold); color: var(--navy); }
  .start-grid { grid-template-columns: minmax(0, 1fr); }
  .release { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .help-hero { padding: 48px 0 40px; }
  .search input { height: 54px; font-size: var(--fs-body); }
  .guide-pager, .related ul { grid-template-columns: minmax(0, 1fr); }
  .pager.next { text-align: left; }
  .prose ol > li { padding: 12px 14px 12px 50px; }
  .prose ol > li::before { left: 14px; top: 12px; }
  .help-cta { margin-top: 88px; }
}

/* Insights */
.section.insights-group { padding-top: 88px; }
.article-head { padding-top: 56px; max-width: 860px; }
.article-head h1 { font-size: var(--fs-h1); margin-top: 14px; }
.article-head .lede { margin: 20px 0 36px; max-width: 640px; }
.article-hero { width: 100%; max-width: 1184px; border-radius: var(--r-lg); border: 1px solid var(--line); }
.article-body { max-width: 760px; margin: 48px auto 0; }

/* Legal */
.legal-wrap { max-width: 860px; padding-top: 48px; }
.legal-wrap .prose h2 { font-size: var(--fs-h5); }
.draft-note { margin-bottom: 32px; }