{"context":{"brandSettings":{"accentColor1":{"hex":"#e3e3e3"},"accentColor2":{"hex":"#00C48D"},"accentColor3":{"hex":"#ECEA28"},"bodyFont":{"font":"DM Sans","fontSet":"GOOGLE"},"colors":[{"hex":"#07272e"},{"hex":"#B1D400"},{"hex":"#00C4E9"},{"hex":"#9C7DDE"}],"fallbackFont":{"font":"arial, helvetica, sans-serif","fontSet":"DEFAULT"},"favicon":{"domain":null,"name":"Autrix Favicon Full","src":"https://145397951.fs1.hubspotusercontent-eu1.net/hubfs/145397951/Autrix%20Icon.png"},"favicons":[{"domain":null,"name":"Autrix Favicon Full","src":"https://145397951.fs1.hubspotusercontent-eu1.net/hubfs/145397951/Autrix%20Icon.png"}],"fonts":[],"logo":{"alt":"Autrix","domain":null,"height":499,"link":"","name":"Autrix logo (gradient)","src":"https://145397951.fs1.hubspotusercontent-eu1.net/hubfs/145397951/brand/autrix-logo-fixed.svg","width":2041},"logos":[{"alt":"Autrix","domain":null,"height":499,"link":"","name":"Autrix logo (gradient)","src":"https://145397951.fs1.hubspotusercontent-eu1.net/hubfs/145397951/brand/autrix-logo-fixed.svg","width":2041},{"alt":"Autrix Automation","domain":null,"height":72,"link":"https://www.autrix.co.uk","name":"Autrix","src":"https://145397951.fs1.hubspotusercontent-eu1.net/hubfs/145397951/select-1.png","width":314}],"primaryColor":{"hex":"#07272e"},"primaryFavicon":{"domain":null,"name":"Autrix Favicon Full","src":"https://145397951.fs1.hubspotusercontent-eu1.net/hubfs/145397951/Autrix%20Icon.png"},"primaryFont":{"font":"Onest","fontSet":"GOOGLE"},"primaryLogo":{"alt":"Autrix","domain":null,"height":499,"link":"","name":"Autrix logo (gradient)","src":"https://145397951.fs1.hubspotusercontent-eu1.net/hubfs/145397951/brand/autrix-logo-fixed.svg","width":2041},"secondaryColor":{"hex":"#00C4E9"}},"menuData":null,"themeSettings":{"bodyFont":{"casing":null,"color":null,"css":"font-family: 'DM Sans', sans-serif;","fallback":"sans-serif","font":"DM Sans","font_set":"GOOGLE","letter_spacing":null,"line_height":null,"size":null,"size_unit":null,"style":"font-family: 'DM Sans', sans-serif; font-style: normal; font-weight: normal; text-decoration: none","styles":{"font-family":"'DM Sans', sans-serif","font-style":"normal","font-weight":"normal","text-decoration":"none"},"variant":"regular"},"primaryFont":{"casing":null,"color":null,"css":"font-family: Onest, sans-serif;","fallback":"sans-serif","font":"Onest","font_set":"GOOGLE","letter_spacing":null,"line_height":null,"size":null,"size_unit":null,"style":"font-family: Onest, sans-serif; font-style: normal; font-weight: normal; text-decoration: none","styles":{"font-family":"Onest, sans-serif","font-style":"normal","font-weight":"normal","text-decoration":"none"},"variant":"regular"},"trellisBorderRadius":"rounded","trellisColorFillPrimaryDefault":{"color":"#07272E","css":"#07272E","hex":"#07272E","opacity":100,"rgb":"rgb(7, 39, 46)","rgba":"rgba(7, 39, 46, 1)"},"trellisColorFillSecondaryDefault":{"color":"#00C4E9","css":"#00C4E9","hex":"#00C4E9","opacity":null,"rgb":"rgb(0, 196, 233)","rgba":"rgba(0, 196, 233, 1)"},"trellisColorFillSurfaceDefault":"light","trellisColorFillTertiaryDefault":{"color":"#0F3D47","css":"#0F3D47","hex":"#0F3D47","opacity":100,"rgb":"rgb(15, 61, 71)","rgba":"rgba(15, 61, 71, 1)"},"trellisColorTextInteractiveDefault":{"color":"#00C4E9","css":"#00C4E9","hex":"#00C4E9","opacity":100,"rgb":"rgb(0, 196, 233)","rgba":"rgba(0, 196, 233, 1)"}},"companyName":"Autrix"},"modules":{},"dndAreas":{},"globalPartials":{},"headHtml":"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> \n<meta property=\"og:description\" content=\"\"> \n<meta property=\"og:title\" content=\"\"> \n<meta name=\"twitter:description\" content=\"\"> \n<meta name=\"twitter:title\" content=\"\"> \n<style>\na.cta_button{-moz-box-sizing:content-box !important;-webkit-box-sizing:content-box !important;box-sizing:content-box !important;vertical-align:middle}.hs-breadcrumb-menu{list-style-type:none;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px}.hs-breadcrumb-menu-item{float:left;padding:10px 0px 10px 10px}.hs-breadcrumb-menu-divider:before{content:'›';padding-left:10px}.hs-featured-image-link{border:0}.hs-featured-image{float:right;margin:0 0 20px 20px;max-width:50%}@media (max-width: 568px){.hs-featured-image{float:none;margin:0;width:100%;max-width:100%}}.hs-screen-reader-text{clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute !important;width:1px}\n</style> \n<style>\n  @font-face {\n    font-family: \"Onest\";\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n    src: url(\"/_hcms/googlefonts/Onest/regular.woff2\") format(\"woff2\"), url(\"/_hcms/googlefonts/Onest/regular.woff\") format(\"woff\");\n  }\n  @font-face {\n    font-family: \"Onest\";\n    font-weight: 700;\n    font-style: normal;\n    font-display: swap;\n    src: url(\"/_hcms/googlefonts/Onest/700.woff2\") format(\"woff2\"), url(\"/_hcms/googlefonts/Onest/700.woff\") format(\"woff\");\n  }\n  @font-face {\n    font-family: \"DM Sans\";\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n    src: url(\"/_hcms/googlefonts/DM_Sans/regular.woff2\") format(\"woff2\"), url(\"/_hcms/googlefonts/DM_Sans/regular.woff\") format(\"woff\");\n  }\n  @font-face {\n    font-family: \"DM Sans\";\n    font-weight: 700;\n    font-style: normal;\n    font-display: swap;\n    src: url(\"/_hcms/googlefonts/DM_Sans/700.woff2\") format(\"woff2\"), url(\"/_hcms/googlefonts/DM_Sans/700.woff\") format(\"woff\");\n  }\n</style> \n<link rel=\"canonical\" href=\"https://help.autrix.co.uk/hs/portals/customer-portal-app/brand\"> \n<!-- Autrix help.autrix.co.uk Site header HTML (Content > Pages > help.autrix.co.uk\n     > Templates > Site header HTML). Mirror of css/kb-overrides.css + back-to-top JS\n     + the \"Submit a request\" link fix. This field loads on EVERY page on the domain\n     (all KB pages + the 404 / \"Uh-Oh\" page, which is a website system page outside the\n     KB injection scope), so it both brands the 404 and repoints the dead /requests CTA\n     everywhere at once. Back-to-top JS is self-guarded (never a second button next to\n     the KB-header copy); the link fix is idempotent. Rebuild via build-kb-inject.py. --> \n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\"> \n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin> \n<link href=\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&amp;family=Onest:wght@400;500;600;700&amp;display=swap\" rel=\"stylesheet\"> \n<style>\n/* ============================================================================\n   Autrix Help Portal ‚Äî Knowledge Base CSS overrides\n   ----------------------------------------------------------------------------\n   WHY THIS FILE EXISTS\n   HubSpot's Knowledge Base does NOT use CMS themes and cannot be assigned a\n   custom local theme (confirmed: the stock @hubspot/cms-knowledge-base-theme is\n   not exposed in Design Manager and cannot be cloned/fetched). The only code\n   lever HubSpot exposes for the KB is a custom header-HTML field\n   (Service > Knowledge Base settings > Template tab).\n\n   This file is the SOURCE OF TRUTH for those overrides. Edit it here, keep it\n   in the repo, then paste its contents (wrapped in a style tag) into the\n   KB custom header-HTML field. It layers on top of the theme-editor settings\n   (teal hero #005154, cyan accent, Onest/DM Sans, grid layout) already\n   published on the Help Portal theme.\n\n   All rules are scoped under `.theme-overrides` (a class HubSpot puts on the KB\n   <body> and wrapper) so nothing here can affect other HubSpot content.\n   Selectors verified against the live DOM of https://help.autrix.co.uk on\n   2026-06-09. Card rules are conservative because the KB has no categories yet.\n   ============================================================================ */\n\n/* Brand tokens (mirrors src/input.css @theme) */\n.theme-overrides {\n  --autrix-dark:   #07272E;\n  --autrix-cyan:   #00C4E9;\n  --autrix-green:  #00C48D;\n  --autrix-purple: #9C7DDE;\n  --autrix-teal:   #005154;\n  --autrix-border: #E6EBED;\n  --autrix-muted:  #5A6B72;\n  --autrix-gradient: linear-gradient(125deg, #00C48D 5%, #00C4E9 40%, #9C7DDE 95%);\n}\n\n/* --- Typography -------------------------------------------------------------\n   The theme editor already maps Onest (headings) + DM Sans (body). These rules\n   are a safety net so headings stay on Onest even if a setting is reset. */\n.theme-overrides h1,\n.theme-overrides h2,\n.theme-overrides h3,\n.theme-overrides .hs-search-field__label {\n  font-family: \"Onest\", ui-sans-serif, system-ui, sans-serif;\n  letter-spacing: -0.5px;\n}\n.theme-overrides body,\n.theme-overrides p,\n.theme-overrides li,\n.theme-overrides a {\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n}\n\n/* --- Hero band + heading ----------------------------------------------------\n   .hs-kb-search-input-wrapper is the teal hero. The big \"How can we help you?\"\n   line is rendered as the search <label> (.hs-search-field__label). */\n.theme-overrides .hs-kb-search-input-wrapper {\n  position: relative;\n  /* overflow MUST stay visible: the search autocomplete dropdown\n     (.hs-search-field__suggestions) overlays downward past the band and would\n     be clipped by overflow:hidden. The line-art below is a CSS background, which\n     is always clipped to the element box regardless, so it stays contained.\n     z-index lifts the whole hero (and the overflowing dropdown) above the\n     category cards, which come later in the DOM. */\n  overflow: visible;\n  z-index: 5;\n  padding-top: 64px;\n  padding-bottom: 64px;\n  /* Brand line-art (gradient curves + circles) as a responsive background.\n     Inline SVG data-URI sits behind the heading/search; scales with the band\n     height and anchors to the right edge. Clipped to the band by the background\n     painting area (background-size:auto 170% just scales it; the overflow is\n     not painted), so no overflow:hidden is needed. */\n  background-image: url(\"data:image/svg+xml,%3Csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%204335%203903'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;'%3E%20%3Cg%20opacity='0.5'%20transform='matrix(1,0,0,1,-124.58521,-340.526036)'%3E%20%3Cg%20transform='matrix(4.166667,0,0,4.166667,0,0)'%3E%20%3Cg%20transform='matrix(1,0,0,1,652.6801,496.461)'%3E%20%3Cpath%20d='M0,113.083C32.741,56.375%2013.311,-16.138%20-43.398,-48.878C-100.106,-81.619%20-172.618,-62.189%20-205.358,-5.481C-238.099,51.227%20-218.67,123.74%20-161.961,156.48C-105.253,189.221%20-32.741,169.791%200,113.083ZM-293.574,264.43L-341.344,264.43C-397.415,264.428%20-432.46,203.729%20-404.425,155.168L-380.542,113.798C-345.642,53.345%20-370,-25.059%20-435.594,-54.146C-484.111,-75.66%20-542.435,-61.618%20-575.537,-20.13C-606.641,18.858%20-610.955,70.314%20-588.776,108.729L-393.296,447.311C-371.123,485.716%20-324.398,507.718%20-275.082,500.275C-222.603,492.35%20-181.278,448.861%20-175.657,396.081C-168.05,324.729%20-223.771,264.432%20-293.574,264.43ZM-362.614,-180.54C-304.625,-138.276%20-224.546,-156.383%20-189.642,-216.833L-165.758,-258.203C-137.72,-306.761%20-67.63,-306.761%20-39.593,-258.202L-15.707,-216.833C19.196,-156.383%2099.275,-138.276%20157.263,-180.539C200.153,-211.798%20217.154,-269.329%20197.776,-318.74C179.564,-365.172%20137.158,-394.635%2092.8,-394.635L-298.161,-394.635C-342.507,-394.635%20-384.923,-365.172%20-403.136,-318.74C-422.513,-269.331%20-405.512,-211.798%20-362.614,-180.54ZM383.419,108.727L187.938,447.309C165.759,485.724%20119.04,507.717%2069.723,500.273C17.243,492.35%20-24.08,448.861%20-29.707,396.087C-37.314,324.737%2018.407,264.44%2088.211,264.438L135.98,264.437C192.052,264.435%20227.096,203.736%20199.063,155.175L175.178,113.806C140.278,53.354%20164.636,-25.051%20230.233,-54.139C278.752,-75.66%20337.077,-61.617%20370.179,-20.132C401.283,18.857%20405.592,70.322%20383.419,108.727Z'%20style='fill:none;fill-rule:nonzero;stroke:url(%23_Linear1);stroke-width:4px;'/%3E%20%3C/g%3E%20%3C/g%3E%20%3C/g%3E%20%3Cdefs%3E%20%3ClinearGradient%20id='_Linear1'%20x1='0'%20y1='0'%20x2='1'%20y2='0'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(574.183,820.018,-820.018,574.183,-389.9991,-355.857)'%3E%3Cstop%20offset='0'%20style='stop-color:rgb(0,196,141);stop-opacity:1'/%3E%3Cstop%20offset='0.05'%20style='stop-color:rgb(0,196,141);stop-opacity:1'/%3E%3Cstop%20offset='0.4'%20style='stop-color:rgb(0,196,233);stop-opacity:1'/%3E%3Cstop%20offset='0.95'%20style='stop-color:rgb(152,112,225);stop-opacity:1'/%3E%3Cstop%20offset='1'%20style='stop-color:rgb(152,112,225);stop-opacity:1'/%3E%3C/linearGradient%3E%20%3C/defs%3E%20%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right center;\n  background-size: auto 170%;\n}\n.theme-overrides .hs-search-field__label {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  display: block;\n  text-align: center;\n  font-size: 34px;\n  font-weight: 600;\n  line-height: 1.15;\n  color: #FFFFFF;\n}\n\n/* --- Search box: rounded pill with soft shadow (matches mockup) -------------\n   NOTE: the heading <label> is the FIRST child INSIDE .hs-search-field__bar\n   (bar > form > label + input + button). So the white pill must NOT wrap the\n   label, or it goes white-on-white. We absolutely-position the label above the\n   bar (on the teal), and only the input+button row becomes the pill. */\n.theme-overrides .hs-search-field {\n  position: relative;\n  max-width: 620px;\n  margin-left: auto;\n  margin-right: auto;\n  padding-top: 58px; /* reserves room for the lifted heading */\n}\n.theme-overrides .hs-search-field__bar {\n  background: #FFFFFF;\n  border: 1px solid #D4DDE0;\n  border-radius: 26px;\n  box-shadow: 0 10px 28px rgba(7, 39, 46, 0.18);\n  transition: box-shadow 0.15s ease, border-color 0.15s ease;\n}\n.theme-overrides .hs-search-field__bar:focus-within {\n  border-color: var(--autrix-cyan);\n  box-shadow: 0 0 0 3px rgba(0, 196, 233, 0.30), 0 10px 28px rgba(7, 39, 46, 0.18);\n}\n.theme-overrides .hs-search-field__input {\n  border: 0;\n  outline: 0;\n  background: transparent;\n  padding: 14px 20px;\n  font-size: 15px;\n  color: var(--autrix-dark);\n}\n.theme-overrides .hs-search-field__input::placeholder { color: #9AA9B0; }\n.theme-overrides .hs-search-field__button {\n  background: transparent;\n  border: 0;\n  padding-right: 18px;\n}\n.theme-overrides .hs-search-field__button svg { fill: var(--autrix-teal); }\n\n/* --- Category cards (KB home \"Browse by topic\" grid) ------------------------\n   Real HubSpot classes (from module_kb_home_category_listing): the list is a\n   flex grid of .hs-kb-home-list__category cards, each with .hs-kb-home-list__icon\n   (32px svg), .hs-kb-home-list__text > __category-title / __category-description /\n   __category-link (\"N articles\"). By default the cards have no box styling ‚Äî we\n   turn them into branded white cards with a gradient icon chip + hover lift. */\n.theme-overrides .hs-kb-home-list {\n  --hs-kb-home-list-gap: 22px;\n  justify-content: center;\n  max-width: 1240px;\n  /* <main> adds 36px padding-bottom (0 top), so the gap below the cards is\n     bigger than above. Compensate with a larger top margin ‚Üí equal ~44px both. */\n  margin: 44px auto 8px;\n  padding: 0 24px;\n}\n/* Categories with no icon set render a .hs-kb-home-list__empty-icon placeholder\n   that is a phantom 120px tall, making those cards taller than ones with an icon.\n   Hide it so every card hugs its content and all cards match height. */\n.theme-overrides .hs-kb-home-list__empty-icon { display: none !important; }\n/* Card */\n.theme-overrides .hs-kb-home-list__category {\n  background: #FFFFFF;\n  border: 1px solid var(--autrix-border);\n  border-radius: 14px;\n  padding: 24px 22px;\n  text-align: left;\n  box-shadow: 0 1px 2px rgba(7, 39, 46, 0.04);\n  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;\n  /* The \"tiles\" layout forces grid-template-rows: 294px (tall empty cards) ‚Äî clear\n     it. Then stretch every card to the tallest in its row so all cards in the grid\n     are ALWAYS the same height, regardless of how much text each category has. */\n  grid-template-rows: auto !important;\n  min-height: 0 !important;\n  align-self: stretch;\n}\n/* The whole card is an <a> wrapping the content. Clear the tiles layout's\n   min-height: calc(310px - 1rem), and let the link fill the (stretched) card so\n   the whole card is clickable and equal-height across the row. */\n.theme-overrides .hs-kb-home-list__category > .hs-kb-home-list__category-link {\n  display: block;\n  height: 100%;\n  min-height: 0 !important;\n}\n.theme-overrides .hs-kb-home-list__text { align-items: flex-start; text-align: left; }\n.theme-overrides .hs-kb-home-list__category,\n.theme-overrides .hs-kb-home-list__text__category-title,\n.theme-overrides .hs-kb-home-list__text__category-description,\n.theme-overrides .hs-kb-home-list__text__category-link { text-align: left; }\n.theme-overrides .hs-kb-home-list__category:hover {\n  transform: translateY(-3px);\n  border-color: var(--autrix-cyan);\n  box-shadow: 0 12px 28px rgba(7, 39, 46, 0.10);\n}\n/* Gradient icon chip */\n.theme-overrides .hs-kb-home-list__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  margin-bottom: 16px;\n  border-radius: 11px;\n  background: var(--autrix-gradient);\n}\n.theme-overrides .hs-kb-home-list__icon svg,\n.theme-overrides .hs-kb-home-list__icon-svg {\n  width: 22px;\n  height: 22px;\n  fill: #FFFFFF;\n  color: #FFFFFF;\n}\n/* Text */\n.theme-overrides .hs-kb-home-list__text { gap: 6px; }\n.theme-overrides .hs-kb-home-list__text__category-title {\n  font-family: \"Onest\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--autrix-dark);\n  line-height: 1.35;\n}\n.theme-overrides .hs-kb-home-list__text__category-description {\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 13px;\n  line-height: 1.55;\n  color: var(--autrix-muted);\n}\n/* \"N articles\" link ‚Äî teal (no cyan text on white, per brand) */\n.theme-overrides .hs-kb-home-list__text__category-link {\n  color: var(--autrix-teal);\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 13px;\n  font-weight: 600;\n  padding-top: 4px;\n}\n@media (max-width: 600px) {\n  /* Stack the cards full-width, one per row (Figma mobile design). The tiles\n     layout caps each card at max-width:30% which keeps them 2-3 up ‚Äî clear it\n     and force a full-width flex basis so each card takes its own row. */\n  .theme-overrides .hs-kb-home-list__category {\n    min-width: 0;\n    width: 100%;\n    max-width: none !important;\n    flex: 1 1 100% !important;\n  }\n  /* A touch more height so the stacked cards read like the Figma cards. */\n  .theme-overrides .hs-kb-home-list__category > .hs-kb-home-list__category-link {\n    min-height: 120px !important;\n  }\n}\n\n/* Tablet: let the cards fill the row 2-up like the Figma tablet design. The\n   tiles layout caps each card at max-width:30%, which on tablet leaves them\n   narrow with large side gutters. Scoped to the tablet band so the desktop\n   centred cards (>1024px) and the <=600px single-column stack are untouched. */\n@media (min-width: 601px) and (max-width: 1024px) {\n  .theme-overrides .hs-kb-home-list { max-width: 900px; }\n  .theme-overrides .hs-kb-home-list__category {\n    max-width: none !important;\n    flex: 1 1 0 !important;\n  }\n}\n\n/* --- Links / article rows --------------------------------------------------- */\n.theme-overrides a { color: var(--autrix-dark); }\n.theme-overrides a:hover { color: var(--autrix-teal); }\n.theme-overrides .hs-kb-home-list a:hover { color: var(--autrix-teal); }\n\n/* --- Category page (sidebar nav + article list) -----------------------------\n   The category page (e.g. /general) is a sidebar of category links + a main\n   column listing that category's articles. Stock styling is plain; this brands\n   the breadcrumb, makes the sidebar rounded hover/active rows (gradient active\n   accent), and turns the article links into clean hover cards with a doc icon +\n   chevron. The content wrapper is flex row-reverse (sidebar left, content\n   right). Selectors verified on the live category DOM (2026-06-10). */\n\n/* Layout: centre breadcrumb + content at a shared max width so they align.\n   Widened to 1320px (was 1120) per customer feedback ‚Äî the article/category\n   content column was only ~686px (sidebar 248 + gap 48 ate a 1120 cap), too\n   narrow for wide content (tables, diagrams). At 1320 the content column is\n   ~940px. !important beats the stock-KB/theme-editor content-width default.\n   NOTE (2026-07-06): the breadcrumb + sidebar wrappers are BOTH nested inside\n   .hs-kb-content-wrapper--responsive-spacing, whose stock max-width is 1000px.\n   That parent cap silently squeezed the whole column to ~1000px (article body\n   stayed ~659px) no matter what the children asked for. So the parent MUST be\n   widened too ‚Äî its only children here are the two already-capped-at-1320\n   wrappers, and the home grid has its own centred 1240 cap, so this is safe. */\n.theme-overrides .hs-kb-content-wrapper--responsive-spacing {\n  max-width: 1320px !important;\n}\n.theme-overrides .hs-kb-breadcrumb-container {\n  max-width: 1320px !important;\n  margin: 0 auto;\n  padding: 24px 24px 4px;\n}\n.theme-overrides .hs-kb-content-wrapper--sidebar {\n  max-width: 1320px !important;\n  margin: 0 auto;\n  gap: 44px;\n  align-items: flex-start;\n  padding: 8px 24px 56px;\n}\n\n/* Breadcrumb */\n.theme-overrides .hs-kb-breadcrumbs {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 13px;\n  color: var(--autrix-muted);\n}\n.theme-overrides .hs-kb-breadcrumb_item { display: inline-flex; align-items: center; gap: 6px; }\n.theme-overrides .hs-kb-breadcrumbs a { color: var(--autrix-muted); text-decoration: none; transition: color 0.15s ease; }\n.theme-overrides .hs-kb-breadcrumbs a:hover { color: var(--autrix-teal); }\n.theme-overrides .hs-kb-breadcrumb_item:last-child { color: var(--autrix-dark); font-weight: 600; }\n\n/* Sidebar nav: rounded rows, \"Categories\" label, gradient active accent */\n.theme-overrides .hs-kb-sidebar { width: 248px; border-right: 0; padding: 0; }\n.theme-overrides .hs-kb-category_accordion_nav_list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.theme-overrides .hs-kb-category_accordion_nav_list::before {\n  content: \"Categories\";\n  display: block;\n  margin-bottom: 12px;\n  font-family: \"Onest\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--autrix-muted);\n}\n.theme-overrides .hs-kb-category_accordion_nav_list_item { margin: 0; border-radius: 10px; }\n.theme-overrides .hs-kb-category-accordion_link {\n  display: block;\n  padding: 10px 14px;\n  border-radius: 10px;\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 15px;\n  font-weight: 500;\n  color: var(--autrix-muted);\n  text-decoration: none;\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n.theme-overrides .hs-kb-category-accordion_link:hover {\n  background: rgba(0, 81, 84, 0.06);\n  color: var(--autrix-teal);\n}\n/* Active state (the --active class sits on the <li>) */\n.theme-overrides .hs-kb-category-accordion_link--active {\n  position: relative;\n  background: rgba(0, 81, 84, 0.08);\n  border-radius: 10px;\n}\n.theme-overrides .hs-kb-category-accordion_link--active .hs-kb-category-accordion_link {\n  color: var(--autrix-dark);\n  font-weight: 600;\n  background: transparent;\n}\n.theme-overrides .hs-kb-category-accordion_link--active::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 8px;\n  bottom: 8px;\n  width: 3px;\n  border-radius: 3px;\n  background: var(--autrix-gradient);\n}\n\n/* Sub-categories (nested under a parent category) --------------------------\n   HubSpot renders sub-categories as a nested <ul>.hs-kb-category_accordion_nav_list\n   inside the parent's ...--has-children <li>. Two stock problems (customer flagged\n   the sidebar looked \"messy\"): (1) the nested list re-inherited the \"Categories\"\n   ::before label from the rule above, so \"CATEGORIES\" appeared twice; (2) the\n   parent's --active background/accent sat on the whole <li>, so it boxed in the\n   nested sub-items too. Fix: kill the duplicate label, move the active highlight\n   onto just the parent link row (.hs-kb-anchor_toggle), and give the nested list\n   a clean indented tree with a connector line. */\n\n/* 1. No duplicate \"Categories\" label on nested lists */\n.theme-overrides .hs-kb-category_accordion_nav_list .hs-kb-category_accordion_nav_list::before {\n  content: none;\n}\n/* 2. Parent with sub-categories: don't box the whole <li> (which contains the\n   nested list); the highlight moves to the parent link row below. */\n.theme-overrides .hs-kb-category_accordion_nav_list_item--has-children.hs-kb-category-accordion_link--active {\n  background: transparent;\n}\n.theme-overrides .hs-kb-category_accordion_nav_list_item--has-children.hs-kb-category-accordion_link--active::before {\n  content: none;\n}\n/* Highlight + gradient accent on just the parent link row */\n.theme-overrides .hs-kb-anchor_toggle {\n  position: relative;\n  border-radius: 10px;\n}\n.theme-overrides .hs-kb-anchor_toggle--active {\n  background: rgba(0, 81, 84, 0.08);\n}\n.theme-overrides .hs-kb-anchor_toggle--active::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 8px;\n  bottom: 8px;\n  width: 3px;\n  border-radius: 3px;\n  background: var(--autrix-gradient);\n}\n.theme-overrides .hs-kb-anchor_toggle--active .hs-kb-category-accordion_link {\n  color: var(--autrix-dark);\n  font-weight: 600;\n  background: transparent;\n}\n/* 3. Nested sub-category list: indented tree with a connector line, tighter rows */\n.theme-overrides .hs-kb-category_accordion_nav_list .hs-kb-category_accordion_nav_list {\n  margin: 4px 0 4px 13px;\n  padding-left: 11px;\n  border-left: 1px solid var(--autrix-border);\n  gap: 2px;\n}\n.theme-overrides .hs-kb-category_accordion_nav_list .hs-kb-category_accordion_nav_list .hs-kb-category-accordion_link {\n  font-size: 14px;\n  padding: 7px 12px;\n}\n\n/* Main column: category title */\n.theme-overrides .hs-kb-content { padding-top: 4px; }\n\n/* Search-results page: HubSpot stock two-column layout gives .hs-kb-content an\n   explicit desktop column width that does not collapse on mobile, spilling ~4px past\n   the viewport at ~390px. Cap it to the container. No-op on desktop. */\n.theme-overrides .hs-kb-content { max-width: 100%; min-width: 0; }\n.theme-overrides .hs-kb-category-listing > h1 {\n  font-family: \"Onest\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 28px;\n  font-weight: 600;\n  letter-spacing: -0.5px;\n  color: var(--autrix-dark);\n  margin: 0 0 4px;\n}\n\n/* Article list -> clean hover cards with a doc icon + chevron */\n.theme-overrides .hs-kb-category-article-list {\n  list-style: none;\n  margin: 22px 0 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  border: 0;\n}\n.theme-overrides .hs-kb-category-article-list::before {\n  content: \"Articles\";\n  font-family: \"Onest\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--autrix-muted);\n  margin-bottom: 2px;\n}\n.theme-overrides .hs-kb-category-article-list li { margin: 0; border: 0; }\n.theme-overrides .hs-kb-category-article-list__link {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 15px 18px;\n  border: 1px solid var(--autrix-border);\n  border-radius: 12px;\n  background: #FFFFFF;\n  color: var(--autrix-dark);\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 1.4;\n  text-decoration: none;\n  box-shadow: 0 1px 2px rgba(7, 39, 46, 0.04);\n  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;\n}\n.theme-overrides .hs-kb-category-article-list__link::before {\n  content: \"\";\n  flex: none;\n  width: 20px;\n  height: 20px;\n  background-color: var(--autrix-teal);\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%203h6l4%204v13a1%201%200%200%201-1%201H8a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1z'/%3E%3Cpath%20d='M14%203v4h4'/%3E%3Cpath%20d='M9.5%2012h7M9.5%2015.5h5'/%3E%3C/svg%3E\") no-repeat center / contain;\n  mask: url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%203h6l4%204v13a1%201%200%200%201-1%201H8a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1z'/%3E%3Cpath%20d='M14%203v4h4'/%3E%3Cpath%20d='M9.5%2012h7M9.5%2015.5h5'/%3E%3C/svg%3E\") no-repeat center / contain;\n}\n.theme-overrides .hs-kb-category-article-list__link::after {\n  content: \"\";\n  flex: none;\n  margin-left: auto;\n  width: 18px;\n  height: 18px;\n  background-color: #9AA9B0;\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%206l6%206-6%206'/%3E%3C/svg%3E\") no-repeat center / contain;\n  mask: url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%206l6%206-6%206'/%3E%3C/svg%3E\") no-repeat center / contain;\n  transition: transform 0.16s ease, background-color 0.16s ease;\n}\n.theme-overrides .hs-kb-category-article-list__link:hover {\n  border-color: var(--autrix-cyan);\n  box-shadow: 0 10px 24px rgba(7, 39, 46, 0.09);\n  transform: translateY(-1px);\n  color: var(--autrix-dark);\n}\n.theme-overrides .hs-kb-category-article-list__link:hover::after {\n  background-color: var(--autrix-teal);\n  transform: translateX(3px);\n}\n\n@media (max-width: 768px) {\n  .theme-overrides .hs-kb-content-wrapper--sidebar { gap: 28px; padding: 8px 20px 40px; }\n  .theme-overrides .hs-kb-sidebar { width: 100%; }\n}\n\n/* --- Header button (\"Submit a request\") -------------------------------------\n   Pixel-matched to the autrix.co.uk primary button (computed from their live\n   site): DM Sans 16px/400, line-height 24px, #07272E bg, white text, 10px 32px\n   padding, 1px transparent border (=> 46px tall), fully-rounded pill, 12px gap,\n   and a trailing right-arrow (their exact SVG path) as a currentColor mask.\n   Hover mirrors their behaviour: brand gradient fill + dark text. */\n.theme-overrides .header__button,\n.theme-overrides .header__menu-item--button > a {\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  background: var(--autrix-dark) !important;\n  background-image: none !important;\n  color: #FFFFFF !important;\n  border: 1px solid transparent !important;\n  border-radius: 9999px !important;\n  padding: 10px 32px !important;\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif !important;\n  font-size: 16px !important;\n  font-weight: 400 !important;\n  line-height: 1.5 !important;\n  white-space: nowrap;\n  text-decoration: none;\n  transition: background-color 0.2s ease, background-image 0.2s ease, color 0.2s ease, border-color 0.2s ease;\n}\n/* Trailing right-arrow ‚Äî autrix's exact path, drawn as a currentColor mask */\n.theme-overrides .header__button::after,\n.theme-overrides .header__menu-item--button > a::after {\n  content: \"\";\n  flex: none;\n  width: 24px;\n  height: 14px;\n  background-color: currentColor;\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2014'%20fill='none'%20stroke='%23000'%20stroke-width='1'%20stroke-linejoin='bevel'%3E%3Cpath%20d='M17%201L23%207M23%207L17%2013M23%207H1'/%3E%3C/svg%3E\") no-repeat center / contain;\n  mask: url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2014'%20fill='none'%20stroke='%23000'%20stroke-width='1'%20stroke-linejoin='bevel'%3E%3Cpath%20d='M17%201L23%207M23%207L17%2013M23%207H1'/%3E%3C/svg%3E\") no-repeat center / contain;\n}\n.theme-overrides .header__button:hover,\n.theme-overrides .header__menu-item--button > a:hover {\n  background-color: transparent !important;\n  background-image: var(--autrix-gradient) !important;\n  color: var(--autrix-dark) !important;\n  border-color: transparent !important;\n}\n\n/* --- Logo sizing ------------------------------------------------------------\n   The logo image ships at 72px tall (width/height attrs on the <img>). That\n   reads too large in both the header and footer, so cap the height and let the\n   width scale with the aspect ratio. CSS height overrides the HTML attribute.\n\n   CRITICAL: the KB \"Page not found\"/\"Uh-Oh\" error page (and other fallbacks)\n   render the full MARKETING-SITE header instead of the clean KB header. There the\n   logo <img> has no size constraint and ballooned to ~1228px wide (customer\n   flagged the Uh-Oh page as \"not working\"). These selectors cover every header\n   logo variant so the cap always wins; max-width is a belt-and-braces guard. */\n.theme-overrides .header__logo-image,\n.theme-overrides .header__logo img,\n.theme-overrides .header__logo .hs-image-widget,\n.theme-overrides .header__logo-col img {\n  height: 40px !important;\n  width: auto !important;\n  max-width: 220px !important;\n}\n.theme-overrides .footer__bottom--left img,\n.theme-overrides .footer__bottom--left .hs-image-widget {\n  height: 36px !important;\n  width: auto !important;\n}\n\n/* --- Footer ----------------------------------------------------------------- */\n.theme-overrides .footer__bottom {\n  color: var(--autrix-muted);\n  font-size: 12px;\n}\n\n/* --- Footer social icons ----------------------------------------------------\n   The theme renders each social link (.hs-kb-social_follow__link) as a circle\n   filled with var(--social-follow-background-color) ‚Äî a muddy grey ‚Äî and the\n   inline <svg> inherits a dark fill (worsened by our generic `a { color }`\n   rule), so the icons read as dark-on-dark. Give the circles a brand teal fill\n   with white icons, and a cyan hover. fill is forced to beat currentColor. */\n.theme-overrides .hs-kb-social_follow__link {\n  background-color: var(--autrix-teal) !important;\n  transition: background-color 0.15s ease;\n}\n.theme-overrides .hs-kb-social_follow__link:hover {\n  background-color: var(--autrix-cyan) !important;\n}\n.theme-overrides .hs-kb-social_follow__link svg {\n  fill: #FFFFFF !important;\n}\n.theme-overrides .hs-kb-social_follow__link:hover svg {\n  fill: var(--autrix-dark) !important;\n}\n\n/* --- Footer: polished light -------------------------------------------------\n   Gradient top accent, a tidy 4-col link grid with an animated gradient\n   underline on hover, a divider before the bottom row, and a subtle social\n   lift. Keeps the white footer (customer prefers light). */\n.theme-overrides .footer {\n  position: relative;\n  border-top: 1px solid var(--autrix-border);\n  background-color: #F3F6F7; /* subtle brand-light tint to separate from white content */\n}\n.theme-overrides .footer::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: var(--autrix-gradient);\n}\n\n/* Menu: 3 grouped columns (Company / Support / Legal) via explicit grid\n   placement of the flat link list + CSS-inserted group headings.\n   IMPORTANT: this mapping assumes the menu item order is:\n     1 Your challenges, 2 Solutions, 3 About, 4 Blog, 5 Case studies,\n     6 Contact, 7 Cookie Policy, 8 Customer Support, 9 Ethics & Conduct,\n     10 Privacy Policy, 11 Terms of Service.\n   If the footer nav menu order changes, update these nth-child rules. */\n.theme-overrides .footer__menu {\n  display: grid;\n  grid-template-columns: repeat(3, max-content);\n  justify-content: center;\n  align-items: start;\n  column-gap: 72px;\n  row-gap: 14px;\n  max-width: 840px;\n  margin: 0 auto;\n  padding: 46px 24px 40px;\n}\n.theme-overrides .footer__menu-item {\n  margin: 0;\n  padding: 0;\n  text-align: left;\n}\n/* Column 1 ‚Äî Company */\n.theme-overrides .footer__menu-item:nth-child(1) { grid-column: 1; grid-row: 1; }\n.theme-overrides .footer__menu-item:nth-child(2) { grid-column: 1; grid-row: 2; }\n.theme-overrides .footer__menu-item:nth-child(3) { grid-column: 1; grid-row: 3; }\n.theme-overrides .footer__menu-item:nth-child(4) { grid-column: 1; grid-row: 4; }\n.theme-overrides .footer__menu-item:nth-child(5) { grid-column: 1; grid-row: 5; }\n/* Column 2 ‚Äî Support (Contact + Customer Support) */\n.theme-overrides .footer__menu-item:nth-child(6) { grid-column: 2; grid-row: 1; }\n.theme-overrides .footer__menu-item:nth-child(8) { grid-column: 2; grid-row: 2; }\n/* Column 3 ‚Äî Legal (Cookie + Ethics + Privacy + Terms) */\n.theme-overrides .footer__menu-item:nth-child(7) { grid-column: 3; grid-row: 1; }\n.theme-overrides .footer__menu-item:nth-child(9) { grid-column: 3; grid-row: 2; }\n.theme-overrides .footer__menu-item:nth-child(10) { grid-column: 3; grid-row: 3; }\n.theme-overrides .footer__menu-item:nth-child(11) { grid-column: 3; grid-row: 4; }\n/* Group headings ‚Äî inserted on the first item of each column */\n.theme-overrides .footer__menu-item:nth-child(1)::before,\n.theme-overrides .footer__menu-item:nth-child(6)::before,\n.theme-overrides .footer__menu-item:nth-child(7)::before {\n  display: block;\n  margin-bottom: 12px;\n  font-family: \"Onest\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--autrix-dark);\n}\n.theme-overrides .footer__menu-item:nth-child(1)::before { content: \"Company\"; }\n.theme-overrides .footer__menu-item:nth-child(6)::before { content: \"Support\"; }\n.theme-overrides .footer__menu-item:nth-child(7)::before { content: \"Legal\"; }\n\n/* Links: muted -> teal on hover, with an animated gradient underline.\n   (No cyan text on white, per brand: hover colour is teal.) */\n.theme-overrides .footer__menu-link,\n.theme-overrides .footer__menu-item--depth-1 > .footer__menu-link:first-child {\n  position: relative;\n  display: inline-block;\n  line-height: 1.4;\n  padding: 1px 0;\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--autrix-muted);\n  text-decoration: none;\n  transition: color 0.18s ease;\n}\n.theme-overrides .footer__menu-link::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  bottom: -1px;\n  width: 100%;\n  height: 2px;\n  border-radius: 2px;\n  background: var(--autrix-gradient);\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 0.22s ease;\n}\n.theme-overrides .footer__menu-link:hover {\n  color: var(--autrix-teal);\n}\n.theme-overrides .footer__menu-link:hover::after {\n  transform: scaleX(1);\n}\n\n/* Bottom row: divider + breathing room.\n   padding-bottom is generous so the fixed \"Back to top\" pill (bottom-right,\n   ~34px tall at bottom:24px) never overlaps the copyright line when scrolled\n   to the very bottom of the page. */\n.theme-overrides .footer__bottom {\n  border-top: 1px solid var(--autrix-border);\n  padding-top: 30px;\n  padding-bottom: 72px;\n}\n\n/* Social icons: subtle lift on hover (colours set in the section above) */\n.theme-overrides .hs-kb-social_follow__link {\n  transition: background-color 0.15s ease, transform 0.15s ease;\n}\n.theme-overrides .hs-kb-social_follow__link:hover {\n  transform: translateY(-2px);\n}\n\n@media (max-width: 700px) {\n  /* Stack the groups vertically. DOM order interleaves Support/Legal, so use\n     flex + order to keep each group's links together under its heading. */\n  .theme-overrides .footer__menu {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 12px;\n    max-width: 320px;\n    margin: 0 auto;\n    padding: 34px 20px 30px;\n  }\n  .theme-overrides .footer__menu-item:nth-child(1) { order: 1; }\n  .theme-overrides .footer__menu-item:nth-child(2) { order: 2; }\n  .theme-overrides .footer__menu-item:nth-child(3) { order: 3; }\n  .theme-overrides .footer__menu-item:nth-child(4) { order: 4; }\n  .theme-overrides .footer__menu-item:nth-child(5) { order: 5; }\n  .theme-overrides .footer__menu-item:nth-child(6) { order: 6; }\n  .theme-overrides .footer__menu-item:nth-child(8) { order: 7; }\n  .theme-overrides .footer__menu-item:nth-child(7) { order: 8; }\n  .theme-overrides .footer__menu-item:nth-child(9) { order: 9; }\n  .theme-overrides .footer__menu-item:nth-child(10) { order: 10; }\n  .theme-overrides .footer__menu-item:nth-child(11) { order: 11; }\n  .theme-overrides .footer__menu-item:nth-child(6)::before,\n  .theme-overrides .footer__menu-item:nth-child(7)::before { margin-top: 18px; }\n}\n\n/* --- Back to top button -----------------------------------------------------\n   Floating pill, bottom-right. Created + toggled by the small script appended\n   after this stylesheet in the KB header-HTML field (source: js/kb-back-to-top.js).\n   Fades in after scrolling; smooth-scrolls to top. Not scoped to .theme-overrides\n   because it's appended to <body> with a unique id. */\n#autrix-back-to-top {\n  position: fixed;\n  right: 24px;\n  bottom: 24px;\n  z-index: 9999;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  border: 0;\n  border-radius: 999px;\n  background: #07272E;\n  color: #FFFFFF;\n  font-family: \"Onest\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1;\n  cursor: pointer;\n  box-shadow: 0 8px 24px rgba(7, 39, 46, 0.25);\n  opacity: 0;\n  transform: translateY(12px);\n  pointer-events: none;\n  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s ease;\n}\n#autrix-back-to-top.is-visible {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n#autrix-back-to-top:hover {\n  background: #005154;\n}\n#autrix-back-to-top svg {\n  width: 14px;\n  height: 14px;\n}\n@media (max-width: 600px) {\n  #autrix-back-to-top {\n    right: 16px;\n    bottom: 16px;\n    padding: 10px 14px;\n  }\n  #autrix-back-to-top span {\n    display: none; /* icon-only on small screens to stay out of the way */\n  }\n}\n\n/* --- Mobile \"Submit a request\" CTA ------------------------------------------\n   On mobile the header button is tucked inside the hamburger, so there's no\n   visible call to action. The companion script (js/kb-mobile-cta.js) clones\n   that button into a full-width dark pill placed right below the hero, matching\n   the Figma mobile design. Hidden above 700px. Not scoped to .theme-overrides\n   because the script inserts it as a sibling of the hero. Uses literal hex (the\n   --autrix-* vars are scoped to .theme-overrides). Arrow = same path as header. */\n.autrix-mobile-cta { display: none; }\n@media (max-width: 700px) {\n  .autrix-mobile-cta {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    width: calc(100% - 40px);\n    margin: 20px auto 4px;\n    box-sizing: border-box;\n    background: #07272E;\n    /* !important: the generic `.theme-overrides a { color: dark }` rule has higher\n       specificity and would otherwise render the label dark-on-dark (invisible). */\n    color: #FFFFFF !important;\n    border: 1px solid transparent;\n    border-radius: 9999px;\n    padding: 13px 28px;\n    font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n    font-size: 15px;\n    font-weight: 400;\n    line-height: 1.4;\n    text-decoration: none;\n    transition: background-color 0.2s ease, color 0.2s ease;\n  }\n  .autrix-mobile-cta::after {\n    content: \"\";\n    flex: none;\n    width: 22px;\n    height: 13px;\n    background-color: currentColor;\n    -webkit-mask: url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2014'%20fill='none'%20stroke='%23000'%20stroke-width='1'%20stroke-linejoin='bevel'%3E%3Cpath%20d='M17%201L23%207M23%207L17%2013M23%207H1'/%3E%3C/svg%3E\") no-repeat center / contain;\n    mask: url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2014'%20fill='none'%20stroke='%23000'%20stroke-width='1'%20stroke-linejoin='bevel'%3E%3Cpath%20d='M17%201L23%207M23%207L17%2013M23%207H1'/%3E%3C/svg%3E\") no-repeat center / contain;\n  }\n  .autrix-mobile-cta:active { background: #005154; }\n}\n\n/* --- Accessibility: visible cyan focus ring --------------------------------- */\n.theme-overrides a:focus-visible,\n.theme-overrides button:focus-visible,\n.theme-overrides input:focus-visible {\n  outline: 2px solid var(--autrix-cyan);\n  outline-offset: 2px;\n}\n.theme-overrides .hs-search-field__input:focus-visible { outline: none; }\n\n/* --- Accessibility: screen-reader-only <h1> (QA 2026-07-01) ------------------\n   The KB home ships no <h1> (headings start at h3). js/kb-a11y.js injects one\n   with this class so screen readers + search engines get a page-level heading\n   without changing the visible design. */\n.theme-overrides .autrix-sr-h1 {\n  position: absolute !important;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n</style> \n<script>\n/* Autrix Help Portal ‚Äî floating \"Back to top\" button.\n   Appended to <body>; styled by #autrix-back-to-top in kb-overrides.css.\n   Injected (wrapped in <script>) after the <style> block in the KB\n   header-HTML field. Self-contained, no dependencies. */\n(function () {\n  function init() {\n    if (document.getElementById('autrix-back-to-top')) return;\n    var b = document.createElement('button');\n    b.id = 'autrix-back-to-top';\n    b.type = 'button';\n    b.setAttribute('aria-label', 'Back to top');\n    b.innerHTML =\n      '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" ' +\n      'stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">' +\n      '<path d=\"M12 19V5M5 12l7-7 7 7\"/></svg><span>Back to top</span>';\n    b.addEventListener('click', function () {\n      window.scrollTo({ top: 0, behavior: 'smooth' });\n    });\n    document.body.appendChild(b);\n    function toggle() {\n      var y = window.scrollY || document.documentElement.scrollTop;\n      b.classList.toggle('is-visible', y > 400);\n    }\n    window.addEventListener('scroll', toggle, { passive: true });\n    toggle();\n  }\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    init();\n  }\n})();\n\n/* Autrix Help Portal ‚Äî repoint the header \"Submit a request\" CTA.\n   The customer portal is switched OFF, so the button's default /requests link\n   404s (lands on the \"Uh-Oh\" page). Until the portal is enabled, send the button\n   to the support inbox instead. The label stays \"Submit a request\".\n   Loaded from BOTH injections: the KB header-HTML block (covers KB home/category/\n   article pages) AND the help.autrix.co.uk Site header HTML (covers the 404 /\n   \"Uh-Oh\" page, which the KB header-HTML does not reach). The site-header does NOT\n   reliably load on KB pages, so the KB-header copy is required for those.\n   Idempotent + retried, so it is safe to run more than once / alongside anything\n   else. Swap DEST for a support-form URL if/when one is set up. */\n\n</script> \n<meta property=\"og:url\" content=\"https://help.autrix.co.uk/hs/portals/customer-portal-app/brand\"> \n<meta http-equiv=\"content-language\" content=\"en-gb\">","footerHtml":"<!-- HubSpot performance collection script --> \n<script defer src=\"/hs/hsstatic/content-cwv-embed/static-1.1293/embed.js\"></script> \n<!-- Start of HubSpot Analytics Code --> \n<script type=\"text/javascript\">\nvar _hsq = _hsq || [];\n_hsq.push([\"setContentType\", \"app-page\"]);\n_hsq.push([\"setCanonicalUrl\", \"https:\\/\\/help.autrix.co.uk\\/hs\\/portals\\/customer-portal-app\\/brand\"]);\n_hsq.push([\"setPageId\", \"414309391597\"]);\n_hsq.push([\"setContentMetadata\", {\n    \"contentPageId\": 414309391597,\n    \"legacyPageId\": \"414309391597\",\n    \"contentFolderId\": null,\n    \"contentGroupId\": null,\n    \"abTestId\": null,\n    \"languageVariantId\": 414309391597,\n    \"languageCode\": \"en-gb\",\n    \n    \n}]);\n</script> \n<script type=\"text/javascript\" id=\"hs-script-loader\" async defer src=\"/hs/scriptloader/145397951.js\"></script> \n<!-- End of HubSpot Analytics Code --> \n<script type=\"text/javascript\">\nvar hsVars = {\n    render_id: \"0b0d56ad-0bc3-4d74-82a0-bbdaacb62209\",\n    ticks: 1787645718725,\n    page_id: 414309391597,\n    \n    content_group_id: 0,\n    portal_id: 145397951,\n    app_hs_base_url: \"https://app-eu1.hubspot.com\",\n    cp_hs_base_url: \"https://cp-eu1.hubspot.com\",\n    language: \"en-gb\",\n    analytics_page_type: \"app-page\",\n    scp_content_type: \"\",\n    \n    analytics_page_id: \"414309391597\",\n    category_id: 20,\n    folder_id: 0,\n    is_hubspot_user: false\n}\n</script> \n<script defer src=\"/hs/hsstatic/HubspotToolsMenu/static-1.640/js/index.js\"></script>","headElements":[{"tag":"meta","attributes":{"name":"viewport","content":"width=device-width, initial-scale=1"}},{"tag":"meta","attributes":{"property":"og:description","content":""}},{"tag":"meta","attributes":{"property":"og:title","content":""}},{"tag":"meta","attributes":{"name":"twitter:description","content":""}},{"tag":"meta","attributes":{"name":"twitter:title","content":""}},{"tag":"style","children":[{"tag":"#text","text":"a.cta_button{-moz-box-sizing:content-box !important;-webkit-box-sizing:content-box !important;box-sizing:content-box !important;vertical-align:middle}.hs-breadcrumb-menu{list-style-type:none;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px}.hs-breadcrumb-menu-item{float:left;padding:10px 0px 10px 10px}.hs-breadcrumb-menu-divider:before{content:'›';padding-left:10px}.hs-featured-image-link{border:0}.hs-featured-image{float:right;margin:0 0 20px 20px;max-width:50%}@media (max-width: 568px){.hs-featured-image{float:none;margin:0;width:100%;max-width:100%}}.hs-screen-reader-text{clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute !important;width:1px}"}]},{"tag":"style","children":[{"tag":"#text","text":"@font-face {\n    font-family: \"Onest\";\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n    src: url(\"/_hcms/googlefonts/Onest/regular.woff2\") format(\"woff2\"), url(\"/_hcms/googlefonts/Onest/regular.woff\") format(\"woff\");\n  }\n  @font-face {\n    font-family: \"Onest\";\n    font-weight: 700;\n    font-style: normal;\n    font-display: swap;\n    src: url(\"/_hcms/googlefonts/Onest/700.woff2\") format(\"woff2\"), url(\"/_hcms/googlefonts/Onest/700.woff\") format(\"woff\");\n  }\n  @font-face {\n    font-family: \"DM Sans\";\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n    src: url(\"/_hcms/googlefonts/DM_Sans/regular.woff2\") format(\"woff2\"), url(\"/_hcms/googlefonts/DM_Sans/regular.woff\") format(\"woff\");\n  }\n  @font-face {\n    font-family: \"DM Sans\";\n    font-weight: 700;\n    font-style: normal;\n    font-display: swap;\n    src: url(\"/_hcms/googlefonts/DM_Sans/700.woff2\") format(\"woff2\"), url(\"/_hcms/googlefonts/DM_Sans/700.woff\") format(\"woff\");\n  }"}]},{"tag":"link","attributes":{"rel":"canonical","href":"https://help.autrix.co.uk/hs/portals/customer-portal-app/brand"}},{"tag":"link","attributes":{"rel":"preconnect","href":"https://fonts.googleapis.com"}},{"tag":"link","attributes":{"crossorigin":"","rel":"preconnect","href":"https://fonts.gstatic.com"}},{"tag":"link","attributes":{"rel":"stylesheet","href":"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Onest:wght@400;500;600;700&display=swap"}},{"tag":"style","children":[{"tag":"#text","text":"/* ============================================================================\n   Autrix Help Portal ‚Äî Knowledge Base CSS overrides\n   ----------------------------------------------------------------------------\n   WHY THIS FILE EXISTS\n   HubSpot's Knowledge Base does NOT use CMS themes and cannot be assigned a\n   custom local theme (confirmed: the stock @hubspot/cms-knowledge-base-theme is\n   not exposed in Design Manager and cannot be cloned/fetched). The only code\n   lever HubSpot exposes for the KB is a custom header-HTML field\n   (Service > Knowledge Base settings > Template tab).\n\n   This file is the SOURCE OF TRUTH for those overrides. Edit it here, keep it\n   in the repo, then paste its contents (wrapped in a style tag) into the\n   KB custom header-HTML field. It layers on top of the theme-editor settings\n   (teal hero #005154, cyan accent, Onest/DM Sans, grid layout) already\n   published on the Help Portal theme.\n\n   All rules are scoped under `.theme-overrides` (a class HubSpot puts on the KB\n   <body> and wrapper) so nothing here can affect other HubSpot content.\n   Selectors verified against the live DOM of https://help.autrix.co.uk on\n   2026-06-09. Card rules are conservative because the KB has no categories yet.\n   ============================================================================ */\n\n/* Brand tokens (mirrors src/input.css @theme) */\n.theme-overrides {\n  --autrix-dark:   #07272E;\n  --autrix-cyan:   #00C4E9;\n  --autrix-green:  #00C48D;\n  --autrix-purple: #9C7DDE;\n  --autrix-teal:   #005154;\n  --autrix-border: #E6EBED;\n  --autrix-muted:  #5A6B72;\n  --autrix-gradient: linear-gradient(125deg, #00C48D 5%, #00C4E9 40%, #9C7DDE 95%);\n}\n\n/* --- Typography -------------------------------------------------------------\n   The theme editor already maps Onest (headings) + DM Sans (body). These rules\n   are a safety net so headings stay on Onest even if a setting is reset. */\n.theme-overrides h1,\n.theme-overrides h2,\n.theme-overrides h3,\n.theme-overrides .hs-search-field__label {\n  font-family: \"Onest\", ui-sans-serif, system-ui, sans-serif;\n  letter-spacing: -0.5px;\n}\n.theme-overrides body,\n.theme-overrides p,\n.theme-overrides li,\n.theme-overrides a {\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n}\n\n/* --- Hero band + heading ----------------------------------------------------\n   .hs-kb-search-input-wrapper is the teal hero. The big \"How can we help you?\"\n   line is rendered as the search <label> (.hs-search-field__label). */\n.theme-overrides .hs-kb-search-input-wrapper {\n  position: relative;\n  /* overflow MUST stay visible: the search autocomplete dropdown\n     (.hs-search-field__suggestions) overlays downward past the band and would\n     be clipped by overflow:hidden. The line-art below is a CSS background, which\n     is always clipped to the element box regardless, so it stays contained.\n     z-index lifts the whole hero (and the overflowing dropdown) above the\n     category cards, which come later in the DOM. */\n  overflow: visible;\n  z-index: 5;\n  padding-top: 64px;\n  padding-bottom: 64px;\n  /* Brand line-art (gradient curves + circles) as a responsive background.\n     Inline SVG data-URI sits behind the heading/search; scales with the band\n     height and anchors to the right edge. Clipped to the band by the background\n     painting area (background-size:auto 170% just scales it; the overflow is\n     not painted), so no overflow:hidden is needed. */\n  background-image: url(\"data:image/svg+xml,%3Csvg%20width='100%25'%20height='100%25'%20viewBox='0%200%204335%203903'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20style='fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;'%3E%20%3Cg%20opacity='0.5'%20transform='matrix(1,0,0,1,-124.58521,-340.526036)'%3E%20%3Cg%20transform='matrix(4.166667,0,0,4.166667,0,0)'%3E%20%3Cg%20transform='matrix(1,0,0,1,652.6801,496.461)'%3E%20%3Cpath%20d='M0,113.083C32.741,56.375%2013.311,-16.138%20-43.398,-48.878C-100.106,-81.619%20-172.618,-62.189%20-205.358,-5.481C-238.099,51.227%20-218.67,123.74%20-161.961,156.48C-105.253,189.221%20-32.741,169.791%200,113.083ZM-293.574,264.43L-341.344,264.43C-397.415,264.428%20-432.46,203.729%20-404.425,155.168L-380.542,113.798C-345.642,53.345%20-370,-25.059%20-435.594,-54.146C-484.111,-75.66%20-542.435,-61.618%20-575.537,-20.13C-606.641,18.858%20-610.955,70.314%20-588.776,108.729L-393.296,447.311C-371.123,485.716%20-324.398,507.718%20-275.082,500.275C-222.603,492.35%20-181.278,448.861%20-175.657,396.081C-168.05,324.729%20-223.771,264.432%20-293.574,264.43ZM-362.614,-180.54C-304.625,-138.276%20-224.546,-156.383%20-189.642,-216.833L-165.758,-258.203C-137.72,-306.761%20-67.63,-306.761%20-39.593,-258.202L-15.707,-216.833C19.196,-156.383%2099.275,-138.276%20157.263,-180.539C200.153,-211.798%20217.154,-269.329%20197.776,-318.74C179.564,-365.172%20137.158,-394.635%2092.8,-394.635L-298.161,-394.635C-342.507,-394.635%20-384.923,-365.172%20-403.136,-318.74C-422.513,-269.331%20-405.512,-211.798%20-362.614,-180.54ZM383.419,108.727L187.938,447.309C165.759,485.724%20119.04,507.717%2069.723,500.273C17.243,492.35%20-24.08,448.861%20-29.707,396.087C-37.314,324.737%2018.407,264.44%2088.211,264.438L135.98,264.437C192.052,264.435%20227.096,203.736%20199.063,155.175L175.178,113.806C140.278,53.354%20164.636,-25.051%20230.233,-54.139C278.752,-75.66%20337.077,-61.617%20370.179,-20.132C401.283,18.857%20405.592,70.322%20383.419,108.727Z'%20style='fill:none;fill-rule:nonzero;stroke:url(%23_Linear1);stroke-width:4px;'/%3E%20%3C/g%3E%20%3C/g%3E%20%3C/g%3E%20%3Cdefs%3E%20%3ClinearGradient%20id='_Linear1'%20x1='0'%20y1='0'%20x2='1'%20y2='0'%20gradientUnits='userSpaceOnUse'%20gradientTransform='matrix(574.183,820.018,-820.018,574.183,-389.9991,-355.857)'%3E%3Cstop%20offset='0'%20style='stop-color:rgb(0,196,141);stop-opacity:1'/%3E%3Cstop%20offset='0.05'%20style='stop-color:rgb(0,196,141);stop-opacity:1'/%3E%3Cstop%20offset='0.4'%20style='stop-color:rgb(0,196,233);stop-opacity:1'/%3E%3Cstop%20offset='0.95'%20style='stop-color:rgb(152,112,225);stop-opacity:1'/%3E%3Cstop%20offset='1'%20style='stop-color:rgb(152,112,225);stop-opacity:1'/%3E%3C/linearGradient%3E%20%3C/defs%3E%20%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right center;\n  background-size: auto 170%;\n}\n.theme-overrides .hs-search-field__label {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  display: block;\n  text-align: center;\n  font-size: 34px;\n  font-weight: 600;\n  line-height: 1.15;\n  color: #FFFFFF;\n}\n\n/* --- Search box: rounded pill with soft shadow (matches mockup) -------------\n   NOTE: the heading <label> is the FIRST child INSIDE .hs-search-field__bar\n   (bar > form > label + input + button). So the white pill must NOT wrap the\n   label, or it goes white-on-white. We absolutely-position the label above the\n   bar (on the teal), and only the input+button row becomes the pill. */\n.theme-overrides .hs-search-field {\n  position: relative;\n  max-width: 620px;\n  margin-left: auto;\n  margin-right: auto;\n  padding-top: 58px; /* reserves room for the lifted heading */\n}\n.theme-overrides .hs-search-field__bar {\n  background: #FFFFFF;\n  border: 1px solid #D4DDE0;\n  border-radius: 26px;\n  box-shadow: 0 10px 28px rgba(7, 39, 46, 0.18);\n  transition: box-shadow 0.15s ease, border-color 0.15s ease;\n}\n.theme-overrides .hs-search-field__bar:focus-within {\n  border-color: var(--autrix-cyan);\n  box-shadow: 0 0 0 3px rgba(0, 196, 233, 0.30), 0 10px 28px rgba(7, 39, 46, 0.18);\n}\n.theme-overrides .hs-search-field__input {\n  border: 0;\n  outline: 0;\n  background: transparent;\n  padding: 14px 20px;\n  font-size: 15px;\n  color: var(--autrix-dark);\n}\n.theme-overrides .hs-search-field__input::placeholder { color: #9AA9B0; }\n.theme-overrides .hs-search-field__button {\n  background: transparent;\n  border: 0;\n  padding-right: 18px;\n}\n.theme-overrides .hs-search-field__button svg { fill: var(--autrix-teal); }\n\n/* --- Category cards (KB home \"Browse by topic\" grid) ------------------------\n   Real HubSpot classes (from module_kb_home_category_listing): the list is a\n   flex grid of .hs-kb-home-list__category cards, each with .hs-kb-home-list__icon\n   (32px svg), .hs-kb-home-list__text > __category-title / __category-description /\n   __category-link (\"N articles\"). By default the cards have no box styling ‚Äî we\n   turn them into branded white cards with a gradient icon chip + hover lift. */\n.theme-overrides .hs-kb-home-list {\n  --hs-kb-home-list-gap: 22px;\n  justify-content: center;\n  max-width: 1240px;\n  /* <main> adds 36px padding-bottom (0 top), so the gap below the cards is\n     bigger than above. Compensate with a larger top margin ‚Üí equal ~44px both. */\n  margin: 44px auto 8px;\n  padding: 0 24px;\n}\n/* Categories with no icon set render a .hs-kb-home-list__empty-icon placeholder\n   that is a phantom 120px tall, making those cards taller than ones with an icon.\n   Hide it so every card hugs its content and all cards match height. */\n.theme-overrides .hs-kb-home-list__empty-icon { display: none !important; }\n/* Card */\n.theme-overrides .hs-kb-home-list__category {\n  background: #FFFFFF;\n  border: 1px solid var(--autrix-border);\n  border-radius: 14px;\n  padding: 24px 22px;\n  text-align: left;\n  box-shadow: 0 1px 2px rgba(7, 39, 46, 0.04);\n  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;\n  /* The \"tiles\" layout forces grid-template-rows: 294px (tall empty cards) ‚Äî clear\n     it. Then stretch every card to the tallest in its row so all cards in the grid\n     are ALWAYS the same height, regardless of how much text each category has. */\n  grid-template-rows: auto !important;\n  min-height: 0 !important;\n  align-self: stretch;\n}\n/* The whole card is an <a> wrapping the content. Clear the tiles layout's\n   min-height: calc(310px - 1rem), and let the link fill the (stretched) card so\n   the whole card is clickable and equal-height across the row. */\n.theme-overrides .hs-kb-home-list__category > .hs-kb-home-list__category-link {\n  display: block;\n  height: 100%;\n  min-height: 0 !important;\n}\n.theme-overrides .hs-kb-home-list__text { align-items: flex-start; text-align: left; }\n.theme-overrides .hs-kb-home-list__category,\n.theme-overrides .hs-kb-home-list__text__category-title,\n.theme-overrides .hs-kb-home-list__text__category-description,\n.theme-overrides .hs-kb-home-list__text__category-link { text-align: left; }\n.theme-overrides .hs-kb-home-list__category:hover {\n  transform: translateY(-3px);\n  border-color: var(--autrix-cyan);\n  box-shadow: 0 12px 28px rgba(7, 39, 46, 0.10);\n}\n/* Gradient icon chip */\n.theme-overrides .hs-kb-home-list__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  margin-bottom: 16px;\n  border-radius: 11px;\n  background: var(--autrix-gradient);\n}\n.theme-overrides .hs-kb-home-list__icon svg,\n.theme-overrides .hs-kb-home-list__icon-svg {\n  width: 22px;\n  height: 22px;\n  fill: #FFFFFF;\n  color: #FFFFFF;\n}\n/* Text */\n.theme-overrides .hs-kb-home-list__text { gap: 6px; }\n.theme-overrides .hs-kb-home-list__text__category-title {\n  font-family: \"Onest\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--autrix-dark);\n  line-height: 1.35;\n}\n.theme-overrides .hs-kb-home-list__text__category-description {\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 13px;\n  line-height: 1.55;\n  color: var(--autrix-muted);\n}\n/* \"N articles\" link ‚Äî teal (no cyan text on white, per brand) */\n.theme-overrides .hs-kb-home-list__text__category-link {\n  color: var(--autrix-teal);\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 13px;\n  font-weight: 600;\n  padding-top: 4px;\n}\n@media (max-width: 600px) {\n  /* Stack the cards full-width, one per row (Figma mobile design). The tiles\n     layout caps each card at max-width:30% which keeps them 2-3 up ‚Äî clear it\n     and force a full-width flex basis so each card takes its own row. */\n  .theme-overrides .hs-kb-home-list__category {\n    min-width: 0;\n    width: 100%;\n    max-width: none !important;\n    flex: 1 1 100% !important;\n  }\n  /* A touch more height so the stacked cards read like the Figma cards. */\n  .theme-overrides .hs-kb-home-list__category > .hs-kb-home-list__category-link {\n    min-height: 120px !important;\n  }\n}\n\n/* Tablet: let the cards fill the row 2-up like the Figma tablet design. The\n   tiles layout caps each card at max-width:30%, which on tablet leaves them\n   narrow with large side gutters. Scoped to the tablet band so the desktop\n   centred cards (>1024px) and the <=600px single-column stack are untouched. */\n@media (min-width: 601px) and (max-width: 1024px) {\n  .theme-overrides .hs-kb-home-list { max-width: 900px; }\n  .theme-overrides .hs-kb-home-list__category {\n    max-width: none !important;\n    flex: 1 1 0 !important;\n  }\n}\n\n/* --- Links / article rows --------------------------------------------------- */\n.theme-overrides a { color: var(--autrix-dark); }\n.theme-overrides a:hover { color: var(--autrix-teal); }\n.theme-overrides .hs-kb-home-list a:hover { color: var(--autrix-teal); }\n\n/* --- Category page (sidebar nav + article list) -----------------------------\n   The category page (e.g. /general) is a sidebar of category links + a main\n   column listing that category's articles. Stock styling is plain; this brands\n   the breadcrumb, makes the sidebar rounded hover/active rows (gradient active\n   accent), and turns the article links into clean hover cards with a doc icon +\n   chevron. The content wrapper is flex row-reverse (sidebar left, content\n   right). Selectors verified on the live category DOM (2026-06-10). */\n\n/* Layout: centre breadcrumb + content at a shared max width so they align.\n   Widened to 1320px (was 1120) per customer feedback ‚Äî the article/category\n   content column was only ~686px (sidebar 248 + gap 48 ate a 1120 cap), too\n   narrow for wide content (tables, diagrams). At 1320 the content column is\n   ~940px. !important beats the stock-KB/theme-editor content-width default.\n   NOTE (2026-07-06): the breadcrumb + sidebar wrappers are BOTH nested inside\n   .hs-kb-content-wrapper--responsive-spacing, whose stock max-width is 1000px.\n   That parent cap silently squeezed the whole column to ~1000px (article body\n   stayed ~659px) no matter what the children asked for. So the parent MUST be\n   widened too ‚Äî its only children here are the two already-capped-at-1320\n   wrappers, and the home grid has its own centred 1240 cap, so this is safe. */\n.theme-overrides .hs-kb-content-wrapper--responsive-spacing {\n  max-width: 1320px !important;\n}\n.theme-overrides .hs-kb-breadcrumb-container {\n  max-width: 1320px !important;\n  margin: 0 auto;\n  padding: 24px 24px 4px;\n}\n.theme-overrides .hs-kb-content-wrapper--sidebar {\n  max-width: 1320px !important;\n  margin: 0 auto;\n  gap: 44px;\n  align-items: flex-start;\n  padding: 8px 24px 56px;\n}\n\n/* Breadcrumb */\n.theme-overrides .hs-kb-breadcrumbs {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 6px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 13px;\n  color: var(--autrix-muted);\n}\n.theme-overrides .hs-kb-breadcrumb_item { display: inline-flex; align-items: center; gap: 6px; }\n.theme-overrides .hs-kb-breadcrumbs a { color: var(--autrix-muted); text-decoration: none; transition: color 0.15s ease; }\n.theme-overrides .hs-kb-breadcrumbs a:hover { color: var(--autrix-teal); }\n.theme-overrides .hs-kb-breadcrumb_item:last-child { color: var(--autrix-dark); font-weight: 600; }\n\n/* Sidebar nav: rounded rows, \"Categories\" label, gradient active accent */\n.theme-overrides .hs-kb-sidebar { width: 248px; border-right: 0; padding: 0; }\n.theme-overrides .hs-kb-category_accordion_nav_list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.theme-overrides .hs-kb-category_accordion_nav_list::before {\n  content: \"Categories\";\n  display: block;\n  margin-bottom: 12px;\n  font-family: \"Onest\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--autrix-muted);\n}\n.theme-overrides .hs-kb-category_accordion_nav_list_item { margin: 0; border-radius: 10px; }\n.theme-overrides .hs-kb-category-accordion_link {\n  display: block;\n  padding: 10px 14px;\n  border-radius: 10px;\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 15px;\n  font-weight: 500;\n  color: var(--autrix-muted);\n  text-decoration: none;\n  transition: background-color 0.15s ease, color 0.15s ease;\n}\n.theme-overrides .hs-kb-category-accordion_link:hover {\n  background: rgba(0, 81, 84, 0.06);\n  color: var(--autrix-teal);\n}\n/* Active state (the --active class sits on the <li>) */\n.theme-overrides .hs-kb-category-accordion_link--active {\n  position: relative;\n  background: rgba(0, 81, 84, 0.08);\n  border-radius: 10px;\n}\n.theme-overrides .hs-kb-category-accordion_link--active .hs-kb-category-accordion_link {\n  color: var(--autrix-dark);\n  font-weight: 600;\n  background: transparent;\n}\n.theme-overrides .hs-kb-category-accordion_link--active::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 8px;\n  bottom: 8px;\n  width: 3px;\n  border-radius: 3px;\n  background: var(--autrix-gradient);\n}\n\n/* Sub-categories (nested under a parent category) --------------------------\n   HubSpot renders sub-categories as a nested <ul>.hs-kb-category_accordion_nav_list\n   inside the parent's ...--has-children <li>. Two stock problems (customer flagged\n   the sidebar looked \"messy\"): (1) the nested list re-inherited the \"Categories\"\n   ::before label from the rule above, so \"CATEGORIES\" appeared twice; (2) the\n   parent's --active background/accent sat on the whole <li>, so it boxed in the\n   nested sub-items too. Fix: kill the duplicate label, move the active highlight\n   onto just the parent link row (.hs-kb-anchor_toggle), and give the nested list\n   a clean indented tree with a connector line. */\n\n/* 1. No duplicate \"Categories\" label on nested lists */\n.theme-overrides .hs-kb-category_accordion_nav_list .hs-kb-category_accordion_nav_list::before {\n  content: none;\n}\n/* 2. Parent with sub-categories: don't box the whole <li> (which contains the\n   nested list); the highlight moves to the parent link row below. */\n.theme-overrides .hs-kb-category_accordion_nav_list_item--has-children.hs-kb-category-accordion_link--active {\n  background: transparent;\n}\n.theme-overrides .hs-kb-category_accordion_nav_list_item--has-children.hs-kb-category-accordion_link--active::before {\n  content: none;\n}\n/* Highlight + gradient accent on just the parent link row */\n.theme-overrides .hs-kb-anchor_toggle {\n  position: relative;\n  border-radius: 10px;\n}\n.theme-overrides .hs-kb-anchor_toggle--active {\n  background: rgba(0, 81, 84, 0.08);\n}\n.theme-overrides .hs-kb-anchor_toggle--active::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 8px;\n  bottom: 8px;\n  width: 3px;\n  border-radius: 3px;\n  background: var(--autrix-gradient);\n}\n.theme-overrides .hs-kb-anchor_toggle--active .hs-kb-category-accordion_link {\n  color: var(--autrix-dark);\n  font-weight: 600;\n  background: transparent;\n}\n/* 3. Nested sub-category list: indented tree with a connector line, tighter rows */\n.theme-overrides .hs-kb-category_accordion_nav_list .hs-kb-category_accordion_nav_list {\n  margin: 4px 0 4px 13px;\n  padding-left: 11px;\n  border-left: 1px solid var(--autrix-border);\n  gap: 2px;\n}\n.theme-overrides .hs-kb-category_accordion_nav_list .hs-kb-category_accordion_nav_list .hs-kb-category-accordion_link {\n  font-size: 14px;\n  padding: 7px 12px;\n}\n\n/* Main column: category title */\n.theme-overrides .hs-kb-content { padding-top: 4px; }\n\n/* Search-results page: HubSpot stock two-column layout gives .hs-kb-content an\n   explicit desktop column width that does not collapse on mobile, spilling ~4px past\n   the viewport at ~390px. Cap it to the container. No-op on desktop. */\n.theme-overrides .hs-kb-content { max-width: 100%; min-width: 0; }\n.theme-overrides .hs-kb-category-listing > h1 {\n  font-family: \"Onest\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 28px;\n  font-weight: 600;\n  letter-spacing: -0.5px;\n  color: var(--autrix-dark);\n  margin: 0 0 4px;\n}\n\n/* Article list -> clean hover cards with a doc icon + chevron */\n.theme-overrides .hs-kb-category-article-list {\n  list-style: none;\n  margin: 22px 0 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  border: 0;\n}\n.theme-overrides .hs-kb-category-article-list::before {\n  content: \"Articles\";\n  font-family: \"Onest\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--autrix-muted);\n  margin-bottom: 2px;\n}\n.theme-overrides .hs-kb-category-article-list li { margin: 0; border: 0; }\n.theme-overrides .hs-kb-category-article-list__link {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 15px 18px;\n  border: 1px solid var(--autrix-border);\n  border-radius: 12px;\n  background: #FFFFFF;\n  color: var(--autrix-dark);\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 1.4;\n  text-decoration: none;\n  box-shadow: 0 1px 2px rgba(7, 39, 46, 0.04);\n  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;\n}\n.theme-overrides .hs-kb-category-article-list__link::before {\n  content: \"\";\n  flex: none;\n  width: 20px;\n  height: 20px;\n  background-color: var(--autrix-teal);\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%203h6l4%204v13a1%201%200%200%201-1%201H8a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1z'/%3E%3Cpath%20d='M14%203v4h4'/%3E%3Cpath%20d='M9.5%2012h7M9.5%2015.5h5'/%3E%3C/svg%3E\") no-repeat center / contain;\n  mask: url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%203h6l4%204v13a1%201%200%200%201-1%201H8a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1z'/%3E%3Cpath%20d='M14%203v4h4'/%3E%3Cpath%20d='M9.5%2012h7M9.5%2015.5h5'/%3E%3C/svg%3E\") no-repeat center / contain;\n}\n.theme-overrides .hs-kb-category-article-list__link::after {\n  content: \"\";\n  flex: none;\n  margin-left: auto;\n  width: 18px;\n  height: 18px;\n  background-color: #9AA9B0;\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%206l6%206-6%206'/%3E%3C/svg%3E\") no-repeat center / contain;\n  mask: url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%206l6%206-6%206'/%3E%3C/svg%3E\") no-repeat center / contain;\n  transition: transform 0.16s ease, background-color 0.16s ease;\n}\n.theme-overrides .hs-kb-category-article-list__link:hover {\n  border-color: var(--autrix-cyan);\n  box-shadow: 0 10px 24px rgba(7, 39, 46, 0.09);\n  transform: translateY(-1px);\n  color: var(--autrix-dark);\n}\n.theme-overrides .hs-kb-category-article-list__link:hover::after {\n  background-color: var(--autrix-teal);\n  transform: translateX(3px);\n}\n\n@media (max-width: 768px) {\n  .theme-overrides .hs-kb-content-wrapper--sidebar { gap: 28px; padding: 8px 20px 40px; }\n  .theme-overrides .hs-kb-sidebar { width: 100%; }\n}\n\n/* --- Header button (\"Submit a request\") -------------------------------------\n   Pixel-matched to the autrix.co.uk primary button (computed from their live\n   site): DM Sans 16px/400, line-height 24px, #07272E bg, white text, 10px 32px\n   padding, 1px transparent border (=> 46px tall), fully-rounded pill, 12px gap,\n   and a trailing right-arrow (their exact SVG path) as a currentColor mask.\n   Hover mirrors their behaviour: brand gradient fill + dark text. */\n.theme-overrides .header__button,\n.theme-overrides .header__menu-item--button > a {\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  background: var(--autrix-dark) !important;\n  background-image: none !important;\n  color: #FFFFFF !important;\n  border: 1px solid transparent !important;\n  border-radius: 9999px !important;\n  padding: 10px 32px !important;\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif !important;\n  font-size: 16px !important;\n  font-weight: 400 !important;\n  line-height: 1.5 !important;\n  white-space: nowrap;\n  text-decoration: none;\n  transition: background-color 0.2s ease, background-image 0.2s ease, color 0.2s ease, border-color 0.2s ease;\n}\n/* Trailing right-arrow ‚Äî autrix's exact path, drawn as a currentColor mask */\n.theme-overrides .header__button::after,\n.theme-overrides .header__menu-item--button > a::after {\n  content: \"\";\n  flex: none;\n  width: 24px;\n  height: 14px;\n  background-color: currentColor;\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2014'%20fill='none'%20stroke='%23000'%20stroke-width='1'%20stroke-linejoin='bevel'%3E%3Cpath%20d='M17%201L23%207M23%207L17%2013M23%207H1'/%3E%3C/svg%3E\") no-repeat center / contain;\n  mask: url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2014'%20fill='none'%20stroke='%23000'%20stroke-width='1'%20stroke-linejoin='bevel'%3E%3Cpath%20d='M17%201L23%207M23%207L17%2013M23%207H1'/%3E%3C/svg%3E\") no-repeat center / contain;\n}\n.theme-overrides .header__button:hover,\n.theme-overrides .header__menu-item--button > a:hover {\n  background-color: transparent !important;\n  background-image: var(--autrix-gradient) !important;\n  color: var(--autrix-dark) !important;\n  border-color: transparent !important;\n}\n\n/* --- Logo sizing ------------------------------------------------------------\n   The logo image ships at 72px tall (width/height attrs on the <img>). That\n   reads too large in both the header and footer, so cap the height and let the\n   width scale with the aspect ratio. CSS height overrides the HTML attribute.\n\n   CRITICAL: the KB \"Page not found\"/\"Uh-Oh\" error page (and other fallbacks)\n   render the full MARKETING-SITE header instead of the clean KB header. There the\n   logo <img> has no size constraint and ballooned to ~1228px wide (customer\n   flagged the Uh-Oh page as \"not working\"). These selectors cover every header\n   logo variant so the cap always wins; max-width is a belt-and-braces guard. */\n.theme-overrides .header__logo-image,\n.theme-overrides .header__logo img,\n.theme-overrides .header__logo .hs-image-widget,\n.theme-overrides .header__logo-col img {\n  height: 40px !important;\n  width: auto !important;\n  max-width: 220px !important;\n}\n.theme-overrides .footer__bottom--left img,\n.theme-overrides .footer__bottom--left .hs-image-widget {\n  height: 36px !important;\n  width: auto !important;\n}\n\n/* --- Footer ----------------------------------------------------------------- */\n.theme-overrides .footer__bottom {\n  color: var(--autrix-muted);\n  font-size: 12px;\n}\n\n/* --- Footer social icons ----------------------------------------------------\n   The theme renders each social link (.hs-kb-social_follow__link) as a circle\n   filled with var(--social-follow-background-color) ‚Äî a muddy grey ‚Äî and the\n   inline <svg> inherits a dark fill (worsened by our generic `a { color }`\n   rule), so the icons read as dark-on-dark. Give the circles a brand teal fill\n   with white icons, and a cyan hover. fill is forced to beat currentColor. */\n.theme-overrides .hs-kb-social_follow__link {\n  background-color: var(--autrix-teal) !important;\n  transition: background-color 0.15s ease;\n}\n.theme-overrides .hs-kb-social_follow__link:hover {\n  background-color: var(--autrix-cyan) !important;\n}\n.theme-overrides .hs-kb-social_follow__link svg {\n  fill: #FFFFFF !important;\n}\n.theme-overrides .hs-kb-social_follow__link:hover svg {\n  fill: var(--autrix-dark) !important;\n}\n\n/* --- Footer: polished light -------------------------------------------------\n   Gradient top accent, a tidy 4-col link grid with an animated gradient\n   underline on hover, a divider before the bottom row, and a subtle social\n   lift. Keeps the white footer (customer prefers light). */\n.theme-overrides .footer {\n  position: relative;\n  border-top: 1px solid var(--autrix-border);\n  background-color: #F3F6F7; /* subtle brand-light tint to separate from white content */\n}\n.theme-overrides .footer::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: var(--autrix-gradient);\n}\n\n/* Menu: 3 grouped columns (Company / Support / Legal) via explicit grid\n   placement of the flat link list + CSS-inserted group headings.\n   IMPORTANT: this mapping assumes the menu item order is:\n     1 Your challenges, 2 Solutions, 3 About, 4 Blog, 5 Case studies,\n     6 Contact, 7 Cookie Policy, 8 Customer Support, 9 Ethics & Conduct,\n     10 Privacy Policy, 11 Terms of Service.\n   If the footer nav menu order changes, update these nth-child rules. */\n.theme-overrides .footer__menu {\n  display: grid;\n  grid-template-columns: repeat(3, max-content);\n  justify-content: center;\n  align-items: start;\n  column-gap: 72px;\n  row-gap: 14px;\n  max-width: 840px;\n  margin: 0 auto;\n  padding: 46px 24px 40px;\n}\n.theme-overrides .footer__menu-item {\n  margin: 0;\n  padding: 0;\n  text-align: left;\n}\n/* Column 1 ‚Äî Company */\n.theme-overrides .footer__menu-item:nth-child(1) { grid-column: 1; grid-row: 1; }\n.theme-overrides .footer__menu-item:nth-child(2) { grid-column: 1; grid-row: 2; }\n.theme-overrides .footer__menu-item:nth-child(3) { grid-column: 1; grid-row: 3; }\n.theme-overrides .footer__menu-item:nth-child(4) { grid-column: 1; grid-row: 4; }\n.theme-overrides .footer__menu-item:nth-child(5) { grid-column: 1; grid-row: 5; }\n/* Column 2 ‚Äî Support (Contact + Customer Support) */\n.theme-overrides .footer__menu-item:nth-child(6) { grid-column: 2; grid-row: 1; }\n.theme-overrides .footer__menu-item:nth-child(8) { grid-column: 2; grid-row: 2; }\n/* Column 3 ‚Äî Legal (Cookie + Ethics + Privacy + Terms) */\n.theme-overrides .footer__menu-item:nth-child(7) { grid-column: 3; grid-row: 1; }\n.theme-overrides .footer__menu-item:nth-child(9) { grid-column: 3; grid-row: 2; }\n.theme-overrides .footer__menu-item:nth-child(10) { grid-column: 3; grid-row: 3; }\n.theme-overrides .footer__menu-item:nth-child(11) { grid-column: 3; grid-row: 4; }\n/* Group headings ‚Äî inserted on the first item of each column */\n.theme-overrides .footer__menu-item:nth-child(1)::before,\n.theme-overrides .footer__menu-item:nth-child(6)::before,\n.theme-overrides .footer__menu-item:nth-child(7)::before {\n  display: block;\n  margin-bottom: 12px;\n  font-family: \"Onest\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--autrix-dark);\n}\n.theme-overrides .footer__menu-item:nth-child(1)::before { content: \"Company\"; }\n.theme-overrides .footer__menu-item:nth-child(6)::before { content: \"Support\"; }\n.theme-overrides .footer__menu-item:nth-child(7)::before { content: \"Legal\"; }\n\n/* Links: muted -> teal on hover, with an animated gradient underline.\n   (No cyan text on white, per brand: hover colour is teal.) */\n.theme-overrides .footer__menu-link,\n.theme-overrides .footer__menu-item--depth-1 > .footer__menu-link:first-child {\n  position: relative;\n  display: inline-block;\n  line-height: 1.4;\n  padding: 1px 0;\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--autrix-muted);\n  text-decoration: none;\n  transition: color 0.18s ease;\n}\n.theme-overrides .footer__menu-link::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  bottom: -1px;\n  width: 100%;\n  height: 2px;\n  border-radius: 2px;\n  background: var(--autrix-gradient);\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 0.22s ease;\n}\n.theme-overrides .footer__menu-link:hover {\n  color: var(--autrix-teal);\n}\n.theme-overrides .footer__menu-link:hover::after {\n  transform: scaleX(1);\n}\n\n/* Bottom row: divider + breathing room.\n   padding-bottom is generous so the fixed \"Back to top\" pill (bottom-right,\n   ~34px tall at bottom:24px) never overlaps the copyright line when scrolled\n   to the very bottom of the page. */\n.theme-overrides .footer__bottom {\n  border-top: 1px solid var(--autrix-border);\n  padding-top: 30px;\n  padding-bottom: 72px;\n}\n\n/* Social icons: subtle lift on hover (colours set in the section above) */\n.theme-overrides .hs-kb-social_follow__link {\n  transition: background-color 0.15s ease, transform 0.15s ease;\n}\n.theme-overrides .hs-kb-social_follow__link:hover {\n  transform: translateY(-2px);\n}\n\n@media (max-width: 700px) {\n  /* Stack the groups vertically. DOM order interleaves Support/Legal, so use\n     flex + order to keep each group's links together under its heading. */\n  .theme-overrides .footer__menu {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 12px;\n    max-width: 320px;\n    margin: 0 auto;\n    padding: 34px 20px 30px;\n  }\n  .theme-overrides .footer__menu-item:nth-child(1) { order: 1; }\n  .theme-overrides .footer__menu-item:nth-child(2) { order: 2; }\n  .theme-overrides .footer__menu-item:nth-child(3) { order: 3; }\n  .theme-overrides .footer__menu-item:nth-child(4) { order: 4; }\n  .theme-overrides .footer__menu-item:nth-child(5) { order: 5; }\n  .theme-overrides .footer__menu-item:nth-child(6) { order: 6; }\n  .theme-overrides .footer__menu-item:nth-child(8) { order: 7; }\n  .theme-overrides .footer__menu-item:nth-child(7) { order: 8; }\n  .theme-overrides .footer__menu-item:nth-child(9) { order: 9; }\n  .theme-overrides .footer__menu-item:nth-child(10) { order: 10; }\n  .theme-overrides .footer__menu-item:nth-child(11) { order: 11; }\n  .theme-overrides .footer__menu-item:nth-child(6)::before,\n  .theme-overrides .footer__menu-item:nth-child(7)::before { margin-top: 18px; }\n}\n\n/* --- Back to top button -----------------------------------------------------\n   Floating pill, bottom-right. Created + toggled by the small script appended\n   after this stylesheet in the KB header-HTML field (source: js/kb-back-to-top.js).\n   Fades in after scrolling; smooth-scrolls to top. Not scoped to .theme-overrides\n   because it's appended to <body> with a unique id. */\n#autrix-back-to-top {\n  position: fixed;\n  right: 24px;\n  bottom: 24px;\n  z-index: 9999;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  border: 0;\n  border-radius: 999px;\n  background: #07272E;\n  color: #FFFFFF;\n  font-family: \"Onest\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1;\n  cursor: pointer;\n  box-shadow: 0 8px 24px rgba(7, 39, 46, 0.25);\n  opacity: 0;\n  transform: translateY(12px);\n  pointer-events: none;\n  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s ease;\n}\n#autrix-back-to-top.is-visible {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: auto;\n}\n#autrix-back-to-top:hover {\n  background: #005154;\n}\n#autrix-back-to-top svg {\n  width: 14px;\n  height: 14px;\n}\n@media (max-width: 600px) {\n  #autrix-back-to-top {\n    right: 16px;\n    bottom: 16px;\n    padding: 10px 14px;\n  }\n  #autrix-back-to-top span {\n    display: none; /* icon-only on small screens to stay out of the way */\n  }\n}\n\n/* --- Mobile \"Submit a request\" CTA ------------------------------------------\n   On mobile the header button is tucked inside the hamburger, so there's no\n   visible call to action. The companion script (js/kb-mobile-cta.js) clones\n   that button into a full-width dark pill placed right below the hero, matching\n   the Figma mobile design. Hidden above 700px. Not scoped to .theme-overrides\n   because the script inserts it as a sibling of the hero. Uses literal hex (the\n   --autrix-* vars are scoped to .theme-overrides). Arrow = same path as header. */\n.autrix-mobile-cta { display: none; }\n@media (max-width: 700px) {\n  .autrix-mobile-cta {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    width: calc(100% - 40px);\n    margin: 20px auto 4px;\n    box-sizing: border-box;\n    background: #07272E;\n    /* !important: the generic `.theme-overrides a { color: dark }` rule has higher\n       specificity and would otherwise render the label dark-on-dark (invisible). */\n    color: #FFFFFF !important;\n    border: 1px solid transparent;\n    border-radius: 9999px;\n    padding: 13px 28px;\n    font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n    font-size: 15px;\n    font-weight: 400;\n    line-height: 1.4;\n    text-decoration: none;\n    transition: background-color 0.2s ease, color 0.2s ease;\n  }\n  .autrix-mobile-cta::after {\n    content: \"\";\n    flex: none;\n    width: 22px;\n    height: 13px;\n    background-color: currentColor;\n    -webkit-mask: url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2014'%20fill='none'%20stroke='%23000'%20stroke-width='1'%20stroke-linejoin='bevel'%3E%3Cpath%20d='M17%201L23%207M23%207L17%2013M23%207H1'/%3E%3C/svg%3E\") no-repeat center / contain;\n    mask: url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2014'%20fill='none'%20stroke='%23000'%20stroke-width='1'%20stroke-linejoin='bevel'%3E%3Cpath%20d='M17%201L23%207M23%207L17%2013M23%207H1'/%3E%3C/svg%3E\") no-repeat center / contain;\n  }\n  .autrix-mobile-cta:active { background: #005154; }\n}\n\n/* --- Accessibility: visible cyan focus ring --------------------------------- */\n.theme-overrides a:focus-visible,\n.theme-overrides button:focus-visible,\n.theme-overrides input:focus-visible {\n  outline: 2px solid var(--autrix-cyan);\n  outline-offset: 2px;\n}\n.theme-overrides .hs-search-field__input:focus-visible { outline: none; }\n\n/* --- Accessibility: screen-reader-only <h1> (QA 2026-07-01) ------------------\n   The KB home ships no <h1> (headings start at h3). js/kb-a11y.js injects one\n   with this class so screen readers + search engines get a page-level heading\n   without changing the visible design. */\n.theme-overrides .autrix-sr-h1 {\n  position: absolute !important;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}"}]},{"tag":"script","children":[{"tag":"#text","text":"/* Autrix Help Portal ‚Äî floating \"Back to top\" button.\n   Appended to <body>; styled by #autrix-back-to-top in kb-overrides.css.\n   Injected (wrapped in <script>) after the <style> block in the KB\n   header-HTML field. Self-contained, no dependencies. */\n(function () {\n  function init() {\n    if (document.getElementById('autrix-back-to-top')) return;\n    var b = document.createElement('button');\n    b.id = 'autrix-back-to-top';\n    b.type = 'button';\n    b.setAttribute('aria-label', 'Back to top');\n    b.innerHTML =\n      '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" ' +\n      'stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">' +\n      '<path d=\"M12 19V5M5 12l7-7 7 7\"/></svg><span>Back to top</span>';\n    b.addEventListener('click', function () {\n      window.scrollTo({ top: 0, behavior: 'smooth' });\n    });\n    document.body.appendChild(b);\n    function toggle() {\n      var y = window.scrollY || document.documentElement.scrollTop;\n      b.classList.toggle('is-visible', y > 400);\n    }\n    window.addEventListener('scroll', toggle, { passive: true });\n    toggle();\n  }\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    init();\n  }\n})();\n\n/* Autrix Help Portal ‚Äî repoint the header \"Submit a request\" CTA.\n   The customer portal is switched OFF, so the button's default /requests link\n   404s (lands on the \"Uh-Oh\" page). Until the portal is enabled, send the button\n   to the support inbox instead. The label stays \"Submit a request\".\n   Loaded from BOTH injections: the KB header-HTML block (covers KB home/category/\n   article pages) AND the help.autrix.co.uk Site header HTML (covers the 404 /\n   \"Uh-Oh\" page, which the KB header-HTML does not reach). The site-header does NOT\n   reliably load on KB pages, so the KB-header copy is required for those.\n   Idempotent + retried, so it is safe to run more than once / alongside anything\n   else. Swap DEST for a support-form URL if/when one is set up. */"}]},{"tag":"meta","attributes":{"property":"og:url","content":"https://help.autrix.co.uk/hs/portals/customer-portal-app/brand"}},{"tag":"meta","attributes":{"http-equiv":"content-language","content":"en-gb"}}],"footerElements":[{"tag":"script","attributes":{"defer":"","src":"/hs/hsstatic/content-cwv-embed/static-1.1293/embed.js"}},{"tag":"script","children":[{"tag":"#text","text":"var _hsq = _hsq || [];\n_hsq.push([\"setContentType\", \"app-page\"]);\n_hsq.push([\"setCanonicalUrl\", \"https:\\/\\/help.autrix.co.uk\\/hs\\/portals\\/customer-portal-app\\/brand\"]);\n_hsq.push([\"setPageId\", \"414309391597\"]);\n_hsq.push([\"setContentMetadata\", {\n    \"contentPageId\": 414309391597,\n    \"legacyPageId\": \"414309391597\",\n    \"contentFolderId\": null,\n    \"contentGroupId\": null,\n    \"abTestId\": null,\n    \"languageVariantId\": 414309391597,\n    \"languageCode\": \"en-gb\",\n    \n    \n}]);"}],"attributes":{"type":"text/javascript"}},{"tag":"script","id":"hs-script-loader","attributes":{"async":"","defer":"","src":"/hs/scriptloader/145397951.js","type":"text/javascript"}},{"tag":"script","children":[{"tag":"#text","text":"var hsVars = {\n    render_id: \"0b0d56ad-0bc3-4d74-82a0-bbdaacb62209\",\n    ticks: 1787645718725,\n    page_id: 414309391597,\n    \n    content_group_id: 0,\n    portal_id: 145397951,\n    app_hs_base_url: \"https://app-eu1.hubspot.com\",\n    cp_hs_base_url: \"https://cp-eu1.hubspot.com\",\n    language: \"en-gb\",\n    analytics_page_type: \"app-page\",\n    scp_content_type: \"\",\n    \n    analytics_page_id: \"414309391597\",\n    category_id: 20,\n    folder_id: 0,\n    is_hubspot_user: false\n}"}],"attributes":{"type":"text/javascript"}},{"tag":"script","attributes":{"defer":"","src":"/hs/hsstatic/HubspotToolsMenu/static-1.640/js/index.js"}}],"fontData":{"preloads":["/_hcms/googlefonts/Onest/regular.woff2","/_hcms/googlefonts/Onest/700.woff2","/_hcms/googlefonts/DM_Sans/regular.woff2","/_hcms/googlefonts/DM_Sans/700.woff2"],"css":"<style>@font-face{font-family:\"Onest\";font-weight:400;font-style:normal;font-display:swap;src:url(/_hcms/googlefonts/Onest/regular.woff2) format(\"woff2\"),url(/_hcms/googlefonts/Onest/regular.woff) format(\"woff\")}@font-face{font-family:\"Onest\";font-weight:700;font-style:normal;font-display:swap;src:url(/_hcms/googlefonts/Onest/700.woff2) format(\"woff2\"),url(/_hcms/googlefonts/Onest/700.woff) format(\"woff\")}@font-face{font-family:\"DM Sans\";font-weight:400;font-style:normal;font-display:swap;src:url(/_hcms/googlefonts/DM_Sans/regular.woff2) format(\"woff2\"),url(/_hcms/googlefonts/DM_Sans/regular.woff) format(\"woff\")}@font-face{font-family:\"DM Sans\";font-weight:700;font-style:normal;font-display:swap;src:url(/_hcms/googlefonts/DM_Sans/700.woff2) format(\"woff2\"),url(/_hcms/googlefonts/DM_Sans/700.woff) format(\"woff\")}</style>"}}