/* VERSION: CC-KB-20261022-V39 */
@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: #0F1013; --fg: #ECEDEF;
    --surface: #171920; --surface-2: #1B1D25;
    --border: #2B2E38;
    --muted: #8C919C; --muted-strong: #C6CAD1;
    --cream: #1B1D25; --rule: #2B2E38; --rule-2: #22252F;
    --ink: #ECEDEF; --ink-2: #C6CAD1; --mute: #8C919C;
    --paper: #171920;
    --ok-50: #0D241A;
    --warn-50: #2A1D0A;
    --info-50: #0D1D33;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1013; --fg: #ECEDEF;
  --surface: #171920; --surface-2: #1B1D25;
  --border: #2B2E38;
  --muted: #8C919C; --muted-strong: #C6CAD1;
  --cream: #1B1D25; --rule: #2B2E38; --rule-2: #22252F;
  --ink: #ECEDEF; --ink-2: #C6CAD1; --mute: #8C919C;
  --paper: #171920;
  --ok-50: #0D241A;
  --warn-50: #2A1D0A;
  --info-50: #0D1D33;
  color-scheme: dark;
}


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

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


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

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

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

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


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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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


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

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


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

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


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

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


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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

:root {
  --hilti-red: #D2051E;
  --hilti-red-700: #A6041A;
  --ink: #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: 820px) {
  .cc-cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .cc-cat-grid { grid-template-columns: 1fr; }
}
.cc-cat-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: border-color 0.15s ease;
}
.cc-cat-card:hover { border-color: var(--ink); }
.cc-cat-card:visited,
.cc-cat-card:visited h3,
.cc-cat-card:visited p { color: var(--ink); }
.cc-cat-card h3,
.cc-cat-card h3 a {
  font-size: 16px;
  font-weight: 600;        /* only the title is bold */
  color: var(--ink);        /* NOT red */
  margin: 8px 0 4px;
  line-height: 1.3;
}
.cc-cat-card p {
  font-size: 13.5px;
  font-weight: 400;         /* body not bold */
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.5;
}
.cat-meta {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}
/* Only the icon is red */
.cc-cat-icon {
  color: var(--hilti-red);
  display: inline-flex;
  width: 24px;
  height: 24px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---- Category page: section titles + article links BLACK ----
       Even higher specificity (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: 1000px) {
  .cc-article-wrap-3col { grid-template-columns: 200px minmax(0, 1fr) !important; }
}
@media (max-width: 760px) {
  .cc-article-wrap-3col { grid-template-columns: 1fr !important; }
}

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

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

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

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

/* =================================================================
   25. QA ROUND 9 — hierarchy restored with size + color, not weight
   -----------------------------------------------------------------
   Everything stays weight 400 (Hilti Roman). Hierarchy comes from
   size + color (headings darker, body lighter).
   ================================================================= */
:root {
  --ink: #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-20261022-V39
   - 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-20261022-V39 — 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 #171920) ---- */
@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: #22252F; } }
:root[data-theme="dark"] { --hover: #22252F; }
.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-20261022-V39 — 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: #1B1D25; --band-2: #22252F; --icon: #C6CAD1; --ink-band: #C6CAD1; --footer-text: #C6CAD1; --footer-border: #2B2E38; }
}
:root[data-theme="dark"] { --band-1: #1B1D25; --band-2: #22252F; --icon: #C6CAD1; --ink-band: #C6CAD1; --footer-text: #C6CAD1; --footer-border: #2B2E38; }

.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-20261022-V39 — 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-20261022-V39
   ================================================================= */

/* ---- 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: 760px) { .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: 1099px) {
  .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: 1100px) { .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: 759px) {
  .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-20261022-V39
   ================================================================= */

/* ---- 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: 520px) { .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: 560px) { .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-20261022-V39
   ================================================================= */

/* ---- 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; }
@media (max-width: 902px) {
  .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; }
}
@media (max-width: 779px) {
  .cc-submit-text { 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; }
}
@media (max-width: 666px) {
  .cc-user-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 583px) {
  .cc-login-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cc-topbar-link { padding-left: 8px; padding-right: 8px; }
}
.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; }

/* below 527px the logo (min 200px) and the shrunken items no longer fit side by side: the items move to a second row,
   each item stays whole (nothing is split or cut) */
@media (max-width: 526px) {
  .cc-topbar-inner { flex-wrap: wrap !important; row-gap: 4px; }
  .cc-brand { flex: 1 1 100%; }
  .cc-brand-lockup { min-width: 0; }
  .cc-topbar-actions { flex: 1 1 100%; justify-content: flex-end; }
}

/* =================================================================
   CC-KB-20261022-V39
   ================================================================= */

/* ---- 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-20261022-V39 — 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; }