/* ============================================================================
   OneSmile Provider Help Centre — success.one-smile.com
   Theme: MATERIALIZE
   Version: 4.3  ·  3 Aug 2026

   HOW TO APPLY
   Setup → Channels → Help Center → OneSmile | Proactive Orthodontics →
   Customization → Materialize → Customize → CSS tab.
   Select all, paste this file, then Publish.

   CHANGES FROM 3.0  (3.0 is what is published today)
   · Section 3 gains the TOP BAR. The Header HTML block held the hero and no
     header at all — read back off the server to confirm — so the .Header__*
     rules had nothing to style and the site had no black bar. The bar is now
     custom markup, .oshc-topbar, with the white Wix-CDN logo. The .Header__*
     rules are kept and inert: they are the landing pad if that block is ever
     reset to Zoho's default. Sign-in styled too.
   · Section 4 rewritten — Zoho's own field is now the FALLBACK, not a proxy.
   · Section 5 hides the raise-a-ticket "+".
   · Section 17 gains the top-bar breakpoints and the mobile gutters that were
     written for 3.1 and never published; cards currently run to the edge.
   · Section 19: .oshc-hero-search is a real element now, and a nowrap row.
   · Section 20 added — search results page.
   · REMOVED: the .oshc-suggest typeahead panel, ~1.4KB styling a dropdown no
     script has ever rendered. See the note in section 19. It is intact in
     v3.0 if it is ever built.
   · Older changelog (2.6 → 3.0) dropped to make room; see v3.0.

   NOTES / GOTCHAS
   · ⚠ SIZE LIMIT ON THIS FIELD. 59,488 bytes saves; 71,440 was rejected with
     an error and nothing was written. Keep this under about 60,000 — if a
     paste errors, check the size before you go looking for a syntax problem.
   · Zoho STRIPS @import on save. Fonts load via @font-face.
   · Zoho also strips <form> and <script> from the Header HTML block — which
     is why the hero's Search button lives in a custom widget.
   · The font files are fixed Google Fonts subsets. Do not add Material
     Symbols names outside that subset; an absent glyph renders as text.
   · The sign-in "Next" button is inside a cross-origin iframe — section 13.
   · Zoho writes a ~297px min-height onto every card grid with align-content
     at default, so rows stretch. Sections 7 and 8 neutralise it — do not
     remove those min-height / align-content lines.
   · Article bodies are styled entirely from section 18.

   BRAND
   Ink #000000 · Canvas #F3F4F6 · Mid grey #6A7282
   Lowlight sage #47734E (emphasis) · Highlight sage #F5F8F5 (fills)
   ============================================================================ */

/* ============================================================================
   1 · FONTS + DESIGN TOKENS
   ============================================================================ */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K6z9mXg.woff2) format('woff2');
}

@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v363/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDB_Qb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxeJKJBiCa8.woff2) format('woff2');
}

:root {
  /* Zoho theme hooks */
  --color-brand:            #47734E;
  --color-link:             #000000;
  --color-linkHover:        #6A7282;
  --color-buttonPrimaryBg:  #47734E;
  --color-buttonPrimaryText:#ffffff;

  /* OneSmile palette */
  --os-ink:       #000000;
  --os-canvas:    #F3F4F6;
  --os-mute:      #6A7282;
  --os-sage-lo:   #47734E;
  --os-sage-hi:   #F5F8F5;
  --os-sage-dark: #3B5F41;
  --os-line:      #E3EAE3;
  --os-line-soft: #EDEDF0;

  /* Type */
  --os-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --os-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Rhythm */
  --os-gap:       12px;
  --os-radius:    12px;   /* cards */
  --os-radius-sm:  9px;   /* icon chips */
}

/* ============================================================================
   2 · GLOBAL TYPOGRAPHY
   ============================================================================ */

.html,
#portal_html,
portal,
body,
.Feed__feedContent,
.CategoryList__description,
.Input__searchPanelInput          { font-family: var(--os-sans) !important; }

portal b                          { font-family: var(--os-sans) !important; font-weight: 600 !important; }

.commonStyle__detailHeader,
.KBArticleListLeftContainer__kblistHeading,
.CategoryList__navItemTitle,
h1, h2, h3, h4 {
  font-family: var(--os-display) !important;
  letter-spacing: -0.015em;
}

/* ============================================================================
   3 · HEADER
   Black chrome. Stock background image layer killed, logo height-constrained,
   nav tabs white with a sage active underline.
   ============================================================================ */

/* ---- THE BAR ITSELF  (.oshc-topbar — from the Header HTML block) ----
   The .Header__* rules below are Zoho's own header, inert while this is in
   place. Kept so that resetting the Header block still lands on brand. */

.oshc-topbar {
  width: 100%;
  background: var(--os-ink);
  font-family: var(--os-sans);
}

/* The ROW inside the bar is constrained to exactly Zoho's content column, so
   the logo starts on the same vertical as the first tile below it. 76.8rem
   and 12.8px are measured off .Layout__layout1 on the live site. A percentage
   max-width, not a 50vw calc — 50vw counts the scrollbar and Zoho's column
   does not, which alone puts the logo ~8px out. */
.oshc-topbar-inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 76.8rem;
  margin: 0 auto;
  padding: 0 12.8px;
  min-height: 64px;
}

.oshc-topbar-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none !important;
}

/* Same 7.4:1 asset as the footer. Height only, width auto, keeps the ratio. */
.oshc-topbar-logo {
  display: block;
  height: 30px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
}

.oshc-topbar-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 0 1 auto;
  min-width: 0;
}

/* Underline grows from the centre on hover and stays put on the active tab.
   The widget script sets .is-active — Zoho does not, because these are plain
   links rather than its ${...} tab placeholders. */
.oshc-topbar-link {
  position: relative;
  display: inline-block;
  padding: 21px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #ffffff !important;
  text-decoration: none !important;
  white-space: nowrap;
  opacity: 0.82;
  transition: opacity .15s ease;
}

.oshc-topbar-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--os-sage-lo);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

.oshc-topbar-link:hover,
.oshc-topbar-link:focus-visible,
.oshc-topbar-link.is-active        { opacity: 1; }

.oshc-topbar-link:hover::after,
.oshc-topbar-link:focus-visible::after,
.oshc-topbar-link.is-active::after { transform: scaleX(1); }

.oshc-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  margin-left: auto;
}

.oshc-topbar-locale,
.oshc-topbar-signin,
.oshc-topbar-right #userPreference,
.oshc-topbar-right #logoutDetails { display: flex; align-items: center; }

/* ${UserPreference} and ${SignInSignOut} expand into markup that is Zoho's,
   not ours, so this paints anything textual white rather than naming classes
   that may change under us. */
.oshc-topbar-right,
.oshc-topbar-right a,
.oshc-topbar-right span,
.oshc-topbar-right div,
.oshc-topbar-right [role="button"] {
  color: #ffffff !important;
  font-family: var(--os-sans) !important;
  font-size: 13px !important;
}

.oshc-topbar-right a { text-decoration: none !important; }
.oshc-topbar-right svg,
.oshc-topbar-right .Icon__icon { color: #ffffff !important; fill: currentColor; }

/* If Zoho renders its locale or account popup INSIDE the bar rather than at
   body level, the blanket white above would put white text on a white card.
   The doubled attribute selector gives these (0,2,0), which outranks the
   (0,1,1) above without naming a class. */
[class*="localePopup"][class],
[class*="localePopup"][class] *,
[class*="Popup__content"][class],
[class*="Popup__content"][class] *,
[class*="userPopup"][class],
[class*="userPopup"][class] *      { color: var(--os-ink) !important; }

.oshc-topbar-signin a,
.oshc-topbar-signin [role="button"] {
  font-weight: 500 !important;
  padding: 7px 4px !important;
  opacity: 0.85;
  transition: opacity .15s ease !important;
}

.oshc-topbar-signin a:hover,
.oshc-topbar-signin [role="button"]:hover { opacity: 1 !important; }

/* Signed-in avatar chip. Excludes the logo, which is also an img in here. */
.oshc-topbar-right img:not(.oshc-topbar-logo) {
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 50% !important;
  height: 28px !important;
  width: 28px !important;
}

.Header__header {
  background-color: var(--os-ink) !important;
  background-image: none !important;
}

.Header__headerImg {
  display: none !important;
  background: none !important;
}

/* Logo asset is 2552x347 (~7.4:1). Height only + width auto keeps the ratio. */
.Header__brandLogoImg {
  height: 34px !important;
  width: auto !important;
  max-height: 34px !important;
  max-width: 240px !important;
  object-fit: contain !important;
  display: block !important;
}

.Header__brandName { display: none !important; }

/* --- nav tabs --- */
.Header__tabsTab,
.Header__tabsLink {
  color: #ffffff !important;
  font-family: var(--os-sans) !important;
}

.Header__tabsLink { transition: opacity .15s ease !important; }

.Header__tabsTab:hover,
.Header__tabsTab:hover .Header__tabsLink,
.Header__tabsTab:focus,
.Header__tabsTab:focus .Header__tabsLink {
  color: #ffffff !important;
  opacity: 0.85 !important;
}

.Header__tabsTab.Header__active,
.Header__tabsTab.Header__active .Header__tabsLink {
  color: #ffffff !important;
  opacity: 1 !important;
}

.Header__headerNav .Header__tabsTab.Header__tabsTabActive,
.Header__headerNav .Header__tabsTab:hover {
  border-bottom-color: var(--os-sage-lo) !important;
}

/* --- language selector: outlined pill, pushed right --- */
/* --- language selector: outlined pill, pushed right ---
   margin-left:auto on whichever child wraps the locale pushes it, and
   everything after it, to the right. */
.Header__headerRow > *:has(.LocalePopup__localeTarget),
.Header__headerRow > .LocalePopup__localeTarget { margin-left: auto !important; }

.LocalePopup__localeTarget {
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  color: #ffffff !important;
  font-family: var(--os-sans) !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  min-width: max-content !important;
  overflow: visible !important;
  transition: border-color .15s ease, background .15s ease !important;
}

.LocalePopup__localeTarget:hover {
  border-color: rgba(255,255,255,0.6) !important;
  background: rgba(255,255,255,0.06) !important;
}

.LocalePopup__globeIcon .Icon__icon { color: #ffffff !important; }

.LocalePopup__localePopup [role="button"],
[class*="localeTab"] [role="button"] {
  color: #ffffff !important;
  font-size: 13px !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 7px !important;
  padding: 6px 12px !important;
  white-space: nowrap !important;
}

/* --- sign in ---
   Quieter than the locale pill beside it: text on black, no border. Signing
   in is not the primary action on a public knowledge base, and two outlined
   pills side by side compete. */
.Header__headerRow a[href*="signin"],
.Header__headerRow a[href*="signIn"],
[class*="Header__signIn"],
[class*="Header__userSign"],
[class*="HeaderUser__signIn"] {
  color: #ffffff !important;
  font-family: var(--os-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 7px 4px !important;
  opacity: 0.85;
  transition: opacity .15s ease !important;
}

.Header__headerRow a[href*="signin"]:hover,
.Header__headerRow a[href*="signIn"]:hover,
[class*="Header__signIn"]:hover,
[class*="Header__userSign"]:hover,
[class*="HeaderUser__signIn"]:hover { opacity: 1 !important; }

/* Signed-in avatar chip, when a provider is authenticated. */
[class*="Header__userImg"],
[class*="Header__avatar"] {
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 50% !important;
}

/* ============================================================================
   4 · SEARCH  (Zoho's own field — the no-JavaScript fallback)
   The Header block keeps ${Search} inside .oshc-headersearch, clipped here to
   1px and left in the DOM.

   Not decoration. The hero's Search button needs script, and script only
   survives in a custom widget — Zoho strips it from the Header block, which
   is how the button ended up doing nothing for weeks. If that happens again,
   DELETE THE .oshc-headersearch RULE and Zoho's own field appears and works
   with no JavaScript.

   Clipped, never display:none — a display-none field cannot be focused. The
   15px goes to 16px at 768px in section 17; Safari zooms below that.
   ============================================================================ */

.oshc-headersearch,
.Header__headerSearch {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.Header__headerSearchInner        { color: var(--os-ink); }

.searchPanelSearchBox {
  background: #ffffff !important;
  border-radius: 8px !important;
}

.Input__searchPanelInput,
.Input__searchPanelInput::placeholder {
  font-family: var(--os-sans) !important;
  font-weight: 400 !important;
  font-size: 15px !important;
}

.Input__searchPanelInput              { color: var(--os-ink) !important; }
.Input__searchPanelInput::placeholder { color: var(--os-mute) !important; }
.Search__searchIcon .Icon__icon       { color: var(--os-mute) !important; }

/* ============================================================================
   5 · BUTTONS + TICKET-CREATION SUPPRESSION
   Providers raise requests through SalesIQ / the Wix portal, never by opening
   a Zoho ticket form. Every entry point is removed.
   ============================================================================ */

.Button__primary {
  background-color: var(--os-sage-lo) !important;
  border: 1px solid var(--os-sage-lo) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-family: var(--os-sans) !important;
  text-transform: none !important;
}

.Button__primary:hover {
  background-color: var(--os-sage-dark) !important;
  border-color: var(--os-sage-dark) !important;
}

/* Hide every ticket-creation link (header, footer, empty states, sidebars). */
a[href*="newticket"],
a[href*="newTicket"],
a[href*="addticket"],
a[href*="addTicket"]              { display: none !important; }

/* Hide the "Submit a new support ticket…" line under the empty-state art. */
.NoContent__contDecst             { display: none !important; }

/* The "+" quick-add control.
   NOT a /newticket link, which is why the href rules above never caught it —
   it is Zoho's FormShortCut module, mounted as .Header__formShort. Class
   names read out of the portal bundle, not guessed. The header markup never
   asks for the module, so this is the second line of defence if a Zoho update
   starts injecting it on its own. */
.Header__formShort,
.Header__plusPopup,
.Icon__plusIcon,
[class^="FormShortCut__"],
[class*=" FormShortCut__"]        { display: none !important; }

/* ============================================================================
   6 · PAGE LAYOUT  ← FIX
   Section 11 hides the right-hand column on KB list and category pages.
   Without this the main column keeps its default flex-basis and leaves a
   ~410px dead void on the right.
   ============================================================================ */

/* List and category pages only. Article pages are deliberately excluded —
   they keep their right column for the in-article contents. */
.Layout__twoColumn:has(.Layout__layout2 .CategoriesContainer__solutionListHeading) .Layout__layout1,
.Layout__twoColumn:has(.KBArticleListLeftContainer__kbListMin) .Layout__layout1,
.Layout__twoColumn:has(.KBArticleListLeftContainer__kbListChange) .Layout__layout1 {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

.Feed__feedshadow1 {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

.Feed__feedHeader { border-bottom: none !important; }

.KBArticleListLeftContainer__kblistHeading {
  font-family: var(--os-display) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: -0.02em !important;
  color: var(--os-ink) !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
}

/* ============================================================================
   7 · CATEGORY TILES  (KB home + category pages)
   kbListMin on the KB home, kbListChange on a category page — same grid. A
   tile is a link carrying a name and a count, so it is sized like one:
   roughly 73px tall, three across at desktop.
   ============================================================================ */

.KBArticleListLeftContainer__kbListMin,
.KBArticleListLeftContainer__kbListChange {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: var(--os-gap) !important;

  /* Rows size to content and sit at the top. Without these three lines Zoho's
     ~297px min-height stretches every row and the cards come out double
     height. This is the oversized-card fix. */
  align-items: stretch !important;
  align-content: start !important;
  grid-auto-rows: min-content !important;
  height: auto !important;
  min-height: 0 !important;
}

.CategoryList__articleCard {
  background: #ffffff !important;
  border: 1px solid var(--os-line) !important;
  border-radius: var(--os-radius) !important;
  padding: 14px 18px !important;
  min-height: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}

.CategoryList__articleCard:hover {
  border-color: var(--os-sage-lo) !important;
  background: var(--os-sage-hi) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
}

.CategoryList__navItemTitle {
  font-family: var(--os-display) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--os-ink) !important;
  letter-spacing: -0.01em !important;
  display: block !important;
  margin-bottom: 1px !important;
}

.List__list.List__listInlineDotDeparated3 {
  color: var(--os-sage-lo) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}

.CategoryList__description {
  font-size: 13px !important;
  color: var(--os-mute) !important;
  line-height: 1.5 !important;
  margin-top: 6px !important;
}

/* Zoho echoes the title into empty descriptions and flags them. Hide those. */
.CategoryList__description.emptydescription { display: none !important; }

/* ---- tile icon: sage rounded square with a Material Symbol ---- */
/* Quiet 32px chip. At 46px it read as a badge and did most of the work of
   making the tiles feel heavy. For a bare glyph, set background:transparent
   and border-radius:0 here. */
.CategoryList__kbSubcategoryImg {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--os-radius-sm) !important;
  background: var(--os-sage-hi) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 14px !important;
  flex: 0 0 32px !important;
  position: relative !important;
}

.CategoryList__categoryIcon svg { display: none !important; }

.CategoryList__kbSubcategoryImg::after {
  font-family: 'Material Symbols Rounded';
  content: 'article';                 /* fallback for any unmapped category */
  font-size: 19px;
  line-height: 1;
  color: var(--os-sage-lo);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* href*= is a substring match, so /case-management/retainers also matches the
   case-management rule — intentional, sub-sections inherit the folder icon.
   Add any sub-section override AFTER these. */
.CategoryList__articleCard[href*="getting-started"]           .CategoryList__kbSubcategoryImg::after { content: 'rocket_launch'; }
.CategoryList__articleCard[href*="portal-platforms"]          .CategoryList__kbSubcategoryImg::after { content: 'grid_view'; }
.CategoryList__articleCard[href*="case-management"]           .CategoryList__kbSubcategoryImg::after { content: 'folder_open'; }
.CategoryList__articleCard[href*="digital-monitoring"]        .CategoryList__kbSubcategoryImg::after { content: 'phone_iphone'; }
.CategoryList__articleCard[href*="orders-logistics"]          .CategoryList__kbSubcategoryImg::after { content: 'local_shipping'; }
.CategoryList__articleCard[href*="commercial-relationship"]   .CategoryList__kbSubcategoryImg::after { content: 'handshake'; }
.CategoryList__articleCard[href*="billing-finance"]           .CategoryList__kbSubcategoryImg::after { content: 'receipt_long'; }

/* ============================================================================
   8 · ARTICLE CARDS  (article list inside a section)
   Grid container is kbListMin, handled in section 7 — including the
   min-height neutralisation. The stock per-card icon chip never varies, so it
   carries no information while costing 60px of padding and height on every
   row. Removed. A card is a title plus a two-line extract, ~95px.
   ============================================================================ */

.ArticlesCard__articleLink {
  display: block !important;
  height: 100% !important;
  text-decoration: none !important;
}

.ArticlesCard__articleCard {
  background: #ffffff !important;
  border: 1px solid var(--os-line) !important;
  border-radius: var(--os-radius) !important;
  padding: 14px 18px !important;
  height: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  position: relative !important;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}

/* Per-article icon removed — see the section note. To restore it, delete this
   rule and put padding-left:60px back on the card. */
.ArticlesCard__articleCard::before {
  content: none !important;
  display: none !important;
}

.ArticlesCard__articleLink:hover .ArticlesCard__articleCard {
  border-color: var(--os-sage-lo) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important;
}

.ArticlesCard__articleCardTitle {
  font-family: var(--os-display) !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  color: var(--os-ink) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.ArticlesCard__articleLink:hover .ArticlesCard__articleCardTitle {
  color: var(--os-sage-lo) !important;
}

.ArticlesCard__articleCardExtract {
  font-size: 12.5px !important;
  color: var(--os-mute) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ============================================================================
   9 · PAGINATION  (article lists over 10 items)
   Stock Zoho renders two 60px full-width slabs at 21px type and fills the
   DISABLED side with grey, so the dead control looks more pressable than the
   live one. Rebuilt as a quiet centred pair of pills. Zoho swaps the inner
   element between A (live) and SPAN (dead), so both are targeted.
   ============================================================================ */

/* Zoho draws a 1px rule above the pagination and renders it even on list
   pages that have no pagination, leaving an orphan line under the last row.
   Removed — the margin below does the separating. */
.Feed__feedFooter::after {
  display: none !important;
  content: none !important;
}

.Pagination__pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 26px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  list-style: none !important;
}

.Pagination__paginationItem {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
}

/* shared shape for both the live link and the dead span */
.Pagination__paginationItem > span,
.Pagination__paginationLink {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  font-family: var(--os-sans) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  text-align: center !important;
}

/* live */
.Pagination__paginationLink {
  color: var(--os-ink) !important;
  background: #ffffff !important;
  border: 1px solid var(--os-line) !important;
  text-decoration: none !important;
  transition: border-color .15s ease, color .15s ease !important;
}

.Pagination__paginationLink:hover {
  border-color: var(--os-sage-lo) !important;
  color: var(--os-sage-lo) !important;
}

/* dead — no fill, no border, recedes */
.Pagination__disabled > span {
  color: var(--os-mute) !important;
  opacity: .4 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  cursor: default !important;
}

/* ============================================================================
   10 · ARTICLE BODY
   Container-level typography. The blocks INSIDE an imported article are
   styled in section 18.
   ============================================================================ */

.KBArticleContainer__articleContent,
.KBArticle__content {
  font-family: var(--os-sans) !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  color: #1A1A1A !important;
}

.KBArticleContainer__articleContent a,
.KBArticle__content a {
  color: var(--os-sage-lo) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ---- article footer: remove social sharing ----
   Providers are not sharing clinical reference material to Facebook, and the
   icons drag brand blue onto a monochrome page. Targeted by destination
   first, which survives Zoho renaming its classes. */

a[href*="facebook.com"],
a[href*="twitter.com"],
a[href*="x.com/intent"],
a[href*="linkedin.com"],
a[href*="pinterest.com"],
a[href*="reddit.com"],
a[href*="wa.me"],
a[href*="api.whatsapp.com"] { display: none !important; }

[class*="SocialShare"],
[class*="socialShare"],
[class*="SocialIcon"],
[class*="socialIcon"],
[class*="ShareOption"],
[class*="shareOption"],
[class*="SocialMedia"],
[class*="socialMedia"] { display: none !important; }

/* "Was this article helpful?" sits on the same row as the icons. With them
   gone it should sit left rather than float against empty space. */
.ArticleFeedback__feedbackCont,
[class*="feedbackCont"],
[class*="FeedbackCont"] { justify-content: flex-start !important; }

/* ============================================================================
   11 · RIGHT SIDEBAR SUPPRESSION
   The stock right rail is noise for providers. Section 6 reclaims the space.
   ============================================================================ */

/* Follow / subscribe ONLY. Matching .KBArticleRightContainer__title instead
   takes the whole right-hand widget down, including the in-article contents
   list — the scroll-spy behind the #heading anchors. Keep that. */
.widgetItem:has(.KBArticleRightContainer__userFollowOption),
.widgetItem.treeView:has(.CategoriesContainer__solutionListHeading) {
  display: none !important;
}

/* Category pages still lose their right column — it only held the KB section
   tree, which duplicates the tiles already on the page. Article pages keep
   theirs. */
.Layout__twoColumn .Layout__layout2:has(.CategoriesContainer__solutionListHeading) {
  display: none !important;
}

/* Article contents list — quiet, sticky, matches the card language.
   The sticky is released and the rail hidden on small screens in section 17:
   once the columns stack it sits below the article it indexes. */
.KBArticleRightContainer__title {
  font-family: var(--os-sans) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  color: var(--os-mute) !important;
  margin: 0 0 12px !important;
}

.Layout__twoColumn .Layout__layout2 .widgetItem {
  position: sticky;
  top: 24px;
}

/* Fallback for browsers without :has() — at least drop the section heading. */
.CategoriesContainer__solutionListHeading { display: none !important; }

/* ============================================================================
   12 · MY SUPPORT REQUESTS  (ticket list)
   ============================================================================ */

.TicketListContainer__menuTitle {
  font-family: var(--os-display) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--os-ink) !important;
  letter-spacing: -0.015em !important;
}

.Menu__menuLink,
.Menu__menuTextBlock {
  font-family: var(--os-sans) !important;
  font-size: 14px !important;
  color: var(--os-ink) !important;
}

.Menu__menuItem.Menu__active .Menu__menuLink,
.Menu__menuLink:hover {
  color: var(--os-sage-lo) !important;
}

.Menu__menuCount { color: var(--os-mute) !important; }

.NoContent__errorTitle {
  font-family: var(--os-display) !important;
  font-weight: 600 !important;
  color: var(--os-mute) !important;
}

/* ============================================================================
   13 · SIGN-IN PAGE
   ⚠ THE BLUE "NEXT" BUTTON CANNOT BE STYLED FROM HERE — Zoho renders the form
   in a cross-origin Zoho Accounts iframe. Options: leave it (JWT SSO makes
   the screen unreachable), rebrand at source in Zoho Accounts, or point
   "My Support Requests" at the Wix portal. Below brands everything AROUND it.
   ============================================================================ */

.UserSigninContainer__wrapper {
  font-family: var(--os-sans) !important;
  background: var(--os-canvas) !important;
}

.UserSigninContainer__loginBox {
  background: #ffffff !important;
  border: 1px solid var(--os-line) !important;
  border-radius: var(--os-radius) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06) !important;
}

.UserSigninContainer__title,
.SignInPopupContainer__title {
  font-family: var(--os-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--os-ink) !important;
}

.UserSigninContainer__subTitle,
.UserSigninContainer__signUpDescription,
.SignInPopupContainer__title + p {
  font-family: var(--os-sans) !important;
  color: var(--os-mute) !important;
}

.UserSigninContainer__loginHalf { color: var(--os-mute) !important; }

/* ============================================================================
   14 · ZOHO STOCK BLUE OVERRIDES
   Zoho's default accent #0F7DF0 leaks into autosuggest, the captcha, date
   pickers, dropdowns and focus rings. Repainted sage wherever CSS reaches.
   ============================================================================ */

.Autosuggest__listmenu,
.DropdownComponent__listview {
  border-color: var(--os-sage-lo) !important;
}

.Autosuggest__option:hover,
.Autosuggest__optionFocus,
.DropdownComponent__option:hover {
  background-color: var(--os-sage-lo) !important;
  border-color: var(--os-sage-lo) !important;
  color: #ffffff !important;
}

.DropdownComponent__bccolor,
.MultiSelect__inputFocus:focus {
  border-color: var(--os-sage-lo) !important;
}

.HCNewCaptcha__captchaButtonActive {
  background-color: var(--os-sage-lo) !important;
  border-color: var(--os-sage-lo) !important;
  color: #ffffff !important;
}

.HCNewCaptcha__captchaPlayBtn { color: var(--os-sage-lo) !important; }

.HCNewCaptcha__preloader {
  border-color: rgba(71,115,78,0.2) !important;
  border-top-color: var(--os-sage-lo) !important;
}

.DateTime__today,
.DateTime__today:hover,
.DateTime__blueBut {
  background-color: var(--os-sage-lo) !important;
  border-color: var(--os-sage-lo) !important;
  color: #ffffff !important;
}

/* ============================================================================
   15 · FOOTER  (footer_block.html + the retained PoweredBy strip)
   ============================================================================ */

.oshc-footer {
  background: var(--os-ink);
  font-family: var(--os-sans);
}

.oshc-footer-inner {
  max-width: 73.125rem;
  margin: 0 auto;
  padding: 44px 20px 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}

.oshc-footer-brand { max-width: 280px; }

.oshc-footer-logo {
  max-height: 34px;
  width: auto;
  max-width: 200px;
  display: block;
  margin-bottom: 12px;
}

.oshc-footer-tag {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  line-height: 1.5;
}

.oshc-footer-head {
  color: var(--os-mute);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.oshc-footer-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.oshc-footer-col a {
  color: #C7C7CC !important;
  text-decoration: none;
  font-size: 14px;
}

.oshc-footer-col a:hover { color: #ffffff !important; }

.oshc-footer-strip {
  border-top: 1px solid rgba(255,255,255,0.1);
  max-width: 73.125rem;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  color: rgba(255,255,255,0.55);
  font-size: 12.5px;
}

.oshc-footer-strip a,
.Footer__footerLink { color: rgba(255,255,255,0.55) !important; }

/* ---- limitation-of-use strip (footer-legal-snippet.html, edit 2) ----
   Deliberately quiet: this is a standing condition of use, not a banner. It
   should be findable and unambiguous without shouting on every page view. */

.oshc-footer-legal {
  max-width: 73.125rem;
  margin: 0 auto;
  padding: 26px 20px 4px;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
}

.oshc-footer-legal-lead {
  color: var(--os-mute);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}

/* Full width of the footer container so it wraps to two or three lines rather
   than a narrow left-hung column. A 62ch measure is right for prose in a
   content column, wrong for a centred standing notice. */
.oshc-footer-legal-body {
  color: rgba(255,255,255,0.45);
  font-size: 12px;
  line-height: 1.65;
  margin: 0 auto;
}

.oshc-footer-legal-body a {
  color: rgba(255,255,255,0.75) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.oshc-footer-legal-body a:hover { color: #ffffff !important; }

/* ============================================================================
   16 · KB HOME NOTICE  (disclaimer-block.html)
   The stock markup was a full-scale <h2> over one sentence, which against
   73px tiles reads as a section announcing a footnote. Restyled as a notice.
   ============================================================================ */

.oshc-notice {
  margin: 40px 0 8px;
  padding: 18px 22px;
  max-width: 70ch;
  background: #ffffff;
  border: 1px solid var(--os-line);
  border-left: 3px solid var(--os-sage-lo);
  border-radius: 0 var(--os-radius) var(--os-radius) 0;
}

.oshc-notice-lead {
  font-family: var(--os-sans) !important;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--os-sage-lo);
  margin: 0 0 7px;
}

.oshc-notice-body {
  font-family: var(--os-sans) !important;
  font-size: 13px;
  line-height: 1.6;
  color: var(--os-mute);
  margin: 0;
}

/* Belt and braces if the old heading survives anywhere. Remove once the
   markup is swapped. */
.Layout__layout1 h2.oshc-notice-legacy {
  font-family: var(--os-sans) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  color: var(--os-sage-lo) !important;
  margin: 40px 0 7px !important;
}

/* ============================================================================
   17 · RESPONSIVE
   Nothing here changes the desktop design — every rule is inside a media
   query at 1024px or below. Breakpoints: 1024 · 768 · 560 · 400.

   FIXES: iOS zooming on search focus · hover lifts latching on touch · the
   contents rail stacking below the article · nav tabs overflowing · the
   footer holding three columns on a phone · sub-44px tap targets · cards
   running to the screen edge · the top bar at phone widths.
   ============================================================================ */

/* ---- TOUCH DEVICES (any width) ----
   Hover is emulated on touch and latches after a tap, leaving a card lifted
   until something else is tapped. The colour change is kept as feedback;
   the movement is not. */
@media (hover: none) {
  .CategoryList__articleCard:hover,
  .ArticlesCard__articleLink:hover .ArticlesCard__articleCard {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ---- 1024px AND BELOW ---- */
@media (max-width: 1024px) {
  .KBArticleListLeftContainer__kbListMin,
  .KBArticleListLeftContainer__kbListChange {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  }

  /* Section 11 pins the contents widget; once the columns stack, sticky holds
     it against the viewport in the wrong place. */
  .Layout__twoColumn .Layout__layout2 .widgetItem {
    position: static !important;
    top: auto !important;
  }
}

/* ---- 768px AND BELOW ---- */
@media (max-width: 768px) {
  /* --- stop the page scrolling sideways -------------------------------- */
  /* Targeted, not overflow-x:hidden on body — that breaks the sticky above. */
  .Layout__twoColumn,
  .Layout__layout1,
  .Layout__layout2,
  .Feed__feedContent { max-width: 100% !important; min-width: 0 !important; }

  /* --- gutters ---
     Zoho gives .Layout__layout1 only 12.8px and the centring margins collapse
     to zero on a phone, so cards sit ~13px from the edge and read as
     edge-to-edge. 20px matches the hero and footer. border-box is forced or
     the padding pushes a 100%-wide element wider than the screen. */
  .Layout__layout1,
  .Layout__layout2 {
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* The hero manages its own gutter and is full-bleed, so it must not inherit
     the one above or it ends up double-padded. */
  .Layout__layout1 .oshc-hero { padding-left: 0 !important; padding-right: 0 !important; }

  .KBArticleContainer__articleContent,
  .KBArticle__content {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Long consignment numbers and portal addresses in article bodies. */
  .KBArticleContainer__articleContent table,
  .KBArticle__content table { display: block !important; overflow-x: auto !important; }

  /* --- header ----------------------------------------------------------- */
  .Header__brandLogoImg { max-width: 170px !important; }

  /* THE iOS ZOOM FIX. Section 4 sets this to 15px. Anything under 16px makes
     Safari zoom the page the moment the field is focused, and it does not
     zoom back out. Do not lower this value. */
  .Input__searchPanelInput,
  .Input__searchPanelInput::placeholder { font-size: 16px !important; }

  .searchPanelSearchBox { width: 100% !important; }

  /* min-width:max-content in section 3 cannot shrink and pushes the row wider
     than the screen. */
  .LocalePopup__localeTarget {
    min-width: 0 !important;
    padding: 6px 10px !important;
    font-size: 12.5px !important;
  }

  /* Four tabs will not fit below ~380px. Scroll rather than wrap, so the sage
     active underline stays on one line. */
  .Header__tabs,
  .Header__tabsList {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .Header__tabsList::-webkit-scrollbar { display: none !important; }
  .Header__tabsTab { flex: 0 0 auto !important; white-space: nowrap !important; }

  /* --- contents rail ----------------------------------------------------- */
  /* Zoho stacks layout2 after layout1, so the contents list lands BELOW the
     article it indexes and cannot be used for navigation. Hidden on phones.
     To keep it, use .Layout__twoColumn { flex-direction: column-reverse } */
  .Layout__twoColumn .Layout__layout2:has(.KBArticleRightContainer__title) {
    display: none !important;
  }

  /* --- cards and content ------------------------------------------------- */
  .KBArticleListLeftContainer__kbListMin,
  .KBArticleListLeftContainer__kbListChange {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .KBArticleListLeftContainer__kblistHeading {
    font-size: 19px !important;
    margin-bottom: 16px !important;
  }

  .commonStyle__detailHeader { font-size: 23px !important; line-height: 1.2 !important; }

  .oshc-notice { padding: 15px 18px !important; margin-top: 28px !important; }

  /* --- pagination: 44px tap target --------------------------------------- */
  .Pagination__paginationItem > span,
  .Pagination__paginationLink {
    padding: 13px 20px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  /* --- footer ------------------------------------------------------------ */
  .oshc-footer-inner {
    flex-direction: column !important;
    gap: 28px !important;
  }

  .oshc-footer-brand { max-width: none !important; }

  /* space-between spreads two wrapped columns to the outer edges. */
  .oshc-footer-strip {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 16px !important;
    text-align: center !important;
  }

  /* 14px text is a ~20px target; padding takes it to 44px without changing the
     type size. */
  .oshc-footer-col { gap: 2px !important; }
  .oshc-footer-col a {
    padding: 11px 0 !important;
    display: block !important;
  }

  .oshc-footer-legal { padding: 22px 20px 4px !important; }
}

/* ---- 560px AND BELOW ---- */
@media (max-width: 560px) {
  .Header__brandLogoImg { max-width: 140px !important; }

  .CategoryList__articleCard,
  .ArticlesCard__articleCard { padding: 13px 15px !important; }

  /* The chip plus its margin costs 46px of a 320px row. */
  .CategoryList__kbSubcategoryImg {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    margin-right: 11px !important;
  }
  .CategoryList__kbSubcategoryImg::after { font-size: 17px !important; }

  .CategoryList__navItemTitle { font-size: 14.5px !important; }

  .KBArticleContainer__articleContent,
  .KBArticle__content { font-size: 16px !important; line-height: 1.62 !important; }

  .commonStyle__detailHeader { font-size: 21px !important; }

  .UserSigninContainer__loginBox { margin: 0 14px !important; }
}

/* ---- 400px AND BELOW ---- */
@media (max-width: 400px) {
  .Header__brandLogoImg { max-width: 120px !important; }
  .Header__tabsList     { gap: 16px !important; }
  .oshc-notice          { padding: 14px 15px !important; }
  .commonStyle__detailHeader { font-size: 20px !important; }
  .Pagination__pagination { gap: 6px !important; }
  .Pagination__paginationItem > span,
  .Pagination__paginationLink { padding: 13px 15px !important; font-size: 13px !important; }
}

/* ---- TOP BAR ----
   No hamburger. There are two nav links, so below 768px they drop to their
   own full-width row under the logo rather than hiding behind a menu that
   would need JavaScript the Header block cannot keep. */

@media (max-width: 768px) {
  .oshc-topbar-inner {
    gap: 16px;
    min-height: 56px;
    padding-left: 20px;
    padding-right: 20px;
    flex-wrap: wrap;
  }

  .oshc-topbar-logo { height: 26px; max-width: 170px; }

  .oshc-topbar-nav {
    order: 3;
    flex: 1 0 100%;
    gap: 22px;
    border-top: 1px solid rgba(255,255,255,0.12);
  }

  /* 13.5px on one line plus 2 x 15px padding = a 44px tap target. */
  .oshc-topbar-link { padding: 15px 0; font-size: 13.5px; }

  .oshc-topbar-right { gap: 10px; }
  .oshc-topbar-locale .LocalePopup__localeTarget { padding: 6px 10px !important; }
}

@media (max-width: 400px) {
  .oshc-topbar-logo { height: 23px; max-width: 140px; }
  .oshc-topbar-nav  { gap: 16px; }
  .oshc-topbar-link { font-size: 13px; }
}

/* ---- ACCESSIBILITY ---- */
@media (prefers-reduced-motion: reduce) {
  .CategoryList__articleCard,
  .ArticlesCard__articleCard,
  .Header__tabsLink,
  .LocalePopup__localeTarget,
  .Pagination__paginationLink {
    transition: none !important;
  }
  .CategoryList__articleCard:hover,
  .ArticlesCard__articleLink:hover .ArticlesCard__articleCard {
    transform: none !important;
  }
}
/* ===== end of section 17 ================================================== */

/* ============================================================================
   18 · ARTICLE BODY CONTENT  (imported KB articles)
   Card language from sections 7 and 8: white panels, --os-line borders, 12px
   radius, --os-sage-hi fills, the rounded sage chip reused as the step
   numeral. Declares no :root — every value reads section 1's tokens. Sizes
   are in em, tied to the 15.5px/1.65 section 10 sets on the container.
   ============================================================================ */

.oshc-article { overflow-wrap: break-word; }
.oshc-article > *:first-child { margin-top: 0; }
.oshc-article > *:last-child  { margin-bottom: 0; }

.oshc-p { margin: 0 0 1.3em; }

/* ---- quick answer -------------------------------------------------------
   Same construction as .oshc-notice in section 16: white panel, sage left
   edge, small uppercase sage label. The label is generated, so the CSV
   carries no extra markup. */
.oshc-lead {
  position: relative;
  margin: 0 0 2em;
  padding: 16px 22px 17px;
  background: #ffffff;
  border: 1px solid var(--os-line);
  border-left: 3px solid var(--os-sage-lo);
  border-radius: 0 var(--os-radius) var(--os-radius) 0;
  font-size: 1.06em;
  line-height: 1.6;
  color: var(--os-ink);
}

.oshc-lead::before {
  content: 'Quick answer';
  display: block;
  font-size: 0.68em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--os-sage-lo);
  margin-bottom: 7px;
}

/* ---- headings ----------------------------------------------------------- */
.oshc-h {
  font-family: var(--os-display) !important;
  font-size: 1.3em;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: var(--os-ink);
  margin: 2.4em 0 0.85em;
  padding: 0;
  border: 0;
  break-after: avoid;
}

/* ---- numbered steps -----------------------------------------------------
   White card. The numeral sits in the same rounded sage chip used for the
   category tile icons, at the smaller --os-radius-sm. */
.oshc-steps {
  margin: 0 0 1.5em;
  padding: 20px 24px;
  background: #ffffff;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  list-style: none;
  counter-reset: oshc-step;
}

.oshc-steps > li {
  position: relative;
  counter-increment: oshc-step;
  padding-left: 42px;
  margin-bottom: 14px;
  line-height: 1.55;
}

.oshc-steps > li:last-child { margin-bottom: 0; }

.oshc-steps > li::before {
  content: counter(oshc-step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 26px;
  height: 26px;
  border-radius: var(--os-radius-sm);
  background: var(--os-sage-hi);
  color: var(--os-sage-lo);
  font-family: var(--os-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- bulleted lists ----------------------------------------------------- */
.oshc-list {
  margin: 0 0 1.3em;
  padding: 0;
  list-style: none;
}

.oshc-list > li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  line-height: 1.55;
}

.oshc-list > li:last-child { margin-bottom: 0; }

.oshc-list > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--os-sage-lo);
}

/* Lists sitting inside a step card lose the card's own padding offset. */
.oshc-steps .oshc-list { margin-top: 8px; }

/* ---- callouts -----------------------------------------------------------
   Note and Tip sit on canvas so they recede. Important takes the sage fill
   and the sage edge, so the two are separable at a glance. */
.oshc-note {
  margin: 1.7em 0;
  padding: 14px 20px;
  background: var(--os-canvas);
  border: 1px solid var(--os-line-soft);
  border-radius: var(--os-radius);
}

.oshc-note p { margin: 0; line-height: 1.55; }

.oshc-note b {
  font-family: var(--os-sans) !important;
  font-size: 0.78em;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--os-mute);
}

.oshc-note--key {
  background: var(--os-sage-hi);
  border-color: var(--os-line);
  border-left: 3px solid var(--os-sage-lo);
  border-radius: 0 var(--os-radius) var(--os-radius) 0;
}

.oshc-note--key b { color: var(--os-sage-lo); }

@media (max-width: 768px) {
  .oshc-lead     { padding: 14px 18px 15px; }
  .oshc-steps    { padding: 18px 18px; }
  .oshc-steps > li { padding-left: 38px; }
  .oshc-h        { margin-top: 2.1em; }
}

/* ============================================================================
   19 · KB HOME SEARCH BLOCK  (oshc-hero)
   Pairs with the Search Banner widget. No widget on a page, no markup here.

   THE INPUT IS THE PILL — white fill, border, radius, shadow, and it reserves
   room on its right that the button is pulled back over with a negative
   margin. .oshc-hero-search is the centring row, and as of 4.3 it is a real
   element in the widget markup: it was referenced here for three versions
   while nothing in the HTML carried the class, which is why the button kept
   escaping. NOWRAP FLEX ROW deliberately — below 768px --hero-maxw is 100%,
   so as inline siblings the input fills the line and the button drops below.

   No search glyph: 'search' is not in the pinned Material Symbols subset, and
   an absent glyph renders as literal text.
   ============================================================================ */

.oshc-hero {
  /* ---- component scale ---- */
  --hero-h:        56px;   /* pill height */
  --hero-inset:    24px;   /* left text inset */
  --hero-btn-w:   104px;   /* button width — fixed, so the maths below holds */
  --hero-btn-in:    5px;   /* button inset from the pill's right edge */
  --hero-btn-pull: 4px;    /* absorbs inline whitespace between the two tags */
  --hero-fs:     16.5px;   /* NEVER below 16px: Safari zooms on focus */
  --hero-btn-fs:   15px;
  --hero-maxw:    760px;   /* deliberate length; not the full column */

  font-family: var(--os-sans);
  text-align: center;
  position: relative;      /* containing block for .oshc-suggest */

  /* Full bleed: the hero spans the viewport whatever container Zoho drops the
     widget into, and re-centres its content to the standard column. To keep
     it inside its container, delete the two margins and the calc padding. */
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(2.5rem, 7vw, 4.25rem) max(20px, calc(50vw - 34rem))
           clamp(1.75rem, 4vw, 2.75rem);
}

.oshc-hero-title {
  font-family: var(--os-display) !important;
  font-size: clamp(28px, 3.4vw + 15px, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--os-ink);
  margin: 0 0 10px;
}

.oshc-hero-sub {
  max-width: 40ch;
  margin: 0 auto clamp(1.6rem, 4vw, 2.25rem);
  font-size: clamp(15px, 0.4vw + 14px, 17px);
  line-height: 1.55;
  color: var(--os-mute);
}

/* The centring row. No appearance of its own — the pill is the input.
   NOWRAP is the whole point: see the section note. */
.oshc-hero-search {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 auto;
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}

/* ---- the pill ---- */
.oshc-hero-input {
  display: inline-block;
  vertical-align: middle;
  width: min(var(--hero-maxw), 100%);
  /* As a flex child: never wider than --hero-maxw, but allowed to shrink so a
     long placeholder cannot overflow a narrow phone. min-width:0 is required
     — flex items default to min-width:auto and refuse to shrink. */
  flex: 0 1 auto;
  min-width: 0;
  height: var(--hero-h);
  box-sizing: border-box;
  padding-left: var(--hero-inset);
  /* Reserves the button footprint so typed text never runs under it. */
  padding-right: calc(var(--hero-btn-w) + var(--hero-btn-in) + 14px);
  font-family: var(--os-sans);
  font-size: var(--hero-fs);
  color: var(--os-ink);
  background: #ffffff;
  border: 1px solid var(--os-line);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.oshc-hero-input::placeholder { color: var(--os-mute); }
.oshc-hero-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.oshc-hero-input:focus {
  border-color: var(--os-sage-lo);
  box-shadow: 0 8px 26px rgba(71, 115, 78, 0.14);
}

/* Pulled back over the space the input reserved. --hero-btn-pull absorbs the
   inline whitespace between the two tags. Fill and hover come from
   .Button__primary in section 5; this section is later, so 999px wins. */
.oshc-hero-btn {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--hero-btn-w);
  height: calc(var(--hero-h) - (var(--hero-btn-in) * 2));
  margin-left: calc(-1 * (var(--hero-btn-w) + var(--hero-btn-in) + var(--hero-btn-pull)));
  padding: 0 !important;
  font-size: var(--hero-btn-fs) !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  cursor: pointer;
  white-space: nowrap;
}

/* The .oshc-suggest typeahead panel that used to be styled here is REMOVED in
   4.3 — nothing has ever rendered it, and this file is up against Zoho's size
   limit. Intact in v3.0 if it is ever built.
   ------------------------------------------------------------------------ */

/* ---- compact variant ----
   For interior pages: drops the heading and sub-heading and slims the pill to
   48px, so it reads as a search bar above the content. Add is-compact. */
.oshc-hero.is-compact {
  --hero-h:       48px;
  --hero-inset:   20px;
  --hero-btn-w:   90px;
  --hero-btn-in:   4px;
  --hero-fs:      16px;
  --hero-btn-fs:  14px;
  padding: 20px 0 4px;
}

.oshc-hero.is-compact .oshc-hero-title,
.oshc-hero.is-compact .oshc-hero-sub { display: none; }

.oshc-hero.is-compact .oshc-hero-input { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); }

/* Browse links removed — the tiles below the hero already do that job. */

/* Belt and braces. If the <span> is ever lost from the widget markup, a
   nowrap line box stops the two inline-blocks breaking apart anyway. The
   title and sub-heading opt back out or they run off the side of a phone. */
.oshc-hero      { white-space: nowrap; }
.oshc-hero-title,
.oshc-hero-sub  { white-space: normal; }

.oshc-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- responsive ----
   Nothing stacks; the button sits on the pill at every width. The input never
   drops below 16px (Safari zooms on focus below that and will not zoom back),
   and the button keeps a 44px tap target — its height is --hero-h minus twice
   --hero-btn-in, so the inset tightens as the pill comes down. */

@media (max-width: 768px) {
  .oshc-hero {
    --hero-h:      54px;
    --hero-inset:  20px;
    --hero-btn-w:  92px;
    --hero-btn-in:  5px;   /* 54 - 10 = 44px button */
    --hero-fs:     16px;
    --hero-maxw:  100%;
  }
}

@media (max-width: 560px) {
  .oshc-hero {
    --hero-h:      52px;
    --hero-inset:  18px;
    --hero-btn-w:  84px;
    --hero-btn-in:  4px;   /* 52 - 8 = 44px button */
    --hero-fs:     16px;
    --hero-btn-fs: 14.5px;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* .oshc-hero.is-compact is (0,2,0) and outranks the (0,1,0) block above, so
     its 48px pill would survive into mobile and leave a 40px button.
     Restated at matching specificity to win the tap target back. */
  .oshc-hero.is-compact {
    --hero-h:      50px;
    --hero-btn-in:  3px;   /* 50 - 6 = 44px */
    --hero-btn-w:  84px;
  }
}

@media (max-width: 400px) {
  .oshc-hero {
    --hero-inset:  16px;
    --hero-btn-w:  76px;
    --hero-btn-fs: 14px;
  }
  /* At this width the sub-heading costs more than it earns above the fold. */
  .oshc-hero-sub { margin-bottom: 1.35rem; }
}

/* Touch at any width: no shadow animation on tap, and the compact pill needs
   the same 44px floor it gets at 560px. */
@media (hover: none) {
  .oshc-hero-input { transition: border-color .15s ease; }
  .oshc-hero.is-compact {
    --hero-h:      50px;
    --hero-btn-in:  3px;
    --hero-btn-w:  84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oshc-hero-input { transition: none; }
}

/* ============================================================================
   20 · SEARCH RESULTS PAGE
   Results live at /portal/en/kb/search/<query> — the query is a PATH SEGMENT,
   not a query string. The Search Banner widget navigates there.

   Zoho highlights the matched term in rgba(242,0,67,0.15), a pink that reads
   as an error state on a page full of sage. Repainted to the tile-icon tint.
   Zoho also leaks its own highlight tags into the excerpt as literal text —
   CSS cannot fix that; the widget script strips it.
   ============================================================================ */

.SearchResultmark {
  background: var(--os-sage-hi) !important;
  color: inherit !important;
  border-radius: 3px !important;
  padding: 0 2px !important;
}

/* ===== end of file ======================================================== */