@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Twinsity Helpcenter. Design tokens taken from twinsity.com. */

:root{
  --ts-state:#0398F4; --ts-brand:#015C94; --ts-navy:#00395C;
  --ts-ink:#181B20; --ts-head:#1F2329; --ts-body:#434850; --ts-muted:#565B64;
  --ts-offwhite:#F6F6F8; --ts-hairline:#E2E2E8;
}

body,
body *:not(i):not([class*="icon"]):not([class*="Icon"]),
input, textarea, button, select{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
}
body{ background:#fff !important; color:var(--ts-body); -webkit-font-smoothing:antialiased; }

/* hero: white with a dot grid, as on twinsity.com */
.Header__headerBg{
  background-image:radial-gradient(rgba(24,27,32,.10) 1px, transparent 1px) !important;
  background-size:22px 22px !important;
  background-color:#fff !important;
  opacity:1 !important; filter:none !important;
}
#headerContainer{ background:#fff !important; }

.Header__welcomeTitle{
  color:var(--ts-ink) !important; font-size:52px !important; font-weight:700 !important;
  letter-spacing:-.035em !important; line-height:1.08 !important;
}
.Header__titleDescription > *:not(.Header__welcomeTitle),
.Header__titleDescription > p{
  color:var(--ts-muted) !important; font-size:17px !important; font-weight:400 !important;
}
.Header__titleDescription .Header__welcomeTitle,
h2.Header__welcomeTitle{
  color:var(--ts-ink) !important; font-size:52px !important; font-weight:700 !important;
  letter-spacing:-.035em !important; line-height:1.08 !important; margin-bottom:14px !important;
}

/* brand lockup text, was white on the old photo hero */
.Header__logotxt, .Header__logotxt *{
  color:var(--ts-ink) !important; font-weight:600 !important; letter-spacing:-.015em !important;
}

/* top navigation on a light hero */
.Header__nav .Header__link, .Header__nav a{
  color:var(--ts-ink) !important; font-size:15px !important; font-weight:500 !important;
}
.Header__nav a:hover{ color:var(--ts-state) !important; }
#new_ticket_button{
  background:var(--ts-state) !important; color:#fff !important; border:none !important;
  border-radius:6px !important; font-weight:600 !important; font-size:14px !important; padding:9px 18px !important;
}
#new_ticket_button:hover{ background:var(--ts-brand) !important; }

/* search */
.SearchBox__searchTextbox, #searchContainer1{
  border-radius:10px !important; border:1px solid var(--ts-hairline) !important;
  box-shadow:0 8px 30px rgba(24,27,32,.08) !important; background:#fff !important;
}
#autoSearchContainer{ border-radius:10px !important; font-size:16px !important; }

/* category cards */
.WidgetsContainer__lftWd{
  border:1px solid var(--ts-hairline) !important; border-radius:12px !important;
  box-shadow:none !important; background:#fff !important;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
.WidgetsContainer__lftWd:hover{
  border-color:var(--ts-state) !important;
  box-shadow:0 10px 30px rgba(24,27,32,.09) !important; transform:translateY(-2px) !important;
}
[data-id$="_title"], [data-id$="_title"] a{
  color:var(--ts-ink) !important; font-weight:600 !important; letter-spacing:-.01em !important;
}
[data-id$="_title"] a:hover{ color:var(--ts-state) !important; }
[data-id$="_description"]{ color:var(--ts-muted) !important; line-height:1.6 !important; }

/* article page */
[data-id="articleTitle"]{
  color:var(--ts-ink) !important; font-weight:700 !important;
  font-size:36px !important; line-height:1.18 !important; letter-spacing:-.03em !important;
}
[data-id="article_description"], [data-id="article_description"] p{
  color:var(--ts-body) !important; font-size:16.5px !important; line-height:1.75 !important;
}
[data-id="article_description"] p{ margin:0 0 15px !important; }
[data-id="article_description"] h2{
  color:var(--ts-head) !important; font-size:22px !important; font-weight:600 !important;
  letter-spacing:-.015em !important; margin:38px 0 12px !important;
}
[data-id="article_description"] h3{
  color:var(--ts-head) !important; font-size:17px !important; font-weight:600 !important; margin:26px 0 10px !important;
}
[data-id="article_description"] strong{ color:var(--ts-head) !important; font-weight:600 !important; }
[data-id="article_description"] em{ color:var(--ts-muted) !important; }
[data-id="article_description"] ul,[data-id="article_description"] ol{ margin:0 0 16px !important; padding-left:24px !important; }
[data-id="article_description"] li{ margin-bottom:7px !important; }
[data-id="article_description"] a{ color:var(--ts-state) !important; font-weight:500 !important; }

/* callouts and tables */
.ts-callout{ border-radius:10px !important; padding:16px 20px !important; margin:22px 0 !important; }
.ts-callout p:last-child{ margin-bottom:0 !important; }
.ts-tip{ background:#EBF7FE !important; border:1px solid #BFE3FB !important; border-left:4px solid var(--ts-state) !important; }
.ts-warn{ background:#FEEDEF !important; border:1px solid #FCCACF !important; border-left:4px solid #F64E60 !important; }
.ts-shot{ background:#FBFBFC !important; border:1px dashed var(--ts-hairline) !important; border-radius:10px !important; }

[data-id="article_description"] table{
  border-collapse:separate !important; border-spacing:0 !important; width:100% !important;
  margin:12px 0 24px !important; font-size:15.5px !important;
  border:1px solid var(--ts-hairline) !important; border-radius:10px !important; overflow:hidden !important;
}
[data-id="article_description"] table td{
  border:none !important; border-bottom:1px solid var(--ts-hairline) !important;
  padding:11px 15px !important; vertical-align:top !important; color:var(--ts-body) !important;
}
[data-id="article_description"] table tr:last-child td{ border-bottom:none !important; }
[data-id="article_description"] table tr:first-child td{
  background:var(--ts-offwhite) !important; color:var(--ts-head) !important;
}
.ts-callout table, .ts-callout table td{ border:none !important; }

[data-id="scroll_top"]{ background:var(--ts-state) !important; border-radius:8px !important; }

/* the welcome block is hidden by default once the photo hero goes; bring it back
   and centre it, matching the twinsity.com hero */
.Header__titleDescription{
  display:block !important;
  text-align:center !important;
  padding:66px 20px 0 !important;
}
.Header__welcomeTitle{ display:block !important; margin:0 auto 12px !important; }
#titleSearch, .Header__titleSearchWrapper{ padding-bottom:60px !important; }
.Header__titleSearchBox{ max-width:720px !important; margin:0 auto !important; }

/* centre the search in the hero */
.Header__titleSearchBox{ justify-content:center !important; }
.SearchCon__searchCon{ width:100% !important; max-width:640px !important; }
.SearchBox__searchpart, .SearchBox__searchTextbox{ border-radius:10px !important; }

/* the widget list should sit on the page, not inside a panel */
.WidgetsContainer__widgetCont, .AppContainer__wrapper{
  background:transparent !important; border:none !important; box-shadow:none !important;
}
.WidgetsContainer__lftWd{ margin:0 20px 20px 0 !important; }

/* One highlighted keyword in the hero headline, as on twinsity.com.
   Zoho renders the title as a bare text node with no markup to hook, so the
   line is rebuilt from two pseudo elements. CSS can only split the line in
   two, which is why the question mark travels with "help".
   If the welcome title text is ever changed in Setup > Channels >
   Help Center > Customization, change it here too. */
.Header__titleDescription h2.Header__welcomeTitle,
h2.Header__welcomeTitle{
  font-size:0 !important; letter-spacing:0 !important;
}
h2.Header__welcomeTitle::before,
h2.Header__welcomeTitle::after{
  font-size:52px !important; font-weight:700 !important;
  letter-spacing:-.035em !important; line-height:1.08 !important;
}
h2.Header__welcomeTitle::before{ content:"How can we "; color:var(--ts-ink) !important; }
h2.Header__welcomeTitle::after{ content:"help?"; color:var(--ts-state) !important; }

/* The search box sits inside #searchBtnContainer, a flex row set to
   space-between. On the home page it happens to land centred; on the
   knowledge base, section and search pages it does not, and drifts left of
   the headline. Centre the row itself so every page agrees. */
#searchBtnContainer.Header__searchalt,
.Header__searchalt{ justify-content:center !important; }


/* ---------------------------------------------------------------
   Phase 1 fixes, 12 August 2026
   Four defects found by reading the live DOM.
   --------------------------------------------------------------- */

/* 1. Search box corner artifacts. #searchContainer has border-radius 0 and
      carries Zoho's default 0 10px 10px shadow, whose square corners poke
      past the rounded inner box. */
#searchContainer.Header__searchLink{ box-shadow:none !important; }

/* 2. The card treatment was on the wrong element. .WidgetsContainer__lftWd is
      the whole 1120 x 943 grid container, so the entire panel lifted and
      highlighted while the seven cards did nothing. It belongs on the card. */
.WidgetsContainer__lftWd{
  border:none !important; border-radius:0 !important;
  box-shadow:none !important; background:transparent !important;
}
.WidgetsContainer__lftWd:hover{
  border-color:transparent !important; box-shadow:none !important; transform:none !important;
}
.TitleContainer__container{
  border:1px solid var(--ts-hairline) !important;
  border-radius:12px !important; background:#fff !important;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
.TitleContainer__container:hover{
  border-color:var(--ts-state) !important;
  box-shadow:0 10px 30px rgba(24,27,32,.09) !important;
  transform:translateY(-2px) !important;
}

/* 3. The "Help Center" pill is Zoho's module switcher, for flipping between
      Help Center and Community. Community is off, so it is the only tab and
      clicking it does nothing. Hide the button only, never the row: the grid
      and list toggles are absolutely positioned inside that row and collapsing
      it drops them on top of the first card. */
.ModuleCategoryContainer__tabs > span[role="button"]{ display:none !important; }
.ModuleCategoryContainer__hometabs{ min-height:40px !important; }

/* 4. The breadcrumb was invisible. .BreadCrumbs__breadCrumbText computed to
      pure white and the links to #ccc, both left over from the old photo hero,
      giving a contrast ratio of 1 to 1. Same trap as .Header__logotxt.
      Note there is also a native Breadcrumb colour in the Appearance tab, set
      to #cccccc. This rule overrides it. */
.BreadCrumbs__breadcrumbsView, .BreadCrumbs__breadcrumbsView *{ color:var(--ts-muted) !important; }
.BreadCrumbs__breadCrumbsLink{ font-weight:500 !important; }
.BreadCrumbs__breadCrumbsLink:hover{ color:var(--ts-brand) !important; }


/* ---------------------------------------------------------------
   Phase 3a, 12 August 2026. Header and hero.
   --------------------------------------------------------------- */

/* The navigation becomes a fixed white strip across the top.
   position:sticky does NOT work here, tested 12 August. Two reasons:
   the page scrolls inside #container rather than the window, and the nav's
   parent .Header__menuWrapper is only 76px tall, so a sticky child has
   nowhere to stick. Anything that needs a scroll listener must listen on
   #container, not on window.
   The padding on #headerContainer reserves the space the fixed bar takes.
   If the bar's height ever changes, change that padding with it. */
.Header__menuWrapper{
  position:fixed !important; top:0 !important; left:0 !important; right:0 !important;
  z-index:60 !important; background:#fff !important;
  border-bottom:1px solid var(--ts-hairline) !important;
}
#headerContainer{ padding-top:76px !important; }
.Header__nav .Header__link, .Header__nav a{ color:var(--ts-ink) !important; }
.Header__nav a:hover{ color:var(--ts-state) !important; }
.Header__logotxt, .Header__logotxt *{ color:var(--ts-ink) !important; }

/* Deep Navy hero, home page only. Inner pages keep the white hero, which is
   what keeps the breadcrumb legible against it.
   Page type comes from the class on <portal>: home, article_subcategory,
   articleDetail. */
.portalContainer.home .Header__headerBg{
  background-color:var(--ts-navy) !important;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px) !important;
  background-size:22px 22px !important;
}
.portalContainer.home #headerContainer{ background:var(--ts-navy) !important; }

/* headline: white with a single State Blue word, per the brand guide */
.portalContainer.home h2.Header__welcomeTitle::before{ color:#fff !important; }
.portalContainer.home h2.Header__welcomeTitle::after{ color:var(--ts-state) !important; }
.portalContainer.home .Header__titleDescription > *:not(.Header__welcomeTitle),
.portalContainer.home .Header__titleDescription > p{ color:rgba(255,255,255,.68) !important; }

/* eyebrow pill, matched to the twinsity.com hero pill on a dark ground */
.portalContainer.home .Header__titleDescription::before{
  content:"SUPPORT"; display:inline-block;
  font-size:11px; font-weight:600; letter-spacing:.44px; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  border-radius:100px; padding:4px 12px; margin-bottom:18px;
}

/* the search box lifts off the navy */
.portalContainer.home .SearchBox__searchTextbox,
.portalContainer.home #searchContainer1{
  border-color:transparent !important;
  box-shadow:0 18px 50px rgba(0,0,0,.28) !important;
}


/* ---------------------------------------------------------------
   Phase 3b, 12 August 2026. Cards, page ground and article images.
   --------------------------------------------------------------- */

/* flat navy, no dot grid, on the hero */
.portalContainer.home .Header__headerBg{ background-image:none !important; }

/* off-white ground below the hero so the white cards read as cards.
   The :has() rule covers the body behind the scrollbar gutter; browsers
   without :has() simply keep white there, which is harmless. */
.portalContainer.home{ background:var(--ts-offwhite) !important; }
body:has(.portalContainer.home){ background:var(--ts-offwhite) !important; }

/* The whole category card becomes the link.
   There IS a real anchor inside the title span, .Link__link with an href, so
   this is a genuine link: middle click and open in new tab both work.
   The pseudo element must belong to the ANCHOR. Putting it on the title span
   lays a transparent layer over the anchor and kills the click entirely. */
.TitleContainer__container{ position:relative !important; }
.TitleContainer__title a.Link__link::after{
  content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important;
}

/* icon above the title rather than beside it */
.TitleContainer__header{
  flex-direction:column !important; align-items:flex-start !important; gap:14px !important;
}
.TitleContainer__headerIcon{ margin:0 !important; }
.TitleContainer__headerIcon .Avatar__square,
.TitleContainer__headerIcon img{ width:34px !important; height:34px !important; }

/* Screenshots sit in a Deep Navy frame. Every in-app capture is dark, because
   the portal is dark only, so a navy surround makes them read as deliberate
   rather than pasted onto white.
   This overrides the border and radius Zoho hoists out of the inline styles
   into its generated sty__ classes. Never target those classes directly. */
[data-id="article_description"] img{
  display:block !important; margin:0 auto !important;
  background:var(--ts-navy) !important; padding:14px !important;
  border:none !important; border-radius:10px !important;
  max-width:100% !important; height:auto !important; box-sizing:border-box !important;
}
[data-id="article_description"] p:has(> img){ margin:26px 0 !important; }


/* ---------------------------------------------------------------
   Phase 4, 12 August 2026. Header rebuild.
   The header template was edited on the HTML tab: My Area, Community,
   Sign In and the separate Home item are gone, the company name is now a
   "Knowledge Base" label linking to the KB home, and Release notes, Log in
   and Contact support were added. This styles that markup.
   The original template is backed up at
   reference\\helpcenter-header-template-original.html
   --------------------------------------------------------------- */

.Header__logoPart{ display:flex !important; align-items:center !important; gap:18px !important; }
.ts-hdr-div{ width:1px; height:26px; background:var(--ts-hairline); flex:0 0 auto; }
a.Header__logotxt.ts-kb-label{
  font-size:15.5px !important; font-weight:600 !important; letter-spacing:-.015em !important;
  color:var(--ts-ink) !important; white-space:nowrap !important;
}
a.Header__logotxt.ts-kb-label:hover{ color:var(--ts-brand) !important; }

.Header__nav{ display:flex !important; align-items:center !important; gap:26px !important; }
.Header__nav .ts-nav-item a.ts-out{
  font-size:14.5px !important; font-weight:500 !important; color:var(--ts-body) !important;
}
.Header__nav .ts-nav-item a.ts-out:hover{ color:var(--ts-state) !important; }
.Header__nav .ts-nav-item a.ts-out::after{
  content:"\2197"; margin-left:5px; font-size:12px; opacity:.6;
}

/* the button pair, sized and spaced as on twinsity.com */
.Header__nav .ts-nav-actions{ display:flex !important; align-items:center !important; gap:10px !important; }
.Header__nav a.ts-btn{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:150px !important; height:34px !important;
  font-size:13px !important; font-weight:600 !important; border-radius:6px !important;
  border:1.3px solid transparent !important; transition:.15s !important; box-sizing:border-box !important;
}
.Header__nav a.ts-btn-primary{ background:var(--ts-state) !important; color:#fff !important; border-color:var(--ts-state) !important; }
.Header__nav a.ts-btn-primary:hover{ background:#0289db !important; border-color:#0289db !important; color:#fff !important; }
.Header__nav a.ts-btn-ghost{ background:transparent !important; color:var(--ts-ink) !important; border-color:var(--ts-ink) !important; }
.Header__nav a.ts-btn-ghost:hover{ background:rgba(24,27,32,.04) !important; color:var(--ts-ink) !important; }


/* The nav row is a flex row and .Header__logoPart was expanding to fill it,
   squeezing the buttons to 39px wide. Pin the logo to its content width, let
   the nav take what it needs, and stop the buttons shrinking. */
.Header__logoPart{ flex:0 0 auto !important; }
.Header__navbtn{ flex:1 1 auto !important; display:flex !important; justify-content:flex-end !important; }
.Header__nav{ width:auto !important; flex:0 0 auto !important; }
.Header__nav a.ts-btn{ flex:0 0 150px !important; }
.Header__nav .ts-nav-item{ flex:0 0 auto !important; white-space:nowrap !important; }


/* ---------------------------------------------------------------
   Phase 4b, 12 August 2026. Quick links, still stuck band, footer.
   The footer template on the HTML tab was empty, so this is our own markup
   rather than an override of Zoho's default.
   --------------------------------------------------------------- */

/* quick links under the search, home page only */
.ts-quick{ display:none; }
.portalContainer.home .ts-quick{
  display:flex !important; flex-wrap:wrap; gap:10px; justify-content:center;
  margin:22px auto 0; max-width:720px;
}
.portalContainer.home .ts-quick a{
  font-size:13.5px; font-weight:500; color:rgba(255,255,255,.86) !important;
  border:1px solid rgba(255,255,255,.24); border-radius:999px; padding:8px 16px;
  transition:.15s; white-space:nowrap;
}
.portalContainer.home .ts-quick a:hover{ border-color:var(--ts-state); color:var(--ts-state) !important; }

/* still stuck band, the light step down into the dark footer */
.ts-stuck{ background:var(--ts-offwhite); border-top:1px solid var(--ts-hairline); }
.portalContainer.home .ts-stuck{ background:#fff; }
.ts-stuck-in{ max-width:1080px; margin:0 auto; padding:42px 24px; display:flex; align-items:center; gap:32px; }
.ts-stuck-txt h3{ font-size:23px; font-weight:700; letter-spacing:-.03em; color:var(--ts-ink); margin:0 0 7px; }
.ts-stuck-txt p{ margin:0; color:var(--ts-muted); font-size:15px; }
.ts-stuck-btn{
  margin-left:auto; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  background:var(--ts-state); color:#fff !important; font-size:15px; font-weight:600;
  border-radius:8px; padding:12px 22px; transition:.15s;
}
.ts-stuck-btn:hover{ background:#0289db; }

/* footer, matched to twinsity.com */
.ts-footer{ background:#060D16; padding:52px 48px 28px; }
.ts-footer-in{ max-width:1080px; margin:0 auto; }
.ts-footer-top{ display:grid; grid-template-columns:306px 153px 153px 153px 153px; gap:40px; margin-bottom:40px; }
.ts-footer-blurb{ font-size:13px; color:rgba(255,255,255,.42); line-height:1.7; margin:0 0 14px; max-width:280px; }
.ts-footer-mail{ font-size:13px; color:var(--ts-state) !important; }
.ts-footer-col h4{ font-size:11px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; color:rgba(255,255,255,.45); margin:0 0 18px; }
.ts-footer-col ul{ list-style:none; margin:0; padding:0; }
.ts-footer-col li{ margin-bottom:11px; }
.ts-footer-col li a{ font-size:13px; color:rgba(255,255,255,.65) !important; transition:.15s; }
.ts-footer-col li a:hover{ color:#fff !important; }
.ts-footer-bot{ display:flex; align-items:center; gap:22px; border-top:1px solid rgba(255,255,255,.08); padding-top:22px; }
.ts-footer-bot span{ font-size:12px; color:rgba(255,255,255,.38); }
.ts-badges{ margin-left:auto; display:flex; gap:20px; }

/* Our footer markup renders INSIDE Zoho's .Footer__footer wrapper, so that
   wrapper must not be hidden. Reset it instead, and force left alignment,
   because Zoho centres everything inside it. */
#footer, .Footer__footer{
  display:block !important; background:transparent !important;
  padding:0 !important; margin:0 !important; max-width:none !important;
  width:auto !important; border:none !important; text-align:left !important;
}
.ts-footer, .ts-footer *, .ts-stuck, .ts-stuck *{ text-align:left !important; }


/* ---------------------------------------------------------------
   Phase 5, 12 August 2026. Alignment, compressed inner hero, article rows.
   --------------------------------------------------------------- */

/* The fixed header spans the viewport; the page content sits inside
   #container, which is narrower by its scrollbar, so the two were 8px out.
   Zoho STRIPS <script> from the header and footer templates, so this cannot
   be measured in JS. scrollbar-gutter reserves an equal gutter on both edges
   of the scroll box, which makes the content centre on the viewport centre.
   Verified: logo and first card both start at 710, nav and last card both
   end at 1850. */
#container{ scrollbar-gutter:stable both-edges !important; }
.Header__menuWrapper{ right:0 !important; width:auto !important; box-sizing:border-box !important; }

/* card grid fills the content width so the cards line up with the header */
.WidgetsContainer__widgetCont{ width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; }
.WidgetsContainer__lftWd{ display:flex !important; flex-wrap:wrap !important; gap:20px !important; margin:0 !important; width:100% !important; }
.TitleContainer__container{ width:calc((100% - 40px)/3) !important; margin:0 !important; }

/* compressed hero on every page except home: no 52px headline, breadcrumb
   first, slimmer search. Saves about 150px before any content. */
.portalContainer:not(.home) h2.Header__welcomeTitle{ display:none !important; }
.portalContainer:not(.home) .Header__welcomeDescription{ display:none !important; }
.portalContainer:not(.home) .Header__titleDescription{ padding:0 !important; margin:0 !important; }
.portalContainer:not(.home) #titleSearch,
.portalContainer:not(.home) .Header__titleSearchWrapper{ padding-bottom:22px !important; }
.portalContainer:not(.home) #headerContainer{ padding-top:76px !important; border-bottom:1px solid var(--ts-hairline) !important; }
.portalContainer:not(.home) .Header__headerBg{ background:var(--ts-offwhite) !important; }
.portalContainer:not(.home) #bannerContainer{ display:flex !important; flex-direction:column !important; }
.portalContainer:not(.home) .Header__breadcrumbs{ order:-1 !important; padding:18px 0 6px !important; }
.portalContainer:not(.home) .SearchBox__searchTextbox,
.portalContainer:not(.home) #searchContainer1,
.portalContainer:not(.home) .SearchCon__searchCon{ max-width:430px !important; }

/* article rows on a category or section page */
.ArticleListContainer__boxView{ border:1px solid var(--ts-hairline) !important; border-radius:12px !important; overflow:hidden !important; background:#fff !important; }
.ModuleItem__moduleListItem{ position:relative !important; transition:background .14s ease !important; border-bottom:1px solid var(--ts-hairline) !important; padding:18px 44px 18px 20px !important; }
.ModuleItem__moduleListItem:last-child{ border-bottom:none !important; }
.ModuleItem__moduleListItem:hover{ background:var(--ts-offwhite) !important; }
.ModuleItem__artList a.Link__link{ color:var(--ts-ink) !important; font-size:16.5px !important; font-weight:600 !important; letter-spacing:-.01em !important; }
.ModuleItem__moduleListItem:hover .ModuleItem__artList a.Link__link{ color:var(--ts-brand) !important; }
.ModuleItem__artList a.Link__link::after{ content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important; }
.ModuleItem__moduleListItem::after{ content:"" !important; position:absolute !important; right:22px !important; top:50% !important; width:8px !important; height:8px !important; margin-top:-5px !important; border-right:2px solid var(--ts-hairline) !important; border-bottom:2px solid var(--ts-hairline) !important; transform:rotate(-45deg) !important; transition:.14s !important; }
.ModuleItem__moduleListItem:hover::after{ border-color:var(--ts-state) !important; right:18px !important; }


/* ---------------------------------------------------------------
   Phase 5b, 12 August 2026. Grid gaps, view toggle, KB landing page.
   --------------------------------------------------------------- */

/* The real grid container is .kbCategory__gridView on the knowledge base
   landing page and .ModuleCategoryContainer__gridView on home. Putting the
   gap on .WidgetsContainer__lftWd did nothing, because the cards are not its
   direct children. */
.ModuleCategoryContainer__gridView, .kbCategory__gridView{
  display:flex !important; flex-wrap:wrap !important; gap:20px !important; width:100% !important;
}
.WidgetsContainer__lftWd{ gap:0 !important; }
.TitleContainer__container{ width:calc((100% - 40px)/3) !important; margin:0 !important; }

/* the grid and list view toggle is gone */
.ModuleCategoryContainer__viewpanel, .ModuleCategoryContainer__changeView{ display:none !important; }

/* The knowledge base landing page at /portal/en/kb is reachable from the
   breadcrumb, so it gets the same hero as home rather than the compressed
   inner-page one. Page class is kbLanding. */
.portalContainer.kbLanding .Header__headerBg{ background-color:var(--ts-navy) !important; background-image:none !important; }
.portalContainer.kbLanding #headerContainer{ background:var(--ts-navy) !important; border-bottom:none !important; }
.portalContainer.kbLanding{ background:var(--ts-offwhite) !important; }
.portalContainer.kbLanding h2.Header__welcomeTitle{ display:block !important; }
.portalContainer.kbLanding h2.Header__welcomeTitle::before{ color:#fff !important; }
.portalContainer.kbLanding h2.Header__welcomeTitle::after{ color:var(--ts-state) !important; }
.portalContainer.kbLanding .Header__welcomeDescription{ display:block !important; color:rgba(255,255,255,.68) !important; }
.portalContainer.kbLanding .Header__titleDescription{ padding:66px 20px 0 !important; }
.portalContainer.kbLanding .Header__titleDescription::before{
  content:"SUPPORT"; display:inline-block; font-size:11px; font-weight:600; letter-spacing:.44px; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  border-radius:100px; padding:4px 12px; margin-bottom:18px;
}
.portalContainer.kbLanding #titleSearch, .portalContainer.kbLanding .Header__titleSearchWrapper{ padding-bottom:60px !important; }
.portalContainer.kbLanding .SearchBox__searchTextbox,
.portalContainer.kbLanding #searchContainer1,
.portalContainer.kbLanding .SearchCon__searchCon{ max-width:560px !important; }
.portalContainer.kbLanding .SearchBox__searchTextbox,
.portalContainer.kbLanding #searchContainer1{ border-color:transparent !important; box-shadow:0 18px 50px rgba(0,0,0,.28) !important; }
.portalContainer.kbLanding .Header__breadcrumbs{ display:none !important; }
.portalContainer.kbLanding .ts-quick{ display:flex !important; }
.portalContainer.kbLanding .ts-quick a{
  color:rgba(255,255,255,.86) !important; border:1px solid rgba(255,255,255,.24) !important;
}
.portalContainer.kbLanding .ts-quick a:hover{ border-color:var(--ts-state) !important; color:var(--ts-state) !important; }


/* ---------------------------------------------------------------
   Phase 6, 12 August 2026. Hero search removed from inner pages,
   article page and search results page tidied.
   Brock's call: the hero search only earns its place on the two landing
   pages. On inner pages it duplicated the header and, being a large white
   box, looked wrong sliding under the fixed header on the first scroll.
   It stays on the search results page, where it is needed to refine.
   --------------------------------------------------------------- */
/* superseded by Phase 6b: the search box moves into the header */
.portalContainer:not(.home):not(.kbLanding):not(.searchResults) #titleSearch,
.portalContainer:not(.home):not(.kbLanding):not(.searchResults) .Header__titleSearchWrapper{ padding-bottom:6px !important; }
.portalContainer:not(.home):not(.kbLanding):not(.searchResults) .Header__breadcrumbs{ padding:16px 0 14px !important; }

/* article page: content card, follow block, section list */
.ArticleDetailLeftContainer__box{ border:1px solid var(--ts-hairline) !important; border-radius:12px !important; background:#fff !important; box-shadow:none !important; }
.ArticleDetailRightContainer__wrapper{ border:none !important; }
.ArticleDetailRightContainer__followContentLow{ background:var(--ts-offwhite) !important; border:none !important; border-radius:12px !important; padding:18px 20px !important; }
.ArticleDetailRightContainer__widgetLt{ border:1px solid var(--ts-hairline) !important; border-radius:12px !important; padding:18px 20px !important; }

/* search results page */
.portalContainer.searchResults .Header__headerBg{ background:var(--ts-offwhite) !important; }
.search__box{ border:1px solid var(--ts-hairline) !important; border-radius:12px !important; background:#fff !important; padding:6px 0 !important; }
.search__searchTitleHeader{ font-size:15px !important; font-weight:600 !important; color:var(--ts-ink) !important; }
.search__searchPanel{ border:1px solid var(--ts-hairline) !important; border-radius:12px !important; background:#fff !important; padding:18px 20px !important; }
.search__searchTitle{ font-size:11.5px !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:var(--ts-muted) !important; font-weight:600 !important; }


/* ---------------------------------------------------------------
   Phase 7, 12 August 2026, 15:44 CEST.
   Phase 6b removed in full. Brock's call: the search box belongs in the
   hero band, not in the fixed header. Everything below is a correction.
   --------------------------------------------------------------- */

/* 7.1 Search box back in the hero on the two landing pages, gone elsewhere.
   Removing Phase 6b restores the earlier hero rules by itself; these lines
   only undo the positioning it forced and hide the box on inner pages,
   where there is no hero band for it to sit in. */
#searchBtnContainer{ position:static !important; transform:none !important; z-index:auto !important; }
/* Only the search box itself is hidden. #titleSearch is its grandparent
   and also holds the breadcrumb, so hiding that took the breadcrumb with it. */
.portalContainer:not(.home):not(.kbLanding):not(.searchResults) #searchBtnContainer,
.portalContainer:not(.home):not(.kbLanding):not(.searchResults) #searchContainer{ display:none !important; }
.portalContainer:not(.home):not(.kbLanding):not(.searchResults) #titleSearch,
.portalContainer:not(.home):not(.kbLanding):not(.searchResults) .Header__titleSearchWrapper{
  display:block !important; padding:0 !important; background:transparent !important;
}

/* 7.2 The orange line under the header was Zoho's reading progress bar.
   Class: Readingprogress__progressBarLine, gradient rgb(250,131,24). */
.Readingprogress__progressBarLine,
.Readingprogress__progressBar,
div[class*="Readingprogress"]{ display:none !important; }

/* 7.3 With the search and the progress bar gone, the band above inner
   pages was an empty grey slab. Compressed to the breadcrumb. */
.portalContainer:not(.home):not(.kbLanding) #headerContainer{
  min-height:0 !important; height:auto !important; padding-bottom:0 !important;
}
.portalContainer:not(.home):not(.kbLanding) .Header__menuBox{ min-height:0 !important; }
.portalContainer:not(.home):not(.kbLanding) .Header__breadcrumbs{ padding:18px 0 !important; text-align:left !important; }
/* Breadcrumb sat centred in a 720px box. Widened to the content column and
   left aligned so it starts level with the article card and the logo. */
.portalContainer:not(.home):not(.kbLanding) .Header__titleSearchBox{
  max-width:1140px !important; width:100% !important; margin:0 auto !important;
  display:block !important;
}
.portalContainer:not(.home):not(.kbLanding) #bannerContainer,
.portalContainer:not(.home):not(.kbLanding) .Header__banneralt{
  justify-content:flex-start !important; width:100% !important;
}

/* 7.4 Header alignment, real cause. The CTA <li> was allowed to shrink
   (flex 0 1 auto) while the two buttons inside it were pinned at 150px,
   so the buttons overflowed it to the right. Measured live at 2560px:
   the content column ends at 1850, the nav element ended at 1850, but
   Contact support ended at 1969, 119px past the column. */
.Header__nav{
  width:auto !important; max-width:none !important; flex:0 0 auto !important;
  justify-content:flex-end !important; overflow:visible !important;
}
.Header__nav .Header__menuList{ flex:0 0 auto !important; }
.Header__nav .ts-nav-actions{
  flex:0 0 auto !important; display:flex !important; align-items:center !important;
  gap:12px !important; margin:0 0 0 24px !important;
}
.Header__nav .ts-nav-item{ margin:0 !important; }
.Header__nav a.ts-btn{ flex:0 0 150px !important; width:150px !important; }
/* Zoho sets a computed max-width on the actions <li> (measured 181.008px),
   which is what actually clipped it. Released here. */
.Header__nav .Header__menuList,
.Header__nav .ts-nav-actions,
.Header__nav .ts-nav-item{ max-width:none !important; min-width:0 !important; }

/* 7.5 The dark block at the top right on scroll was the #container
   scrollbar, sitting inside the gutter reserved by
   scrollbar-gutter: stable both-edges. Gutter dropped, bar made thin
   and light so it reads as a scrollbar rather than a stray panel. */
#container{
  scrollbar-gutter:auto !important;
  scrollbar-width:thin !important;
  scrollbar-color:#C9CDD6 transparent !important;
}
#container::-webkit-scrollbar{ width:8px !important; }
#container::-webkit-scrollbar-track{ background:transparent !important; }
#container::-webkit-scrollbar-thumb{ background:#C9CDD6 !important; border-radius:8px !important; }
#container::-webkit-scrollbar-thumb:hover{ background:#AEB4C0 !important; }

/* 7.6 Category cards: two per row with smaller type, as in the mock. */
.ModuleCategoryContainer__gridView, .kbCategory__gridView{ gap:24px !important; }
.TitleContainer__container{ width:calc((100% - 24px) / 2) !important; padding:26px 28px !important; }
.TitleContainer__title, .TitleContainer__title a{
  font-size:19px !important; line-height:1.3 !important; font-weight:600 !important;
}
.TitleContainer__description{
  font-size:14.5px !important; line-height:1.55 !important; color:var(--ts-body) !important;
}
.TitleContainer__content, .TitleContainer__content li, .TitleContainer__content a{
  font-size:13px !important; color:var(--ts-muted) !important;
}
.TitleContainer__headerIcon svg, .TitleContainer__headerIcon img{ width:26px !important; height:26px !important; }

/* 7.7 Quick links. The layout was scoped to .home, so the knowledge base
   landing page rendered them as plain bordered boxes with no gap. */
.ts-quick{
  flex-wrap:wrap !important; gap:10px !important; justify-content:center !important;
  margin:22px auto 0 !important; max-width:720px !important;
}
.ts-quick a{
  font-size:13.5px !important; font-weight:500 !important; border-radius:999px !important;
  padding:8px 16px !important; white-space:nowrap !important; transition:.15s !important;
}


/* ---------------------------------------------------------------
   Phase 8, 12 August 2026, 16:40 CEST.
   --------------------------------------------------------------- */

/* 8.1 The blue strip on scroll. Zoho turns .Header__searchSubCont, the
   direct parent of the hero search box, into position:fixed with a
   rgb(62,122,247) background once you scroll past the hero. It is 88px tall
   against our 68px header, so 20px of it plus the top of the search box
   showed underneath. It cannot be hidden, the hero search lives inside it,
   so the sticky behaviour is cancelled instead. */
.Header__searchSubCont{
  position:static !important; top:auto !important; left:auto !important;
  right:auto !important; height:auto !important; background:transparent !important;
  box-shadow:none !important; z-index:auto !important; backdrop-filter:none !important;
}

/* 8.2 Header now aligns exactly with the cards. The fixed header spans the
   whole window while the content sits inside #container, which is narrower
   by its scrollbar. The scrollbar is pinned to 10px and the header inset by
   the same, so logo and first card share an edge and so do the CTA and the
   last card. */
#container::-webkit-scrollbar{ width:10px !important; }
#container{ scrollbar-width:auto !important; }
.Header__menuWrapper{ right:10px !important; left:0 !important; }

/* 8.3 Category cards tightened. They were 268px for four short lines. */
.TitleContainer__container{ padding:20px 24px !important; }
.TitleContainer__header{ padding:0 !important; }
.TitleContainer__headerIcon{ margin-bottom:8px !important; }
.TitleContainer__description{ margin:10px 0 0 !important; min-height:0 !important; }
.TitleContainer__body{ padding-bottom:0 !important; }
.TitleContainer__content{ margin:12px 0 0 !important; }

/* 8.4 Hero reduced. Was 563px on the home page, most of it padding. */
.portalContainer.home .Header__titleSearchWrapper,
.portalContainer.kbLanding .Header__titleSearchWrapper{ padding-bottom:24px !important; }
.portalContainer.home .Header__titleSearchBox,
.portalContainer.kbLanding .Header__titleSearchBox{ padding-top:20px !important; padding-bottom:16px !important; }

/* 8.5 The article page side rail follows the reader instead of scrolling
   away, as in the mock. #container is the scroll box, so the offset is
   measured from the fixed header. */
.portalContainer.articleDetail .ArticleDetailRightContainer__wrapper,
.portalContainer.articleDetail .Layout__rightColumn,
.portalContainer.articleDetail .Layout__aside{
  position:sticky !important; top:92px !important; align-self:flex-start !important;
}


/* ---------------------------------------------------------------
   Phase 9, 12 August 2026, 17:05 CEST. Tightening pass.
   --------------------------------------------------------------- */

/* 9.1 Exact header alignment. scrollbar-width:thin gives a 10px bar in
   Chrome, and the fixed header is inset by the same 10px, so the logo and
   the first card share a left edge and Contact support lines up with the
   right edge of the second card. scrollbar-width:auto in Phase 8 gave 15px
   and put it 3px out. */
#container{ scrollbar-width:thin !important; }
.Header__menuWrapper{ right:10px !important; left:0 !important; }

/* 9.2 Hero height. Was 563px, most of it padding above the headline and
   below the quick links. The wrapper needs the id selector, #titleSearch,
   because an earlier rule sets its padding at id specificity and a class
   selector loses even with !important. */
.portalContainer.home #titleSearch,
.portalContainer.kbLanding #titleSearch{ padding-bottom:24px !important; }
.portalContainer.home .Header__titleSearchBox,
.portalContainer.kbLanding .Header__titleSearchBox{ padding-top:12px !important; padding-bottom:12px !important; }
.portalContainer.home .Header__titleDescription,
.portalContainer.kbLanding .Header__titleDescription{ padding-top:36px !important; }
.portalContainer.home h2.Header__welcomeTitle,
.portalContainer.kbLanding h2.Header__welcomeTitle{ margin-bottom:10px !important; }
.portalContainer.home .Header__welcomeDescription,
.portalContainer.kbLanding .Header__welcomeDescription{ margin:4px 0 0 !important; }
.portalContainer.home .Header__searchSubCont,
.portalContainer.kbLanding .Header__searchSubCont{ padding:18px 0 0 !important; }
.ts-quick{ margin-top:16px !important; }

/* 9.3 Category cards tightened further. The card height is set by the
   tallest card in the row, so the levers are the fixed spacing, not the
   text. */
.TitleContainer__container{ padding:16px 22px !important; }
.TitleContainer__header{ gap:6px !important; }
.TitleContainer__headerIcon{ margin-bottom:2px !important; }
.TitleContainer__headerIcon svg, .TitleContainer__headerIcon img{ width:24px !important; height:24px !important; }
.TitleContainer__description{ margin:8px 0 0 !important; font-size:14px !important; line-height:1.45 !important; }
.TitleContainer__content{ margin:8px 0 0 !important; }

/* 9.4 The real reason the cards would not shrink: min-height:260px on
   .TitleContainer__container, with .TitleContainer__body set to flex:1 so it
   absorbed the slack. Both released. Cards in a row still equalise, because
   the row is a flex line and stretches them. */
.TitleContainer__container{ min-height:0 !important; height:auto !important; }
.TitleContainer__body{ flex:0 0 auto !important; }

/* 9.5 Releasing the min-height took the cards from 268px to 181px, which
   read as cramped. A little of the air put back, landing near 205px. */
.TitleContainer__container{ padding:22px 24px !important; }
.TitleContainer__header{ gap:10px !important; }
.TitleContainer__headerIcon{ margin-bottom:6px !important; }
.TitleContainer__description{ margin:10px 0 0 !important; }
.TitleContainer__content{ margin:12px 0 0 !important; }


/* ---------------------------------------------------------------
   Phase 10, 12 August 2026, 17:50 CEST.
   Breadcrumb band on inner pages: thinner, and sticky under the header.
   #headerContainer is a direct child of a full height wrapper, so sticky
   works across the whole page. The 68px top padding is the fixed header's
   own height, so the band comes to rest immediately below it.
   --------------------------------------------------------------- */
.portalContainer:not(.home):not(.kbLanding) #headerContainer{
  position:sticky !important; top:0 !important; z-index:50 !important;
  padding-top:68px !important; padding-bottom:0 !important;
  height:auto !important; min-height:0 !important; background:transparent !important;
}
.portalContainer:not(.home):not(.kbLanding) .Header__headerBg,
.portalContainer:not(.home):not(.kbLanding) .Header__bgColor{
  background:transparent !important; background-image:none !important;
}
.portalContainer:not(.home):not(.kbLanding) #titleSearch,
.portalContainer:not(.home):not(.kbLanding) .Header__titleSearchWrapper{
  background:var(--ts-offwhite) !important;
  border-bottom:1px solid var(--ts-hairline) !important;
  padding:0 15px !important;
}
.portalContainer:not(.home):not(.kbLanding) .Header__breadcrumbs{ padding:11px 0 !important; }

/* The side rail now clears the header plus the breadcrumb band. */
.portalContainer.articleDetail .ArticleDetailRightContainer__wrapper,
.portalContainer.articleDetail .Layout__rightColumn,
.portalContainer.articleDetail .Layout__aside{ top:128px !important; }

/* 10b. The Phase 10 band rules lost to the Phase 7 ones: those carry four
   classes (.portalContainer plus three :not()) and mine carried three, so
   equal !important went to the earlier, more specific rule. Same prefix used
   here, with a leading body to stay ahead of anything added later. */
body .portalContainer:not(.home):not(.kbLanding):not(.searchResults) #titleSearch{
  background:var(--ts-offwhite) !important;
  border-bottom:1px solid var(--ts-hairline) !important;
  padding:0 15px !important;
}
body .portalContainer:not(.home):not(.kbLanding):not(.searchResults) .Header__titleSearchBox{
  padding:0 !important; max-width:1140px !important; margin:0 auto !important;
}
body .portalContainer:not(.home):not(.kbLanding):not(.searchResults) .Header__titleDescription{
  display:none !important;
}
body .portalContainer:not(.home):not(.kbLanding):not(.searchResults) .Header__breadcrumbs{
  padding:12px 0 !important;
}
body .portalContainer:not(.home):not(.kbLanding):not(.searchResults) .Header__banneralt{
  min-height:0 !important;
}

/* 10c. The band was still 71px because the breadcrumb line box is 47px.
   Line height pinned, band lands at about 44px. */
body .portalContainer:not(.home):not(.kbLanding):not(.searchResults) .Header__breadcrumbs{
  padding:11px 0 !important; font-size:13.5px !important; line-height:22px !important;
}
body .portalContainer:not(.home):not(.kbLanding):not(.searchResults) .Header__breadcrumbs *{
  font-size:13.5px !important; line-height:22px !important; vertical-align:middle !important;
}

/* 10d. The band inherited max-width:1170px from the wrapper, so the grey
   stopped at the content column instead of running edge to edge. */
body .portalContainer:not(.home):not(.kbLanding):not(.searchResults) #titleSearch{
  max-width:none !important; width:100% !important;
}


/* ---------------------------------------------------------------
   Phase 11, 12 August 2026, 19:15 CEST. Article type scale.
   Brock: the article text reads too big. Measured before changing:
   title 36px, h2 22px on a 38.5px line box, body and lists 16.5px at
   1.75, tables 15.5px, text column 757px wide. The body size was only
   part of it. The h2 inherited the body's 1.75 leading, which is far
   too loose for a heading, and a 757px column at 16.5px runs to about
   90 characters a line, well past the 60 to 75 that reads easily.
   So the column comes in as well as the type coming down.
   --------------------------------------------------------------- */
.ArticleDetailLeftContainer__box{
  padding:36px clamp(20px, 7%, 56px) 40px !important;
}
[data-id="articleTitle"]{
  font-size:32px !important; line-height:1.2 !important; font-weight:700 !important;
}
.ArticleDetailLeftContainer__contents p,
.ArticleDetailLeftContainer__contents li,
.ArticleDetailLeftContainer__contents ul,
.ArticleDetailLeftContainer__contents ol{
  font-size:16px !important; line-height:1.65 !important;
}
.ArticleDetailLeftContainer__contents li{ margin-bottom:6px !important; }
.ArticleDetailLeftContainer__contents h2{
  font-size:20px !important; line-height:1.3 !important; font-weight:600 !important;
  margin:34px 0 10px !important;
}
.ArticleDetailLeftContainer__contents h3{
  font-size:17px !important; line-height:1.35 !important; font-weight:600 !important;
  margin:26px 0 8px !important;
}
.ArticleDetailLeftContainer__contents h4{
  font-size:16px !important; line-height:1.4 !important; font-weight:600 !important;
  margin:22px 0 6px !important;
}
.ArticleDetailLeftContainer__contents table,
.ArticleDetailLeftContainer__contents td,
.ArticleDetailLeftContainer__contents th{
  font-size:15px !important; line-height:1.55 !important;
}
.ArticleDetailLeftContainer__contents code,
.ArticleDetailLeftContainer__contents pre{
  font-size:14.5px !important;
}