/* VERSION: CC-KB-20261023-V54 */
@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.
   ============================================================ */
/* V32: @font-face moved to document_head.hbs ({{asset}} helper).
   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. */
/* 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
   Brand colour and fonts are fixed values (no theme settings, so the
   manifest stays minimal). Other tokens are design-system.
   ============================================================ */
:root {
  /* Brand (fixed values, previously Zendesk settings) */
  --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: #FFFFFF;           /* V32: white (was warm cream #F3EFE7) */
  --paper: #FFFFFF;
  --ink: #524F53;             /* V32: crewcenter.com text/heading colour */
  --ink-2: #524F53;
  --mute: #757275;            /* V32: crewcenter.com secondary text (4.76:1 on white) */
  --mute-2: #9A9DA5;
  --rule: #D9D9D9;
  --rule-2: #E4E4E4;

  --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: #232124; --fg: #ECEDEF;
    --surface: #2B292C; --surface-2: #2E2C2F;
    --border: #48454A;
    --muted: #A39FA5; --muted-strong: #D2CFD3;
    --cream: #2E2C2F; --rule: #48454A; --rule-2: #38363A;
    --ink: #ECEDEF; --ink-2: #D2CFD3; --mute: #A39FA5;
    --paper: #2B292C;
    --ok-50: #0D241A;
    --warn-50: #2A1D0A;
    --info-50: #0D1D33;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #232124; --fg: #ECEDEF;
  --surface: #2B292C; --surface-2: #2E2C2F;
  --border: #48454A;
  --muted: #A39FA5; --muted-strong: #D2CFD3;
  --cream: #2E2C2F; --rule: #48454A; --rule-2: #38363A;
  --ink: #ECEDEF; --ink-2: #D2CFD3; --mute: #A39FA5;
  --paper: #2B292C;
  --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: 1023px) {
  .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: 599px) {
  .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: 599px) {
  .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: 599px) {
  .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: 599px) {
  .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: 1023px) {
  .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: 1023px) {
  .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: 1023px) {
  .cc-article-wrap-3col {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .cc-article-wrap-3col .cc-on-this-page { display: none; }
}
@media (max-width: 1023px) {
  .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: 599px) {
  .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: #524F53;       /* V32 crewcenter.com text */
  --ink-2: #524F53;
  --muted: #757275;
  --border: #E4E4E4;
  --surface: #ffffff;
  --surface-2: #ffffff; /* V32: white (was warm #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: 1023px) {
  .cc-cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .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: 1023px) { .cc-related ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .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: 1023px) { .cc-recent-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .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 (div.cc-fallback + chain) so earlier
       red rules can't win no matter their order. */
div.cc-fallback section.cc-section-card h2,
div.cc-fallback section.cc-section-card h2 a,
div.cc-fallback section.cc-section-card h2 a:visited {
  color: var(--ink) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}
div.cc-fallback section.cc-section-card h2 a:hover {
  color: var(--hilti-red) !important;
}
div.cc-fallback ul.cc-section-articles a,
div.cc-fallback ul.cc-section-articles a:visited,
div.cc-fallback ul.cc-section-articles li a,
div.cc-fallback ul.cc-section-articles li a:visited {
  color: var(--ink-2) !important;
  font-weight: 400 !important;
  text-decoration: none;
}
div.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 */
div.cc-fallback a.cc-see-all,
div.cc-fallback a.cc-see-all:visited {
  color: var(--hilti-red) !important;
  font-weight: 500 !important;
}

/* ---- Category page: trim the space above the H1 ---- */
div.cc-fallback .cc-cat-head,
div.cc-fallback .cc-section-head,
div.cc-fallback .cc-requests-head,
div.cc-fallback .cc-subs-head,
div.cc-fallback .cc-contrib-head,
div.cc-fallback .cc-community-head {
  margin-top: 8px !important;
}
div.cc-fallback .cc-cat-head h1,
div.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 ---- */
div.cc-fallback a.cc-see-all,
div.cc-fallback a.cc-see-all:visited {
  color: var(--ink) !important;
  font-weight: 500 !important;
}
div.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,
div.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,
div.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: 1023px) {
  .cc-article-wrap-3col { grid-template-columns: 200px minmax(0, 1fr) !important; }
}
@media (max-width: 599px) {
  .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: #524F53;       /* V32: crewcenter.com text + headings */
  --ink-2: #524F53;
  --muted: #757275;     /* V32: 4.76:1 on white */
}

/* 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 ---- */
div.cc-fallback .cc-page-container {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 16px 20px 32px !important;
}
div.cc-fallback h1 {
  font-size: 24px !important;
  font-weight: 500 !important;
  margin: 8px 0 16px !important;
  color: var(--ink) !important;
}
div.cc-fallback .cc-info-banner,
div.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; }
/* V35: the shared red bar shows on every page, home included */
.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; }

/* =================================================================
   CC-KB-20261023-V54
   - White background, sentence case, crewcenter.com colours/sizes (V32 block above)
   - Hilti @font-face moved to document_head.hbs ({{asset}}); nested <main> removed;
     Zendesk vote helper; i18n gaps closed; duplicate request hint removed; red #C72809 kept
   CC-KB-20261022-V31
   - Request-page form tip now uses the original theme's Dynamic Content
     placeholder (the V30 call named the sentence itself and was not found)
   CC-KB-20261022-V30
   - Theme settings removed from manifest.json (only logo + favicon
     remain); all former setting values are fixed in templates/CSS/JS.
   - Hero hint text shortened to "Need help fast? Ask the chatbot!"
   ================================================================= */


/* =================================================================
   CC-KB-20261023-V54 — design alignment (crewcenter.com + ISO 9241-11 review)
   -----------------------------------------------------------------
   Values measured on crewcenter.com (computed styles, 2026-10-22):
     text/headings #524F53, secondary #757275, red #D2051E, radius 8px,
     body 16/24, H1+H2 30/36 weight 700, H3 20/28 weight 600,
     buttons 16/600 sentence case, font hiltiFont.
   This block is last on purpose: it wins over the older QA layers above.
   ================================================================= */

/* ---- Font + base size ---- */
body, p, li, dd, span.body, .cc-article-body, .cc-article-body *,
.cc-fallback p, .cc-fallback li, .cc-fallback dd {
  font-family: 'Hilti', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: normal;
}
body { font-size: 16px; line-height: 24px; }

/* ---- Sentence case everywhere (article body keeps the author's formatting) ---- */
body *:not(.cc-article-body *):not(svg *) { text-transform: none !important; letter-spacing: normal !important; }

/* ---- Headings: same scale as crewcenter.com ---- */
.cc-hero h1, .cc-hero-text h1, .cc-article-head h1, div.cc-fallback h1,
.cc-cat-head h1, .cc-section-head h1, .cc-request-head h1, .cc-requests-head h1,
.cc-subs-head h1, .cc-contrib-head h1, .cc-community-head h1,
.cc-topics-head h2, .cc-article-body h2 {
  font-size: 30px !important; line-height: 36px !important;
  font-weight: 700 !important; color: var(--ink) !important;
}
.cc-help h3, .cc-bottom-search h3, .cc-cta-inner h3 {
  font-size: 24px !important; line-height: 32px !important;
  font-weight: 700 !important; color: var(--ink) !important;
}
.cc-cat-card h3, .cc-section-card h2, .cc-article-body h3,
.cc-feedback-card h3, .cc-related h4, .cc-helpful h4 {
  font-size: 20px !important; line-height: 28px !important;
  font-weight: 600 !important; color: var(--ink) !important;
}
.cc-article-body h2, .cc-article-body h3 { margin-top: 1.5em; }

/* ---- Body copy ---- */
.cc-article-body, .cc-article-body p, .cc-article-body li,
.cc-article-body td, .cc-article-body th { font-size: 16px; line-height: 24px; }
.cc-hero-hint { font-size: 18px !important; line-height: 28px !important; color: var(--mute) !important; }
.cc-cat-card p, .cc-cat-desc, .cc-section-card p, .cc-help p { font-size: 15px; line-height: 24px; color: var(--mute); }
.cc-recent-head span, .cc-recent-head .sub, .cc-topics-head .sub, .cat-meta,
.cc-article-meta, .cc-breadcrumb, .cc-hint, .cc-footer-bottom,
.cc-section-nav h4, .cc-on-this-page h4, .cc-toc-inline summary,
.cc-feedback-card label, .cc-recent-item .meta { font-size: 14px !important; line-height: 24px; }
.cc-recent-head span:first-child { font-weight: 600 !important; color: var(--ink); }
.cc-section-nav h4, .cc-on-this-page h4 { font-weight: 600; color: var(--ink); }
.cc-hint, .cc-footer-bottom, .cc-footer-bottom * { color: var(--mute) !important; }

/* ---- Buttons: 16/600, 8px radius, no uppercase (crewcenter.com) ---- */
.cc-btn, .cc-btn-primary, .cc-hero-ask, .cc-ask-mini-btn {
  font-size: 16px; font-weight: 600; line-height: 24px;
  border-radius: 8px; min-height: 44px; padding: 8px 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.cc-btn-lg, .cc-hero-ask { min-height: 56px; }
.cc-ask-mini-btn { padding: 8px 16px; font-size: 14px; }

/* ---- Header: 14/600 links, 44px touch targets ---- */
.cc-topbar-link, summary.cc-topbar-link { font-size: 14px !important; font-weight: 600 !important; min-height: 44px; display: inline-flex; align-items: center; }
#cc-theme-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
a.cc-brand { min-height: 44px; display: inline-flex; align-items: center; }
.cc-footer a { min-height: 44px; display: inline-flex; align-items: center; }
.cc-hero { padding: 40px 20px !important; }

/* ---- Focus: visible on every control, including search + form fields ---- */
.cc-search-row:focus-within { outline: 2px solid var(--hilti-red); outline-offset: 2px; border-radius: 8px; }
.cc-field input:focus-visible, .cc-field textarea:focus-visible, .cc-field select:focus-visible,
.cc-request-form input:focus-visible, .cc-request-form select:focus-visible, .cc-request-form textarea:focus-visible,
div.cc-fallback input:focus-visible, div.cc-fallback select:focus-visible, div.cc-fallback textarea:focus-visible {
  outline: 2px solid var(--hilti-red) !important; outline-offset: 2px;
}

/* ---- Dark mode: red used as TEXT needs a lighter tint (3.4:1 -> ~6:1 on #2B292C) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cc-ask-mini-btn,
  :root:not([data-theme="light"]) .cc-section-nav a,
  :root:not([data-theme="light"]) .cc-breadcrumb a:hover,
  :root:not([data-theme="light"]) .cc-article-body a { color: #FF5C6C !important; }
}
:root[data-theme="dark"] .cc-ask-mini-btn,
:root[data-theme="dark"] .cc-section-nav a,
:root[data-theme="dark"] .cc-breadcrumb a:hover,
:root[data-theme="dark"] .cc-article-body a { color: #FF5C6C !important; }

/* ---- Feedback fallback line ---- */
.cc-feedback-fallback { font-size: 14px; line-height: 24px; color: var(--mute); margin: 8px 0 0; }

/* ---- Article: keep the editor's red (#C72809). The older forced-colour rules
        (.cc-article-body span { color: ink !important }) beat inline styles; these
        attribute rules are more specific, so they win. ---- */
.cc-article-body [style*="color: #C72809" i], .cc-article-body [style*="color:#C72809" i],
.cc-article-body [style*="color: rgb(199, 40, 9)" i], .cc-article-body [style*="color:rgb(199,40,9)" i],
.cc-article-body [style*="color: #C72809" i] *, .cc-article-body [style*="color:#C72809" i] *,
.cc-article-body [style*="color: rgb(199, 40, 9)" i] *, .cc-article-body [style*="color:rgb(199,40,9)" i] * {
  color: #C72809 !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cc-article-body [style*="C72809" i],
  :root:not([data-theme="light"]) .cc-article-body [style*="C72809" i] *,
  :root:not([data-theme="light"]) .cc-article-body [style*="199, 40, 9"] ,
  :root:not([data-theme="light"]) .cc-article-body [style*="199, 40, 9"] * { color: #FF6B4A !important; }
}
:root[data-theme="dark"] .cc-article-body [style*="C72809" i],
:root[data-theme="dark"] .cc-article-body [style*="C72809" i] *,
:root[data-theme="dark"] .cc-article-body [style*="199, 40, 9"],
:root[data-theme="dark"] .cc-article-body [style*="199, 40, 9"] * { color: #FF6B4A !important; }

/* ---- V32 round 2: sizes/targets found by measurement ---- */
.cc-breadcrumb, .cc-breadcrumb *, .cc-section-nav li a, .cc-article-meta *,
.cc-vote-label, .cc-vote-btn, .cc-share, #cc-share span { font-size: 14px !important; }
.cc-breadcrumb a { display: inline-block; padding: 10px 0; }   /* 44px-high target without moving the layout much */
.cc-topbar-user { min-width: 44px; min-height: 44px; }
.cc-search-row input { min-height: 44px; }
.cc-search-row button { min-width: 44px; min-height: 44px; }
.cc-vote-btn, #cc-share, .cc-related a { min-height: 44px; display: inline-flex; align-items: center; }
.cc-section-nav li a { min-height: 44px; display: flex; align-items: center; }
.cc-footer-social a, .cc-footer a[aria-label] { min-width: 44px; justify-content: center; }
.cc-field input, .cc-field textarea, .cc-request-form input:not([type=submit]):not([type=checkbox]):not([type=radio]) { min-height: 44px; }

/* ---- V32 round 3: hover surface (white surfaces need a visible hover) + remaining targets ---- */
:root { --hover: #F4F4F4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hover: #38363A; } }
:root[data-theme="dark"] { --hover: #38363A; }
.cc-section-nav li a:hover, .cc-section-nav a:hover, .cc-on-this-page a:hover,
.cc-locale-list a:hover, .cc-btn-plain:hover { background: var(--hover); }
.cc-btn:not(.primary):hover { background: var(--hover); color: var(--ink); }
.cc-locale-list a { min-height: 44px; display: flex; align-items: center; }
.cc-hamburger { min-width: 44px; min-height: 44px; }
.cc-recent-item a, .cc-section-articles a { display: inline-block; padding: 10px 0; }
.cc-request-form input[type=submit], .cc-request-form button[type=submit] { min-height: 44px; border-radius: 8px; font-size: 16px; font-weight: 600; }


/* =================================================================
   CC-KB-20261023-V54 — exact crewcenter.com colour scheme + filled grey icons
   Measured on crewcenter.com (2026-10-22): page #FFFFFF; hero band #F8F8F7;
   alt band + header border #EFEBE5; text/headings/icons #524F53; secondary
   #757275; red #D2051E; footer text #4A5565 (Tailwind gray-600), footer
   border #E5E7EB. Icons there are filled, in the text colour.
   ================================================================= */
:root {
  --band-1: #F8F8F7; --band-2: #EFEBE5;
  --border: #EFEBE5; --rule: #EFEBE5; --rule-2: #EFEBE5;
  --icon: #524F53;
  --ink-band: #524F53;          /* #757275 is only 3.98:1 on #EFEBE5, so secondary text on bands uses the main grey */
  --footer-text: #4A5565; --footer-border: #E5E7EB;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --band-1: #2E2C2F; --band-2: #38363A; --icon: #D2CFD3; --ink-band: #D2CFD3; --footer-text: #D2CFD3; --footer-border: #48454A; }
}
:root[data-theme="dark"] { --band-1: #2E2C2F; --band-2: #38363A; --icon: #D2CFD3; --ink-band: #D2CFD3; --footer-text: #D2CFD3; --footer-border: #48454A; }

.cc-topbar { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: none; }
.cc-hero { background: var(--band-1) !important; }
.cc-help, .cc-bottom-search, .cc-cta-block { background: var(--band-2) !important; border-color: var(--band-2) !important; }
.cc-hero-hint, .cc-help p, .cc-bottom-search p, .cc-cta-inner p { color: var(--ink-band) !important; }
.cc-cat-card, .cc-section-card { background: var(--surface); border: 1px solid var(--border); }
.cc-footer { background: var(--surface); border-top: 1px solid var(--footer-border); }
.cc-footer a, .cc-footer-bottom, .cc-footer-bottom * { color: var(--footer-text) !important; }

/* Icons: filled, one colour (grey), except on red buttons where white is needed for contrast */
body svg { color: var(--icon); }
.cc-btn.primary svg, .cc-hero-ask svg, .cc-btn-primary svg { color: #fff; }
.cc-cat-icon, .cc-cat-icon svg, .cc-pin, .cc-lock, .cc-ask-mini-btn svg { color: var(--icon) !important; }
section.cc-help p, section.cc-help .cc-help-inner p { color: var(--ink-band) !important; }


/* =================================================================
   CC-KB-20261023-V54 — Hilti-red bottom bar like crewcenter.com
   Measured there: full-width #D2051E section directly above the footer,
   32px vertical padding, centred; H2 24/32 bold white; text 16/24 white;
   button WHITE with red text, 16/600, 8px radius, 56px high.
   ================================================================= */
.cc-help, .cc-cta-block { background: var(--hilti-red) !important; border: 0 !important; margin-top: 0 !important; }
section.cc-help, .cc-cta-block { padding: 0 !important; }
.cc-help-inner, .cc-cta-inner { padding: 32px 20px !important; }
section.cc-help h3, section.cc-help .cc-help-inner h3, .cc-help h3, .cc-cta-inner h3 { color: #fff !important; font-size: 24px !important; line-height: 32px !important; font-weight: 700 !important; }
section.cc-help p, section.cc-help .cc-help-inner p, .cc-help p, .cc-cta-inner p { color: #fff !important; font-size: 16px !important; line-height: 24px !important; }
/* Inverted primary button: white fill, red text + icon */
.cc-help .cc-btn.primary, .cc-cta-inner .cc-btn.primary {
  background: #fff !important; color: var(--hilti-red) !important; border: 1px solid #fff !important; min-height: 56px;
}
.cc-help .cc-btn.primary:hover, .cc-cta-inner .cc-btn.primary:hover { background: #F8F8F7 !important; color: var(--hilti-red-700) !important; border-color: #F8F8F7 !important; }
.cc-help .cc-btn.primary svg, .cc-cta-inner .cc-btn.primary svg { color: var(--hilti-red) !important; }
/* Secondary button on red: white outline, white text */
.cc-help .cc-btn:not(.primary) { background: transparent !important; color: #fff !important; border: 1px solid #fff !important; min-height: 56px; }
.cc-help .cc-btn:not(.primary):hover { background: rgba(255,255,255,.14) !important; color: #fff !important; }
.cc-help a:focus-visible, .cc-help button:focus-visible, .cc-cta-block a:focus-visible { outline-color: #fff !important; }
section.cc-help .cc-help-inner, .cc-cta-block .cc-cta-inner { padding: 32px 20px !important; }


/* =================================================================
   CC-KB-20261023-V54
   ================================================================= */

/* ---- Item 2: "Ask the AI" label = same font and weight as the button ("Submit a request") ---- */
.cc-btn span, .cc-btn-primary span, .cc-hero-ask span, .cc-ask-mini-btn span, button.cc-btn span[data-i18n] {
  font: inherit !important; letter-spacing: inherit !important; color: inherit !important;
}
.cc-hero-ask, .cc-ask-mini-btn, button.cc-btn { font-size: 16px; font-weight: 600 !important; letter-spacing: 0; }
.cc-ask-mini-btn { font-size: 14px; }

/* ---- Items 4 + 7: one shared red bar (footer.hbs), identical on every page ---- */
.cc-cta-block { position: relative; margin-top: 48px !important; background: var(--hilti-red) !important; border: 0 !important; padding: 0 !important; }
.cc-cta-block .cc-cta-inner {
  max-width: var(--max) !important; margin: 0 auto !important; padding: 32px 20px !important;
  display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
}
.cc-cta-block .cc-cta-phone { display: none; }
.cc-cta-block h3 { margin: 0 0 8px !important; }
.cc-cta-block p { margin: 0 !important; }
.cc-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cc-cta-block .cc-btn:not(.primary) { background: transparent !important; color: #fff !important; border: 1px solid #fff !important; min-height: 56px; }
.cc-cta-block .cc-btn:not(.primary):hover { background: rgba(255,255,255,.14) !important; color: #fff !important; }
.cc-cta-block .cc-btn:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }
@media (min-width: 1024px) {
  /* crewcenter.com: 245px section, red band 190px at the bottom, phone 156x245 overhanging the band by 55px */
  .cc-cta-block { background: transparent !important; }
  .cc-cta-block::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 190px; background: var(--hilti-red); }
  .cc-cta-block .cc-cta-inner { position: relative; flex-direction: row; align-items: flex-end; gap: 32px; min-height: 245px; padding: 0 20px !important; text-align: left; }
  .cc-cta-block .cc-cta-phone { display: block; flex: none; width: 156px; height: 245px; }
  .cc-cta-text, .cc-cta-actions { height: 190px; display: flex; align-items: center; }
  .cc-cta-text { flex: 1 1 auto; flex-direction: column; justify-content: center; align-items: flex-start; }
  .cc-cta-actions { flex: none; justify-content: flex-end; }
}

/* ---- Item 3: legal links in the footer bottom row ---- */
.cc-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px; font-size: 14px; line-height: 24px; }
.cc-legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 24px; }
.cc-footer .cc-legal a { font-size: 14px; line-height: 24px; font-weight: 700; text-decoration: none; }
.cc-footer .cc-legal a:hover, .cc-footer .cc-legal a:focus-visible { color: var(--hilti-red-700) !important; text-decoration: underline; }
:root[data-theme="dark"] .cc-footer .cc-legal a:hover, :root[data-theme="dark"] .cc-footer .cc-legal a:focus-visible { color: #FF5C6C !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cc-footer .cc-legal a:hover, :root:not([data-theme="light"]) .cc-footer .cc-legal a:focus-visible { color: #FF5C6C !important; }
}
.cc-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 599px) { .cc-footer-bottom { flex-direction: column; align-items: flex-start; } .cc-legal { justify-content: flex-start; } }

/* ---- Item 5: hero split. Centre of the screen = border between left and right half ---- */
.cc-hero { padding: 0 !important; }
.cc-hero-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.cc-hero-left { padding: 32px 24px 32px max(20px, calc(50vw - var(--max) / 2 + 20px)); min-width: 0; }
.cc-hero-left .cc-hero-inner { display: flex; flex-direction: column; align-items: flex-start !important; gap: 16px !important; padding: 0 !important; max-width: none; }
.cc-hero-left .cc-hero-text { text-align: left; }
.cc-hero-left .cc-hero-search { max-width: 560px !important; width: 100%; margin-top: 16px !important; }
.cc-hero-right { display: flex; align-items: center; justify-content: center; padding: 16px 24px; min-width: 0; }
.cc-hero-app { height: 188px; width: auto; max-width: 100%; display: block; } /* 85% of the 221px band */
:root[data-theme="dark"] .cc-hero-app { border: 1px solid var(--border); border-radius: 12px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cc-hero-app { border: 1px solid var(--border); border-radius: 12px; } }
@media (max-width: 1023px) {
  .cc-hero-split { grid-template-columns: 1fr; }
  .cc-hero-left { padding: 28px 20px 8px; }
  .cc-hero-right { padding: 8px 20px 28px; }
}

/* ---- Item 6: "New in CrewCenter Help" band uses the website's #EFEBE5 ---- */
.cc-recent { background: var(--band-2) !important; }
.cc-recent .cc-recent-head .sub, .cc-recent .cc-recent-item .meta { color: var(--ink-band) !important; }

/* ---- Item 8: article page, one right column (On this page, then In this section) ---- */
.cc-article-wrap.cc-article-wrap-2col { grid-template-columns: minmax(0, 1fr) 260px !important; gap: 32px !important; max-width: 1120px !important; align-items: start; }
.cc-article-side { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 72px); max-height: calc(100vh - 88px); overflow-y: auto; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.cc-article-side .cc-on-this-page, .cc-article-side .cc-section-nav { position: static !important; padding: 0 !important; width: auto; max-height: none; }
.cc-article-side .cc-section-nav { border-top: 1px solid var(--border); padding-top: 20px !important; }
.cc-article-side .cc-on-this-page + .cc-section-nav:first-child { border-top: 0; }
.cc-article-body p, .cc-article-body ul, .cc-article-body ol { max-width: 75ch !important; }
@media (max-width: 1023px) {
  .cc-article-wrap.cc-article-wrap-2col { grid-template-columns: minmax(0, 1fr) !important; }
  .cc-article-side { position: static; max-height: none; overflow: visible; }
  .cc-article-side .cc-on-this-page { display: none; }
  .cc-toc-inline { display: block; }
}
@media (min-width: 1024px) { .cc-toc-inline { display: none; } }

/* ---- Item 9: article images keep their proportions ---- */
.cc-article-body img { height: auto !important; max-width: 100%; }
.cc-article-body figure { max-width: 100%; }
.cc-article-body figure img { width: 100%; }
@media (max-width: 599px) {
  .cc-article-body figure, .cc-article-body figure[style*="width"], .cc-article-body img[style*="width"] { width: 100% !important; max-width: 100% !important; }
  .cc-article-body img { width: 100%; }
}

/* ---- V35 follow-ups ---- */
.cc-article-body figure { margin-left: 0; margin-right: 0; }
.cc-article-side .cc-on-this-page a { min-height: 44px; display: flex; align-items: center; }
.cc-toc-inline summary { min-height: 44px; display: flex; align-items: center; }
:root[data-theme="dark"] .cc-article-side .cc-on-this-page li.active a { color: #FF5C6C; border-left-color: #FF5C6C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cc-article-side .cc-on-this-page li.active a { color: #FF5C6C; border-left-color: #FF5C6C; }
}
/* full-bleed band; the four articles keep their own inner width */
.cc-recent { max-width: none !important; width: 100%; margin: 0 !important; border-bottom: 0; }

/* =================================================================
   CC-KB-20261023-V54
   ================================================================= */

/* ---- Item 10: user menu (avatar + name + chevron, dropdown with the account links) ---- */
.cc-user-menu { position: relative; }
.cc-user-menu summary { list-style: none; cursor: pointer; gap: 8px; }
.cc-user-menu summary::-webkit-details-marker { display: none; }
.cc-user-toggle .cc-user-avatar, .cc-user-toggle img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; border: 1px solid var(--border); }
.cc-user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-user-toggle svg { transition: transform .15s ease; }
.cc-user-menu[open] .cc-user-toggle svg { transform: rotate(180deg); }
.cc-user-list {
  position: absolute; top: 100%; right: 0; margin-top: 6px; min-width: 220px; z-index: 100;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 0; box-shadow: 0 6px 18px rgba(0,0,0,.12); display: flex; flex-direction: column;
}
.cc-user-list a, .cc-user-list button, .cc-user-list .cc-user-item {
  display: flex; align-items: center; min-height: 44px; width: 100%; padding: 6px 16px; margin: 0;
  background: transparent; border: 0; border-radius: 0; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 14px; line-height: 24px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.cc-user-list a:hover, .cc-user-list button:hover { background: var(--hover); color: var(--hilti-red-700); }
.cc-user-list a:focus-visible, .cc-user-list button:focus-visible, .cc-user-toggle:focus-visible { outline: 2px solid var(--hilti-red); outline-offset: -2px; }
:root[data-theme="dark"] .cc-user-list a:hover, :root[data-theme="dark"] .cc-user-list button:hover { color: #FF5C6C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cc-user-list a:hover, :root:not([data-theme="light"]) .cc-user-list button:hover { color: #FF5C6C; } }
@media (max-width: 599px) { .cc-user-list { min-width: 0; width: min(260px, calc(100vw - 32px)); } }

/* ---- Item 11: "New in CrewCenter Help" as four cards, like the Help topics cards ---- */
.cc-recent-inner { max-width: var(--max) !important; padding-left: 20px; padding-right: 20px; }
.cc-recent-head { justify-content: flex-start !important; text-align: left; gap: 12px; }
.cc-recent-list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; align-items: stretch; }
.cc-recent-item {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 132px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cc-recent-item:hover { border-color: var(--ink); }
.cc-recent-item:focus-within { outline: 2px solid var(--hilti-red); outline-offset: 2px; }
.cc-recent-sec { font-size: 14px; line-height: 24px; color: var(--ink-band); }
.cc-recent-item a.cc-recent-title {
  font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cc-recent-item a.cc-recent-title::after { content: ""; position: absolute; inset: 0; border-radius: 8px; } /* whole card clickable */
.cc-recent-item a.cc-recent-title:hover { color: var(--hilti-red-700); }
.cc-recent-item a.cc-recent-title:focus-visible { outline: none; }
.cc-recent-item .meta { margin-top: auto !important; font-size: 14px !important; line-height: 24px; }
:root[data-theme="dark"] .cc-recent-item a.cc-recent-title:hover { color: #FF5C6C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cc-recent-item a.cc-recent-title:hover { color: #FF5C6C; } }
@media (max-width: 1023px) { .cc-recent-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 599px) { .cc-recent-list { grid-template-columns: 1fr !important; } }

/* ---- Item 12: hero = one centred group: [heading + hint | Ask the AI] over the search, then a thin gap, then the image ---- */
.cc-hero { padding: 32px 20px !important; }
.cc-hero-split { display: flex; justify-content: center; align-items: center; gap: 40px; max-width: var(--max); margin: 0 auto; }
.cc-hero-left { flex: 0 1 560px; min-width: 0; padding: 0 !important; }
.cc-hero-left .cc-hero-inner { flex-direction: row !important; align-items: center !important; justify-content: space-between; gap: 24px !important; flex-wrap: wrap; }
.cc-hero-left .cc-hero-search { max-width: none !important; width: 100%; margin-top: 16px !important; }
.cc-hero-right { flex: none; padding: 0 !important; }
@media (max-width: 1023px) {
  .cc-hero { padding: 28px 20px !important; }
  .cc-hero-split { flex-direction: column; gap: 24px; }
  .cc-hero-left { flex: none; width: 100%; max-width: 560px; }
  .cc-hero-left .cc-hero-inner { justify-content: flex-start; }
}

/* ---- Item 13: separator bar between "On this page" and "In this section" (#EFEBE5, 6px) ---- */
.cc-article-side .cc-section-nav { border: 0 !important; box-shadow: none; padding-top: 0 !important; overflow: visible; }
.cc-article-side { gap: 20px; }

/* ---- Item 14: search blocks on white, with a thin dark-grey frame on the field ---- */
.cc-bottom-search { background: var(--surface) !important; border-top: 0 !important; border-bottom: 0 !important; }
.cc-search-row { border: 1px solid var(--icon) !important; border-radius: 8px; background: var(--surface); }
.cc-search-row:hover { border-color: var(--ink) !important; }
.cc-recent-inner { max-width: 1088px !important; } /* cards line up with the Help topics cards (1048px of content) */

.cc-recent-head { flex-wrap: wrap; row-gap: 0; }


/* =================================================================
   CC-KB-20261023-V54
   ================================================================= */

/* ---- Item 15: top bar stays on ONE row; items shrink step by step (no hamburger) ---- */
.cc-topbar-inner { flex-wrap: nowrap !important; gap: 16px; }
.cc-topbar-actions { flex-wrap: nowrap !important; flex: 0 0 auto; gap: 0; }
.cc-topbar-actions > *, .cc-topbar-link, .cc-topbar-link * { white-space: nowrap; }
.cc-brand { flex: 0 1 auto; min-width: 0; }
.cc-brand-lockup { max-width: 100%; height: 24px; width: auto; object-fit: contain; object-position: left center; min-width: 200px; }
.cc-locale-short { display: none; }
.cc-vh-label { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* V48: the former step-by-step header queries (902/779/666/583 px) were replaced by the three-tier system at the end of this file. */
.cc-topbar-link.cc-submit-link svg, .cc-login-link .cc-product-icon { flex: none; }

/* ---- Item 16: every footer text = Hilti 14px regular, same colour (guard rule) ---- */
.cc-footer, .cc-footer a, .cc-footer-bottom, .cc-footer-bottom *, .cc-footer .cc-legal a, .cc-footer-nav .nav-link, .cc-back-to-account span {
  font-family: var(--font-display, Hilti, ui-sans-serif, system-ui, sans-serif); font-size: 14px; font-weight: 400 !important; line-height: 24px;
}
.cc-footer .cc-legal a { text-decoration: none; }
.cc-footer .cc-legal a:hover, .cc-footer .cc-legal a:focus-visible { text-decoration: underline; }

/* ---- Item 17: two identical separator bars between "On this page" and the section block ---- */
.cc-side-bars { display: flex; flex-direction: column; gap: 8px; }
.cc-side-bars i { display: block; height: 6px; border-radius: 3px; background: var(--band-2); }
.cc-on-this-page[style*="none"] + .cc-side-bars { display: none; }

/* V48: the former 526 px wrap rule is replaced by the compact-header rule at the end of this file. */

/* =================================================================
   CC-KB-20261023-V54
   ================================================================= */

/* ---- Item 19: article search block inside the article column, centred in the article body, 32px under Related articles ---- */
.cc-article .cc-bottom-search { margin: 32px 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
.cc-article .cc-bottom-search-inner { max-width: 620px; margin: 0 auto; padding: 0 !important; text-align: center; }
.cc-article .cc-bottom-search h3 { margin: 0 0 16px; }

/* ---- Items 20 + 21: feedback folded by default; 16px gap above Send feedback ---- */
.cc-feedback-details summary { list-style: none; cursor: pointer; position: relative; padding-right: 48px; min-height: 44px; }
.cc-feedback-details summary::-webkit-details-marker { display: none; }
.cc-feedback-details summary::after {
  content: ""; position: absolute; right: 12px; top: 10px; width: 10px; height: 10px;
  border-right: 2px solid var(--icon); border-bottom: 2px solid var(--icon); transform: rotate(45deg); transition: transform .15s ease;
}
.cc-feedback-details[open] summary::after { transform: rotate(-135deg); top: 16px; }
.cc-feedback-details summary:focus-visible { outline: 2px solid var(--hilti-red); outline-offset: 4px; border-radius: 4px; }
.cc-feedback-top { display: block; }
.cc-feedback-top h3 { margin: 0 0 4px; }
.cc-feedback-top .cc-feedback-sub { margin: 0 0 8px; }
.cc-feedback-top label { display: block; cursor: pointer; }
.cc-feedback-details .cc-feedback-form { margin-top: 8px; }
.cc-feedback-details .cc-feedback-actions { margin-top: 16px !important; }

/* ---- Item 23: Submit a request page, tighter intro, no grey bar ---- */
.cc-request-head { margin: 16px 0 8px !important; }
div.cc-fallback .cc-email-disclaimer, .cc-email-disclaimer {
  border: 0 !important; border-left: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 0 8px !important;
}
#cc-form-tip.cc-form-tip { margin: 0 0 8px !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
.cc-request-form { padding-top: 0 !important; margin-top: 0 !important; }
.cc-request-form #new-request-form > :first-child { margin-top: 0; }

/* =================================================================
   CC-KB-20261023-V54 — Submit a request: one type scale, taken from crewcenter.com
   Measured there (Demo Request form): text 16/24, inputs 16/24, buttons 16/24, small text 13px.
   Here: all running text and hints 16/24, inputs 16/24, labels 14/24 (600), messages 14/20, button 16/24.
   The labels stay at 14px (not the website's 13px) so no text on the page is under 14px.
   ================================================================= */
.cc-email-disclaimer, div.cc-fallback .cc-email-disclaimer, #cc-form-tip.cc-form-tip, #cc-form-tip.note {
  font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important;
}
.cc-request-form p, .cc-request-form [data-garden-id="forms.input_hint"], .cc-request-form [data-garden-id="forms.file_upload"] {
  font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important;
}
.cc-request-form label, .cc-request-form [data-garden-id="forms.input_label"], .cc-request-form [data-garden-id="forms.input_label"] span {
  font-size: 14px !important; line-height: 24px !important; font-weight: 600 !important;
}
.cc-request-form [data-garden-id="forms.input_message"] { font-size: 14px !important; line-height: 20px !important; }
.cc-request-form input, .cc-request-form textarea, .cc-request-form select,
.cc-request-form [data-garden-id="forms.input"], .cc-request-form [data-garden-id="forms.textarea"], .cc-request-form [data-garden-id="forms.faux_input"] {
  font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important;
}
.cc-request-form button[type="submit"], .cc-request-form button[type="submit"] * { font-size: 16px !important; line-height: 24px !important; font-weight: 600 !important; }

/* =================================================================
   CC-KB-20261023-V54 — error page buttons (they were red/red with unreadable text and oversized icons)
   ================================================================= */
.cc-error-actions { gap: 12px; }
.cc-error-actions .cc-btn-primary, .cc-error-actions .cc-btn-plain {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; width: auto; padding: 0 24px; border-radius: 8px;
  font-family: inherit; font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.cc-error-actions svg { width: 20px; height: 20px; flex: none; }
.cc-error-actions .cc-btn-primary { background: var(--hilti-red) !important; color: #fff !important; border: 1px solid var(--hilti-red); }
.cc-error-actions .cc-btn-primary svg { color: #fff !important; }
.cc-error-actions .cc-btn-primary:hover { background: var(--hilti-red-700) !important; border-color: var(--hilti-red-700); }
.cc-error-actions .cc-btn-plain { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--icon); }
.cc-error-actions .cc-btn-plain svg { color: var(--icon) !important; }
.cc-error-actions .cc-btn-plain:hover { background: var(--hover) !important; }
.cc-error-actions .cc-btn-plain span { color: inherit !important; }
.cc-error-actions a:focus-visible, .cc-error-actions button:focus-visible { outline: 2px solid var(--hilti-red); outline-offset: 2px; }
.cc-error-inner .cc-error-icon { display: block; margin: 0 auto 20px; }

/* =================================================================
   CC-KB-20261023-V54 — search results page: tips, filters, sort
   ================================================================= */
.cc-search-tips { margin: 12px 0 0; font-size: 14px; line-height: 24px; color: var(--ink-band); }
.cc-search-tips strong { font-weight: 600; color: var(--ink); margin-right: 6px; }
.cc-search-tips span { margin-right: 14px; display: inline-block; }
.cc-filter-group, .cc-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; }
.cc-filter-label, .cc-sort-label { font-size: 14px; line-height: 24px; font-weight: 600; color: var(--ink); margin-right: 4px; }
.cc-chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 16px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--icon); border-radius: 8px;
  font-family: inherit; font-size: 14px; line-height: 24px; font-weight: 400; text-decoration: none; cursor: pointer;
}
.cc-chip .n { color: var(--ink-band); }
.cc-chip:hover { border-color: var(--ink); background: var(--hover); }
.cc-chip.is-selected { background: var(--ink); color: var(--surface); border-color: var(--ink); font-weight: 600; }
.cc-chip.is-selected .n { color: inherit; }
.cc-chip:focus-visible { outline: 2px solid var(--hilti-red); outline-offset: 2px; }
.cc-results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 20px; }
.cc-results-bar .cc-note { margin: 0; }
.cc-results-bar .cc-sort { margin: 0; }
.cc-sort[hidden] { display: none; }
.cc-result-path { margin: 2px 0 6px; font-size: 14px; line-height: 24px; color: var(--ink-band); }
.cc-result-path span + span::before { content: "›"; margin: 0 6px; }

/* V41 fix: generic ".cc-fallback a:not(...)" link rules beat the chip colours; match their specificity. */
div.cc-fallback a.cc-chip:not(.cc-btn):not(.nav-link), div.cc-fallback .cc-sort button.cc-chip { color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--icon); }
div.cc-fallback a.cc-chip:not(.cc-btn):not(.nav-link):hover, div.cc-fallback .cc-sort button.cc-chip:hover { background: var(--hover); border-color: var(--ink); color: var(--ink); text-decoration: none; }
div.cc-fallback a.cc-chip.is-selected:not(.cc-btn):not(.nav-link), div.cc-fallback .cc-sort button.cc-chip.is-selected,
div.cc-fallback a.cc-chip.is-selected:not(.cc-btn):not(.nav-link):hover, div.cc-fallback .cc-sort button.cc-chip.is-selected:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); font-weight: 600; }
div.cc-fallback .cc-chip .n { color: inherit; opacity: .8; }

/* ---- V42 (20261023): article side column = ONE separator bar, then "More articles from the same category" ----
   The list is section.articles (Zendesk documents the first 10 only). The current article is not repeated:
   script.js hides the whole block and its bar when no other article is left. ---- */
.cc-side-bars { gap: 0; }
.cc-article-side .cc-section-nav li.active { display: none !important; }
.cc-side-bars[hidden], .cc-article-side .cc-section-nav[hidden] { display: none !important; }

/* ---- V42 (20261023): hero - "Ask the AI" stays to the right of heading + hint in every language ----
   Cause in V41: the row could wrap, and the longer German/Czech/Italian/Slovak strings pushed the button underneath.
   From 600px up the row no longer wraps: the text block shrinks and wraps onto two lines instead. English is unchanged
   (it already fits). Below 600px the row still wraps. ---- */
@media (min-width: 600px) {
  .cc-hero-left .cc-hero-inner { flex-wrap: nowrap; }
  .cc-hero-left .cc-hero-text { flex: 0 1 auto; min-width: 0; }
}

/* ---- V43 (20261023): article side column - no separator bar, no line under the heading.
   "More articles from the same category" is styled exactly like the active "On this page" row (Overview):
   Hilti red text, 2px red bar on the left, 13.5px / weight 500, 44px row. ---- */
.cc-article-side .cc-side-bars { display: none !important; }
.cc-article-side .cc-section-nav h4 {
  display: flex; align-items: center; min-height: 44px;
  margin: 0 0 2px; padding: 5px 10px;
  border: 0; border-left: 2px solid var(--hilti-red);
  color: var(--hilti-red); font-size: 13.5px !important; font-weight: 500; line-height: 1.4 !important;
  text-transform: none; letter-spacing: normal;
}
:root[data-theme="dark"] .cc-article-side .cc-section-nav h4 { color: #FF5C6C; border-left-color: #FF5C6C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cc-article-side .cc-section-nav h4 { color: #FF5C6C; border-left-color: #FF5C6C; }
}
/* V43: align the article titles with the heading text (same 12px inset as the "On this page" rows) */
.cc-article-side .cc-section-nav li a { padding-left: 10px; }

/* ---- V44 (20261023): Print button next to Share + print layout ---- */
.cc-article-meta .cc-print { margin-left: auto; cursor: pointer; }
.cc-article-meta .cc-print + .share { margin-left: 0; }
.cc-article-meta .cc-print:hover { color: var(--hilti-red); }

@media print {
  @page { margin: 16mm 14mm; }
  html, body { background: #fff !important; color: #000 !important; }
  /* hide everything that is navigation, interaction or promotion */
  .cc-topbar, .cc-footer, .cc-search-strip, .cc-article-side, .cc-toc-inline, .cc-feedback-widget, .cc-helpful,
  .cc-related, .cc-bottom-search, .cc-back-to-top, .cc-article-meta .share, .cc-article-meta .sep,
  #launcher, iframe#launcher, iframe[title*="essaging"], iframe[title*="Messaging"], [data-ask-ai], .cc-cta-block { display: none !important; }
  /* one clean column */
  .cc-article-wrap, .cc-article-wrap-2col { display: block !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .cc-article { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; border: 0 !important; }
  .cc-article-head h1 { font-size: 22pt; line-height: 1.2; margin: 0 0 6pt; }
  .cc-article-meta { font-size: 9pt; color: #555 !important; }
  .cc-article-body { font-size: 11pt; line-height: 1.5; color: #000 !important; }
  .cc-article-body h2, .cc-article-body h3, .cc-article-body h4 { break-after: avoid; }
  .cc-article-body img, .cc-article-body figure, .cc-article-body table, .cc-article-body pre { break-inside: avoid; max-width: 100% !important; height: auto; }
  .cc-article-body a { color: #000 !important; text-decoration: underline; }
  .cc-article-body a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555; word-break: break-all; }
  .cc-article-body details > summary { font-weight: 700; }
  /* small source line at the end of the printout */
  .cc-article-body:after { content: "Hilti CrewCenter Help Center"; display: block; margin-top: 18pt; padding-top: 6pt; border-top: 1px solid #999; font-size: 8.5pt; color: #555; }
}
/* V44: same touch size and text size as the Share button */
#cc-print { min-height: 44px; display: inline-flex; align-items: center; }
#cc-print span { font-size: 14px !important; }

/* ---- V45 (20261023): search control per the CrewCenter UX review (Thomas Scott, 2026-10-23) ----
   - search icon and clear icon 24 px (were 16 px); icons supplied by Thomas (brand-compliant, filled)
   - clear icon: own button with a 44 x 44 px hit area and a pointer cursor (the browser's built-in "x" is hidden)
   - the search button is neutral light grey instead of Hilti red; hover/focus stay clearly visible ---- */
.cc-search-row input[type="search"]::-webkit-search-cancel-button,
.cc-search-row input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.cc-search-row input[type="search"]::-ms-clear { display: none; }
.cc-search-row button svg { width: 24px; height: 24px; flex: 0 0 24px; }
.cc-search-row button.cc-search-clear,
.cc-search-top .cc-search-row button.cc-search-clear {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px;
  width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; margin: 0;
  background: transparent; border: 0; border-radius: 6px; color: var(--ink); cursor: pointer;
}
.cc-search-row button.cc-search-clear:hover,
.cc-search-top .cc-search-row button.cc-search-clear:hover { background: var(--hover, #F4F4F4); color: var(--ink); }
.cc-search-row button.cc-search-clear:focus-visible { outline: 2px solid var(--hilti-red); outline-offset: -2px; }
.cc-search-row button.cc-search-clear[hidden] { display: none !important; }
.cc-search-row button[type="submit"],
.cc-search-top .cc-search-row button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--hover, #F4F4F4); color: var(--ink); border: 0; border-radius: 6px;
  min-width: 44px; min-height: 44px; padding: 0 10px;
}
.cc-search-row button[type="submit"]:hover,
.cc-search-top .cc-search-row button[type="submit"]:hover { background: var(--border); color: var(--ink); }
.cc-search-row button[type="submit"]:focus-visible { outline: 2px solid var(--hilti-red); outline-offset: 2px; }

/* ---- V46 (20261023): category page - article lists inside the section cards ----
   Problem (UX review 2026-10-23, section 8.4): the browser bullet sat next to the LAST line of a wrapped title, because
   an earlier rule made the link inline-block. Fix: no browser bullet; our own small bullet is pinned to the FIRST line
   and the title is a block, so wrapped titles hang correctly. Titles are underlined so they read as links
   (colour decisions for inline links are still open and untouched). ---- */
div.cc-fallback ul.cc-section-articles { list-style: none; padding-left: 0; }
div.cc-fallback ul.cc-section-articles li {
  list-style: none; display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 0;
}
div.cc-fallback ul.cc-section-articles li::before {
  content: ""; flex: 0 0 5px; width: 5px; height: 5px; margin-top: 19px; border-radius: 50%; background: var(--icon);
}
div.cc-fallback ul.cc-section-articles li a:not(.cc-btn):not(.nav-link),
div.cc-fallback ul.cc-section-articles li a:not(.cc-btn):not(.nav-link):visited {
  display: block; flex: 1 1 auto; min-width: 0; padding: 10px 0; line-height: 24px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--mute-2);
}
div.cc-fallback ul.cc-section-articles li a:not(.cc-btn):not(.nav-link):hover { text-decoration: underline; text-decoration-color: currentColor; }
div.cc-fallback ul.cc-section-articles li a:focus-visible { outline: 2px solid var(--hilti-red); outline-offset: 2px; border-radius: 2px; }
div.cc-fallback ul.cc-section-articles li a svg { display: inline-block; vertical-align: -2px; margin-left: 6px; }

/* ---- V47 (20261023): article side navigation, UX review section 7 ----
   No vertical line any more (it looked like a fixed step indicator). The current section is shown in red only, and it now
   follows the reader (scroll tracking in script.js). "More articles from the same category" uses the same red-text
   treatment without the line. Anchor jumps keep the heading clear of the sticky header. ---- */
.cc-article-side .cc-on-this-page a { border-left: 0 !important; padding-left: 12px; }
.cc-article-side .cc-on-this-page li.active a { color: var(--hilti-red); }
.cc-article-side .cc-section-nav h4 { border-left: 0; padding-left: 12px; }
:root[data-theme="dark"] .cc-article-side .cc-on-this-page li.active a { color: #FF5C6C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cc-article-side .cc-on-this-page li.active a { color: #FF5C6C; }
}
.cc-article-body h2 { scroll-margin-top: 96px; }

/* =================================================================
   V48 (20261023) - UX review 2026-10-23 (Thomas Scott)
   BREAKPOINT SYSTEM (replaces ~15 ad-hoc values; every media query in this file now uses one of these):
     mobile   : up to 599 px          tablet : 600 - 1023 px          desktop : 1024 px and up
   Header per tier:
     desktop : logo | theme toggle | language (full name) | CrewCenter login | Submit a request | profile
     tablet  : same items, but labels shrink: language = globe + code, login/submit = icon only, profile = avatar
     mobile  : logo | language (globe + code) | profile (or "Sign in") | burger menu
               burger menu = Submit a request + dark/light mode (icon + text each); the CrewCenter-account shortcut is hidden
     narrow  : when the logo (about 300 px wide at full size) and the icons no longer fit on one row (below 540 px) both are centred, logo above icons
   Side margins on mobile: 24 px.
   ================================================================= */
.cc-globe { display: none; flex: none; }
.cc-more-menu { display: none; position: relative; }
.cc-store-links { display: none; }

/* ---- tablet and below: shorter labels ---- */
@media (max-width: 1023px) {
  .cc-locale-full { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cc-locale-short { display: inline; }
  .cc-globe { display: inline-block; }
  .cc-submit-text, .cc-login-text, .cc-user-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cc-topbar-link { padding-left: 10px; padding-right: 10px; }
}

/* ---- mobile ---- */
@media (max-width: 599px) {
  :root { --gutter: max(24px, env(safe-area-inset-left, 0px)); --gutter-right: max(24px, env(safe-area-inset-right, 0px)); }
  .cc-hide-mobile { display: none !important; }
  .cc-more-menu { display: block; }
  .cc-topbar-inner { gap: 8px; }
  .cc-brand-lockup { min-width: 0; max-width: 100%; }
  .cc-more-toggle { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 !important; }
  .cc-more-toggle::-webkit-details-marker { display: none; }
  .cc-more-toggle svg { width: 24px; height: 24px; }
  .cc-more-menu[open] .cc-more-toggle { color: var(--hilti-red); }
  .cc-more-list {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: min(280px, calc(100vw - 48px));
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.16);
  }
  .cc-more-item {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: 6px;
    background: transparent; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; text-decoration: none;
  }
  .cc-more-item svg { width: 24px; height: 24px; flex: none; color: var(--icon); }
  .cc-more-item:hover, .cc-more-item:focus-visible { background: var(--hover); color: var(--hilti-red); }
  .cc-more-item:focus-visible { outline: 2px solid var(--hilti-red); outline-offset: -2px; }
  .cc-theme-toggle-menu .ico-sun { display: none; }
  .cc-theme-toggle-menu .ico-moon { display: block; }
  :root[data-theme="dark"] .cc-theme-toggle-menu .ico-sun { display: block; }
  :root[data-theme="dark"] .cc-theme-toggle-menu .ico-moon { display: none; }
  :root[data-theme="light"] .cc-theme-toggle-menu .ico-sun { display: none; }
  :root[data-theme="light"] .cc-theme-toggle-menu .ico-moon { display: block; }
  /* profile menu and language list must stay inside the screen */
  .cc-locale-list, .cc-user-list { right: 0; left: auto; max-width: calc(100vw - 48px); }
  /* store links, only here: they sit directly under "Back to your CrewCenter account" */
  .cc-store-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 12px 0 0; font-size: 14px; line-height: 24px; color: var(--ink-2); }
  .cc-store-links a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
  .cc-store-links a:hover { color: var(--hilti-red); }
  /* mobile side margins 24 px (home hero and the pages that use their own padding) */
  .cc-hero { padding-left: 24px !important; padding-right: 24px !important; }
  .cc-hero-left, .cc-hero-right { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ---- narrow phones: logo and icons centred when they cannot share one row (the only component-level threshold; 540 px = logo 300 + icons 170 + gaps and margins) ---- */
@media (max-width: 539px) {
  .cc-topbar-inner { flex-wrap: wrap !important; justify-content: center; row-gap: 4px; }
  .cc-brand { flex: 1 1 100%; justify-content: center; }
  .cc-brand-lockup { object-position: center; }
  .cc-topbar-actions { flex: 1 1 100% !important; justify-content: center !important; }
}

/* ---- recommended articles (no-results page) ---- */
.cc-recommended { margin-top: 32px; max-width: 760px; }
.cc-recommended h3 { font-size: 18px; font-weight: 600; margin: 0 0 12px; color: var(--ink); }
.cc-recommended ul { list-style: none; margin: 0; padding: 0; }
.cc-recommended li { border-top: 1px solid var(--border); }
.cc-recommended li:last-child { border-bottom: 1px solid var(--border); }
.cc-recommended a:not(.cc-btn) { display: block; padding: 12px 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mute-2); line-height: 24px; }
.cc-recommended a:not(.cc-btn):hover { color: var(--hilti-red); text-decoration-color: currentColor; }
.cc-empty-search { text-align: left; padding: 24px 0 0; }

/* (V48 blue article links were replaced by the V53 link system at the end of this file.) */

/* ---- V48: DARK MODE - one authoritative palette (UX review 5.1 / 5.2) ----
   Why: dark values were defined in several older blocks that partly overrode each other (e.g. header #121212 next to page
   #0F1013, and a blue-grey #22252F as the separator band). This block comes last and wins everywhere.
   What: the near-black is lifted to a lighter warm grey in the family of the Hilti text grey #524F53 (hue 300, same warm
   cast), and the blue-grey section tone is replaced by a neutral warm grey step. Text and the red accent are unchanged.
   STATUS: these greys are derived from #524F53, not copied from a published Hilti dark-mode specification
   (none found on 2026-10-23); to be confirmed by Thomas Scott / Hilti brand. All dark values live ONLY in this block.
     page #232124 | surface #2B292C | band-1 #2E2C2F | band-2 / hover #38363A | border #48454A | text #ECEDEF | muted #A39FA5 */
:root[data-theme="dark"] {
  --bg: #232124; --fg: #ECEDEF; --surface: #2B292C; --surface-2: #2E2C2F; --paper: #2B292C; --cream: #2E2C2F;
  --border: #48454A; --rule: #48454A; --rule-2: #48454A; --muted: #A39FA5; --mute: #A39FA5; --mute-2: #8E8A90;
  --ink: #ECEDEF; --ink-2: #D2CFD3; --muted-strong: #D2CFD3; --hover: #38363A; --band-1: #2E2C2F; --band-2: #38363A;
  --icon: #D2CFD3; --ink-band: #D2CFD3; --footer-text: #D2CFD3; --footer-border: #48454A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #232124; --fg: #ECEDEF; --surface: #2B292C; --surface-2: #2E2C2F; --paper: #2B292C; --cream: #2E2C2F;
    --border: #48454A; --rule: #48454A; --rule-2: #48454A; --muted: #A39FA5; --mute: #A39FA5; --mute-2: #8E8A90;
    --ink: #ECEDEF; --ink-2: #D2CFD3; --muted-strong: #D2CFD3; --hover: #38363A; --band-1: #2E2C2F; --band-2: #38363A;
    --icon: #D2CFD3; --ink-band: #D2CFD3; --footer-text: #D2CFD3; --footer-border: #48454A;
  }
}

.cc-store-links > span { flex: 1 1 100%; }

/* ---- V48: mobile side margin = 24 px in TOTAL (UX review 2.4) ----
   Earlier the page gutter (16 px) and the inner container padding (20 px) were added together (36 px). On mobile the
   gutter is 24 px (see :root above) and the nested container no longer adds its own padding. */
@media (max-width: 599px) {
  .cc-page-container { padding-left: 24px; padding-right: 24px; }
  div.cc-fallback .cc-page-container { padding-left: 0 !important; padding-right: 0 !important; }
}
@media (max-width: 599px) {
  .cc-article-wrap, .cc-article-wrap-2col, .cc-article-wrap.cc-article-wrap-2col { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ---- V49 (20261023): dark-mode logo + TOC position marker ----
   1) Dark lockup (white wordmark, Thomas Scott): two <img> in header.hbs, CSS shows one. The original brand-lockup.svg is unchanged.
   2) "On this page": the current section gets a short red line on its left, the text stays normal (V47 had removed the line AND turned
      the whole text red). There is still no continuous rail: every row keeps a transparent 2 px border so nothing shifts. ---- */
.cc-brand-lockup--dark { display: none; }
:root[data-theme="dark"] .cc-brand-lockup--light { display: none; }
:root[data-theme="dark"] .cc-brand-lockup--dark { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cc-brand-lockup--light { display: none; }
  :root:not([data-theme="light"]) .cc-brand-lockup--dark { display: inline; }
}
.cc-article-side .cc-on-this-page a { border-left: 2px solid transparent !important; padding-left: 10px; }
.cc-article-side .cc-on-this-page li.active a { color: var(--ink); border-left-color: var(--hilti-red) !important; }
:root[data-theme="dark"] .cc-article-side .cc-on-this-page li.active a { color: var(--ink); border-left-color: #FF5C6C !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cc-article-side .cc-on-this-page li.active a { color: var(--ink); border-left-color: #FF5C6C !important; }
}

/* ---- V52 (20261023) ---- */
/* 1) Localized hero graphics are transparent cut-outs (PNG), so the dark-mode frame that suited the old opaque JPG is removed. */
:root[data-theme="dark"] .cc-hero-app { border: 0; border-radius: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cc-hero-app { border: 0; border-radius: 0; } }

/* 2) Header: no icon-only stage. Full labels from 1024 px up (measured: the widest case, Slovak signed in, needs about 960 px); below
      1024 px the compact header with the burger menu (language = globe + code, profile, burger). The previous tablet band (600-1023 px)
      showed four icons without text; it is gone, so the mobile header rules now start at 1023 px. Page margins etc. keep their own
      599 px breakpoint. */
@media (max-width: 1023px) {
  .cc-hide-mobile { display: none !important; }
  .cc-more-menu { display: block; }
  .cc-topbar-inner { gap: 8px; }
  .cc-brand-lockup { min-width: 0; max-width: 100%; }
  .cc-more-toggle { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 !important; }
  .cc-more-toggle::-webkit-details-marker { display: none; }
  .cc-more-toggle svg { width: 24px; height: 24px; }
  .cc-more-menu[open] .cc-more-toggle { color: var(--hilti-red); }
  .cc-more-list {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: min(280px, calc(100vw - 48px));
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.16);
  }
  .cc-more-item {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: 6px;
    background: transparent; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; text-decoration: none;
  }
  .cc-more-item svg { width: 24px; height: 24px; flex: none; color: var(--icon); }
  .cc-more-item:hover, .cc-more-item:focus-visible { background: var(--hover); color: var(--hilti-red); }
  .cc-more-item:focus-visible { outline: 2px solid var(--hilti-red); outline-offset: -2px; }
  .cc-theme-toggle-menu .ico-sun { display: none; }
  .cc-theme-toggle-menu .ico-moon { display: block; }
  :root[data-theme="dark"] .cc-theme-toggle-menu .ico-sun { display: block; }
  :root[data-theme="dark"] .cc-theme-toggle-menu .ico-moon { display: none; }
  :root[data-theme="light"] .cc-theme-toggle-menu .ico-sun { display: none; }
  :root[data-theme="light"] .cc-theme-toggle-menu .ico-moon { display: block; }
  .cc-locale-list, .cc-user-list { right: 0; left: auto; max-width: calc(100vw - 48px); }
  /* the profile shows its avatar (or "Sign in"); its name is only in the profile menu */
}

/* 3) Search bar: the red focus frame inside/around the field is removed (it came from the global red input outline, the red
      focus-within outline on the whole row, and the red outline on the clear/search buttons). The focus stays visible, as keyboard
      users need, but neutral: the row's frame turns dark grey and 2 px strong. */
.cc-search-row:focus-within,
div.cc-fallback .cc-search-row:focus-within { outline: none !important; border-color: var(--ink) !important; box-shadow: 0 0 0 1px var(--ink); }
.cc-search-row input:focus,
.cc-search-row input:focus-visible,
div.cc-fallback .cc-search-row input:focus,
div.cc-fallback .cc-search-row input:focus-visible,
.cc-hero-search .cc-search-row input:focus-visible { outline: none !important; box-shadow: none; }
.cc-search-row button.cc-search-clear:focus-visible,
.cc-search-row button[type="submit"]:focus-visible { outline: 2px solid var(--ink) !important; outline-offset: -2px; }

/* 4) Text alignment set in the Zendesk editor (e.g. <p class="wysiwyg-text-align-center">) */
.wysiwyg-text-align-center { text-align: center; }

/* ---- V53 (20261023): LINK SYSTEM, replaces the blue links of V48/V50/V51 (blue was dropped after review) ----
   Like hilti.de: links are the text grey, no underline, red on hover.
   Exceptions: links inside article text and the breadcrumb ("hierarchy navigation") are grey WITH underline, red on hover.
   The generic rule skips interface components that keep their own look: buttons, chips, top-bar items and logo, menu items, whole-card
   links, tabs, the "On this page" list (red line marker), autocomplete rows, social icons, result rows (.cc-article-list: the title
   has its own ink/red-hover rule) and visually hidden links. Broad selector with !important because ~50 earlier rules set colours and
   underlines per link class. ---- */
a:not(.cc-btn):not(.cc-btn-plain):not(.cc-btn-primary):not(.cc-chip):not(.cc-topbar-link):not(.cc-brand):not(.cc-more-item):not(.cc-user-item):not(.cc-cat-card):not(.cc-section-card):not(.cc-topic-card):not(.cc-escalation-badge):not(.visually-hidden):not(.cc-tabs a):not(.cc-on-this-page a):not(.cc-toc-inline a):not(.cc-autocomplete a):not(.cc-footer-social a):not(.cc-user-menu a):not(.cc-locale-picker a):not(.cc-more-menu a):not(.cc-article-list a):not(.cc-article-body a):not(.cc-breadcrumb a),
a:not(.cc-btn):not(.cc-btn-plain):not(.cc-btn-primary):not(.cc-chip):not(.cc-topbar-link):not(.cc-brand):not(.cc-more-item):not(.cc-user-item):not(.cc-cat-card):not(.cc-section-card):not(.cc-topic-card):not(.cc-escalation-badge):not(.visually-hidden):not(.cc-tabs a):not(.cc-on-this-page a):not(.cc-toc-inline a):not(.cc-autocomplete a):not(.cc-footer-social a):not(.cc-user-menu a):not(.cc-locale-picker a):not(.cc-more-menu a):not(.cc-article-list a):not(.cc-article-body a):not(.cc-breadcrumb a):visited { color: var(--ink-2) !important; text-decoration: none !important; }
a:not(.cc-btn):not(.cc-btn-plain):not(.cc-btn-primary):not(.cc-chip):not(.cc-topbar-link):not(.cc-brand):not(.cc-more-item):not(.cc-user-item):not(.cc-cat-card):not(.cc-section-card):not(.cc-topic-card):not(.cc-escalation-badge):not(.visually-hidden):not(.cc-tabs a):not(.cc-on-this-page a):not(.cc-toc-inline a):not(.cc-autocomplete a):not(.cc-footer-social a):not(.cc-user-menu a):not(.cc-locale-picker a):not(.cc-more-menu a):not(.cc-article-list a):not(.cc-article-body a):not(.cc-breadcrumb a):hover { color: var(--hilti-red) !important; text-decoration: none !important; }
.cc-article-body a:not(.cc-btn), .cc-article-body a:not(.cc-btn):visited,
.cc-breadcrumb li a, .cc-breadcrumb li a:visited {
  color: var(--ink-2) !important;
  text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 3px; border-bottom: 0;
}
.cc-article-body a:not(.cc-btn):hover, .cc-breadcrumb li a:hover { color: var(--hilti-red) !important; text-decoration-thickness: 2px; }
.cc-article-body a:not(.cc-btn):focus-visible, .cc-breadcrumb li a:focus-visible { outline: 2px solid var(--hilti-red); outline-offset: 2px; border-radius: 2px; }
:root[data-theme="dark"] a:not(.cc-btn):not(.cc-btn-plain):not(.cc-btn-primary):not(.cc-chip):not(.cc-topbar-link):not(.cc-brand):not(.cc-more-item):not(.cc-user-item):not(.cc-cat-card):not(.cc-section-card):not(.cc-topic-card):not(.cc-escalation-badge):not(.visually-hidden):not(.cc-tabs a):not(.cc-on-this-page a):not(.cc-toc-inline a):not(.cc-autocomplete a):not(.cc-footer-social a):not(.cc-user-menu a):not(.cc-locale-picker a):not(.cc-more-menu a):not(.cc-article-list a):not(.cc-article-body a):not(.cc-breadcrumb a):hover,
:root[data-theme="dark"] .cc-article-body a:not(.cc-btn):hover,
:root[data-theme="dark"] .cc-breadcrumb li a:hover { color: #FF5C6C !important; }
:root[data-theme="dark"] .cc-article-body a:not(.cc-btn):focus-visible,
:root[data-theme="dark"] .cc-breadcrumb li a:focus-visible { outline-color: #FF5C6C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) a:not(.cc-btn):not(.cc-btn-plain):not(.cc-btn-primary):not(.cc-chip):not(.cc-topbar-link):not(.cc-brand):not(.cc-more-item):not(.cc-user-item):not(.cc-cat-card):not(.cc-section-card):not(.cc-topic-card):not(.cc-escalation-badge):not(.visually-hidden):not(.cc-tabs a):not(.cc-on-this-page a):not(.cc-toc-inline a):not(.cc-autocomplete a):not(.cc-footer-social a):not(.cc-user-menu a):not(.cc-locale-picker a):not(.cc-more-menu a):not(.cc-article-list a):not(.cc-article-body a):not(.cc-breadcrumb a):hover,
  :root:not([data-theme="light"]) .cc-article-body a:not(.cc-btn):hover,
  :root:not([data-theme="light"]) .cc-breadcrumb li a:hover { color: #FF5C6C !important; }
  :root:not([data-theme="light"]) .cc-article-body a:not(.cc-btn):focus-visible,
  :root:not([data-theme="light"]) .cc-breadcrumb li a:focus-visible { outline-color: #FF5C6C; }
}
/* V53: an older dark-mode rule (red article links, higher specificity) is overridden here; resting colour = light grey in dark mode */
:root[data-theme="dark"] .cc-article-body a:not(.cc-btn):not(:hover),
:root[data-theme="dark"] .cc-breadcrumb li a:not(:hover) { color: var(--ink-2) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cc-article-body a:not(.cc-btn):not(:hover),
  :root:not([data-theme="light"]) .cc-breadcrumb li a:not(:hover) { color: var(--ink-2) !important; }
}

/* ---- V54 (20261023): no automatic zoom when a field is tapped on iPhone/iPad (Safari) ----
   iOS Safari zooms the page in when a form field with a font size below 16 px gets focus, and leaves it zoomed (the layout looks cut off).
   Fix: every text field, textarea and select is 16 px on touch devices. Pinch zoom stays available (the viewport tag is NOT restricted with
   maximum-scale or user-scalable=no, which would lock out people who need to zoom). Desktop keeps the smaller sizes. ---- */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):not([type="color"]),
  textarea, select,
  .cc-search-row input, .cc-ask-mini input, .cc-ai-row input, .cc-hero-search input { font-size: 16px !important; }
}
/* iOS only, in case a browser reports the pointer differently (e.g. desktop-class iPad mode) */
@supports (-webkit-touch-callout: none) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):not([type="color"]),
  textarea, select { font-size: 16px !important; }
}