/* =====================================================================
   uix-help.css — the Acceasy Player help center (/avp/help/, tools/help/build.py)
   Loaded AFTER css/uix-hub.css and built on its tokens (colours, fonts, nav, eco
   band, footer, buttons, FAQ, breadcrumb). Only help-center components live here;
   page sources carry no inline styles. Markup: tools/help/README.md.
   Contrast notes (on #fff): text #06121f 18.9:1, --text-dim 5.9:1 (5.3:1 on the card
   gradient), blue #034aa6 8.3:1, gold #8f6a12 4.95:1 (used only on white or #fff-ish
   tints for text, never on the card gradient).
   ===================================================================== */

/* ── 0. TOKENS (help only) ───────────────────────────────────────────── */
:root {
  --help-side: 260px;
  --help-text: rgba(6, 18, 31, .78);       /* lead and note text: 9.9:1 on #fff */
  --help-field: rgba(6, 18, 31, .5);       /* input border: 3.6:1 (non-text contrast) */
  --help-tint-blue: rgba(3, 74, 166, .05);
  --help-tint-gold: rgba(143, 106, 18, .06);
  --help-shadow-shot: 0 30px 60px -32px rgba(6, 18, 31, .32), 0 0 48px rgba(3, 74, 166, .07);
  --help-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

.help-main :where(input):focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── 1. HELP HEADER (breadcrumb, updated, H1, lead) ──────────────────── */
.help-hero { position: relative; background: var(--hub-wash); border-bottom: 1px solid var(--hub-hairline); overflow: hidden; }
.help-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 8% 0%, rgba(143, 106, 18, 0.07) 0%, transparent 48%),
              radial-gradient(ellipse at 95% 85%, rgba(3, 74, 166, 0.08) 0%, transparent 55%);
}
.help-hero > .hub-wrap { position: relative; }
.help-head { max-width: 780px; padding: 2.9rem 0 3.1rem; }
.help-head .hub-eyebrow { margin-bottom: 1rem; }
.help-head h1 {
  margin: 0 0 1rem;
  font-family: var(--hub-font-display); font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.1; letter-spacing: -0.02em;
  text-wrap: balance; overflow-wrap: break-word;
}
.help-lead { max-width: 640px; font-size: clamp(1.05rem, 1.5vw, 1.18rem); line-height: 1.65; color: var(--help-text); }

/* ── 2. LAYOUT: sidebar + reading column ─────────────────────────────── */
.help-body { padding: 3.5rem 0 5.5rem; }
.help-grid { display: grid; grid-template-columns: var(--help-side) minmax(0, 1fr); gap: 4rem; align-items: start; }
.help-article { min-width: 0; }
.help-prose { min-width: 0; overflow-wrap: break-word; }

/* ── 3. SIDEBAR ──────────────────────────────────────────────────────── */
.help-side {
  position: sticky; top: var(--hub-header);
  max-height: calc(100vh - var(--hub-header) - 1rem); overflow-y: auto; overscroll-behavior: contain;
  padding: 0.5rem 0.6rem 1.5rem 0.6rem; margin: -0.5rem 0 0 -0.6rem;   /* room for focus rings inside the scroll box */
  scrollbar-width: thin;
}
.help-side-title {
  display: flex; align-items: center; gap: 0.75rem; margin: 2.1rem 0 0.9rem;
  font: 600 0.72rem/1.3 var(--hub-font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}
.help-side-title::before { content: ""; flex: 0 0 24px; height: 1px; background: currentColor; }
.help-side > .help-topics:first-child .help-side-title { margin-top: 0; }
.help-side-toggle { display: none; }
.help-side-toggle[hidden] { display: none !important; }
.help-topics-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hub-hairline); }
.help-topics-list[hidden] { display: none; }
.help-topics-list > li > a {
  display: block; margin-left: -1px; padding: 0.42rem 0 0.42rem 1rem; border-left: 2px solid transparent;
  font-size: 0.9rem; line-height: 1.4; color: var(--text-dim); text-decoration: none; transition: color 0.2s, border-color 0.2s;
}
.help-topics-list > li > a:hover { color: var(--text); }
.help-topics-list > li > a[aria-current="page"] { color: var(--text); font-weight: 600; border-left-color: var(--gold); }
.help-topics-sub { list-style: none; margin: 0.15rem 0 0.7rem; padding: 0 0 0 1rem; }
.help-topics-sub a {
  display: block; padding: 0.3rem 0 0.3rem 0.8rem; border-left: 1px solid var(--hub-hairline);
  font-size: 0.83rem; line-height: 1.4; color: var(--text-dim); text-decoration: none; transition: color 0.2s, border-color 0.2s;
}
.help-topics-sub a:hover { color: var(--text); }
.help-topics-sub a.is-active { color: var(--text); border-left: 2px solid var(--blue); padding-left: calc(0.8rem - 1px); }

/* ── 4. SEARCH (sidebar box and the home's big box) ──────────────────── */
.help-search { margin: 0; }
.help-search-label {
  display: block; margin: 0 0 0.6rem;
  font: 600 0.72rem/1.3 var(--hub-font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}
.help-search-field { position: relative; }
.help-search input {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; margin: 0;
  padding: 0.68rem 3rem 0.68rem 1rem; border: 1px solid var(--help-field); border-radius: 99px; background: #fff;
  font: 400 0.95rem/1.4 var(--hub-font-body); color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.help-search input::placeholder { color: var(--text-dim); opacity: 1; }
.help-search input:hover { border-color: rgba(6, 18, 31, .7); }
.help-search input::-webkit-search-cancel-button { cursor: pointer; }
.help-search-btn {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  border: 0; border-radius: 50%; background: var(--gold); color: #fff; cursor: pointer; transition: background 0.2s;
}
.help-search-btn:hover { background: var(--blue); }
.help-search-btn svg { width: 1.05rem; height: 1.05rem; display: block; }
.help-search-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.help-results-box[hidden] { display: none; }
.help-results-box { margin-top: 0.75rem; }
.help-results { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hub-hairline); }
.help-results > li { border-bottom: 1px solid var(--hub-hairline); }
/* results are a list of standalone links: blue question, dim topic name, underline on hover (also inside .help-task) */
.help-search .help-results a { display: block; padding: 0.6rem 0.15rem; text-decoration: none; color: var(--blue); border-radius: 4px; }
.help-result-q { display: block; font-size: 0.9rem; font-weight: 600; line-height: 1.4; }
.help-result-p { display: block; margin-top: 0.15rem; font-size: 0.78rem; line-height: 1.4; color: var(--text-dim); }
.help-search .help-results a:hover .help-result-q { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.help-result-s { margin: -0.15rem 0 0; padding: 0 0.15rem 0.85rem; font-size: 0.92rem; line-height: 1.6; color: var(--text-dim); }
.help-results-none { margin: 0; padding: 0.7rem 0; font-size: 0.9rem; line-height: 1.55; color: var(--text-dim); border-top: 1px solid var(--hub-hairline); border-bottom: 1px solid var(--hub-hairline); }
.help-results-more { margin: 0.7rem 0 0; font-size: 0.88rem; }
.help-search .help-results-more a { color: var(--blue); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(3, 74, 166, .35); text-underline-offset: 3px; }

/* the home's big box */
.help-search--big { max-width: 640px; margin: 1.4rem 0 0.5rem; }
.help-search--big input { padding: 0.95rem 3.75rem 0.95rem 1.35rem; font-size: 1.08rem; }
.help-search--big .help-search-btn { width: 2.9rem; height: 2.9rem; right: 5px; }
.help-search--big .help-search-btn svg { width: 1.25rem; height: 1.25rem; }
.help-search--big .help-results-box { margin-top: 1rem; }
.help-search--big .help-result-q { font-size: 1.02rem; }
.help-search--big .help-result-p { font-size: 0.8rem; letter-spacing: 0.02em; }

/* ── 5. ARTICLE: task sections ───────────────────────────────────────── */
.help-task > * { max-width: var(--hub-read); }
.help-task + .help-task { margin-top: 3.5rem; padding-top: 3.5rem; border-top: 1px solid var(--hub-hairline); }
.help-task h2 {
  margin: 0 0 1.25rem;
  font-family: var(--hub-font-display); font-weight: 700; letter-spacing: -0.015em;
  font-size: clamp(1.5rem, 2.3vw, 1.9rem); line-height: 1.2; text-wrap: balance;
}
.help-task h3 { margin: 2rem 0 0.7rem; font-family: var(--hub-font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.3; }
.help-task p { margin: 0 0 1.1rem; font-size: 1.05rem; line-height: 1.75; color: var(--text-dim); }
.help-task b, .help-task strong { color: var(--text); font-weight: 600; }
.help-task a:not([class]) {
  color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgba(3, 74, 166, 0.35); text-underline-offset: 3px; transition: text-decoration-color 0.2s;
}
.help-task a:not([class]):hover { text-decoration-color: currentColor; }
.help-task ul:not([class]) { list-style: none; margin: 0 0 1.3rem; padding: 0; }
.help-task ul:not([class]) > li { position: relative; padding-left: 1.3rem; margin: 0.5rem 0; font-size: 1.03rem; line-height: 1.7; color: var(--text-dim); }
.help-task ul:not([class]) > li::before { content: ""; position: absolute; left: 0.2rem; top: 0.74em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.help-task > .hub-link { margin-top: 0.4rem; }
.help-task code:not(pre code) {
  padding: 0.08em 0.38em; border-radius: 5px; background: var(--bg-mid); border: 1px solid var(--hub-hairline);
  font: 500 0.88em/1.4 var(--help-mono); color: var(--text); overflow-wrap: anywhere;
}

/* numbered steps: gold iskra numerals (the site's step style), real <ol> */
.help-steps { list-style: none; counter-reset: help-step; margin: 0 0 1.5rem; padding: 0; }
.help-steps > li {
  counter-increment: help-step; position: relative;
  margin: 0 0 0.75rem; padding: 0 0 0 2.6rem;
  font-size: 1.05rem; line-height: 1.75; color: var(--text-dim);
}
.help-steps > li::before {
  content: counter(help-step); position: absolute; left: 0; top: 0; width: 1.7rem; text-align: right;
  font-family: var(--hub-font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.38;
  font-variant-numeric: tabular-nums lining-nums; color: var(--gold);
}
.help-steps > li > ul, .help-steps > li > p { margin-top: 0.4rem; }

/* other ways: mouse / touch / keyboard, 2-3 columns, stacked on phones */
.help-ways {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: 0.9rem;
  margin: 1.6rem 0 1.8rem;
}
.help-way { padding: 1.1rem 1.2rem 1.15rem; border: 1px solid var(--hub-hairline); border-radius: 10px; background: var(--hub-card); }
.help-way h3 {
  display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.5rem;
  font: 600 0.95rem/1.35 var(--hub-font-body); letter-spacing: 0; color: var(--text);
}
.help-way h3::before { content: ""; flex: 0 0 14px; height: 1px; background: var(--gold); }
.help-way p { margin: 0 0 0.5rem; font-size: 0.97rem; line-height: 1.65; }
.help-way > :last-child { margin-bottom: 0; }

/* screenshots: 2x files shown at their CSS size (width/height from the generator) */
.help-shot { margin: 1.9rem 0 2.2rem; }
.help-task > .help-shot { max-width: none; }
.help-shot > img {
  display: block; max-width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--hub-hairline); background: #f2f6fb; box-shadow: var(--help-shadow-shot);
}
.help-shot figcaption { margin-top: 1.05rem; max-width: var(--hub-read); }
.help-shot-cap, .help-shot figcaption:not(:has(.help-shot-cap)) {
  font-size: 0.88rem; line-height: 1.55; color: var(--text-dim);
}
.help-shot-cap { display: flex; gap: 0.7rem; }
.help-shot-cap::before { content: ""; flex: 0 0 18px; height: 1px; margin-top: 0.75em; background: var(--gold); }
/* numbered legend of the badges drawn in the screenshot: blue circles, white bold digits */
.help-callouts {
  list-style: none; counter-reset: help-callout; display: grid; gap: 0.5rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin: 0.95rem 0 0; padding: 0;
}
.help-callouts > li {
  counter-increment: help-callout; position: relative; min-height: 1.6rem;
  padding: 0.12rem 0 0 2.15rem; font-size: 0.92rem; line-height: 1.5; color: var(--text-dim);
}
.help-callouts > li::before {
  content: counter(help-callout); position: absolute; left: 2px; top: 2px;
  width: 1.45rem; height: 1.45rem; border-radius: 50%; background: #034aa6; color: #fff;
  font: 700 0.78rem/1.45rem var(--hub-font-body); text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(6, 18, 31, .35);
}

/* a control's picture inside a sentence, about the height of the text */
.help-btn-img {
  display: inline-block; height: 1.4em; width: auto; max-width: none; margin: 0 0.12em;
  vertical-align: -0.36em; border-radius: 4px;
}

/* key caps (the /avp/ keyboard style, on white) */
.help-main kbd {
  display: inline-block; min-width: 1.7em; margin: 0 0.06em; padding: 0.04em 0.45em 0.02em;
  border: 1px solid rgba(6, 18, 31, .22); border-bottom-width: 2px; border-radius: 5px; background: #fff;
  box-shadow: 0 1px 0 rgba(6, 18, 31, .05);
  font: 600 0.82em/1.5 var(--hub-font-body); color: var(--text); text-align: center; white-space: nowrap;
  vertical-align: 0.06em;
}

/* tables: real <table>, stacked rows on phones (labels from the <th>, like the guides' ledger) */
.help-table { width: 100%; border-collapse: collapse; margin: 1.6rem 0 1.9rem; font-size: 0.97rem; }
.help-table caption { caption-side: top; text-align: left; padding-bottom: 0.9rem; font-size: 0.9rem; line-height: 1.55; color: var(--text-dim); }
.help-table thead th {
  text-align: left; vertical-align: bottom; padding: 0 1.25rem 0.8rem 0; border-bottom: 1px solid var(--hub-hairline-strong);
  font: 600 0.7rem/1.3 var(--hub-font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
}
.help-table td, .help-table tbody th {
  text-align: left; vertical-align: top; padding: 0.95rem 1.25rem 0.95rem 0; border-bottom: 1px solid var(--hub-hairline);
  font-size: 0.97rem; line-height: 1.6; color: var(--text-dim);
}
.help-table tbody th { font-weight: 600; color: var(--text); }
.help-table th:last-child, .help-table td:last-child { padding-right: 0; }

/* notes and tips: visible label, coloured left rule */
.help-task .help-note, .help-task .help-tip {
  margin: 1.5rem 0; padding: 0.9rem 1.15rem 0.95rem 1.1rem; border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0;
  background: var(--help-tint-blue); font-size: 0.98rem; line-height: 1.65; color: var(--help-text);
}
.help-task .help-tip { border-left-color: var(--gold); background: var(--help-tint-gold); }
.help-note > strong:first-child, .help-tip > strong:first-child { color: var(--text); font-weight: 700; margin-right: 0.15em; }

/* code (site-owner page): wraps inside its box, never widens the page */
.help-code {
  margin: 1.4rem 0 1.6rem; padding: 1.05rem 1.2rem; border: 1px solid var(--hub-hairline); border-radius: 10px;
  background: var(--bg-mid); color: var(--text);
  font: 500 0.86rem/1.7 var(--help-mono); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  tab-size: 2; max-width: 100%; overflow-x: auto;
}
.help-code code { font: inherit; }
.help-code-box { position: relative; margin: 1.4rem 0 1.6rem; max-width: var(--hub-read); }
.help-code-box > .help-code { margin: 0; padding-top: 3rem; }
.help-copy {
  position: absolute; top: 0.55rem; right: 0.55rem;
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.9rem; border-radius: 99px;
  border: 1px solid var(--hub-hairline-strong); background: #fff; color: var(--text); cursor: pointer;
  font: 600 0.8rem/1 var(--hub-font-body); transition: border-color 0.2s, color 0.2s;
}
.help-copy svg { width: 0.95rem; height: 0.95rem; display: block; }
.help-copy:hover { border-color: var(--blue); color: var(--blue); }
.help-copy.is-done { color: var(--text); border-color: var(--gold); }

/* FAQ (troubleshooting): the guides' FAQ items inside a task section */
.help-task .faq-item:first-of-type { border-top: 1px solid var(--hub-hairline-strong); }
.help-task .faq-item summary { font-size: 1.04rem; }
.help-task .faq-item + :not(.faq-item) { margin-top: 1.5rem; }

/* home: "Try the player" (16:9) */
.help-demo {
  position: relative; margin: 1.5rem 0 0.5rem; padding: 1px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(143, 106, 18, 0.42), rgba(143, 106, 18, 0) 42%, rgba(143, 106, 18, 0.2));
  box-shadow: var(--hub-shadow-media);
}
.help-task > .help-demo { max-width: none; }
.help-demo iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 11px; background: #0b1624; }

/* home: topic cards */
.help-task > .help-cards { max-width: none; }
.help-cards {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr)); gap: 1rem;
  margin: 1.4rem 0 0; padding: 0;
}
.help-card { display: flex; flex-direction: column; padding: 1.3rem 1.35rem 1.35rem; border: 1px solid var(--hub-hairline); border-radius: 10px; background: var(--hub-card); }
.help-task .help-card-t { margin: 0 0 0.45rem; font-family: var(--hub-font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.3; }
.help-task .help-card-t a { color: var(--text); text-decoration: none; transition: color 0.2s; }
.help-task .help-card-t a:hover { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.help-task .help-card-d { margin: 0 0 0.9rem; font-size: 0.94rem; line-height: 1.6; }
.help-card-qs { list-style: none; margin: auto 0 0; padding: 0.75rem 0 0; border-top: 1px solid var(--hub-hairline); }
.help-card-qs li { margin: 0; }
.help-card-qs a {
  display: block; padding: 0.28rem 0; font-size: 0.9rem; line-height: 1.45; color: var(--blue);
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(3, 74, 166, .35); text-underline-offset: 3px;
}
.help-card-qs a:hover { text-decoration-color: currentColor; }

/* home: every question, grouped by topic (also the search fallback without scripts) */
.help-task > .help-all { max-width: none; }
.help-all { columns: 2 19rem; column-gap: 2.5rem; margin-top: 0.5rem; }
.help-all-group { break-inside: avoid; padding: 0 0 1.4rem; }
.help-task .help-all-group h3 { margin: 0 0 0.5rem; padding-top: 0.2rem; font-size: 1.05rem; }
.help-task .help-all-group h3 a { color: var(--text); text-decoration: none; }
.help-task .help-all-group h3 a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.help-all-qs { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hub-hairline-gold); }
.help-all-group li a {
  display: block; padding: 0.25rem 0 0.25rem 0.9rem; font-size: 0.93rem; line-height: 1.5; color: var(--blue);
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(3, 74, 166, .3); text-underline-offset: 3px;
}
.help-all-group li a:hover { text-decoration-color: currentColor; }

/* ── 6. PREVIOUS / NEXT ──────────────────────────────────────────────── */
.help-pager {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: var(--hub-read);
  margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--hub-hairline-strong);
}
.help-pager a {
  display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.15rem 1.1rem;
  border: 1px solid var(--hub-hairline); border-radius: 10px; background: #fff; text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
.help-pager a:hover { border-color: var(--blue); transform: translateY(-2px); }
.help-pager-next { grid-column: 2; align-items: flex-end; text-align: right; }
.help-pager-k {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font: 600 0.7rem/1.3 var(--hub-font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
}
.help-pager-arrow { width: 15px; height: 15px; flex-shrink: 0; }
.help-pager-t { font-family: var(--hub-font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: var(--text); }
.help-pager a:hover .help-pager-t { color: var(--blue); }

/* ── 7. "STILL NEED HELP?" BAND ──────────────────────────────────────── */
.help-still { padding: 4.5rem 0; background: var(--bg-mid); border-top: 1px solid var(--hub-hairline); }
.help-still-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem 3rem; }
.help-still h2 { margin: 0 0 0.55rem; font-family: var(--hub-font-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.015em; }
.help-still p { max-width: 560px; font-size: 1.02rem; line-height: 1.65; color: var(--text-dim); }

/* ── 8. RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .help-grid { gap: 3rem; }
  :root { --help-side: 230px; }
}
@media (max-width: 900px) {
  .help-body { padding: 2rem 0 4.5rem; }
  .help-grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .help-side { position: static; max-height: none; overflow: visible; padding: 0; margin: 0; }
  .help-side > .help-search { margin-bottom: 1rem; }
  .help-topics { background: var(--bg-mid); border: 1px solid var(--hub-hairline); border-radius: 10px; padding: 0 1.15rem; }
  .help-topics .help-side-title { margin: 1rem 0 0.8rem; }
  .help-topics-list { margin-bottom: 1rem; }
  .help-side--collapsible .help-side-title { display: none; }
  .help-side-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
    padding: 1rem 0; margin: 0; border: 0; background: transparent; cursor: pointer; text-align: left;
    font: 600 0.72rem/1.3 var(--hub-font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  }
  .help-side-icon { position: relative; flex: 0 0 14px; width: 14px; height: 14px; }
  .help-side-icon::before, .help-side-icon::after {
    content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 1px; background: currentColor;
  }
  .help-side-icon::after { transform: rotate(90deg); transition: transform 0.2s; }
  .help-side-toggle[aria-expanded="true"] .help-side-icon::after { transform: rotate(0deg); }
  .help-head { padding: 2.25rem 0 2.5rem; }
  .help-pager { margin-top: 3rem; }
}
@media (max-width: 720px) {
  /* tables: rows become stacked blocks, cells captioned by data-label */
  .help-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .help-table, .help-table caption, .help-table tbody, .help-table tr, .help-table td, .help-table tbody th { display: block; width: auto !important; }
  .help-table tr { padding: 1rem 0 0.9rem; border-bottom: 1px solid var(--hub-hairline); }
  .help-table td, .help-table tbody th { padding: 0.2rem 0; border: 0; white-space: normal; }
  .help-table [data-label]::before {
    content: attr(data-label); display: block; margin: 0.45rem 0 0.1rem;
    font: 600 0.66rem/1.3 var(--hub-font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
  }
  .help-table tr > :first-child[data-label]::before { margin-top: 0; }
}
@media (max-width: 600px) {
  .help-head h1 { font-size: clamp(1.8rem, 8vw, 2.2rem); }
  .help-task + .help-task { margin-top: 2.75rem; padding-top: 2.75rem; }
  .help-task p, .help-steps > li { font-size: 1.02rem; }
  .help-steps > li { padding-left: 2.25rem; }
  .help-steps > li::before { width: 1.45rem; font-size: 1.2rem; line-height: 1.45; }
  .help-pager { grid-template-columns: minmax(0, 1fr); }
  .help-pager-next { grid-column: auto; }
  .help-still { padding: 3.5rem 0; }
  .help-search--big input { font-size: 1rem; padding: 0.85rem 3.4rem 0.85rem 1.1rem; }
  .help-search--big .help-search-btn { width: 2.6rem; height: 2.6rem; }
  .help-code { font-size: 0.82rem; padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 360px) {
  .help-still .hub-btn { padding-left: 1.2rem; padding-right: 1.2rem; }
}

/* ── 9. MOTION ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .help-pager a:hover { transform: none; }
  .help-side-icon::after { transition: none; }
}

/* ── 10. PRINT: the article only ─────────────────────────────────────── */
@media print {
  .help-side, .help-pager, .help-still, .help-copy, .help-demo, .help-search, .hub-footer { display: none !important; }
  .help-hero { background: none; border: 0; }
  .help-hero::before { display: none; }
  .help-head { padding: 0 0 1rem; }
  .help-body { padding: 0; }
  .help-grid { display: block; }
  .help-task > *, .help-code-box { max-width: none; }
  .help-task + .help-task { break-before: auto; }
  .help-shot, .help-table tr, .help-way { break-inside: avoid; }
  .help-shot > img { box-shadow: none; }
  .help-code { white-space: pre-wrap; }
}