@charset "utf-8";

.fa-icon,
blockquote:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/**********
 Variables
 **********/
body {
  /* Text */
  --text-font-family: 'Open Sans', sans-serif;
  --heading-font-family: 'Open Sans', sans-serif;
  --text-font-size: 16px;
  --text-font-size-large: calc(16px + 2px);
  --heading-1-font-size: 48px;
  --heading-2-font-size: 32px;
  --heading-3-font-size: 20px;
  --heading-4-font-size: 18px;
  --heading-5-font-size: 16px;
  --heading-6-font-size: calc(16px - 2px);
  /* Other */
  --border-radius-base: 8px;
  --border-radius-small: calc(8px / 2);
  --border-radius-button: 50px;
  --logo-height: 80px;
  --border-width: 1px;
  --white-color: #fff;
  /* Assets */
  --assets-check-svg: url(/hc/theming_assets/01KPDHDVN1Q6GR9GM16VKC43V6);
  --assets-circle-svg: url(/hc/theming_assets/01KPDHDVRAG71HFB8X0CFDE92S);
}

/**********
 Light mode
 **********/
body {
  --primary-color: rgba(34, 40, 49, 1);
  --secondary-color: rgba(255, 211, 105, 1);
  --primary-bg-color: rgba(255, 255, 255, 1);
  --primary-bg-color-always: rgba(255, 255, 255, 1);
  --secondary-bg-color: rgba(238, 238, 238, 1);
  --secondary-bg-color-always: rgba(238, 238, 238, 1);
  --primary-text-color: rgba(57, 62, 70, 1);
  --secondary-text-color: rgba(34, 40, 49, 1);
  --link-color: rgba(34, 40, 49, 1);
  --border-color: rgba(34, 40, 49, 1);
  --info-color: rgba(238, 238, 238, 1);
  --success-color: rgba(34, 40, 49, 1);
  --warning-color: rgba(238, 238, 238, 1);
  --danger-color: rgba(34, 40, 49, 1);
  --primary-color-light-hover: #15191f;
  --primary-color-hover: #090b0d;
  --primary-color-active: #030304;
  --secondary-color-hover: #ffc12c;
  --secondary-color-active: #ffbd1d;
  --secondary-bg-color-hover: #e4e4e4;
  --secondary-bg-color-active: #dfdfdf;
  --secondary-text-color-hover: #1a1e25;
  --secondary-text-color-active: #15191f;
  --link-color-hover: #090b0d;
  --link-color-active: #030304;
  --bg-image-opacity: 0.5;
  --bg-image-opacity-dark: 0.5;
  --bg-image-color: var(--primary-text-color);
}

.layout--style-filled .section:nth-child(even),
.layout--style-invert .section:nth-child(odd),
.section--secondary {
  /* Invert colors */
  --primary-bg-color: rgba(238, 238, 238, 1);
  --secondary-bg-color: rgba(255, 255, 255, 1);
}

/*********
 Dark mode
 *********/
.ui-dark body {
  /* UI dark colors */
  --primary-color: #935cff;
  --secondary-color: #fac63c;
  --primary-bg-color: #27282c;
  --primary-bg-color-always: #27282c;
  --secondary-bg-color: #323337;
  --secondary-bg-color-always: #323337;
  --primary-text-color: #FFFFFF;
  --secondary-text-color: #a9a9ab;
  --link-color: #62a7ff;
  --border-color: #525356;
  --info-color: #1863BC;
  --success-color: #67C30B;
  --warning-color: #F1D52F;
  --danger-color: #e64545;
  --primary-color-light-hover: #a77bff;
  --primary-color-hover: #bc99ff;
  --primary-color-active: #c6a9ff;
  --secondary-color-hover: #fcd778;
  --secondary-color-active: #fcdc87;
  --secondary-bg-color-hover: #4f5157;
  --secondary-bg-color-active: #56585f;
  --link-color-hover: #bedaff;
  --link-color-active: #cde3ff;
  --bg-image-opacity: 0.5;
  --bg-image-opacity-dark: 0.75;
  --bg-image-color: var(--primary-bg-color);
}

.ui-dark .layout--style-filled .section:nth-child(even),
.ui-dark .layout--style-invert .section:nth-child(odd),
.ui-dark .section--secondary {
  /* Invert colors */
  --primary-bg-color: #323337;
  --secondary-bg-color: #27282c;
}

/***********
 Base styles
 ***********/
*,
*:before,
*:after {
  box-sizing: border-box;
}

body,
html {
  min-height: 100vh;
}

[dir] body,
[dir] html {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--text-font-family);
  font-size: var(--text-font-size);
  font-weight: 400;
  line-height: 1.5;
  color: var(--primary-text-color);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

[dir] body {
  background-color: var(--secondary-bg-color);
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-color-hover);
}

a:active,
a.is-active {
  color: var(--link-color-active);
}

[dir] a.is-disabled {
  cursor: default;
}

a.is-disabled,
a.is-disabled:hover,
a.is-disabled:active,
a.is-disabled.is-active {
  color: var(--secondary-text-color);
}

[dir] a,
[dir] button,
[dir] [type=submit],
[dir] [type=button],
[dir] [type=reset] {
  cursor: pointer;
}

a,
input,
button,
select,
textarea,
label {
  transition: all 400ms cubic-bezier(0.17, 0.67, 0.54, 1);
}

a:focus,
input:focus,
button:focus,
select:focus,
textarea:focus,
label:focus {
  outline: none;
}

a.focus-visible,
input.focus-visible,
button.focus-visible,
select.focus-visible,
textarea.focus-visible,
label.focus-visible {
  outline: auto 5px -webkit-focus-ring-color;
}

[dir] figure {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/********
 Headings
 ********/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--heading-font-family);
  font-weight: 700;
}

h1,
.h1 {
  font-size: var(--heading-2-font-size);
  line-height: 1.2;
}

[dir] h1,
[dir] .h1 {
  margin: 0 0 1.2em;
}

[dir] .markdown h1,
[dir] .markdown .h1 {
  margin-top: 1.2em;
}

@media only screen and (min-width: 568px) and (max-aspect-ratio: 13 / 9),
only screen and (min-width: 668px) and (min-height: 416px),
only screen and (min-width: 980px) {

  h1,
  .h1 {
    font-size: var(--heading-1-font-size);
    line-height: 1.1;
  }

  [dir] h1,
  [dir] .h1 {
    margin: 0 0 1em;
  }

  [dir] .markdown h1,
  [dir] .markdown .h1 {
    margin-top: 1em;
  }
}

h2,
.h2 {
  font-size: var(--heading-3-font-size);
  line-height: 1.3;
}

[dir] h2,
[dir] .h2 {
  margin: 0 0 1.3em;
}

[dir] .markdown h2,
[dir] .markdown .h2 {
  margin-top: 1.3em;
}

@media only screen and (min-width: 568px) and (max-aspect-ratio: 13 / 9),
only screen and (min-width: 668px) and (min-height: 416px),
only screen and (min-width: 980px) {

  h2,
  .h2 {
    font-size: var(--heading-2-font-size);
    line-height: 1.2;
  }

  [dir] h2,
  [dir] .h2 {
    margin: 0 0 1.2em;
  }

  [dir] .markdown h2,
  [dir] .markdown .h2 {
    margin-top: 1.2em;
  }
}

h3,
.h3 {
  font-size: var(--heading-4-font-size);
  line-height: 1.4;
}

[dir] h3,
[dir] .h3 {
  margin: 0 0 1.4em;
}

[dir] .markdown h3,
[dir] .markdown .h3 {
  margin-top: 1.4em;
}

@media only screen and (min-width: 568px) and (max-aspect-ratio: 13 / 9),
only screen and (min-width: 668px) and (min-height: 416px),
only screen and (min-width: 980px) {

  h3,
  .h3 {
    font-size: var(--heading-3-font-size);
    line-height: 1.3;
  }

  [dir] h3,
  [dir] .h3 {
    margin: 0 0 1.3em;
  }

  [dir] .markdown h3,
  [dir] .markdown .h3 {
    margin-top: 1.3em;
  }
}

h4,
.h4 {
  font-size: var(--heading-4-font-size);
  line-height: 1.4;
}

[dir] h4,
[dir] .h4 {
  margin: 0 0 1.4em;
}

[dir] .markdown h4,
[dir] .markdown .h4 {
  margin-top: 1.4em;
}

h5,
.h5 {
  font-size: var(--heading-5-font-size);
  line-height: 1.5;
}

[dir] h5,
[dir] .h5 {
  margin: 0 0 1.5em;
}

[dir] .markdown h5,
[dir] .markdown .h5 {
  margin-top: 1.5em;
}

h6,
.h6 {
  font-size: var(--heading-6-font-size);
  line-height: 1.5;
}

[dir] h6,
[dir] .h6 {
  margin: 0 0 1.5em;
}

[dir] .markdown h6,
[dir] .markdown .h6 {
  margin-top: 1.5em;
}

/**********************
 Other default elements
 *********************/
[dir] p,
[dir] ul,
[dir] ol,
[dir] dl,
[dir] pre,
[dir] table,
[dir] blockquote {
  margin: 1.5em 0 1.5em;
}

[dir] li {
  margin: 0.75em 0 0.75em;
}

small,
.small {
  font-size: var(--heading-6-font-size);
}

[role="main"] {
  flex-grow: 1;
  position: relative;
}

hr {
  display: block;
  height: 0;
}

[dir] hr {
  border: 0;
  border-top: 1px solid var(--border-color);
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  color: var(--primary-bg-color);
}

[dir] pre {
  padding: 8px 16px;
  border-radius: var(--border-radius-base);
  background-color: var(--primary-text-color);
}

.ui-dark pre {
  color: var(--secondary-text-color);
}

[dir].ui-dark pre {
  background-color: var(--secondary-bg-color);
}

blockquote {
  display: block;
  position: relative;
  z-index: 2;
}

[dir=ltr] blockquote {
  padding-left: 16px;
  border-left: 1px solid var(--border-color);
}

[dir=rtl] blockquote {
  padding-right: 16px;
  border-right: 1px solid var(--border-color);
}

@media only screen and (min-width: 568px) and (max-aspect-ratio: 13 / 9),
only screen and (min-width: 668px) and (min-height: 416px),
only screen and (min-width: 980px) {
  [dir=ltr] blockquote {
    padding-left: 24px;
  }

  [dir=rtl] blockquote {
    padding-right: 24px;
  }
}

@media only screen and (min-width: 980px) {
  [dir=ltr] blockquote {
    padding-left: 32px;
  }

  [dir=rtl] blockquote {
    padding-right: 32px;
  }
}

blockquote:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: -4px;
  font-size: 60px;
  color: var(--secondary-bg-color);
}

[dir=ltr] blockquote:before {
  left: 8px;
}

[dir=rtl] blockquote:before {
  right: 8px;
}

@media only screen and (min-width: 568px) and (max-aspect-ratio: 13 / 9) and (max-width: 979px),
only screen and (min-width: 668px) and (min-height: 416px) and (max-width: 979px) {
  [dir=ltr] blockquote:before {
    left: 12px;
  }

  [dir=rtl] blockquote:before {
    right: 12px;
  }
}

@media only screen and (min-width: 980px) {
  [dir=ltr] blockquote:before {
    left: 16px;
  }

  [dir=rtl] blockquote:before {
    right: 16px;
  }
}

.list-unstyled {
  list-style: none;
}

[dir=ltr] .list-unstyled {
  padding-left: 0;
}

[dir=rtl] .list-unstyled {
  padding-right: 0;
}

dl.details {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  -ms-grid-columns: 1fr 2fr;
  grid-template-columns: 1fr 2fr;
}

[dir] dl.details {
  margin-bottom: 32px;
  margin-top: 0;
}

dl.details > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

dl.details > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

dl.details > dt {
  font-weight: 700;
}

[dir] dl.details > dt {
  margin-bottom: 12px;
}

[dir=ltr] dl.details > dt {
  margin-right: 8px;
}

[dir=rtl] dl.details > dt {
  margin-left: 8px;
}

[dir] dl.details > dd {
  margin-bottom: 12px;
}

dl.details > div {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
}

[dir] dl.details > div {
  margin-bottom: 12px;
}

dl.details--type-2 {
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

[dir] dl.details--type-2 {
  margin-bottom: 0;
}

dl.details--type-2 > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

dl.details--type-2 > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

dl.details--type-2 > dd {
  color: var(--secondary-text-color);
}

@media only screen and (min-width: 980px),
only screen and (max-width: 567px) and (max-aspect-ratio: 13 / 9) {
  [dir=ltr] dl.details--type-2 > dd {
    text-align: right;
  }

  [dir=rtl] dl.details--type-2 > dd {
    text-align: left;
  }
}

[dir] dl.details--no-margin {
  margin-bottom: 0;
}

.text-secondary {
  font-size: var(--heading-6-font-size);
  line-height: 1.5;
  color: var(--secondary-text-color);
}

/******
 Tables
 ******/
.table-container {
  display: block;
  width: 100%;
  overflow-x: auto;
}

[dir] .table-container {
  border: 1px solid var(--border-color);
}

.table-container table:not(.pika-table) {
  width: calc(100% + 3px);
  max-width: calc(100% + 3px);
}

[dir] .table-container table:not(.pika-table) {
  margin: -1px;
}

table:not(.pika-table) {
  width: 100%;
  max-width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

table:not(.pika-table) thead {
  font-weight: 700;
}

[dir] table:not(.pika-table) thead {
  background-color: var(--secondary-bg-color);
}

[dir] table:not(.pika-table) tfoot {
  background-color: var(--secondary-bg-color);
}

table:not(.pika-table) thead,
table:not(.pika-table) tbody,
table:not(.pika-table) tfoot {
  width: 100%;
  max-width: 100%;
}

[dir=ltr] table:not(.pika-table) th {
  border-left: 1px solid var(--border-color);
}

[dir=rtl] table:not(.pika-table) th {
  border-right: 1px solid var(--border-color);
}

[dir] table:not(.pika-table) td {
  padding: 8px;
  border: 1px solid var(--border-color);
}

/*******
 Iframes
 *******/
.iframe {
  display: block;
  width: 100%;
  height: 0;
  position: relative;
}

.iframe iframe {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

[dir=ltr] .iframe iframe {
  left: 0;
}

[dir=rtl] .iframe iframe {
  right: 0;
}

[dir] .markdown > * {
  margin: 1.5em 0 1.5em;
}

/* Wysiwyg body */
.wysiwyg-body p code {
  display: inline-block;
  color: var(--primary-text-color);
  white-space: pre;
}

[dir] .wysiwyg-body p code {
  padding: 0 0.25em;
  border-radius: 2px;
  border: 1px solid var(--border-color);
  background-color: var(--secondary-bg-color);
}

.wysiwyg-body a {
  text-decoration: underline;
}

.wysiwyg-body a:hover {
  text-decoration: none;
}

.wysiwyg-body blockquote {
  font-style: italic;
  overflow: hidden;
}

[dir=ltr] .wysiwyg-body blockquote {
  border-left: 5px solid var(--border-color);
  margin-left: 0;
  margin-right: 0;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

[dir=rtl] .wysiwyg-body blockquote {
  border-right: 5px solid var(--border-color);
  margin-right: 0;
  margin-left: 0;
  padding-right: 1.5em;
  padding-left: 1.5em;
}

.comments__item-body.wysiwyg-body blockquote:before {
  color: var(--primary-bg-color);
}

[dir] .comments__item-body.wysiwyg-body p code,
[dir].ui-dark .comments__item-body pre {
  background-color: var(--primary-bg-color);
}

.nesty-panel ul:nth-child(2) {
  position: relative;
}

.nesty-search {
  position: absolute;
  transform: translateY(-100%);
  z-index: 1;
  outline: none !important;
  border: none !important;
  background: none !important;
}

[dir] ul[data-garden-version] {
  margin: 0;
}

.approval-request .fSbCBS {
  background-color: var(--secondary-bg-color);
  border-radius: var(--border-radius-base);
}

.approval-request .bFtQSZ {
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius-base);
}

/* Other */
[dir] reach-portal [role=menuitem],
[dir] .dropdown__menuitem {
  text-align: left;
}

.page-heading__nav,
.page-heading__meta {
  row-gap: 8px;
}

.header__link {
  display: flex;
  align-items: center;
  gap: 8px;
}

[dir] zd-summary-block {
  color: var(--primary-text-color);
  background-color: var(--secondary-bg-color);
  border-radius: var(--border-radius-small);
  border-color: var(--primary-color);
}

@media only screen and (min-width: 980px) {
  html[dir].ui-light .btn.header__link--md-icon,
  html[dir].ui-light .btn.header__link--md-icon:hover,
  html[dir].ui-light .btn.header__link--md-icon:focus,
  html[dir].ui-light .btn.header__link--md-icon:active,
  html[dir].ui-dark .btn.header__link--md-icon,
  html[dir].ui-dark .btn.header__link--md-icon:hover,
  html[dir].ui-dark .btn.header__link--md-icon:focus,
  html[dir].ui-dark .btn.header__link--md-icon:active{
    padding: 0;
    background-color: transparent;
    border-color: transparent;
  }
}

@media only screen and (max-width: 979px) {
  html[dir] .header__link--md-icon {
    box-sizing: content-box;
    width: 1.5em;
    height: 1.5em;
    padding: 7px;
  }
}

[dir].ui-light .welcome--style-1 .welcome__section,
[dir].ui-light .page-heading--style-1,
[dir].ui-light .cta--style-3 .cta__section {
  background-color: var(--primary-text-color);
}

[dir] .vote--style-1 .vote__btn {
  color: #fff;
}

@media only screen and (min-width: 980px) {
  html[dir=ltr] .header__col .btn {
    margin-left: 0;
  }

  html[dir=rtl] .header__col .btn {
    margin-right: 0;
  }

  .header__col {
    gap: 14px;
  }
}

/* Blockquotes */
.markdown blockquote {
  display: block;
  width: 100%;
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin-right: 0;
  margin-left: 0;
}

[dir=ltr] .markdown blockquote {
  border-top-right-radius: var(--border-radius-base, 8px);
  border-bottom-right-radius: var(--border-radius-base, 8px);
  border-left: 4px solid var(--primary-color, #000c20);
  padding: 8px 0 8px 12px;
}

[dir=rtl] .markdown blockquote {
  border-top-left-radius: var(--border-radius-base, 8px);
  border-bottom-left-radius: var(--border-radius-base, 8px);
  border-right: 4px solid var(--primary-color, #000c20);
  padding: 8px 12px 8px 0;
}

@media (min-width: 768px) {
  [dir=ltr] .markdown blockquote {
    padding: 8px 0 8px 24px;
  }

  [dir=rtl] .markdown blockquote {
    padding: 8px 24px 8px 0;
  }
}

.markdown blockquote::before {
  content: "\f10e";
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: block;
  position: absolute;
  z-index: -1;
  top: -8px;
  font-size: 50px;
  color: var(--secondary-bg-color, #f1f4fa);
}

[dir=ltr] .markdown blockquote::before {
  left: 8px;
}

[dir=rtl] .markdown blockquote::before {
  right: 8px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  [dir=ltr] .markdown blockquote::before {
    left: 12px;
  }

  [dir=rtl] .markdown blockquote::before {
    right: 12px;
  }
}

@media (min-width: 1024px) {
  [dir=ltr] .markdown blockquote::before {
    left: 16px;
  }

  [dir=rtl] .markdown blockquote::before {
    right: 16px;
  }
}

/* Tables — show fully, no inner scrollbar */
[dir] figure.wysiwyg-table {
  display: block;
  width: 100%;
  overflow: visible;
  overflow-y: visible;
  overflow-x: visible;
  max-height: none;
  height: auto;
}

#service-catalog a {
  color: var(--primary-text-color);
}

/* ================================================================
   SWOTZY CUSTOM — Header + Hero
   Scoped overrides. Safe to remove without affecting base theme.
   ================================================================ */

:root {
  --sw-ink: #222831;
  --sw-ink-2: #393e46;
  --sw-accent: #ffd369;
  --sw-mist: #e1e7ed;
  --sw-cloud: #eeeeee;
  --sw-white: #ffffff;
  --sw-radius-lg: 12px;
  --sw-radius-pill: 999px;
  --sw-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body,
.sw-hero,
.sw-header {
  font-family: var(--sw-font);
}

/* ---------- Header ---------- */
.sw-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--sw-white);
  border-bottom: 1px solid rgba(34, 40, 49, 0.06);
  transition: box-shadow 0.2s ease, background 0.2s ease;
  isolation: isolate;
}

.sw-header.is-scrolled {
  box-shadow: 0 4px 20px rgba(34, 40, 49, 0.06);
}

/* Neutralize base theme's `.header--is-fixed .header__container { position: fixed }`
   so our sticky .sw-header is the single source of truth for stickiness and
   nothing inside the header escapes into its own fixed layer below other content. */
.sw-header .header__container {
  background: transparent !important;
  border: 0 !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 9999 !important;
  transform: none !important;
}

.sw-header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  min-height: 92px;
}

.sw-header__left {
  display: flex;
  align-items: center;
}

.sw-header__logo {
  display: inline-flex;
  align-items: center;
}

/* Force dark logo on light bg (override base theme logo-swap logic) */
/* Logo sized 1/3 larger: 40 → 54px */
.sw-header .sw-header__logo,
.sw-header .header__logo {
  height: 60px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.sw-header .header__logo img.header__logo-img,
.sw-header .sw-header__logo img.header__logo-img,
.sw-header .header__logo-img {
  display: block !important;
  height: 54px !important;
  width: auto !important;
  max-height: 54px !important;
}

.sw-header .header__logo img.header__logo-img-light,
.sw-header .sw-header__logo img.header__logo-img-light,
.sw-header .header__logo-img-light {
  display: none !important;
}

.sw-header__right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Language switcher — forced dark on white */
body .sw-header .sw-lang__trigger,
body .sw-header a.sw-lang__trigger,
body .sw-header .header__link.sw-lang__trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--sw-ink) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 8px 10px !important;
  border-radius: var(--sw-radius-lg) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

body .sw-header .sw-lang__trigger:hover,
body .sw-header a.sw-lang__trigger:hover {
  background: var(--sw-cloud) !important;
  color: var(--sw-ink) !important;
}

body .sw-header .sw-lang__trigger .sw-lang__globe,
body .sw-header .sw-lang__trigger .sw-lang__label,
body .sw-header .sw-lang__trigger svg {
  color: var(--sw-ink) !important;
  fill: var(--sw-ink) !important;
}

.sw-lang__label {
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--sw-ink) !important;
}

/* Icon button (search, avatar) */
.sw-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--sw-radius-pill);
  color: var(--sw-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease;
  text-decoration: none !important;
}

.sw-icon-btn:hover {
  background: var(--sw-cloud);
}

.sw-icon-btn svg {
  color: var(--sw-ink);
}

/* Buttons */
.sw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--sw-radius-lg);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: var(--sw-font);
}

.sw-btn:active {
  transform: translateY(1px);
}

/* Submit a request — now plain text link, no frame */
.sw-btn--outline {
  color: var(--sw-ink);
  border-color: transparent !important;
  background: transparent !important;
  padding: 0 12px !important;
  font-weight: 500 !important;
}

.sw-btn--outline:hover {
  background: transparent !important;
  color: var(--sw-ink-2) !important;
  text-decoration: underline !important;
}

.sw-btn--primary {
  color: var(--sw-white) !important;
  background: var(--sw-ink) !important;
  border-color: var(--sw-ink) !important;
  font-weight: 600 !important;
  padding: 0 20px !important;
  min-width: 180px !important;
  white-space: nowrap !important;
}

.sw-btn--primary .sw-btn__label,
.sw-btn--primary span {
  color: var(--sw-white) !important;
  display: inline-block !important;
  visibility: visible !important;
  white-space: nowrap !important;
}

.sw-btn--primary:hover {
  background: var(--sw-ink-2) !important;
  border-color: var(--sw-ink-2) !important;
  color: var(--sw-white) !important;
}

/* ---------- Hero (forces override of welcome--style-* base theme) ---------- */
.sw-hero.welcome,
body .sw-hero,
body [dir] .sw-hero {
  background: linear-gradient(100deg,
    var(--sw-mist) 0%,
    var(--sw-cloud) 40%,
    #f4e8c5 75%,
    var(--sw-accent) 100%) !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
  overflow: visible !important;
  max-height: none !important;
}

.sw-hero .welcome__bg,
.sw-hero .welcome__image {
  display: none !important;
}

/* Nuke welcome--style-* dark background + negative margin + overflow hidden */
body .sw-hero .welcome__section,
body [dir] .sw-hero .welcome__section,
.welcome--style-1.sw-hero .welcome__section,
.welcome--style-2.sw-hero .welcome__section,
.welcome--style-3.sw-hero .welcome__section,
[dir] .welcome--style-1.sw-hero .welcome__section,
[dir] .welcome--style-2.sw-hero .welcome__section,
[dir] .welcome--style-3.sw-hero .welcome__section {
  background: transparent !important;
  background-color: transparent !important;
  margin: 0 !important;
  padding: 120px 0 140px !important;
  max-height: none !important;
  overflow: visible !important;
  position: relative !important;
}

body .sw-hero .welcome__section::after,
body .sw-hero .welcome__section::before {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
}

.sw-hero__section {
  position: relative;
  z-index: 1;
}

.sw-hero__container,
body .sw-hero .welcome__container {
  max-width: 1160px !important;
  margin: 0 auto !important;
  display: block !important;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
  box-sizing: border-box;
}

.sw-hero__content {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  margin: 0;
}

/* Force dark title — beat .welcome--style-2 .h1 { color: #fff } */
body .sw-hero .sw-hero__title,
body .sw-hero h1.h1,
body .welcome--style-1.sw-hero .h1,
body .welcome--style-2.sw-hero .h1,
body .welcome--style-3.sw-hero .h1 {
  font-family: var(--sw-font) !important;
  font-weight: 800 !important;
  font-size: clamp(44px, 6.2vw, 72px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--sw-ink) !important;
  margin: 0 0 18px !important;
  text-align: left !important;
}

.sw-hero__subtitle {
  font-family: var(--sw-font);
  font-size: 18px;
  line-height: 1.5;
  color: var(--sw-ink-2);
  margin: 0 0 28px;
  max-width: 720px;
  text-align: left;
}

/* ---------- Search bar in hero — rounded-rect (matches nav buttons) ---------- */
.sw-hero__search {
  width: 100%;
  max-width: 720px;
  margin: 0;
}

.sw-hero__search .search,
.sw-hero__search form,
.sw-hero__search .search form {
  width: 100% !important;
  display: block !important;
  position: relative;
  max-width: 720px;
}

.sw-hero__search .search__input-wrap,
.sw-hero__search .search__input-group {
  width: 100%;
  position: relative;
}

body .sw-hero__search input[type="search"],
body .sw-hero__search input.search-query,
body .sw-hero__search input[type="text"] {
  width: 100% !important;
  height: 56px !important;
  padding: 0 110px 0 48px !important;
  border-radius: var(--sw-radius-lg) !important;
  border: 0 !important;
  background: var(--sw-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16'><path fill='%23393e46' d='M15.9 14.96l-4.65-4.65a6.3 6.3 0 1 0-.94.94l4.65 4.65a.37.37 0 0 0 .53 0l.47-.47a.37.37 0 0 0-.06-.47zM6.33 11.33a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/></svg>") no-repeat 20px center !important;
  font-family: var(--sw-font) !important;
  font-size: 16px !important;
  color: var(--sw-ink) !important;
  box-shadow: 0 4px 24px rgba(34, 40, 49, 0.06) !important;
  outline: none !important;
  transition: box-shadow 0.18s ease !important;
  box-sizing: border-box !important;
}

.sw-hero__search input::placeholder {
  color: #8a9099 !important;
}

.sw-hero__search input:focus {
  box-shadow: 0 0 0 3px rgba(255, 211, 105, 0.45), 0 4px 24px rgba(34, 40, 49, 0.06) !important;
}

/* Search submit button — light cloud bg, dark ink text, matches nav button radius */
.sw-hero__search button[type="submit"],
.sw-hero__search input[type="submit"],
.sw-hero__search .search__submit {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: var(--sw-radius-lg) !important;
  background: var(--sw-cloud) !important;
  color: var(--sw-ink) !important;
  border: 0 !important;
  font-family: var(--sw-font) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer;
  z-index: 2;
}

.sw-hero__search button[type="submit"]:hover,
.sw-hero__search input[type="submit"]:hover,
.sw-hero__search .search__submit:hover {
  background: #dedede !important;
  color: var(--sw-ink) !important;
}

/* ---------- Search overlay (reuses theme #modal-search) ---------- */
#modal-search.is-open,
#modal-search.modal--is-open {
  background: rgba(34, 40, 49, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#modal-search .modal-search {
  padding-top: 10vh;
}

#modal-search input[type="search"],
#modal-search input.search-query,
#modal-search input[type="text"] {
  height: 56px;
  border-radius: var(--sw-radius-pill);
  padding: 0 24px 0 54px;
  font-size: 16px;
  background-color: var(--sw-white);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* ---------- Full-width break-out (escape .layout--in-container via ::before) ---------- */
/* Let the layout card keep its shadow/border for other sections,
   but give the header and hero a full-viewport-wide background. */

/* Header: solid white. Background extension is done via a ::before pseudo
   so dropdowns (language switcher, avatar) can extend BELOW the header
   without being clipped by clip-path. */
body .sw-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background: var(--sw-white) !important;
  border-bottom: 1px solid rgba(34, 40, 49, 0.06) !important;
  transition: box-shadow 0.2s ease !important;
  isolation: isolate !important;
  overflow: visible !important;
  /* IMPORTANT: no clip-path here — it was cutting off open dropdowns */
}

/* Full-viewport white background behind the header, rendered via pseudo
   so it doesn't clip child content */
body .sw-header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100vmax;
  right: -100vmax;
  background: var(--sw-white);
  z-index: -1;
  pointer-events: none;
}

body .sw-header.is-scrolled {
  box-shadow: 0 4px 20px rgba(34, 40, 49, 0.08) !important;
}

/* Dropdowns inside the header must float ABOVE following page sections.
   Base theme gives them z-index: 99; bump to match the header. */
body .sw-header .dropdown,
body .sw-header .dropdown__content,
body .sw-header reach-portal [role="menu"] {
  z-index: 10001 !important;
}

body .sw-header .dropdown__content.is-active,
body .sw-header reach-portal [role="menu"].is-active {
  z-index: 10001 !important;
}

/* Make sure modal layers (z-index: 101 in base theme) still appear on top of
   the sticky header when opened. Modals must stay above everything. */
body .modal,
body .modal.is-active {
  z-index: 10000 !important;
}

/* Ensure no parent of the sticky header clips it or breaks sticky behavior.
   `overflow: hidden` on an ancestor turns sticky into scroll-bound which can
   cause the header to slide under sibling sections that establish their own
   stacking contexts. We use `clip` (still allows sticky) on x-axis and
   `visible` on y-axis. */
html,
body {
  overflow-x: clip !important;
}

body {
  overflow-y: visible !important;
}

/* Nuke any stacking-context shenanigans on common ancestors so that the
   sticky header's z-index actually wins against later sections. */
body .layout,
body .layout--in-container {
  overflow: visible !important;
  overflow-x: clip !important;
  isolation: auto !important;
  transform: none !important;
  filter: none !important;
}

/* Force every section below the header to live in a lower stacking layer than
   the sticky header, regardless of any local z-index they declare. */
body .sw-hero,
body .sw-hero__section,
body .section,
body .welcome__section,
body .cta__section,
body main,
body .main-content {
  z-index: 0 !important;
}

/* Hero: gradient, extends full viewport the same way */
body .sw-hero {
  position: relative !important;
  background: linear-gradient(100deg,
    var(--sw-mist) 0%,
    var(--sw-cloud) 40%,
    #f4e8c5 75%,
    var(--sw-accent) 100%) !important;
  box-shadow: 0 0 0 100vmax transparent !important;
  clip-path: inset(0 -100vmax) !important;
}

/* Hero bg extension: use a separate backdrop via outline */
body .sw-hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((100% - 100vw) / 2);
  width: 100vw;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    var(--sw-mist) 0%,
    var(--sw-cloud) 40%,
    #f4e8c5 75%,
    var(--sw-accent) 100%);
}

body .sw-hero > * {
  position: relative;
  z-index: 1;
}

body .sw-hero .welcome__section {
  background: transparent !important;
  background-color: transparent !important;
}

/* Allow the pseudo bg to show through: parent must allow overflow visible */
.layout,
.layout--in-container {
  overflow-x: clip !important;
}

/* Kill the 1264px "card" container so the whole page is edge-to-edge.
   Content stays centered via each section's inner .container. */
body .layout,
body [dir] .layout,
body .layout--in-container,
body [dir] .layout--in-container {
  max-width: none !important;
  margin: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
}

@media (max-width: 600px) {
  body .sw-header .container,
  body .sw-hero .welcome__container,
  body .sw-hero .container,
  body .section > .container,
  body .section .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Unified container: every section content block uses the exact same 1440px max + 40px side padding */
body .sw-header .container,
body .sw-hero .welcome__container,
body .sw-hero .container,
body .section > .container,
body .section .container {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Kill base grid row negative margins so card boxes align with container padding */
body .section > .container > .row,
body .section .container > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body .section > .container > .row > .col,
body .section > .container > .row > [class*="col--"],
body .section .container > .row > .col,
body .section .container > .row > [class*="col--"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Restore horizontal gap between cards via grid gap instead of col padding */
body #helpers .row,
body #category-blocks .row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

body #helpers .col,
body #helpers [class*="col--"],
body #category-blocks .col,
body #category-blocks [class*="col--"] {
  flex: 1 1 calc(50% - 10px) !important;
  min-width: 260px;
  max-width: none !important;
  width: auto !important;
}

@media (min-width: 980px) {
  body #helpers .col,
  body #helpers [class*="col--"],
  body #category-blocks .col,
  body #category-blocks [class*="col--"] {
    flex: 1 1 calc(33.333% - 14px) !important;
  }
}

/* ---------- Header: extra safety for signed-in avatar + hide any stray mobile elements on desktop ---------- */
.sw-header .sw-avatar {
  padding: 0 !important;
  overflow: hidden;
  background: var(--sw-cloud);
}

.sw-header .sw-avatar img,
.sw-header .sw-avatar .user-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Force-hide mobile menu trigger on desktop, in case .is-hidden--lg-up fails */
@media (min-width: 992px) {
  .sw-header .sw-header__mobile { display: none !important; }
}

/* Ensure Join Swotzy & Submit buttons keep their text fully visible */
.sw-btn {
  min-width: 0;
  flex-shrink: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .sw-btn--primary { padding: 0 14px; font-size: 13px; }
  .sw-btn--outline { padding: 0 14px; font-size: 13px; }
}

@media (max-width: 991px) {
  body .sw-header__right { display: none !important; }
  body .sw-hero .welcome__section { padding: 64px 0 80px !important; }
  .sw-hero__content { max-width: 100%; }
  .sw-hero__subtitle { font-size: 16px; }
}

@media (max-width: 600px) {
  /* Full-bleed header on mobile — wider nav area, but include the
     padding inside the width so we don't cause horizontal overflow. */
  body .sw-header .container,
  body .sw-header__container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body .sw-hero .welcome__container { padding-left: 20px !important; padding-right: 20px !important; }
  /* Logo + toggle vertically centered in a taller header */
  .sw-header__container {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .sw-header__left,
  .sw-header__mobile {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
  }
  /* Outer wrapper with a small breath above and below */
  body .sw-header { padding: 4px 0 8px; }
  /* Belt-and-braces: stop the page from ever growing wider than the viewport */
  html, body { overflow-x: hidden !important; max-width: 100vw; }
  .sw-header__logo .header__logo-img { height: 22px !important; }
  .sw-hero__search input[type="search"],
  .sw-hero__search input.search-query,
  .sw-hero__search input[type="text"] { height: 50px !important; font-size: 15px !important; padding-right: 90px !important; }
  .sw-hero__search button[type="submit"],
  .sw-hero__search input[type="submit"] { height: 40px !important; padding: 0 14px !important; font-size: 13px !important; }
}

/* =========================================================================
   SWOTZY CUSTOM — "Most Popular + Latest Articles" two-column row
   Sits directly under the hero, above the category grid.
   No icons on the column headers. Divider lines are #eeeeee.
   ========================================================================= */
body .sw-articles-row {
  padding: 56px 0 8px !important;
  background: transparent !important;
  position: relative;
  z-index: 0;
}

body .sw-articles-row .container {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.sw-articles-row__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px;
  align-items: start;
}

.sw-articles-col {
  min-width: 0;
}

.sw-articles-col__header {
  font-family: var(--sw-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sw-ink);
  margin: 0 0 20px;
  padding: 0;
}

/* Secondary header — used for "Promoted articles" nested below "Most popular" */
.sw-articles-col__header--secondary {
  margin-top: 40px;
}

.sw-articles-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* No border-top here — avoids an orphan line when the list is empty.
     Items carry their own border-bottom dividers. */
}

.sw-articles-list__item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #eeeeee;
}

.sw-articles-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 12px;
  text-decoration: none !important;
  color: var(--sw-ink) !important;
  font-family: var(--sw-font);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  border-radius: 8px;
  transition: color 0.15s ease, opacity 0.15s ease,
              background-color 0.18s ease, transform 0.18s ease,
              padding-left 0.18s ease;
}

/* Default hover (used by "Most popular" — keep the subtle fade) */
.sw-articles-list__link:hover,
.sw-articles-list__link:focus {
  color: var(--sw-ink) !important;
  opacity: 0.75;
  text-decoration: none !important;
}

/* Promoted + Latest get the yellow-background, slide-right hover treatment */
.sw-articles-list--promoted .sw-articles-list__link,
.sw-articles-list--latest   .sw-articles-list__link {
  /* keep room for the slide */
  padding-left: 12px;
}

.sw-articles-list--promoted .sw-articles-list__link:hover,
.sw-articles-list--promoted .sw-articles-list__link:focus,
.sw-articles-list--latest   .sw-articles-list__link:hover,
.sw-articles-list--latest   .sw-articles-list__link:focus {
  background-color: #ffd369 !important;
  color: var(--sw-ink) !important;
  opacity: 1;
  padding-left: 24px;
  transform: translateX(0);
  text-decoration: none !important;
}

.sw-articles-list__title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sw-articles-list__arrow {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  color: var(--sw-ink);
  transform: translateY(-1px);
}

.sw-articles-list__placeholder {
  height: 58px;
  border-bottom: 1px solid #eeeeee;
}

/* Responsive — collapse to one column on smaller screens */
@media (max-width: 900px) {
  .sw-articles-row__grid { grid-template-columns: 1fr; gap: 40px; }
  body .sw-articles-row { padding: 48px 0 8px !important; }
}

@media (max-width: 560px) {
  body .sw-articles-row .container { padding-left: 20px !important; padding-right: 20px !important; }
  .sw-articles-list__link { font-size: 16px; padding: 16px 0; }
}

/* =========================================================================
   SWOTZY CUSTOM — "Browse by category" grid (under hero)
   All cards are the same fixed size. Icons are the same fixed size.
   Icons are assigned by category position (1st–6th category gets
   category_icon_1 … category_icon_6). Any 7th+ category falls back to icon 1.
   ========================================================================= */
body .sw-categories {
  padding: 72px 0 40px !important;
  background: transparent !important;
  position: relative;
  z-index: 0;
}

body .sw-categories .container {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.sw-categories__heading {
  font-family: var(--sw-font) !important;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sw-ink);
  margin: 0 0 28px;
  text-align: left;
}

.sw-categories__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.sw-categories__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  background: var(--sw-white);
  border: 1px solid rgba(34, 40, 49, 0.08);
  border-radius: 16px;
  padding: 32px 24px;
  text-decoration: none;
  color: var(--sw-ink);
  min-height: 240px;               /* fixed, equal card height */
  box-shadow: 0 1px 2px rgba(34, 40, 49, 0.03);
  transition: transform 0.15s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  box-sizing: border-box;
}

.sw-categories__card:hover,
.sw-categories__card:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(34, 40, 49, 0.08);
  border-color: rgba(34, 40, 49, 0.14);
  text-decoration: none;
  color: var(--sw-ink);
}

/* Fixed-size image slot — same size for every card, every card shows an icon
   at identical dimensions regardless of source PNG resolution. */
.sw-categories__media {
  width: 96px;
  height: 96px;
  margin: 0 0 20px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* All 6 icons are rendered per card but hidden by default. Exactly one
   icon per card is revealed via a position-based rule, matching the
   Zendesk admin `position` order of categories. This is locale-
   independent — the 1st card always gets the Getting Started icon
   regardless of whether its name is "Getting Started", "Darba uzsākšana",
   or "Pradžia". If you reorder the categories in Zendesk admin, update
   the nth-child rules below to match. */
.sw-categories__icon {
  width: 96px !important;
  height: 96px !important;
  max-width: 96px;
  max-height: 96px;
  object-fit: contain;
  display: none;
}

/* Admin order:
   1. Getting Started
   2. Platform Features
   3. Integrations
   4. Shipping Services
   5. International Shipments
   6. Account Settings and Billing */
.sw-categories__grid > .sw-categories__card:nth-child(1) .sw-categories__icon--getting-started,
.sw-categories__grid > .sw-categories__card:nth-child(2) .sw-categories__icon--platform-features,
.sw-categories__grid > .sw-categories__card:nth-child(3) .sw-categories__icon--integrations,
.sw-categories__grid > .sw-categories__card:nth-child(4) .sw-categories__icon--shipping-services,
.sw-categories__grid > .sw-categories__card:nth-child(5) .sw-categories__icon--international-shipments,
.sw-categories__grid > .sw-categories__card:nth-child(6) .sw-categories__icon--account-billing {
  display: block;
}

/* Hide the base theme's legacy `.category-blocks` when the new Swotzy
   category grid is also on the page, so we don't render categories twice. */
body .sw-categories ~ #category-blocks,
body .sw-categories ~ .category-blocks,
body:has(.sw-categories) .category-blocks {
  display: none !important;
}

.sw-categories__title {
  font-family: var(--sw-font);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sw-ink);
  margin: 0 0 10px;
}

.sw-categories__desc {
  font-family: var(--sw-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--sw-ink-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive breakpoints */
@media (max-width: 980px) {
  .sw-categories__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .sw-categories__card { min-height: 220px; padding: 28px 20px; }
  .sw-categories__media { width: 84px; height: 84px; margin-bottom: 16px; }
  .sw-categories__icon { width: 84px !important; height: 84px !important; max-width: 84px; max-height: 84px; }
  .sw-categories__title { font-size: 22px; }
}

@media (max-width: 560px) {
  body .sw-categories { padding: 48px 0 24px !important; }
  body .sw-categories .container { padding-left: 20px !important; padding-right: 20px !important; }
  .sw-categories__grid { grid-template-columns: 1fr; gap: 14px; }
  .sw-categories__card { min-height: 200px; padding: 24px 18px; }
  .sw-categories__media { width: 72px; height: 72px; margin-bottom: 14px; }
  .sw-categories__icon { width: 72px !important; height: 72px !important; max-width: 72px; max-height: 72px; }
  .sw-categories__title { font-size: 21px; }
}

/* =========================================================================
   SWOTZY CUSTOM — "Contact our Support Team" banner
   Sits under the "Browse by category" grid.
   Uses the same cream → yellow gradient as the hero, centered text,
   yellow "Submit a request" pill button.
   ========================================================================= */
body .sw-support-cta {
  padding: 48px 0 80px !important;
  background: transparent !important;
  background-color: transparent !important;
  position: relative;
  z-index: 0;
}

/* No section-wide background — the card floats on the page. */
body .sw-support-cta::before {
  content: none !important;
  display: none !important;
}

body .sw-support-cta .container {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.sw-support-cta__card {
  max-width: 1360px;
  margin: 0 auto;
  border-radius: 20px;
  padding: 56px 40px;
  text-align: center;
  background: linear-gradient(100deg,
    var(--sw-mist) 0%,
    var(--sw-cloud) 40%,
    #f4e8c5 75%,
    var(--sw-accent) 100%);
  box-shadow: 0 1px 2px rgba(34, 40, 49, 0.03);
}

.sw-support-cta__title {
  font-family: var(--sw-font);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sw-ink);
  margin: 0 0 14px;
}

.sw-support-cta__text {
  font-family: var(--sw-font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--sw-ink-2);
  margin: 0 0 28px;
}

.sw-support-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  min-height: 48px;
  border-radius: var(--sw-radius-lg);
  background-color: #ffd369;
  color: var(--sw-ink) !important;
  font-family: var(--sw-font);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background-color 0.18s ease, transform 0.18s ease,
              box-shadow 0.18s ease;
  box-shadow: 0 2px 6px rgba(34, 40, 49, 0.08);
}

.sw-support-cta__btn:hover,
.sw-support-cta__btn:focus {
  background-color: #ffc944;
  color: var(--sw-ink) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(34, 40, 49, 0.12);
}

@media (max-width: 600px) {
  body .sw-support-cta { padding: 32px 0 56px !important; }
  body .sw-support-cta .container { padding-left: 20px !important; padding-right: 20px !important; }
  .sw-support-cta__card { padding: 40px 24px; border-radius: 16px; }
  .sw-support-cta__text { font-size: 15px; }
}

/* =========================================================================
   SWOTZY CUSTOM — Footer: dark background (#222831), brand description +
   social icons on top, company description on the bottom.
   ========================================================================= */
body .footer,
body .footer--style-1,
body .footer--style-2,
body .footer--style-3,
body [dir] .footer,
body [dir] .footer--style-1,
body [dir] .footer--style-2,
body [dir] .footer--style-3 {
  border-top: 0 !important;
  border: 0 !important;
  margin-top: 0 !important;
  background: #222831 !important;
  background-color: #222831 !important;
  color: #ffffff !important;
  padding: 56px 0 40px !important;
}

/* Extend the footer background to the full viewport width via a pseudo,
   matching the way the header bg is extended. */
body .footer {
  position: relative;
}
body .footer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100vmax;
  right: -100vmax;
  background: #222831;
  z-index: -1;
  pointer-events: none;
}

/* Container inside the footer — override the base theme rule
   `.footer .container { display: flex; justify-content: space-between;
   align-items: center; }` which otherwise breaks our 2-row layout. */
body .footer .container.sw-footer__container,
body .footer .sw-footer__container {
  display: block !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  justify-content: initial !important;
  align-items: initial !important;
}

/* The base theme also hard-codes footer padding (32/48/64px) — reassert
   our own so the top/bottom spacing is consistent. */
body .footer,
body [dir] .footer {
  padding: 56px 0 40px !important;
}

/* ---- TOP ROW: description on the left, logo + socials on the right ----
   Logo sits inline WITH the socials on a single row on the right (matches
   the reference mock). Items are vertically centered against the
   description text. */
.sw-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.sw-footer__desc {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 680px;
}
.sw-footer__desc-heading {
  margin: 0 0 10px;
  font-family: var(--sw-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  letter-spacing: -0.005em;
}
.sw-footer__desc p {
  margin: 0;
  font-family: var(--sw-font);
  font-size: 13px;
  line-height: 1.65;
  color: #c8cbd2;
}

/* Right cluster: logo on the left edge of the cluster, socials on the right */
.sw-footer__brand-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.sw-footer__logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  margin: 0;
}
.sw-footer__logo-img {
  height: 22px;
  width: auto;
  display: block;
}

/* Social icons — circular white outlines on the dark footer bg */
.sw-footer__social {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.sw-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #ffffff !important;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  text-decoration: none !important;
  transition: background-color 0.15s ease,
              color 0.15s ease,
              border-color 0.15s ease,
              transform 0.15s ease;
  font-size: 13px;
  line-height: 0;
}
.sw-footer__social-link:hover,
.sw-footer__social-link:focus-visible {
  background: #ffd369;
  color: #222831 !important;
  border-color: #ffd369;
  transform: translateY(-1px);
}
.sw-footer__social-link i { line-height: 1; }

/* ---- BOTTOM ROW: Terms & Conditions + links + feedback pill ---- */
.sw-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-top: 22px;
}

.sw-footer__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 28px;
  flex: 1 1 auto;
  min-width: 0;
}
.sw-footer__legal-heading {
  font-family: var(--sw-font);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-right: 8px;
}
.sw-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}
.sw-footer__legal-links a {
  font-family: var(--sw-font);
  font-size: 13px;
  color: #c8cbd2 !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}
.sw-footer__legal-links a:hover,
.sw-footer__legal-links a:focus-visible {
  color: #ffffff !important;
  text-decoration: none !important;
}

.sw-footer__feedback-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #ffffff;
  color: #222831 !important;
  font-family: var(--sw-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.sw-footer__feedback-btn:hover,
.sw-footer__feedback-btn:focus-visible {
  background: #ffd369;
  color: #222831 !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}
.sw-footer__feedback-wave {
  font-size: 15px;
  line-height: 1;
}

/* Hide Zendesk's "powered by" strip */
body .footer .footer__powered-by-zendesk { display: none !important; }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .sw-footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .sw-footer__brand-right { align-items: center; }
  .sw-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}
@media (max-width: 560px) {
  .sw-footer__container { padding-left: 20px !important; padding-right: 20px !important; }
  body .footer { padding: 40px 0 32px !important; }
  .sw-footer__brand-right { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sw-footer__legal { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sw-footer__legal-links { flex-direction: column; gap: 10px; }
}

/* =========================================================================
   SWOTZY CUSTOM — Category card hover background = #fffaf0
   ========================================================================= */
.sw-categories__card:hover,
.sw-categories__card:focus {
  background: #fffaf0 !important;
  border-color: rgba(34, 40, 49, 0.14);
}


/* =========================================================================
   SWOTZY CUSTOM — Article page layout (sidebar + main column)
   ========================================================================= */
body .sw-article-page {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 48px 40px 80px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.sw-article-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

/* ---------- Sidebar ---------- */
.sw-article-sidebar {
  position: sticky;
  top: 110px; /* under the sticky header */
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.sw-article-side-block__heading {
  font-family: var(--sw-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sw-ink);
  margin: 0 0 12px;
}

/* Sidebar search */
.sw-article-side-search input[type="search"],
.sw-article-side-search input[type="text"],
.sw-article-side-search .search input {
  width: 100% !important;
  height: 40px !important;
  padding: 0 14px 0 38px !important;
  border-radius: var(--sw-radius-lg) !important;
  border: 1px solid #eeeeee !important;
  background: var(--sw-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='%23393e46' d='M15.9 14.96l-4.65-4.65a6.3 6.3 0 1 0-.94.94l4.65 4.65a.37.37 0 0 0 .53 0l.47-.47a.37.37 0 0 0-.06-.47zM6.33 11.33a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/></svg>") no-repeat 14px center !important;
  font-size: 14px !important;
  color: var(--sw-ink) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.sw-article-side-search button[type="submit"],
.sw-article-side-search input[type="submit"] {
  display: none !important;
}

/* In-this-article TOC */
.sw-article-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sw-article-toc__list li {
  margin: 0;
  padding: 0;
}
.sw-article-toc__list a {
  display: block;
  position: relative;
  padding: 6px 0 6px 14px;
  font-family: var(--sw-font);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sw-ink-2);
  text-decoration: none;
  line-height: 1.45;
  transition: color 0.15s ease;
}
.sw-article-toc__list a::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--sw-ink-2);
  border-radius: 50%;
}
.sw-article-toc__list a:hover,
.sw-article-toc__list a.is-active {
  color: #000000;
  text-decoration: none;
}
.sw-article-toc__list a:hover::before,
.sw-article-toc__list a.is-active::before {
  background: #000000;
}
.sw-article-toc__list .is-h3 a {
  padding-left: 28px;
  font-size: 13px;
}
.sw-article-toc__list .is-h3 a::before {
  left: 14px;
}

/* Related articles list */
.sw-article-related {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #eeeeee;
}
.sw-article-related__item {
  border-bottom: 1px solid #eeeeee;
}
.sw-article-related__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 8px;
  margin: 0 -8px;
  border-radius: 6px;
  text-decoration: none !important;
  color: var(--sw-ink) !important;
  font-family: var(--sw-font);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  background-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sw-article-related__link:hover,
.sw-article-related__link:focus-visible {
  background-color: #fffaf0;
  color: var(--sw-ink) !important;
  text-decoration: none !important;
  opacity: 1;
}
.sw-article-related__title {
  flex: 1 1 auto;
  min-width: 0;
}
.sw-article-related__arrow {
  flex: 0 0 auto;
  color: var(--sw-ink);
  font-size: 14px;
}

/* ---------- Main column ---------- */
.sw-article-main {
  min-width: 0;
}

.sw-article-breadcrumbs {
  font-family: var(--sw-font);
  font-size: 13px;
  color: var(--sw-ink-2);
  margin: 0 0 18px;
  /* Always single-line; allow horizontal scroll if extremely long, but hide
     the scrollbar so it looks clean. */
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.sw-article-breadcrumbs::-webkit-scrollbar { display: none; }

.sw-article-breadcrumbs a {
  color: var(--sw-ink) !important;
  text-decoration: none;
  white-space: nowrap;
}
.sw-article-breadcrumbs a:hover { text-decoration: underline; }

/* Force the breadcrumb widget into a single non-wrapping row,
   beating base theme's `.breadcrumbs { flex-wrap: wrap; li { display: block } }` */
.sw-article-breadcrumbs ol,
.sw-article-breadcrumbs ul,
.sw-article-breadcrumbs .breadcrumbs {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  white-space: nowrap !important;
}
.sw-article-breadcrumbs li,
.sw-article-breadcrumbs .breadcrumbs li {
  display: inline-flex !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.sw-article-title {
  font-family: var(--sw-font) !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--sw-ink) !important;
  margin: 0 0 16px !important;
}

/* Belt-and-braces: kill the promoted/internal dot indicators on article titles */
.sw-article-title.articles__link--promoted::after,
.sw-article-title.articles__link--promoted::before,
.sw-article-title.articles__link--internal::after,
.sw-article-title.articles__link--internal::before {
  display: none !important;
  content: none !important;
}

.sw-article-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sw-font);
  font-size: 13px;
  color: var(--sw-ink-2);
  margin: 0 0 20px;
}
.sw-article-meta__author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--sw-ink-2) !important;
}
.sw-article-meta__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.sw-article-meta__sep { opacity: 0.6; }

/* Summary callout — #eeeeee background with a yellow #ffd369 left accent stripe.
   Matches the reference design (single, consistent summary box per article). */
body .sw-article-summary {
  font-family: var(--sw-font) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--sw-ink) !important;
  padding: 18px 22px !important;
  border-radius: 10px !important;
  margin: 8px 0 32px !important;
  background: #eeeeee !important;
  background-color: #eeeeee !important;
  border: 0 !important;
  border-left: 4px solid #ffd369 !important;
  box-shadow: none !important;
}

/* Strip any inherited blockquote styling from the inner content
   (base theme adds `border-left: 1px solid var(--border-color)` on blockquote). */
body .sw-article-summary,
body .sw-article-summary p,
body .sw-article-summary blockquote,
body .sw-article-summary [dir],
body .sw-article-summary [dir=ltr],
body .sw-article-summary [dir=rtl] {
  background-color: transparent;
}
body .sw-article-summary p,
body .sw-article-summary blockquote {
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body .sw-article-summary p:last-child,
body .sw-article-summary blockquote:last-child {
  margin-bottom: 0 !important;
}
/* Re-apply the wrapper background after the transparency reset above */
body .sw-article-summary {
  background: #eeeeee !important;
  background-color: #eeeeee !important;
}

/* In-body blockquotes (inline callouts inside the article body).
   Framed box: #222831 border all the way around, #eeeeee inside fill.
   This beats the base theme's `.markdown blockquote` rules (4px left-only
   stripe, rounded right corners, FontAwesome quote glyph) so these render
   as clean framed callouts. */
body .sw-article-body blockquote,
body .sw-article-body.markdown blockquote,
html body .sw-article-body blockquote {
  background: #eeeeee !important;
  background-color: #eeeeee !important;
  border: 1px solid #222831 !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  margin: 16px 0 20px !important;
  overflow: visible !important;
  box-shadow: none !important;
}
/* Clear the left-only 4px stripe + rounded right corners the base theme
   applies in LTR/RTL direction-scoped rules. */
[dir=ltr] body .sw-article-body blockquote,
[dir=ltr] body .sw-article-body.markdown blockquote {
  border-left: 1px solid #222831 !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  padding: 14px 18px !important;
}
[dir=rtl] body .sw-article-body blockquote,
[dir=rtl] body .sw-article-body.markdown blockquote {
  border-right: 1px solid #222831 !important;
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  padding: 14px 18px !important;
}
/* Suppress the decorative FontAwesome quote glyph that the base theme
   injects via ::before — the framed box speaks for itself. */
body .sw-article-body blockquote::before,
body .sw-article-body.markdown blockquote::before {
  content: none !important;
  display: none !important;
}
/* Keep inner <p> tight inside the frame so only the frame's fill shows. */
body .sw-article-body blockquote p,
body .sw-article-body.markdown blockquote p {
  margin: 0 0 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
body .sw-article-body blockquote p:last-child,
body .sw-article-body.markdown blockquote p:last-child {
  margin-bottom: 0 !important;
}

/* Article body — clean typography for the markdown content */
.sw-article-body {
  font-family: var(--sw-font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--sw-ink);
}
.sw-article-body h2 {
  font-family: var(--sw-font);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--sw-ink);
  margin: 36px 0 14px;
}
.sw-article-body h3 {
  font-family: var(--sw-font);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sw-ink);
  margin: 28px 0 12px;
}
.sw-article-body p { margin: 0 0 14px; }
.sw-article-body a { color: var(--sw-ink); text-decoration: underline; }
.sw-article-body ol,
.sw-article-body ul { margin: 0 0 18px 24px; padding: 0; }
.sw-article-body li { margin: 0 0 8px; }

/* Tables — always show fully, no inner scrollbars. Beats:
   - the formatting plugin's `.table { overflow-x: auto }`
   - the WYSIWYG output's `figure.wysiwyg-table { overflow-y: auto }`
   - any inline height/max-height the plugin may add
   - the `.sw-article-body` IS the [data-plugin-formatting] element, so
     we target it via compound selectors instead of as a descendant. */
body .sw-article-body .table,
body .sw-article-body div.table,
body .sw-article-body figure.table,
body .sw-article-body figure.wysiwyg-table,
body .sw-article-body figure,
body .sw-article-body .table-wrapper,
body .sw-article-body[data-plugin-formatting] .table,
body .sw-article-body[data-plugin-formatting] figure,
body article.sw-article-body[data-plugin-formatting] .table,
html body .sw-article-body .table,
html body .sw-article-body figure.wysiwyg-table {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: block !important;
  border: 0 !important;
}

body .sw-article-body table,
body .sw-article-body .table table,
body .sw-article-body[data-plugin-formatting] table,
html body .sw-article-body table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  table-layout: auto;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: anywhere;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  display: table !important;
}

body .sw-article-body table tbody,
body .sw-article-body table thead,
body .sw-article-body table tfoot {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
  display: table-row-group !important;
}

body .sw-article-body table thead { display: table-header-group !important; }
body .sw-article-body table tfoot { display: table-footer-group !important; }

body .sw-article-body table tr {
  display: table-row !important;
  height: auto !important;
}

.sw-article-body table th,
.sw-article-body table td,
.sw-article-body .table th,
.sw-article-body .table td {
  padding: 10px 12px;
  border: 1px solid #e5e5e5;
  vertical-align: middle;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}

.sw-article-body table thead td,
.sw-article-body table thead th,
.sw-article-body .table thead td,
.sw-article-body .table thead th {
  background-color: #f6f6f6 !important;
  color: var(--sw-ink) !important;
  font-weight: 700;
  border-color: #e5e5e5 !important;
}

.sw-article-body table tbody tr:nth-child(even),
.sw-article-body .table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

/* Images inside tables shouldn't break the layout */
.sw-article-body table img,
.sw-article-body .table img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Tag/share row + utility blocks at bottom of main */
.sw-article-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 36px 0 24px;
}
.sw-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sw-article-attachments {
  border: 1px solid #eeeeee;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 24px;
}
.sw-article-attachments h4 { margin: 0 0 10px; font-size: 14px; }
.sw-article-attachments__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 16px;
  color: var(--sw-ink) !important;
  text-decoration: none;
  font-size: 14px;
}
.sw-article-attachments__size { color: var(--sw-ink-2); font-size: 12px; }

.sw-article-vote { margin: 24px 0; }
.sw-article-subscribe { margin: 24px 0; }
.sw-article-comments { margin-top: 48px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .sw-article-grid { grid-template-columns: 1fr; gap: 32px; }
  .sw-article-sidebar { position: static; order: 2; }
  .sw-article-main    { order: 1; }
  body .sw-article-page { padding: 32px 24px 56px !important; }
}

@media (max-width: 560px) {
  .sw-article-title { font-size: 28px !important; }
  .sw-article-summary { font-size: 15px; padding: 18px 18px; }
}


/* =========================================================================
   SWOTZY CUSTOM — Mobile fixes
   1) Tables scroll horizontally inside their wrapper (prevents layout
      break and the mutation-observer freeze that used to lock articles
      with tables on mobile).
   2) Hamburger toggle button is always visible + styled on <= 991px.
   3) Mobile menu modal includes every action the desktop nav has.
   4) Article / section / category pages get tighter side padding.
   ========================================================================= */

/* ---- 1) Tables: horizontal scroll on mobile ---- */
@media (max-width: 980px) {
  body .sw-article-body .table,
  body .sw-article-body div.table,
  body .sw-article-body figure.table,
  body .sw-article-body figure.wysiwyg-table,
  body .sw-article-body .table-wrapper,
  body .sw-article-body[data-plugin-formatting] .table,
  html body .sw-article-body .table,
  html body .sw-article-body figure.wysiwyg-table {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
  }
  body .sw-article-body figure {
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body .sw-article-body table,
  body .sw-article-body .table table,
  body .sw-article-body[data-plugin-formatting] table,
  html body .sw-article-body table {
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
    display: table !important;
    table-layout: auto;
  }
  /* Keep cell text readable on small screens */
  .sw-article-body table th,
  .sw-article-body table td,
  .sw-article-body .table th,
  .sw-article-body .table td {
    white-space: normal;
    word-break: normal;
    font-size: 13px;
    padding: 8px 10px;
    min-width: 120px;
  }
}

/* ---- 2) Hamburger toggle — yellow rounded square, matches swotzy.com.
   Uses its own .sw-header__toggle class (no .btn / .btn--light) so
   the base theme can't repaint the resting background. ---- */
@media (max-width: 991px) {
  body .sw-header__mobile {
    display: flex !important;
    align-items: center;
    margin-left: auto;
  }
  html body .sw-header__toggle,
  body [dir] .sw-header__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    background: #ffd369 !important;
    background-color: #ffd369 !important;
    border: 0 !important;
    color: #222831 !important;
    padding: 0;
    box-shadow: none !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color 0.15s ease, transform 0.15s ease;
  }
  html body .sw-header__toggle:hover,
  html body .sw-header__toggle:focus-visible,
  body [dir] .sw-header__toggle:hover {
    background: #ffcf53 !important;
    background-color: #ffcf53 !important;
    transform: translateY(-1px);
  }
  /* 3-line hamburger — dark on yellow */
  .sw-header__toggle-icon {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 14px;
  }
  .sw-header__toggle-icon::before,
  .sw-header__toggle-icon::after,
  .sw-header__toggle-icon > span {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #222831 !important;
    border-radius: 1px;
  }
  .sw-header__toggle-icon::before { top: 0; }
  .sw-header__toggle-icon > span  { top: 6px; }
  .sw-header__toggle-icon::after  { bottom: 0; }
}

/* ---- Mobile drawer — simple, clean layout ----
   Search input at top → list of rows (Submit a request, languages,
   sign in) → Join Swotzy pill. No headings, no categories, no fancy
   blocks. Just one column of items with thin dividers. */
@media (max-width: 991px) {
  #modal-menu .modal__content-scroll {
    max-width: 320px;
    width: 88vw;
    background: #ffffff !important;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.06);
  }

  .mobile-menu {
    padding: 24px 20px !important;
    font-family: var(--sw-font);
    color: var(--sw-ink);
    display: flex;
    flex-direction: column;
  }

  /* Search input */
  .mobile-menu__search {
    position: relative;
    margin: 0 0 16px;
  }
  .mobile-menu__search input[type="search"],
  .mobile-menu__search input[type="text"],
  .mobile-menu__search input.search-query {
    width: 100% !important;
    height: 44px !important;
    padding: 0 14px 0 40px !important;
    border: 1px solid #eeeeee !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    font-family: var(--sw-font) !important;
    font-size: 14px !important;
    color: var(--sw-ink) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }
  .mobile-menu__search input::placeholder { color: var(--sw-ink-2); }
  .mobile-menu__search::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M15.9 15l-4.6-4.7a6.4 6.4 0 1 0-.9.9L15 15.9c.1.1.3.1.4 0l.5-.5c.1-.1.1-.3 0-.4zM6.3 11.3a5 5 0 1 1 0-10 5 5 0 0 1 0 10z' fill='%23393e46'/></svg>") center / contain no-repeat;
    opacity: 0.9;
    pointer-events: none;
  }
  .mobile-menu__search button[type="submit"],
  .mobile-menu__search input[type="submit"],
  .mobile-menu__search .form-field__submit { display: none !important; }

  /* Row list */
  .mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .mobile-menu__list li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #f0f0f0;
  }
  .mobile-menu__list li:last-child { border-bottom: 0; }

  /* Each row: simple left-aligned link */
  .mobile-menu .mobile-menu__row,
  .mobile-menu a.mobile-menu__row {
    display: block !important;
    padding: 14px 4px !important;
    margin: 0 !important;
    font-family: var(--sw-font) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--sw-ink) !important;
    background: transparent !important;
    text-decoration: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    line-height: 1.35 !important;
  }
  .mobile-menu__row:hover,
  .mobile-menu__row:focus-visible {
    color: #000 !important;
  }

  /* Primary CTA — dark pill */
  .mobile-menu__cta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 20px 0 0 !important;
    padding: 14px 20px !important;
    border-radius: 12px !important;
    background: #222831 !important;
    color: #ffffff !important;
    font-family: var(--sw-font) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }
  .mobile-menu__cta:hover,
  .mobile-menu__cta:focus-visible {
    background: #1a1f27 !important;
    color: #ffffff !important;
  }
}

/* ---- 4) Tighter side padding on mobile for article / section / category ---- */
@media (max-width: 640px) {
  body .sw-article-page,
  body .sw-section-page {
    padding: 24px 18px 56px !important;
  }
  body .sw-cat-sections__container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .sw-article-body {
    font-size: 15.5px;
    line-height: 1.6;
  }
  .sw-section-main__title { font-size: 30px !important; }
  .sw-section-list__link { padding: 14px 8px; font-size: 14.5px; }
}


/* =========================================================================
   SWOTZY CUSTOM — Category page
   Hero reuses the homepage gradient. Below: 2-column grid of "sections",
   each a clean article list with a → arrow on the right, #eeeeee row
   dividers, and a "See all articles" pill at the bottom.
   ========================================================================= */

/* Hero — tighter vertical rhythm than the homepage hero and left-aligned */
body .sw-cat-hero .welcome__section,
body [dir] .sw-cat-hero .welcome__section {
  padding: 48px 0 72px !important;
}
.sw-cat-hero__content {
  max-width: 980px;
}
.sw-cat-hero__breadcrumbs {
  font-family: var(--sw-font);
  font-size: 14px;
  color: var(--sw-ink-2);
  margin: 0 0 18px;
}
.sw-cat-hero__breadcrumbs a {
  color: var(--sw-ink-2);
  text-decoration: none;
}
.sw-cat-hero__breadcrumbs a:hover { color: var(--sw-ink); }
/* Zendesk's breadcrumbs helper renders an <ol> — hide its default bullets */
.sw-cat-hero__breadcrumbs ol,
.sw-cat-hero__breadcrumbs ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.sw-cat-hero__breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sw-cat-hero__breadcrumbs li + li::before {
  content: ">";
  color: var(--sw-ink-2);
  opacity: 0.6;
}
body .sw-cat-hero .sw-cat-hero__title {
  font-size: clamp(40px, 5.5vw, 64px) !important;
  margin: 0 !important;
}
.sw-cat-hero__subtitle {
  margin-top: 16px !important;
  max-width: 720px;
}

/* Section grid */
.sw-cat-sections {
  padding: 64px 0 96px;
  background: transparent;
}
.sw-cat-sections__container {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.sw-cat-sections__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px 72px;
  align-items: start;
}

/* Individual section card */
.sw-cat-section {
  min-width: 0;
}
.sw-cat-section__title {
  margin: 0 0 12px;
  font-family: var(--sw-font);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--sw-ink);
  letter-spacing: -0.01em;
}
.sw-cat-section__title a {
  color: inherit;
  text-decoration: none;
}
.sw-cat-section__title a:hover { color: var(--sw-ink); }

.sw-cat-section__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sw-cat-section__item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #eeeeee;
}
.sw-cat-section__item:first-child {
  border-top: 1px solid #eeeeee;
}

.sw-cat-section__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 12px;
  text-decoration: none !important;
  color: var(--sw-ink) !important;
  font-family: var(--sw-font);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  background-color: transparent;
  border-radius: 6px;
  transition: background-color 0.18s ease,
              color 0.18s ease,
              padding-left 0.18s ease;
}
/* Hover — yellow #ffd369 fill + slide the label ~12px to the right.
   Matches the treatment used on the homepage Latest/Promoted lists. */
.sw-cat-section__link:hover,
.sw-cat-section__link:focus-visible {
  background-color: #ffd369 !important;
  color: var(--sw-ink) !important;
  padding-left: 24px;
  text-decoration: none !important;
}

/* Promoted article → no special resting state. Yellow only appears on hover,
   same as every other row. Force transparent background so neither the
   `.is-promoted` marker nor any base-theme rule leaks a yellow fill when
   the row isn't being hovered. */
.sw-cat-section__link.is-promoted,
.sw-cat-section__link.articles__link--promoted {
  background-color: transparent !important;
  background: transparent !important;
  padding-left: 12px;
}
.sw-cat-section__link.is-promoted:hover,
.sw-cat-section__link.is-promoted:focus-visible,
.sw-cat-section__link.articles__link--promoted:hover,
.sw-cat-section__link.articles__link--promoted:focus-visible {
  background-color: #ffd369 !important;
  padding-left: 24px;
}

.sw-cat-section__link-title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sw-cat-section__link-arrow {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
  color: var(--sw-ink);
}

/* "See all articles" pill */
.sw-cat-section__more {
  margin-top: 20px;
}
.sw-cat-section__more-btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(34, 40, 49, 0.18);
  background: #ffffff;
  color: var(--sw-ink) !important;
  font-family: var(--sw-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.sw-cat-section__more-btn:hover,
.sw-cat-section__more-btn:focus-visible {
  background: #eeeeee;
  border-color: rgba(34, 40, 49, 0.28);
  color: var(--sw-ink) !important;
  text-decoration: none !important;
}

/* Responsive — collapse to one column */
@media (max-width: 900px) {
  .sw-cat-sections__grid { grid-template-columns: 1fr; gap: 48px; }
  .sw-cat-sections { padding: 48px 0 72px; }
  body .sw-cat-hero .welcome__section,
  body [dir] .sw-cat-hero .welcome__section { padding: 32px 0 52px !important; }
}
@media (max-width: 560px) {
  .sw-cat-sections__container { padding-left: 20px !important; padding-right: 20px !important; }
  .sw-cat-section__title { font-size: 24px; }
}


/* =========================================================================
   SWOTZY CUSTOM — Section page
   2-column layout: left sidebar (search + category list) and right main
   column (breadcrumbs + title + clean article list).
   Reuses .sw-article-grid / .sw-article-sidebar from the article page for
   consistent structure.
   ========================================================================= */

body .sw-section-page {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 48px 40px 80px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Left sidebar — reuses .sw-article-sidebar geometry; here we tune the
   "CATEGORIES" list to match the reference mock. */
.sw-section-sidebar {
  /* Sidebar is already sticky via .sw-article-sidebar; nothing extra here. */
}

.sw-section-cats__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sw-section-cats__item {
  margin: 0 0 2px;
  padding: 0;
}

/* Category toggle button — behaves like a nav link but opens a sublist */
.sw-section-cats__category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  margin: 0 -12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sw-ink);
  font-family: var(--sw-font);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sw-section-cats__category:hover,
.sw-section-cats__category:focus-visible {
  background-color: #fffaf0;
  color: var(--sw-ink);
  outline: none;
}
.sw-section-cats__category[disabled] {
  cursor: default;
  opacity: 0.6;
}
.sw-section-cats__category-label {
  flex: 1 1 auto;
  min-width: 0;
}
.sw-section-cats__chevron {
  flex: 0 0 auto;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  color: var(--sw-ink-2);
  transition: transform 0.18s ease;
  transform: rotate(0deg);
}
.sw-section-cats__category.is-open .sw-section-cats__chevron,
.sw-section-cats__category[aria-expanded="true"] .sw-section-cats__chevron {
  transform: rotate(90deg);
}

/* Expandable sections list under each category */
.sw-section-cats__sublist {
  list-style: none;
  margin: 2px 0 6px;
  padding: 0 0 0 14px;
  border-left: 1px solid #eeeeee;
}
.sw-section-cats__sublist[hidden] { display: none; }
.sw-section-cats__subitem { margin: 0; padding: 0; }
.sw-section-cats__sublink {
  display: block;
  padding: 6px 10px;
  margin: 0;
  border-radius: 5px;
  font-family: var(--sw-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--sw-ink-2) !important;
  text-decoration: none !important;
  background-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sw-section-cats__sublink:hover,
.sw-section-cats__sublink:focus-visible {
  background-color: #fffaf0 !important;
  color: var(--sw-ink) !important;
  text-decoration: none !important;
}
/* Active section — cream #fffaf0 background */
.sw-section-cats__sublink.is-active {
  background-color: #fffaf0 !important;
  color: var(--sw-ink) !important;
  font-weight: 600;
}

/* ---------- Main column ---------- */
.sw-section-main {
  min-width: 0;
}
.sw-section-main__breadcrumbs {
  font-family: var(--sw-font);
  font-size: 14px;
  color: var(--sw-ink-2);
  margin: 0 0 14px;
}
.sw-section-main__breadcrumbs a {
  color: var(--sw-ink-2);
  text-decoration: none;
}
.sw-section-main__breadcrumbs a:hover { color: var(--sw-ink); }
/* Zendesk breadcrumbs render an <ol>; clean up bullets + spacing */
.sw-section-main__breadcrumbs ol,
.sw-section-main__breadcrumbs ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.sw-section-main__breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sw-section-main__breadcrumbs li + li::before {
  content: ">";
  color: var(--sw-ink-2);
  opacity: 0.6;
}

.sw-section-main__title {
  font-family: var(--sw-font);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--sw-ink);
  margin: 0 0 14px;
}
.sw-section-main__desc {
  font-family: var(--sw-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--sw-ink-2);
  margin: 0 0 24px;
  max-width: 720px;
}

/* ---------- Article / subsection list ---------- */
.sw-section-list {
  list-style: none;
  margin: 24px 0 12px;
  padding: 0;
}
.sw-section-list__item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #eeeeee;
}
.sw-section-list__item:first-child {
  border-top: 1px solid #eeeeee;
}

.sw-section-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 12px;
  text-decoration: none !important;
  color: var(--sw-ink) !important;
  font-family: var(--sw-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  background-color: transparent;
  border-radius: 8px;
  transition: background-color 0.18s ease,
              color 0.18s ease,
              padding-left 0.18s ease;
}
/* Hover — yellow #ffd369 + slide the label ~12px to the right. */
.sw-section-list__link:hover,
.sw-section-list__link:focus-visible {
  background-color: #ffd369 !important;
  color: var(--sw-ink) !important;
  padding-left: 24px;
  text-decoration: none !important;
}
/* No resting-state yellow on promoted — only the hover is ever yellow. */
.sw-section-list__link.is-promoted,
.sw-section-list__link.articles__link--promoted {
  background-color: transparent !important;
}
.sw-section-list__link.is-promoted:hover,
.sw-section-list__link.is-promoted:focus-visible,
.sw-section-list__link.articles__link--promoted:hover,
.sw-section-list__link.articles__link--promoted:focus-visible {
  background-color: #ffd369 !important;
  padding-left: 24px;
}

.sw-section-list__title {
  flex: 1 1 auto;
  min-width: 0;
}
.sw-section-list__arrow {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  color: var(--sw-ink);
}

/* Subsection list sits above the article list — small top margin so they
   visually bracket the two groups. */
.sw-section-list--subs { margin-bottom: 32px; }

.sw-section-main__pagination {
  margin-top: 28px;
}

/* Responsive — sidebar stacks above content, matches article page behavior */
@media (max-width: 900px) {
  body .sw-section-page { padding: 32px 24px 56px !important; }
  .sw-section-main__title { font-size: 36px; }
}
@media (max-width: 560px) {
  .sw-section-main__title { font-size: 30px; }
  .sw-section-list__link { font-size: 15px; padding: 16px 10px; }
}