{"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/* --- Article \"On this page\" TOC (right column, GitLab-docs style) -----------\n   Injected by js/kb-article-toc.js as the FIRST child of the article wrapper;\n   the wrapper is flex row-reverse, so it lands on the far right, giving\n   [ left category nav | content | on-this-page TOC ]. The extra column pulls\n   the reading measure down to a comfortable ~700px (Atlassian-like), which is\n   the width proportion Joe preferred. Hidden below 1024px. */\n.autrix-toc {\n  flex: 0 0 216px;\n  align-self: flex-start;\n  position: sticky;\n  top: 24px;\n  max-height: calc(100vh - 48px);\n  overflow-y: auto;\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n}\n.autrix-toc__title {\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--autrix-muted);\n  margin: 0 0 12px 16px;\n}\n.autrix-toc__list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  border-left: 1px solid var(--autrix-border);\n}\n.autrix-toc__item { margin: 0; }\n.autrix-toc__link {\n  display: block;\n  padding: 6px 12px 6px 16px;\n  margin-left: -1px;\n  border-left: 2px solid transparent;\n  color: var(--autrix-muted);\n  font-size: 13px;\n  line-height: 1.45;\n  text-decoration: none;\n  transition: color 0.15s ease, border-color 0.15s ease;\n}\n.autrix-toc__link:hover { color: var(--autrix-teal); }\n.autrix-toc__item--h3 .autrix-toc__link { padding-left: 28px; font-size: 12.5px; }\n.autrix-toc__link.is-active {\n  color: var(--autrix-dark);\n  font-weight: 600;\n  border-left-color: var(--autrix-cyan);\n}\n@media (max-width: 1024px) {\n  .autrix-toc { display: none; }\n}\n\n/* --- Sub-category tiles (category pages) ------------------------------------\n   Built by js/kb-subcategory-tiles.js. Sub-categories render as square cards like\n   the top-level home tiles, each jumping to its section below. When the tiles are\n   in place, the nested sub-categories in the left menu are hidden so it stays\n   clean (Joe asked for squares instead of a messy nested menu). The body class\n   .autrix-has-subcat-tiles gates the menu-hide so no-JS still shows the full menu. */\n.autrix-subcat-tiles {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));\n  gap: 18px;\n  margin: 4px 0 40px;\n}\n.autrix-subcat-tile {\n  display: block;\n  background: #FFFFFF;\n  border: 1px solid var(--autrix-border);\n  border-radius: 14px;\n  padding: 22px 20px;\n  text-decoration: none;\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}\n.autrix-subcat-tile: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.autrix-subcat-tile__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  margin-bottom: 14px;\n  border-radius: 11px;\n  background: var(--autrix-gradient);\n  color: #FFFFFF;\n}\n.autrix-subcat-tile__icon svg { width: 22px; height: 22px; }\n.autrix-subcat-tile__title {\n  display: block;\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.autrix-subcat-tile__count {\n  display: block;\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--autrix-teal);\n  padding-top: 6px;\n}\n/* Declutter the left menu: hide nested sub-categories once tiles are in place. */\n.autrix-has-subcat-tiles .hs-kb-category_accordion_nav_list .hs-kb-category_accordion_nav_list {\n  display: none;\n}\n@media (max-width: 600px) {\n  .autrix-subcat-tiles { grid-template-columns: 1fr; }\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 only: HubSpot's stock two-column layout gives the\n   .hs-kb-content column an explicit pixel width (its desktop column size) that\n   does not collapse on mobile, so at ~390px it spills ~4px past the viewport\n   and triggers a horizontal scrollbar. Cap it to the container and let the flex\n   item shrink. No-op on desktop (the explicit width is < 100% of its container\n   there, verified before + after are identical), so this only bites in on narrow\n   widths where the column would otherwise overflow. */\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/* --- Hide mobile hamburger menu ---------------------------------------------\n   Remove the header hamburger toggle (the mobile \"Open/Close main navigation\"\n   button) so it never shows on mobile. Requested by Autrix to declutter the\n   mobile header. The menu it opened held only \"Submit a request\" (already\n   surfaced on mobile as the floating .autrix-mobile-cta pill) and \"Sign in\".\n   Global rule is safe: on desktop HubSpot already renders .header__menu-toggle\n   as display:none, so this only affects the mobile breakpoint where it appears.\n   Verified against the live DOM 2026-07-09 (.header__menu-container--mobile). */\n.theme-overrides .header__menu-toggle { display: none !important; }\n\n/* --- Mobile header height ---------------------------------------------------\n   The header's .header__bottom row carries ~33.6px top/bottom padding, so with\n   the 46px logo the header band is ~114px tall - too much on a phone (Autrix\n   flagged it eats the screen). Tighten the padding on small screens only;\n   desktop is untouched. Verified source against the live DOM 2026-07-09. */\n@media (max-width: 768px) {\n  .theme-overrides .header__bottom {\n    padding-top: 14px !important;\n    padding-bottom: 14px !important;\n  }\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  /* display:block removes the inline baseline gap that left ~6px extra space\n     below the logo, so it sits vertically centred in the header band. */\n  display: block !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  /* Bottom row: the theme lays this out as a flex row (Contact block | copyright\n     + social), which crams into a cramped 50/50 on a phone. Stack it into full\n     width rows so each block sits on its own line. */\n  .theme-overrides .footer__bottom {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 22px;\n  }\n  .theme-overrides .footer__bottom--left,\n  .theme-overrides .footer__bottom--right {\n    width: 100%;\n    max-width: none;\n  }\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/* The search bar already shows a soft, pill-shaped focus glow via\n   .hs-search-field__bar:focus-within, so suppress the generic square outline on\n   the input inside it ‚Äî otherwise a 2px rectangle draws inside the rounded pill\n   and reads as an off/doubled highlight (Joe flagged this 7 Jul). The bar's glow\n   keeps the focus state clearly visible for accessibility. */\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\n/* --- Mobile gutter normalisation ------------------------------------------\n   Customer-reported 2026-08-17: on mobile the logo, hero/breadcrumb, article\n   body and footer links all sat at DIFFERENT left/right insets. Measured at a\n   375px viewport before the fix:\n     logo         20px  (.header__bottom padding-left: 20px)\n     hero         24px  (the shared page gutter - our target)\n     article      44px  (.hs-kb-content-wrapper--sidebar sits at 24 and adds\n                         its own 20px padding)\n     breadcrumb    48px  (.hs-kb-breadcrumb-container adds its own 24px\n                         inside the page's 24px)\n     footer links 48px  (ul.footer__menu margin-left 27.5px + the browser's\n                         default 20px list padding)\n   These rules pull all five onto the single 24px gutter. Header and footer are\n   site chrome living OUTSIDE .theme-overrides, so these selectors are\n   deliberately unscoped - everything else in this file stays scoped.\n   Verified after the fix: logo / breadcrumb / article / footer link / footer\n   contact all report L=24, R=24 at 375px. */\n@media (max-width: 767px) {\n  .header__bottom { padding-left: 24px !important; padding-right: 24px !important; }\n  .hs-kb-content-wrapper--sidebar { padding-left: 0 !important; padding-right: 0 !important; }\n  /* breadcrumb container nests its own 24px inside the page's 24px, giving 48 */\n  .hs-kb-breadcrumb-container { padding-left: 0 !important; padding-right: 0 !important; }\n  .footer__menu { margin-left: 0 !important; padding-left: 24px !important; padding-right: 24px !important; }\n  /* social icons are a flex row justified flex-end, which right-aligns them\n     against every other left-aligned footer item on narrow screens */\n  .hs-kb-social_follow { justify-content: flex-start !important; }\n}\n\n/* --- Header + footer share the content container ---------------------------\n   Requested 2026-08-17: the article column is a 1320px max-width block centred\n   in the viewport, but the header and footer ran full-bleed, so the logo, the\n   \"Submit a request\" CTA and the footer sat hard against the window edges while\n   the content floated in the middle. These rules give the header and footer\n   wrappers the same 1320px centred column.\n\n   Measured at a 1900px viewport - content column spans L=290 to R=290. After\n   these rules: logo L=290, header CTA R=290, footer social icons R=290, i.e.\n   flush with the content on both edges.\n\n   Deliberately NOT constrained: .hs-kb-search-input-wrapper (the teal hero\n   band). That is a full-bleed background by design; only its inner search box\n   is centred. Desktop only - mobile has its own single-gutter rules above, and\n   constraining these at narrow widths would fight them. */\n@media (min-width: 768px) {\n  .header__wrapper--bottom {\n    max-width: 1320px !important;\n    margin-left: auto !important;\n    margin-right: auto !important;\n  }\n  /* footer top (menu columns) - border-box so the 24px padding sits inside the\n     1368px, landing its content edge on the same 290px as the article column */\n  footer.footer > .hs_cos_wrapper {\n    max-width: 1368px !important;\n    margin-left: auto !important;\n    margin-right: auto !important;\n    box-sizing: border-box !important;\n    padding-left: 24px !important;\n    padding-right: 24px !important;\n  }\n  /* footer bottom is content-box, so max-width applies to the content area */\n  .footer__bottom {\n    max-width: 1320px !important;\n    margin-left: auto !important;\n    margin-right: auto !important;\n  }\n}\n\n/* --- Hide the language switcher bar ----------------------------------------\n   Requested 2026-08-17: the Help Portal ships a single language (English -\n   United Kingdom), so the 40px pale-blue bar above the header offered a\n   switcher with nothing to switch to. Verified before removing that the bar\n   holds no other links or buttons - its only contents are the language\n   switcher label and its submenu toggle - so hiding the whole strip loses no\n   navigation. After hiding, .header__bottom sits flush at top 0. */\n.header__top { display: none !important; }\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</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: \"60b233ca-e32e-4993-aea0-e2e4ad617214\",\n    ticks: 1791361905767,\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/* --- Article \"On this page\" TOC (right column, GitLab-docs style) -----------\n   Injected by js/kb-article-toc.js as the FIRST child of the article wrapper;\n   the wrapper is flex row-reverse, so it lands on the far right, giving\n   [ left category nav | content | on-this-page TOC ]. The extra column pulls\n   the reading measure down to a comfortable ~700px (Atlassian-like), which is\n   the width proportion Joe preferred. Hidden below 1024px. */\n.autrix-toc {\n  flex: 0 0 216px;\n  align-self: flex-start;\n  position: sticky;\n  top: 24px;\n  max-height: calc(100vh - 48px);\n  overflow-y: auto;\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n}\n.autrix-toc__title {\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--autrix-muted);\n  margin: 0 0 12px 16px;\n}\n.autrix-toc__list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  border-left: 1px solid var(--autrix-border);\n}\n.autrix-toc__item { margin: 0; }\n.autrix-toc__link {\n  display: block;\n  padding: 6px 12px 6px 16px;\n  margin-left: -1px;\n  border-left: 2px solid transparent;\n  color: var(--autrix-muted);\n  font-size: 13px;\n  line-height: 1.45;\n  text-decoration: none;\n  transition: color 0.15s ease, border-color 0.15s ease;\n}\n.autrix-toc__link:hover { color: var(--autrix-teal); }\n.autrix-toc__item--h3 .autrix-toc__link { padding-left: 28px; font-size: 12.5px; }\n.autrix-toc__link.is-active {\n  color: var(--autrix-dark);\n  font-weight: 600;\n  border-left-color: var(--autrix-cyan);\n}\n@media (max-width: 1024px) {\n  .autrix-toc { display: none; }\n}\n\n/* --- Sub-category tiles (category pages) ------------------------------------\n   Built by js/kb-subcategory-tiles.js. Sub-categories render as square cards like\n   the top-level home tiles, each jumping to its section below. When the tiles are\n   in place, the nested sub-categories in the left menu are hidden so it stays\n   clean (Joe asked for squares instead of a messy nested menu). The body class\n   .autrix-has-subcat-tiles gates the menu-hide so no-JS still shows the full menu. */\n.autrix-subcat-tiles {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));\n  gap: 18px;\n  margin: 4px 0 40px;\n}\n.autrix-subcat-tile {\n  display: block;\n  background: #FFFFFF;\n  border: 1px solid var(--autrix-border);\n  border-radius: 14px;\n  padding: 22px 20px;\n  text-decoration: none;\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}\n.autrix-subcat-tile: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.autrix-subcat-tile__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  margin-bottom: 14px;\n  border-radius: 11px;\n  background: var(--autrix-gradient);\n  color: #FFFFFF;\n}\n.autrix-subcat-tile__icon svg { width: 22px; height: 22px; }\n.autrix-subcat-tile__title {\n  display: block;\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.autrix-subcat-tile__count {\n  display: block;\n  font-family: \"DM Sans\", ui-sans-serif, system-ui, sans-serif;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--autrix-teal);\n  padding-top: 6px;\n}\n/* Declutter the left menu: hide nested sub-categories once tiles are in place. */\n.autrix-has-subcat-tiles .hs-kb-category_accordion_nav_list .hs-kb-category_accordion_nav_list {\n  display: none;\n}\n@media (max-width: 600px) {\n  .autrix-subcat-tiles { grid-template-columns: 1fr; }\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 only: HubSpot's stock two-column layout gives the\n   .hs-kb-content column an explicit pixel width (its desktop column size) that\n   does not collapse on mobile, so at ~390px it spills ~4px past the viewport\n   and triggers a horizontal scrollbar. Cap it to the container and let the flex\n   item shrink. No-op on desktop (the explicit width is < 100% of its container\n   there, verified before + after are identical), so this only bites in on narrow\n   widths where the column would otherwise overflow. */\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/* --- Hide mobile hamburger menu ---------------------------------------------\n   Remove the header hamburger toggle (the mobile \"Open/Close main navigation\"\n   button) so it never shows on mobile. Requested by Autrix to declutter the\n   mobile header. The menu it opened held only \"Submit a request\" (already\n   surfaced on mobile as the floating .autrix-mobile-cta pill) and \"Sign in\".\n   Global rule is safe: on desktop HubSpot already renders .header__menu-toggle\n   as display:none, so this only affects the mobile breakpoint where it appears.\n   Verified against the live DOM 2026-07-09 (.header__menu-container--mobile). */\n.theme-overrides .header__menu-toggle { display: none !important; }\n\n/* --- Mobile header height ---------------------------------------------------\n   The header's .header__bottom row carries ~33.6px top/bottom padding, so with\n   the 46px logo the header band is ~114px tall - too much on a phone (Autrix\n   flagged it eats the screen). Tighten the padding on small screens only;\n   desktop is untouched. Verified source against the live DOM 2026-07-09. */\n@media (max-width: 768px) {\n  .theme-overrides .header__bottom {\n    padding-top: 14px !important;\n    padding-bottom: 14px !important;\n  }\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  /* display:block removes the inline baseline gap that left ~6px extra space\n     below the logo, so it sits vertically centred in the header band. */\n  display: block !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  /* Bottom row: the theme lays this out as a flex row (Contact block | copyright\n     + social), which crams into a cramped 50/50 on a phone. Stack it into full\n     width rows so each block sits on its own line. */\n  .theme-overrides .footer__bottom {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 22px;\n  }\n  .theme-overrides .footer__bottom--left,\n  .theme-overrides .footer__bottom--right {\n    width: 100%;\n    max-width: none;\n  }\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/* The search bar already shows a soft, pill-shaped focus glow via\n   .hs-search-field__bar:focus-within, so suppress the generic square outline on\n   the input inside it ‚Äî otherwise a 2px rectangle draws inside the rounded pill\n   and reads as an off/doubled highlight (Joe flagged this 7 Jul). The bar's glow\n   keeps the focus state clearly visible for accessibility. */\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\n/* --- Mobile gutter normalisation ------------------------------------------\n   Customer-reported 2026-08-17: on mobile the logo, hero/breadcrumb, article\n   body and footer links all sat at DIFFERENT left/right insets. Measured at a\n   375px viewport before the fix:\n     logo         20px  (.header__bottom padding-left: 20px)\n     hero         24px  (the shared page gutter - our target)\n     article      44px  (.hs-kb-content-wrapper--sidebar sits at 24 and adds\n                         its own 20px padding)\n     breadcrumb    48px  (.hs-kb-breadcrumb-container adds its own 24px\n                         inside the page's 24px)\n     footer links 48px  (ul.footer__menu margin-left 27.5px + the browser's\n                         default 20px list padding)\n   These rules pull all five onto the single 24px gutter. Header and footer are\n   site chrome living OUTSIDE .theme-overrides, so these selectors are\n   deliberately unscoped - everything else in this file stays scoped.\n   Verified after the fix: logo / breadcrumb / article / footer link / footer\n   contact all report L=24, R=24 at 375px. */\n@media (max-width: 767px) {\n  .header__bottom { padding-left: 24px !important; padding-right: 24px !important; }\n  .hs-kb-content-wrapper--sidebar { padding-left: 0 !important; padding-right: 0 !important; }\n  /* breadcrumb container nests its own 24px inside the page's 24px, giving 48 */\n  .hs-kb-breadcrumb-container { padding-left: 0 !important; padding-right: 0 !important; }\n  .footer__menu { margin-left: 0 !important; padding-left: 24px !important; padding-right: 24px !important; }\n  /* social icons are a flex row justified flex-end, which right-aligns them\n     against every other left-aligned footer item on narrow screens */\n  .hs-kb-social_follow { justify-content: flex-start !important; }\n}\n\n/* --- Header + footer share the content container ---------------------------\n   Requested 2026-08-17: the article column is a 1320px max-width block centred\n   in the viewport, but the header and footer ran full-bleed, so the logo, the\n   \"Submit a request\" CTA and the footer sat hard against the window edges while\n   the content floated in the middle. These rules give the header and footer\n   wrappers the same 1320px centred column.\n\n   Measured at a 1900px viewport - content column spans L=290 to R=290. After\n   these rules: logo L=290, header CTA R=290, footer social icons R=290, i.e.\n   flush with the content on both edges.\n\n   Deliberately NOT constrained: .hs-kb-search-input-wrapper (the teal hero\n   band). That is a full-bleed background by design; only its inner search box\n   is centred. Desktop only - mobile has its own single-gutter rules above, and\n   constraining these at narrow widths would fight them. */\n@media (min-width: 768px) {\n  .header__wrapper--bottom {\n    max-width: 1320px !important;\n    margin-left: auto !important;\n    margin-right: auto !important;\n  }\n  /* footer top (menu columns) - border-box so the 24px padding sits inside the\n     1368px, landing its content edge on the same 290px as the article column */\n  footer.footer > .hs_cos_wrapper {\n    max-width: 1368px !important;\n    margin-left: auto !important;\n    margin-right: auto !important;\n    box-sizing: border-box !important;\n    padding-left: 24px !important;\n    padding-right: 24px !important;\n  }\n  /* footer bottom is content-box, so max-width applies to the content area */\n  .footer__bottom {\n    max-width: 1320px !important;\n    margin-left: auto !important;\n    margin-right: auto !important;\n  }\n}\n\n/* --- Hide the language switcher bar ----------------------------------------\n   Requested 2026-08-17: the Help Portal ships a single language (English -\n   United Kingdom), so the 40px pale-blue bar above the header offered a\n   switcher with nothing to switch to. Verified before removing that the bar\n   holds no other links or buttons - its only contents are the language\n   switcher label and its submenu toggle - so hiding the whole strip loses no\n   navigation. After hiding, .header__bottom sits flush at top 0. */\n.header__top { display: none !important; }"}]},{"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})();"}]},{"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: \"60b233ca-e32e-4993-aea0-e2e4ad617214\",\n    ticks: 1791361905767,\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>"}}