@charset "UTF-8";
/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

p strong, p b {
  font-weight: 600;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/***** Base *****/
* {
  box-sizing: border-box;
}

html {
  /* Backdrop shown either side of the page on ultra-wide viewports, once
     body's max-width below caps out — same colour as the page itself so the
     letterboxing reads as margin, not a seam. */
  background-color: #FFFFFF;
  /* Nothing should ever scroll the page sideways; wide article/comment
     content scrolls within its own container (.comment-body etc.). This also
     guards against 100vw-based full-bleed sections overflowing by the
     vertical-scrollbar width. */
  overflow-x: clip;
}

body {
  background-color: #FFFFFF;
  color: #2F3941;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 175%;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: column layout so the footer is pushed to the bottom of the
     viewport on short pages (e.g. empty sections) instead of floating mid-page,
     so it lines up with the floating Support button. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Full-bleed sections (header, home hero, category grid) size themselves to
     100% of the body — capping the body's own width here stops the whole page
     from stretching absurdly wide/short on ultra-wide monitors, without having
     to patch every full-bleed section individually. 2560px (matches 2560x1440
     QHD monitors) keeps the design's intentional wide bleed on common desktop
     sizes while capping the extreme. */
  max-width: 2560px;
  margin: 0 auto;
}
/* Main grows to absorb the leftover height, pushing the footer down. */
body > main {
  flex: 1 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-top: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 20px;
  font-weight: 700;
}

h4 {
  font-size: 18px;
}

a {
  color: rgba(86, 86, 79, 1);
  text-decoration: none;
}
a:visited {
   color: rgba(86, 86, 79, 1);
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

input,
textarea {
  color: #000;
  font-size: 14px;
}

input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
}
input:not([type=checkbox]) {
  outline: none;
}
input:not([type=checkbox]):focus {
  border: 1px solid rgba(247, 221, 56, 1);
}

input[disabled] {
  background-color: #ddd;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23CCC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #87929D;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}
select:focus {
  border: 1px solid rgba(247, 221, 56, 1);
}
select::-ms-expand {
  display: none;
}

textarea {
  border: 1px solid #87929D;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
textarea:focus {
  border: 1px solid rgba(247, 221, 56, 1);
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1160px) {
  .container {
    padding: 0;
    width: 90%;
  }
}

.container-divider {
  border-top: 1px solid #ddd;
  margin-bottom: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.error-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1160px) {
  .error-page {
    padding: 0;
    width: 90%;
  }
}

.visibility-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

/***** Buttons *****/
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
  background-color: transparent;
  border: 1px solid rgba(247, 221, 56, 1);
  border-radius: 4px;
  color: rgba(247, 221, 56, 1);
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, color 0.15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}
@media (min-width: 768px) {
  .button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
    width: auto;
  }
}
.button:visited, .pagination-next-link:visited, .pagination-prev-link:visited, .pagination-first-link:visited, .pagination-last-link:visited, .subscriptions-subscribe button:visited, .requests-table-toolbar .organization-subscribe button:visited, .community-follow button:visited, .article-subscribe button:visited, .section-subscribe button:visited, .split-button button:visited {
  color: rgba(247, 221, 56, 1);
}
.button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .subscriptions-subscribe button:hover, .requests-table-toolbar .organization-subscribe button:hover, .community-follow button:hover, .article-subscribe button:hover, .section-subscribe button:hover, .split-button button:hover, .button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active, .subscriptions-subscribe button:active, .requests-table-toolbar .organization-subscribe button:active, .community-follow button:active, .article-subscribe button:active, .section-subscribe button:active, .split-button button:active, .button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .subscriptions-subscribe button:focus, .requests-table-toolbar .organization-subscribe button:focus, .community-follow button:focus, .article-subscribe button:focus, .section-subscribe button:focus, .split-button button:focus, .button.button-primary, .button-primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-first-link, .button-primary.pagination-last-link, .subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected=true], .requests-table-toolbar .organization-subscribe button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected=true], .community-follow button.button-primary, .article-subscribe button.button-primary, .article-subscribe button[data-selected=true], .section-subscribe button.button-primary, .section-subscribe button[data-selected=true], .split-button button.button-primary {
  background-color: rgba(247, 221, 56, 1);
  color: #000000;
  text-decoration: none;
}
.button.button-primary:hover, .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected=true]:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-selected=true]:hover, .community-follow button.button-primary:hover, .article-subscribe button.button-primary:hover, .article-subscribe button[data-selected=true]:hover, .section-subscribe button.button-primary:hover, .section-subscribe button[data-selected=true]:hover, .split-button button:hover, .button.button-primary:focus, .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button[data-selected=true]:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button[data-selected=true]:focus, .community-follow button.button-primary:focus, .article-subscribe button.button-primary:focus, .article-subscribe button[data-selected=true]:focus, .section-subscribe button.button-primary:focus, .section-subscribe button[data-selected=true]:focus, .split-button button.button-primary:focus, .button.button-primary:active, .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active, .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button[data-selected=true]:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button[data-selected=true]:active, .community-follow button.button-primary:active, .article-subscribe button.button-primary:active, .article-subscribe button[data-selected=true]:active, .section-subscribe button.button-primary:active, .section-subscribe button[data-selected=true]:active, .split-button button.button-primary:active {
  background-color: #c1a808;
  border-color: #c1a808;
}
.button[data-disabled], [data-disabled].pagination-next-link, [data-disabled].pagination-prev-link, [data-disabled].pagination-first-link, [data-disabled].pagination-last-link, .subscriptions-subscribe button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .community-follow button[data-disabled], .article-subscribe button[data-disabled], .section-subscribe button[data-disabled], .split-button button[data-disabled] {
  cursor: default;
}

.button-large, input[type=submit] {
  cursor: pointer;
  background-color: rgba(247, 221, 56, 1);
  border: 0;
  border-radius: 4px;
  color: #000000;
  font-size: 14px;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}
@media (min-width: 768px) {
  .button-large, input[type=submit] {
    width: auto;
  }
}
.button-large:visited, input[type=submit]:visited {
  color: #000000;
}
.button-large:hover, .button-large:active, .button-large:focus, input[type=submit]:hover, input[type=submit]:active, input[type=submit]:focus {
  background-color: #c1a808;
}
.button-large[disabled], input[type=submit][disabled] {
  background-color: #ddd;
}

.button-secondary {
  color: #5a6d7c;
  border: 1px solid #87929D;
  background-color: transparent;
}
.button-secondary:visited {
  color: #5a6d7c;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #2F3941;
  border: 1px solid #87929D;
  background-color: #f7f7f7;
}

/***** Split button *****/
.split-button {
  display: flex;
}

.split-button button {
  background-color: rgba(247, 221, 56, 1);
  border: 0;
  color: #000000;
  height: 32px;
  line-height: 16px;
  outline-color: rgba(247, 221, 56, 1);
}

[dir=rtl] .split-button button:not(:only-child):first-child {
  border-left: 1px solid #000000;
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):first-child {
  border-right: 1px solid #000000;
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
.split-button button:not(:only-child):last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  padding: 0;
}
[dir=rtl] .split-button button:not(:only-child):last-child {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):last-child {
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}

/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}
.table th,
.table th a {
  color: #5a6d7c;
  font-size: 13px;
  text-align: left;
}
[dir=rtl] .table th,
[dir=rtl] .table th a {
  text-align: right;
}
.table tr {
  border-bottom: 1px solid #ddd;
  display: block;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}
.table td {
  display: block;
}
@media (min-width: 768px) {
  .table td {
    display: table-cell;
  }
}
@media (min-width: 1024px) {
  .table td, .table th {
    padding: 20px 30px;
  }
}
@media (min-width: 768px) {
  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}

/***** Forms *****/
.form {
  max-width: 650px;
}

.form-field ~ .form-field {
  margin-top: 25px;
}

.form-field label {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
}

.form-field input {
  border: 1px solid #87929D;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.form-field input:focus {
  border: 1px solid rgba(247, 221, 56, 1);
}

.form-field input[type=text] {
  border: 1px solid #87929D;
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid rgba(247, 221, 56, 1);
}

.form-field input[type=checkbox] {
  width: auto;
}

.form-field .nesty-input {
  border-radius: 4px;
  border: 1px solid #87929D;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}
.form-field .nesty-input:focus {
  border: 1px solid rgba(247, 221, 56, 1);
  text-decoration: none;
}

.form-field .hc-multiselect-toggle {
  border: 1px solid #87929D;
}

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid rgba(247, 221, 56, 1);
  text-decoration: none;
}

.form-field textarea {
  vertical-align: middle;
}

.form-field input[type=checkbox] + label {
  margin: 0 0 0 10px;
}

.form-field .optional {
  color: #5a6d7c;
  margin-left: 4px;
}

.form-field p {
  color: #5a6d7c;
  font-size: 12px;
  margin: 5px 0;
}

.form footer {
  margin-top: 40px;
  padding-top: 30px;
}

.form footer a {
  color: #5a6d7c;
  cursor: pointer;
  margin-right: 15px;
}

.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}
.form .suggestion-list label {
  border-bottom: 1px solid #ddd;
  display: block;
  padding-bottom: 5px;
}
.form .suggestion-list li {
  padding: 10px 0;
}
.form .suggestion-list li a:visited {
  color: rgba(86, 86, 79, 1);
}

/***** Header *****/
.header-bar {
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
}

/* Only break out of body's centred max-width (see body rule) once that cap
   actually kicks in, so the header bar still spans the full viewport on
   ultra-wide monitors. Below 2560px the body already fills the viewport, and
   the 100vw hack would overflow it by the vertical-scrollbar width, causing
   horizontal scrolling on article/category pages. */
@media (min-width: 2560px) {
  .header-bar {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
}

.header {
  width: 100%;
  /* .header-bar (the background bar) is full-bleed to the viewport; cap and
     centre the inner row at the same width as body's max-width so the logo
     still lines up with the hero text and cards below instead of drifting to
     the far edge of an ultra-wide viewport. */
  max-width: 2560px;
  margin: 0 auto;
  /* Shared page gutter (≈56px at desktop, matching the Figma) so the logo lines
     up with the hero text and the home page cards below. */
  padding: 0 clamp(24px, 4vw, 56px);
  box-sizing: border-box;
  position: relative;
  align-items: center;
  display: flex;
  height: 71px;
  justify-content: space-between;
}

.logo img {
  max-height: 28px;
  vertical-align: middle;
}

.logo span {
  margin: 0 10px;
  color: rgba(247, 221, 56, 1);
}

.logo a {
  display: inline-block;
}

.logo a:hover, .logo a:focus, .logo a:active {
  text-decoration: none;
}

.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}
.user-nav[aria-expanded=true] {
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 1;
}
.user-nav[aria-expanded=true] > a {
  display: block;
  margin: 20px;
}
.user-nav[aria-expanded=true] > .user-nav-list li {
  display: block;
}
.user-nav[aria-expanded=true] > .user-nav-list a {
  display: block;
  margin: 20px;
}

.user-nav-list {
  display: block;
  list-style: none;
}
.user-nav-list > li {
  display: inline-block;
}

@media (max-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 768px) {
  .nav-wrapper-desktop {
    display: none;
  }
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: inline-block;
  }
}
.nav-wrapper-desktop a {
  border: 0;
  color: rgba(86, 86, 79, 1);
  display: none;
  font-size: 14px;
  padding: 0 20px 0 0;
  width: auto;
}
@media (min-width: 768px) {
  .nav-wrapper-desktop a {
    display: inline-block;
  }
}
[dir=rtl] .nav-wrapper-desktop a {
  padding: 0 0 0 20px;
}
.nav-wrapper-desktop a:hover, .nav-wrapper-desktop a:focus, .nav-wrapper-desktop a:active {
  background-color: transparent;
  color: rgba(86, 86, 79, 1);
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none;
  }
}
.nav-wrapper-mobile .menu-button-mobile {
  background: none;
  border: 0;
  width: auto;
  min-width: 71px;
  cursor: pointer;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 7px;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 2;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=true] {
  display: block;
}
.nav-wrapper-mobile .menu-list-mobile-items .item {
  margin: 4px 0;
}
.nav-wrapper-mobile .menu-list-mobile-items li:empty:not(.nav-divider) {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 0.1px solid #ddd;
  padding: 0;
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider:last-child {
  display: none;
}
.nav-wrapper-mobile .menu-list-mobile-items button {
  background: none;
  border: none;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: #2F3941;
  cursor: pointer;
  text-align: start;
}
.nav-wrapper-mobile .menu-list-mobile-items button:active, .nav-wrapper-mobile .menu-list-mobile-items button:focus, .nav-wrapper-mobile .menu-list-mobile-items button:hover {
  background-color: #f3f3f3;
  text-decoration: underline;
}
.nav-wrapper-mobile .menu-list-mobile-items a {
  display: block;
  padding: 8px 24px;
  width: 100%;
  height: 100%;
  color: #2F3941;
}
.nav-wrapper-mobile .menu-list-mobile-items a:active, .nav-wrapper-mobile .menu-list-mobile-items a:focus, .nav-wrapper-mobile .menu-list-mobile-items a:hover {
  background-color: #f3f3f3;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile {
  display: flex;
  line-height: 1.5;
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile .my-profile-tooltip {
  font-size: 12px;
  color: #68737D;
}
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  margin-top: 1px;
}
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar {
  margin-right: 0;
  margin-left: 8px;
}

.skip-navigation {
  align-items: center;
  background-color: black;
  color: white;
  display: flex;
  font-size: 14px;
  justify-content: center;
  left: -999px;
  margin: 20px;
  padding: 20px;
  overflow: hidden;
  position: absolute;
  top: auto;
  z-index: -999;
}
[dir=rtl] .skip-navigation {
  left: initial;
  right: -999px;
}
.skip-navigation:focus, .skip-navigation:active {
  left: auto;
  overflow: auto;
  text-align: center;
  text-decoration: none;
  top: auto;
  z-index: 999;
}
[dir=rtl] .skip-navigation:focus, [dir=rtl] .skip-navigation:active {
  left: initial;
  right: auto;
}

#zd-modal-container ~ .skip-navigation {
  display: none;
}

/***** User info in header *****/
.user-info {
  display: inline-block;
}
.user-info .dropdown-toggle::after {
  display: none;
}
@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}
.user-info > button {
  border: 0;
  color: rgba(86, 86, 79, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: rgba(86, 86, 79, 1);
  background-color: transparent;
}
.user-info > button::after {
  color: rgba(86, 86, 79, 1);
  padding-right: 15px;
}
[dir=rtl] .user-info > button::after {
  padding-left: 15px;
  padding-right: 0;
}

#user #user-name {
  display: none;
  font-size: 14px;
}
@media (min-width: 768px) {
  #user #user-name {
    display: inline-block;
  }
}
#user #user-name:hover {
  text-decoration: underline;
}

/***** User avatar *****/
.user-avatar {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

.avatar {
  display: inline-block;
  position: relative;
}
.avatar img {
  height: 40px;
  width: 40px;
}
.avatar .icon-agent {
  color: rgba(247, 221, 56, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: #000000;
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/
.footer {
  /* border-top: 1px solid #ddd; */
  margin-top: 60px;
  padding: 30px 0;
}
.footer a {
  /*color: #5a6d7c;*/
  color: #2F3941;
}
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: center;
}
.footer-inner .footer-brand-link {
  font-family: 'Nunito';
  font-weight: 700;
  font-size: 16px;
  color: #000;
  text-decoration: underline;
}
.footer-inner .footer-brand--no-underline .footer-brand-link {
  text-decoration: none;
}
@media (min-width: 1160px) {
  .footer-inner {
    padding: 0;
    width: 90%;
  }
}
.footer-language-selector button {
  color: #5a6d7c;
  display: inline-block;
}

.powered-by-zendesk a,
.powered-by-zendesk a:visited {
  color: #5a6d7c;
}

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  color: #5a6d7c;
  font-size: 13px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumbs li + li::before {
  content: ">";
  margin: 0 4px;
}
.breadcrumbs li a:visited {
  color: rgba(86, 86, 79, 1);
}

/***** Search field *****/
.search-container {
  position: relative;
}

.search {
  border-color: #87929D;
  border-radius: 30px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}
.search:focus-within {
  border-color: rgba(247, 221, 56, 1);
}
.search input[type=search],
.search .clear-button {
  background-color: #fff;
  border-radius: 30px;
  border: none;
}
.search-full input[type=search], .search-full .clear-button {
  border-color: #fff;
}
/* Hero search bar: borderless with a soft drop shadow */
.search-full {
  border: none;
  box-shadow: 0 5px 15px 4px rgba(0, 0, 0, 0.25);
}
.search-full:focus-within {
  border: none;
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #666;
  flex: 1 1 auto;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;  /* inputs don't inherit font-family — set the brand font explicitly */
  height: 40px;
  width: 100%;
}
/* Hero search bar is taller than the default 40px search field */
.search-full input[type=search] {
  height: 45px;
}
.search input[type=search]:focus {
  color: #555;
}
.search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.search input[type=search]:-webkit-autofill, .search input[type=search]:-webkit-autofill:hover, .search input[type=search]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: #777;
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}
.search .clear-button:hover {
  background-color: rgba(247, 221, 56, 1);
  color: #fff;
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(247, 221, 56, 1);
}
.search-has-value .clear-button {
  display: flex;
}

[dir=ltr] .search input[type=search] {
  padding-left: 40px;
  padding-right: 20px;
}
/* Hero search uses the wider ringed icon, so nudge its placeholder over a touch.
   Scoped with .search.search-full (specificity beats the rule above) so the
   header / results-page searches keep the default 40px. */
[dir=ltr] .search.search-full input[type=search] {
  padding-left: 52px;
}
[dir=ltr] .search-has-value input[type=search] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=ltr] .search-has-value input[type=search]:focus {
  border-right-color: rgba(247, 221, 56, 1);
}
[dir=ltr] .search .clear-button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=ltr] .search .clear-button:focus {
  border-left-color: rgba(247, 221, 56, 1);
}

[dir=rtl] .search input[type=search] {
  padding-left: 20px;
  padding-right: 40px;
}
[dir=rtl] .search-has-value input[type=search] {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=rtl] .search-has-value input[type=search]:focus {
  border-left-color: rgba(247, 221, 56, 1);
}
[dir=rtl] .search .clear-button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=rtl] .search .clear-button:focus {
  border-right-color: rgba(247, 221, 56, 1);
}

.search-icon {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  left: 8px;
  z-index: 1;
  width: 32px;
  height: 32px;
  color: #777;
  pointer-events: none;
}
[dir=rtl] .search-icon {
  left: auto;
  right: 15px;
}

/***** Hero component *****/
/* Full-bleed: the hero spans the full content width, flush under the header. */
.hero-home {
  margin: 0;
}

/* Two-column split: text + search on the left, image panel on the right.
   Square corners (no radius); the yellow image panel bleeds to the right edge.
   Collapses to a single stacked column at ≤900px (see media query below). */
.hero {
  display: grid;
  /* 7:8 = the Figma's 672:768 split (text | image). */
  grid-template-columns: minmax(0, 7fr) minmax(0, 8fr);
  align-items: stretch;
  overflow: hidden;
  background: #fff;
}

.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Single-token clamp args only (no arithmetic, no interpolation) so every
     Sass pipeline passes them through as literal CSS. */
  gap: clamp(14px, 2vw, 22px);
  /* The hero is full-bleed; only this inner text is inset. Left padding is the
     shared page gutter (≈56px) so the text lines up with the header logo and
     the cards below — no centring/calc, just the same gutter everywhere. */
  padding: clamp(40px, 6vw, 72px) clamp(20px, 3vw, 40px) clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px);
  text-align: left;
}

.hero-eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: #362500;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

.hero-heading {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: #1A1A1A;
  /* Fluid: 32px on a phone up to 46px on a wide viewport. */
  font-size: clamp(32px, 5vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}

.hero-subheading {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: #56564F;
  font-size: clamp(15px, 1.5vw, 16px);
  line-height: 1.6;
  margin: 0;
  max-width: 32em;
}

/* ---- Hero search pill (configurable inline submit button) ----
   The {{search}} helper renders <input type=search> + <input type=submit>;
   script.js appends a .clear-button. We restyle the helper's <form>.search-full
   into a bordered white pill and order the children: input · clear · submit.
   These rules come after the generic .search-full rules above, so they win. */
.hero-search {
  position: relative;
  width: 100%;
  max-width: 560px;   /* match the category-page search field width */
  margin-top: 4px;
}
.hero-search .search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #1a1a1a;
  z-index: 2;
  pointer-events: none;
}
[dir=rtl] .hero-search .search-icon {
  left: auto;
  right: 18px;
}

.search-full {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;   /* keep input · clear · button on one row; the input
                          (flex:1) shrinks to make room for the clear button */
  gap: 8px;
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
  padding: 7px 8px 7px 0;   /* match the category-page search field */
  transition: border-color 0.25s ease;
}
.search-full:focus-within {
  /* Full border shorthand (not just border-color): an earlier generic rule sets
     `.search-full:focus-within { border: none }`, so only re-setting the colour
     left the border WIDTH at 0 on focus — the 2px border vanished, the pill
     shrank 4px, and justify-content:center re-centred (shifted) the whole hero
     text. Keeping the full 2px border on focus holds the height steady. */
  border: 2px solid rgba(247, 221, 56, 1);
}
.search-full input[type=search] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;   /* override the generic .search input width:100%, which would                 otherwise fill the row and wrap the submit button below */
  order: 1;
  height: 40px;   /* match the category-page search field */
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #1a1a1a;
  font-size: 16px;
  transition: border-color 0.25s ease;   /* for the mobile layout, where the input carries the border */
}
[dir=ltr] .search-full input[type=search],
[dir=ltr] .search.search-full input[type=search] {
  padding: 0 8px 0 46px;   /* left pad clears the overlaid search icon */
}
[dir=rtl] .search-full input[type=search] {
  padding: 0 46px 0 8px;
}
.search-full input[type=search]::placeholder {
  color: #9a9a92;
}
.search-full input[type=submit] {
  order: 3;
  flex: 0 0 auto;
  /* Override the global input[type=submit] button (min-width:190px,
     line-height:2.72, width:100%) which otherwise makes this button huge. */
  min-width: 0;
  width: auto;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  background-color: #F7DD38;
  color: #1A1A1A;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  border-radius: 8px;
  padding: 9px 18px;   /* match the category-page search button */
  white-space: nowrap;
  transition: background-color 0.12s ease-in-out;
}
.search-full input[type=submit]:hover,
.search-full input[type=submit]:focus {
  background-color: #f5d611;
}
/* JS-appended clear (×) button — circular, sits between the input and the
   Search submit, and only shows once the field has a value. Mirrors the
   category-page search (.cat-search .cat-search-field .clear-button). */
.search-full .clear-button {
  order: 2;
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #9a9a92;
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}
/* The generic [dir] rules earlier square off one side and tint the border of
   .search .clear-button; override them so the hero button stays a full circle. */
[dir=ltr] .search.search-full .clear-button,
[dir=rtl] .search.search-full .clear-button {
  border-radius: 50%;
  border-color: transparent;
}
.search-full.search-has-value .clear-button {
  display: inline-flex;
}
.search-full .clear-button:hover {
  color: #1a1a1a;
  background: #f0f0ea;
}



/* ==========================================================================
   Instant search dropdown (native Zendesk "instant search" / unified search)
   --------------------------------------------------------------------------
   Enabled per field via `instant=settings.instant_search` on the {{search}}
   helpers. Zendesk injects these custom elements into the light DOM (so theme
   CSS reaches them) and positions the listbox itself with INLINE styles
   (left/top/width/max-height/overflow) — its width mirrors whichever search
   field is focused. We therefore restyle appearance only, never position, and
   this single global rule set covers every search field (home, category,
   section, article, search results, community). DOM, per browser inspection:
     zd-autocomplete[role=listbox]                 → the floating panel
       zd-autocomplete-multibrand[role=option]     → one result row
         zd-autocomplete-title-multibrand          → result title
         zd-autocomplete-breadcrumbs-multibrand    → breadcrumb path
   ========================================================================== */
zd-autocomplete[role="listbox"] {
  box-sizing: border-box;
  z-index: 100;
  margin-top: 8px;            /* breathing room below the search pill */
  padding: 6px;
  background: #fff;
  border: 2px solid #e9e9e2;  /* match the home category cards' default border */
  border-radius: 14px;        /* match the search pill */
  box-shadow: 0 18px 40px -18px rgba(26, 26, 26, 0.35);
  scrollbar-width: thin;
}

/* `!important` throughout this block: Zendesk injects the instant-search
   stylesheet AFTER style.css, so at equal specificity its rules win on source
   order — notably the blue left-accent border + blue title on the highlighted
   row. We assert the theme's values to beat it. */
zd-autocomplete-multibrand[role="option"] {
  display: block;
  box-sizing: border-box;
  padding: 12px 14px;
  border: none !important;        /* kill the default grey divider AND the blue
                                     left-accent bar Zendesk paints on selected */
  border-radius: 10px;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
/* Pointer hover and keyboard-highlighted row share one highlight, set by the
   "Instant search highlight" theme setting (Search settings group). */
zd-autocomplete-multibrand[role="option"]:hover,
zd-autocomplete-multibrand[role="option"][aria-selected="true"] {
  background: #FEFCEB !important;
}

/* Title — use the brand text colour (overrides Zendesk's default link blue). */
zd-autocomplete-title-multibrand,
zd-autocomplete-title-multibrand a {
  display: block;
  color: #000000 !important;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
}
/* Zendesk wraps the matched substring in <b>/<strong>; keep it the same brand
   colour so the match reads as weight emphasis, not a second colour. */
zd-autocomplete-title-multibrand b,
zd-autocomplete-title-multibrand strong {
  color: #000000 !important;
  font-weight: 800;
}

/* Breadcrumb path — match .sr-item-breadcrumbs (muted grey, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif). */
zd-autocomplete-breadcrumbs-multibrand {
  display: block;
  margin-top: 4px;
  color: #9a9a92 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
}



/* ---- Hero image panel (configurable colour + photo) ---- */
.hero-media {
  position: relative;
  background-color: #F7DD38;
  min-height: clamp(340px, 30vw, 460px);
  overflow: hidden;
}
/* (single-unit clamps like the line above carry no arithmetic, so Sass passes
   them through untouched — no interpolation needed.) */
.hero-photo {
  /* Absolute fill layer so the (portrait) cut-out never dictates the panel
     height — the panel is sized by .hero-media's min-height, and the figure is
     simply contained within it, bottom-anchored. z-index keeps it above the
     optional pattern layer. */
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  /* Scale the figure down slightly so it doesn't dominate the panel. Anchored
     at bottom-centre so it stays grounded while shrinking. Tweak this factor to
     taste (1 = full size). */
  transform: scale(0.9);
  transform-origin: bottom center;
}
/* Optional wide decorative pattern (e.g. a dashed line) layered behind the
   hero photo. `contain` preserves the wave's true proportions (no stretch);
   the scale factor makes it read a touch bolder than its natural fit without
   the full-bleed exaggeration of `cover`. Sides overflow and are clipped by
   .hero-media's overflow:hidden. */
.hero-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* Thickness knob: raise for a bigger/thicker wave, lower toward 1 for thinner. */
  transform: scale(1.25);
  transform-origin: center;
  pointer-events: none;
}

/* ---- Tablet / small laptop and below: stack the hero into one column ----
   900px (not 768) because below it the split's text column would be squeezed
   past its readable floor; this keeps the split honest while it's shown. */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-text {
    /* Horizontal padding = shared gutter, so the stacked text still aligns
       with the cards below. */
    padding: clamp(24px, 5vw, 40px) clamp(24px, 4vw, 56px);
  }
  .hero-search {
    max-width: none;
  }
  .hero-media {
    order: 2;
    min-height: 0;
    height: clamp(220px, 40vw, 360px);
  }
  /* Stacked/narrow panel: the wave reads thinner relative to the panel, so
     scale it up more than the desktop 1.25. Thickness knob for tablet. */
  .hero-pattern {
    transform: scale(2.6);
  }
}

/* ---- Phones: the search button drops full-width below the input ---- */
@media (max-width: 480px) {
  /* Narrowest panel: bump the wave again so it stays legible. Thickness knob
     for phones. */
  .hero-pattern {
    transform: scale(4);
  }
  .search-full {
    border: none;
    padding: 0;
    gap: 0;
    flex-wrap: wrap;   /* allow the full-width Search button to drop below */
  }
  .search-full:focus-within {
    border: none;   /* on phones the input carries the border, not the form */
    box-shadow: none;
  }
  .search-full input[type=search] {
    flex: 1 1 100%;
    width: 100%;
    border: 2px solid #1a1a1a;
    border-radius: 14px;
  }
  .search-full:focus-within input[type=search] {
    border-color: rgba(247, 221, 56, 1);
  }
  /* Both sides reserve fixed room — left for the search icon, right for the
     clear (×) button — regardless of whether the button is currently shown,
     so the input's width and text position never shift while searching. */
  [dir=ltr] .search-full input[type=search] {
    padding: 13px 46px 13px 46px;
  }
  [dir=rtl] .search-full input[type=search] {
    padding: 13px 46px 13px 46px;
  }
  /* The sitewide `.search-has-value` rule (for the fused input+clear-button
     pill used by other search fields) zeroes the input's icon-side corner
     radius and makes that edge's border transparent — on focus it restores
     just the border colour, not the radius — assuming the clear button
     always sits flush against it there. This hero field's clear button is
     an absolute overlay instead (not fused), so restore the input's own
     full border/radius here, mirroring the equivalent override already
     applied to `.search.search-full .clear-button` further up. */
  [dir=ltr] .search.search-full.search-has-value input[type=search] {
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
    border-right-color: #1a1a1a;
  }
  [dir=ltr] .search-full.search-has-value:focus-within input[type=search] {
    border-right-color: rgba(247, 221, 56, 1);
  }
  [dir=rtl] .search.search-full.search-has-value input[type=search] {
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
    border-left-color: #1a1a1a;
  }
  [dir=rtl] .search-full.search-has-value:focus-within input[type=search] {
    border-left-color: rgba(247, 221, 56, 1);
  }
  .search-full input[type=submit] {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 12px;
    padding: 14px;
    border-radius: 14px;
    font-size: 16px;
  }
  /* Overlay the clear (×) button on the input's right edge, the same way
     .search-icon overlays the left, instead of leaving it as a flex child of
     .search-full — a flex child's presence shifts the row (it either wraps
     outside the field or squeezes the input), whereas an absolutely
     positioned overlay (against .hero-search's `position: relative`) never
     affects the input's box. Its own display: none/inline-flex toggle (via
     .search-has-value, set in script.js) still governs visibility. */
  .hero-search .clear-button {
    position: absolute;
    right: 14px;
    top: 20px;
    transform: translateY(-50%);
  }
  [dir=rtl] .hero-search .clear-button {
    right: auto;
    left: 14px;
  }
  /* The search input is the first row (the Search button wraps below it), so
     centre the icon on that row: ~half the input's height, then translate up by
     half the icon so it sits on the centre line rather than below it. */
  .hero-search .search-icon {
    top: 20px;
    transform: translateY(-50%);
  }
}

.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}
@media (min-width: 768px) {
  .page-header {
    align-items: baseline;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;
    margin: 0;
  }
}
.page-header .section-subscribe {
  flex-shrink: 0;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .page-header .section-subscribe {
    margin-bottom: 0;
  }
}
.page-header h1 {
  flex-grow: 1;
  margin-bottom: 10px;
}
.page-header-description {
  font-style: italic;
  margin: 0 0 30px 0;
  word-break: break-word;
}
@media (min-width: 1024px) {
  .page-header-description {
    flex-basis: 100%;
  }
}
.page-header .icon-lock {
  height: 20px;
  width: 20px;
  position: relative;
  left: -5px;
  vertical-align: baseline;
}

.sub-nav {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 15px 30px;
  justify-content: space-between;
  margin-bottom: 55px;
}
@media (min-width: 768px) {
  .sub-nav {
    flex-direction: row;
  }
}
.sub-nav .breadcrumbs {
  margin: 0;
}
.sub-nav .search-container {
  max-width: 300px;
  width: 100%;
}
@media (min-width: 768px) {
  .sub-nav .search-container {
    flex: 0 1 300px;
  }
}
.sub-nav input[type=search]::after {
  font-size: 15px;
}
/* Article top bar: breadcrumb on the left, a compact search on the right, on one
   row aligned to the article column. Wraps to stacked on narrow screens. */
.article-topbar {
  display: flex;
  /* Top-align so the breadcrumb lines up with the sidebar's "Articles in this
     section" heading rather than centring against the taller search pill. */
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.article-topbar .article-breadcrumbs {
  margin-bottom: 0;
  flex: 1 1 auto;
}

/* Article-page search → a compact pill, right-aligned in the top bar. White with
   the theme's brand focus, but smaller/lighter than the home/category hero search
   so it reads as a secondary utility on a reading-focused page. */
.article-search {
  position: relative;
  flex: 0 1 300px;
  min-width: 220px;
}
.article-search .search {
  border: 1px solid #d6d6d0;
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
  transition: border-color 0.15s ease;
}
.article-search .search:focus-within {
  border-color: rgba(247, 221, 56, 1);
}
.article-search .search input[type=search] {
  height: 38px;
  border-radius: 999px;
  background: transparent;
  font-size: 14px;
}
.article-search .search-icon {
  width: 16px;
  height: 16px;
  left: 14px;
  color: #68737d;
}
[dir=ltr] .article-search .search input[type=search] {
  padding-left: 38px;
  padding-right: 16px;
}
[dir=rtl] .article-search .search-icon {
  left: auto;
  right: 14px;
}
[dir=rtl] .article-search .search input[type=search] {
  padding-right: 38px;
  padding-left: 16px;
}
.article-search .clear-button {
  display: none;
}
/* Stack on phones: search drops full-width below the breadcrumb, with extra
   space beneath the top bar so the wrapped search clears the article title. */
@media (max-width: 600px) {
  .article-search {
    flex: 1 1 100%;
  }
  .article-topbar {
    margin-bottom: 32px;
  }
}

/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}
.blocks-item {
  border: 1px solid rgba(247, 221, 56, 1);
  border-radius: 4px;
  box-sizing: border-box;
  color: rgba(247, 221, 56, 1);
  display: flex;
  flex: 1 0 340px;
  margin: 0 0 30px;
  max-width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 15px 30px;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
  background-color: rgba(247, 221, 56, 1);
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: #000000;
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: #2F3941;
}
.blocks-item-link {
  color: rgba(247, 221, 56, 1);
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  border-radius: inherit;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active {
  color: inherit;
  text-decoration: none;
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(247, 221, 56, 1);
  text-decoration: none;
}
.blocks-item-title {
  margin-bottom: 0;
  font-size: 16px;
}
.blocks-item-description {
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
}

/* Home page "Browse by topic" heading */
.browse-heading {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: #1a1a1a;
  font-size: clamp(20px, 2.5vw, 24px);
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

/* Full-width browse section using the shared page gutter (≈56px), so "Browse
   by topic" and the cards span wide and their left edge lines up with the hero
   text and the header logo. Overrides the base .container max-width/centring. */
.container.home-categories {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 clamp(24px, 4vw, 56px);
}

/* Home page category cards. One fluid auto-fit grid reflows 4→2→1 across
   widths and also handles 5–6 cards, so there are no per-count breakpoints. */
.cat-cards {
  display: grid;
  /* auto-fit reflows 4→2→1 across widths (and handles 5–6 cards) with no
     per-count breakpoints. Plain minmax — no min()/interpolation — so it
     survives Zendesk's Sass/CSS pipeline intact. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cat-card-item {
  display: flex;
}
.cat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: clamp(20px, 2vw, 26px);
  background: #fff;
  /* 2px base (grey) so the hover only swaps the colour — no width change, no
     layout shift — matching the search bar's focus border treatment. */
  border: 2px solid #e9e9e2;
  border-radius: 16px;
  text-align: left;
  text-decoration: none;
  transition: border-color 0.25s ease;
}
.cat-card:visited {
  text-decoration: none;
}
.cat-card:hover, .cat-card:focus-within {
  /* Same as the search bar's :focus-within — yellow border, no shadow/lift, and
     no underline (overrides the global a:hover underline). */
  border-color: rgba(247, 221, 56, 1);
  text-decoration: none;
}
.cat-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  background-color: #FCE96A;
  color: #1a1a1a;
}
.cat-card-icon {
  flex: none;
  width: 24px;
  height: 24px;
  display: block;
}
.cat-card-title {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: #1a1a1a;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}
.cat-card-desc {
  flex: 0 1 auto;
  margin: 0;
  color: #2F3941;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  /* Preserve newlines in the setting value so a "\n" forces a line break */
  white-space: pre-line;
}
.cat-card-desc:empty {
  display: none;
}
.cat-card-explore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;   /* pin to the card bottom for even rows */
  padding-top: 4px;
  color: #1a1a1a;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
}
.cat-card-arrow {
  flex: none;
  width: 15px;
  height: 15px;
}
/* (The Explore link no longer underlines on card hover.) */

/* ---- Phones: single-column cards switch to an icon-left layout and drop the
   Explore link, matching the mobile design. (Card width can't distinguish a
   1-up phone card from a 2-up tablet card, so this is viewport-driven.) ---- */
@media (max-width: 480px) {
  .cat-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 14px;
    row-gap: 8px;
  }
  .cat-card-title {
    flex: 1 1 0;
    min-width: 0;
  }
  .cat-card-desc {
    flex: 1 1 100%;
    padding-left: 60px;   /* align under the title, clear of the 46px badge */
  }
  .cat-card-explore {
    display: none;
  }
}

/***** Homepage *****/
.section {
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .section {
    margin-bottom: 60px;
  }
}

.home-section h2 {
  margin-bottom: 10px;
  text-align: center;
}

/***** Promoted articles *****/
.promoted-articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .promoted-articles {
    flex-direction: row;
  }
}
.promoted-articles-item {
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .promoted-articles-item {
    align-self: flex-end;
    flex: 0 0 auto;
    padding-right: 30px;
    width: 33%; /* Three columns on desktop */
  }
  [dir=rtl] .promoted-articles-item {
    padding: 0 0 0 30px;
  }
}
.promoted-articles-item:nth-child(3n) {
  padding-right: 0;
}
.promoted-articles-item a {
  display: block;
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}
.promoted-articles-item .icon-lock {
  vertical-align: baseline;
}
.promoted-articles-item:last-child a {
  border: 0;
}
@media (min-width: 1024px) {
  .promoted-articles-item:last-child a {
    border-bottom: 1px solid #ddd;
  }
}

/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: rgba(86, 86, 79, 1);
  text-decoration: underline;
}
.community a:visited {
  color: rgba(86, 86, 79, 1);
}
.community a:hover, .community a:active, .community a:focus {
  color: rgba(86, 86, 79, 1);
}

.community,
.activity {
  border-top: 1px solid #ddd;
  padding: 30px 0;
}

/***** Recent activity *****/
.recent-activity-header {
  margin-bottom: 10px;
  text-align: center;
}
.recent-activity-list {
  padding: 0;
}
.recent-activity-item {
  border-bottom: 1px solid #ddd;
  overflow: auto;
  padding: 20px 0;
}
.recent-activity-item h3 {
  margin: 0;
}
.recent-activity-item-parent {
  font-size: 16px;
  font-weight: 600;
}
.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  display: inline-block;
  width: 100%;
}
@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}
.recent-activity-item-link {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-activity-item-meta {
  color: #2F3941;
  margin: 15px 0 0 0;
  float: none;
}
@media (min-width: 768px) {
  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir=rtl] .recent-activity-item-meta {
    float: left;
  }
}
.recent-activity-item-time, .recent-activity-item-comment {
  display: inline-block;
  font-size: 13px;
}
.recent-activity-item-comment {
  padding-left: 5px;
}
[dir=rtl] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}
.recent-activity-item-comment::before {
  display: inline-block;
}
.recent-activity-controls {
  padding-top: 15px;
}
.recent-activity-controls a {
  color: rgba(86, 86, 79, 1);
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: rgba(86, 86, 79, 1);
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: rgba(86, 86, 79, 1);
}
.recent-activity-accessibility-label {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.recent-activity-comment-icon svg {
  vertical-align: middle;
  color: rgba(247, 221, 56, 1);
  width: 16px;
  height: 16px;
}
.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}
[dir=rtl] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}

/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: flex-end;
}
.category-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 80%;
  }
}

.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .section-tree {
    flex-direction: row;
  }
}
.section-tree .section {
  flex: initial;
  max-width: 100%;
}
@media (min-width: 768px) {
  .section-tree .section {
    flex: 0 0 45%; /* Two columns for tablet and desktop. Leaving 5% separation between columns */
  }
}
.section-tree-title {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
}
.section-tree-title a {
  color: #2F3941;
}
.section-tree .see-all-articles {
  display: block;
  padding: 15px 0;
}

.article-list-item {
  font-size: 16px;
  padding: 15px 0;
  text-overflow: ellipsis;
  overflow: hidden;
}
.article-list-item a {
  color: #2F3941;
}

.icon-star {
  color: rgba(247, 221, 56, 1);
  font-size: 18px;
}

/***** Section pages *****/
.section-container {
  display: flex;
  justify-content: flex-end;
}
.section-content {
  flex: 1;
  max-width: 100%;
}
@media (min-width: 1024px) {
  .section-content {
    flex: 0 0 80%;
  }
}
.section-list {
  margin: 40px 0;
}

.section-list-item {
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  padding: 15px 0;
}
.section-list-item:first-child {
  border-top: 1px solid #ddd;
}
.section-list-item a {
  align-items: center;
  color: #2F3941;
  display: flex;
  justify-content: space-between;
}

.see-all-sections-trigger {
  cursor: pointer;
  display: block;
  padding: 15px;
  text-align: center;
}
.see-all-sections-trigger[aria-hidden=true] {
  display: none;
}

/* Article page uses the wider 1280px brand layout (matching home/category) with
   a generous gutter, so the page reads less indented than the base .container. */
.container.article-page {
  max-width: 1680px;
  width: 100%;
  margin: 0 auto;
  /* Wide layout with tight side gutters so the nav sits close to the edge and
     the top bar has room to push search to the right; ≥40px top clears the header. */
  padding: 40px clamp(16px, 2.5vw, 32px) 0;
}

/***** Article *****/
.article {
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .article {
    /* Fill the space beside the sidebar; the reading measure is capped on
       .article-content, so the column can be wide without hurting legibility. */
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
  }
}
.article-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
    /* Generous gutter between the "Articles in this section" rail and the article.
       The reading column is capped at 760px, so a wider gap simply pushes the
       article away from the nav rather than hurting legibility. */
    gap: clamp(48px, 7vw, 112px);
  }
}
.article-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  margin-top: 20px;
  /* Match the article content's reading width so the title wraps in line with
     the body below it instead of running the full column width. */
  max-width: 820px;
  /* Hairline rule under the title block. padding-bottom holds the border off the
     title; it scales down on smaller screens (24px desktop → 18px mobile) so the
     header doesn't feel bottom-heavy on compact layouts. The border spans the
     header's width (capped at 820px), aligning with the title above it. */
  padding-bottom: clamp(18px, 3vw, 24px);
  border-bottom: 1px solid #efefe9;
}
@media (min-width: 768px) {
  .article-header {
    margin-top: 0;
  }
}

/* Breadcrumb now lives at the top of the article column (aligned with the
   title/badge), not the full-width sub-nav. Slash separators, bold first crumb. */
.article-breadcrumbs {
  margin-bottom: 22px;
}
.article-breadcrumbs .breadcrumbs {
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.article-breadcrumbs .breadcrumbs li {
  max-width: none;
  color: #9a9a92;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.article-breadcrumbs .breadcrumbs li:first-child a {
  color: #1a1a1a;
  font-weight: 700;
}
.article-breadcrumbs .breadcrumbs li a {
  color: inherit;
}
.article-breadcrumbs .breadcrumbs li + li::before {
  content: "/";
  margin: 0 4px;
  color: #9a9a92;
}

.article-title {
  max-width: 100%;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: #1a1a1a;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  /* Remove the heading's default bottom margin so the gap below the title is
     controlled solely by .article-header's margin-bottom (avoids two stacked
     margins). Scoped to the article H1, so body headings are unaffected. */
  margin-bottom: 0;
}
.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.article [role=button] {
  flex-shrink: 0; /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}
@media (min-width: 768px) {
  .article [role=button] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body {
  display: flow-root;
}
.article-body a {
  color: rgba(86, 86, 79, 1);
  text-decoration: underline;
}
.article-body a:visited {
  color: rgba(86, 86, 79, 1);
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: rgba(86, 86, 79, 1);
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figure.image {
  display: table;
  margin: 0 auto;
}
.article-body figure.image > img {
  display: block;
  width: 100%;
}
.article-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.article-body ul,
.article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .article-body ul,
[dir=rtl] .article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.article-body ul > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body li > ul,
.article-body li > ol {
  margin: 0;
}
.article-body ul {
  list-style-type: disc;
}
.article-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #5a6d7c;
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
  margin: 40px 0;
  word-wrap: break-word;
  /* Cap the reading measure for legibility; the column stays fluid below this. */
  max-width: 820px;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #5a6d7c;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(247, 221, 56, 1);
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    /* Wider, fluid sidebar (~Figma 288px) so the section TOC has breathing room. */
    flex: 0 0 clamp(240px, 24%, 300px);
    max-width: 300px;
    height: auto;
  }
}
/* Article relatives — related (card grid) + recently viewed (compact list),
   stacked full-width with a divider above. */
.article-relatives {
  display: flex;
  flex-direction: column;
  gap: 64px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid #efefe9;
  overflow-wrap: break-word;
  /* Match the article content's reading width so recently-viewed / related line
     up with the body above instead of running the full column width. */
  max-width: 820px;
}
.article-relatives > * {
  padding: 0;
}

/* Article feedback ("Was this article helpful?") — Figma card. Off by default
   (settings.show_article_votes); the {{vote}} helper supplies the buttons. */
.article-votes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding: 24px 28px;
  background: #fbfbf8;
  border: 1px solid #efefe9;
  border-radius: 16px;
  text-align: left;
  /* Match the article content's reading width so the card lines up with the
     body, breadcrumb and related sections instead of running the full column. */
  max-width: 820px;
}
.article-votes-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.article-votes-question {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #1a1a1a;
  margin: 0;
}
.article-votes-count {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: #9a9a92;
}
.article-votes-controls {
  display: flex;
  gap: 12px;
  flex: none;
}
.article-vote {
  display: inline-flex;
  align-items: center;
  /* Compact square icon button: centre the icon both axes. gap/padding are zeroed
     so the (visually hidden) label can't add phantom width that shoves the icon
     off-centre. */
  justify-content: center;
  gap: 0;
  width: 44px;
  height: 44px;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1.5px solid #e3e3db;
  border-radius: 11px;
  color: #1a1a1a;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
/* Label kept in the DOM for the accessible name, hidden visually so the buttons
   read as icon-only (matches the live {{vote}} helper output). */
.article-vote-label-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.article-vote:visited {
  color: #1a1a1a;
}
.article-vote:hover, .article-vote:focus {
  border-color: #1a1a1a;
  text-decoration: none;
}
.article-vote-icon {
  width: 16px;
  height: 16px;
  flex: none;
}
.article-vote-selected {
  border-color: rgba(247, 221, 56, 1);
  background: #fdf6cf;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: rgba(86, 86, 79, 1);
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: rgba(86, 86, 79, 1);
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: rgba(86, 86, 79, 1);
}
.article-return-to-top {
  border-top: 1px solid #87929D;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  /* Match .recent-articles li a's type treatment for a consistent footer feel. */
  color: #1a1a1a;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 20px 0;
}
.article-return-to-top a:visited {
  color: #1a1a1a;
}
.article-return-to-top a:hover, .article-return-to-top a:focus {
  text-decoration: none;
  color: #1a1a1a;
}
.article-return-to-top-icon {
  /* Match .recent-articles li a::after's icon size/colour treatment. */
  flex: none;
  width: 18px;
  height: 18px;
  color: #9a9a92;
}
.article-return-to-top a:hover .article-return-to-top-icon,
.article-return-to-top a:focus .article-return-to-top-icon {
  color: #1a1a1a;
}
.article td > p:first-child,
.article th > p:first-child {
  margin-top: 0;
}
.article td > p:last-child,
.article th > p:last-child {
  margin-bottom: 0;
}

.sidenav-title {
  font-size: 15px;
  position: relative;
  font-weight: 600;
}
.sidenav-item {
  display: block;
  margin-top: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Article sidebar — "Articles in this section" table of contents (Figma):
   uppercase label, then a continuous left rail where the current article's
   segment turns brand yellow and bold. Scoped to .article-sidebar so the
   search-results sidebar keeps its own treatment. */
.article-sidebar .sidenav-title {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #9a9a92;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.article-sidebar .collapsible-sidebar-body {
  margin-top: 16px;
}
.article-sidebar .sidenav-item {
  display: block;
  margin: 0;
  padding: 10px 0 10px 16px;
  border-left: 2px solid #efefe9;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  color: #56564f;
  /* Let long titles wrap (design wraps to 2 lines) — override the base ellipsis. */
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
[dir=rtl] .article-sidebar .sidenav-item {
  border-left: 0;
  border-right: 2px solid #efefe9;
  padding: 10px 16px 10px 0;
}
.article-sidebar .sidenav-item:hover,
.article-sidebar .sidenav-item:focus {
  color: #1a1a1a;
  text-decoration: none;
  border-left-color: #d8d8cf;
}
[dir=rtl] .article-sidebar .sidenav-item:hover,
[dir=rtl] .article-sidebar .sidenav-item:focus {
  border-right-color: #d8d8cf;
}
.article-sidebar .sidenav-item.current-article {
  border-left-color: rgba(247, 221, 56, 1);
  color: #1a1a1a;
  font-weight: 700;
}
[dir=rtl] .article-sidebar .sidenav-item.current-article {
  border-right-color: rgba(247, 221, 56, 1);
}
/* "See more" link sits flush with the rail's text column. */
.article-sidebar .article-sidebar-item {
  display: block;
  padding: 10px 0 0 16px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #1a1a1a;
}
[dir=rtl] .article-sidebar .article-sidebar-item {
  padding: 10px 16px 0 0;
}

/* Related articles → responsive card grid. The {{related_articles}} helper only
   exposes the title + link, so each card shows the title with a hover border and
   an arrow affordance. */
.related-articles ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.related-articles li {
  margin: 0;
}
.related-articles li a {
  display: flex;
  flex-direction: column;
  /* Minimum space between the title and the bottom-pinned arrow, even when the
     title is long enough to fill the card (margin-top:auto alone collapses to 0). */
  gap: 16px;
  height: 100%;
  padding: 24px;
  background: #fff;
  border: 1px solid #e9e9e2;
  border-radius: 16px;
  color: #1a1a1a;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: border-color 0.2s ease;
}
.related-articles li a:visited {
  color: #1a1a1a;
}
.related-articles li a:hover, .related-articles li a:focus {
  border-color: rgba(247, 221, 56, 1);
  text-decoration: none;
}
/* Arrow drawn as an SVG (via mask, so it recolours cleanly) — not a text glyph. */
.related-articles li a::after {
  content: "";
  margin-top: auto;
  width: 22px;
  height: 22px;
  background-color: #1a1a1a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Recently viewed → compact divided list, deliberately distinct from the
   related-articles card grid. */
.recent-articles ul {
  display: flex;
  flex-direction: column;
}
.recent-articles li {
  margin: 0;
  border-bottom: 1px solid #efefe9;
}
.recent-articles li:first-child {
  border-top: 1px solid #efefe9;
}
.recent-articles li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px;
  color: #1a1a1a;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
}
.recent-articles li a:visited {
  color: #1a1a1a;
}
.recent-articles li a::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: #9a9a92;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.recent-articles li a:hover, .recent-articles li a:focus {
  text-decoration: none;
  color: #1a1a1a;
}
.recent-articles li a:hover::after, .recent-articles li a:focus::after {
  background-color: #1a1a1a;
}

/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */
.attachments .attachment-item {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}
.attachments .attachment-item:last-child {
  margin-bottom: 0;
}
.attachments .attachment-item .attachment-icon {
  color: #2F3941;
  left: 0;
  position: absolute;
  top: 5px;
}
[dir=rtl] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}
[dir=rtl] .attachments .attachment-item .attachment-icon {
  left: auto;
  right: 0;
}

.upload-dropzone span {
  color: #5a6d7c;
}

/***** Social share links *****/
.share {
  padding: 0;
  white-space: nowrap;
}

.share li, .share a {
  display: inline-block;
}

.share li {
  height: 25px;
  width: 25px;
}

.share a {
  color: #5a6d7c;
}
.share a:hover {
  text-decoration: none;
  color: rgba(247, 221, 56, 1);
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}
.comment-heading {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}
/* "Recently viewed" and "Related articles" are sibling section headings at the
   same hierarchy level, so they share one identical (and responsive) treatment. */
.recent-articles-title,
.related-articles-title {
  margin-top: 0;
  margin-bottom: 18px;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -0.02em;
  font-size: clamp(19px, 2.2vw, 22px);
}
.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: #5a6d7c;
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: rgba(86, 86, 79, 1);
  text-decoration: underline;
}
.comment-callout a:visited {
  color: rgba(86, 86, 79, 1);
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: rgba(86, 86, 79, 1);
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #5a6d7c;
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid rgba(247, 221, 56, 1);
  padding: 40px 20px 20px;
}
@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}
.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}
.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}
.comment-avatar {
  margin-right: 10px;
}
[dir=rtl] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.comment-meta {
  flex: 1 1 auto;
}
.comment-labels {
  flex-basis: 100%;
}
@media (min-width: 768px) {
  .comment-labels {
    flex-basis: auto;
  }
}
.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}
.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}
.comment-container {
  width: 100%;
}
.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}
@media (min-width: 768px) {
  [dir=ltr] .comment-form-controls {
    text-align: right;
  }
}
.comment-form-controls input[type=submit] {
  margin-top: 15px;
}
@media (min-width: 1024px) {
  .comment-form-controls input[type=submit] {
    margin-left: 15px;
  }
  [dir=rtl] .comment-form-controls input[type=submit] {
    margin-left: 0;
    margin-right: 15px;
  }
}
.comment-form-controls input[type=checkbox] {
  margin-right: 5px;
}
.comment-form-controls input[type=checkbox] [dir=rtl] {
  margin-left: 5px;
}
.comment-ccs {
  display: none;
}
.comment-ccs + textarea {
  margin-top: 10px;
}
.comment-attachments {
  margin-top: 10px;
}
.comment-attachments a {
  color: rgba(247, 221, 56, 1);
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: rgba(86, 86, 79, 1);
  text-decoration: underline;
}
.comment-body a:visited {
  color: rgba(86, 86, 79, 1);
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: rgba(86, 86, 79, 1);
}
.comment-body img {
  height: auto;
  max-width: 100%;
}
.comment-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figure.image {
  display: table;
  margin: 0 auto;
}
.comment-body figure.image > img {
  display: block;
  width: 100%;
}
.comment-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.comment-body ul,
.comment-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .comment-body ul,
[dir=rtl] .comment-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.comment-body ul > ul,
.comment-body ol > ol,
.comment-body ol > ul,
.comment-body ul > ol,
.comment-body li > ul,
.comment-body li > ol {
  margin: 0;
}
.comment-body ul {
  list-style-type: disc;
}
.comment-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #5a6d7c;
  font-style: italic;
  padding: 0 15px;
}
.comment-mark-as-solved {
  display: inline-block;
}

/***** Vote *****/
/* Used in article comments, post comments and post */
.vote {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.vote a:active, .vote a:hover, .vote a:focus {
  text-decoration: none;
}

.vote-sum {
  color: #5a6d7c;
  display: block;
  margin: 3px 0;
}
[dir=rtl] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}

.vote-up svg {
  transform: scale(1, -1);
}

.vote-up:hover,
.vote-down:hover {
  color: rgba(247, 221, 56, 1);
}

.vote-up, .vote-down {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  color: #5a6d7c;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vote-voted {
  color: rgba(247, 221, 56, 1);
}

.vote-voted:hover {
  color: #c1a808;
}

/***** Actions *****/
/* Styles admin and en user actions(edit, delete, change status) in comments and posts */
.actions {
  text-align: center;
  flex-shrink: 0; /*Avoid collapsing elements in Safari*/
}
.actions button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/***** Community *****/
.community-hero {
  margin-bottom: 10px;
}
.community-footer {
  padding-top: 50px;
  text-align: center;
}
.community-footer-title {
  font-size: 16px;
  margin-bottom: 20px;
}
.community-featured-posts .title {
  font-size: 18px;
  font-weight: 600;
}
.community-featured-posts, .community-activity {
  padding-top: 40px;
  width: 100%;
}
.community-header {
  margin-bottom: 30px;
}
.community-header .title {
  margin-bottom: 0;
  font-size: 16px;
}

.post-to-community {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .post-to-community {
    margin: 0;
  }
}

/* Community topics grid */
.topics {
  max-width: none;
  width: 100%;
}
.topics-item .meta-group {
  justify-content: center;
  margin-top: 20px;
}

/* Community topic page */
.topic-header {
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}
@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}
.topic-header .dropdown {
  display: block;
  border-top: 1px solid #ddd;
  padding: 10px 0;
}
@media (min-width: 768px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}

.no-posts-with-filter {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}
.community-follow button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}
.community-follow button:hover {
  background-color: rgba(247, 221, 56, 1);
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #000000;
  color: #000000;
}
.community-follow button[data-selected=true] {
  background-color: rgba(247, 221, 56, 1);
  color: #000000;
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid #000000;
  color: #000000;
}
.community-follow button[data-selected=true]:hover {
  background-color: #c1a808;
  border-color: #c1a808;
}
.community-follow button::after {
  border-left: 1px solid rgba(247, 221, 56, 1);
  content: attr(data-follower-count);
  color: rgba(247, 221, 56, 1);
  display: inline-block;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}
@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}
[dir=rtl] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid rgba(247, 221, 56, 1);
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: rgba(86, 86, 79, 1);
  margin-bottom: 10px;
  margin-right: 5px;
}
.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}
.striped-list-title:visited {
  color: rgba(86, 86, 79, 1);
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #5a6d7c;
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}
.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}
@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}
.striped-list-count-item:last-child::after {
  display: none;
}
.striped-list-number {
  text-align: center;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: #2F3941;
    display: block;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #038153;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}
.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}
.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: rgba(247, 221, 56, 1);
}
.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }
}
[dir=rtl] .status-label-official {
  left: 30px;
  right: auto;
}
.status-label-not-planned, .status-label-closed {
  background-color: #e9ebed;
  color: #5a6d7c;
}
.status-label-pending, .status-label-pending-moderation {
  background-color: #1f73b7;
  text-align: center;
}
.status-label-open {
  background-color: #c72a1c;
}
.status-label-solved {
  background-color: #68737d;
}
.status-label-new {
  background-color: #ffb648;
  color: #703b15;
}
.status-label-hold {
  background-color: #000;
}
.status-label-request {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .status-label-request {
    max-width: 150px;
  }
}

/***** Post *****/
/*
* The post grid is defined this way:
* Content | Sidebar
* 70%     | 30%
*/
.post {
  flex: 1;
  margin-bottom: 10px;
}
@media (min-width: 1024px) {
  .post {
    flex: 1 0 70%;
    max-width: 70%;
  }
}
.post-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .post-container {
    flex-direction: row;
  }
}
.post-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .post-header {
    align-items: baseline;
    flex-direction: row;
  }
}
.post-header .status-label {
  vertical-align: super;
}
.post-title {
  margin-bottom: 20px;
  width: 100%;
}
@media (min-width: 768px) {
  .post-title {
    margin-bottom: 0;
    padding-right: 10px;
  }
}
.post-title h1 {
  display: inline;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .post-title h1 {
    margin-right: 5px;
  }
}
.post-author {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}
.post-avatar {
  margin-bottom: 30px;
}
.post-content {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  word-break: break-word;
}
.post-info-container {
  display: flex;
  margin-bottom: 40px;
}
.post-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .post-info {
  padding-right: 0;
  padding-left: 20px;
}
.post-meta {
  display: inline-block;
  flex: 1;
  margin-left: 10px;
  vertical-align: middle;
}
[dir=rtl] .post-meta {
  margin-left: 0;
  margin-right: 10px;
}
.post-body {
  display: flow-root;
}
.post-body a {
  color: rgba(86, 86, 79, 1);
  text-decoration: underline;
}
.post-body a:visited {
  color: rgba(86, 86, 79, 1);
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: rgba(86, 86, 79, 1);
}
.post-body img {
  height: auto;
  max-width: 100%;
}
.post-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figure.image {
  display: table;
  margin: 0 auto;
}
.post-body figure.image > img {
  display: block;
  width: 100%;
}
.post-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.post-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.post-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.post-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.post-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.post-body ul,
.post-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .post-body ul,
[dir=rtl] .post-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.post-body ul > ul,
.post-body ol > ol,
.post-body ol > ul,
.post-body ul > ol,
.post-body li > ul,
.post-body li > ol {
  margin: 0;
}
.post-body ul {
  list-style-type: disc;
}
.post-body :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #5a6d7c;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #5a6d7c;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: rgba(247, 221, 56, 1);
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}
.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}
@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir=rtl] .post-sidebar {
    padding: 0 50px 0 0;
  }
}
.post-sidebar-title {
  font-size: 18px;
  font-weight: 600;
}
.post-comments {
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}

/***** Community Badges *****/
/* Styles labels used next to the authors of article comments, community posts, and community comments */
.community-badge-title {
  background-color: #04444d;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 0px 8px;
  vertical-align: top;
  white-space: nowrap;
  display: inline-block;
  line-height: 18px;
  vertical-align: middle;
}

.community-badge-titles {
  display: inline;
}

.community-badge-achievement {
  display: block;
  height: 16px;
  white-space: nowrap;
  width: 16px;
}
.community-badge-achievement img {
  width: 100%;
  height: 100%;
}

.community-badge-achievements {
  display: flex;
}

.community-badge-achievements-rest {
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  vertical-align: top;
}

.community-badge {
  margin: 2px;
}

.profile-info .community-badge-title {
  padding: 2px 8px;
  line-height: 20px;
}
.profile-info .community-badge-achievement {
  height: 40px;
  width: 40px;
}
.profile-info .community-badge-achievements-rest {
  line-height: 40px;
  font-size: 20px;
}

/* Navigation element that collapses on mobile */
.collapsible-nav {
  flex-direction: column;
  font-size: 14px;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav {
    flex-direction: row;
  }
}

.collapsible-nav-border {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}
@media (min-width: 768px) {
  .collapsible-nav-border {
    border-top: 0;
  }
}

.collapsible-nav-toggle {
  top: 22.5px;
  transform: translateY(-50%);
  position: absolute;
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 768px) {
  .collapsible-nav-toggle {
    display: none;
  }
}
[dir=rtl] .collapsible-nav-toggle {
  left: 0;
  right: auto;
}
.collapsible-nav-toggle-icon {
  display: none;
}
.collapsible-nav-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-nav-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-nav-toggle:focus {
  outline: none;
  border: 1px solid rgba(247, 221, 56, 1);
}

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: #2F3941;
  line-height: 45px;
  order: 1;
}
@media (min-width: 768px) {
  .collapsible-nav-list li {
    line-height: normal;
    margin-right: 30px;
  }
  [dir=rtl] .collapsible-nav-list li {
    margin-left: 30px;
    margin-right: 0;
  }
  .collapsible-nav-list li a {
    text-decoration: none;
    padding: 15px 0;
  }
}
.collapsible-nav-list li a {
  color: #2F3941;
  display: block;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ddd;
  }
  .collapsible-nav-list li:hover a:not([aria-current=page]) {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}
.collapsible-nav-list li:not([aria-selected=true]),
.collapsible-nav-list li:not(.current) {
  display: none;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:not([aria-selected=true]),
  .collapsible-nav-list li:not(.current) {
    display: block;
  }
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true] {
    padding: 15px 0 11px 0;
  }
}
.collapsible-nav-list li[aria-selected=true],
.collapsible-nav-list li.current {
  order: 0;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true],
  .collapsible-nav-list li.current {
    border-bottom: 4px solid rgba(247, 221, 56, 1);
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: #2F3941;
}

.collapsible-nav[aria-expanded=true] li:not([aria-selected=true]),
.collapsible-nav[aria-expanded=true] li:not(.current) {
  display: block;
}

/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}
@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}
.collapsible-sidebar-title {
  margin-top: 0;
}
/* Title + toggle in one flex row so the button centers on the title's own
   line-box (whatever its height happens to be) instead of a hardcoded pixel
   offset that only matched one assumed line-height and drifted out of
   alignment at other breakpoints. */
.collapsible-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.collapsible-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}
.collapsible-sidebar-toggle-icon {
  display: none;
}
.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid rgba(247, 221, 56, 1);
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar[aria-expanded=true] {
  max-height: none;
}
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body {
  display: block;
}

/***** My activities *****/
.my-activities-nav {
  background-color: #f2f2f2;
  margin-bottom: 20px;
}
.my-activities-sub-nav {
  margin-bottom: 30px;
}
.my-activities-table .striped-list-title { /* My activities tables */
  display: block;
  margin-bottom: 10px;
  max-width: 350px;
  white-space: normal;
}
@media (min-width: 1024px) {
  .my-activities-table .striped-list-title {
    margin-bottom: 0;
    max-width: 500px;
    min-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.my-activities-table thead {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table thead {
    display: table-header-group;
  }
}
.my-activities-table th:first-child,
.my-activities-table td:first-child {
  padding-left: 0;
}
@media (min-width: 1024px) {
  .my-activities-table th:first-child,
  .my-activities-table td:first-child {
    width: 500px;
  }
}
.my-activities-table th:last-child,
.my-activities-table td:last-child {
  padding-right: 0;
}
.my-activities-table td:not(:first-child) {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table td:not(:first-child) {
    display: table-cell;
  }
}

/* Requests table */
.requests-search {
  width: 100%;
}
.requests-table-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .requests-table-toolbar {
    flex-direction: row;
  }
}
.requests-table-toolbar .search {
  flex: 1;
  width: 100%;
}
.requests-table-toolbar .request-table-filter {
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}
.requests-table-toolbar .request-filter {
  display: block;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter {
    margin: 0 0 0 30px;
  }
  [dir=rtl] .requests-table-toolbar .request-filter {
    margin: 0 30px 0 0;
  }
}
.requests-table-toolbar .request-filter-label {
  font-size: 13px;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}
.requests-table-toolbar select {
  max-height: 40px;
  margin-bottom: 30px;
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
}
@media (min-width: 768px) {
  .requests-table-toolbar .organization-subscribe {
    margin-left: 10px;
  }
  [dir=rtl] .requests-table-toolbar .organization-subscribe {
    margin: 0 10px 0 0;
  }
}
.requests-table-toolbar .organization-subscribe button {
  line-height: 40px;
  max-height: 40px;
  padding: 0 20px;
}
.requests-table-toolbar + .requests-search-info {
  margin-top: 15px;
}
.requests-table-toolbar + .requests-search-info.meta-data::after {
  content: "";
  margin: 0;
}
.requests-table-toolbar + .requests-search-info + .requests {
  margin-top: 20px;
}
.requests-table-toolbar + .requests {
  margin-top: 40px;
}
.requests .requests-table-meta {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-meta {
    display: none;
  }
}
.requests .requests-table thead {
  display: none;
}
@media (min-width: 768px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}
.requests .requests-table-info {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}
.requests .requests-table .requests-link {
  position: relative;
}
.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}

/* Following table */
@media (min-width: 768px) {
  .subscriptions-subscribe button {
    width: auto;
  }
}
.subscriptions-table td:last-child {
  display: block;
}
@media (min-width: 768px) {
  .subscriptions-table td:last-child {
    display: table-cell;
  }
}
.subscriptions-table td:first-child {
  display: flex;
  align-items: center;
}
.subscriptions-table .user-avatar {
  margin-right: 10px;
}
.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}

/* Contributions table */
.contributions-table td:last-child {
  color: #5a6d7c;
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: #5a6d7c;
}

/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}
.request-container .comment-container {
  min-width: 0;
}
.request-breadcrumbs {
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 60px;
  }
}
.request-main {
  flex: 1 0 auto;
  order: 1;
}
.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}
.request-main .comment-fields.shown {
  display: block;
}
.request-main .request-submit-comment.shown {
  display: inline;
}
@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}
.request-main .comment-form-controls {
  display: block;
}
.request-main .comment-ccs {
  display: block;
}
.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  color: #5a6d7c;
  text-align: inherit;
  padding: 8px 25px;
  width: 100%;
}
.request-main .comment-show-container.hidden {
  display: none;
}
.request-main .form-field.comment-ccs > ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .form-field.comment-ccs > ul[data-hc-focus=true] {
  border: 1px solid rgba(247, 221, 56, 1);
}
.request-main .form-field.comment-ccs > input[type=text] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}
.request-main .comment-ccs + textarea:focus {
  border-top: 1px solid rgba(247, 221, 56, 1);
}
.request-main input#mark_as_solved {
  display: none;
}
.request-title {
  width: 100%;
}
@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}
.request-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  order: 0;
}
@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #f7f7f7;
    border: 0;
    font-size: 13px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}
.request-sidebar h2 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}
@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}
.request-details {
  border-bottom: 1px solid #ddd;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}
.request-details:last-child {
  border: 0;
}
.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  margin: 20px 0 0 0;
}
.request-details dd {
  padding: 0 10px;
  width: 60%;
}
.request-details dd::after {
  content: "\a";
  white-space: pre;
}
.request-details dt {
  color: #5a6d7c;
  width: 40%;
}
.request-details .request-collaborators {
  display: inline-block;
}
.request-attachments dt, .request-attachments dd {
  width: 100%;
}
.request-attachments dd {
  margin: 10px 0 0 0;
}
.request-form textarea {
  min-height: 120px;
}
.request-follow-up {
  padding-top: 20px;
}

/***** Pagination *****/
.pagination {
  margin: 20px 0;
  text-align: center;
}
.pagination-next, .pagination-prev, .pagination-first, .pagination-last {
  display: inline-block;
}
.pagination-first-link, .pagination-last-link {
  padding: 0 10px;
}
.pagination-first-text, .pagination-last-text {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.pagination-next-link {
  padding-right: 10px;
}
.pagination-next-text {
  margin-right: 10px;
}
[dir=rtl] .pagination-next-link {
  padding-left: 10px;
}
[dir=rtl] .pagination-next-text {
  margin-left: 10px;
}
.pagination-prev-link {
  padding-left: 10px;
}
.pagination-prev-text {
  margin-left: 10px;
}
[dir=rtl] .pagination-prev-link {
  padding-right: 10px;
}
[dir=rtl] .pagination-prev-text {
  margin-right: 10px;
}

/* ---- Pagination buttons: configurable colour ----
   The generic .button rule paints these in rgba(247, 221, 56, 1), so a light brand (e.g.
   the pale brand yellow) leaves the outline and label barely visible on the page
   background. #1A1A1A decouples them: set it in the theme
   editor to whatever reads well. Hover fills with the same colour. */
.pagination-next-link,
.pagination-prev-link,
.pagination-first-link,
.pagination-last-link {
  color: #1A1A1A;
  border-color: #1A1A1A;
}
.pagination-next-link:visited,
.pagination-prev-link:visited,
.pagination-first-link:visited,
.pagination-last-link:visited {
  color: #1A1A1A;
}
.pagination-next-link:hover,
.pagination-prev-link:hover,
.pagination-first-link:hover,
.pagination-last-link:hover,
.pagination-next-link:focus,
.pagination-prev-link:focus,
.pagination-first-link:focus,
.pagination-last-link:focus {
  background-color: #1A1A1A;
  border-color: #1A1A1A;
  color: #FFFFFF;
}

/***** Metadata *****/
.meta-group {
  display: block;
}

.meta-group-opposite {
  float: right;
}

[dir=rtl] .meta-group-opposite {
  float: left;
}

.meta-group * {
  display: inline;
}

.meta-data {
  color: #5a6d7c;
  font-size: 13px;
}
.meta-data:not(:last-child)::after {
  content: "·";
  margin: 0 5px;
}

/* User Profiles */
.profile-header {
  padding: 30px 0;
  background-color: #f7f7f7;
}

.profile-header .container {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .container {
    flex-wrap: nowrap;
  }
}

.profile-header .profile-info {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

.profile-avatar {
  position: relative;
  line-height: 0;
  align-self: center;
  margin-right: 10px;
}
[dir=rtl] .profile-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-avatar .user-avatar {
  width: 80px;
  height: 80px;
}

.profile-avatar .icon-agent {
  bottom: 0;
  right: 0;
}

.profile-header .basic-info {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.profile-header .basic-info .name {
  margin: 0;
  line-height: 25px;
  vertical-align: middle;
  display: inline;
}

.profile-header .options {
  display: flex;
  flex-basis: 100%;
  margin-top: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .options {
    flex-wrap: nowrap;
    flex-basis: auto;
    margin-top: 0;
    margin-left: 10px;
  }
  [dir=rtl] .profile-header .options {
    margin-left: 0;
    margin-right: 10px;
  }
  .profile-header .options > :not(:last-child) {
    margin-bottom: 0;
    margin-right: 10px;
  }
  [dir=rtl] .profile-header .options > :not(:last-child) {
    margin-left: 10px;
    margin-right: 0;
  }
}

.user-profile-actions {
  width: 100%;
  margin-bottom: 15px;
}

.profile-header .description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 15px 0;
  flex-basis: 100%;
}

.profile-stats {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.profile-stats .stat {
  display: flex;
  margin-bottom: 10px;
}

.profile-stats .stat-label {
  color: #5a6d7c;
  flex: 0 0 100px;
  margin-right: 10px;
}
[dir=rtl] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}

.profile-stats-activity {
  border-top: solid 1px #ddd;
  margin-top: 15px;
}
@media (min-width: 768px) {
  .profile-stats-activity {
    border-top: 0;
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat {
    flex-direction: column;
  }
}

.profile-stats-activity .stat:first-child {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .profile-stats-activity .stat:first-child {
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat:not(:last-child) {
    margin-right: 40px;
  }
  [dir=rtl] .profile-stats-activity .stat:not(:last-child) {
    margin-left: 40px;
    margin-right: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-activity .stat-label {
    flex: 0 1 auto;
  }
}

.profile-stats-counters {
  border-bottom: solid 1px #ddd;
}
@media (min-width: 768px) {
  .profile-stats-counters {
    flex: 0 0 200px;
    border-bottom: 0;
    margin-left: 40px;
  }
  [dir=rtl] .profile-stats-counters {
    margin-left: 0;
    margin-right: 40px;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters {
    flex: 0 0 270px;
    margin-left: 60px;
  }
  [dir=rtl] .profile-stats-counters {
    margin-right: 60px;
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat {
    flex-direction: column;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters .stat {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat:not(:last-child) {
    margin-bottom: 15px;
  }
}

@media (min-width: 768px) {
  .profile-stats-counters .stat-label {
    flex: 0 1 auto;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters .stat-label {
    flex: 0 0 100px;
  }
}

.profile-private-badge {
  flex-basis: 100%;
  border: solid 1px rgba(247, 221, 56, 1);
  border-radius: 4px;
  color: rgba(247, 221, 56, 1);
  padding: 5px 20px;
  font-size: 12px;
  text-align: center;
}
.profile-private-badge .profile-private-icon {
  margin-left: 5px;
  line-height: 15px;
}
@media (min-width: 768px) {
  .profile-private-badge {
    flex-basis: auto;
  }
}

.profile-nav {
  background-color: #f2f2f2;
  margin-bottom: 37px;
}

.profile-section {
  width: 100%;
}
@media (min-width: 1024px) {
  .profile-section {
    width: calc(100% - 330px);
  }
}

.profile-section-header {
  display: flex;
  flex-wrap: wrap;
}

.profile-section-title {
  flex-basis: 100%;
  margin-bottom: 0;
}

.profile-section-description {
  flex-basis: 100%;
  padding: 10px 0;
  color: #5a6d7c;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .profile-section-description {
    flex: 1 0 50%;
    padding-bottom: 0;
  }
}

.profile-section-sorter {
  flex-basis: 100%;
  border-top: solid 1px #eee;
  font-size: 13px;
}
.profile-section-sorter .dropdown-toggle {
  padding: 10px 0;
  width: 100%;
}
.profile-section-sorter .dropdown-toggle::after {
  position: absolute;
  right: 0;
}
[dir=rtl] .profile-section-sorter .dropdown-toggle::after {
  left: 0;
  right: initial;
}
@media (min-width: 768px) {
  .profile-section-sorter .dropdown-toggle::after {
    position: relative;
  }
}
@media (min-width: 768px) {
  .profile-section-sorter {
    flex: 0 1 auto;
    padding-top: 0;
    border-top: 0;
    margin-left: 20px;
  }
  [dir=rtl] .profile-section-sorter {
    margin-left: 0;
    margin-right: 20px;
  }
}

.profile-badges-items {
  margin-top: 25px;
}
.profile-badges-item {
  border-top: 1px solid #ddd;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: flex-start;
  padding: 27px 12px;
}
.profile-badges-item > div {
  padding-right: 12px;
  padding-left: 12px;
}
.profile-badges-item-image {
  height: 40px;
  width: 40px;
  margin-right: 12px;
}
.profile-badges-item-image img {
  max-height: 40px;
}
[dir=rtl] .profile-badges-item-image {
  margin-left: 12px;
  margin-right: 0;
}
.profile-badges-item-title, .profile-badges-item-metadata-title {
  font-size: 15px;
  margin-bottom: 10px;
}
.profile-badges-item-title {
  font-weight: 600;
}
.profile-badges-item-description, .profile-badges-item-metadata-description {
  color: #5a6d7c;
  font-size: 13px;
  margin: 0;
}
.profile-badges-item-metadata {
  margin-left: auto;
  text-align: right;
}
[dir=rtl] .profile-badges-item-metadata {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.profile-contribution {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  padding: 20px 0;
  position: relative;
}

.profile-contribution-header {
  margin-bottom: 5px;
}

.profile-contribution-title {
  margin: 0 0 5px 0;
  display: inline;
  line-height: 21px;
  font-size: 15px;
  vertical-align: middle;
}

.profile-contribution-body {
  margin: 10px 0;
}

.profile-contribution-list > .profile-contribution {
  border-top: 1px solid #eee;
}
@media (min-width: 768px) {
  .profile-contribution-list > .profile-contribution {
    padding-left: 30px;
  }
  [dir=rtl] .profile-contribution-list > .profile-contribution {
    padding-right: 30px;
    padding-left: 0;
  }
}

.profile-contribution-list > .profile-contribution:last-child {
  border-bottom: 1px solid #eee;
}

.profile-contribution-icon {
  left: 0;
  position: absolute;
  color: #ccc;
  line-height: 25px;
}
[dir=rtl] .profile-contribution-icon {
  right: 0;
}
.profile-contribution-icon svg {
  vertical-align: middle;
}

.profile-contribution-list .profile-contribution-header {
  margin-left: 30px;
}
[dir=rtl] .profile-contribution-list .profile-contribution-header {
  padding-right: 30px;
  padding-left: 0;
}
@media (min-width: 768px) {
  .profile-contribution-list .profile-contribution-header {
    margin-left: 0;
  }
  [dir=rtl] .profile-contribution-list .profile-contribution-header {
    padding-right: 0;
  }
}

.profile-comments .profile-contribution-breadcrumbs {
  margin-left: 30px;
}
[dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
  padding-right: 30px;
  padding-left: 0;
}
@media (min-width: 768px) {
  .profile-comments .profile-contribution-breadcrumbs {
    margin-left: 0;
  }
  [dir=rtl] .profile-comments .profile-contribution-breadcrumbs {
    padding-right: 0;
  }
}

.profile-section .no-activity,
.profile-section .private-activity {
  display: block;
  margin-top: 40px;
  color: #999;
}

.private-activity-icon {
  margin-right: 10px;
}
[dir=rtl] .private-activity-icon {
  margin-right: 0;
  margin-left: 10px;
}

.profile-activity-list {
  margin-top: 25px;
}

.profile-activity {
  position: relative;
  padding-bottom: 30px;
}
@media (min-width: 768px) {
  .profile-activity {
    padding-left: 20px;
  }
  [dir=rtl] .profile-activity {
    padding-right: 20px;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .profile-activity:not(:last-child) {
    border-left: 1px solid #ddd;
  }
  [dir=rtl] .profile-activity:not(:last-child) {
    border-left: 0;
    border-right: 1px solid #ddd;
  }
}

.profile-activity-header {
  display: flex;
  align-items: center;
  margin-left: 35px;
}
[dir=rtl] .profile-activity-header {
  margin-left: 0;
  margin-right: 35px;
}
@media (min-width: 768px) {
  .profile-activity-header {
    margin-left: 0;
  }
  [dir=rtl] .profile-activity-header {
    margin-right: 0;
  }
}

.profile-activity-header .user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  min-width: 40px;
  align-self: flex-start;
}
[dir=rtl] .profile-activity-header .user-avatar {
  margin-left: 10px;
  margin-right: 0;
}

.profile-activity-description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.profile-activity-description span:first-child {
  font-weight: 600;
  display: inline;
}

.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #f7f7f7;
}
@media (min-width: 768px) {
  .profile-activity-contribution {
    margin-top: 0;
    margin-left: 50px;
  }
  [dir=rtl] .profile-activity-contribution {
    margin-left: 0;
    margin-right: 50px;
  }
}

.profile-activity-icon {
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: #FFFFFF;
  background-position: 50% 50%;
  text-align: center;
  color: #ccc;
}
[dir=rtl] .profile-activity-icon {
  right: 0;
}
@media (min-width: 768px) {
  .profile-activity-icon {
    left: -14px;
  }
  [dir=rtl] .profile-activity-icon {
    right: -14px;
  }
}

.profile-activity-icon svg {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  margin: auto;
}

/***** Search results *****/
/* By default use bold instead of italic to highlight */
.search-results-description em {
  font-style: normal;
  font-weight: bold;
}

/* Add a yellow background for Chinese */
html[lang|=zh] .search-results-description em {
  font-style: normal;
  background: yellow;
}

/***** Notifications *****/
.notification {
  border: 1px solid;
  display: table;
  font-family: sans-serif;
  font-size: 12px;
  padding: 13px 15px;
  transition: height 0.2s;
  width: 100%;
  color: #555;
}

.notification a {
  color: #158ec2;
}

.notification-inner {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 980px;
}

.notification-icon, .notification-inline.notification-error::before, .notification-text, .notification-dismiss {
  display: table-cell;
  vertical-align: middle;
}

.notification-text {
  padding: 0 15px;
  width: 100%;
}

.notification + .notification {
  margin-bottom: -1px;
  position: relative;
  top: -1px;
}

/* Error */
.notification-error {
  background: #ffeded;
  border-color: #f7cbcb;
}

.notification-error .notification-icon::before, .notification-error .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23555555'/%3E%3C/svg%3E");
}

/* Notice */
.notification-notice {
  background: #dbf3ff;
  border-color: #b5e0f5;
}

.notification-notice .notification-icon::before, .notification-notice .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Alert / Lock */
.notification-alert {
  color: #ad5e18;
  background: #fff8ed;
  border-color: #fcdba9;
}

.notification-alert .notification-icon::before, .notification-alert .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ad5e18' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 00-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23ad5e18'/%3E%3C/svg%3E");
}

.notification-icon::before, .notification-inline.notification-error::before {
  background-size: cover;
  content: "";
  display: inline-block;
  height: 14px;
  width: 14px;
  vertical-align: middle;
}

/* Dismiss button */
.notification-dismiss, a.notification-dismiss {
  color: #555;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 100ms ease;
  text-decoration: none !important;
}

.notification-dismiss:hover {
  opacity: 1;
}

/* Inline notifications */
.notification-inline {
  border-radius: 4px;
  line-height: 14px;
  margin-top: 5px;
  padding: 5px;
  position: relative;
  text-align: left;
  vertical-align: middle;
}
[dir=rtl] .notification-inline {
  text-align: right;
}
.notification-inline[aria-hidden=true] {
  display: none;
}
.notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E");
  margin: -2px 5px 0 0;
}
[dir=rtl] .notification-inline.notification-error::before {
  margin: 0 0 0 5px;
}
.notification-inline.notification-error {
  background-color: #fff0f1;
  border: 1px solid #e35b66;
  color: #cc3340;
}
.notification-inline.notification-large {
  padding: 13px 15px;
  margin-bottom: 25px;
}

.notification-left-aligned {
  text-align: left;
  padding-left: 0;
}

html[dir=rtl] .notification-left-aligned {
  text-align: right;
  padding-left: auto;
  padding-right: 0;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
  background: none;
  border: 0;
  display: inline-block;
  padding: 0;
  text-align: initial;
  vertical-align: middle;
}
.dropdown-toggle:hover {
  text-decoration: none;
}
.dropdown-toggle > * {
  display: inline-block;
}
.dropdown-toggle[aria-expanded=true] + .dropdown-menu {
  display: block;
}

.dropdown-menu {
  background: #fff;
  border: 1px solid #d8dcde;
  border-radius: 3px;
  box-shadow: 0px 20px 30px 0px rgba(23, 73, 77, 0.15);
  display: none;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  left: 0;
  margin-top: 1px;
  min-width: 170px;
  padding: 10px 0;
  position: absolute;
  text-align: left;
  z-index: 1000;
}
[dir=rtl] .dropdown-menu {
  text-align: right;
}
.dropdown-menu [role=separator] {
  border-bottom: 1px solid #e9ebed;
  margin: 4px 0;
}
.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
  color: #2f3941;
  cursor: pointer;
  display: block;
  padding: 7px 40px 7px 20px;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  text-align: start;
  line-height: inherit;
  width: 100%;
}
[dir=rtl] .dropdown-menu [role=menuitem],
[dir=rtl] .dropdown-menu [role=menuitemradio] {
  padding: 7px 20px 7px 40px;
}
.dropdown-menu [role=menuitem]:hover, .dropdown-menu [role=menuitem]:focus,
.dropdown-menu [role=menuitemradio]:hover,
.dropdown-menu [role=menuitemradio]:focus {
  background: rgba(31, 115, 183, 0.08);
  text-decoration: none;
  color: #2f3941;
}
.dropdown-menu [role=menuitem][aria-selected=true], .dropdown-menu [role=menuitem][aria-checked=true],
.dropdown-menu [role=menuitemradio][aria-selected=true],
.dropdown-menu [role=menuitemradio][aria-checked=true] {
  cursor: default;
}
.dropdown-menu [role=menuitem][aria-selected=true]::after, .dropdown-menu [role=menuitem][aria-checked=true]::after,
.dropdown-menu [role=menuitemradio][aria-selected=true]::after,
.dropdown-menu [role=menuitemradio][aria-checked=true]::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E");
  display: inline-block;
  height: 12px;
  margin-left: 10px;
  width: 12px;
}
[dir=rtl] .dropdown-menu [role=menuitem][aria-selected=true]::after, [dir=rtl] .dropdown-menu [role=menuitem][aria-checked=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-selected=true]::after,
[dir=rtl] .dropdown-menu [role=menuitemradio][aria-checked=true]::after {
  margin-left: 0;
  margin-right: 10px;
  float: left;
}
.dropdown-menu [role=menuitem][hidden], .dropdown-menu [role=menuitem][aria-hidden=true],
.dropdown-menu [role=menuitemradio][hidden],
.dropdown-menu [role=menuitemradio][aria-hidden=true] {
  display: none !important;
}

.dropdown-menu-end {
  left: auto;
  right: 0;
}

.dropdown-menu-top {
  bottom: 100%;
  margin-bottom: 1px;
}

[dir=rtl] .dropdown-menu {
  left: auto;
  right: 0;
  text-align: right;
}
[dir=rtl] .dropdown-menu-end {
  left: 0;
  right: auto;
}

.dropdown-chevron-icon {
  vertical-align: middle;
}

.content-tags > p {
  color: #68737D;
  margin-top: 32px;
  margin-bottom: 4px;
}
.content-tags-add-hint {
  color: #68737D;
  font-size: 14px;
}

.content-tag-list {
  display: flex;
  flex-wrap: wrap;
  word-break: break-word;
}
.content-tag-list li {
  border-right: 1px solid #C2C8CC;
  margin-bottom: 4px;
}
[dir=ltr] .content-tag-list li {
  padding-right: 8px;
  margin-right: 8px;
}
[dir=rtl] .content-tag-list li {
  padding-left: 8px;
  margin-left: 8px;
}
.content-tag-list li:last-child {
  border: none;
}

/***** WYSIWYG Editor *****/
#hc-wysiwyg {
  border: 1px solid #87929D;
}

/***** Upload Dropzone *****/
.upload-dropzone {
  border: 1px solid #87929D;
}

/***** Summary component *****/
zd-summary-block {
  background: #f3f6f6;
}
[dir=ltr] zd-summary-block {
  border-left-color: #859fa1;
}
[dir=rtl] zd-summary-block {
  border-right-color: #859fa1;
}

/* Custom Info and Tip Panels */
/* Note: panel colours are from the the Rest Rebrand Colours in Figma – MODIFY FOR OTHER BRANDS */

/* OPTION A: LEFT-BORDER */
/* .custom-panel {
  border-radius: 4px;
  padding: 20px;
  margin-bottom: .9em;
  display: block;
}
.custom-panel p {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  word-wrap: break-word;
  margin-top: 0;
  margin-bottom: 0;
}
.info {
  background: #E4F9FF;
  border-left: 4px solid #4ABCE0;
}
.tip {
  background: #E0FCE4;
  border-left:4px solid #80F38F;
}
.generic {
  background: #F9F9F7;
  border-left: 4px solid #D6D6D0;
}
.note {
  background: #F3F1FF;
  border-left: 4px solid #A093D7;
}
.warning {
  background: #FFF1DD;
  border-left: 4px solid #FFCA79;
} */

/* OPTION B: rounded callout panels with an icon chip. Authored as HTML blocks in
   articles, e.g. <div class="custom-panel tip"><p><strong>Tip:</strong> …</p></div>.
   Per-variant colours + icon are configurable via the "Article panels" theme
   settings — the defaults below are overridden by CSS custom properties emitted
   in document_head.hbs. The chip is drawn with ::before (background) and the glyph
   with ::after (a mask filled with currentColor, so it tracks the panel text colour). */
:root {
  --ic-light-bulb: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2018v-5.25m0%200a6.01%206.01%200%200%200%201.5-.189m-1.5.189a6.01%206.01%200%200%201-1.5-.189m3.75%207.478a12.06%2012.06%200%200%201-4.5%200m3.75%202.383a14.406%2014.406%200%200%201-3%200M14.25%2018v-.192c0-.983.658-1.823%201.508-2.316a7.5%207.5%200%201%200-7.517%200c.85.493%201.509%201.333%201.509%202.316V18%27%2F%3E%3C%2Fsvg%3E");
  --ic-information-circle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m11.25%2011.25.041-.02a.75.75%200%200%201%201.063.852l-.708%202.836a.75.75%200%200%200%201.063.853l.041-.021M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Zm-9-3.75h.008v.008H12V8.25Z%27%2F%3E%3C%2Fsvg%3E");
  --ic-question-mark-circle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.879%207.519c1.171-1.025%203.071-1.025%204.242%200%201.172%201.025%201.172%202.687%200%203.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45%201.827v.75M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Zm-9%205.25h.008v.008H12v-.008Z%27%2F%3E%3C%2Fsvg%3E");
  --ic-exclamation-circle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%209v3.75m9-.75a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Zm-9%203.75h.008v.008H12v-.008Z%27%2F%3E%3C%2Fsvg%3E");
  --ic-x-circle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m9.75%209.75%204.5%204.5m0-4.5-4.5%204.5M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Z%27%2F%3E%3C%2Fsvg%3E");
  --ic-check-circle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2012.75%2011.25%2015%2015%209.75M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Z%27%2F%3E%3C%2Fsvg%3E");
  --ic-bell: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14.857%2017.082a23.848%2023.848%200%200%200%205.454-1.31A8.967%208.967%200%200%201%2018%209.75V9A6%206%200%200%200%206%209v.75a8.967%208.967%200%200%201-2.312%206.022c1.733.64%203.56%201.085%205.455%201.31m5.714%200a24.255%2024.255%200%200%201-5.714%200m5.714%200a3%203%200%201%201-5.714%200%27%2F%3E%3C%2Fsvg%3E");
  --ic-bookmark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M17.593%203.322c1.1.128%201.907%201.077%201.907%202.185V21L12%2017.25%204.5%2021V5.507c0-1.108.806-2.057%201.907-2.185a48.507%2048.507%200%200%201%2011.186%200Z%27%2F%3E%3C%2Fsvg%3E");
}
.custom-panel {
  position: relative;
  border-radius: 16px;
  border: 1px solid transparent;
  padding: 22px 24px 22px 70px;
  margin-bottom: .9em;
  display: block;
  background: var(--panel-bg);
  border-color: var(--panel-border);
}
[dir=rtl] .custom-panel { padding: 22px 70px 22px 24px; }
.custom-panel p {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  word-wrap: break-word;
  margin-top: 0;
  margin-bottom: 0;
}
.custom-panel p:first-child strong,
.custom-panel p strong:first-child { font-weight: 800; }
/* Icon chip (background colour per variant). Out of flow so it never adds height. */
.custom-panel::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 24px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background-color: var(--panel-icon-bg);
}
[dir=rtl] .custom-panel::before { left: auto; right: 24px; }
/* Glyph: a mask of the chosen Heroicon, filled with the panel's text colour. */
.custom-panel::after {
  content: "";
  position: absolute;
  top: 25px;
  left: 32px;
  width: 18px;
  height: 18px;
  background-color: var(--panel-icon-color, currentColor);
  -webkit-mask: var(--panel-icon) center / 18px 18px no-repeat;
  mask: var(--panel-icon) center / 18px 18px no-repeat;
}
[dir=rtl] .custom-panel::after { left: auto; right: 32px; }

/* Per-variant defaults (overridden by the Article panels theme settings). */
.info { --panel-bg:#eef3fa; --panel-border:#d5e0ef; --panel-icon-bg:#dbe6f5; --panel-icon:var(--ic-information-circle); --panel-text:#243a52; --panel-icon-color:#243a52; color:var(--panel-text); }
.info a { color:var(--panel-text) !important; }
.context { --panel-bg:#F4F4F1; --panel-border:#D6D6D0; --panel-icon-bg:#D6D6D0; --panel-icon:var(--ic-bookmark); --panel-text:#2D2D22; --panel-icon-color:#2D2D22; color:var(--panel-text); }
.context a { color:var(--panel-text) !important; }
.tip { --panel-bg:#E0FCE4; --panel-border:#b0ebb9; --panel-icon-bg:#C5FDCD; --panel-icon:var(--ic-light-bulb); --panel-text:#00580B; --panel-icon-color:#00580B; color:var(--panel-text); }
.tip a { color:var(--panel-text) !important; }
.note { --panel-bg:#F3F1FF; --panel-border:#D3C7FF; --panel-icon-bg:#D3C7FF; --panel-icon:var(--ic-question-mark-circle); --panel-text:#34004E; --panel-icon-color:#34004E; color:var(--panel-text); }
.note a { color:var(--panel-text) !important; }
.warning { --panel-bg:#FFF1DD; --panel-border:#FFE2B7; --panel-icon-bg:#FFE2B7; --panel-icon:var(--ic-exclamation-circle); --panel-text:#513100; --panel-icon-color:#513100; color:var(--panel-text); }
.warning a { color:var(--panel-text) !important; }
.error { --panel-bg:#FFEEEE; --panel-border:#FFC3C5; --panel-icon-bg:#FFC3C5; --panel-icon:var(--ic-x-circle); --panel-text:#740C0F; --panel-icon-color:#740C0F; color:var(--panel-text); }
.error a { color:var(--panel-text) !important; }
.generic { --panel-bg:#fcf8e1; --panel-border:#f1e6a6; --panel-icon-bg:#f7dd38; --panel-icon:var(--ic-information-circle); --panel-text:#56564f; --panel-icon-color:#56564f; color:var(--panel-text); }
.generic a { color:var(--panel-text) !important; }

/* ── Article tables ─────────────────────────────────────────
   Authored as plain <table> in the WYSIWYG — pasted content often carries black
   inline borders, so border rules use !important to enforce the soft design-system
   frame. We DON'T touch the table's width — authors control sizing. Rounded corners
   come from border-collapse:separate + radius on the frame + corner-cell radii (no
   overflow clipping). Scoped to `article` so Zendesk's request/list `.table` is left
   alone. */
article table {
  margin: 24px 0;
  /* separate + !important so pasted inline `border-collapse: collapse` can't
     defeat border-radius; overflow:hidden clips the cell fills to the rounded
     frame so the corners read as rounded. */
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #D6D6D0 !important;   /* surrounding border — soft, never black */
  border-radius: 12px;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #1a1a1a;
}
article thead {
  background-color: #fbfbf8;
}
article th {
  padding: 15px 16px;          /* taller header row */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: left;
}
[dir=rtl] article th {
  text-align: right;
}
article td {
  padding: 11px 16px;
  font-size: 14px;
  color: #56564f;
  vertical-align: top;
}
/* Soft, non-black grid: strip any author (black) borders, then add gentle vertical
   AND horizontal lines. With border-spacing:0, a right+bottom border per cell makes
   single 1px lines (no doubling); the frame supplies the outer edges, so the last
   column/row drop their inner line to avoid doubling the frame. */
article table th,
article table td {
  border: none !important;
  border-right: 1px solid #efefe9 !important;
  border-bottom: 1px solid #efefe9 !important;
}
article table tr > th:last-child,
article table tr > td:last-child {
  border-right: none !important;
}
article table thead th {
  border-bottom-color: #D6D6D0 !important;   /* a touch stronger under the header */
}
article table tbody tr:last-child > th,
article table tbody tr:last-child > td,
article table > tr:last-child > th,
article table > tr:last-child > td {
  border-bottom: none !important;            /* the surrounding frame closes it off */
}
/* Emphasis inside cells. */
article th strong {
  font-weight: 700;
}
article td strong {
  font-weight: 600;
  color: #1a1a1a;
}
/* Images in table cells: no border/radius (overrides the article img rule). */
article table img {
  border: none;
  border-radius: 0;
}
/* Round the outer cells so the corners follow the frame (no overflow clipping).
   11px = 12px frame − 1px border. Covers tables with or without <thead>; a radius
   on a non-corner cell is visually inert. */
article table > thead > tr:first-child > th:first-child,
article table > thead > tr:first-child > td:first-child,
article table > tbody > tr:first-child > th:first-child,
article table > tbody > tr:first-child > td:first-child,
article table > tr:first-child > th:first-child,
article table > tr:first-child > td:first-child {
  border-top-left-radius: 11px;
}
article table > thead > tr:first-child > th:last-child,
article table > thead > tr:first-child > td:last-child,
article table > tbody > tr:first-child > th:last-child,
article table > tbody > tr:first-child > td:last-child,
article table > tr:first-child > th:last-child,
article table > tr:first-child > td:last-child {
  border-top-right-radius: 11px;
}
article table > tbody > tr:last-child > th:first-child,
article table > tbody > tr:last-child > td:first-child,
article table > tr:last-child > th:first-child,
article table > tr:last-child > td:first-child {
  border-bottom-left-radius: 11px;
}
article table > tbody > tr:last-child > th:last-child,
article table > tbody > tr:last-child > td:last-child,
article table > tr:last-child > th:last-child,
article table > tr:last-child > td:last-child {
  border-bottom-right-radius: 11px;
}

/* <code> STYLING OVERRIDES */

article code {
  background: #0515240F !important;
  border: none !important;
}

/* Article image border */

article img {
  border: 1px solid #D6D6D0;
  border-radius: 4px;
}

table img {
  border: none !important;
}

/* Accordion Component */

/* 1. Main Accordion Container */
.article-accordion-container {
  max-width: 100%;
  border-top: 1px solid #d8dcde;
}

/* 2. The Item Wrapper */
.article-accordion-item {
  border-bottom: 1px solid #d8dcde;
  margin: 0;
}

/* 3. The Clickable Header - Flexbox for perfect centering */
.article-accordion-header {
  padding: 20px 10px 20px 0;
  cursor: pointer;
  font-weight: 600;
  color: #2f3941;
  outline: none;

  /* Flexbox Setup aligns text and icon perfectly */
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* Hides the default arrow */
  list-style: none;
}

/* Hides default arrow in Chrome/Safari */
.article-accordion-header::-webkit-details-marker {
  display: none;
}

.article-accordion-header:hover {
  color: #1f73b7;
}

/* 4. The Plus/Minus Icon */
.article-accordion-header::after {
  content: '+';
  font-weight: bold;
  font-size: 24px;
  line-height: 1;
  color: #68737d;
  margin-left: 15px;
}

/* Change to Minus when open */
details[open] .article-accordion-header::after {
  content: '\2212';
}

/* 5. Smooth Animation & Spacing */
.article-accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 0;
}

/* THIS is the specific part that adds the space */
.article-accordion-inner {
  overflow: hidden;
  padding-top: 10px;
  padding-bottom: 20px; /* Ensures text doesn't touch the bottom line */
}

/* When open, animate to full height */
details[open] .article-accordion-content {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* No top border */
.no-top-border {
  border-top: none !important;
  border-bottom: none !important;
}

/* ===========================================================
   Category page — "Section cards" layout (hi-fi handoff)
   Centred 1280px page, tinted hero, 2-col card grid.
   Breakpoints: 900px (2-col → 1-col), 640px (mobile).
   =========================================================== */
/* ---- Hero: tinted band spans full width; content capped + centred ---- */
.cat-hero {
  background: rgba(251, 251, 248, 1);
  border-bottom: 1px solid #efefe9;
  text-align: center;
}
/* Same viewport breakout as .header-bar: once body's 2560px cap kicks in,
   the tinted band bleeds to the full viewport instead of stopping at the
   body's edges. The inner content stays capped/centred via .cat-hero-inner,
   and html's overflow-x: clip absorbs the scrollbar-width sliver of 100vw. */
@media (min-width: 2560px) {
  .cat-hero {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
}
.cat-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 56px 60px;
}
.cat-hero-crumb {
  margin-bottom: 22px;
}
/* {{breadcrumbs}} renders <ol class="breadcrumbs">; centre + restyle it here. */
.cat-hero-crumb .breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.cat-hero-crumb .breadcrumbs li {
  max-width: none;
  color: #9a9a92;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.cat-hero-crumb .breadcrumbs li:first-child a {
  color: #1a1a1a;
  font-weight: 700;
}
.cat-hero-crumb .breadcrumbs li + li::before {
  content: "/";
  margin: 0 4px;
  color: #9a9a92;
}
.cat-hero-title {
  margin: 0 auto 14px;
  max-width: 760px;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: #1a1a1a;
  font-size: 42px;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.cat-hero-desc {
  margin: 0 auto 32px;
  max-width: 520px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #56564f;
  font-size: 17px;
  line-height: 1.6;
}

/* ---- Search (white field, ink border, yellow submit button) ---- */
.cat-search {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}
.cat-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #1a1a1a;
  pointer-events: none;
  z-index: 2;
}
.cat-search .cat-search-field.search {
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 0;
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease;
}
.cat-search .cat-search-field.search:focus-within {
  border-color: rgba(247, 221, 56, 1);
}
.cat-search .cat-search-field input[type=search] {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 8px 0 46px;
  border-radius: 12px;
  color: #1a1a1a;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
}
.cat-search .cat-search-field input[type=search]::placeholder {
  color: #9a9a92;
  opacity: 1;
}
.cat-search .cat-search-field input[type=submit] {
  order: 3;
  flex: 0 0 auto;
  min-width: 0;       /* override the global input[type=submit] min-width:190px */
  width: auto;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  background-color: #F7DD38;
  color: #1A1A1A;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  border-radius: 8px;
  padding: 9px 18px;
  white-space: nowrap;
}
.cat-search .cat-search-field .clear-button {
  order: 2;   /* between the input (0) and the Search submit (3) */
  flex: 0 0 auto;
  display: none;   /* shown only once the field has a value (see below) */
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #9a9a92;
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}
.cat-search .cat-search-field.search-has-value .clear-button {
  display: inline-flex;
}
.cat-search .cat-search-field .clear-button:hover {
  color: #1a1a1a;
  background: #f0f0ea;
}

/* ---- Card grid ---- */
.section-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 56px 64px;
}
.section-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px;
  background: #fff;
  border: 1px solid #e9e9e2;
  border-radius: 18px;
  transition: border-color 0.2s ease;
}
.section-card:hover {
  border-color: rgba(247, 221, 56, 1);
}
.section-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.section-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 12px;
  background: rgba(247, 221, 56, 1);
  color: #1a1a1a;
}
.section-card-icon-glyph {
  width: 22px;
  height: 22px;
  display: block;
}
.section-card-badge {
  flex: none;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(245, 245, 239, 1);
  color: rgba(89, 89, 87, 1);
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.section-card-title {
  margin: 0 0 18px;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: #1a1a1a;
  font-size: 21px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.section-card-title a {
  color: inherit;
  text-decoration: none;
}
.section-card-title a:hover {
  text-decoration: underline;
}
.section-card-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 24px;
}
.section-card-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #56564f;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.15s ease;
}
.section-card-link:hover {
  color: #1a1a1a;
}
.section-card-link:hover .section-card-link-text {
  text-decoration: underline;
}
/* Show a preview subset only — the badge + "See all" carry the true total. */
.section-card-links .section-card-link:nth-of-type(n+7) {
  display: none;
}
.section-card .icon-star {
  flex: none;
  color: rgba(247, 221, 56, 1);
}
.section-card .icon-lock {
  flex: none;
  width: 14px;
  height: 14px;
  color: #9a9a92;
}

/* Divider + "See all" — rule breaks out to the full card width, pinned to the
   card bottom (margin-top:auto) on desktop. */
.section-card-seeall-wrap {
  margin: auto -32px 0;
}
.section-card-rule {
  border-top: 1px solid #efefe9;
}
.section-card-seeall {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 18px 32px 0;
  color: #1a1a1a;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.section-card-seeall:hover .label {
  text-decoration: underline;
}
.section-card-seeall-arrow {
  flex: none;
  width: 15px;
  height: 15px;
}
.section-card-title a:focus-visible,
.section-card-link:focus-visible,
.section-card-seeall:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 3px;
  border-radius: 4px;
}
.category-empty {
  display: block;
  padding: 24px 56px;
}

/* ---- Tablet: 641–900px — single-column cards, smaller hero ---- */
@media (max-width: 900px) {
  .cat-hero-inner {
    padding: 48px 40px 52px;
  }
  .cat-hero-title {
    font-size: 36px;
    line-height: 1.05;
    max-width: 560px;
  }
  .cat-hero-desc {
    font-size: 16px;
    line-height: 1.55;
    max-width: 460px;
  }
  .cat-search {
    max-width: 520px;
  }
  .section-card-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 36px 40px 48px;
  }
  .section-card {
    height: auto;
    padding: 30px;
  }
  .section-card-icon {
    width: 46px;
    height: 46px;
  }
  .section-card-title {
    font-size: 20px;
    margin-bottom: 14px;
  }
  .section-card-links {
    gap: 14px;
    padding-bottom: 22px;
  }
  /* See-all centred between divider and card bottom */
  .section-card-seeall-wrap {
    margin: auto -30px -30px;
  }
  .section-card-seeall {
    padding: 18px 30px;
  }
}

/* ---- Mobile: ≤640px — compact hero ---- */
@media (max-width: 640px) {
  .cat-hero-inner {
    padding: 28px 20px 32px;
  }
  .cat-hero-crumb {
    margin-bottom: 16px;
  }
  .cat-hero-crumb .breadcrumbs li {
    font-size: 12px;
  }
  .cat-hero-title {
    font-size: 27px;
    line-height: 1.08;
    margin-bottom: 12px;
  }
  .cat-hero-desc {
    font-size: 15px;
    margin-bottom: 20px;
  }
  .cat-search .cat-search-field.search {
    border-radius: 12px;
  }
  .cat-search .cat-search-field input[type=search] {
    font-size: 15px;
  }
  .cat-search-icon {
    width: 18px;
    height: 18px;
  }
  .cat-search .cat-search-field input[type=submit] {
    padding: 8px 14px;
    font-size: 13px;
  }
  .section-card-grid {
    gap: 16px;
    padding: 20px 20px 32px;
  }
  .section-card {
    padding: 24px 22px;
    border-radius: 16px;
  }
  .section-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
  }
  .section-card-badge {
    font-size: 12px;
    padding: 5px 11px;
  }
  .section-card-title {
    font-size: 18px;
    margin-bottom: 12px;
  }
  .section-card-links {
    gap: 13px;
    padding-bottom: 20px;
  }
  .section-card-seeall-wrap {
    margin: auto -22px -24px;
  }
  .section-card-seeall {
    padding: 16px 22px;
  }
  .category-empty {
    padding: 24px 20px;
  }
}
/* ===========================================================
   Section page — "Two-column article grid" layout (hi-fi handoff)
   Centred 1280px page: desktop = 300px "In this category" sidebar + main
   with a 2-col article grid; tablet hides the sidebar (grid stays 2-col);
   mobile collapses the grid to 1-col and hides the search button.

   FLUID by design: typography, spacing and radii scale continuously with the
   viewport via clamp() (anchored to the Figma reference values at 390px →
   1280px), so the page is correct at every width — not only the three
   reference breakpoints. The only media queries are the genuine layout
   switches that cannot be interpolated: sidebar show/hide (≤900px) and the
   grid column count + search-button visibility (≤640px).
   =========================================================== */
.sec-body {
  max-width: 1280px;
  margin: 0 auto;
  /* top 26→48, sides 20→56, bottom 0 */
  padding:
    clamp(26px, 16.4px + 2.47vw, 48px)
    clamp(20px, 4.2px + 4.04vw, 56px)
    0;
}
/* No sidebar: the content sits in a single column centred on the page. */
.sec-main {
  /* Centred column. Pinned to the 820px design width through ~1280px, then
     grows on larger screens so the page doesn't look lost in whitespace. */
  max-width: clamp(820px, 41.7vw + 287px, 1120px);
  margin: 0 auto;
  min-width: 0;
  padding-bottom: 56px;
}

/* ---- Breadcrumb ---- */
.sec-crumb {
  margin-bottom: clamp(16px, 12.5px + 0.9vw, 24px);
}
.sec-crumb .breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(7px, 6.1px + 0.22vw, 9px);
  margin: 0;
}
.sec-crumb .breadcrumbs li {
  max-width: none;
  color: #9a9a92;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: clamp(12px, 11.6px + 0.11vw, 13px);
  font-weight: 600;
}
.sec-crumb .breadcrumbs li:first-child a {
  color: #1a1a1a;
  font-weight: 700;
}
.sec-crumb .breadcrumbs li + li::before {
  content: "/";
  margin: 0 4px;
  color: #9a9a92;
}
.sec-crumb .breadcrumbs a {
  transition: color 0.15s ease;
}
.sec-crumb .breadcrumbs a:hover {
  color: #1a1a1a;
  text-decoration: underline;
}

/* ---- Header (title + description) ----
   The whole header block carries the gap down to the search bar, matching the
   category page's heading→search spacing (clamp 20→32px) whether or not a
   description is present — the title's own margin collapses through .sec-head
   when there's no description. */
.sec-head {
  margin-bottom: clamp(20px, 14.7px + 1.35vw, 32px);
}
.sec-main .sec-title {
  margin: 0 0 clamp(12px, 11.1px + 0.22vw, 14px);
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: #1a1a1a;
  /* ceiling raised past the 46px @1280 value so the title keeps scaling on
     large screens (values ≤1280px are unchanged — same line, higher cap). */
  font-size: clamp(29px, 21.6px + 1.91vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.sec-subscribe {
  margin-bottom: 16px;
}
.sec-desc {
  margin: 0;
  max-width: 560px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #56564f;
  font-size: clamp(15px, 13.7px + 0.34vw, 21px);
  line-height: 1.6;
}

/* ---- Search (scoped to the section) ---- */
.sec-search {
  position: relative;
  max-width: 560px;
  margin: 0 0 clamp(28px, 21px + 1.8vw, 44px);
}
.sec-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #1a1a1a;
  pointer-events: none;
  z-index: 2;
}
.sec-search .sec-search-field.search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 0;
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: clamp(12px, 11.1px + 0.22vw, 14px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease;
}
.sec-search .sec-search-field.search:focus-within {
  border-color: rgba(247, 221, 56, 1);
}
.sec-search .sec-search-field input[type=search] {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 8px 0 46px;
  border-radius: 12px;
  color: #1a1a1a;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: clamp(15px, 14.6px + 0.11vw, 16px);
}
.sec-search .sec-search-field input[type=search]::placeholder {
  color: #9a9a92;
  opacity: 1;
}
.sec-search .sec-search-field input[type=submit] {
  order: 3;
  flex: 0 0 auto;
  min-width: 0;       /* override the global input[type=submit] min-width:190px */
  width: auto;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  background-color: #F7DD38;
  color: #1A1A1A;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  border-radius: 8px;
  padding: 9px 18px;
  white-space: nowrap;
}
.sec-search .sec-search-field .clear-button {
  order: 2;   /* between the input (0) and the Search submit (3) */
  flex: 0 0 auto;
  display: none;   /* shown only once the field has a value (see below) */
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #9a9a92;
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}
.sec-search .sec-search-field.search-has-value .clear-button {
  display: inline-flex;
}
.sec-search .sec-search-field .clear-button:hover {
  color: #1a1a1a;
  background: #f0f0ea;
}

/* ---- List header ("ALL ARTICLES" / count) ---- */
.sec-listhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.sec-grid + .sec-listhead {
  margin-top: clamp(24px, 20.5px + 0.9vw, 32px);
}
.sec-listhead-label {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9a9a92;
}
.sec-listhead-count {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #9a9a92;
  white-space: nowrap;
}

/* ---- Article grid (row-major; top rule on container, hairline per row) ---- */
.sec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(32px, 25px + 1.8vw, 48px);
  border-top: 1px solid #efefe9;
}
.gitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid #efefe9;
  color: #1a1a1a;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 14.6px + 0.11vw, 16px);
  text-decoration: none;
}
.gitem .lead {
  display: flex;
  align-items: center;
  gap: 9px;   /* 4px reserved bar + 9px = the original 13px resting indent */
  flex: 1;
  min-width: 0;
}
/* Accent bar reserves its 4px slot at rest (transparent) and just fades to
   yellow on hover — so the title never shifts. No positional movement. */
.gitem .bar {
  flex: none;
  width: 4px;
  height: 20px;
  background: transparent;
  border-radius: 2px;
  transition: background-color 0.15s ease;
}
.gitem:hover .bar {
  background: rgba(247, 221, 56, 1);
}
.gitem .txt {
  min-width: 0;
  line-height: 1.4;
}
.gitem:hover .txt {
  text-decoration: underline;
}
.gitem .chev {
  flex: none;
  width: clamp(16px, 15.6px + 0.11vw, 17px);
  height: clamp(16px, 15.6px + 0.11vw, 17px);
  color: #b8b8b0;
  transition: color 0.15s ease;
}
.gitem:hover .chev {
  color: #1a1a1a;
}
.gitem .icon-star {
  flex: none;
  width: 14px;
  height: 14px;
  color: rgba(247, 221, 56, 1);
}
.gitem .icon-lock {
  flex: none;
  width: 14px;
  height: 14px;
  color: #9a9a92;
}
.gitem:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 3px;
  border-radius: 4px;
}
.sec-empty {
  display: block;
  padding: 24px 0;
}

/* ---- Layout switch: ≤640px — single-column article grid; hide search button ---- */
@media (max-width: 640px) {
  .sec-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .sec-search .sec-search-field input[type=submit] {
    display: none;            /* submit via Enter on mobile */
  }
}

/* ===========================================================
   Search results — "centred hero + results list" layout (hi-fi handoff)
   Tinted hero (breadcrumb · heading · search · filter pills) full-bleed;
   results list in a centred column below. No-results state swaps the heading
   for an icon badge + message and a single call-to-action.

   FLUID by design: type, spacing and radii scale continuously with the
   viewport via clamp() (anchored to the Figma references at 390px → 1280px),
   so the page is correct at every width. The only media query is the genuine
   layout switch the search field needs on phones.
   =========================================================== */
/* ---- Hero: tinted band spans full width; content capped + centred ---- */
.sr-hero {
  background: #FBFBF8;
  border-bottom: 1px solid #efefe9;
  text-align: center;
}
.sr-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding:
    clamp(28px, 15.7px + 3.15vw, 56px)
    clamp(20px, 4.2px + 4.04vw, 56px)
    clamp(32px, 19.7px + 3.15vw, 60px);
}

/* Breadcrumb — centred, restyled (matches the category/section pages). */
.sr-crumb {
  margin-bottom: clamp(16px, 13.4px + 0.67vw, 22px);
}
.sr-crumb .breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.sr-crumb .breadcrumbs li {
  max-width: none;
  color: #9a9a92;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: clamp(12px, 11.6px + 0.11vw, 13px);
  font-weight: 600;
}
.sr-crumb .breadcrumbs li:first-child a {
  color: #1a1a1a;
  font-weight: 700;
}
.sr-crumb .breadcrumbs li + li::before {
  content: "/";
  margin: 0 4px;
  color: #9a9a92;
}
.sr-crumb .breadcrumbs a {
  transition: color 0.15s ease;
}
.sr-crumb .breadcrumbs a:hover {
  color: #1a1a1a;
  text-decoration: underline;
}

/* Heading ("N results for …" / "No results …"). */
.sr-title {
  margin: 0 auto clamp(18px, 14.5px + 0.9vw, 26px);
  max-width: 820px;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: #1a1a1a;
  font-size: clamp(28px, 20.1px + 2.02vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
/* The searched term (in quotes) within the results heading, coloured
   independently of the rest of the title via the theme setting. */
.sr-query {
  color: #AA8D2D;
}

/* No-results: icon badge + supporting copy. */
.sr-noresults-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 58.7px + 1.35vw, 76px);
  height: clamp(64px, 58.7px + 1.35vw, 76px);
  margin: 0 auto clamp(20px, 16.5px + 0.9vw, 28px);
  border-radius: clamp(16px, 14.2px + 0.45vw, 20px);
  background: rgba(247, 221, 56, 1);
  color: #1a1a1a;
}
.sr-noresults-badge svg,
.sr-noresults-badge .sr-noresults-icon {
  width: 28px;
  height: 28px;
}
/* The configured icon is masked (not an <img>) so it renders in the badge's
   text colour (#1a1a1a) — matching the dark section-card glyph — instead of the
   icon file's own colour, which an <img> would keep. */
.sr-noresults-badge .sr-noresults-icon {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.sr-title--empty {
  margin-bottom: clamp(12px, 9.4px + 0.67vw, 18px);
}
.sr-noresults-sub {
  margin: 0 auto clamp(24px, 20.5px + 0.9vw, 32px);
  max-width: 520px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #56564f;
  font-size: clamp(15px, 14.1px + 0.22vw, 17px);
  line-height: 1.6;
}

/* ---- Search (white field, ink border, yellow submit, visible clear) ---- */
.sr-search {
  position: relative;
  max-width: 580px;
  margin: 0 auto;
}
.sr-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #1a1a1a;
  pointer-events: none;
  z-index: 2;
}
[dir=rtl] .sr-search-icon {
  left: auto;
  right: 20px;
}
.sr-search .sr-search-field.search {
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 0;
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: clamp(12px, 11.1px + 0.22vw, 14px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease;
}
.sr-search .sr-search-field.search:focus-within {
  border-color: rgba(247, 221, 56, 1);
}
.sr-search .sr-search-field input[type=search] {
  order: 1;
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 8px 0 46px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #1a1a1a;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: clamp(15px, 14.6px + 0.11vw, 16px);
}
[dir=rtl] .sr-search .sr-search-field input[type=search] {
  padding: 0 46px 0 8px;
}
.sr-search .sr-search-field input[type=search]::placeholder {
  color: #9a9a92;
  opacity: 1;
}
.sr-search .sr-search-field input[type=submit] {
  order: 3;
  flex: 0 0 auto;
  min-width: 0;       /* override the global input[type=submit] min-width:190px */
  width: auto;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  background-color: #F7DD38;
  color: #1A1A1A;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  border-radius: 8px;
  padding: 9px 18px;
  white-space: nowrap;
  transition: background-color 0.12s ease;
}
.sr-search .sr-search-field input[type=submit]:hover,
.sr-search .sr-search-field input[type=submit]:focus {
  background-color: #f5d611;
}
/* Clear (×) — JS-appended; visible only once the field carries a value (the
   results page loads with the query pre-filled, so it shows on arrival). */
.sr-search .sr-search-field .clear-button {
  order: 2;
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #9a9a92;
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}
.sr-search .sr-search-field.search-has-value .clear-button {
  display: inline-flex;
}
.sr-search .sr-search-field .clear-button:hover {
  color: #1a1a1a;
  background: #f0f0ea;
}

/* ---- Filter pills (replace the old left sidebar) ---- */
.sr-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 6.2px + 0.45vw, 12px);
  margin-top: clamp(18px, 15.4px + 0.67vw, 24px);
}
.sr-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid #e4e4dd;
  border-radius: 999px;
  background: #fff;
  color: #1a1a1a;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.sr-filter-pill:hover {
  border-color: #1a1a1a;
  text-decoration: none;
}
.sr-filter-pill.is-selected {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
.sr-filter-count {
  font-weight: 600;
  color: #9a9a92;
}
.sr-filter-pill.is-selected .sr-filter-count {
  color: rgba(255, 255, 255, 0.6);
}
.sr-filter-pill--tag .sr-filter-remove {
  width: 12px;
  height: 12px;
}
.sr-filter-pill:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 3px;
}

/* ---- Body: results list / no-results CTA in a centred column ---- */
.sr-body {
  background: #fff;
}
.sr-main {
  max-width: 800px;
  margin: 0 auto;
  min-width: 0;
  padding:
    clamp(28px, 19.2px + 2.25vw, 48px)
    clamp(20px, 17.4px + 0.67vw, 24px)
    clamp(48px, 37.5px + 2.7vw, 72px);
}

/* Results list — hairline above the first row and below every row. */
.sr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #efefe9;
}
.sr-item {
  padding: clamp(22px, 19.4px + 0.67vw, 28px) 0;
  border-bottom: 1px solid #efefe9;
}
.sr-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.sr-item-title {
  margin: 0;
  min-width: 0;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 15.7px + 0.34vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.sr-item-title a {
  color: #1a1a1a;
  text-decoration: none;
}
.sr-item-title a:hover {
  text-decoration: underline;
}
.sr-item-external {
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: baseline;
  color: #9a9a92;
}
.sr-item-date {
  flex: none;
  color: #9a9a92;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.sr-item-path {
  margin-top: clamp(6px, 5.1px + 0.22vw, 8px);
}
.sr-item-breadcrumbs.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sr-item-breadcrumbs li {
  max-width: none;
  margin: 0;
  color: #9a9a92;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
}
.sr-item-breadcrumbs li::after {
  content: none;
}
.sr-item-breadcrumbs li + li::before {
  content: "/";
  margin-right: 6px;
  color: #c9c9c0;
}
.sr-item-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}
.sr-item-breadcrumbs a:hover {
  color: #1a1a1a;
  text-decoration: underline;
}
.sr-item-desc {
  margin: clamp(8px, 6.2px + 0.45vw, 12px) 0 0;
  color: #56564f;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: clamp(15px, 14.6px + 0.11vw, 16px);
  line-height: 1.6;
  word-break: break-word;
}

/* Pagination — keep it aligned with the results column. */
.sr-page .pagination {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 clamp(20px, 17.4px + 0.67vw, 24px) clamp(40px, 30px + 2.7vw, 64px);
}

/* Result-count summary line sitting just above the pager. Aligned to the same
   centred results column; muted so it reads as metadata, not a heading. */
.sr-resultcount {
  max-width: 800px;
  margin: 0 auto 12px;
  padding: 0 clamp(20px, 17.4px + 0.67vw, 24px);
  text-align: center;
  color: #9a9a92;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
}

/* ---- Phones: the search button drops away (submit via Enter), matching the
   category/section search behaviour at narrow widths. ---- */
@media (max-width: 480px) {
  .sr-search .sr-search-field input[type=submit] {
    display: none;
  }
  .sr-item-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ============================================================
   Contact custom page (templates/custom_pages/contact_page.hbs)
   Configurable hero + 1–3 tiles. Fluid across all widths: the
   tile grid flows 3-up → 2-up → 1-up via auto-fit, no hard
   breakpoints. Colours/fonts use the brand's Sass settings.
   ============================================================ */
.contact-page {
  background: #fff;
}

/* ---- Hero (left-aligned; shares the category hero's panel treatment) ---- */
.contact-hero {
  background: #FBFBF8;
  border-bottom: 1px solid #efefe9;
}
.contact-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  /* fluid gutters: tighten on small screens, cap at the design's 56px */
  padding: clamp(28px, 4vw, 40px) clamp(20px, 5vw, 56px) clamp(32px, 4vw, 44px);
}

/* Manual breadcrumb (a custom page isn't in the article/section tree, so
   {{breadcrumbs}} can't render the "/ Contact us" crumb reliably). */
.contact-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 22px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.2;
}
.contact-crumb-home {
  color: #1a1a1a;
  font-weight: 700;
  text-decoration: none;
}
.contact-crumb-home:hover,
.contact-crumb-home:focus {
  text-decoration: underline;
}
.contact-crumb-sep,
.contact-crumb-current {
  color: #9a9a92;
}
.contact-crumb-current {
  font-weight: 600;
}

.contact-hero-eyebrow {
  margin: 0 0 10px;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #56564f;
}
.contact-hero-title {
  margin: 0;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #1a1a1a;
}
.contact-hero-desc {
  max-width: 560px;
  margin: 14px 0 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: #56564f;
}

/* Search — reuses the category search field (.cat-search .cat-search-field),
   which already carries the clear (×) button. Override only alignment +
   shadow so it's left-aligned and flat per the design. */
.contact-search.cat-search {
  max-width: 560px;
  margin: 28px 0 0;
}
.contact-search .cat-search-field.search {
  box-shadow: none;
}

/* ---- Main / tile grid ---- */
.contact-main {
  background: #fff;
}
.contact-main-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 48px) clamp(20px, 5vw, 56px) clamp(40px, 6vw, 64px);
}
.contact-cards {
  display: flex;
  flex-wrap: wrap;
  /* flex (not grid) so 1–2 tiles pack snugly at the left instead of leaving
     odd in-track gaps. The 200px basis keeps 3-up on desktop AND tablet, then
     wraps to 2-up and 1-up as width drops — fully fluid, no media query. */
  gap: clamp(16px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 200px;
  min-width: 0;
  /* cap so 1–2 tiles don't stretch the full row; with 3 tiles each grows to
     ≈373px (< cap) and fills, matching the design. */
  max-width: 520px;
  padding: clamp(24px, 2.4vw, 32px);
  background: #fff;
  border: 1px solid #e9e9e2;
  border-radius: 18px;
}
.contact-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #FCE96A;
  color: #1a1a1a;
}
.contact-card-icon {
  width: 26px;
  height: 26px;
}
.contact-card-title {
  margin: 22px 0 0;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: #1a1a1a;
}
.contact-card-desc {
  margin: 10px 0 16px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #56564f;
}
/* The value/link pins to the card bottom (margin-top:auto) so links align
   across equal-height tiles; the desc's margin-bottom guarantees a gap even
   when a tile is short (single column). */
.contact-card-value {
  margin-top: auto;
  align-self: flex-start;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 2px solid #FCE96A;
  padding-bottom: 2px;
  transition: border-color 0.12s ease, color 0.12s ease;
}
a.contact-card-value:hover,
a.contact-card-value:focus {
  border-bottom-color: #fbe02e;
}
.contact-card-value--static {
  cursor: default;
}