.hc-quick-ico{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;
  background:var(--brand-10);border:1px solid var(--brand-15);color:var(--brand-ink,var(--brand));font-size:18px}
.hc-quick-ico .hc-ico-img,.hc-quick-ico svg{width:20px;height:20px}
.hc-quick-copy{min-width:0;display:grid;gap:3px}
.hc-quick-label{font-size:15px;font-weight:700;color:var(--text-primary);line-height:1.35}
.hc-quick-desc{font-size:12.5px;color:var(--text-muted);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ── The button primitive the CTA (and every ported band) stands on ──────────
   `.hce-btn` lives in hc-enterprise.css, not the UI sheet, so lifting the CTA
   rules alone left both buttons as bare links. Same brace-aware lift, 19 rules,
   `#hc-page.hce` → `#hc-page`. */
.hce-btn {
  --hce-btn-bg: var(--brand);
  
  --hce-btn-ink: var(--hce-on-brand, var(--hce-band-ink));
  --hce-btn-line: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hce-s-2);
  padding: 0.6875rem var(--hce-s-5);
  font-family: inherit;
  font-size: var(--hce-fs-sm);
  font-weight: var(--hce-fw-semi);
  letter-spacing: var(--hce-ls-body);
  line-height: 1.2;
  color: var(--hce-btn-ink);
  background: var(--hce-btn-bg);
  border: 1px solid var(--hce-btn-line);
  border-radius: var(--hce-r-sm);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform var(--hce-t-fast) var(--hce-ease-out),
    box-shadow var(--hce-t-base) var(--hce-ease-out),
    background-color var(--hce-t-base) var(--hce-ease),
    color var(--hce-t-base) var(--hce-ease);
}
.hce-btn:hover { transform: translateY(-1px); box-shadow: var(--hce-sh-brand); }
.hce-btn:active { transform: translateY(0); box-shadow: var(--hce-sh-xs); transition-duration: 60ms; }
.hce-btn-secondary {
  --hce-btn-bg: var(--card-bg, #fff);
  --hce-btn-ink: var(--text-primary);
  --hce-btn-line: var(--hce-hairline);
}
.hce-btn-secondary:hover { --hce-btn-bg: var(--hce-surface-hover); box-shadow: var(--hce-sh-md); }
.hce-btn-ghost {
  --hce-btn-bg: transparent;
  --hce-btn-ink: var(--text-primary);
  --hce-btn-line: transparent;
}
.hce-btn-ghost:hover { --hce-btn-bg: var(--hce-tint); box-shadow: none; }
.hce-on-dark .hce-btn { --hce-btn-bg: var(--hce-band-ink); --hce-btn-ink: var(--hce-band-surface); }
.hce-on-dark .hce-btn:hover { box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.6); }
.hce-on-dark .hce-btn-secondary {
  --hce-btn-bg: color-mix(in srgb, var(--hce-band-ink) 10%, transparent);
  --hce-btn-ink: var(--hce-band-ink);
  --hce-btn-line: color-mix(in srgb, var(--hce-band-ink) 26%, transparent);
}
.hce-on-dark .hce-btn-secondary:hover { --hce-btn-bg: color-mix(in srgb, var(--hce-band-ink) 18%, transparent); }
.hce-on-dark .hce-btn-ghost { --hce-btn-ink: var(--hce-band-ink); }
.hce-on-dark .hce-btn-ghost:hover { --hce-btn-bg: color-mix(in srgb, var(--hce-band-ink) 12%, transparent); }
.hce-btn-sm { padding: 0.5rem var(--hce-s-4); font-size: var(--hce-fs-xs); }
.hce-btn-lg { padding: 0.875rem var(--hce-s-7); font-size: var(--hce-fs-body); border-radius: var(--hce-r-md); }
.hce-btn-block { inline-size: 100%; }
@media (prefers-reduced-motion: reduce) {
  #hc-page *,
  #hc-page *::before,
  #hc-page *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  #hc-page .hce-card-link:hover,
  #hc-page .hce-btn:hover { transform: none; }
}
@media (forced-colors: active) {
  #hc-page .hce-card,
  #hc-page .hce-btn,
  #hc-page .hce-badge,
  #hc-page .hce-icon { border: 1px solid ButtonBorder; }
  #hc-page :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; box-shadow: none; }
}
@media print {
  #hc-page .hce-card { box-shadow: none; border-color: var(--hce-print-line); break-inside: avoid; }
  #hc-page .hce-btn,
  #hc-page .hce-skip { display: none; }
  #hc-page { --hce-section-y: 1.5rem; }
}

/* ── The CTA band — THE ORIGINAL CSS, LIFTED WHOLE ───────────────────────────
   All 83 rules that mention the band, pulled with a brace-aware scan rather than
   a line range — my first pass guessed at line spans and silently dropped six of
   the ten templates, the radius and shadow classes and the subhead. Re-scoped
   `#hc-page.hce` → `#hc-page`; nothing else changed.

   GAP TO WHAT FOLLOWS: the enterprise block carried a `gap_after` control and
   the band has no bottom margin of its own, so without it the CTA butts into
   the footer. The default below restores the space; the classes are the
   original's, kept for when that control is surfaced. */
#hc-page .hce-cta{margin-block-end:clamp(40px,6vw,72px)}
#hc-page .hce-cta.hce-cta-gap-flush{margin-block-end:0}



#hc-page .hce-cta {
  --hce-cta-surface: var(--card-bg, #fff);
  --hce-cta-ink: var(--text-primary);
  --hce-cta-ink-2: var(--text-secondary);
  --hce-cta-line: var(--hce-hairline);
  --hce-cta-radius: var(--hce-r-lg);
  --hce-cta-shadow: var(--hce-sh-sm);
  --hce-cta-pad: var(--hce-s-6);
  --hce-cta-accent: var(--brand);

  position: relative;
  overflow: hidden;
  container-type: inline-size;
  padding: var(--hce-cta-pad);
  color: var(--hce-cta-ink);
  background: var(--hce-cta-surface);
  border: 1px solid var(--hce-cta-line);
  border-radius: var(--hce-cta-radius);
  box-shadow: var(--hce-cta-shadow);
}
#hc-page .hce-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hce-s-5);
}
#hc-page .hce-cta-copy { flex: 1 1 22rem; min-inline-size: 0; display: grid; gap: var(--hce-s-2); justify-items: start; }
/* PHASE_HC_CTA_CLASSES_2026-08-15 — repointed to the class help.php ACTUALLY emits.
   The sheet styled `.hce-cta-icon`; help.php:5272 emits `class="hce-cta-ico"`. One
   character apart, valid CSS either way, and the Icon control had therefore never
   sized or placed anything. Fixed on the CSS side because the emitted names are the
   ones the rest of the band already uses (`-copy`, `-title`, `-body`, `-note`). */
#hc-page .hce-cta-ico { flex: 0 0 auto; display: inline-flex; align-items: center;
  font-size: 1.6em; line-height: 1; color: var(--hce-cta-accent); }
#hc-page .hce-cta-ico img, #hc-page .hce-cta-ico svg { inline-size: 1.6em; block-size: 1.6em; }
#hc-page .hce-cta-title {
  margin: 0;
  font-family: var(--font-heading, var(--font));
  font-size: var(--hce-fs-h3);
  font-weight: var(--hce-fw-bold);
  line-height: var(--hce-lh-h3);
  letter-spacing: var(--hce-ls-h3);
  color: var(--hce-cta-ink);
  text-wrap: balance;
}
#hc-page .hce-cta-body { margin: 0; font-size: var(--hce-fs-sm); line-height: var(--hce-lh-body); color: var(--hce-cta-ink-2); max-inline-size: 62ch; }
#hc-page .hce-cta-note { margin: 0; font-size: var(--hce-fs-xs); color: var(--hce-cta-ink-2); opacity: 0.82; }
/* Same defect: the accent rule pointed at `.hce-eyebrow` while help.php:5271 emits
   `hce-cta-eyebrow`, so the eyebrow never took the band's accent colour. */
#hc-page .hce-cta .hce-cta-eyebrow { color: var(--hce-cta-accent);
  font-size: var(--hce-fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
/* PHASE_HC_CTA_CLASSES_2026-08-15 — THE BADGE HAD NO RULES AT ALL.
   help.php:5270 has always emitted `<span class="hce-cta-badge">`, and not one
   declaration existed for it across the twelve sheets — so the Badge control rendered
   its text as an unstyled inline run, indistinguishable from the eyebrow above it. */
#hc-page .hce-cta-badge {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .28em .72em; border-radius: 999px;
  font-size: var(--hce-fs-xs); font-weight: 800; letter-spacing: .04em;
  color: var(--hce-cta-accent);
  background: color-mix(in srgb, var(--hce-cta-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--hce-cta-accent) 26%, transparent);
}

/* THE IMAGE CONTROL HAD NO CONSUMER.
   help.php:5267 writes the image as an inline custom property on the band, and nothing in
   any sheet read that custom property — the Image field was inert on every variant,
   including the one named "Full-bleed media". Painted here as a cover layer behind
   the copy, only when the operator has actually set one. */
#hc-page .hce-cta[style*="--hce-cta-image"] {
  background-image: linear-gradient(to right,
      color-mix(in srgb, var(--hce-cta-surface) 92%, transparent),
      color-mix(in srgb, var(--hce-cta-surface) 62%, transparent)),
    var(--hce-cta-image);
  background-size: cover; background-position: center;
}
#hc-page .hce-cta-actions { display: flex; flex-wrap: wrap; gap: var(--hce-s-3); flex: 0 0 auto; }
#hc-page .hce-cta-align-center .hce-cta-actions { justify-content: center; }
#hc-page .hce-cta-align-end .hce-cta-actions    { justify-content: flex-end; }
#hc-page .hce-cta-size-sm { --hce-cta-pad: var(--hce-s-4); }
#hc-page .hce-cta-size-sm .hce-cta-title { font-size: var(--hce-fs-h4); letter-spacing: var(--hce-ls-h4); }
#hc-page .hce-cta-size-lg { --hce-cta-pad: clamp(var(--hce-s-7), 1.6rem + 2.4vw, var(--hce-s-11)); }
#hc-page .hce-cta-size-lg .hce-cta-title { font-size: var(--hce-fs-h1); line-height: var(--hce-lh-h1); letter-spacing: var(--hce-ls-h1); }
#hc-page .hce-cta-size-lg .hce-cta-body { font-size: var(--hce-fs-lede); line-height: var(--hce-lh-relaxed); }
#hc-page .hce-cta-h-short  { min-block-size: 12rem; }
#hc-page .hce-cta-h-medium { min-block-size: 18rem; }
#hc-page .hce-cta-h-tall   { min-block-size: 26rem; }
#hc-page .hce-cta-h-hero   { min-block-size: min(34rem, 70vh); }
#hc-page [class*="hce-cta-h-"] { display: grid; align-content: center; }
#hc-page .hce-cta-w-wide { --hce-cta-radius: var(--hce-r-xl); }
#hc-page .hce-cta-w-full {
  --hce-cta-radius: 0;
  border-radius: 0;
  inline-size: auto;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--hce-cta-pad), calc(50vw - 50%));
}
#hc-page .hce-cta-align-center .hce-cta-inner { flex-direction: column; text-align: center; }
#hc-page .hce-cta-align-center .hce-cta-copy { justify-items: center; flex-basis: auto; }
#hc-page .hce-cta-align-center .hce-cta-actions { justify-content: center; }
#hc-page .hce-cta-media { position: absolute; inset: 0; z-index: 0; }
#hc-page .hce-cta-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
#hc-page .hce-cta-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(6, 10, 20, 0.88), rgba(6, 10, 20, 0.52) 65%, rgba(6, 10, 20, 0.3));
}
#hc-page .hce-cta-prompt {
  --hce-cta-surface: var(--hce-tint);
  --hce-cta-line: rgba(var(--br), 0.2);
  --hce-cta-shadow: none;
  --hce-cta-radius: var(--hce-r-md);
}
#hc-page .hce-cta-contact {
  --hce-cta-surface: var(--card-bg, #fff);
  --hce-cta-shadow: var(--hce-sh-md);
  --hce-cta-radius: var(--hce-r-xl);
}
#hc-page .hce-cta-split {
  --hce-cta-surface: linear-gradient(100deg, var(--hce-tint-strong), transparent 58%), var(--card-bg, #fff);
  --hce-cta-radius: var(--hce-r-xl);
}
#hc-page .hce-cta-gradient {
  --hce-cta-surface: linear-gradient(115deg, var(--brand), color-mix(in srgb, var(--brand) 40%, var(--hce-accent-2)) 100%);
  
  --hce-cta-ink: var(--hce-on-brand, #ffffff);
  --hce-cta-ink-2: var(--hce-on-brand-2, rgba(255, 255, 255, 0.86));
  --hce-cta-accent: var(--hce-on-brand, #ffffff);
  --hce-cta-line: transparent;
  --hce-cta-shadow: var(--hce-sh-lg);
  --hce-cta-radius: var(--hce-r-xl);
}
#hc-page .hce-cta-fullbleed {
  
  --hce-cta-surface: var(--hce-band-surface);
  --hce-cta-ink: var(--hce-band-ink);
  --hce-cta-ink-2: var(--hce-band-ink-2);
  --hce-cta-accent: var(--hce-band-ink);
  --hce-cta-line: transparent;
  --hce-cta-radius: var(--hce-r-xl);
  --hce-cta-pad: clamp(var(--hce-s-8), 2rem + 3vw, var(--hce-s-12));
}
#hc-page .hce-cta-command {
  
  --hce-cta-surface: var(--hce-band-surface-command);
  --hce-cta-ink: var(--hce-band-ink);
  --hce-cta-ink-2: var(--hce-band-ink-2);
  --hce-cta-accent: var(--hce-band-accent-command);
  --hce-cta-line: color-mix(in srgb, var(--hce-band-accent-command) 22%, transparent);
  --hce-cta-radius: var(--hce-r-xs);
}
#hc-page .hce-cta-command .hce-cta-title,
#hc-page .hce-cta-command .hce-cta-eyebrow { font-family: var(--mono); letter-spacing: 0.01em; }
#hc-page .hce-cta-editorial {
  --hce-cta-surface: var(--card-bg, #fff);
  --hce-cta-line: transparent;
  --hce-cta-shadow: none;
  --hce-cta-radius: var(--hce-r-xs);
}
#hc-page .hce-cta-editorial { border-block-start: 3px solid var(--brand); }
#hc-page .hce-cta-glass {
  
  --hce-cta-surface: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)), var(--hce-band-surface-glass);
  --hce-cta-ink: var(--hce-band-ink);
  --hce-cta-ink-2: var(--hce-band-ink-2);
  --hce-cta-accent: var(--hce-band-ink);
  --hce-cta-line: color-mix(in srgb, var(--hce-band-ink) 20%, transparent);
  --hce-cta-radius: var(--hce-r-2xl);
  --hce-cta-shadow: var(--hce-sh-xl);
}
#hc-page .hce-cta-glass { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#hc-page .hce-cta-framed {
  --hce-cta-surface: var(--card-bg, #fff);
  --hce-cta-line: var(--hce-line-strong);
  --hce-cta-shadow: none;
  --hce-cta-radius: var(--hce-r-md);
}
#hc-page .hce-cta-framed::before {
  content: "";
  position: absolute;
  inset: var(--hce-s-2);
  border: 1px solid var(--hce-cta-line);
  border-radius: calc(var(--hce-cta-radius) - var(--hce-s-1));
  opacity: 0.55;
  pointer-events: none;
}
#hc-page .hce-cta-decision {
  --hce-cta-surface: var(--hce-surface-sunk);
  --hce-cta-shadow: none;
  --hce-cta-radius: var(--hce-r-xl);
}
#hc-page .hce-cta-decision .hce-cta-inner { flex-direction: column; align-items: stretch; }
#hc-page .hce-cta-choices { display: grid; gap: var(--hce-s-4); inline-size: 100%; }
@container (min-width: 34rem) {
  #hc-page .hce-cta-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#hc-page .hce-cta-choice {
  align-items: center;
  justify-content: center;
  padding: var(--hce-s-7);
  text-align: center;
  font-size: var(--hce-fs-body);
  font-weight: var(--hce-fw-semi);
  color: var(--text-primary);
  text-decoration: none;
}
@media (forced-colors: active) {
  #hc-page .hce-cta,
  #hc-page .hce-note,
  #hc-page .hce-quick,
  #hc-page .hce-faq,
  #hc-page .hce-trustbar,
  #hc-page .hce-art-list { border: 1px solid ButtonBorder; }
  #hc-page .hce-cta-media { display: none; }
}
@media print {
  #hc-page .hce-cta,
  #hc-page .hce-trustbar { display: none; }
  #hc-page .hce-faq-item::details-content { block-size: auto; opacity: 1; }
}
#hc-page .hce-cta-r-none { --hce-cta-radius: 0; }
#hc-page .hce-cta-r-sm   { --hce-cta-radius: var(--hce-r-sm); }
#hc-page .hce-cta-r-md   { --hce-cta-radius: var(--hce-r-md); }
#hc-page .hce-cta-r-lg   { --hce-cta-radius: var(--hce-r-lg); }
#hc-page .hce-cta-r-xl   { --hce-cta-radius: var(--hce-r-2xl); }
#hc-page .hce-cta-r-pill { --hce-cta-radius: var(--hce-r-pill); }
#hc-page .hce-cta-sh-none { --hce-cta-shadow: none; }
#hc-page .hce-cta-sh-sm   { --hce-cta-shadow: var(--hce-sh-sm); }
#hc-page .hce-cta-sh-md   { --hce-cta-shadow: var(--hce-sh-md); }
#hc-page .hce-cta-sh-lg   { --hce-cta-shadow: var(--hce-sh-lg); }
#hc-page .hce-cta-sh-xl   { --hce-cta-shadow: var(--hce-sh-xl); }
#hc-page .hce-cta-w-full { --hce-cta-radius: 0; border-radius: 0; }
#hc-page .hce-cta-r-pill:not(.hce-cta-w-full) { padding-inline: max(var(--hce-cta-pad), var(--hce-s-9)); }
#hc-page.hce[class*="hce-pw-"] .hce-subhero-w-full,
#hc-page.hce[class*="hce-pw-"] .hce-cta-w-full { max-inline-size: none; }
#hc-page.hce[class*="hce-hov-"] :is(
  .hce-card, .hce-quick, .hce-cat-row, .hce-cat-block, .hce-navtile,
  .hce-note, .hce-topic, .hce-rail-card, .hce-cta, .hce-news-panel,
  .hc-cat, .hc-home-cat, .hc-pop-item, .hc-arow, .hc-art-card,
  .hc-side-card, .hc-kb-cat-link, .hc-cat-pg-head, .hc-empty
) {
  transition:
    transform var(--hce-t-base) var(--hce-ease-out),
    box-shadow var(--hce-t-base) var(--hce-ease-out),
    border-color var(--hce-t-base) var(--hce-ease) !important;
}
#hc-page .hce-cta-subhead {
  margin: 0;
  font-family: var(--font-heading, var(--font));
  font-size: var(--hce-fs-h4);
  font-weight: var(--hce-fw-semi);
  line-height: var(--hce-lh-h3);
  letter-spacing: var(--hce-ls-h4);
  color: var(--hce-cta-ink);
  opacity: 0.92;
  text-wrap: pretty;
}
#hc-page .hce-cta-size-lg .hce-cta-subhead { font-size: var(--hce-fs-h3); letter-spacing: var(--hce-ls-h3); }
#hc-page .hce-cta-title:has(br),
#hc-page .hce-cta-subhead:has(br) { text-wrap: nowrap; }
@container (max-width: 34rem) {
  
  #hc-page .hce-cta-title:has(br),
  #hc-page .hce-cta-subhead:has(br) { text-wrap: pretty; }
  /* THE AUTHOR'S BREAK SURVIVES A NARROW CONTAINER. The lifted sheet dropped
     `br` here on the theory that a hard break makes awkward short lines in a
     narrow column — but the title field is a textarea precisely so the break
     can be placed deliberately, and the widget panel is under this threshold,
     so the break was being thrown away exactly where it had been asked for.
     `text-wrap: pretty` above still handles whatever wraps after it. */
}
#hc-page .hce-block-cta:has(.hce-cta-gap-flush)  { margin-block-end: 0 !important; }
#hc-page .hce-block-cta:has(.hce-cta-gap-sm)     { margin-block-end: 30px !important; }
#hc-page .hce-block-cta:has(.hce-cta-gap-md)     { margin-block-end: 60px !important; }
#hc-page .hce-block-cta:has(.hce-cta-gap-lg)     { margin-block-end: 96px !important; }
#hc-page .hce-block-cta:has(.hce-cta-gap-custom) { margin-block-end: var(--hce-cta-gap, 0) !important; }
#hc-page .hce-zone:has(.hce-cta-gap-flush) { margin-block-end: 0 !important; padding-block-end: 0 !important; }
#hc-page.hce:has(.hce-cta-gap-flush) #hc-main { padding-block-end: 0 !important; }
#hc-page.hce:has(.hce-cta-gap-flush) .hce-block-cta { padding-block-end: 0 !important; }
body:has(.hce-cta-gap-flush) :is(.hc-foot, #hc-foot) { margin-block-start: 0 !important; }
#hc-page .hce-zone:has([class*="hce-cta-gap-"]) > .hce-block-cta:last-child { margin-block-start: 0; }
html[data-theme="dark"] #hc-page .hce-cta {
  --hce-cta-surface: linear-gradient(160deg, #0e141d 0%, var(--hc-d-bg) 55%, rgba(var(--br), 0.16) 140%);
  --hce-cta-ink:   var(--hc-d-ink);
  --hce-cta-ink-2: var(--hc-d-ink-2);
  --hce-cta-line:  var(--hc-d-line);
  --hce-cta-accent: var(--brand);
}
/* THE BUTTONS ARE ANCHORS. Dark mode paints links with the brand colour, which
   beats `.hce-btn{color:var(--hce-btn-ink)}` on source order and left the primary
   button brand-on-brand — a purple label on a purple pill, invisible. The ink
   token is already right for both (#fff on the filled button, the light ink on
   the outlined one); this just makes it win over the link rule. */
html[data-theme="dark"] #hc-page .hce-cta .hce-btn,
html[data-theme="dark"] #hc-page .hce-cta a.hce-btn { color: var(--hce-btn-ink); }
html[data-theme="dark"] #hc-page .hce-cta-media::after {
  background: linear-gradient(100deg, rgba(6, 10, 20, 0.82), rgba(6, 10, 20, 0.46) 65%, rgba(6, 10, 20, 0.24));
}
#hc-page .hce-cta[style*="--hce-cta-fs-title"]   .hce-cta-title   { font-size: var(--hce-cta-fs-title); }
#hc-page .hce-cta[style*="--hce-cta-fs-subhead"] .hce-cta-subhead { font-size: var(--hce-cta-fs-subhead); }
#hc-page .hce-cta[style*="--hce-cta-fs-body"]    .hce-cta-body    { font-size: var(--hce-cta-fs-body); }

/* ── THE CTA BAND — MY OWN, over the ported templates ────────────────────────
 * The templates decide the material; this decides the SHAPE, and shape is what
 * the four widths are really choosing:
 *
 *   small / medium / large  → a CARD. It sits in the page with air around it, so
 *                             it is rounded and it keeps its bottom margin. A
 *                             rounded slab that touched the footer would read as
 *                             a mistake.
 *   full                    → a SLAB. Edge to edge, square corners, no bottom
 *                             margin, meeting the footer with nothing between
 *                             them. A curve whose ends run off-screen is a curve
 *                             hanging into nothing, which is why full bleed
 *                             squares itself no matter what radius is chosen.
 *
 * The copy measure is capped independently of the band, so a full-bleed slab
 * still reads as a sentence rather than a line stretched across a monitor. */
#hc-page .hce-cta{
  --hcx-cta-r: clamp(18px, 2vw, 26px);
  box-sizing: border-box;
}
#hc-page .hcx-cta-w-small,
#hc-page .hcx-cta-w-medium,
#hc-page .hcx-cta-w-large{
  border-radius: var(--hcx-cta-r);
  margin-inline: auto;
  margin-block-end: clamp(40px, 6vw, 72px);
}
#hc-page .hcx-cta-w-small { max-inline-size: 620px; }
#hc-page .hcx-cta-w-medium{ max-inline-size: 900px; }
#hc-page .hcx-cta-w-large { max-inline-size: 100%; }

/* FULL: a slab. It is rendered outside the content column (see hc_build_view),
   so it needs no breakout trick — it is already the width of the page. */
#hc-page .hcx-cta-w-full{
  margin-inline: 0;
  margin-block-end: 0;
  inline-size: 100%;
  max-inline-size: none;
  border-radius: 0;
  /* Tighter than it was: a band is a closing ask, not a second hero. This is
     the `auto` height — the height control adds presence on top when a page
     wants it, rather than every band starting oversized. */
  padding-block: clamp(30px, 3.6vw, 52px);
  /* The copy stays a readable measure however wide the slab gets. */
  padding-inline: max(24px, calc(50vw - 560px));
}
#hc-page .hcx-cta-w-full .hce-cta-inner{ max-inline-size: 1120px; margin-inline: auto; }
/* AND IT MEETS THE FOOTER. The footer carries its own top margin, which is right
   when content ends above it and wrong when a slab does — two slabs should meet.
   Only full bleed closes it; small, medium and large are cards sitting in the
   page and keep their air, as does every page that has no band at all. */
/* FULL WIDTH CLOSES THE FOOTER GAP, and only full width.
 *
 * The operator's "Footer top gap" is emitted as
 * `#hc-foot{margin-top:<n>px!important}`, and !important outranks specificity
 * outright — which is why every ordinary rule I tried changed nothing. A
 * full-bleed band is the one case where that gap is wrong: two slabs should
 * meet. So this answers in the same currency, and its reach is deliberately
 * narrow — it fires ONLY when a full-width band is on the page. Small, medium
 * and large are cards sitting in the page and keep the operator's spacing, and
 * so does every page with no band at all. */
body:has(.hcx-cta-w-full) #hc-foot,
body:has(.hcx-cta-w-full) .hc-foot{ margin-top: 0 !important; border-top: 0 !important; }
/* Centred is the shape this band is for: a headline, then the actions under it. */
#hc-page .hce-cta-align-center .hce-cta-inner{ text-align: center; align-items: center; }
#hc-page .hce-cta-align-center .hce-cta-actions{ justify-content: center; }
/* The title carries its own line breaks, so it needs room to breathe and a
   measure that does not fight them. */
#hc-page .hcx-cta-w-full .hce-cta-title{
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0 0 clamp(12px, 1.6vw, 20px);
}
/* The copy stack tightens with it, so the band reads as one thought rather than
   four widely spaced ones. */
#hc-page .hcx-cta-w-full .hce-cta-eyebrow{ margin-block-end: 6px; }
#hc-page .hcx-cta-w-full .hce-cta-subhead,
#hc-page .hcx-cta-w-full .hce-cta-body{ margin: 0 0 clamp(14px, 1.8vw, 22px); }
#hc-page .hcx-cta-w-full .hce-cta-note{ margin-block-start: 12px; }
/* SIDES — the horizontal breathing room, independent of width and height.
   `auto` keeps whatever the width chose (full bleed centres a readable measure;
   the card widths use the template's own padding). Anything else states it,
   and on a full-bleed slab it still never lets the copy run the whole monitor. */
#hc-page .hcx-cta-s-none{ padding-inline: 0; }
#hc-page .hcx-cta-s-sm{ padding-inline: max(16px, calc(50vw - 620px)); }
#hc-page .hcx-cta-s-md{ padding-inline: max(28px, calc(50vw - 520px)); }
#hc-page .hcx-cta-s-lg{ padding-inline: max(44px, calc(50vw - 430px)); }
#hc-page .hcx-cta-s-xl{ padding-inline: max(64px, calc(50vw - 340px)); }
/* THE TAB RAIL STICKS TO ITS SECTION. It already was sticky, but pinned at 24px
   from the top — which is underneath this page's fixed header, so the top tab
   sat behind the nav. Offset to clear it. Sticky is bounded by its grid, so it
   releases at the end of the section on its own; nothing needs to measure that. */
#hc-page .hce-tabs{ --hce-tab-rail-offset: calc(var(--hc-nav-h, 78px) + 18px); }
#hc-page .hce-cta-actions{ display: flex; flex-wrap: wrap; gap: 12px; }
/* Pill actions, because the band is one clear ask and a pill reads as one. */
#hc-page .hce-cta .hce-btn{ border-radius: 999px; padding-inline: clamp(20px, 2.4vw, 30px); }
/* ANIMATED HOVER. The lift and shadow are the page's own card language; the
   sheen is the button's own — a light pass that crosses once on hover, drawn as
   a pseudo element so it costs no extra markup and cannot affect the label.
   overflow:hidden keeps it inside the pill, and the whole thing is transform +
   opacity, which the compositor handles without a repaint. */
#hc-page .hce-cta .hce-btn{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s var(--hce-ease,cubic-bezier(.4,0,.2,1)),
              box-shadow .2s var(--hce-ease,cubic-bezier(.4,0,.2,1)),
              filter .2s var(--hce-ease,cubic-bezier(.4,0,.2,1));
}
#hc-page .hce-cta .hce-btn::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 20%,
              rgba(255,255,255,.42) 46%, rgba(255,255,255,.42) 54%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .62s cubic-bezier(.22,.61,.36,1);
}
#hc-page .hce-cta .hce-btn:hover{ transform: translateY(-2px); filter: brightness(1.04); }
#hc-page .hce-cta .hce-btn:hover::after{ transform: translateX(120%); }
#hc-page .hce-cta .hce-btn:active{ transform: translateY(0); transition-duration: 70ms; }
#hc-page .hce-cta .hce-btn:focus-visible{ outline: 2px solid currentColor; outline-offset: 3px; }
/* The sheen is decoration; the lift is the affordance. Motion off keeps the
   second and drops the first. */
@media (prefers-reduced-motion: reduce){
  #hc-page .hce-cta .hce-btn,
  #hc-page .hce-cta .hce-btn::after{ transition: none; }
  #hc-page .hce-cta .hce-btn:hover{ transform: none; }
  #hc-page .hce-cta .hce-btn:hover::after{ transform: translateX(-120%); }
}

/* ── Quick links, tabs — THE ORIGINAL CSS, LIFTED WHOLE ──────────────────────
   Not rewritten: copied from the enterprise sheet (hc-enterprise-ui.css) as three
   contiguous sections — Common topics, its dark-mode block, and the tabs rail —
   so the @container queries, the on-state contract and the dark-mode corrections
   all come across intact. Re-scoped from `#hc-page.hce` to `#hc-page`, because
   the restored page carries no .hce class. Nothing else changed.

   The base tokens below are the ones those rules read. Every one derives from a
   token the classic page already defines, which is how the original was built:
   tokens first, and everything that politely uses var() follows for free. */
#hc-page{
  --hce-hairline: var(--card-border, rgba(15,23,42,.09));
  --hce-border: 1px solid var(--hce-hairline);
  --hce-surface: var(--card-bg, #fff);
  --hce-surface-hover: color-mix(in srgb, var(--card-bg, #fff) 96%, var(--brand) 4%);
  --hce-surface-raise: color-mix(in srgb, var(--card-bg, #fff) 97%, #fff 3%);
  --hce-tint-strong: rgba(var(--br), .12);
  --hce-fs-body: 1rem; --hce-fs-sm: .9375rem; --hce-fs-h4: 1.0625rem;
  --hce-fw-semi: 600; --hce-lh-body: 1.6;
  --hce-s-2: .5rem; --hce-s-3: .75rem; --hce-s-4: 1rem; --hce-s-5: 1.25rem; --hce-s-6: 1.5rem;
  --hce-r-sm: 10px; --hce-r-md: 14px; --hce-r-lg: 18px;
  --hce-sh-md: 0 1px 3px rgba(15,23,42,.04), 0 8px 24px -6px rgba(15,23,42,.08);
  --hce-sh-lg: 0 2px 6px rgba(15,23,42,.04), 0 18px 48px -12px rgba(15,23,42,.12);
  --hce-t-fast: 140ms; --hce-t-base: 240ms;
  --hce-ease: cubic-bezier(.4,0,.2,1); --hce-ease-out: cubic-bezier(.16,1,.3,1);

  /* THE REST OF THE SET — the half that was missing.
     The lift above brought the rules but only part of the token block they read,
     and an undefined custom property is not "falls back to something sensible":
     `--hce-cta-surface: var(--hce-tint)` becomes guaranteed-invalid, so
     `background: var(--hce-cta-surface)` drops out entirely at computed-value
     time and whatever the theme paints underneath shows through — which is why
     the CTA stayed light in dark mode. 38 of the 42 tokens the CTA reads were
     undefined on the live page.
     Every one below derives from a classic token that already flips with the
     theme (--card-bg, --text-primary, --brand, --br), so dark mode follows for
     free rather than needing a parallel set of overrides. */
  --hce-tint: rgba(var(--br), .07);
  --hce-surface-sunk: color-mix(in srgb, var(--card-bg, #fff) 94%, var(--text-primary) 6%);
  --hce-line-strong: color-mix(in srgb, var(--text-primary) 22%, transparent);
  --hce-accent-2: #06b6d4;

  /* Brand bands carry their own ink: they are a brand-coloured surface in either
     theme, so the text on them stays light rather than following --text-primary. */
  --hce-on-brand: #fff;
  --hce-on-brand-2: rgba(255,255,255,.86);
  --hce-band-ink: #fff;
  --hce-band-ink-2: rgba(255,255,255,.84);
  --hce-band-surface: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 45%, var(--hce-accent-2)));
  --hce-band-surface-command: linear-gradient(180deg, #0d1420, #0a1018);
  --hce-band-accent-command: #7dd3fc;
  --hce-band-surface-glass: linear-gradient(135deg,
      color-mix(in srgb, var(--brand) 62%, #0b1220),
      color-mix(in srgb, var(--brand) 26%, #0b1220));

  --hce-r-xs: 8px; --hce-r-xl: 22px; --hce-r-2xl: 28px; --hce-r-pill: 999px;
  --hce-s-1: .25rem; --hce-s-7: 1.75rem; --hce-s-8: 2rem;
  --hce-s-9: 2.5rem; --hce-s-11: 3.5rem; --hce-s-12: 4rem;

  --hce-sh-xs: 0 1px 2px rgba(15,23,42,.05);
  --hce-sh-sm: 0 1px 3px rgba(15,23,42,.06), 0 4px 12px -4px rgba(15,23,42,.08);
  --hce-sh-xl: 0 4px 10px rgba(15,23,42,.05), 0 28px 70px -18px rgba(15,23,42,.20);
  --hce-sh-brand: 0 12px 34px -10px rgba(var(--br), .45);

  --hce-fs-xs: .8125rem;
  --hce-fs-h1: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem);
  --hce-fs-h3: clamp(1.25rem, 1rem + .8vw, 1.6rem);
  --hce-fs-lede: clamp(1rem, .95rem + .3vw, 1.15rem);
  --hce-fw-bold: 700;
  --hce-lh-h1: 1.15; --hce-lh-h3: 1.25; --hce-lh-relaxed: 1.75;
  --hce-ls-h1: -.02em; --hce-ls-h3: -.012em; --hce-ls-h4: -.008em; --hce-ls-body: 0;
}

/* ── Common topics ───────────────────────────────────────────────────────
   A disclosure whose body is grouped link lists rather than one answer. The
   head is a solid bar so a closed panel still reads as a control; the Q&A
   accordion above uses a hairline row, which is right for a question and wrong
   for a section. */
#hc-page .hce-topics { display: grid; gap: var(--hce-s-4); }
#hc-page .hce-topic {
  /* Declared, not defaulted inline.
     These lived as literal fallbacks on the rules below (`var(--x, #ffffff)`),
     which meant light mode was painted by a hardcoded white that no theme, no
     dark-mode override and no Colour Studio control could reach. A token that
     only exists in the dark-mode block is not a token, it is a patch.
     `--hce-surface` as the INK is deliberate: the bar is `--text-primary`, so
     the page's own surface colour is by construction its opposite, in both
     themes and under any operator palette. */
  --hce-topic-bar: var(--text-primary);
  --hce-topic-ink: var(--card-bg, #fff);
  --hce-topic-body: var(--card-bg, #fff);
  border: var(--hce-border);
  border-radius: var(--hce-r-lg);
  overflow: hidden;
  background: var(--hce-topic-body);
}
#hc-page .hce-topic-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hce-s-4);
  padding: var(--hce-s-4) var(--hce-s-5);
  cursor: pointer;
  list-style: none;
  color: var(--hce-topic-ink);
  background: var(--hce-topic-bar);
  transition: filter var(--hce-t-fast) var(--hce-ease);
}
#hc-page .hce-topic-head::-webkit-details-marker { display: none; }
#hc-page .hce-topic-head::marker { content: ""; }
#hc-page .hce-topic-head:hover { filter: brightness(1.15); }
#hc-page .hce-topic-title { font-size: var(--hce-fs-h4); font-weight: var(--hce-fw-semi); }
#hc-page .hce-topic-chev {
  flex: 0 0 auto;
  inline-size: 9px;
  block-size: 9px;
  border-block-end: 2px solid currentColor;
  border-inline-start: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--hce-t-base) var(--hce-ease-out);
}
#hc-page .hce-topic[open] .hce-topic-chev { transform: rotate(135deg); }

#hc-page .hce-topic-body { padding: 0; }
#hc-page .hce-topic-list { list-style: none; margin: 0; padding: 0; }
#hc-page .hce-topic-list li + li { border-block-start: var(--hce-border); }
#hc-page .hce-topic-link {
  display: block;
  padding: var(--hce-s-3) var(--hce-s-5);
  font-size: var(--hce-fs-sm);
  line-height: var(--hce-lh-body);
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: background-color var(--hce-t-fast) var(--hce-ease), color var(--hce-t-fast) var(--hce-ease);
}
#hc-page .hce-topic-link:hover { background: var(--hce-surface-hover); color: var(--brand-ink,var(--brand)); }

@supports (interpolate-size: allow-keywords) {
  #hc-page .hce-topic { interpolate-size: allow-keywords; }
  #hc-page .hce-topic::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--hce-t-base) var(--hce-ease-out), content-visibility var(--hce-t-base) allow-discrete;
  }
  #hc-page .hce-topic[open]::details-content { block-size: auto; }
}

@media (forced-colors: active) {
  #hc-page .hce-topic,
  #hc-page .hce-news-panel { border: 1px solid ButtonBorder; }
  #hc-page .hce-topic-head { background: Canvas; color: CanvasText; border-block-end: 1px solid ButtonBorder; }
}
@media print {
  #hc-page .hce-topic::details-content { block-size: auto; }
  #hc-page .hce-news-cols { columns: 1; }
}


/* ── Common topics: dark mode ────────────────────────────────────────────
   The bar defaulted to `--text-primary`, which light mode resolves to near-
   black (correct, and what the reference does) and dark mode re-points to
   near-WHITE. The result was white text on a white bar — the panel titles
   vanished and one panel rendered as a blank slab.

   A theme token cannot serve both: the bar wants the INK colour in light and a
   raised SURFACE in dark. So dark states it explicitly, using the same elevated
   surface the rest of the dark page uses. */
html[data-theme="dark"] #hc-page .hce-topic {
  --hce-topic-bar: var(--hce-surface-raise);
  --hce-topic-ink: var(--text-primary);
  border-color: var(--hce-hairline);
}
html[data-theme="dark"] #hc-page .hce-topic-head {
  border-block-end: 1px solid var(--hce-hairline);
}
/* An open panel earns a brand-tinted bar, so "which one am I in" survives at
   dark-mode contrast where a lightness step alone would not. */
html[data-theme="dark"] #hc-page .hce-topic[open] {
  --hce-topic-bar: var(--hce-tint-strong);
}
html[data-theme="dark"] #hc-page .hce-topic[open] .hce-topic-title { color: var(--brand-ink,var(--brand)); }


#hc-page .hce-tabs {
  /* The skin contract. A preset re-points these and nothing else. */
  --hce-tab-surface:    var(--card-bg, #fff);
  --hce-tab-ink:        var(--text-secondary);
  --hce-tab-line:       var(--hce-hairline);
  /* ACTIVE is derived from the brand, never stated as a colour: the operator
     picks a brand (or overrides it in the Colour Studio) and the active tab
     follows. A literal here would be the one thing on the page that ignored
     the palette. */
  --hce-tab-on-surface: color-mix(in srgb, var(--brand) 10%, var(--card-bg, #fff));
  --hce-tab-on-ink:     var(--text-primary);
  --hce-tab-on-accent:  var(--brand);
  --hce-tab-radius:     var(--hce-r-md);
  /* The rail and the GUTTER between the columns are proportions, not fixed
     px. The reference this design comes from separates the two columns by
     about 18% of the content width — that gutter is what makes the rail read
     as a set of tabs standing apart from their panels rather than as a second
     list crammed against them. A 32px gap turned it into two adjacent columns
     and lost the whole shape. Expressed in cqi so it holds at any width and in
     any span the operator puts the block in. */
  --hce-tab-rail-size:  26cqi;
  --hce-tab-gutter:     clamp(var(--hce-s-6), 18cqi, 16rem);

  container-type: inline-size;
}
#hc-page .hce-tabs-grid {
  display: grid;
  /* The row gap when stacked; the column gap is re-set below, so a browser
     without cqi still gets a sane single value here rather than nothing. */
  gap: var(--hce-s-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

/* Side by side once there is room for both columns; stacked below that, which
   is the only honest layout for a rail plus a panel list on a phone. */
@container (min-width: 48rem) {
  #hc-page .hce-tabs-grid {
    grid-template-columns: minmax(0, var(--hce-tab-rail-size)) minmax(0, 1fr);
    column-gap: var(--hce-tab-gutter);
  }
}
@supports not (container-type: inline-size) {
  @media (min-width: 62rem) {
    #hc-page .hce-tabs-grid {
      /* cqi is meaningless without a container, so this branch states the same
         proportions in units that do not need one. */
      grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
      column-gap: clamp(var(--hce-s-6), 12vw, 16rem);
    }
  }
}

#hc-page .hce-tabs-rail {
  display: grid;
  gap: var(--hce-s-3);
  min-inline-size: 0;
}

/* Breathing room for the scroll the rail now performs, so a panel brought into
   view stops clear of the sticky page header instead of flush under it. */
#hc-page .hce-tabpanel { scroll-margin-block: var(--hce-s-7); }

/* The rail follows you down.
   Selecting a tab now scrolls to its panel, and with panels independent the
   column can run several screens; a static rail would be off-screen by the time
   you arrived, so switching tabs would mean scrolling back up to find them.
   Only on the side-by-side layout — stuck to the top of a phone it would eat
   the reading area it is supposed to serve.
   `align-items: start` on the grid is load-bearing here: a stretched grid item
   is full-height, and a full-height item has nothing left to stick within. */
@container (min-width: 48rem) {
  #hc-page .hce-tabs-rail {
    position: sticky;
    inset-block-start: var(--hce-tab-rail-offset, var(--hce-s-6));
    align-self: start;
    /* A rail with more tabs than fit the viewport scrolls inside itself rather
       than being clipped by the sticky box. */
    max-block-size: calc(100vh - (var(--hce-tab-rail-offset, var(--hce-s-6)) * 2));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

#hc-page .hce-tab {
  display: flex;
  align-items: center;
  gap: var(--hce-s-3);
  min-inline-size: 0;
  padding: var(--hce-s-4);
  background: var(--hce-tab-surface);
  border: 1px solid var(--hce-tab-line);
  border-radius: var(--hce-tab-radius);
  color: var(--text-secondary);
  font-size: var(--hce-fs-body);
  font-weight: var(--hce-fw-semi);
  text-decoration: none;
  transition: background var(--hce-t-fast) var(--hce-ease),
              border-color var(--hce-t-fast) var(--hce-ease),
              color var(--hce-t-fast) var(--hce-ease);
}
#hc-page .hce-tab-label {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
/* HOVER IS NOT ACTIVE. Hover was borrowing the accent border, which is the
   active tab's own signal — so pointing at a tab made it look like the open one
   and the rail appeared to have two. Hover is now a surface change only: the
   accent edge and the tint belong to `is-on`, and `is-on` moves on CLICK. */
#hc-page .hce-tab:hover {
  color: var(--text-primary);
  background: var(--hce-surface-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* The lift needs transform in the transition, or the tab jumps rather than
   rises. The active tab does NOT lift: it is where you already are, and a
   raised active row makes the rail look like it has two states at once. */
#hc-page .hce-tab {
  transition: background var(--hce-t-fast) var(--hce-ease),
              border-color var(--hce-t-fast) var(--hce-ease),
              color var(--hce-t-fast) var(--hce-ease),
              box-shadow var(--hce-t-base) var(--hce-ease),
              transform var(--hce-t-base) var(--hce-ease);
}
#hc-page .hce-tab.is-on:hover { transform: none; }

/* THE DROPDOWNS LIFT TOO. They are cards on this page, and every other card
   here answers the pointer — a bar that does nothing under the cursor reads as
   a heading rather than a control. */
#hc-page .hce-topic {
  /* A RESTING SHADOW, so the hover has something to grow FROM. Transitioning
     out of `box-shadow: none` interpolates through transparent — measured
     mid-hover as `rgba(0,0,0,0) 0 0 0 0` — which is why the lift was technically
     firing and visually absent. */
  box-shadow: var(--hce-sh-md);
  transition: box-shadow var(--hce-t-base) var(--hce-ease),
              transform var(--hce-t-base) var(--hce-ease);
}
/* `[open]` used to sit AFTER the hover rule at equal specificity, so an open
   panel could never show a hover state at all. Both states are spelled out
   here, in one place, in the order they should win. */
#hc-page .hce-topic[open] { box-shadow: var(--hce-sh-lg); }
#hc-page .hce-topic:hover,
#hc-page .hce-topic[open]:hover { box-shadow: var(--shadow-lg, var(--hce-sh-xl, var(--hce-sh-lg))); }
#hc-page .hce-topic:not([open]):hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  #hc-page .hce-tab, #hc-page .hce-topic { transition: none; }
  #hc-page .hce-tab:hover, #hc-page .hce-topic:not([open]):hover { transform: none; }
}

/* THE ICON USES THE PAGE'S GENERAL ICON STYLING — the same chip the category
   tiles are drawn with (brand tint, brand hairline, the shared radius), just
   sized for a rail row. Built from the same tokens, so the workspace's brand
   and its icon-tint setting reach these without a second control. */
#hc-page .hce-tab-ico {
  flex: 0 0 auto;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-10);
  border: 1px solid var(--brand-15);
  color: var(--brand-ink,var(--brand));
  font-size: 15px;
}
#hc-page .hce-tab-ico i { font-size: 15px; line-height: 1; }
/* The sub-heading inside a panel: a heading, not a link — the design sets it
   apart from the list beneath rather than dressing it as another row. */
#hc-page .hce-topic-group{
  padding: var(--hce-s-4) var(--hce-s-5) var(--hce-s-3);
  font-size: var(--hce-fs-h4); font-weight: 700; color: var(--text-primary);
}
#hc-page .hce-topic-group + .hce-topic-list{ border-top: var(--hce-border); }
#hc-page .hce-topic-empty{ padding: var(--hce-s-5); color: var(--text-muted); font-size: var(--hce-fs-sm); }
#hc-page .hce-topic-list + .hce-topic-group{ border-top: var(--hce-border); }
#hc-page .hce-tab-ico .hc-ico-img, #hc-page .hce-tab-ico svg { inline-size: 17px; block-size: 17px; }
/* The bare icon style strips the chip everywhere else on the page; it does the
   same here rather than leaving one component with a tile nobody asked for. */
#hc-page.hc-ico-bare .hce-tab-ico { background: none; border-color: transparent; }
/* The active tab. A bar down its leading edge rather than a full border swap:
   it reads as "this one" at a glance without the tab changing size and shifting
   the ones below it by a pixel.

   Drawn as a real ::before and NOT as `box-shadow: inset`, because a shadow is
   one indivisible value that no Colour Studio control can address — the marker
   would have stayed locked to the brand while every other part of the section
   became configurable. A pseudo element has a `background`, which is exactly
   what `hc_ds_rule()` emits. */
#hc-page .hce-tab { position: relative; }
#hc-page .hce-tab.is-on {
  background: var(--hce-tab-on-surface);
  border-color: color-mix(in srgb, var(--hce-tab-on-accent) 32%, var(--hce-tab-line));
  color: var(--text-primary);
}
#hc-page .hce-tab.is-on::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background: var(--hce-tab-on-accent);
  border-start-start-radius: var(--hce-tab-radius);
  border-end-start-radius: var(--hce-tab-radius);
}
#hc-page .hce-tab:focus-visible {
  outline: 2px solid var(--hce-tab-on-accent);
  outline-offset: 2px;
}

#hc-page .hce-tabs-panels { min-inline-size: 0; }

/* In dark mode the tint has to be mixed into the DARK surface, or the active
   tab is a pale patch on a dark rail — the one element that did not follow the
   theme. The rest of the contract already resolves through theme tokens. */
html[data-theme="dark"] #hc-page .hce-tabs {
  --hce-tab-on-surface: color-mix(in srgb, var(--brand) 22%, var(--hc-d-card, var(--card-bg, #fff)));
}

/* ── Category cards ─────────────────────────────────────────────────────────── */
.hc-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:52px}
.hc-cat{display:block;background:var(--card-bg);border:1.5px solid var(--card-border);
  border-radius:16px;padding:24px;transition:all .22s var(--ease);color:inherit;position:relative;overflow:hidden}