/* ============================================================
   CMO IT Services — Zoho Desk Portal Brand Override v5.7
   March 16, 2026 | FIX #12: Article body links — CMO blue, hover underline, no visited purple
   ============================================================
   ARCHITECTURE:
   - Support bar: charcoal (#202e3b), right-aligned
   - Brand + nav row: WHITE background (matches cmoit.ca main nav)
   - Search row: white, no border, flush with content
   - Body: cream (#f8f7f4)
   - Footer: black (#000)

   SELECTOR RULES (v4.0):
   - NO wildcard [class*="..."] selectors
   - Every selector traced to DOM audit (March 2026)
   - !important ONLY on visual props (color, font, background)
   - NEVER override display/visibility on Zoho toggle classes
   - Popup__hide is Zoho's show/hide mechanism — DO NOT TOUCH
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600;700&family=Libre+Franklin:wght@300;400;500;600;700;800&display=swap');

/* --- Brand Tokens --- */
:root {
    --cmo-red: #bb140a;
    --cmo-red-light: #d4180c;
    --cmo-black: #000;
    --cmo-slate: #303642;
    --cmo-blue: #0966ba;
    --cmo-blue-light: #1a7ed4;
    --cmo-charcoal: #202e3b;
    --cmo-white: #fff;
    --cmo-cream: #f8f7f4;
    --cmo-warm-grey: #e8e6e1;
    --cmo-g100: #f3f4f6;
    --cmo-g200: #e5e7eb;
    --cmo-g300: #d1d5db;
    --cmo-g400: #9ca3af;
    --cmo-g500: #6b7280;
    --cmo-g600: #4b5563;
    --cmo-light-slate: #bfc8d6;
    --cmo-serif: 'Instrument Serif', 'Playfair Display', 'Georgia', serif;
    --cmo-sans: 'Libre Franklin', 'Source Sans 3', sans-serif;
    --cmo-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
}

/* ============================================================
   GLOBAL RESET: ZERO BORDER RADIUS
   ============================================================ */
*,
*::before,
*::after {
    border-radius: 0 !important;
}

/* ============================================================
   BODY
   ============================================================ */
body {
    font-family: var(--cmo-sans) !important;
    background-color: var(--cmo-cream) !important;
    color: var(--cmo-slate) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    line-height: 1.6 !important;
}

/* ============================================================
   SUPPORT BAR (custom element)
   Charcoal, right-aligned, matches cmoit.ca .support-bar
   ============================================================ */
#cmo-support-bar {
    background: var(--cmo-charcoal) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 0 48px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

#cmo-support-bar-inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 36px !important;
}

/* FIX #6 continued: Support links use flex, no margin-left auto
   (bar is space-between, links sit on the left side) */
#cmo-support-links {
    display: flex !important;
    align-items: center !important;
}

.cmo-support-link {
    font-family: var(--cmo-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--cmo-light-slate) !important;
    text-decoration: none !important;
    padding: 0 14px !important;
    height: 36px !important;
    line-height: 36px !important;
    white-space: nowrap !important;
    transition: color 0.2s ease, background 0.2s ease !important;
    display: inline-block !important;
}

.cmo-support-link:hover {
    color: var(--cmo-white) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.cmo-support-sep {
    color: rgba(255, 255, 255, 0.2) !important;
    font-size: 14px !important;
    line-height: 36px !important;
    user-select: none !important;
    padding: 0 2px !important;
}

/* FIX #6: Auth area — match sizing/spacing of .cmo-support-link exactly.
   All support bar items now share identical padding, height, and line-height. */
#cmo-support-auth {
    display: flex !important;
    align-items: center !important;
    margin-left: 8px !important;
}

#cmo-support-auth a,
#cmo-support-auth span,
#cmo-support-auth button {
    font-family: var(--cmo-mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--cmo-light-slate) !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 14px !important;
    height: 36px !important;
    line-height: 36px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    transition: color 0.2s ease, background 0.2s ease !important;
}

#cmo-support-auth a:hover,
#cmo-support-auth button:hover {
    color: var(--cmo-white) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Prevent Zoho's wrapper divs inside auth area from breaking flow */
#cmo-support-auth > div {
    display: flex !important;
    align-items: center !important;
    height: 36px !important;
}

/* ============================================================
   HEADER CONTAINER
   DOM: header#headerContainer.Header__header
   ============================================================ */
header.Header__header,
#headerContainer {
    background: var(--cmo-white) !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(232, 230, 225, 0.5) !important;
    box-shadow: none !important;
}

/* FIX #8: Force .Header__headerContainer full-width so the white
   background band matches the support bar's edge-to-edge charcoal.
   Zoho's Materialize theme can apply a max-width here, making the
   brand row visually narrower than the bars above and below. */
.Header__headerContainer {
    background: var(--cmo-white) !important;
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Kill Zoho's gradient/image overlay — confirmed in DOM */
.Header__headerImg,
h4.Header__welcomeHeading {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* FIX #1: Kill empty white bar above support bar.
   Zoho wraps content in .Header__headerContainer which can have
   top padding from default theme. Also kill any margin on the
   outer header element itself. */
header.Header__header,
#headerContainer,
.Header__headerContainer {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Zoho's headerRow parent wrapper — kill any top spacing */
.Header__headerBrand {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ============================================================
   BRAND ROW
   DOM: div#headerRow.Header__headerRow
   White background, brand left, nav right
   ============================================================ */
/* FIX #8 (cont.): 12.8px side padding matches Layout__layout1's
   built-in padding so logo/nav align with KB cards below. */
.Header__headerRow,
#headerRow {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 12.8px !important;
    height: 72px !important;
    background: var(--cmo-white) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Brand block — DOM: div.Header__headerBrand > div.Header__brand.Header__brandFlexible */
.Header__headerBrand {
    display: flex !important;
    align-items: center !important;
}

/* FIX #2: Eliminated flex gap entirely. Zoho may inject its own spacing
   via inline styles on child elements. Gap:0 + negative margin on the
   brand name forces the logo and text tight together. */
.Header__brand.Header__brandFlexible {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

.Header__brand.Header__brandFlexible > .Header__brandName {
    margin-left: 10px !important;
}

.Header__brand.Header__brandFlexible > .Header__brandLogo {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

.Header__brandLogoImg {
    height: 36px !important;
    width: auto !important;
    display: block !important;
    position: relative !important;
    top: 2px !important;
}

/* Hide Zoho's default brand name text, show custom spans instead */
.Header__brandName {
    font-size: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

/* Custom brand text — BLACK on white bg */
.cmo-brand-primary {
    font-family: var(--cmo-sans) !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    color: var(--cmo-black) !important;
    letter-spacing: -0.3px !important;
}

.cmo-brand-secondary {
    font-family: var(--cmo-sans) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    color: var(--cmo-g500) !important;
    margin-left: 5px !important;
}

/* ============================================================
   TAB NAVIGATION
   DOM: div.Header__headerNav > div.Header__tabs > ul#tabList.Header__tabsList
   Tabs: li.Header__tabsTab > a.Header__tabsLink
   Active: li.Header__tabsTab.Header__tabsTabActive
   ============================================================ */

/* Nav links container (custom element, right side of brand row) */
#cmo-nav-links {
    display: flex !important;
    align-items: center !important;
}

/* Nav wrapper — kill Zoho backgrounds */
.Header__headerNav,
.Header__tabs,
.Header__tabsCompactTillSmall {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Tab list */
.Header__tabsList,
#tabList {
    list-style: none !important;
    display: flex !important;
    gap: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    align-items: center !important;
}

/* Individual tab item */
.Header__tabsTab {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    list-style: none !important;
    position: relative !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.Header__tabsTab:hover {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

/* Tab link text — consistent box model for vertical alignment.
   All links use identical height/padding so active underline
   doesn't shift text position. */
a.Header__tabsLink {
    font-family: var(--cmo-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--cmo-g600) !important;
    text-decoration: none !important;
    padding: 6px 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 36px !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    transition: color 0.3s ease, border-color 0.3s ease !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* FIX #3: Kill ALL Zoho active tab indicators to prevent double highlights.
   Zoho applies background, border, and pseudo-elements on active tabs. */
.Header__tabsTab::before,
.Header__tabsTab::after,
a.Header__tabsLink::before,
a.Header__tabsLink::after,
.Header__tabsTabActive::before,
.Header__tabsTabActive::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
    width: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Kill Zoho's own active styling on the li and link */
.Header__tabsTabActive {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Tab hover — red underline matching active page marker.
   Kill top/left/right borders individually to avoid shorthand
   resetting border-bottom. */
a.Header__tabsLink:hover {
    color: var(--cmo-charcoal) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid var(--cmo-red) !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* Active tab — charcoal text, red underline. No padding shift
   to keep all links vertically aligned. */
.Header__tabsTabActive > a.Header__tabsLink,
li.Header__tabsTab.Header__tabsTabActive > a.Header__tabsLink {
    color: var(--cmo-charcoal) !important;
    border-bottom: 2px solid var(--cmo-red) !important;
    padding: 6px 0 !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* Active tab hover — keep red underline, no grey overlay */
.Header__tabsTabActive > a.Header__tabsLink:hover,
li.Header__tabsTab.Header__tabsTabActive > a.Header__tabsLink:hover {
    border-bottom-color: var(--cmo-red) !important;
}

/* FIX #5: Hide broken FormShortCut icon entirely.
   Replaced with a plain text "New Ticket" link in header.html. */
/* DOM: li.Header__formShort > div.FormShortCut__formPopup */
li.Header__formShort {
    padding: 0 !important;
    margin: 0 !important;
}

#cmo-form-shortcut {
    display: flex !important;
    align-items: center !important;
    margin-left: 16px !important;
}

/* Hide Zoho's broken SVG plus icon */
div.FormShortCut__plusPopup {
    display: none !important;
}

/* Custom "New Ticket" text link replacing the broken icon */
a.cmo-new-ticket-link {
    font-family: var(--cmo-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--cmo-white) !important;
    background: var(--cmo-red) !important;
    text-decoration: none !important;
    padding: 10px 20px !important;
    white-space: nowrap !important;
    transition: background 0.2s ease !important;
    display: inline-block !important;
    line-height: 1.4 !important;
}

a.cmo-new-ticket-link:hover {
    background: var(--cmo-red-light) !important;
}

/* FormShortCut dropdown — style visually, DO NOT hide.
   Popup__hide class controls visibility (Zoho toggle). */
div.FormShortCut__content {
    background: var(--cmo-white) !important;
    border: 1px solid var(--cmo-g200) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

div.FormShortCut__plusPopupContent {
    padding: 8px 0 !important;
}

div.FormShortCut__plusPopupContent a.Link__link {
    font-family: var(--cmo-sans) !important;
    font-size: 14px !important;
    color: var(--cmo-slate) !important;
    padding: 8px 16px !important;
    display: block !important;
    text-decoration: none !important;
}

div.FormShortCut__plusPopupContent a.Link__link:hover {
    background: var(--cmo-g100) !important;
    color: var(--cmo-blue) !important;
}

div.FormShortCut__menuSubTitle {
    font-family: var(--cmo-sans) !important;
    font-size: 12px !important;
    color: var(--cmo-g400) !important;
    padding: 2px 16px 8px !important;
}

/* Popup arrow */
span.Popup__arrow.Popup__arrowbottom {
    border-bottom-color: var(--cmo-white) !important;
}

/* ============================================================
   HEADER SEARCH
   DOM: div.Header__headerSearch > div#searchContainer.Header__headerSearchInner
        > div.Search__searchIcon, div.Search__searchPanel
   ============================================================ */

/* FIX #8 (cont.): Zoho applies padding-left: 25.6px to the search
   wrapper, pushing the search box right of the content grid. Zero it. */
.Header__headerSearch {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Search row — seamless, no border, no separator line.
   Sits flush against the content area below. */
#cmo-search-row {
    background: var(--cmo-white) !important;
    border: none !important;
    border-bottom: none !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 8px 12.8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#cmo-search-inner {
    flex: 1 !important;
    max-width: 480px !important;
}

/* Search panel */
div.Search__searchPanel {
    background: var(--cmo-white) !important;
    border: 1px solid var(--cmo-g300) !important;
    box-shadow: none !important;
}

div.Search__searchPanel:focus-within {
    border-color: var(--cmo-blue) !important;
    box-shadow: 0 0 0 2px rgba(9, 102, 186, 0.08) !important;
}

/* Search input */
input#autoSearchContainer {
    font-family: var(--cmo-sans) !important;
    font-size: 13px !important;
    color: var(--cmo-slate) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 12px !important;
}

input#autoSearchContainer::placeholder {
    color: var(--cmo-g400) !important;
    font-family: var(--cmo-sans) !important;
}

/* Search icon — hidden. This is Zoho's standalone magnifying glass
   that renders outside/above the search panel. The search input
   already has its own icon inside the panel. */
div.Search__searchIcon {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* FIX #11: Search scope filter tabs ("SEARCH IN" / ALL / KNOWLEDGE BASE /
   TICKETS) overlap the brand row. Zoho sets position: absolute; top: -37px
   on .searchPanelSections to float tabs above the input. With our reduced
   header that lands 28px inside the brand row. Reset to static flow.
   Zoho also constrains Radio__radioLabel to 22x10px with overflow: hidden,
   collapsing tab text. Override all dimension constraints. */
div.searchPanelSections {
    position: static !important;
    top: auto !important;
    padding: 6px 0 0 !important;
}

/* "Search in" label */
label.Form__searchPanelsearchLabelundefined {
    font-family: var(--cmo-mono) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--cmo-g400) !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 8px !important;
}

/* Radio button group — the ALL / KNOWLEDGE BASE / TICKETS row */
div.Radio__radioButtonGroup {
    gap: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    width: auto !important;
}

/* Each radio button span wrapper — negative margin collapses doubled borders */
div.searchPanelSections span.Radio__button {
    height: auto !important;
    width: auto !important;
    display: inline-block !important;
    margin: 0 0 0 -1px !important;
    padding: 0 !important;
}
div.searchPanelSections span.Radio__button:first-child {
    margin-left: 0 !important;
}

/* Individual radio tab labels — override Zoho 22x10px constraint */
div.searchPanelSections label.Radio__radioLabel {
    font-family: var(--cmo-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--cmo-g600) !important;
    background: var(--cmo-g100) !important;
    padding: 5px 12px !important;
    white-space: nowrap !important;
    border: 1px solid var(--cmo-g300) !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    display: inline-block !important;
    line-height: 1.4 !important;
}

/* radioFaux span — Zoho's actual text element inside the label */
div.searchPanelSections span.Radio__radioFaux {
    display: inline !important;
    visibility: visible !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    font-size: inherit !important;
    color: inherit !important;
}

/* Active / checked radio tab — replace Zoho pink #f20043 with CMO blue */
div.searchPanelSections span.Radio__button input:checked + label.Radio__radioLabel {
    background: var(--cmo-blue) !important;
    color: var(--cmo-white) !important;
    border-color: var(--cmo-blue) !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Hover on inactive tabs */
div.searchPanelSections label.Radio__radioLabel:hover {
    background: var(--cmo-g200) !important;
}
div.searchPanelSections span.Radio__button input:checked + label.Radio__radioLabel:hover {
    background: var(--cmo-blue) !important;
}

/* Search close button */
span.Search__cursor {
    cursor: pointer !important;
}

span.Search__cursor svg {
    fill: var(--cmo-g400) !important;
    width: 14px !important;
    height: 14px !important;
}

/* ============================================================
   SIGN IN / SIGN OUT LINKS IN HEADER
   DOM: div#logoutDetails > div.LogInDetailsContainer__logInAvatar
        > a.LogInDetailsContainer__signIn, a.LogInDetailsContainer__signUp
   ============================================================ */
a.LogInDetailsContainer__signIn,
a.LogInDetailsContainer__signUp {
    font-family: var(--cmo-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--cmo-g600) !important;
    text-decoration: none !important;
    padding: 4px 8px !important;
    transition: color 0.2s ease !important;
}

a.LogInDetailsContainer__signIn:hover,
a.LogInDetailsContainer__signUp:hover {
    color: var(--cmo-blue) !important;
}

/* Accessibility button */
div.CustomizeFontSize__accessibility_settings {
    cursor: pointer !important;
}

div.CustomizeFontSize__accessibility_settings svg {
    fill: var(--cmo-g500) !important;
    width: 18px !important;
    height: 18px !important;
}

/* User preference mobile */
.Header__userPreference_mobile {
    display: none !important;
}

/* ============================================================
   CONTENT LAYOUT
   DOM: main#acbt_layout (.Layout__twoColumn or .Layout__narrow)
   ============================================================ */
main.Layout__twoColumn,
main.Layout__narrow {
    max-width: 1200px !important;
    margin: 0 auto !important;
    font-family: var(--cmo-sans) !important;
}

/* Home page: Layout__layout2 exists but is empty — collapse it so
   Layout__layout1 takes full width and centres properly. */
div.Layout__layout2:empty {
    display: none !important;
}
main.Layout__twoColumn:has(div.Layout__layout2:empty),
main.Layout__twoColumn:not(:has(div.Layout__layout2)) {
    display: block !important;
}
main.Layout__twoColumn:has(div.Layout__layout2:empty) > div.Layout__layout1,
main.Layout__twoColumn:not(:has(div.Layout__layout2)) > div.Layout__layout1 {
    max-width: 100% !important;
    width: 100% !important;
}

div.Layout__layout1 {
    font-family: var(--cmo-sans) !important;
}

/* ============================================================
   HEADINGS — Instrument Serif
   ============================================================ */
h1, h2, h3, h4 {
    font-family: var(--cmo-serif) !important;
    color: var(--cmo-black) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
}

h1 { font-size: 32px !important; }
h2 { font-size: 26px !important; }
h3 { font-size: 22px !important; }
h4 { font-size: 18px !important; }

p, li, td, th {
    font-family: var(--cmo-sans) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: var(--cmo-g600) !important;
}

/* ============================================================
   LINKS (content area only)
   Scoped to main content, won't touch header/footer/buttons
   ============================================================ */
main#acbt_layout a.Link__link,
main#acbt_layout a.CommonStyle__zt1Link {
    color: var(--cmo-blue) !important;
    text-decoration: none !important;
}

main#acbt_layout a.Link__link:hover,
main#acbt_layout a.CommonStyle__zt1Link:hover {
    color: var(--cmo-blue-light) !important;
}

/* ============================================================
   HOME PAGE — BLURB NAV CARDS
   DOM: div.BlurNav__blurbNav > div.BlurNav__blurbNavItem
   ============================================================ */
div.BlurNav__blurbNav {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

div.BlurNav__blurbNavItem {
    background: var(--cmo-white) !important;
    border: 1px solid var(--cmo-g200) !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

div.BlurNav__blurbNavItem:hover {
    border-color: var(--cmo-g300) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

div.BlurNav__blurPad {
    padding: 28px 32px !important;
}

div.BlurNav__blurbNavItemTitle {
    font-family: var(--cmo-serif) !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: var(--cmo-black) !important;
}

div.BlurNav__blurbNavItemTitle a.Link__link {
    color: var(--cmo-black) !important;
    text-decoration: none !important;
}

div.BlurNav__blurbNavItemTitle a.Link__link:hover {
    color: var(--cmo-blue) !important;
}

div.BlurNav__blurbDescription {
    font-family: var(--cmo-sans) !important;
    font-size: 14px !important;
    color: var(--cmo-g500) !important;
    margin-top: 8px !important;
}

/* ============================================================
   FEED / RECENT ARTICLES
   DOM: div.Feed__feed.Feed__feedshadow1
   ============================================================ */
div.Feed__feed {
    background: var(--cmo-white) !important;
    border: 1px solid var(--cmo-g200) !important;
    box-shadow: none !important;
}

div.Feed__feedHeader {
    border-bottom: 1px solid var(--cmo-g200) !important;
    padding: 20px 24px !important;
    background: var(--cmo-white) !important;
}

div.Feed__feedHeader h2 {
    font-family: var(--cmo-serif) !important;
    color: var(--cmo-black) !important;
    font-weight: 400 !important;
    font-size: 22px !important;
}

div.Feed__feedContent {
    background: var(--cmo-white) !important;
}

div.Feed__feedFooter {
    border-top: 1px solid var(--cmo-g200) !important;
    padding: 12px 24px !important;
}

/* ============================================================
   ARTICLE CARDS
   DOM: a.ArticlesCard__articleLink > div.ArticlesCard__articleCard
   ============================================================ */
a.ArticlesCard__articleLink {
    text-decoration: none !important;
    display: block !important;
}

div.ArticlesCard__articleCard {
    background: var(--cmo-white) !important;
    border: none !important;
    border-bottom: 1px solid var(--cmo-g200) !important;
    padding: 16px 24px !important;
    box-shadow: none !important;
    margin: 0 !important;
    transition: background 0.15s ease !important;
}

div.ArticlesCard__articleCard:hover {
    background: var(--cmo-g100) !important;
}

h2.ArticlesCard__articleCardTitle {
    font-family: var(--cmo-sans) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--cmo-slate) !important;
    text-decoration: none !important;
}

a.ArticlesCard__articleLink:hover h2.ArticlesCard__articleCardTitle {
    color: var(--cmo-blue) !important;
}

p.ArticlesCard__articleCardExtract {
    font-family: var(--cmo-sans) !important;
    font-size: 13px !important;
    color: var(--cmo-g500) !important;
    margin-top: 4px !important;
}

/* ============================================================
   KB PAGE
   DOM: div.KBArticleListLeftContainer__articleContainer
   ============================================================ */
div.KBArticleListLeftContainer__articleContainer {
    font-family: var(--cmo-sans) !important;
}

div.KBArticleListLeftContainer__flexWrap {
    font-family: var(--cmo-serif) !important;
    font-size: 22px !important;
    color: var(--cmo-black) !important;
}

div.KBArticleListLeftContainer__alignSelfEnd {
    font-family: var(--cmo-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--cmo-g400) !important;
}

/* Article list container */
div.KBArticleListLeftContainer__kbListMin {
    padding: 0 !important;
}

/* ============================================================
   BREADCRUMBS
   DOM: ul.BreadCrumbs__breadcrumbs
   ============================================================ */
ul.BreadCrumbs__breadcrumbs {
    font-family: var(--cmo-mono) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--cmo-g400) !important;
}

ul.BreadCrumbs__breadcrumbs li {
    font-family: var(--cmo-mono) !important;
    font-size: 11px !important;
    color: var(--cmo-g400) !important;
}

/* ============================================================
   PAGINATION
   DOM: ul.Pagination__pagination > li.Pagination__paginationItem
   ============================================================ */
ul.Pagination__pagination {
    font-family: var(--cmo-mono) !important;
    font-size: 12px !important;
    gap: 8px !important;
    padding: 24px 0 !important;
    border-top: 1px solid var(--cmo-g200) !important;
    margin-top: 16px !important;
}

li.Pagination__paginationItem {
    margin: 0 !important;
}

li.Pagination__paginationItem.CommonStyle__displayBlock {
    display: inline-block !important;
}

a.Pagination__paginationLink {
    font-family: var(--cmo-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: var(--cmo-charcoal) !important;
    text-decoration: none !important;
    padding: 8px 20px !important;
    border: 1px solid var(--cmo-g300) !important;
    background: var(--cmo-white) !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

a.Pagination__paginationLink:hover {
    background: var(--cmo-charcoal) !important;
    border-color: var(--cmo-charcoal) !important;
    color: var(--cmo-white) !important;
}

li.Pagination__paginationItem.Pagination__disabled span {
    font-family: var(--cmo-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: var(--cmo-g300) !important;
    cursor: default !important;
    padding: 8px 20px !important;
    border: 1px solid var(--cmo-g200) !important;
    background: var(--cmo-g100) !important;
}

/* ============================================================
   KB RIGHT SIDEBAR
   DOM: div.Layout__layout2
   ============================================================ */
h3.KBArticleRightContainer__title {
    font-family: var(--cmo-serif) !important;
    font-size: 18px !important;
    color: var(--cmo-black) !important;
    margin-bottom: 12px !important;
}

/* Category description block — avatar + text side by side */
div.KBArticleRightContainer__descriptionContent {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

/* Clock/category icon avatar — constrain size, soften appearance */
div.KBArticleRightContainer__descriptionAvatar {
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    overflow: hidden !important;
}

div.KBArticleRightContainer__descriptionAvatar img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    opacity: 0.7 !important;
}

/* Avatar wrapper inside — kill any Zoho forced sizing */
div.KBArticleRightContainer__descriptionAvatar div.Avatar__avatar {
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
}

p.KBArticleRightContainer__categoryDescription {
    font-family: var(--cmo-sans) !important;
    font-size: 13px !important;
    color: var(--cmo-g500) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* Follow button area spacing */
div.KBArticleRightContainer__userFollowOption {
    margin-top: 16px !important;
    margin-bottom: 20px !important;
}

div.KBArticleRightContainer__followDescription {
    font-family: var(--cmo-sans) !important;
    font-size: 12px !important;
    color: var(--cmo-g400) !important;
    margin-top: 6px !important;
}

h3.CategoriesContainer__solutionListHeading {
    font-family: var(--cmo-serif) !important;
    font-size: 18px !important;
    color: var(--cmo-black) !important;
    margin-bottom: 12px !important;
}

/* FIX #12: Article body links use browser-default blue (#0000ee) and turn
   purple (#800080) when visited. Override to CMO blue with underline on
   hover. Scoped to unclassed <a> tags inside the article content container
   so nav, sidebar, and TOC links are unaffected. */
div.KBArticleDetailLeftContainer__articleContent a:not([class]) {
    color: var(--cmo-blue) !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    transition: border-color 0.15s ease, color 0.15s ease !important;
}

div.KBArticleDetailLeftContainer__articleContent a:not([class]):hover {
    border-bottom-color: var(--cmo-blue) !important;
}

div.KBArticleDetailLeftContainer__articleContent a:not([class]):visited {
    color: var(--cmo-blue) !important;
}

/* ============================================================
   SIDEBAR MENU / KB TREE
   DOM: ul.Menu__menu > li.Menu__menuItem > a.Menu__menuLink
   ============================================================ */
ul.Menu__menu {
    background: var(--cmo-white) !important;
}

li.Menu__menuItem {
    font-family: var(--cmo-sans) !important;
    font-size: 14px !important;
}

a.Menu__menuLink {
    font-family: var(--cmo-sans) !important;
    font-size: 14px !important;
    color: var(--cmo-g600) !important;
    padding: 8px 12px !important;
    text-decoration: none !important;
    display: block !important;
    transition: color 0.15s ease !important;
}

a.Menu__menuLink:hover {
    color: var(--cmo-blue) !important;
    background: transparent !important;
}

a.Menu__menuLink:hover span.Menu__menuTextBlock {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* Active tree item */
li.Menu__menuItem.Menu__itemActive > a.Menu__menuLink {
    color: var(--cmo-blue) !important;
    font-weight: 600 !important;
    border-left: 3px solid var(--cmo-red) !important;
}

span.Menu__menuTextBlockActive {
    color: var(--cmo-blue) !important;
    font-weight: 600 !important;
}

/* Right sidebar — consistent typography */
div.Layout__layout2 {
    font-family: var(--cmo-sans) !important;
}

/* Fade-out effect at bottom of sticky sidebar */
div.TicketFormRightContainer__fadeOutEffect {
    display: none !important;
}

/* ── POPULAR ARTICLES WIDGET (ticket page sidebar) ──
   DOM: ScrollSticky__type2 > div > div.widgetItem > ul.Menu__menu.Menu__vertical
   The widgetItem is a SIBLING of TicketFormRightContainer__fadeOutEffect,
   not a child. Use .Menu__vertical to scope to ticket sidebar only
   (KB tree uses .Menu__tree.Menu__arrowTree instead). */

/* Widget title */
h3.TicketFormRightContainer__menuTitle {
    font-family: var(--cmo-serif) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--cmo-black) !important;
    letter-spacing: -0.3px !important;
    border-bottom: 1px solid var(--cmo-g200) !important;
    padding: 16px 12px !important;
    margin-bottom: 16px !important;
}

h3.TicketFormRightContainer__menuTitle span.modulesname {
    font-family: var(--cmo-serif) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--cmo-black) !important;
}

/* Article list container — override CommonStyle__padding0.
   .Menu__vertical is ticket-page-only (KB uses .Menu__tree). */
ul.Menu__menu.Menu__vertical {
    padding: 4px 16px 16px !important;
}

/* Individual article list items */
ul.Menu__vertical > li.Menu__menuItem {
    padding: 0 !important;
    margin: 0 !important;
}

/* Article links — override CommonStyle__zt1Link blue/large font */
ul.Menu__vertical > li.Menu__menuItem > a.Menu__menuLink {
    font-family: var(--cmo-sans) !important;
    font-size: 13px !important;
    color: var(--cmo-g600) !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    padding: 6px 0 !important;
    display: block !important;
}

ul.Menu__vertical > li.Menu__menuItem > a.Menu__menuLink:hover {
    color: var(--cmo-blue) !important;
    background: transparent !important;
}

ul.Menu__vertical > li.Menu__menuItem > a.Menu__menuLink:hover span.Menu__menuTextBlock {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* Text spans inside article links */
ul.Menu__vertical span[class*="Menu__menuTextBlock"] {
    font-family: var(--cmo-sans) !important;
    font-size: 13px !important;
    color: inherit !important;
}

/* ============================================================
   BUTTONS
   DOM: a.Button__button.Button__primary, a.Button__button.Button__neutral
   ============================================================ */
a.Button__button.Button__primary {
    background: var(--cmo-red) !important;
    background-color: var(--cmo-red) !important;
    background-image: none !important;
    color: var(--cmo-white) !important;
    font-family: var(--cmo-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 10px 22px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

a.Button__button.Button__primary:hover {
    background: var(--cmo-red-light) !important;
    background-color: var(--cmo-red-light) !important;
}

/* Neutral / secondary button */
a.Button__button.Button__neutral {
    background: var(--cmo-cream) !important;
    color: var(--cmo-slate) !important;
    font-family: var(--cmo-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 10px 22px !important;
    border: 1px solid var(--cmo-g300) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

a.Button__button.Button__neutral:hover {
    background: var(--cmo-g100) !important;
    border-color: var(--cmo-g400) !important;
}

/* Follow button (KB sidebar) — subtle, secondary treatment */
a.Button__button.Button__hoverdanger {
    background: transparent !important;
    color: var(--cmo-blue) !important;
    font-family: var(--cmo-mono) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    border: 1px solid var(--cmo-g300) !important;
    padding: 5px 12px !important;
}

a.Button__button.Button__hoverdanger:hover {
    background: var(--cmo-g100) !important;
    border-color: var(--cmo-blue) !important;
}

/* Form submit/input buttons */
input[type="submit"],
form button[type="submit"] {
    background: var(--cmo-red) !important;
    color: var(--cmo-white) !important;
    font-family: var(--cmo-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 10px 22px !important;
    border: none !important;
    cursor: pointer !important;
}

input[type="submit"]:hover,
form button[type="submit"]:hover {
    background: var(--cmo-red-light) !important;
}

/* ============================================================
   FORMS & INPUTS
   DOM: form#ticketform_fields_container
        div.Form__formElement > label.Form__formElementLabel
        input.Input__inputCommon.Input__input
   ============================================================ */
input.Input__inputCommon.Input__input,
input.Input__inputCommon.Input__searchPanelInput {
    font-family: var(--cmo-sans) !important;
    font-size: 14px !important;
    color: var(--cmo-slate) !important;
    background: var(--cmo-white) !important;
    border: 1px solid var(--cmo-g300) !important;
    padding: 10px 14px !important;
    box-shadow: none !important;
}

input.Input__inputCommon:focus {
    border-color: var(--cmo-blue) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(9, 102, 186, 0.12) !important;
}

textarea,
select {
    font-family: var(--cmo-sans) !important;
    font-size: 14px !important;
    color: var(--cmo-slate) !important;
    background: var(--cmo-white) !important;
    border: 1px solid var(--cmo-g300) !important;
    padding: 10px 14px !important;
    box-shadow: none !important;
}

textarea:focus,
select:focus {
    border-color: var(--cmo-blue) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(9, 102, 186, 0.12) !important;
}

/* Form labels — confirmed class: label.Form__formElementLabel */
label.Form__formElementLabel {
    font-family: var(--cmo-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--cmo-g500) !important;
    margin-bottom: 6px !important;
}

/* Required asterisk */
abbr.Form__required {
    color: var(--cmo-red) !important;
    text-decoration: none !important;
}

/* Section name in ticket form */
div.TicketFmLtCnter__sectionName {
    font-family: var(--cmo-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--cmo-g400) !important;
    padding: 12px 0 8px !important;
    border-bottom: 1px solid var(--cmo-g200) !important;
    margin-bottom: 16px !important;
}

/* Ticket form title */
h2.TicketFmLtCnter__title {
    font-family: var(--cmo-serif) !important;
    font-size: 26px !important;
    color: var(--cmo-black) !important;
}

/* Radio buttons — DO NOT override display or visibility */
div.Radio__radioButtonGroup {
    font-family: var(--cmo-sans) !important;
}

label.Radio__radioLabel {
    font-family: var(--cmo-sans) !important;
    font-size: 14px !important;
    color: var(--cmo-g600) !important;
    cursor: pointer !important;
}

/* FIX #9: Replace Zoho's bright pink-red (#f20043) on selected priority
   radio buttons with CMO charcoal. Scoped to #field_priority to avoid
   hitting the captcha radio labels (same Radio__radioLabel class).
   Doubled class for specificity to beat the vendor's !important rules.
   Vendor uses box-shadow for bottom accent, border-left for dividers. */
#field_priority label.Radio__radioLabel.Radio__radioLabel[aria-checked="true"] {
    background-color: var(--cmo-charcoal) !important;
    color: var(--cmo-white) !important;
    border-left-color: var(--cmo-charcoal) !important;
    box-shadow: 0 2px 0 0 var(--cmo-charcoal) !important;
}

/* File upload label */
label.FileUpload__labelAllow {
    font-family: var(--cmo-sans) !important;
    font-size: 13px !important;
    color: var(--cmo-blue) !important;
}

label.FileUpload__labelAllow:hover {
    color: var(--cmo-blue-light) !important;
}

/* Rich text editor */
div.KB_Editor {
    border: 1px solid var(--cmo-g300) !important;
    background: var(--cmo-white) !important;
}

div.KB_Editor_menus {
    background: var(--cmo-g100) !important;
    border-bottom: 1px solid var(--cmo-g200) !important;
}

/* ============================================================
   SIGN-IN / SIGN-UP PAGE
   DOM: div.UserSigninContainer__signInIframe (contains iframe#iamFrame)
        div.UserSigninContainer__forgetInform
   NOTE: iframe#iamFrame content CANNOT be styled via portal CSS
   ============================================================ */
div.UserSigninContainer__signInIframe {
    font-family: var(--cmo-sans) !important;
}

div.UserSigninContainer__forgetInform {
    font-family: var(--cmo-sans) !important;
}

div.UserSigninContainer__loginHalf {
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--cmo-g200) !important;
}

div.UserSigninContainer__loginHalf:last-child {
    border-bottom: none !important;
}

p.UserSigninContainer__signUpDescription {
    font-family: var(--cmo-sans) !important;
    font-size: 13px !important;
    color: var(--cmo-g500) !important;
}

a.UserSigninContainer__userLink {
    color: var(--cmo-blue) !important;
    text-decoration: none !important;
}

a.UserSigninContainer__userLink:hover {
    color: var(--cmo-blue-light) !important;
}

/* ============================================================
   AVATARS
   DOM: div.Avatar__avatar
   ============================================================ */
div.Avatar__avatar {
    background: var(--cmo-charcoal) !important;
    color: var(--cmo-white) !important;
    font-family: var(--cmo-sans) !important;
    font-weight: 700 !important;
}

/* ============================================================
   FIX #10 — KB CATEGORY CARDS
   Scoped override: light icon boxes with dark SVG icons,
   softer card borders, blue hover accent.
   Global Avatar__avatar charcoal rule above still applies
   to author/user avatars elsewhere.
   ============================================================ */
.CategoryBlock__kbCategoryImg .Avatar__avatar.Avatar__square {
    background: var(--cmo-g100) !important;
    border: 1px solid var(--cmo-g200) !important;
    border-radius: 0 !important;
}

.CategoryBlock__kbCategoryImg .Avatar__avatar.Avatar__square img {
    filter: brightness(0) saturate(100%) invert(14%) sepia(15%) saturate(1200%)
            hue-rotate(170deg) brightness(95%) !important;
}

a.CategoryBlock__kbCategory {
    border: 1px solid var(--cmo-g200) !important;
    border-top: none !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: background 0.2s ease !important;
}

a.CategoryBlock__kbCategory:first-child {
    border-top: 1px solid var(--cmo-g200) !important;
}

a.CategoryBlock__kbCategory:hover {
    background: var(--cmo-g100) !important;
}

/* ============================================================
   ACCESSIBILITY PANEL
   DOM: div.AccessibilityPanel__content
   Style visually only — DO NOT hide or alter display
   ============================================================ */
div.AccessibilityPanel__content {
    background: var(--cmo-white) !important;
    border: 1px solid var(--cmo-g200) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    font-family: var(--cmo-sans) !important;
}

div.AccessibilityPanel__widgetTitle {
    font-family: var(--cmo-serif) !important;
    font-size: 18px !important;
    color: var(--cmo-black) !important;
}

/* ============================================================
   BACK TO TOP
   DOM: span.AppContainer__backToTop
   ============================================================ */
span.AppContainer__backToTop {
    background: var(--cmo-charcoal) !important;
    color: var(--cmo-white) !important;
    cursor: pointer !important;
}

span.AppContainer__backToTop svg {
    fill: var(--cmo-white) !important;
}

/* ============================================================
   SCROLL STICKY (ticket form sidebar)
   DOM: div.ScrollSticky__type2
   ============================================================ */
div.ScrollSticky__type2 {
    font-family: var(--cmo-sans) !important;
    padding: 0 !important;
}

/* ============================================================
   FOOTER
   DOM: footer#footerContainer.Footer__footer
   Custom footer replaces default content
   ============================================================ */
footer.Footer__footer,
#footerContainer {
    all: unset !important;
    display: block !important;
    background: var(--cmo-black) !important;
    color: var(--cmo-g400) !important;
    font-family: var(--cmo-sans) !important;
    font-size: 13px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* FIX #7: Hide Zoho's DEFAULT footer content (not our custom footer).
   Zoho's default footer renders: <footer> > <div> > <span>text</span><a>link</a>
   Our custom footer is: <footer> > #cmo-footer-wrap > ... */
footer.Footer__footer > div:not(#cmo-footer-wrap) > span,
footer.Footer__footer > div:not(#cmo-footer-wrap) > a.Footer__footerLink {
    display: none !important;
}

/* Sentry Cybersecurity branding link */
a.cmo-footer-sentry {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    color: var(--cmo-g500) !important;
    font-family: var(--cmo-sans) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    padding-left: 10px !important;
    transition: color 0.2s ease !important;
}

a.cmo-footer-sentry:hover {
    color: var(--cmo-g300) !important;
}

a.cmo-footer-sentry strong {
    color: inherit !important;
    font-weight: 700 !important;
}

a.cmo-footer-sentry svg {
    flex-shrink: 0 !important;
}

#cmo-footer-wrap {
    background: var(--cmo-black) !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    text-align: left !important;
}

#cmo-footer-grid {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
    gap: 40px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 56px 56px 40px !important;
    text-align: left !important;
}

.cmo-footer-col {
    text-align: left !important;
}

.cmo-footer-brand {
    margin-bottom: 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    display: block !important;
}

/* Footer brand text (white on dark bg) */
.cmo-footer-brand .cmo-brand-primary {
    color: var(--cmo-white) !important;
    font-size: 17px !important;
}

.cmo-footer-brand .cmo-brand-secondary {
    color: var(--cmo-g400) !important;
    font-size: 14px !important;
}

.cmo-footer-text {
    font-family: var(--cmo-sans) !important;
    font-size: 13px !important;
    color: var(--cmo-g400) !important;
    line-height: 1.6 !important;
    margin: 0 0 10px !important;
    text-align: left !important;
}

.cmo-footer-col-title {
    font-family: var(--cmo-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--cmo-g400) !important;
    margin-bottom: 16px !important;
    text-align: left !important;
}

.cmo-footer-link {
    font-family: var(--cmo-sans) !important;
    font-size: 13px !important;
    color: var(--cmo-g400) !important;
    text-decoration: none !important;
    display: block !important;
    padding: 4px 0 !important;
    text-align: left !important;
    transition: color 0.2s ease !important;
}

.cmo-footer-link:hover {
    color: var(--cmo-g200) !important;
}

#cmo-footer-bottom {
    background: #0a0a0a !important;
    padding: 20px 56px !important;
}

#cmo-footer-bottom-inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.cmo-footer-copy {
    font-family: var(--cmo-mono) !important;
    font-size: 12px !important;
    color: var(--cmo-g400) !important;
}

.cmo-footer-bottom-links {
    display: flex !important;
    align-items: center !important;
}

.cmo-footer-bottom-link {
    font-family: var(--cmo-sans) !important;
    font-size: 12px !important;
    color: var(--cmo-g400) !important;
    text-decoration: none !important;
    padding: 0 10px !important;
    transition: color 0.2s ease !important;
}

.cmo-footer-bottom-link:hover {
    color: var(--cmo-g200) !important;
}

.cmo-footer-bottom-sep {
    color: rgba(255, 255, 255, 0.15) !important;
    font-size: 12px !important;
    user-select: none !important;
}

/* Sentry branding handled by a.cmo-footer-sentry above */

/* ============================================================
   UTILITY
   ============================================================ */
::selection {
    background: rgba(187, 20, 10, 0.15);
    color: var(--cmo-black);
}

*:focus-visible {
    outline: 2px solid var(--cmo-blue) !important;
    outline-offset: 2px !important;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--cmo-g100); }
::-webkit-scrollbar-thumb { background: var(--cmo-g300); }
::-webkit-scrollbar-thumb:hover { background: var(--cmo-g400); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .Header__headerRow,
    #headerRow {
        padding: 0 20px !important;
        height: auto !important;
        flex-wrap: wrap !important;
    }

    #cmo-nav-links {
        width: 100% !important;
        overflow-x: auto !important;
        padding: 8px 0 !important;
    }

    .Header__tabsList,
    #tabList {
        gap: 20px !important;
    }

    #cmo-support-bar {
        padding: 0 20px !important;
    }

    .cmo-support-link {
        font-size: 10px !important;
        padding: 0 8px !important;
    }

    #cmo-search-row {
        padding: 10px 20px !important;
    }

    #cmo-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        padding: 32px 20px 24px !important;
    }

    #cmo-footer-bottom {
        padding: 16px 20px !important;
    }

    #cmo-footer-bottom-inner {
        flex-direction: column !important;
        text-align: center !important;
    }

    /* Show mobile accessibility toggle */
    .Header__userPreference_mobile {
        display: block !important;
    }
}

/* ============================================================
   READING PROGRESS BAR — CMO blue gradient
   ============================================================ */
div.ReadingProgress__progressBar {
    background-image: linear-gradient(90deg, #00305A 0%, #0966BA 100%) !important;
}