/**
 * Quick Fix Force — Knowledge Center.
 *
 * SCOPING RULE: every selector in this file is prefixed with `.qff-k`, which is
 * applied to the Knowledge <main> only. Nothing here can reach the header,
 * footer, navigation, forms, service pages, area pages or Google Ads landing
 * pages — the Knowledge Center is additive and cannot restyle approved work.
 *
 * Design tokens (colour, type, radius, container) are inherited from
 * qff-tokens.css. No new colours or fonts are introduced.
 */

/* ---- Fixed-header offset ----
   Every other template gets this from .qff-page-hero, which the Knowledge
   Center does not use. Without it the first breadcrumb row renders underneath
   the 68px fixed header on every knowledge page. */
.qff-k { padding-top: var(--qff-header-height); }

/* ---- Layout rhythm ---- */
.qff-k .qff-k-hero { padding-top: 1.5rem; padding-bottom: 1.5rem; }
@media (min-width: 640px) { .qff-k .qff-k-hero { padding-top: 2.5rem; padding-bottom: 2rem; } }
.qff-k .qff-k-section { padding-top: 2rem; padding-bottom: 2rem; }
@media (min-width: 640px) { .qff-k .qff-k-section { padding-top: 3rem; padding-bottom: 3rem; } }

/* ---- Typography (reuses the theme's display/body fonts and charcoal scale) ---- */
.qff-k .qff-k-h1 {
  font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal);
  font-size: 30px; line-height: 1.12; letter-spacing: -0.02em;
}
@media (min-width: 640px) { .qff-k .qff-k-h1 { font-size: 42px; } }
.qff-k .qff-k-h2 {
  font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal);
  font-size: 22px; letter-spacing: -0.01em; margin-bottom: 1rem;
}
@media (min-width: 640px) { .qff-k .qff-k-h2 { font-size: 28px; } }
.qff-k .qff-k-h3 { font-family: var(--qff-font-display); font-weight: 600; color: var(--qff-charcoal); font-size: 18px; margin-bottom: .5rem; }
.qff-k .qff-k-h4 { font-weight: 600; color: var(--qff-charcoal); font-size: 15px; margin: 1.25rem 0 .5rem; }
.qff-k .qff-k-intro { margin-top: 1rem; font-size: 16px; line-height: 1.7; color: var(--qff-charcoal-70); max-width: 46rem; }
@media (min-width: 640px) { .qff-k .qff-k-intro { font-size: 18px; } }
.qff-k .qff-k-meta { margin-top: .75rem; font-size: 13px; color: var(--qff-charcoal-55); }
.qff-k .qff-k-meta__sep { margin: 0 .4rem; }
.qff-k .qff-k-note { font-size: 14px; color: var(--qff-charcoal-60); max-width: 46rem; margin-bottom: 1.25rem; }

.qff-k .qff-k-list { display: flex; flex-direction: column; gap: .625rem; max-width: 46rem; }
.qff-k .qff-k-list li { font-size: 15px; line-height: 1.7; color: var(--qff-charcoal-75); }
.qff-k .qff-k-list li strong { display: block; color: var(--qff-charcoal); }

/* ---- Quick answer ---- */
.qff-k .qff-k-quick { background: var(--qff-offwhite); }
.qff-k .qff-k-quick__list { display: grid; gap: 1rem; max-width: 52rem; }
@media (min-width: 768px) { .qff-k .qff-k-quick__list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem 2rem; } }
.qff-k .qff-k-quick__list dt { font-weight: 600; color: var(--qff-charcoal); font-size: 14px; margin-bottom: .25rem; }
.qff-k .qff-k-quick__list dd { margin: 0 0 .5rem; font-size: 15px; line-height: 1.7; color: var(--qff-charcoal-70); }

/* ---- Safety banner: severity carried by text AND colour ---- */
.qff-k .qff-k-safety { border-left: 3px solid var(--qff-charcoal-40); background: var(--qff-offwhite); padding: 1rem 1.25rem; margin: 1.5rem 0; border-radius: var(--qff-radius-sm); }
.qff-k .qff-k-safety__label { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 14px; margin-bottom: .5rem; color: var(--qff-charcoal); }
.qff-k .qff-k-safety__label svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.qff-k .qff-k-safety ul { display: flex; flex-direction: column; gap: .5rem; }
.qff-k .qff-k-safety li { font-size: 14.5px; line-height: 1.65; color: var(--qff-charcoal-75); }
.qff-k .qff-k-safety--elevated { border-left-color: var(--qff-action); }
.qff-k .qff-k-safety--high { border-left-color: var(--qff-action); background: rgba(245,27,42,0.05); }

/* ---- Cards (mirrors the theme's existing card language) ---- */
.qff-k .qff-k-cards { display: grid; gap: 1rem; }
@media (min-width: 640px) { .qff-k .qff-k-cards { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem; } }
.qff-k .qff-k-card {
  display: block; border: 1px solid var(--qff-navy-10); border-radius: var(--qff-radius-sm);
  padding: 1.25rem 1.5rem; background: #fff; transition: border-color .2s ease;
}
.qff-k .qff-k-card:hover { border-color: var(--qff-navy-25); }
.qff-k .qff-k-card__title { display: block; font-family: var(--qff-font-display); font-weight: 600; font-size: 17px; color: var(--qff-charcoal); }
.qff-k .qff-k-card__desc { display: block; margin-top: .5rem; font-size: 14.5px; line-height: 1.6; color: var(--qff-charcoal-55); }
.qff-k .qff-k-card svg { width: 1rem; height: 1rem; color: var(--qff-navy); margin-top: .75rem; }

/* ---- Cause groups ---- */
.qff-k .qff-k-cause-group { border-top: 1px solid var(--qff-navy-10); padding-top: 1.5rem; margin-top: 1.5rem; max-width: 52rem; }
.qff-k .qff-k-cause-group:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.qff-k .qff-k-cause-group__likelihood { display: inline-block; font-size: 12px; font-weight: 600; color: var(--qff-navy); background: var(--qff-navy-06); padding: .25rem .625rem; border-radius: var(--qff-radius-sm); margin-bottom: .5rem; }
.qff-k .qff-k-cause-group__tell { font-size: 14.5px; color: var(--qff-charcoal-70); margin-bottom: .875rem; }
.qff-k .qff-k-causes dt { font-weight: 600; color: var(--qff-charcoal); font-size: 15px; margin-top: .875rem; }
.qff-k .qff-k-causes dd { margin: .25rem 0 0; font-size: 14.5px; line-height: 1.7; color: var(--qff-charcoal-65); }

.qff-k .qff-k-split { display: grid; gap: 1.75rem; max-width: 52rem; }
@media (min-width: 768px) { .qff-k .qff-k-split { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.5rem; } }

/* ---- Code table: scrolls inside its own container, never the page ---- */
.qff-k .qff-k-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--qff-navy-10); border-radius: var(--qff-radius-sm); }
.qff-k .qff-k-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 40rem; }
.qff-k .qff-k-table th, .qff-k .qff-k-table td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--qff-navy-10); vertical-align: top; }
.qff-k .qff-k-table thead th { background: var(--qff-offwhite); font-weight: 600; color: var(--qff-charcoal); white-space: nowrap; }
.qff-k .qff-k-table tbody th { font-weight: 600; color: var(--qff-navy); white-space: nowrap; }
.qff-k .qff-k-table tr:last-child th, .qff-k .qff-k-table tr:last-child td { border-bottom: 0; }
.qff-k .qff-k-row--conflict { background: rgba(245,27,42,0.03); }
.qff-k .qff-k-conflict-note { display: block; margin-top: .375rem; font-size: 13px; color: var(--qff-action); }

/*
 * Documented-codes table below 640px: stacked cards instead of a horizontally
 * scrolling table. Same <table> markup — this is CSS-only reflow, so a
 * screen reader in table-navigation mode still gets real rows/columns; a
 * sighted mobile visitor gets one labelled card per code, no side-scrolling.
 * data-label on each <td> (knowledge/brand-hub.php) mirrors the column
 * header it replaces visually.
 */
@media (max-width: 639px) {
  .qff-k .qff-k-table-wrap { overflow-x: visible; border: 0; }
  .qff-k .qff-k-table { min-width: 0; }
  .qff-k .qff-k-table, .qff-k .qff-k-table tbody, .qff-k .qff-k-table tr, .qff-k .qff-k-table th, .qff-k .qff-k-table td {
    display: block; width: 100%;
  }
  .qff-k .qff-k-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .qff-k .qff-k-table tbody tr {
    border: 1px solid var(--qff-navy-10); border-radius: var(--qff-radius-sm);
    padding: 1rem 1.125rem; margin-bottom: .875rem;
  }
  .qff-k .qff-k-table tbody tr:last-child { margin-bottom: 0; }
  .qff-k .qff-k-table tbody th { padding: 0 0 .625rem; border-bottom: 1px solid var(--qff-navy-10); margin-bottom: .625rem; font-size: 16px; }
  .qff-k .qff-k-table tbody td { padding: .375rem 0; border-bottom: 0; display: flex; gap: .375rem .5rem; flex-wrap: wrap; }
  .qff-k .qff-k-table tbody td[data-label]::before {
    content: attr(data-label) ":"; font-weight: 600; color: var(--qff-charcoal); flex-shrink: 0;
  }
}

.qff-k .qff-k-confidence { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: 13.5px; color: var(--qff-charcoal-60); }
.qff-k .qff-k-confidence__badge { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: var(--qff-navy); color: #fff; font-size: 12px; font-weight: 700; }

/* ---- Decision tool ---- */
.qff-k .qff-k-tool__step { border: 1px solid var(--qff-navy-10); border-radius: var(--qff-radius-sm); padding: 1.25rem; margin-bottom: 1rem; max-width: 46rem; }
.qff-k .qff-k-tool__step legend { font-weight: 600; font-size: 15.5px; color: var(--qff-charcoal); padding: 0 .375rem; }
.qff-k .qff-k-tool__help { font-size: 13.5px; color: var(--qff-charcoal-55); margin-bottom: .75rem; }
.qff-k .qff-k-tool__option { display: flex; align-items: flex-start; gap: .625rem; padding: .5rem 0; font-size: 15px; color: var(--qff-charcoal-75); cursor: pointer; min-height: 44px; }
.qff-k .qff-k-tool__option input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.qff-k .qff-k-tool__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.qff-k .qff-k-tool__reset { font-size: 14px; color: var(--qff-navy); }

.qff-k .qff-k-outcome { border: 1px solid var(--qff-navy-15); border-radius: var(--qff-radius-sm); padding: 1.5rem; margin-top: 1.75rem; max-width: 52rem; background: #fff; }
.qff-k .qff-k-outcome__cat { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--qff-action); margin-bottom: .5rem; }
.qff-k .qff-k-outcome__why { font-size: 14.5px; color: var(--qff-charcoal-70); margin: .75rem 0; }
.qff-k .qff-k-outcome p { font-size: 15px; line-height: 1.7; color: var(--qff-charcoal-70); }
.qff-k .qff-k-outcome__disclaimer { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--qff-navy-10); font-size: 13px; color: var(--qff-charcoal-50); }
.qff-k .qff-k-outcome__guide { font-weight: 600; color: var(--qff-navy); display: inline-flex; align-items: center; gap: .375rem; }
.qff-k .qff-k-outcome__guide svg { width: .9rem; height: .9rem; }
.qff-k .qff-k-outcome__nocta { max-width: 52rem; margin-top: 1rem; font-size: 14.5px; color: var(--qff-charcoal-65); }

/* ---- Related ---- */
.qff-k .qff-k-related { border-top: 1px solid var(--qff-navy-10); padding-top: 1.5rem; margin-top: 2rem; }
.qff-k .qff-k-related ul { display: flex; flex-direction: column; gap: .5rem; }
.qff-k .qff-k-related a { font-size: 15px; color: var(--qff-navy); font-weight: 500; }

.qff-k .qff-k-sources { background: var(--qff-offwhite); }
.qff-k .qff-k-sources li { font-size: 14px; color: var(--qff-charcoal-60); }

/* ---- Editor-only preview notice (never shown to visitors) ---- */
.qff-k .qff-k-editor-notice {
  border: 1px dashed var(--qff-action); background: rgba(245,27,42,0.04);
  border-radius: var(--qff-radius-sm); padding: .875rem 1.125rem; margin-bottom: 1.25rem;
  font-size: 13.5px; color: var(--qff-charcoal-75); max-width: 46rem;
}
.qff-k .qff-k-editor-notice strong { display: block; color: var(--qff-action); margin-bottom: .25rem; }
.qff-k .qff-k-editor-notice p { margin: .25rem 0 0; }

/* ---- Reduced motion: nothing here animates, but keep the contract explicit ---- */
@media (prefers-reduced-motion: reduce) {
  .qff-k * { transition: none !important; }
}

/* ---- Search + Finder (scoped, reuses theme tokens) ---- */
.qff-k .qff-k-search, .qff-k .qff-k-finder { border:1px solid var(--qff-navy-10); border-radius:var(--qff-radius-sm); padding:1.25rem; margin:1.5rem 0; background:#fff; max-width:52rem; }
/* Defensive only — the promoted result relies on document order, not scrolling,
   but the fixed 68px header would otherwise cover the top of this section on
   any browser-driven scroll (back/forward restoration, a future deep link). */
.qff-k .qff-k-finder { scroll-margin-top: calc(var(--qff-header-height) + 12px); }
.qff-k .qff-k-search__form { display:flex; flex-wrap:wrap; gap:.625rem; align-items:flex-end; margin-top:.75rem; }
.qff-k .qff-k-search__form label { display:block; width:100%; font-size:14px; font-weight:600; color:var(--qff-charcoal); margin-bottom:.375rem; }
.qff-k .qff-k-search__form input[type="search"] { flex:1 1 16rem; min-height:44px; padding:.625rem .875rem; font-size:15px; border:1px solid var(--qff-navy-15); border-radius:var(--qff-radius-sm); }
.qff-k .qff-k-search__results { margin-top:1rem; }
.qff-k .qff-k-finder__field { border:0; padding:0; margin:0 0 1rem; }
.qff-k .qff-k-finder__field legend { font-weight:600; font-size:15px; color:var(--qff-charcoal); margin-bottom:.5rem; padding:0; }
.qff-k .qff-k-finder__field label { display:block; font-size:14px; color:var(--qff-charcoal-70); margin-bottom:.375rem; }
.qff-k .qff-k-finder__field select,
.qff-k .qff-k-finder__field input[type="text"] { width:100%; max-width:24rem; min-height:44px; padding:.625rem .875rem; font-size:15px; border:1px solid var(--qff-navy-15); border-radius:var(--qff-radius-sm); background:#fff; }
.qff-k .qff-k-finder__help { font-size:13px; color:var(--qff-charcoal-55); margin-top:.375rem; }
.qff-k .qff-k-finder__actions { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:1rem; }
.qff-k .qff-k-finder__nocode { background:none; border:0; padding:.5rem 0; min-height:44px; font-size:14px; color:var(--qff-navy); text-decoration:underline; cursor:pointer; }
.qff-k .qff-k-finder__panel { border-top:1px solid var(--qff-navy-10); margin-top:1.25rem; padding-top:1.25rem; }
.qff-k .qff-k-finder__flag { font-size:14px; color:var(--qff-action); font-weight:600; margin-bottom:.75rem; }
.qff-k .qff-k-finder__next { margin-top:1rem; font-size:14px; color:var(--qff-charcoal); }
.qff-k .qff-k-finder__nodest { margin-top:1rem; font-size:14px; color:var(--qff-charcoal-55); }
/* Visible focus for keyboard users on every interactive element. */
.qff-k a:focus-visible, .qff-k button:focus-visible, .qff-k input:focus-visible, .qff-k select:focus-visible, .qff-k textarea:focus-visible, .qff-k summary:focus-visible {
  outline:2px solid var(--qff-navy); outline-offset:2px;
}

/* ---- Narrowing (compact sign -> direction reference) ---- */
.qff-k .qff-k-narrowing__list { display: grid; gap: 1rem; max-width: 52rem; margin-top: 1rem; }
@media (min-width: 768px) { .qff-k .qff-k-narrowing__list { grid-template-columns: minmax(0,18rem) 1fr; column-gap: 1.5rem; row-gap: 1.125rem; align-items: baseline; } }
.qff-k .qff-k-narrowing__list dt { font-weight: 600; color: var(--qff-navy); font-size: 14.5px; }
.qff-k .qff-k-narrowing__list dd { margin: .25rem 0 0; font-size: 14.5px; line-height: 1.65; color: var(--qff-charcoal-70); }
@media (min-width: 768px) { .qff-k .qff-k-narrowing__list dd { margin-top: 0; } }

/* ---- Dubai context (prose, not an alert — informative, not a warning) ---- */
.qff-k .qff-k-dubai { background: var(--qff-offwhite); }
.qff-k .qff-k-dubai__body { max-width: 52rem; font-size: 15px; line-height: 1.75; color: var(--qff-charcoal-75); }

/* ---- FAQ: native <details>/<summary>, no JS dependency ---- */
.qff-k .qff-k-faq { max-width: 52rem; border-top: 1px solid var(--qff-navy-10); padding: .875rem 0; }
.qff-k .qff-k-faq:last-of-type { border-bottom: 1px solid var(--qff-navy-10); }
.qff-k .qff-k-faq__q {
  cursor: pointer; list-style: none; font-weight: 600; font-size: 15.5px; color: var(--qff-charcoal);
  padding: .375rem 1.75rem .375rem 0; position: relative; min-height: 44px; display: flex; align-items: center;
}
.qff-k .qff-k-faq__q::-webkit-details-marker { display: none; }
.qff-k .qff-k-faq__q::after {
  content: ""; position: absolute; right: .125rem; top: 50%; width: .625rem; height: .625rem;
  border-right: 2px solid var(--qff-navy); border-bottom: 2px solid var(--qff-navy);
  transform: translateY(-65%) rotate(45deg); transition: transform .2s ease;
}
.qff-k .qff-k-faq[open] .qff-k-faq__q::after { transform: translateY(-35%) rotate(-135deg); }
.qff-k .qff-k-faq__a { margin: .5rem 0 .25rem; font-size: 14.5px; line-height: 1.7; color: var(--qff-charcoal-70); }
@media (prefers-reduced-motion: reduce) { .qff-k .qff-k-faq__q::after { transition: none; } }

/* ---- Related guides (cross-links to the existing Guides CPT) ---- */
.qff-k .qff-k-related-guides { border-top: 1px solid var(--qff-navy-10); padding-top: 1.5rem; margin-top: 2rem; }
.qff-k .qff-k-related-guides ul { display: flex; flex-direction: column; gap: .5rem; }
.qff-k .qff-k-related-guides a { font-size: 15px; color: var(--qff-navy); font-weight: 500; }

/* ---- Brand hub: code architecture + cross-reference key/value rows ---- */
.qff-k .qff-k-arch { border: 1px solid var(--qff-navy-10); border-radius: var(--qff-radius-sm); max-width: 52rem; }
.qff-k .qff-k-arch dt {
  font-weight: 600; color: var(--qff-navy); font-size: 14px;
  padding: .625rem 1rem .125rem; border-top: 1px solid var(--qff-navy-10);
}
.qff-k .qff-k-arch dt:first-of-type { border-top: 0; }
.qff-k .qff-k-arch dd { margin: 0; padding: 0 1rem .625rem; font-size: 14px; line-height: 1.6; color: var(--qff-charcoal-80); }
@media (min-width: 640px) {
  .qff-k .qff-k-arch { display: grid; grid-template-columns: minmax(0,7rem) 1fr; }
  .qff-k .qff-k-arch dt { padding: .625rem 0 .625rem 1rem; border-top: 1px solid var(--qff-navy-10); }
  .qff-k .qff-k-arch dd { padding: .625rem 1rem; border-top: 1px solid var(--qff-navy-10); }
  .qff-k .qff-k-arch dt:first-of-type, .qff-k .qff-k-arch dt:first-of-type + dd { border-top: 0; }
}

/* ---- Brand hub: pre-action warnings ---- */
.qff-k .qff-k-warnings { display: flex; flex-direction: column; gap: .75rem; max-width: 52rem; }
.qff-k .qff-k-warnings li { display: flex; gap: .625rem; align-items: flex-start; font-size: 14.5px; line-height: 1.65; color: var(--qff-charcoal-80); }
.qff-k .qff-k-warnings svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; margin-top: .15rem; color: var(--qff-action); }

/* ---- Brand hub: eyebrow, product families, identify steps, priority cards ---- */
.qff-k .qff-k-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase;
  color: var(--qff-action); margin-bottom: .75rem;
}
.qff-k .qff-k-body { font-size: 15.5px; line-height: 1.7; color: var(--qff-charcoal-75); max-width: 52rem; }

.qff-k .qff-k-famlist { display: flex; flex-direction: column; gap: .75rem; max-width: 52rem; }
.qff-k .qff-k-famlist li { border: 1px solid var(--qff-navy-10); border-radius: var(--qff-radius-sm); padding: 1rem; }
.qff-k .qff-k-famlist__name { font-weight: 600; color: var(--qff-charcoal); font-size: 15px; }
.qff-k .qff-k-famlist__note { margin-top: .25rem; font-size: 13.5px; line-height: 1.6; color: var(--qff-charcoal-70); }

.qff-k .qff-k-steps { max-width: 52rem; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .625rem; list-style: decimal; }
.qff-k .qff-k-steps li { font-size: 14.5px; line-height: 1.7; color: var(--qff-charcoal-80); padding-left: .25rem; }

.qff-k .qff-k-card__cta {
  display: inline-flex; align-items: center; gap: .375rem; margin-top: .75rem;
  font-size: 13.5px; font-weight: 600; color: var(--qff-action);
}
.qff-k .qff-k-card__cta svg { width: .85rem; height: .85rem; margin-top: 0; color: currentColor; }
.qff-k .qff-k-note--after { margin-top: 1rem; margin-bottom: 0; }
.qff-k .qff-k-unknown { color: #92400e; }

/* ---- Knowledge root: first-level category cards (port of CategoryCard.jsx) ---- */
.qff-k .qff-k-cats { display: grid; gap: .875rem; }
@media (min-width: 640px) { .qff-k .qff-k-cats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.qff-k .qff-k-cat {
  display: flex; align-items: flex-start; gap: 1rem;
  border: 1px solid var(--qff-navy-12, rgba(11,63,120,.12));
  border-radius: var(--qff-radius-sm); padding: 1.25rem;
}
@media (min-width: 640px) { .qff-k .qff-k-cat { padding: 1.5rem; } }
.qff-k .qff-k-cat--live { background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.qff-k .qff-k-cat--live:hover { border-color: var(--qff-navy); box-shadow: 0 2px 18px -10px rgba(11,63,120,0.45); }
/* Coming soon: quiet and honest — a real <div>, never a dead-looking link. */
.qff-k .qff-k-cat--soon { background: var(--qff-offwhite); border-color: var(--qff-navy-10); }

.qff-k .qff-k-cat__icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.75rem; height: 2.75rem; margin-top: .125rem;
  border: 1px solid var(--qff-navy-15); border-radius: var(--qff-radius-sm);
  background: var(--qff-offwhite); color: var(--qff-navy);
}
.qff-k .qff-k-cat__icon svg { width: 1.25rem; height: 1.25rem; }
.qff-k .qff-k-cat--soon .qff-k-cat__icon { border-color: var(--qff-navy-10); color: var(--qff-charcoal-40); }

.qff-k .qff-k-cat__body { flex: 1 1 auto; min-width: 0; }
.qff-k .qff-k-cat__head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .625rem; }
.qff-k .qff-k-cat__name { font-family: var(--qff-font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--qff-charcoal); }
@media (min-width: 640px) { .qff-k .qff-k-cat__name { font-size: 20px; } }
.qff-k .qff-k-cat--live:hover .qff-k-cat__name { color: var(--qff-navy); }
.qff-k .qff-k-cat--soon .qff-k-cat__name { color: var(--qff-charcoal-55); }
.qff-k .qff-k-cat__badge {
  flex-shrink: 0; white-space: nowrap; font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--qff-charcoal-40);
  border: 1px solid var(--qff-navy-12, rgba(11,63,120,.12)); border-radius: var(--qff-radius-sm);
  padding: .125rem .375rem;
}
.qff-k .qff-k-cat__desc { display: block; margin-top: .25rem; font-size: 13.5px; line-height: 1.6; color: var(--qff-charcoal-65); }
.qff-k .qff-k-cat--soon .qff-k-cat__desc { color: var(--qff-charcoal-45); }
.qff-k .qff-k-cat__arrow { flex-shrink: 0; margin-top: .375rem; color: var(--qff-action); transition: transform .2s ease; }
.qff-k .qff-k-cat__arrow svg { width: 18px; height: 18px; }
.qff-k .qff-k-cat--live:hover .qff-k-cat__arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .qff-k .qff-k-cat__arrow { transition: none; } }

.qff-k .qff-k-cats__foot { margin-top: 1.75rem; max-width: 42rem; font-size: 13.5px; line-height: 1.7; color: var(--qff-charcoal-50); }
.qff-k .qff-k-cats__foot a { color: var(--qff-navy); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Diagnose Your AC: entry card + intake shell ---- */
.qff-k .qff-k-diagnose-entry { margin: 1.5rem 0; }
.qff-k .qff-k-diagnose-entry__inner {
  border: 1px solid var(--qff-navy-15); border-left: 3px solid var(--qff-action);
  border-radius: var(--qff-radius-sm); background: var(--qff-offwhite);
  padding: 1.5rem; max-width: 52rem;
}
@media (min-width: 640px) { .qff-k .qff-k-diagnose-entry__inner { padding: 2rem; } }
.qff-k .qff-k-diagnose-entry__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--qff-action); }
.qff-k .qff-k-diagnose-entry__title { font-family: var(--qff-font-display); font-weight: 600; font-size: 24px; letter-spacing: -.01em; color: var(--qff-charcoal); margin-top: .5rem; }
@media (min-width: 640px) { .qff-k .qff-k-diagnose-entry__title { font-size: 28px; } }
.qff-k .qff-k-diagnose-entry__text { margin-top: .75rem; font-size: 15px; line-height: 1.7; color: var(--qff-charcoal-70); }
.qff-k .qff-k-diagnose-entry__cta { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: .5rem; }
.qff-k .qff-k-diagnose-entry__cta svg { width: 1rem; height: 1rem; }
.qff-k .qff-k-diagnose-entry__note { margin-top: .75rem; font-size: 13px; color: var(--qff-charcoal-55); }

.qff-k .qff-k-intake { max-width: 34rem; }
.qff-k .qff-k-intake__q { font-family: var(--qff-font-display); font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: -.01em; color: var(--qff-charcoal); }
@media (min-width: 640px) { .qff-k .qff-k-intake__q { font-size: 26px; } }
.qff-k .qff-k-intake__help { margin-top: .5rem; font-size: 14px; line-height: 1.6; color: var(--qff-charcoal-65); }
.qff-k .qff-k-intake__field { margin-top: 1rem; }
.qff-k .qff-k-intake__input {
  display: flex; align-items: center; gap: .625rem;
  border: 1px solid var(--qff-navy-25); border-radius: var(--qff-radius-sm);
  background: #fff; padding: 0 .875rem; transition: border-color .2s ease;
}
.qff-k .qff-k-intake__input:focus-within { border-color: var(--qff-action); }
.qff-k .qff-k-intake__input > svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--qff-charcoal-40); }
.qff-k .qff-k-intake__input input {
  width: 100%; border: 0; outline: none; background: transparent;
  padding: .875rem 0; font-size: 16px; font-weight: 600; color: var(--qff-charcoal);
}
.qff-k .qff-k-intake__input input::placeholder { font-weight: 400; color: var(--qff-charcoal-40); }
.qff-k .qff-k-intake__clear { background: none; border: 0; padding: .5rem; margin-right: -.375rem; cursor: pointer; color: var(--qff-charcoal-40); min-height: 44px; }
.qff-k .qff-k-intake__clear svg { width: 1rem; height: 1rem; }
.qff-k .qff-k-intake__clear:hover { color: var(--qff-charcoal); }

.qff-k .qff-k-intake__list {
  margin-top: .375rem; max-height: 248px; overflow-y: auto;
  border: 1px solid var(--qff-navy-15); border-radius: var(--qff-radius-sm); background: #fff;
}
.qff-k .qff-k-intake__list li + li { border-top: 1px solid var(--qff-navy-10); }
.qff-k .qff-k-intake__list a {
  display: flex; align-items: center; min-height: 52px; padding: .75rem 1rem;
  font-size: 15px; font-weight: 600; color: var(--qff-navy); transition: background-color .15s ease;
}
.qff-k .qff-k-intake__list a:hover, .qff-k .qff-k-intake__list li[aria-selected="true"] a { background: var(--qff-navy-06); }
.qff-k .qff-k-intake__empty { margin-top: .375rem; padding: .875rem 1rem; font-size: 13.5px; color: var(--qff-charcoal-55); border: 1px solid var(--qff-navy-15); border-radius: var(--qff-radius-sm); background: #fff; }

.qff-k .qff-k-intake__unsure {
  margin-top: .75rem; width: 100%; min-height: 56px; display: flex; align-items: center; gap: .625rem;
  border: 1px solid var(--qff-navy-25); border-radius: var(--qff-radius-sm);
  background: var(--qff-offwhite); padding: .875rem 1rem; text-align: left; cursor: pointer;
  transition: border-color .2s ease;
}
.qff-k .qff-k-intake__unsure:hover { border-color: var(--qff-navy); }
.qff-k .qff-k-intake__unsure > svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--qff-navy); opacity: .5; }
.qff-k .qff-k-intake__unsure-title { display: block; font-size: 15px; font-weight: 600; color: var(--qff-navy); }
.qff-k .qff-k-intake__unsure-note { display: block; font-size: 12.5px; color: var(--qff-charcoal-55); }
.qff-k .qff-k-intake__pending { margin-top: 1rem; font-size: 13.5px; line-height: 1.7; color: var(--qff-charcoal-60); }


/* ---- Guided diagnosis ---- */
.qff-k .qff-k-verdict {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem;
  border: 1px solid var(--qff-navy-15); border-left: 3px solid var(--qff-charcoal-40);
  border-radius: var(--qff-radius-sm); padding: .625rem 1rem;
  font-size: 14px; font-weight: 600; color: var(--qff-charcoal);
}
.qff-k .qff-k-verdict svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.qff-k .qff-k-verdict--safe   { border-left-color: #0a5c2b; }
.qff-k .qff-k-verdict--tech   { border-left-color: var(--qff-navy); }
.qff-k .qff-k-verdict--urgent { border-left-color: var(--qff-action); background: rgba(245,27,42,.04); color: var(--qff-action); }

.qff-k .qff-k-diag__ref { margin-top: .75rem; font-size: 14px; }
.qff-k .qff-k-diag__ref a { color: var(--qff-navy); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.qff-k .qff-k-diag__caution { background: var(--qff-offwhite); }

.qff-k .qff-k-flow { border: 1px solid var(--qff-navy-15); border-radius: var(--qff-radius-sm); background: #fff; max-width: 52rem; }
.qff-k .qff-k-flow__progress {
  display: flex; align-items: center; gap: .875rem; flex-wrap: wrap;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--qff-navy-10);
}
.qff-k .qff-k-flow__pct { font-size: 13px; font-weight: 600; color: var(--qff-navy); margin: 0; }
.qff-k .qff-k-flow__bar { flex: 1 1 8rem; height: 4px; background: var(--qff-navy-10); border-radius: 2px; overflow: hidden; }
.qff-k .qff-k-flow__bar span { display: block; height: 100%; width: 0; background: var(--qff-action); transition: width .25s ease; }
/* Start Over stays in the header row — never buried at the foot of the report. */
.qff-k .qff-k-flow__restart,
.qff-k .qff-k-flow__again,
.qff-k .qff-k-flow__back {
  background: none; border: 1px solid var(--qff-navy-15); border-radius: var(--qff-radius-sm);
  padding: .5rem .875rem; min-height: 44px; font-size: 13px; font-weight: 600;
  color: var(--qff-navy); cursor: pointer;
}
.qff-k .qff-k-flow__restart:hover, .qff-k .qff-k-flow__again:hover, .qff-k .qff-k-flow__back:hover { border-color: var(--qff-navy); }
.qff-k .qff-k-flow__body { padding: 1.25rem; }
.qff-k .qff-k-flow__back { margin-top: 1rem; }

.qff-k .qff-k-qcard + .qff-k-qcard { border-top: 1px solid var(--qff-navy-10); margin-top: 1.5rem; padding-top: 1.5rem; }
.qff-k .qff-k-qcard__help { margin-top: .375rem; font-size: 13.5px; line-height: 1.6; color: var(--qff-charcoal-60); }
.qff-k .qff-k-qcard--live h3:focus-visible { outline: 2px solid var(--qff-navy); outline-offset: 3px; }

.qff-k .qff-k-answers { display: flex; flex-direction: column; gap: .625rem; margin-top: 1rem; }
.qff-k .qff-k-answer {
  display: block; width: 100%; text-align: left; min-height: 56px;
  border: 1px solid var(--qff-navy-15); border-radius: var(--qff-radius-sm);
  background: #fff; padding: .875rem 1rem; cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.qff-k .qff-k-answer:hover { border-color: var(--qff-navy); background: var(--qff-navy-06); }
.qff-k .qff-k-answer__label { display: block; font-size: 15px; font-weight: 600; color: var(--qff-charcoal); }
.qff-k .qff-k-answer__note { display: block; margin-top: .25rem; font-size: 13px; line-height: 1.55; color: var(--qff-charcoal-60); }

.qff-k .qff-k-result__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.qff-k .qff-k-band {
  display: inline-block; margin-left: .5rem; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--qff-navy);
  background: var(--qff-navy-06); border-radius: var(--qff-radius-sm); padding: .125rem .5rem;
  vertical-align: middle;
}
.qff-k .qff-k-tech-h { margin-top: 2rem; }
@media (prefers-reduced-motion: reduce) { .qff-k .qff-k-flow__bar span { transition: none; } }
.qff-k .qff-k-caution { margin-top: 1rem; max-width: 46rem; font-size: 13.5px; }
.qff-k .qff-k-caution > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--qff-navy); }
.qff-k .qff-k-caution ul { margin-top: .5rem; }
.qff-k .qff-k-caution li { font-size: 13.5px; color: var(--qff-charcoal-70); }

/* =========================================================================
 * D8 — "DIAGNOSE YOUR AC" AS THE PRIMARY ENTRY ON /knowledge/ac/
 *
 * VISUAL HIERARCHY ONLY. No markup, copy, heading, URL or link changes — the
 * card already had the right structure (eyebrow, title, supporting line, one
 * primary CTA, reassurance note); it simply did not read as the primary thing
 * on the page next to a full-width hero paragraph.
 *
 * Measured problem at 375x812: the card started at y=483 behind a seven-line
 * hero intro, and its CTA landed at y=728 — inside the bottom ~80px occupied by
 * the sticky Call/WhatsApp bar, so the one action the page exists to offer was
 * visually obscured on a phone.
 *
 * Deliberately NOT a marketing hero: no gradient, no oversized type, no added
 * imagery. It stays a compact task card, just an unmistakably primary one.
 * ===================================================================== */

/* Elevation + a deeper accent so the card reads as the page's primary object
   rather than one more bordered box. Same tokens as the rest of the system. */
.qff-k .qff-k-diagnose-entry__inner {
	border-left-width: 4px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(11, 63, 120, 0.05), 0 8px 24px -12px rgba(11, 63, 120, 0.22);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.qff-k .qff-k-diagnose-entry__inner:hover,
.qff-k .qff-k-diagnose-entry__inner:focus-within {
	box-shadow: 0 1px 2px rgba(11, 63, 120, 0.06), 0 12px 30px -12px rgba(11, 63, 120, 0.3);
	border-color: var(--qff-navy-30, rgba(11, 63, 120, 0.3));
}

/* The CTA is the point of the card — give it real weight and a clear affordance. */
.qff-k .qff-k-diagnose-entry__cta {
	min-height: 48px;
	padding-inline: 1.5rem;
	font-size: 15px;
	font-weight: 600;
}
.qff-k .qff-k-diagnose-entry__cta svg {
	transition: transform 0.2s ease;
}
.qff-k .qff-k-diagnose-entry__inner:hover .qff-k-diagnose-entry__cta svg {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.qff-k .qff-k-diagnose-entry__inner,
	.qff-k .qff-k-diagnose-entry__cta svg {
		transition: none;
	}
	.qff-k .qff-k-diagnose-entry__inner:hover .qff-k-diagnose-entry__cta svg {
		transform: none;
	}
}

@media (max-width: 767px) {
	/*
	 * Lift the card up the page. The hero paragraph on a knowledge hub that
	 * carries this card is orientation copy, not the task — tightened here so
	 * the tool is not pushed under the fold behind it. `:has()` scopes this to
	 * exactly the hub that has the card; where it is unsupported the intro
	 * simply keeps its normal size and nothing breaks.
	 */
	main:has(.qff-k-diagnose-entry) .qff-k-hero .qff-k-intro {
		font-size: 15px;
		line-height: 1.6;
	}

	/* Compact the card itself so the CTA clears the sticky mobile action bar. */
	.qff-k .qff-k-diagnose-entry { margin: 1rem 0; }
	.qff-k .qff-k-diagnose-entry__inner { padding: 1.15rem 1.1rem; }
	.qff-k .qff-k-diagnose-entry__title { font-size: 22px; margin-top: 0.35rem; }
	.qff-k .qff-k-diagnose-entry__text {
		margin-top: 0.5rem;
		font-size: 14px;
		line-height: 1.6;
	}
	.qff-k .qff-k-diagnose-entry__cta {
		margin-top: 1rem;
		width: 100%;
		justify-content: center;
	}
	.qff-k .qff-k-diagnose-entry__note { margin-top: 0.5rem; }
}

/* ===== Technician Intelligence panel (ZIP 21) =====
   Additive block appended below existing Knowledge Center content. Uses the
   theme's own tokens and the same 1px-border / 4px-radius card language already
   used across the Knowledge Center, so it reads as native rather than imported.
   Renders only when corpus records exist for the brand/code. */
.qff-k-intel { border: 1px solid var(--qff-navy-15); border-radius: var(--qff-radius-sm); background: #fff; margin-top: 2rem; }
.qff-k-intel__head { display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--qff-navy-10); }
.qff-k-intel__head svg { width: 1rem; height: 1rem; color: var(--qff-navy); flex-shrink: 0; }
.qff-k-intel__head p { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--qff-navy); }
.qff-k-intel__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.qff-k-intel__label { margin: 0 0 0.5rem; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--qff-charcoal-65); }
.qff-k-intel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.qff-k-intel__item { border: 1px solid var(--qff-navy-10); border-radius: var(--qff-radius-sm); padding: 0.75rem; }
.qff-k-intel__item--community { background: var(--qff-offwhite); }
.qff-k-intel__item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.qff-k-intel__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; font-size: 13.5px; color: var(--qff-charcoal); }
.qff-k-intel__family { font-size: 12px; color: var(--qff-charcoal-65); }
.qff-k-intel__meaning { margin: 0.375rem 0 0; font-size: 13.5px; line-height: 1.6; color: var(--qff-charcoal-80, var(--qff-charcoal)); }
.qff-k-intel__checks { margin: 0.25rem 0 0; font-size: 12.5px; line-height: 1.6; color: var(--qff-charcoal-65); }
.qff-k-intel__conflict { margin: 0.375rem 0 0; font-size: 12px; line-height: 1.6; color: var(--qff-action); }
.qff-k-intel__note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--qff-charcoal-65); }
.qff-k-intel__gaps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.qff-k-intel__gaps li { font-size: 12.5px; line-height: 1.6; color: var(--qff-charcoal-65); }
.qff-k-intel__gaps strong { color: var(--qff-charcoal-80, var(--qff-charcoal)); }
.qff-k-intel__foot { margin: 0; padding-top: 0.875rem; border-top: 1px solid var(--qff-navy-10); font-size: 11.5px; line-height: 1.6; color: var(--qff-charcoal-60); }

/* Evidence badges — one visual per evidence layer, so a community report can
   never be mistaken for manufacturer documentation at a glance. */
.qff-k-intel__badge { display: inline-block; border-radius: var(--qff-radius-sm); padding: 0.125rem 0.5rem; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.qff-k-intel__badge--oem-strong { background: var(--qff-navy); color: #fff; }
.qff-k-intel__badge--oem { background: var(--qff-navy-10); color: var(--qff-navy); }
.qff-k-intel__badge--community { background: var(--qff-offwhite); color: var(--qff-charcoal-70); border: 1px solid var(--qff-navy-15); }
.qff-k-intel__badge--qff { background: var(--qff-navy-10); color: var(--qff-navy); }
.qff-k-intel__badge--conflict { background: rgba(245, 27, 42, 0.1); color: var(--qff-action); }
.qff-k-intel__badge--weak { background: var(--qff-offwhite); color: var(--qff-charcoal-60); border: 1px solid var(--qff-navy-10); }

@media (max-width: 640px) {
  .qff-k-intel__body { padding: 1rem; gap: 1rem; }
  .qff-k-intel__head { padding: 0.75rem 1rem; }
}

/* Outcome feedback (§31) — anonymous, one tap, never a form. */
.qff-k-outcome { border: 1px solid var(--qff-navy-15); border-radius: var(--qff-radius-sm); background: var(--qff-offwhite); padding: 1.25rem; }
.qff-k-outcome__q { margin: 0 0 0.75rem; font-size: 14.5px; font-weight: 600; color: var(--qff-charcoal); }
.qff-k-outcome__opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.qff-k-outcome__btn { min-height: 44px; padding: 0.5rem 0.875rem; font-size: 13.5px; font-weight: 500; color: var(--qff-navy); background: #fff; border: 1px solid var(--qff-navy-15); border-radius: var(--qff-radius-sm); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.qff-k-outcome__btn:hover { border-color: var(--qff-navy); background: var(--qff-navy-05); }
.qff-k-outcome__done { margin: 0; font-size: 13.5px; color: var(--qff-charcoal-70); }