/* VERSION: v29-20261022 */
@charset "UTF-8";
/* =================================================================
   Hilti CrewCenter Help Center — Theme Style
   -----------------------------------------------------------------
   Zendesk theme CSS. Variables prefixed with $ are substituted at
   render time from theme settings (manifest.json). The rest of the
   file is the restrained Hilti aesthetic applied across every page.
   -----------------------------------------------------------------
   File map:
     1. Hilti corporate fonts
     2. Design tokens (light + dark)
     3. Reset
     4. Shared header (brand lockup + theme toggle + lang + login + submit + ask AI)
     5. Breadcrumb + mini AI bar (article, submit-request, inner pages)
     6. Home page (hero, recent, article search + autocomplete, topics, help)
     7. Article page (3-column layout, callouts, table, feedback widget)
     8. Submit-a-request page (New_request_page)
     9. Shared bottom article-search bar
    10. White footer (back-to-account, right-group, socials, copyright)
    11. Fallback styling for other Zendesk pages (category, section,
        search results, requests, user_profile, subscriptions, error,
        community_*) so they inherit the Hilti look pending full redesign
    12. Responsive breakpoints
    13. Reduced motion
   ================================================================= */


/* ============================================================
   1. HILTI CORPORATE FONTS
   Files sit in /assets/ next to this stylesheet and are served
   from the same Zendesk theme_assets path, so relative URLs
   resolve correctly without a setting variable.
   Family name "Hilti" is used by every text rule below.
   ============================================================ */
/* Only two upright weights: Roman (regular) and Bold.
   The "Extended" cuts are WIDER glyphs, not weight variants — mapping
   them to 500 made every medium-weight heading look chunky. We keep
   them available under 'Hilti Display' for a possible display-only
   use later, but no theme rule targets that family. */
@font-face {
  font-family: 'Hilti';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('HiltiSmallRoman.woff') format('woff');
}
@font-face {
  font-family: 'Hilti';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('HiltiSmallBold.woff') format('woff');
}
@font-face {
  font-family: 'Hilti Display';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('HiltiSmallExtended.woff') format('woff');
}
@font-face {
  font-family: 'Hilti Display';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('HiltiSmallHeavyExtended.woff') format('woff');
}
/* Kill browser-synthesized "fake bold" on any weight 500/600 request
   — those should resolve to Roman (400), not a bolder synth of it. */
body, body * {
  font-synthesis-weight: none;
}


/* ============================================================
   2. DESIGN TOKENS
   Primary brand colour pulls from rgba(210, 5, 30, 1) so a Zendesk
   admin can still override it. Other tokens are design-system.
   ============================================================ */
:root {
  /* Admin-configurable brand (Zendesk setting) */
  --color-primary: rgba(210, 5, 30, 1);
  --color-primary-inverse: rgba(255, 255, 255, 1);
  --font-heading: Helvetica, Arial, sans-serif;
  --font-text: Helvetica, Arial, sans-serif;

  /* Hilti palette (fixed) */
  --hilti-red: #D2051E;
  --hilti-red-700: #A6041A;
  --cream: #F3EFE7;
  --paper: #FFFFFF;
  --ink: #15161A;
  --ink-2: #353840;
  --mute: #6B6E78;
  --mute-2: #9A9DA5;
  --rule: #D9D3C2;
  --rule-2: #ECE7DB;

  --ok: #0F7F42;
  --ok-50: #E6F4EC;
  --warn: #B35A00;
  --warn-50: #FBEEDD;
  --info: #0057B8;
  --info-50: #E3EEFB;

  /* Semantic surface tokens */
  --bg: var(--paper);
  --fg: var(--ink);
  --surface: var(--paper);
  --surface-2: var(--cream);
  --border: var(--rule-2);
  --muted: var(--mute);
  --muted-strong: var(--ink-2);

  /* Both tokens target the same registered 'Hilti' family. The
     Arial Narrow fallback that lived here before was pulling in a
     condensed Arial when Hilti didn't load, hence the "compressed
     horizontally" look. */
  --font-display: 'Hilti', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Hilti', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --max: 1180px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Dark palette — flipped via OS preference OR explicit toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1013; --fg: #ECEDEF;
    --surface: #171920; --surface-2: #1B1D25;
    --border: #2B2E38;
    --muted: #8C919C; --muted-strong: #C6CAD1;
    --cream: #1B1D25; --rule: #2B2E38; --rule-2: #22252F;
    --ink: #ECEDEF; --ink-2: #C6CAD1; --mute: #8C919C;
    --paper: #171920;
    --ok-50: #0D241A;
    --warn-50: #2A1D0A;
    --info-50: #0D1D33;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1013; --fg: #ECEDEF;
  --surface: #171920; --surface-2: #1B1D25;
  --border: #2B2E38;
  --muted: #8C919C; --muted-strong: #C6CAD1;
  --cream: #1B1D25; --rule: #2B2E38; --rule-2: #22252F;
  --ink: #ECEDEF; --ink-2: #C6CAD1; --mute: #8C919C;
  --paper: #171920;
  --ok-50: #0D241A;
  --warn-50: #2A1D0A;
  --info-50: #0D1D33;
  color-scheme: dark;
}


/* ============================================================
   3. RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.55;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-width: 0;
}
main { display: block; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--hilti-red); outline-offset: 2px;
}
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; }
p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.visually-hidden { position: absolute !important; clip: rect(0,0,0,0) !important; width:1px; height:1px; overflow:hidden; }

/* Safe-area paint behind the sticky header on notched devices */
body::before {
  content: ""; position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px); z-index: 100;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}


/* ============================================================
   4. HEADER (shared across every page via header.hbs)
   ============================================================ */
.cc-topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.cc-topbar-inner {
  max-width: var(--max); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter-right);
  padding-block: 14px;
  display: flex; align-items: center; gap: 20px; min-width: 0;
}
.cc-brand { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 0 1 auto; }
.cc-brand-lockup { height: 22px; width: auto; max-width: 100%; }
.cc-product-icon { width: 18px; height: 18px; border-radius: 2px; display: inline-block; vertical-align: text-bottom; flex: 0 0 auto; }

.cc-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.cc-topbar-link {
  padding: 8px 14px; font-size: 13px; color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.cc-topbar-link:hover { color: var(--hilti-red); }
.cc-topbar-link svg { width: 14px; height: 14px; }

.cc-theme-toggle {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.cc-theme-toggle:hover { color: var(--hilti-red); }
.cc-theme-toggle svg { width: 16px; height: 16px; }
.cc-theme-toggle .ico-sun { display: none; }
.cc-theme-toggle .ico-moon { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cc-theme-toggle .ico-sun { display: inline; }
  :root:not([data-theme="light"]) .cc-theme-toggle .ico-moon { display: none; }
}
:root[data-theme="dark"] .cc-theme-toggle .ico-sun { display: inline; }
:root[data-theme="dark"] .cc-theme-toggle .ico-moon { display: none; }
:root[data-theme="light"] .cc-theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .cc-theme-toggle .ico-moon { display: inline; }

.cc-hamburger {
  border: 1px solid var(--border);
  width: 36px; height: 36px; color: var(--ink);
  display: none; align-items: center; justify-content: center;
}


/* ============================================================
   5. BREADCRUMB + MINI AI BAR (article, submit-request, inner pages)
   ============================================================ */
.cc-search-strip {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.cc-search-strip-inner {
  max-width: var(--max); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter-right);
  padding-block: 12px;
  display: flex; gap: 12px; align-items: center; min-width: 0;
}
.cc-breadcrumb {
  font-size: 13px; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-breadcrumb a { color: var(--muted); }
.cc-breadcrumb a:hover { color: var(--ink); }
.cc-breadcrumb .sep { opacity: 0.5; }
.cc-breadcrumb .current { color: var(--ink); }

.cc-ask-mini {
  margin-left: auto;
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--rule); min-width: 220px; flex: 0 1 300px;
  background: var(--surface);
}
.cc-ask-mini input {
  flex: 1 1 auto; min-width: 0; border: none; background: transparent;
  color: var(--ink); font-family: inherit; font-size: 13px; padding: 7px 12px;
}
.cc-ask-mini input::placeholder { color: var(--mute-2); }
.cc-ask-mini input:focus { outline: none; }
.cc-ask-mini button {
  background: var(--hilti-red); color: #fff;
  padding: 0 12px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700;
}
.cc-ask-mini button:hover { background: var(--hilti-red-700); }
.cc-ask-mini button svg { width: 12px; height: 12px; }


/* ============================================================
   6. HOME PAGE
   ============================================================ */

/* Hero */
.cc-hero { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cc-hero-inner {
  max-width: var(--max); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter-right);
  padding-block: 54px 44px;
  text-align: center;
}
.cc-hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 36px);
  color: var(--hilti-red);
  margin-bottom: 10px;
  letter-spacing: -0.005em; line-height: 1.1;
  text-wrap: balance;
}
.cc-hero-sub {
  font-size: 15px; color: var(--muted-strong);
  margin: 0 auto 22px; max-width: 480px;
  text-wrap: balance;
}
.cc-ai-row {
  display: flex;
  max-width: 620px; margin: 0 auto;
  background: var(--paper); border: 1px solid var(--rule);
}
.cc-ai-row input {
  flex: 1 1 auto; min-width: 0; border: none; background: transparent;
  color: var(--ink); font-family: inherit; font-size: 15px;
  padding: 13px 18px;
}
.cc-ai-row input::placeholder { color: var(--mute-2); }
.cc-ai-row input:focus { outline: none; }
.cc-ai-row button {
  background: var(--hilti-red); color: #fff;
  padding: 0 20px; font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; gap: 7px;
}
.cc-ai-row button:hover { background: var(--hilti-red-700); }
.cc-ai-row button svg { width: 14px; height: 14px; }

/* 4 newest articles strip */
.cc-recent {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.cc-recent-inner {
  max-width: var(--max); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter-right);
  padding-block: 18px 20px;
}
.cc-recent-head {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted); font-weight: 700;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  display: flex; align-items: baseline; gap: 10px;
}
.cc-recent-head .sub {
  font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--mute-2); font-size: 11px;
}
.cc-recent-list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.cc-recent-item { min-width: 0; }
.cc-recent-item a {
  font-size: 13px; color: var(--ink); font-weight: 600;
  line-height: 1.35; overflow-wrap: break-word; word-break: break-word;
}
.cc-recent-item a:hover { color: var(--hilti-red); }
.cc-recent-item .meta {
  display: block; font-size: 11px; color: var(--muted); margin-top: 3px;
}
.cc-recent-item .meta .sep { opacity: 0.4; margin: 0 4px; }

/* Article search bar + autocomplete (home) */
.cc-article-search { background: var(--surface); }
.cc-article-search-inner {
  max-width: var(--max); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter-right);
  padding-block: 24px 32px;
  display: flex; justify-content: center;
}
.cc-search-shell { position: relative; width: 100%; max-width: 620px; }
.cc-search-row {
  display: flex; width: 100%;
  background: var(--surface); border: 1px solid var(--rule);
}
.cc-search-row input {
  flex: 1 1 auto; min-width: 0; border: none; background: transparent;
  color: var(--ink); font-family: inherit; font-size: 15px;
  padding: 12px 16px;
}
.cc-search-row input::placeholder { color: var(--mute-2); }
.cc-search-row input:focus { outline: none; }
.cc-search-row button {
  color: var(--muted);
  padding: 0 14px;
}
.cc-search-row button:hover { color: var(--hilti-red); }
.cc-search-row button svg { width: 16px; height: 16px; }

.cc-autocomplete {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 8px 16px rgba(21, 22, 26, 0.08);
  z-index: 10;
}
.cc-autocomplete-head {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted); font-weight: 700;
  padding: 10px 16px 6px;
}
.cc-autocomplete ul { }
.cc-autocomplete li { border-top: 1px solid var(--border); }
.cc-autocomplete li:first-child { border-top: none; }
.cc-autocomplete a {
  display: block; padding: 10px 16px; color: var(--ink);
  font-size: 13.5px; line-height: 1.3;
}
.cc-autocomplete a:hover,
.cc-autocomplete li.active a { background: var(--surface-2); color: var(--hilti-red); }
.cc-autocomplete .ac-meta { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.cc-autocomplete .ac-match { background: rgba(210, 5, 30, 0.15); padding: 0 2px; }
.cc-autocomplete-foot {
  padding: 8px 16px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--muted);
  display: flex; align-items: center; justify-content: space-between;
}
.cc-autocomplete-foot a { color: var(--hilti-red); font-weight: 700; }

/* 16-category topics grid */
.cc-topics { background: var(--surface); }
.cc-topics-head {
  max-width: var(--max); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter-right);
  padding-block: 20px 18px;
}
.cc-topics-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; color: var(--ink); letter-spacing: -0.005em;
}
.cc-topics-head .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }

.cc-cat-grid {
  max-width: var(--max); margin: 0 auto 56px;
  padding-left: var(--gutter); padding-right: var(--gutter-right);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.cc-cat-card {
  background: var(--surface); border: 1px solid var(--border);
  padding: 18px 20px; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cc-cat-card:hover { border-color: var(--ink); }
.cc-cat-icon { width: 26px; height: 26px; color: var(--ink); }
.cc-cat-icon svg { width: 26px; height: 26px; }
.cc-cat-card h3 {
  font-family: var(--font-sans); font-size: 15.5px; font-weight: 700;
  color: var(--ink); line-height: 1.25;
  overflow-wrap: break-word; min-width: 0;
}
.cc-cat-card p {
  color: var(--muted-strong); font-size: 13.5px; line-height: 1.5;
  min-width: 0;
}
.cc-cat-card .cat-meta {
  margin-top: auto; padding-top: 8px;
  font-size: 11.5px; color: var(--muted);
}
.cc-cat-card .cat-meta .sep { opacity: 0.5; margin: 0 6px; }

/* Still-need-help block (home) */
.cc-help { background: var(--surface-2); border-top: 1px solid var(--border); }
.cc-help-inner {
  max-width: var(--max); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter-right);
  padding-block: 40px; text-align: center;
}
.cc-help h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; margin-bottom: 8px; color: var(--ink);
  letter-spacing: -0.005em;
}
.cc-help p {
  color: var(--muted-strong); margin: 0 auto 18px;
  font-size: 14.5px; max-width: 520px;
}
.cc-help .actions {
  display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.cc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; font-weight: 700; font-size: 13.5px;
  border: 1px solid var(--ink); color: var(--ink); background: transparent;
}
.cc-btn:hover { background: var(--ink); color: var(--surface-2); }
.cc-btn.primary {
  background: var(--hilti-red); color: #fff; border-color: var(--hilti-red);
}
.cc-btn.primary:hover { background: var(--hilti-red-700); border-color: var(--hilti-red-700); }
.cc-btn svg { width: 14px; height: 14px; }


/* ============================================================
   7. ARTICLE PAGE
   ============================================================ */

.cc-article-wrap {
  max-width: var(--max); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter-right);
  padding-block: 32px 48px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 200px;
  gap: 40px;
  align-items: start;
}

/* Left: Articles in this section */
.cc-section-nav {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 72px);
  font-size: 13px; min-width: 0;
}
.cc-section-nav h4 {
  margin-bottom: 10px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted); font-weight: 700;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.cc-section-nav .section-title { font-size: 13px; color: var(--ink-2); font-weight: 700; margin-bottom: 8px; }
.cc-section-nav ul {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 20px;
}
.cc-section-nav li a {
  display: block; padding: 6px 10px 6px 12px;
  color: var(--muted-strong); font-size: 13px; line-height: 1.4;
  border-left: 2px solid transparent;
}
.cc-section-nav li a:hover { color: var(--ink); background: var(--surface-2); }
.cc-section-nav li.active a,
.cc-section-nav li a[aria-current="true"] {
  color: var(--hilti-red); border-left-color: var(--hilti-red); font-weight: 700;
}

/* Center: article body */
.cc-article { min-width: 0; }
.cc-article-head { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.cc-article-head h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 32px); color: var(--ink);
  margin-bottom: 12px; letter-spacing: -0.005em; line-height: 1.2;
  text-wrap: balance;
}
.cc-article-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}
.cc-article-meta .sep { opacity: 0.5; }
.cc-article-meta .pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; font-size: 11.5px;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border);
  font-weight: 500;
}
.cc-article-meta .share {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink);
  padding: 4px 8px; font-size: 12.5px; font-weight: 600;
}
.cc-article-meta .share:hover { color: var(--hilti-red); }
.cc-article-meta .share svg { width: 12px; height: 12px; }

/* Mobile fallback for the on-this-page TOC */
.cc-toc-inline {
  display: none;
  border: 1px solid var(--border); padding: 12px 16px; margin-bottom: 24px;
  background: var(--surface-2);
}
.cc-toc-inline summary {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; list-style: none;
}
.cc-toc-inline summary::-webkit-details-marker { display: none; }
.cc-toc-inline ol { margin-top: 10px; padding-left: 20px; font-size: 13px; }
.cc-toc-inline a { color: var(--ink-2); }
.cc-toc-inline a:hover { color: var(--hilti-red); }

/* Body typography */
.cc-article-body h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; color: var(--ink); margin: 32px 0 12px;
  letter-spacing: -0.005em; line-height: 1.25;
}
.cc-article-body h2:first-child { margin-top: 0; }
.cc-article-body h3 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 16px; color: var(--ink); margin: 24px 0 8px;
}
.cc-article-body p { margin-bottom: 14px; color: var(--ink-2); max-width: 68ch; }
.cc-article-body ul, .cc-article-body ol {
  margin-bottom: 14px; padding-left: 22px; color: var(--ink-2); max-width: 68ch;
  list-style: initial;
}
.cc-article-body ol { list-style: decimal; }
.cc-article-body li { margin: 4px 0; }
.cc-article-body a { color: var(--hilti-red); border-bottom: 1px solid rgba(210, 5, 30, 0.3); }
.cc-article-body a:hover { border-bottom-color: var(--hilti-red); }
.cc-article-body strong { font-weight: 700; color: var(--ink); }
.cc-article-body code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em; background: var(--surface-2); border: 1px solid var(--border);
  padding: 1px 6px;
}

/* Callouts */
.cc-callout {
  margin: 18px 0; padding: 12px 16px;
  border-left: 3px solid var(--muted);
  background: var(--surface-2); font-size: 14px;
}
.cc-callout .label {
  display: block; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-strong); font-weight: 700; margin-bottom: 4px;
}
.cc-callout.tip { border-left-color: var(--hilti-red); }
.cc-callout.tip .label { color: var(--hilti-red); }
.cc-callout.warn { border-left-color: var(--warn); background: var(--warn-50); }
.cc-callout.warn .label { color: var(--warn); }
.cc-callout.note { border-left-color: var(--info); background: var(--info-50); }
.cc-callout.note .label { color: var(--info); }

/* Overflow-safe tables */
.cc-article-body .table-wrap,
.cc-article-body table.wrap {
  overflow-x: auto; margin: 18px 0;
  border: 1px solid var(--border);
}
.cc-article-body table {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
  min-width: 540px;
}
.cc-article-body th, .cc-article-body td {
  padding: 10px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border);
  overflow-wrap: break-word; word-break: break-word;
}
.cc-article-body th {
  background: var(--surface-2); font-weight: 700; color: var(--ink);
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
}
.cc-article-body table code { white-space: nowrap; }

/* Prev / Next */
.cc-prev-next {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--border);
}
.cc-prev-next a { min-width: 0; }
.cc-prev-next .pn-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); font-weight: 700; margin-bottom: 4px;
}
.cc-prev-next .pn-title { font-size: 14px; color: var(--ink); font-weight: 600; line-height: 1.3; }
.cc-prev-next a:hover .pn-title { color: var(--hilti-red); }

/* Feedback widget (ON!Track pattern, collapsible) */
.cc-feedback-widget { margin-top: 28px; }
.cc-feedback-widget details {
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 12px 16px;
}
.cc-feedback-widget summary {
  font-size: 13.5px; color: var(--ink-2);
  cursor: pointer; display: flex; align-items: center; gap: 10px; list-style: none;
}
.cc-feedback-widget summary::-webkit-details-marker { display: none; }
.cc-feedback-widget summary::after {
  content: ""; margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); flex: 0 0 auto;
}
.cc-feedback-widget details[open] summary::after { transform: rotate(-135deg); }
.cc-feedback-widget summary a { color: var(--ink); border-bottom: 1px solid var(--rule); }

.cc-feedback-body { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.cc-feedback-body h3 { font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--ink); }
.cc-feedback-body p { color: var(--muted-strong); font-size: 13.5px; }
.cc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cc-field label { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.cc-field label .req { color: var(--hilti-red); margin-left: 2px; }
.cc-field textarea, .cc-field input, .cc-field select {
  font-family: inherit; font-size: 14px; color: var(--ink);
  padding: 9px 11px; border: 1px solid var(--border); background: var(--surface);
}
.cc-field textarea:focus, .cc-field input:focus, .cc-field select:focus {
  outline: none; border-color: var(--hilti-red);
}
.cc-field textarea { min-height: 90px; resize: vertical; }
.cc-feedback-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--muted-strong); }
.cc-feedback-check input { margin-top: 3px; accent-color: var(--hilti-red); }
.cc-feedback-actions { display: flex; gap: 10px; }
.cc-btn-primary {
  background: var(--hilti-red); color: #fff;
  padding: 9px 16px; font-weight: 700; font-size: 13px;
}
.cc-btn-primary:hover { background: var(--hilti-red-700); }
.cc-btn-plain {
  background: transparent; color: var(--ink); border: 1px solid var(--border);
  padding: 9px 16px; font-weight: 500; font-size: 13px;
}
.cc-btn-plain:hover { background: var(--surface-2); }

/* Was-this-helpful (Zendesk standard yes/no) */
.cc-helpful {
  margin-top: 24px; padding: 16px 20px; border: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  flex-wrap: wrap; background: var(--surface);
}
.cc-helpful h4 { font-family: var(--font-sans); font-size: 14.5px; font-weight: 700; color: var(--ink); }
.cc-helpful .count { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cc-helpful .vote { display: inline-flex; gap: 8px; }
.cc-helpful .vote button {
  background: var(--surface); border: 1px solid var(--border); color: var(--ink);
  padding: 7px 16px; font-weight: 700; font-size: 13px;
}
.cc-helpful .vote button:hover { border-color: var(--ink); }
.cc-helpful .vote button.active { background: var(--hilti-red); border-color: var(--hilti-red); color: #fff; }

/* Related articles */
.cc-related { margin-top: 32px; }
.cc-related h4 {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 12px;
}
.cc-related ul { display: flex; flex-direction: column; }
.cc-related li { border-bottom: 1px solid var(--border); }
.cc-related a { display: block; padding: 10px 0; font-size: 14px; color: var(--ink); }
.cc-related a:hover { color: var(--hilti-red); }

/* Right: on-this-page TOC */
.cc-on-this-page {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 72px);
  font-size: 13px; min-width: 0;
}
.cc-on-this-page h4 {
  margin-bottom: 10px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted); font-weight: 700;
}
.cc-on-this-page ul { display: flex; flex-direction: column; gap: 2px; }
.cc-on-this-page a {
  display: block; padding: 5px 10px;
  color: var(--muted-strong); font-size: 12.5px; line-height: 1.4;
  border-left: 2px solid transparent;
}
.cc-on-this-page a:hover { color: var(--ink); background: var(--surface-2); }
.cc-on-this-page li.active a { color: var(--hilti-red); border-left-color: var(--hilti-red); font-weight: 700; }


/* ============================================================
   8. SUBMIT A REQUEST (New_request_page)
   ============================================================ */

.cc-page-container {
  max-width: var(--max); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter-right);
  padding-block: 32px 48px;
  color: var(--ink-2);
}
.cc-request-head { margin-bottom: 24px; }
.cc-request-head h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 32px); color: var(--ink);
  letter-spacing: -0.005em; line-height: 1.2;
}
.cc-follow-up { margin-top: 8px; font-size: 14px; color: var(--muted); }

.cc-hint-visible { color: var(--ink-2); font-size: 14.5px; margin-bottom: 12px; }
.cc-hint-visible:empty { display: none; }

.cc-email-disclaimer {
  color: var(--muted-strong); font-size: 13.5px; margin-bottom: 24px;
  padding: 10px 14px; border-left: 3px solid var(--border); background: var(--surface-2);
}

/* Container Zendesk's request_form helper renders into — we style
   whatever Zendesk gives us so the form matches the rest of the site */
.cc-request-form,
.cc-request-form .form-field,
.cc-request-form fieldset {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 780px; min-width: 0;
}
.cc-request-form fieldset { border: none; padding: 0; margin: 0; }
.cc-request-form .form-field {
  display: flex; flex-direction: column; gap: 6px;
}
.cc-request-form label,
.cc-request-form .form-field label {
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.cc-request-form input[type="text"],
.cc-request-form input[type="email"],
.cc-request-form input[type="url"],
.cc-request-form select,
.cc-request-form textarea {
  font-family: inherit; font-size: 14px; color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--border); background: var(--surface);
  width: 100%; min-width: 0;
}
.cc-request-form input:focus,
.cc-request-form select:focus,
.cc-request-form textarea:focus { outline: none; border-color: var(--hilti-red); }
.cc-request-form textarea { min-height: 160px; resize: vertical; }
.cc-request-form button[type="submit"] {
  background: var(--hilti-red); color: #fff;
  padding: 10px 22px; font-weight: 700; font-size: 14px;
  align-self: flex-start;
}
.cc-request-form button[type="submit"]:hover { background: var(--hilti-red-700); }


/* ============================================================
   9. SHARED BOTTOM ARTICLE SEARCH
   ============================================================ */

.cc-bottom-search {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cc-bottom-search-inner {
  max-width: var(--max); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter-right);
  padding-block: 32px;
  text-align: center;
}
.cc-bottom-search h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; margin-bottom: 14px; color: var(--ink);
  letter-spacing: -0.005em;
}


/* ============================================================
   10. FOOTER (white, back-to-account on left, website+socials right)
   ============================================================ */

footer, .cc-footer {
  background: var(--surface); color: var(--ink-2);
  border-top: 1px solid var(--border);
  padding-block: 32px 20px;
}
.cc-footer-inner {
  max-width: var(--max); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter-right);
  display: flex; flex-direction: column; gap: 20px;
}
.cc-back-to-account {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); font-size: 14px; font-weight: 700;
}
.cc-back-to-account:hover { color: var(--hilti-red); }
.cc-back-to-account .back-icon {
  width: 28px; height: 28px; border-radius: 3px;
  flex: 0 0 auto;
}
.cc-footer-nav {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.cc-footer-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 18px;
}
.cc-footer-nav .nav-link {
  color: var(--ink); font-size: 13px; font-weight: 600;
  border-bottom: 1px solid var(--rule); padding-bottom: 2px;
}
.cc-footer-nav .nav-link:hover { color: var(--hilti-red); border-bottom-color: var(--hilti-red); }
.cc-footer-social { display: flex; gap: 8px; }
.cc-footer-social a {
  width: 30px; height: 30px; background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2);
}
.cc-footer-social a:hover { background: var(--hilti-red); color: #fff; }
.cc-footer-social a svg { width: 13px; height: 13px; }
.cc-footer-bottom {
  max-width: var(--max); margin: 16px auto 0;
  padding-left: var(--gutter); padding-right: var(--gutter-right); padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--muted);
}


/* ============================================================
   11. FALLBACK STYLING for Zendesk pages we haven't fully
       redesigned yet (category, section, search results,
       request/requests, user_profile, subscriptions, error,
       community_*). They render inside <main class="cc-fallback">
       so they inherit the look while retaining the Zenplates
       markup that drives their content.
   ============================================================ */

.cc-fallback {
  max-width: var(--max); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter-right);
  padding-block: 32px 48px;
  color: var(--ink-2);
  min-width: 0;
}
.cc-fallback h1, .cc-fallback .title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 32px); color: var(--ink);
  margin-bottom: 16px;
  letter-spacing: -0.005em; line-height: 1.2;
}
.cc-fallback h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; color: var(--ink); margin: 28px 0 12px;
  letter-spacing: -0.005em;
}
.cc-fallback h3 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 16px; color: var(--ink); margin: 20px 0 8px;
}
.cc-fallback p { margin-bottom: 14px; color: var(--ink-2); max-width: 68ch; }
.cc-fallback a:not(.cc-btn):not(.nav-link) {
  color: var(--ink);               /* was red — turned every category section/article link red */
  text-decoration: none;
}
.cc-fallback a:not(.cc-btn):not(.nav-link):hover {
  color: var(--hilti-red);
  text-decoration: underline;
}
.cc-fallback ul, .cc-fallback ol {
  margin-bottom: 14px; padding-left: 22px; color: var(--ink-2);
  list-style: initial;
}
.cc-fallback ol { list-style: decimal; }
.cc-fallback li { margin: 4px 0; }
.cc-fallback hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.cc-fallback input, .cc-fallback select, .cc-fallback textarea {
  font-family: inherit; font-size: 14px; color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--border); background: var(--surface);
  min-width: 0;
}
.cc-fallback input:focus, .cc-fallback select:focus, .cc-fallback textarea:focus {
  outline: none; border-color: var(--hilti-red);
}
.cc-fallback button, .cc-fallback input[type="submit"] {
  background: var(--hilti-red); color: #fff;
  padding: 10px 20px; font-weight: 700; font-size: 14px; border: none;
}
.cc-fallback button:hover, .cc-fallback input[type="submit"]:hover { background: var(--hilti-red-700); }
.cc-fallback .breadcrumbs,
.cc-fallback nav.breadcrumbs {
  font-size: 13px; color: var(--muted); margin-bottom: 20px;
}
.cc-fallback .breadcrumbs a { color: var(--muted); }
.cc-fallback .breadcrumbs a:hover { color: var(--ink); }
.cc-fallback table {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
  margin: 18px 0; border: 1px solid var(--border);
}
.cc-fallback th, .cc-fallback td {
  padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border);
  overflow-wrap: break-word;
}
.cc-fallback th { background: var(--surface-2); font-weight: 700; color: var(--ink); }


/* ============================================================
   12. RESPONSIVE
   ============================================================ */

@media (max-width: 1040px) {
  .cc-recent-list { grid-template-columns: repeat(2, 1fr); }
  .cc-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cc-article-wrap { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
  .cc-on-this-page { display: none; }
  .cc-toc-inline { display: block; }
}
@media (max-width: 760px) {
  .cc-article-wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 20px 36px; }
  .cc-section-nav { position: static; }
  .cc-prev-next { grid-template-columns: 1fr; }
  .cc-hero-inner { padding-block: 40px 32px; }
  .cc-page-container { padding-block: 20px 36px; }
  .cc-request-form { padding: 20px 0; }
  .cc-search-strip-inner { flex-wrap: wrap; }
  .cc-ask-mini { margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
  .cc-recent-list { grid-template-columns: 1fr; }
  .cc-cat-grid { grid-template-columns: 1fr; }
  .cc-footer-right { margin-left: 0; width: 100%; justify-content: space-between; }
  .cc-hamburger { display: inline-flex; }
  .cc-topbar-link { padding: 8px 10px; font-size: 12.5px; }
}


/* ============================================================
   13. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Hidden SVG symbol sprite container */
.cc-svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* =================================================================
   14. FALLBACK-PAGE COMPONENTS
   -----------------------------------------------------------------
   Styles for the remaining Zendesk pages (category, section,
   search_results, request_page, requests_page, user_profile,
   subscriptions, contributions, error_page, community_*).
   These sit under <main class="cc-fallback"> and reuse the design
   tokens defined up top.
   ================================================================= */

/* ---- Tabs (secondary nav bar on list pages) ---- */
.cc-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--border);
  margin: 0 0 24px;
  overflow-x: auto;
}
.cc-tabs a {
  display: inline-block;
  padding: 12px 2px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.cc-tabs a:hover { color: var(--ink); }
.cc-tabs a.active, .cc-tabs a.is-active {
  color: var(--hilti-red);
  border-bottom-color: var(--hilti-red);
}
.cc-tabs-inner { font-size: 14px; gap: 20px; margin-top: 12px; border-bottom: none; }

/* ---- Badges / chips ---- */
.cc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--surface-2);
  color: var(--ink-2);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  vertical-align: middle;
}
.cc-badge-muted { background: var(--surface-2); color: var(--muted); }
.cc-badge-title { background: var(--hilti-red); color: #fff; }
.cc-badge-official { background: #0366d6; color: #fff; }
.cc-badge-pending { background: #e67e22; color: #fff; }
.cc-badge-open, .cc-badge-new { background: #d1e7dd; color: #0f5132; }
.cc-badge-pending, .cc-badge-hold { background: #fff3cd; color: #664d03; }
.cc-badge-solved, .cc-badge-closed { background: var(--surface-2); color: var(--muted); }
.cc-badge-answered, .cc-badge-planned { background: #cfe2ff; color: #084298; }
.cc-badge-not-planned, .cc-badge-answered-no, .cc-badge-not-answered { background: var(--surface-2); color: var(--muted); }
.cc-badge-title img { height: 12px; width: auto; }

.cc-chip {
  display: inline-block;
  padding: 2px 10px;
  margin: 2px 4px 2px 0;
  background: var(--surface-2);
  color: var(--ink-2);
  border-radius: 999px;
  font-size: 12px;
}

/* ---- Icons used inline next to text (locks, pins, etc.) ---- */
.cc-lock, .cc-pin {
  display: inline-block;
  width: 14px;
  height: 14px;
  color: var(--muted);
  vertical-align: middle;
}
.cc-pin { color: #d19b00; }

/* ---- Notes & empty states ---- */
.cc-note {
  color: var(--muted);
  margin: 16px 0;
}
.cc-empty { color: var(--muted); padding: 24px 0; }

/* ---- Category page: section grid ---- */
.cc-cat-head { margin: 24px 0 16px; }
.cc-cat-head h1 { font-size: 32px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.02em; }
.cc-cat-desc { color: var(--muted); font-size: 16px; }

.cc-section-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin: 24px 0 40px;
}
.cc-section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}
.cc-section-card h2 {
  font-size: 18px;
  margin: 0 0 12px;
}
.cc-section-card h2 a { color: var(--ink); text-decoration: none; }
.cc-section-card h2 a:hover { color: var(--hilti-red); }

.cc-subsection-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  font-size: 13px;
}
.cc-subsection-list li { margin: 4px 0; }
.cc-subsection-list a { color: var(--muted); text-decoration: none; }
.cc-subsection-list a:hover { color: var(--ink); text-decoration: underline; }

.cc-section-articles {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.cc-section-articles li { margin: 6px 0; }
.cc-section-articles a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
}
.cc-section-articles a:hover { color: var(--hilti-red); text-decoration: underline; }

.cc-see-all {
  display: inline-block;
  margin-top: 8px;
  color: var(--hilti-red);
  font-weight: 500;
  text-decoration: none;
  font-size: 14px;
}
.cc-see-all:hover { text-decoration: underline; }

/* ---- Section page: article list ---- */
.cc-section-head { margin: 24px 0 20px; }
.cc-section-head h1 { font-size: 32px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.02em; }
.cc-section-desc { color: var(--muted); font-size: 16px; }

.cc-article-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}
.cc-article-list li { border-bottom: 1px solid var(--border); }
.cc-article-list a {
  display: block;
  padding: 20px 0;
  color: var(--ink);
  text-decoration: none;
}
.cc-article-list h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--ink);
}
.cc-article-list a:hover h3 { color: var(--hilti-red); }
.cc-article-excerpt {
  color: var(--muted);
  font-size: 14px;
  margin: 4px 0;
  max-width: 70ch;
}
.cc-article-list .cc-article-meta,
.cc-search-meta {
  color: var(--muted);
  font-size: 12.5px;
  display: block;
  margin-top: 4px;
}
.cc-search-meta .sep { margin: 0 6px; }

/* ---- Search results page ---- */
.cc-search-top { margin: 24px 0 20px; }
.cc-search-top h1 { font-size: 24px; margin: 0 0 12px; }
.cc-search-top .cc-search-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  max-width: 640px;
}
.cc-search-top .cc-search-row input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 12px;
}
.cc-search-top .cc-search-row button {
  background: var(--hilti-red);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.cc-search-scope {
  display: flex;
  gap: 20px;
  margin: 16px 0;
  font-size: 14px;
}
.cc-search-scope a {
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.cc-search-scope a.active {
  color: var(--hilti-red);
  border-bottom-color: var(--hilti-red);
}
.cc-search-results {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}
.cc-search-results li { border-bottom: 1px solid var(--border); }
.cc-search-results a {
  display: block;
  padding: 20px 0;
  color: var(--ink);
  text-decoration: none;
}
.cc-search-results h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--hilti-red);
}
.cc-search-results a:hover h3 { text-decoration: underline; }
.cc-snip {
  color: var(--ink-2);
  font-size: 14px;
  margin: 4px 0;
  max-width: 76ch;
}
.cc-snip em {
  background: rgba(216, 11, 23, 0.1);
  font-style: normal;
  padding: 0 2px;
}
.cc-empty-search {
  text-align: center;
  padding: 60px 20px;
}
.cc-empty-search h2 { font-size: 20px; margin-bottom: 8px; }

/* ---- Request detail page ---- */
.cc-request-head { margin: 24px 0 16px; }
.cc-request-head h1 { font-size: 24px; font-weight: 700; margin: 0; }
.cc-request-head h1 .cc-badge { margin-left: 10px; font-size: 12px; }

.cc-request-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  margin-top: 16px;
}
.cc-request-main { min-width: 0; }
.cc-request-side { min-width: 0; }

.cc-comments { list-style: none; padding: 0; margin: 0; }
.cc-comment {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.cc-comment-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.cc-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.cc-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.cc-avatar-lg { width: 72px; height: 72px; }
.cc-avatar-sm {
  display: inline-block;
  width: 24px; height: 24px; border-radius: 50%;
  margin-right: 8px; vertical-align: middle;
}
.cc-agent-dot {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 12px; height: 12px;
  background: var(--hilti-red);
  border: 2px solid var(--surface);
  border-radius: 50%;
}
.cc-comment-meta strong { color: var(--ink); font-weight: 600; }
.cc-comment-meta .muted {
  color: var(--muted);
  font-size: 13px;
  margin-left: 10px;
}
.cc-comment-body { color: var(--ink); font-size: 15px; line-height: 1.65; }
.cc-comment-body p { margin: 0 0 10px; }

.cc-attachments {
  list-style: none; padding: 0; margin: 12px 0 0;
  font-size: 14px;
}
.cc-attachments li {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
}
.cc-attachments svg { width: 14px; height: 14px; color: var(--muted); }
.cc-attachments a { color: var(--hilti-red); text-decoration: none; }
.cc-attachments a:hover { text-decoration: underline; }
.cc-attachments .muted { color: var(--muted); font-size: 12px; }

.cc-comment-form { margin-top: 20px; }
.cc-comment-form .cc-field { margin-bottom: 12px; }
.cc-ccs { margin-bottom: 10px; }
.cc-upload { margin-top: 8px; }

.cc-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.cc-check { display: inline-flex; align-items: center; gap: 6px; }
.cc-check input { margin: 0; }

/* Ticket details sidebar */
.cc-ticket-details {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
}
.cc-ticket-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}
.cc-ticket-details summary h3 {
  display: inline;
  font-size: 15px;
  margin: 0;
}
.cc-ticket-details dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  margin: 14px 0 0;
  font-size: 14px;
}
.cc-ticket-details dt { color: var(--muted); font-weight: 500; }
.cc-ticket-details dd { margin: 0; color: var(--ink); word-break: break-word; }
.cc-ticket-details dd ul { list-style: none; padding: 0; margin: 0; }
.cc-side-attachments {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.cc-side-attachments h4 { font-size: 14px; margin: 0 0 8px; color: var(--muted); font-weight: 600; }
.cc-side-attachments ul { list-style: none; padding: 0; margin: 0; }
.cc-side-attachments li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; padding: 4px 0;
}
.cc-side-attachments svg { width: 12px; height: 12px; color: var(--muted); }
.cc-side-attachments a { color: var(--hilti-red); text-decoration: none; }

/* ---- Requests list page ---- */
.cc-requests-head { margin: 24px 0 20px; }
.cc-requests-head h1 { font-size: 28px; font-weight: 800; margin: 0 0 12px; letter-spacing: -0.02em; }

.cc-requests-filter {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: 24px;
}
.cc-requests-filter .flex-grow { flex: 1; min-width: 220px; }
.cc-field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.cc-subscribe { align-self: center; }

.cc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.cc-requests-table, .cc-subs-table, .cc-contrib-table {
  width: 100%;
  border-collapse: collapse;
}
.cc-requests-table th,
.cc-subs-table th,
.cc-contrib-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.cc-requests-table td,
.cc-subs-table td,
.cc-contrib-table td {
  padding: 12px 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.cc-requests-table tr:last-child td,
.cc-subs-table tr:last-child td,
.cc-contrib-table tr:last-child td { border-bottom: none; }
.cc-requests-table a,
.cc-subs-table a,
.cc-contrib-table a { color: var(--hilti-red); text-decoration: none; }
.cc-requests-table a:hover,
.cc-subs-table a:hover,
.cc-contrib-table a:hover { text-decoration: underline; }
.cc-cell-id, .cc-cell-when, .cc-cell-status,
.cc-cell-type, .cc-cell-vote, .cc-cell-sub { color: var(--muted); }

.cc-request-mobile-meta {
  display: none;
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  gap: 10px;
  font-size: 12.5px;
  color: var(--muted);
}
.cc-request-mobile-meta li { padding-right: 10px; border-right: 1px solid var(--border); }
.cc-request-mobile-meta li:last-child { border-right: none; }

@media (max-width: 720px) {
  .cc-cell-id, .cc-cell-when, .cc-cell-status { display: none; }
  .cc-request-mobile-meta { display: flex; }
}

/* ---- Subscriptions / contributions ---- */
.cc-subs-head, .cc-contrib-head {
  margin: 24px 0 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.cc-subs-head h1, .cc-contrib-head h1 {
  font-size: 28px;
  font-weight: 800;
  margin: 0;
}
.cc-filter-select {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cc-filter-select select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
}

/* ---- User profile ---- */
.cc-profile-head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}
.cc-profile-identity {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.cc-profile-text h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cc-profile-desc { color: var(--muted); margin: 6px 0 0; }
.cc-badge-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.cc-badge-row img { height: 22px; width: 22px; }
.cc-profile-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.cc-profile-details {
  margin: 24px 0;
}
.cc-profile-details dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 24px;
}
.cc-profile-details dt {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.cc-profile-details dd { margin: 0; font-size: 14px; color: var(--ink); }
.cc-profile-details dd ul { list-style: none; padding: 0; margin: 0; }

.cc-profile-section { margin-top: 32px; }
.cc-profile-section h2 { font-size: 18px; margin: 0 0 12px; }

.cc-activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}
.cc-activity-list li { border-bottom: 1px solid var(--border); }
.cc-activity-list a {
  display: block;
  padding: 16px 0;
  color: var(--ink);
  text-decoration: none;
}
.cc-activity-list h3 { font-size: 15px; margin: 0 0 4px; color: var(--ink); }
.cc-activity-list a:hover h3 { color: var(--hilti-red); }
.cc-activity-list .muted { color: var(--muted); font-size: 14px; margin: 0 0 4px; }

/* ---- Error page ---- */
.cc-error-inner {
  text-align: center;
  padding: 80px 20px;
  max-width: 480px;
  margin: 0 auto;
}
.cc-error-icon {
  width: 64px;
  height: 64px;
  color: var(--muted);
  margin-bottom: 20px;
}
.cc-error-inner h1 { font-size: 40px; margin: 0 0 12px; }
.cc-error-inner h2 { font-size: 20px; font-weight: 500; color: var(--muted); margin: 0 0 12px; }
.cc-error-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* ---- Community: topics index ---- */
.cc-community-head { margin: 24px 0 20px; }
.cc-community-head h1 { font-size: 28px; margin: 0 0 12px; font-weight: 800; letter-spacing: -0.02em; }

.cc-topic-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin: 20px 0 40px;
}
.cc-topic-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cc-topic-card:hover {
  border-color: var(--hilti-red);
  transform: translateY(-2px);
}
.cc-topic-card h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.cc-topic-card p { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.cc-topic-meta { display: flex; gap: 8px; font-size: 12px; color: var(--muted); }
.cc-topic-meta .sep { color: var(--border); }

.cc-featured-posts { margin: 32px 0; }
.cc-featured-posts h2 { font-size: 18px; margin: 0 0 12px; }
.cc-featured-posts ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}
.cc-featured-posts li { border-bottom: 1px solid var(--border); }
.cc-featured-posts a {
  display: block;
  padding: 12px 0;
  color: var(--ink);
  text-decoration: none;
}
.cc-featured-posts a:hover { color: var(--hilti-red); }

.cc-recent-activity { margin: 32px 0; }
.cc-cta {
  text-align: center;
  margin: 40px 0;
  padding: 32px 20px;
  background: var(--surface-2);
  border-radius: 10px;
}
.cc-cta p { font-size: 18px; margin: 0 0 14px; }

/* ---- Community: topic + post list ---- */
.cc-topic-head { margin: 24px 0 16px; }
.cc-topic-head h1 { font-size: 28px; margin: 0 0 8px; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.cc-topic-desc { color: var(--muted); font-size: 15px; }

.cc-topic-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.cc-topic-filters {
  display: flex;
  gap: 10px;
  margin-left: auto;
}
.cc-topic-filters select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
}
.cc-topic-subscribe { align-self: center; }

.cc-post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cc-post-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.cc-post-main { flex: 1; min-width: 0; }
.cc-post-main h3 { font-size: 16px; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cc-post-main h3 a { color: var(--ink); text-decoration: none; }
.cc-post-main h3 a:hover { color: var(--hilti-red); }
.cc-post-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  gap: 10px;
}
.cc-post-meta li { padding-right: 10px; border-right: 1px solid var(--border); }
.cc-post-meta li:last-child { border-right: none; }
.cc-post-stats {
  display: flex;
  gap: 20px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  flex-shrink: 0;
}
.cc-post-stats strong { display: block; font-size: 16px; color: var(--ink); }

@media (max-width: 640px) {
  .cc-post-list li { flex-direction: column; align-items: flex-start; }
  .cc-post-stats { gap: 14px; }
}

/* ---- Community: single post ---- */
.cc-post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 32px;
  margin: 20px 0;
}
.cc-post-main.cc-post-main { min-width: 0; } /* duplicate specificity so overrides apply */
.cc-post-side {
  background: var(--surface-2);
  padding: 20px;
  border-radius: 8px;
  align-self: start;
}
.cc-post-side h3 { font-size: 15px; margin: 0 0 12px; }

.cc-post-head { margin-bottom: 16px; }
.cc-post-head h1 { font-size: 28px; margin: 0 0 12px; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-post-byline {
  display: flex;
  gap: 12px;
  align-items: center;
}
.cc-byline-text { flex: 1; min-width: 0; }
.cc-byline-text strong { font-size: 14px; color: var(--ink); }
.cc-byline-meta {
  list-style: none;
  padding: 0;
  margin: 2px 0 0;
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}
.cc-byline-meta li { padding-right: 10px; border-right: 1px solid var(--border); }
.cc-byline-meta li:last-child { border-right: none; }
.cc-byline-meta a { color: var(--muted); text-decoration: none; }
.cc-byline-meta a:hover { color: var(--hilti-red); }
.cc-post-actions { display: flex; gap: 10px; align-items: center; }
.cc-post-actions svg { width: 16px; height: 16px; color: var(--muted); }

.cc-post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 24px 0;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cc-vote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cc-vote-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-2);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.cc-vote-btn svg { width: 14px; height: 14px; }
.cc-vote-btn:hover { border-color: var(--hilti-red); color: var(--hilti-red); }
.cc-vote-btn.active { background: var(--hilti-red); color: #fff; border-color: var(--hilti-red); }
.cc-vote-sum { font-size: 13px; color: var(--muted); margin-left: 4px; }
.cc-vote-sm .cc-vote-btn { padding: 4px 8px; }

.cc-content-tags { margin: 24px 0; }
.cc-content-tags ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cc-content-tags a { display: inline-block; padding: 3px 10px; background: var(--surface-2); color: var(--ink-2); border-radius: 999px; font-size: 12px; text-decoration: none; }
.cc-content-tags a:hover { background: var(--hilti-red); color: #fff; }

.cc-comments-section { margin-top: 32px; }
.cc-comments-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cc-comments-head h3 { font-size: 18px; margin: 0; }
.cc-comments-head select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
}

.cc-comment-official {
  background: linear-gradient(0deg, rgba(216, 11, 23, 0.03), rgba(216, 11, 23, 0.03));
  padding-left: 12px;
  border-left: 3px solid var(--hilti-red);
}
.cc-escalation-badge {
  display: inline-block;
  padding: 3px 8px;
  background: var(--surface-2);
  color: var(--hilti-red);
  border-radius: 4px;
  font-size: 12px;
  text-decoration: none;
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .cc-request-layout, .cc-post-layout {
    grid-template-columns: 1fr;
  }
  .cc-post-side { order: -1; }
}

/* ---- Form fields (new community post, error notes) ---- */
.cc-fallback .cc-form label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.cc-fallback .cc-form .optional, .cc-fallback .cc-form .muted { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 4px; }
.cc-error-note {
  margin-top: 6px;
  padding: 8px 10px;
  background: #fdecec;
  color: #b91c1c;
  border: 1px solid #f5c2c2;
  border-radius: 6px;
  font-size: 13px;
}
.cc-suggestion-list {
  margin: 8px 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
}

/* ---- Share button (community post) ---- */
.cc-share-btn { display: inline-flex; align-items: center; }

/* =================================================================
   15. v3 PATCHES (post-upload fixes)
   -----------------------------------------------------------------
   Small overrides needed because Zendesk v3 Curlybars doesn't give
   us everything the mockup had (section/category sidebars on
   articles, length accessors, compare helpers).
   ================================================================= */

/* Article page uses 2 columns now (article + on-this-page TOC) */
.cc-article-wrap-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px;
}
@media (max-width: 1000px) {
  .cc-article-wrap-2col {
    grid-template-columns: 1fr;
  }
  .cc-article-wrap-2col .cc-on-this-page {
    display: none;
  }
}

/* Hide the content-tags section on a community post if the <ul> is empty.
   Lets us emit the markup unconditionally without a trailing empty label. */
.cc-content-tags:has(ul:empty) { display: none; }

/* Locale picker dropdown in the header */
.cc-locale-picker { position: relative; }
.cc-locale-picker summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  font-size: 12px;
  list-style: none;
}
.cc-locale-picker summary::-webkit-details-marker { display: none; }
.cc-locale-list {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 0;
  min-width: 160px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  list-style: none;
  z-index: 100;
}
.cc-locale-list li { margin: 0; }
.cc-locale-list a {
  display: block;
  padding: 6px 14px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
}
.cc-locale-list a:hover { background: var(--surface-2); color: var(--hilti-red); }

/* =================================================================
   16. QA ROUND 2 FIXES
   -----------------------------------------------------------------
   Changes requested after seeing the live render:
   - Breadcrumbs inline (Zendesk's {{breadcrumbs}} outputs an <ol>
     that stacks by default without CSS help)
   - 3-column article layout restored (section nav + article + TOC)
   - User avatar chip in the top bar when signed in
   - Related articles rendered as a 2-column grid
   - Back-to-top floating button
   - Font weights toned down (home/article H1s dropped from 800 → 600)
   - Hero gets a soft divider under it so it doesn't float
   ================================================================= */

/* ---- Breadcrumbs: force inline no matter what Zendesk emits ---- */
.cc-breadcrumb,
.cc-breadcrumb nav,
.cc-breadcrumb .breadcrumbs {
  font-size: 13px;
}
.cc-breadcrumb ol,
.cc-breadcrumb ul,
.cc-breadcrumb .breadcrumbs ol,
.cc-breadcrumb .breadcrumbs ul {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px 10px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.cc-breadcrumb li {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}
.cc-breadcrumb li + li::before {
  content: '›';
  color: var(--muted);
  opacity: 0.6;
  margin-left: -4px;
}
.cc-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}
.cc-breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.cc-breadcrumb li:last-child { color: var(--ink); font-weight: 500; }

/* ---- 3-column article layout (left nav + article + right TOC) ---- */
.cc-article-wrap-3col {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 240px;
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px;
}
@media (max-width: 1100px) {
  .cc-article-wrap-3col {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .cc-article-wrap-3col .cc-on-this-page { display: none; }
}
@media (max-width: 820px) {
  .cc-article-wrap-3col {
    grid-template-columns: 1fr;
  }
  .cc-article-wrap-3col .cc-section-nav {
    position: static;
    max-height: none;
  }
}
.cc-section-nav {
  position: sticky;
  top: 80px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  font-size: 14px;
  padding-right: 8px;
  border-right: 1px solid var(--border);
}
.cc-section-nav h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.cc-section-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cc-section-nav li {
  margin: 2px 0;
}
.cc-section-nav a {
  display: block;
  padding: 6px 10px;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: 4px;
  border-left: 2px solid transparent;
  font-weight: 400;
  line-height: 1.4;
}
.cc-section-nav a:hover { color: var(--hilti-red); background: var(--surface-2); }
.cc-section-nav li.active a {
  color: var(--hilti-red);
  border-left-color: var(--hilti-red);
  font-weight: 500;
  background: rgba(216, 11, 23, 0.04);
}

/* ---- User avatar chip in the top bar ---- */
.cc-topbar-user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  margin-left: 6px;
  flex: 0 0 auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.cc-topbar-user img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Related articles: let Zendesk's native output flow as a grid ---- */
.cc-related {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.cc-related > h4 { display: none; } /* Zendesk emits its own heading */
.cc-related section.related-articles,
.cc-related .related-articles {
  background: none;
  padding: 0;
}
.cc-related h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink);
}
.cc-related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px 20px;
}
.cc-related li {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.cc-related a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  display: block;
}
.cc-related a:hover { color: var(--hilti-red); }

/* ---- Back-to-top floating button ---- */
.cc-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--hilti-red);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
.cc-back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cc-back-to-top:hover { background: var(--hilti-red-700); }
.cc-back-to-top svg { width: 20px; height: 20px; }
@media (max-width: 500px) {
  .cc-back-to-top { right: 14px; bottom: 14px; width: 40px; height: 40px; }
}

/* ---- Tone down font weights across the theme ---- */
.cc-hero h1 { font-weight: 600; letter-spacing: -0.01em; }
.cc-cat-head h1,
.cc-section-head h1,
.cc-requests-head h1,
.cc-subs-head h1,
.cc-contrib-head h1,
.cc-community-head h1,
.cc-topic-head h1,
.cc-post-head h1 {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cc-article-head h1 {
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.cc-cat-card h3,
.cc-section-card h2 {
  font-weight: 500;
}
.cc-topics-head h2 {
  font-weight: 500;
  font-size: 20px;
}
.cc-topics-head .sub {
  font-weight: 400;
  color: var(--muted);
}
.cc-help h3 {
  font-weight: 500;
}
.cc-recent-head span:first-child {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
}

/* ---- Hero: softer divider, less aggressive weight ---- */
.cc-hero {
  border-bottom: 1px solid var(--border);
}

/* ---- Breadcrumb divider shouldn't appear on first child ---- */
.cc-breadcrumb li:first-child::before { content: ''; margin: 0; }

/* =================================================================
   17. QA ROUND 3 — autocomplete highlight + typography pass
   -----------------------------------------------------------------
   - Autocomplete suggestions bold matched letters via <mark>
   - Font sizes normalised across the theme to match the Hilti sister
     sites' lighter typographic feel (ON!Track / Profis use smaller,
     lighter type and more muted secondary text)
   - Hilti red refined to the brand token used on crewcenter.hilti.com
     (#D2051E) and on sister help sites
   ================================================================= */

:root {
  --hilti-red: #D2051E;
  --hilti-red-700: #A6041A;
  --ink: #141414;
  --ink-2: #333333;
  --muted: #6b6b6b;
  --border: #e6e2db;
  --surface: #ffffff;
  --surface-2: #faf7f1;
}
:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --ink: #ececec;
    --ink-2: #cfcfcf;
    --muted: #8e8e8e;
    --border: #2a2a2a;
    --surface: #121212;
    --surface-2: #1a1a1a;
  }
}
:root[data-theme="dark"] {
  --ink: #ececec;
  --ink-2: #cfcfcf;
  --muted: #8e8e8e;
  --border: #2a2a2a;
  --surface: #121212;
  --surface-2: #1a1a1a;
}

/* ---- Autocomplete suggestion styling with highlighted matches ---- */
.cc-autocomplete {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-top: 4px;
}
.cc-autocomplete-head {
  padding: 8px 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 500;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.cc-autocomplete ul {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.cc-autocomplete li {
  margin: 0;
}
.cc-autocomplete a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
}
.cc-autocomplete li.active a,
.cc-autocomplete a:hover {
  background: var(--surface-2);
}
.cc-autocomplete .ac-title {
  font-weight: 400;
  color: var(--ink);
}
.cc-autocomplete .ac-meta {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
  max-height: 2.6em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* The highlighted match — bold + Hilti red tint, no background bar */
.cc-autocomplete mark,
.cc-related mark {
  background: transparent;
  color: var(--hilti-red);
  font-weight: 600;
  padding: 0;
}
.cc-autocomplete-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}
.cc-autocomplete-foot a {
  color: var(--hilti-red);
  text-decoration: none;
  font-weight: 500;
}
.cc-autocomplete-foot a:hover { text-decoration: underline; }

/* ---- Typography audit — bring everything in line with sister sites ---- */
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Hero sizes */
.cc-hero {
  padding: 48px 20px 40px;
  text-align: center;
  background: var(--surface-2);
}
.cc-hero h1 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--ink);
}
.cc-hero-sub {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 24px;
  font-weight: 400;
}
.cc-ai-row {
  max-width: 580px;
  margin: 0 auto;
}

/* Category cards */
.cc-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin: 20px 0 40px;
}
.cc-cat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  display: block;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cc-cat-card:hover {
  border-color: var(--muted);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.cc-cat-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  color: var(--hilti-red);
  margin-bottom: 10px;
}
.cc-cat-icon svg {
  width: 100%;
  height: 100%;
}
.cc-cat-card h3 {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--ink);
  line-height: 1.3;
}
.cc-cat-card p {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat-meta {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 6px;
}

/* Topics head */
.cc-topics {
  max-width: 1120px;
  margin: 32px auto;
  padding: 0 20px;
}
.cc-topics-head {
  margin-bottom: 16px;
}
.cc-topics-head h2 {
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--ink);
}
.cc-topics-head .sub {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  margin: 0;
}

/* Recent + search bars max width */
.cc-recent, .cc-article-search {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 20px;
}
.cc-recent-head span:first-child {
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.cc-recent-item a {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
}

/* Article body typography */
.cc-article-body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.cc-article-body h2 {
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  margin: 28px 0 10px;
  letter-spacing: -0.005em;
}
.cc-article-body h3 {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  margin: 20px 0 8px;
}
.cc-article-body p {
  margin: 0 0 14px;
}
.cc-article-body ul, .cc-article-body ol {
  margin: 0 0 14px 20px;
  padding: 0;
}
.cc-article-body li { margin: 4px 0; }
.cc-article-head h1 {
  font-size: 28px;
  font-weight: 500;
}
.cc-article-meta {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.cc-article-meta .sep { color: var(--border); }

/* On this page / section nav */
.cc-on-this-page h4,
.cc-section-nav h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 500;
}
.cc-on-this-page a,
.cc-section-nav a {
  font-size: 13.5px;
  color: var(--ink-2);
  font-weight: 400;
}

/* Buttons */
.cc-btn, .cc-btn-primary, .cc-btn-plain {
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  line-height: 1;
}
.cc-btn:hover, .cc-btn-plain:hover { background: var(--surface-2); }
.cc-btn.primary, .cc-btn-primary {
  background: var(--hilti-red);
  color: #fff;
  border-color: var(--hilti-red);
}
.cc-btn.primary:hover, .cc-btn-primary:hover {
  background: var(--hilti-red-700);
  border-color: var(--hilti-red-700);
}

/* Still-need-help spacing */
.cc-help {
  text-align: center;
  padding: 40px 20px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  margin-top: 32px;
}
.cc-help h3 {
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 16px;
  color: var(--ink);
}
.cc-help .actions {
  display: inline-flex;
  gap: 10px;
  justify-content: center;
}

/* Footer: give it room and align everything to the brand */
.cc-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 24px 20px 20px;
}
.cc-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.cc-footer-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.cc-back-to-account {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.cc-back-to-account img.back-icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
}
.cc-footer-right {
  display: inline-flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.cc-footer-right .nav-link {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
}
.cc-footer-right .nav-link:hover { color: var(--hilti-red); }
.cc-footer-social {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.cc-footer-social a {
  color: var(--muted);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cc-footer-social a:hover { color: var(--hilti-red); }
.cc-footer-social svg { width: 18px; height: 18px; }
.cc-footer-bottom {
  max-width: 1120px;
  margin: 16px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
}

/* Top bar refinements */
.cc-topbar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 10px 20px;
}
.cc-topbar-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.cc-brand-lockup { height: 24px; }
.cc-topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  background: none;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
}
.cc-topbar-link:hover { color: var(--hilti-red); }
.cc-topbar-link svg { width: 14px; height: 14px; }

/* =================================================================
   18. ASK AI UNIFIED BUTTON
   -----------------------------------------------------------------
   Replaces the hero + mini-AI text inputs with simple buttons.
   Zendesk Messaging has no documented API to send a message as
   the user (only the deprecated Chat SDK did), so there's no way
   to carry text from a page input into the chat. The honest UX is
   "click to open chat, type inside the chat window."
   ================================================================= */
.cc-hero-cta {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.cc-btn-lg {
  padding: 14px 28px !important;
  font-size: 16px !important;
  border-radius: 8px !important;
  gap: 10px !important;
}
.cc-btn-lg svg {
  width: 18px;
  height: 18px;
}

.cc-ask-mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--hilti-red);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.cc-ask-mini-btn svg { width: 14px; height: 14px; }
.cc-ask-mini-btn:hover {
  background: var(--surface-2);
  border-color: var(--hilti-red);
}

/* =================================================================
   19. QA ROUND 4 — hero row, link colors, spacing, no stray lines
   -----------------------------------------------------------------
   Each rule here maps to a specific QA note.
   ================================================================= */

/* ---- Hero row: heading on the left, Ask AI button on the right ---- */
.cc-hero {
  padding: 36px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.cc-hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
.cc-hero-text {
  text-align: center;
  flex: 0 1 auto;
}
.cc-hero-text h1 {
  font-size: 32px;
  font-weight: 500;
  margin: 0 0 6px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -0.01em;
}
.cc-hero-hint {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
  font-weight: 400;
}
.cc-hero-ask {
  flex: 0 0 auto;
}

/* ---- Category cards: text black, only the title stays prominent, no bolding
       beyond the title. Spacing tightened. ---- */
.cc-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 16px 0 24px;
}
@media (max-width: 820px) {
  .cc-cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .cc-cat-grid { grid-template-columns: 1fr; }
}
.cc-cat-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: border-color 0.15s ease;
}
.cc-cat-card:hover { border-color: var(--ink); }
.cc-cat-card:visited,
.cc-cat-card:visited h3,
.cc-cat-card:visited p { color: var(--ink); }
.cc-cat-card h3,
.cc-cat-card h3 a {
  font-size: 16px;
  font-weight: 600;        /* only the title is bold */
  color: var(--ink);        /* NOT red */
  margin: 8px 0 4px;
  line-height: 1.3;
}
.cc-cat-card p {
  font-size: 13.5px;
  font-weight: 400;         /* body not bold */
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.5;
}
.cat-meta {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}
/* Only the icon is red */
.cc-cat-icon {
  color: var(--hilti-red);
  display: inline-flex;
  width: 24px;
  height: 24px;
}

/* ---- Section nav article list on article page: links BLACK not red ---- */
.cc-section-nav a,
.cc-section-nav a:visited {
  color: var(--ink-2) !important;
  font-weight: 400 !important;
}
.cc-section-nav a:hover {
  color: var(--hilti-red) !important;
}
.cc-section-nav li.active a,
.cc-section-nav li.active a:visited {
  color: var(--hilti-red) !important;   /* only the active one is red */
  font-weight: 500 !important;
}

/* ---- Related articles: show 4 across, text wraps, compact spacing ---- */
.cc-related {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.cc-related > h4 { display: none; }
.cc-related h3 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--ink);
}
.cc-related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 20px;
}
@media (max-width: 980px) { .cc-related ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cc-related ul { grid-template-columns: 1fr; } }
.cc-related li {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.cc-related a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  display: block;
  word-break: break-word;    /* let the title wrap */
  white-space: normal;
  overflow-wrap: break-word;
}
.cc-related a:hover { color: var(--hilti-red); }
/* The native Zendesk output caps at 5 by default; CSS hides a 5th if present */
.cc-related ul > li:nth-child(n+5) { display: none; }

/* ---- Section-page / search-results: left-align the content ---- */
.cc-page-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px;
  text-align: left;
}
.cc-section-head,
.cc-cat-head,
.cc-search-top,
.cc-requests-head,
.cc-subs-head,
.cc-contrib-head,
.cc-community-head {
  text-align: left;
}
.cc-section-head h1,
.cc-cat-head h1 {
  font-size: 26px;
  font-weight: 500;         /* not 700/800 */
  margin: 20px 0 8px;
  color: var(--ink);
  text-align: left;
}
.cc-section-desc,
.cc-cat-desc {
  text-align: left;
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 20px;
  font-weight: 400;
}

/* Section-page article list: left-align titles, black, not red */
.cc-article-list a,
.cc-article-list a h3 {
  color: var(--ink);
  text-decoration: none;
}
.cc-article-list a h3 {
  font-weight: 500;
}
.cc-article-list a:hover h3 { color: var(--hilti-red); }

/* ---- Footer: remove any stray underline/border on the links ---- */
.cc-footer-right .nav-link,
.cc-footer-right a {
  text-decoration: none !important;
  border-bottom: none !important;
  background-image: none !important;  /* kill any gradient underline */
}
.cc-footer-right .nav-link:hover {
  text-decoration: none !important;
  color: var(--hilti-red);
}

/* ---- Everything-not-a-heading in the fallback container should NOT be bold ---- */
.cc-fallback p,
.cc-fallback li,
.cc-fallback a,
.cc-fallback dd,
.cc-fallback span,
.cc-page-container p,
.cc-page-container li,
.cc-page-container dd,
.cc-page-container span {
  font-weight: 400;
}
.cc-fallback h1 { font-weight: 500; }
.cc-fallback h2 { font-weight: 500; }
.cc-fallback h3 { font-weight: 500; }
.cc-fallback h4 { font-weight: 500; }

/* ---- Section headings in category: tighten vertical rhythm ---- */
.cc-section-card {
  padding: 16px;
}
.cc-section-card h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px;
}
.cc-section-card h2 a,
.cc-section-card h2 a:visited {
  color: var(--ink);
  text-decoration: none;
}
.cc-section-card h2 a:hover { color: var(--hilti-red); }
.cc-section-articles li { padding: 2px 0; }
.cc-section-articles a,
.cc-section-articles a:visited {
  color: var(--ink-2);
  text-decoration: none;
}
.cc-section-articles a:hover { color: var(--hilti-red); }

/* ---- Still-need-help block spacing + body text ---- */
.cc-help {
  padding: 32px 20px;
  background: var(--surface-2);
  margin-top: 24px;
}
.cc-help h3 {
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 6px;
}
.cc-help p {
  color: var(--muted);
  font-weight: 400;
  margin: 0 0 18px;
}

/* ---- Shared article/bottom search bar left-aligned ---- */
.cc-bottom-search {
  margin-top: 32px;
  padding: 24px 20px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}
.cc-bottom-search-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;    /* heading centered */
}
.cc-bottom-search h3 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 16px;
  color: var(--ink);
}
.cc-search-shell { position: relative; text-align: left; }

/* =================================================================
   20. QA ROUND 5
   -----------------------------------------------------------------
   - Center the "New in CrewCenter" strip and the "Related articles"
     block on their pages (user ask)
   - Category page: section titles black, medium weight; article links
     regular weight; no red paint except icons
   - Trim the gap under the category grid and above the help block
   - Footer: no decoration under links, social icons bare
   ================================================================= */

/* ---- Center "New in CrewCenter Help" strip ---- */
.cc-recent {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px;
}
.cc-recent-inner {
  max-width: 980px;
  margin: 0 auto;
}
.cc-recent-head {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.cc-recent-head span:first-child {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.cc-recent-head .sub {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}
.cc-recent-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 24px;
}
@media (max-width: 880px) { .cc-recent-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .cc-recent-list { grid-template-columns: 1fr; } }
.cc-recent-item a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  display: block;
}
.cc-recent-item a:hover { color: var(--hilti-red); }
.cc-recent-item .meta {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* ---- Related articles: center the whole block, tighten layout ---- */
.cc-related {
  max-width: 980px;
  margin: 32px auto 0;
}
.cc-related h3 {
  text-align: center;
  margin-bottom: 16px;
}

/* ---- Category page section-card: titles BLACK, medium weight, article links regular ---- */
.cc-fallback .cc-section-card h2,
.cc-fallback .cc-section-card h2 a,
.cc-fallback .cc-section-card h2 a:visited {
  color: var(--ink) !important;
  font-weight: 600 !important;      /* category/section title bold */
  font-size: 16px;
}
.cc-fallback .cc-section-card h2 a:hover { color: var(--hilti-red) !important; }

.cc-fallback .cc-section-articles a,
.cc-fallback .cc-section-articles a:visited {
  color: var(--ink-2) !important;   /* article links black */
  font-weight: 400 !important;      /* NOT bold */
}
.cc-fallback .cc-section-articles a:hover { color: var(--hilti-red) !important; }

/* ---- Section grid tighter spacing ---- */
.cc-section-grid {
  gap: 14px;
  margin: 16px 0 24px;
}

/* ---- Trim the empty space below the category grid ---- */
.cc-topics { margin: 20px auto 0; }
.cc-help { margin-top: 0; }
.cc-footer { padding-top: 20px; }

/* ---- Footer link decoration gone, social icons bare ---- */
.cc-footer-social a {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  width: 22px;
  height: 22px;
}
.cc-footer-social a:hover svg { color: var(--hilti-red); }

/* Nothing bold in the footer except the back-to-account */
.cc-footer-right .nav-link { font-weight: 400; }

/* ---- Hero hint word spacing ---- */
.cc-hero-hint { font-weight: 400; }

/* ---- "On this page" sticky TOC: left border on active row only ---- */
.cc-on-this-page a,
.cc-on-this-page a:visited {
  color: var(--ink-2);
  font-weight: 400;
}
.cc-on-this-page li.active a { color: var(--hilti-red); font-weight: 500; }

/* ---- Everywhere: article-list results no bold ---- */
.cc-article-list a h3 { font-weight: 500; color: var(--ink); }
.cc-article-list a:hover h3 { color: var(--hilti-red); }

/* ---- Related articles: 2 columns x 2 rows (= 4 articles max),
       tight vertical space above and below ---- */
.cc-related {
  margin: 20px auto 20px;
  padding-top: 12px;
}
.cc-related ul {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0 24px;
}
.cc-related ul > li:nth-child(n+5) { display: none; }
.cc-related li { padding: 8px 0; }

/* =================================================================
   21. SUBMIT A REQUEST — tighten the "Can't find the answer?" band
   -----------------------------------------------------------------
   The cream strip under Submit was ~90px padded; dropping to ~14/16
   makes the strip read as a thin landmark, not a dead space.
   ================================================================= */
.cc-bottom-search {
  padding: 16px 20px 20px;
  margin-top: 20px;
}
.cc-bottom-search-inner {
  padding: 0;
}
.cc-bottom-search h3 {
  font-size: 15px;
  margin: 0 0 10px;
  font-weight: 500;
}
.cc-bottom-search .cc-search-shell {
  max-width: 520px;
  margin: 0 auto;
}

/* =================================================================
   22. QA ROUND 6 — final overrides
   -----------------------------------------------------------------
   Max-specificity rules so earlier layers can't win.
   ================================================================= */

/* ---- "Can't find what you are looking for?" block —
       force vertical stack + centered children ---- */
section.cc-help {
  padding: 24px 20px 28px !important;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  margin-top: 12px !important;
}
section.cc-help .cc-help-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 4px !important;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 !important;
}
section.cc-help .cc-help-inner > * {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
section.cc-help h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  margin: 0 0 2px !important;
}
section.cc-help p {
  font-size: 14px !important;
  color: var(--muted) !important;
  font-weight: 400 !important;
  margin: 0 0 14px !important;
}
section.cc-help .actions {
  display: inline-flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ---- Category page: section titles + article links BLACK ----
       Even higher specificity (main.cc-fallback + chain) so earlier
       red rules can't win no matter their order. */
main.cc-fallback section.cc-section-card h2,
main.cc-fallback section.cc-section-card h2 a,
main.cc-fallback section.cc-section-card h2 a:visited {
  color: var(--ink) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}
main.cc-fallback section.cc-section-card h2 a:hover {
  color: var(--hilti-red) !important;
}
main.cc-fallback ul.cc-section-articles a,
main.cc-fallback ul.cc-section-articles a:visited,
main.cc-fallback ul.cc-section-articles li a,
main.cc-fallback ul.cc-section-articles li a:visited {
  color: var(--ink-2) !important;
  font-weight: 400 !important;
  text-decoration: none;
}
main.cc-fallback ul.cc-section-articles a:hover {
  color: var(--hilti-red) !important;
}
/* "See all N articles →" link — leave it red as a CTA cue */
main.cc-fallback a.cc-see-all,
main.cc-fallback a.cc-see-all:visited {
  color: var(--hilti-red) !important;
  font-weight: 500 !important;
}

/* ---- Category page: trim the space above the H1 ---- */
main.cc-fallback .cc-cat-head,
main.cc-fallback .cc-section-head,
main.cc-fallback .cc-requests-head,
main.cc-fallback .cc-subs-head,
main.cc-fallback .cc-contrib-head,
main.cc-fallback .cc-community-head {
  margin-top: 8px !important;
}
main.cc-fallback .cc-cat-head h1,
main.cc-fallback .cc-section-head h1 {
  margin-top: 0 !important;
}
.cc-page-container {
  padding-top: 10px !important;
}

/* ---- Article body: regular weight, muted ink tone ---- */
.cc-article-body,
.cc-article-body p,
.cc-article-body li,
.cc-article-body span {
  color: var(--ink-2) !important;
  font-weight: 400 !important;
}
.cc-article-body strong,
.cc-article-body b {
  font-weight: 600 !important;    /* only explicit emphasis is bold */
  color: var(--ink) !important;
}
.cc-article-body h2 {
  font-weight: 500 !important;
  color: var(--ink) !important;
}
.cc-article-body h3 {
  font-weight: 500 !important;
  color: var(--ink) !important;
}

/* ---- Home page vertical spacing: tighten gaps between sections ---- */
.cc-hero { padding: 28px 20px !important; }
.cc-article-search {
  padding: 10px 20px 14px !important;
  margin: 0 auto !important;
}
.cc-recent {
  padding: 14px 20px !important;
  margin: 0 auto !important;
}
.cc-recent-head {
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
}
.cc-topics {
  padding: 10px 20px 24px !important;
  margin: 0 auto !important;
}
.cc-topics-head { margin-bottom: 12px !important; }

/* =================================================================
   23. QA ROUND 7 — final polish
   -----------------------------------------------------------------
   - Tone down heading weights everywhere (Hilti Roman only, no fake-bold)
   - "See all N articles" link black with red hover
   - Hide loading placeholders until data arrives
   - Article search bar now part of the hero band (same cream BG)
   - Footer social icons visible (24px with click area)
   - Submit a request info banner matches the form width
   - Breadcrumb "English" → "Home" (JS replaces, but also hide the
     locale "lang" class item if Zendesk tags it)
   ================================================================= */

/* ---- 1. Tone down ALL weight-500 to Roman weight — the Extended cut
         was heavy. These rules are now purely regular (400) or 600. ---- */
.cc-hero h1               { font-weight: 500 !important; }
.cc-hero-hint             { font-weight: 400 !important; }
.cc-cat-card h3,
.cc-section-card h2       { font-weight: 600 !important; }
.cc-recent-head span:first-child,
.cc-topics-head h2,
.cc-help h3,
.cc-article-head h1,
.cc-section-head h1,
.cc-cat-head h1,
.cc-requests-head h1,
.cc-subs-head h1,
.cc-contrib-head h1,
.cc-community-head h1     { font-weight: 500 !important; }
.cc-article-body h2,
.cc-article-body h3       { font-weight: 500 !important; }
.cc-breadcrumb,
.cc-breadcrumb a,
.cc-breadcrumb li         { font-weight: 400 !important; }
.cc-breadcrumb li:last-child { font-weight: 500 !important; }

/* ---- 2. "See all N articles →" — black with red on hover ---- */
main.cc-fallback a.cc-see-all,
main.cc-fallback a.cc-see-all:visited {
  color: var(--ink) !important;
  font-weight: 500 !important;
}
main.cc-fallback a.cc-see-all:hover {
  color: var(--hilti-red) !important;
}

/* ---- 3. Loading placeholders — invisible until hydrated ---- */
.cc-recent.cc-loading { visibility: hidden; }
.cc-cat-card .cat-meta.cc-loading { visibility: hidden; }

/* ---- 4. Article search bar lives inside the hero band ---- */
.cc-hero {
  padding: 28px 20px 24px !important;
}
.cc-hero-search {
  max-width: 580px;
  margin: 16px auto 0;
  position: relative;
}
.cc-hero-search .cc-search-shell {
  position: relative;
}
.cc-hero-search .cc-search-row {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}
.cc-hero-search input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  min-width: 0;
}
.cc-hero-search input:focus { outline: none; }
.cc-hero-search button {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
}
.cc-hero-search button svg { width: 16px; height: 16px; }
.cc-hero-search button:hover { color: var(--hilti-red); }

/* Hide the old standalone .cc-article-search in case any page still
   renders it; the search now lives in the hero. */
.cc-article-search { display: none !important; }

/* ---- 5. Footer social icons — bigger, visible, bare ---- */
.cc-footer-social {
  display: inline-flex;
  gap: 12px;
  align-items: center;
}
.cc-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
  color: var(--muted);
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.cc-footer-social a svg {
  width: 20px !important;
  height: 20px !important;
}
.cc-footer-social a:hover { color: var(--hilti-red); }
.cc-footer-social a:hover svg { color: var(--hilti-red); }

/* ---- 6. Submit a request: info banner matches form width ---- */
.cc-fallback .cc-email-disclaimer,
main.cc-fallback .cc-email-disclaimer {
  max-width: 760px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  background: var(--surface-2);
  border-left: 3px solid var(--hilti-red);
  padding: 12px 16px;
  font-size: 14px;
}
.cc-fallback .cc-request-form,
main.cc-fallback .cc-request-form {
  max-width: 760px;
}

/* ---- 7. Breadcrumb divider '›' doesn't need to look bold ---- */
.cc-breadcrumb li::before { font-weight: 400 !important; }

/* =================================================================
   24. QA ROUND 8 — regular weight everywhere, lighter ink, alignments
   -----------------------------------------------------------------
   The remaining visual complaints boil down to: too dark + too bold.
   This round:
     - Softens --ink from near-black to #2a2a2a
     - Drops ALL headings and labels to weight 400 (regular Hilti Roman)
       Only <strong>, <b> and the active breadcrumb crumb stay 500
     - Aligns breadcrumb strip and 3-col article grid with the page
       container's 1120px width
     - Trims the hero cream band vertical padding
   ================================================================= */

:root {
  /* Softer darks across light theme — the ~2a tone reads as prose,
     not display black. */
  --ink: #2a2a2a;
  --ink-2: #4a4a4a;
  --muted: #767676;
}

/* ---- Regular weight EVERYWHERE ---- */
body, body * {
  font-weight: 400;
}
/* Only explicit user emphasis is bold */
strong, b, .cc-breadcrumb li:last-child { font-weight: 500 !important; }
/* And active state cues */
.cc-section-nav li.active a,
.cc-on-this-page li.active a { font-weight: 500 !important; }

/* Headings all regular — size handles hierarchy, not weight. */
h1, h2, h3, h4, h5, h6,
.cc-hero h1,
.cc-cat-head h1,
.cc-section-head h1,
.cc-article-head h1,
.cc-requests-head h1,
.cc-subs-head h1,
.cc-contrib-head h1,
.cc-community-head h1,
.cc-cat-card h3,
.cc-section-card h2,
.cc-section-card h2 a,
.cc-topics-head h2,
.cc-recent-head span:first-child,
.cc-help h3,
.cc-article-body h1,
.cc-article-body h2,
.cc-article-body h3,
.cc-article-body h4 {
  font-weight: 400 !important;
}

/* The one place a touch of weight helps readability: category card
   titles (so they visually separate from the description). */
.cc-cat-card h3 { font-weight: 500 !important; }

/* ---- Submit a request: breadcrumb aligned to page container ---- */
.cc-search-strip {
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--border);
}
.cc-search-strip-inner {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px;
}

/* ---- Article page: 3-col grid aligned to page container ---- */
.cc-article-wrap-3col {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 20px !important;
  grid-template-columns: 220px minmax(0, 1fr) 220px !important;
  gap: 32px;
}
@media (max-width: 1000px) {
  .cc-article-wrap-3col { grid-template-columns: 200px minmax(0, 1fr) !important; }
}
@media (max-width: 760px) {
  .cc-article-wrap-3col { grid-template-columns: 1fr !important; }
}

/* The left section nav aligns to the breadcrumb's left edge, which
   is also the page-container's left edge. */
.cc-section-nav {
  padding-left: 0 !important;
}

/* ---- Hero cream band: tighter vertical rhythm ---- */
.cc-hero {
  padding: 20px 20px 18px !important;
}
.cc-hero-inner {
  gap: 24px !important;
  padding: 4px 0 !important;
}
.cc-hero-text h1 {
  margin: 0 0 4px !important;
  font-size: 28px !important;
}
.cc-hero-hint {
  margin: 0 !important;
}
.cc-hero-search {
  margin-top: 10px !important;
}

/* ---- Article body text: lighter and lighter weight ---- */
.cc-article-body,
.cc-article-body p,
.cc-article-body li,
.cc-article-body span,
.cc-article-body td,
.cc-article-body th {
  color: var(--ink-2) !important;
  font-weight: 400 !important;
}
.cc-article-body h2,
.cc-article-body h3 {
  color: var(--ink) !important;
  font-weight: 400 !important;
}
.cc-article-head h1 {
  color: var(--ink) !important;
  font-weight: 400 !important;
}

/* Even the breadcrumb crumbs sit at the muted tone, except the
   current page which is slightly darker. */
.cc-breadcrumb,
.cc-breadcrumb a,
.cc-breadcrumb li {
  color: var(--muted) !important;
}
.cc-breadcrumb li:last-child { color: var(--ink) !important; }

/* =================================================================
   25. QA ROUND 9 — hierarchy restored with size + color, not weight
   -----------------------------------------------------------------
   Everything stays weight 400 (Hilti Roman). Hierarchy comes from
   size + color (headings darker, body lighter).
   ================================================================= */
:root {
  --ink: #1f1f1f;       /* a bit darker so titles still read as titles */
  --ink-2: #525252;     /* body prose — soft, not black */
  --muted: #7a7a7a;
}

/* Allow a 500 synthesis so section titles get a hair more weight than
   body without needing a bold font cut. */
body, body * { font-synthesis-weight: auto; }

/* Body prose: 400 + muted ink */
.cc-article-body,
.cc-article-body p,
.cc-article-body li,
.cc-article-body span,
.cc-article-body td,
.cc-article-body th,
.cc-fallback p,
.cc-fallback li { color: var(--ink-2) !important; font-weight: 400 !important; }

/* Headings: 500 synth + darker ink — this is the visible step */
.cc-article-head h1 {
  color: var(--ink) !important;
  font-weight: 400 !important;
  font-size: 26px !important;
  line-height: 1.25;
}
.cc-article-body h2 {
  color: var(--ink) !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
}
.cc-article-body h3 {
  color: var(--ink) !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  margin-top: 18px !important;
  margin-bottom: 6px !important;
}

/* =================================================================
   26. QA ROUND 10 — hero search width + icon pull-through
   -----------------------------------------------------------------
   The search bar sits ~0.5cm beyond the H1 text's left edge and
   the Ask AI button's right edge, matching the hero-inner width.
   ================================================================= */
.cc-hero-search {
  max-width: 760px !important;    /* ~0.5cm past H1 + Ask AI combined */
  margin-top: 14px !important;
}

/* =================================================================
   27. v22 — lighter body font + secondary pages match Submit Request
   -----------------------------------------------------------------
   Hilti Roman is a sturdy brand sans — great for headings, slightly
   heavy as body prose. Body text now uses the system sans stack with
   a thinner Inter/SF Pro cascade; Hilti stays for headings and brand.
   Also: all secondary (.cc-fallback) pages pick up the Submit Request
   page's full chrome (bottom search bar + consistent padding).
   ================================================================= */

/* Body prose family override — system fonts render thinner than Hilti */
body,
p, li, dd, span.body, .cc-article-body, .cc-article-body *,
.cc-fallback p, .cc-fallback li, .cc-fallback dd {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI',
               'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.005em;
}
/* Keep Hilti for the brand chrome and headings */
.cc-brand-lockup,
.cc-topbar-link,
h1, h2, h3, h4, h5, h6,
.cc-hero h1, .cc-hero-hint,
.cc-cat-head h1, .cc-section-head h1, .cc-article-head h1,
.cc-cat-card h3, .cc-section-card h2,
.cc-topics-head h2,
.cc-help h3,
.cc-breadcrumb {
  font-family: 'Hilti', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}
/* Body text now a touch lighter and more airy */
.cc-article-body p, .cc-article-body li { color: var(--ink-2); font-weight: 400; }

/* ---- Secondary pages inherit Submit Request layout polish ---- */
main.cc-fallback .cc-page-container {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 16px 20px 32px !important;
}
main.cc-fallback h1 {
  font-size: 24px !important;
  font-weight: 500 !important;
  margin: 8px 0 16px !important;
  color: var(--ink) !important;
}
main.cc-fallback .cc-info-banner,
main.cc-fallback .cc-email-disclaimer {
  background: var(--surface-2);
  border-left: 3px solid var(--hilti-red);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--ink-2);
  max-width: 760px;
}

/* The Submit a request link is always visible */
.cc-submit-link { display: inline-flex !important; }

/* Top bar wraps to a second line on narrow viewports instead of
   dropping the right-most links (that's what pushed Submit a request
   off when the avatar got added). */
.cc-topbar-inner {
  flex-wrap: wrap;
}
.cc-topbar-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}


/* =================================================================
   29. v29-20261022
   -----------------------------------------------------------------
   - Reverted the v23 "uniform font thickness" sweep (headings and
     brand chrome keep their Hilti family / size step)
   - On the SECTION page only, the article-list titles read slightly
     thinner so the list is scannable without competing with the H1
   ================================================================= */
.cc-article-list a h3,
.cc-article-list a h3 * {
  font-weight: 400 !important;
  color: var(--ink-2) !important;
  font-size: 15.5px !important;
}
.cc-article-list a:hover h3 { color: var(--hilti-red) !important; }

/* =================================================================
   v29-20261022 — restored above-footer call-to-action + request-page
   form tip / form list (original-theme features)
   ================================================================= */
.cc-cta-block { background: var(--surface-2); border-top: 1px solid var(--border); margin-top: 48px; }
.cc-cta-inner { max-width: 720px; margin: 0 auto; padding: 40px 20px; text-align: center; }
.cc-cta-inner h3 { margin: 0 0 8px; font-size: 22px; }
.cc-cta-inner p { margin: 0 0 18px; color: var(--ink-2); font-size: 16px; }
html.cc-home .cc-cta-block { display: none; } /* v29: home keeps only its own "Can't find..." block */
.cc-form-tip { margin: 0 0 16px; padding: 12px 16px; border-radius: 8px; font-size: 14.5px; }
.cc-form-list { list-style: none; margin: 16px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cc-form-list a { display: block; padding: 16px; border: 1px solid var(--border); border-radius: 8px; text-align: center; font-weight: 600; }
.cc-form-list a:hover { border-color: var(--hilti-red); color: var(--hilti-red); }
.cc-form-list-rows { grid-template-columns: 1fr; }
.cc-form-list-rows a { text-align: left; }