@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;
}

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 *****/
/* Self-hosted fonts, weights 400, 500 and 600 (no request to a third party). A browser only
   downloads a face that the chosen font_family names, so a brand on System loads none. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXRNGX07HZXDDYC3Y7513) format('woff2');
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXR24KA8ZC46C7MFMH4YH) format('woff2');
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXRP536GB20X6HF6MBXHV) format('woff2');
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXQVVPXTJ44MKXV90AYA2) format('woff2');
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXRFZ4K4D5CPYYDN6BDVA) format('woff2');
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXRNE8CJ40J04KATESZD5) format('woff2');
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXQZ0D08BRR893R7MH6XS) format('woff2');
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXRN2GDFKEH2B344MD4YJ) format('woff2');
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXQD81CA4TPCM7D5RE7CC) format('woff2');
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXQSNZ0YKKT6AFKN6NDHQ) format('woff2');
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXQ5TY1EQP2XTV2YKDG5D) format('woff2');
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXREV0QJ9SQKYQ23P50MP) format('woff2');
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXR23XG5J0T7C8NYY2TVE) format('woff2');
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXRNAMNR7FYWH5KBGQ69V) format('woff2');
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXRNMD0QEEPDFS94CX5S4) format('woff2');
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXRR1KB0728V2EVEQ9A40) format('woff2');
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXP6MBSJ2XGC74N9EKA00) format('woff2');
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXRN77G4263GEMDGCH34M) format('woff2');
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXRNJZF5WMRK7NG7S79RM) format('woff2');
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXQYYNNT1TSM4Q86XTK2H) format('woff2');
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/hc/theming_assets/01M59ZXQC89ZW2WX1QEFW12GKB) format('woff2');
}

/* Design tokens. Every later section styles with these, so a brand's settings reach the whole
   theme through one place. Muted text is derived from the ink and the canvas; at 70% ink it keeps
   4.5:1 on white for any text colour up to #3B3B3B. A setting only ever appears as a bare value
   (the form Zendesk is proven to substitute); units and arithmetic happen in calc(var(...)), which
   the browser evaluates. */
:root {
  --hc-canvas: #FFFFFF;
  --hc-ink: #171717;
  --hc-ink-muted: color-mix(in srgb, #171717 70%, #FFFFFF);
  --hc-line: #E5E5E5;
  --hc-accent: #C9F145;
  --hc-accent-ink: #171717;
  --hc-link: #171717;
  --hc-link-hover: #171717;
  --hc-radius-n: 11;
  --hc-radius: calc(var(--hc-radius-n) * 1px);
  --hc-radius-sm: calc(var(--hc-radius-n) * 0.5px);
  --hc-font: 'Inter', system-ui, sans-serif;
  --hc-font-base: 17px;
  --hc-font-size: var(--hc-font-base);
  --hc-hero-overlay: #171717;
  --hc-hero-ink: #FFFFFF;
  --hc-hero-opacity-n: 45;
  --hc-hero-opacity: calc(var(--hc-hero-opacity-n) / 100);
}
/* Body text steps down 1px on phones (17 to 16 at the default size). */
@media (max-width: 767px) {
  :root {
    --hc-font-size: calc(var(--hc-font-base) - 1px);
  }
}

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

body {
  background: var(--hc-canvas);
  color: var(--hc-ink);
  font-family: var(--hc-font);
  font-size: var(--hc-font-size);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-top: 0;
}

/* Mobile first: hero title 28 to 40, section title 20 to 24, card title 16 to 17. */
h1 {
  font-size: 28px;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 16px;
}

@media (min-width: 768px) {
  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 24px;
  }

  h3 {
    font-size: 17px;
  }
}

/* Link states sit at zero extra specificity (:where) so any component class wins over them. */
a {
  color: var(--hc-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
a:where(:visited) {
  color: #171717;
}
a:where(:hover, :active) {
  color: var(--hc-link-hover);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--hc-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Page container: 1160px wide, 16px gutters on phones, 24px from 768px.
   Copenhagen's .container shares it so pages kept from it line up. */
.hc-container,
.container {
  margin: 0 auto;
  max-width: 1160px;
  padding: 0 16px;
}
@media (min-width: 768px) {
  .hc-container,
  .container {
    padding: 0 24px;
  }
}

.container-divider {
  border-top: 1px solid var(--hc-line);
  margin-bottom: 20px;
}

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

.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;
}

/***** Icons *****/
/* One sprite (assets/icons.js) serves templates, settings and article bodies. An icon is a 1em
   square in the text colour of its block; Lucide's 2px strokes are drawn a touch lighter. The
   span an author writes holds the same square until the script swaps in the svg. */
.hc-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.125em;
}

.hc-icon--lg {
  width: 32px;
  height: 32px;
}

.hc-icon--xl {
  width: 40px;
  height: 40px;
}

/***** Buttons *****/
/* .hc-button is the primary action, the one place the accent fills a surface; .hc-button--secondary
   is the quiet variant. Copenhagen's button classes share these rules so the pages and request
   bundles kept from it match: a plain .button reads as secondary and turns primary when it is
   .button-large, .button-primary or selected (article votes, subscribe buttons). */
.hc-button,
.button,
.button-large,
.button-secondary,
.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,
.hbs-form input[type=submit] {
  -webkit-appearance: none;
  appearance: none;
  align-items: center;
  background-color: var(--hc-accent);
  border: 1px solid var(--hc-accent);
  border-radius: var(--hc-radius-sm);
  color: var(--hc-accent-ink);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  gap: 8px;
  justify-content: center;
  line-height: 1.25;
  margin: 0;
  min-height: 44px;
  padding: 0 20px;
  text-align: center;
  text-decoration: none;
  transition: filter 0.15s ease-in-out, border-color 0.15s ease-in-out;
  user-select: none;
  -webkit-touch-callout: none;
}
.hc-button:hover,
.button:hover,
.button-large:hover,
.button-secondary: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,
.hbs-form input[type=submit]:hover {
  filter: brightness(0.92);
}

.hc-button--secondary,
.button,
.button-secondary,
.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 {
  background-color: transparent;
  border-color: var(--hc-line);
  color: var(--hc-ink);
}
.hc-button--secondary:hover,
.button:hover,
.button-secondary: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 {
  border-color: var(--hc-ink);
  filter: none;
}

.button.button-large,
.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] {
  background-color: var(--hc-accent);
  border-color: var(--hc-accent);
  color: var(--hc-accent-ink);
}
.button.button-large:hover,
.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 {
  border-color: var(--hc-accent);
  filter: brightness(0.92);
}

.hc-button:disabled,
.button:disabled,
.button-large:disabled,
.button-secondary:disabled,
.hbs-form input[type=submit]:disabled {
  cursor: default;
  filter: none;
  opacity: 0.5;
}

.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;
}

/* A button that reads as a link, for quiet actions such as printing an article: the surrounding
   text colour, an underline, an optional icon before the label and a 44px target. */
.hc-link-button {
  -webkit-appearance: none;
  appearance: none;
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--hc-radius-sm);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.15em;
}
.hc-link-button:hover {
  color: var(--hc-ink);
  text-decoration-color: currentColor;
}
.hc-link-button[hidden] {
  display: none;
}

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

.split-button button {
  background-color: #C9F145;
  border: 0;
  color: #171717;
  height: 32px;
  line-height: 16px;
  outline-color: #C9F145;
}

[dir=rtl] .split-button button:not(:only-child):first-child {
  border-left: 1px solid #171717;
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
[dir=ltr] .split-button button:not(:only-child):first-child {
  border-right: 1px solid #171717;
  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 *****/
/* The activity tables: hairline rows under a muted 14px head; on phones each row stacks. */
.table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;
}
@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}
.table th,
.table th a {
  color: var(--hc-ink-muted);
  font-size: 14px;
  font-weight: 500;
  text-align: start;
}
.table tr {
  border-bottom: 1px solid var(--hc-line);
  display: block;
  padding: 16px 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: 768px) {
  .table td,
  .table th {
    height: 56px;
    padding: 12px 16px;
  }
}
@media (min-width: 1024px) {
  .table td,
  .table th {
    padding: 16px 24px;
  }
}

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

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

.form-field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

/* Every text control: a hairline border, the small radius, the accent border on focus. */
.hbs-form input:where(:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=file])),
.hbs-form select,
.hbs-form textarea,
.form-field input:where(:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=file])),
.form-field select,
.form-field textarea,
.form-field .nesty-input,
.form-field .hc-multiselect-toggle {
  background-color: var(--hc-canvas);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-radius-sm);
  color: var(--hc-ink);
  transition: border-color 0.12s ease-in-out;
}
.hbs-form input:where(:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=file])):focus,
.hbs-form select:focus,
.hbs-form textarea:focus,
.form-field input:where(:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=file])):focus,
.form-field select:focus,
.form-field textarea:focus,
.form-field .nesty-input:focus,
.form-field .hc-multiselect-toggle:focus {
  border-color: var(--hc-accent);
  text-decoration: none;
}

/* Inputs, selects and textareas are 44px tall at least and inherit the body size, which also keeps
   iOS from zooming in on focus. */
.hbs-form input:where(:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=file])),
.hbs-form select,
.hbs-form textarea,
.form-field input:where(:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=file])),
.form-field select,
.form-field textarea {
  font: inherit;
  line-height: 1.4;
  max-width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  width: 100%;
}

.hbs-form input:disabled,
.hbs-form select:disabled,
.hbs-form textarea:disabled,
.form-field input:disabled,
.form-field select:disabled,
.form-field textarea:disabled {
  background-color: var(--hc-line);
  color: var(--hc-ink-muted);
  cursor: not-allowed;
}

.hbs-form select,
.form-field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--hc-canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23767676' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E") no-repeat right 14px center;
  padding-right: 36px;
}
[dir=rtl] .hbs-form select,
[dir=rtl] .form-field select {
  background-position: left 14px center;
  padding-left: 36px;
  padding-right: 12px;
}

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

.form-field .nesty-input {
  height: 44px;
  line-height: 42px;
  vertical-align: middle;
}

input[type=checkbox],
input[type=radio] {
  accent-color: var(--hc-accent);
}

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

.form-field .optional {
  color: var(--hc-ink-muted);
  margin-inline-start: 4px;
}

.form-field p {
  color: var(--hc-ink-muted);
  font-size: 14px;
  margin: 8px 0;
}

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

.form footer a {
  color: var(--hc-ink-muted);
  cursor: pointer;
  margin-inline-end: 16px;
}

.form .suggestion-list {
  font-size: 14px;
  margin-top: 32px;
}
.form .suggestion-list label {
  border-bottom: 1px solid var(--hc-line);
  display: block;
  padding-bottom: 8px;
}
.form .suggestion-list li {
  padding: 8px 0;
}

/* The search field shows focus on its own pill border (Search field section), so its input
   keeps no outline of its own. */
.search input {
  max-width: 100%;
}
.search input:where(:not([type=checkbox])) {
  outline: none;
}

/***** Header *****/
/* One bar on every page: logo at the start, navigation at the end, aligned on the page container.
   The navigation is a full-height sheet from the inline end, opened by the menu button, unless the
   viewport is 1024px or wider and the links fit next to the logo; then they sit in the bar.
   src/header.js measures that and adds .hc-header--sheet when they do not fit; without it the
   1024px breakpoint decides. Copenhagen's script toggles aria-expanded on the button and the nav
   and looks the button up as ".header .menu-button-mobile", hence the inner .header wrapper.
   Styles: light (hairline under the bar), dark (ink bar), transparent (over the home hero only;
   other pages fall back to light). The sheet takes the canvas, or the ink in the dark style. */
.hc-header {
  --hc-sheet-bg: var(--hc-canvas);
  --hc-sheet-ink: var(--hc-ink);
  background: var(--hc-canvas);
  border-bottom: 1px solid var(--hc-line);
  color: var(--hc-ink);
  position: relative;
  z-index: 100;
}

.hc-header--dark {
  --hc-sheet-bg: var(--hc-ink);
  --hc-sheet-ink: var(--hc-canvas);
  background: var(--hc-ink);
  border-bottom-color: transparent;
  color: var(--hc-canvas);
}

.hc-header--transparent {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--hc-hero-ink);
  inset: 0 0 auto;
  position: absolute;
}

/* Only the home page has a hero for the header to lie on. CSS knows the home page from the first
   paint: home_page.hbs prints data-hc-page="home" on the hero as a direct child of main, where
   article content (always nested deeper) can never sit. Everywhere else the bar stays light. */
body:not(:has(main > [data-hc-page="home"])) .hc-header--transparent {
  background: var(--hc-canvas);
  border-bottom-color: var(--hc-line);
  color: var(--hc-ink);
  position: relative;
}

/* On an ink or photo background the accent may vanish, so the focus ring takes the text colour. */
.hc-header--dark :focus-visible,
.hc-header--transparent :focus-visible {
  outline-color: currentColor;
}

.hc-header__inner {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  min-height: 56px;
}
@media (min-width: 768px) {
  .hc-header__inner {
    min-height: 64px;
  }
}

/* The logo keeps the height set in logo_height and never gives way to the links (they move to the
   sheet instead). Phones cap it at 40px so the bar stays 56px, and only a brand name too long for
   the phone is cut short; a logo wider than the phone itself is scaled down to fit. */
.hc-header__logo {
  align-items: center;
  color: inherit;
  display: inline-flex;
  font-size: 17px;
  font-weight: 600;
  gap: 12px;
  min-height: 44px;
  min-width: 0;
  text-decoration: none;
}
.hc-header__logo img {
  display: block;
  flex: none;
  max-height: 40px;
  max-width: calc(100vw - 100px);
  object-fit: contain;
  object-position: left center;
  width: auto;
}
[dir=rtl] .hc-header__logo img {
  object-position: right center;
}
@media (min-width: 768px) {
  .hc-header__logo img {
    max-height: none;
  }
}

.hc-header__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Navigation links: no underline at rest, an underline on hover. In the sheet they are 48px rows. */
.hc-header__link,
.hc-ask-ai,
.hc-header__user .dropdown-toggle {
  align-items: center;
  color: inherit;
  display: flex;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  gap: 8px;
  min-height: 48px;
  text-decoration: none;
  text-underline-offset: 6px;
  width: 100%;
}
.hc-header__link:hover,
.hc-ask-ai:hover,
.hc-header__user .dropdown-toggle:hover .hc-header__user-name {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.hc-header__links li:empty {
  display: none;
}

.hc-header__links:not(:has(a)),
.hc-header__actions:not(:has(a, button)) {
  display: none;
}

/* The way back to the shop: the one outlined control, under the rows in the sheet. */
.hc-header__store {
  align-items: center;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: var(--hc-radius-sm);
  color: inherit;
  display: inline-flex;
  font-size: 15px;
  font-weight: 500;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
  min-height: 48px;
  padding: 0 16px;
  text-decoration: none;
  transition: border-color 0.15s ease-in-out;
  width: 100%;
}
.hc-header__store:hover {
  border-color: currentColor;
  color: inherit;
}
.hc-header__store .hc-icon {
  transition: transform 0.15s ease-in-out;
}
.hc-header__store:hover .hc-icon {
  transform: translateX(-2px);
}
[dir=rtl] .hc-header__store .hc-icon {
  transform: scaleX(-1);
}
[dir=rtl] .hc-header__store:hover .hc-icon {
  transform: scaleX(-1) translateX(-2px);
}

/* Signed-in user menu (Copenhagen's dropdown markup and script). In the sheet it opens in place,
   below its toggle; in the bar it is a floating menu. */
.hc-header__user .dropdown-toggle {
  border-radius: var(--hc-radius-sm);
}
.hc-header__user .user-avatar {
  height: 28px;
  width: 28px;
}
.hc-header__user .dropdown-chevron-icon {
  margin-inline-start: auto;
}

.hc-header .dropdown-chevron-icon,
.hc-footer .dropdown-chevron-icon {
  transition: transform 0.15s ease-in-out;
}
.hc-header .dropdown-toggle[aria-expanded=true] .dropdown-chevron-icon,
.hc-footer .dropdown-toggle[aria-expanded=true] .dropdown-chevron-icon {
  transform: rotate(180deg);
}

.hc-header .dropdown-menu,
.hc-footer .dropdown-menu {
  background: var(--hc-canvas);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-radius-sm);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--hc-ink) 12%, transparent);
  color: var(--hc-ink);
  font-size: 15px;
  margin-top: 4px;
  padding: 6px 0;
}
.hc-header .dropdown-menu [role=menuitem],
.hc-footer .dropdown-menu [role=menuitem] {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  padding: 10px 20px;
  text-decoration: none;
}
.hc-header .dropdown-menu [role=menuitem]:hover,
.hc-header .dropdown-menu [role=menuitem]:focus,
.hc-footer .dropdown-menu [role=menuitem]:hover,
.hc-footer .dropdown-menu [role=menuitem]:focus {
  background: color-mix(in srgb, currentColor 7%, transparent);
  color: inherit;
  text-decoration: underline;
}
.hc-header .dropdown-menu [role=separator] {
  border-bottom-color: var(--hc-line);
}

.hc-header__user .dropdown-menu {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  font-size: 16px;
  margin: 0;
  min-width: 0;
  padding: 0 0 8px;
  position: static;
}
.hc-header__user .dropdown-menu [role=menuitem] {
  padding: 10px 0;
  padding-inline-start: 40px;
}
.hc-header__user .dropdown-menu [role=separator] {
  border-bottom-color: var(--hc-sheet-line);
  margin-inline-start: 40px;
}

/* Menu button. It stays above the open sheet and turns into its close button, so the sheet needs
   no second control. */
.hc-header__toggle {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--hc-radius-sm);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 24px;
  height: 44px;
  justify-content: center;
  margin-inline-end: -10px;
  padding: 0;
  position: relative;
  width: 44px;
  z-index: 2;
}
.hc-header__toggle[aria-expanded=true] {
  color: var(--hc-sheet-ink);
}
.hc-header__toggle[aria-expanded=false] .hc-header__toggle-close,
.hc-header__toggle[aria-expanded=true] .hc-header__toggle-open {
  display: none;
}
/* Nothing to show (no links, no store link, sign-in off, no Ask AI): no button that opens an empty
   sheet. It stays in the markup for Copenhagen's script. */
.hc-header__inner:not(:has(.hc-header__nav :is(a, button))) .hc-header__toggle {
  display: none;
}

/* The sheet. */
.hc-header__nav {
  --hc-sheet-line: color-mix(in srgb, var(--hc-sheet-ink) 14%, transparent);
  background: var(--hc-sheet-bg);
  color: var(--hc-sheet-ink);
  display: flex;
  flex-direction: column;
  inset: 0 0 0 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 56px 24px 32px;
  position: fixed;
  width: 360px;
  max-width: 100%;
  z-index: 1;
}
[dir=rtl] .hc-header__nav {
  inset: 0 auto 0 0;
}
.hc-header__nav[aria-expanded=false] {
  display: none;
}
/* From 768px the bar is 64px, so the sheet's first hairline meets the bar's. */
@media (min-width: 768px) {
  .hc-header__nav {
    padding-top: 64px;
  }
}

/* The scrim beside the sheet; a tap on it closes the menu (src/header.js). On a window narrower
   than the sheet its width resolves to zero, as the sheet then covers everything. */
.hc-header__nav::before {
  background: color-mix(in srgb, var(--hc-ink) 40%, transparent);
  content: "";
  inset: 0 360px 0 0;
  position: fixed;
}
[dir=rtl] .hc-header__nav::before {
  inset: 0 0 0 360px;
}

/* The page behind the open sheet does not scroll. */
html:has(#user-nav-mobile[aria-expanded=true]) {
  overflow: hidden;
}

.hc-header__links,
.hc-header__actions {
  display: flex;
  flex-direction: column;
}
.hc-header__links {
  border-top: 1px solid var(--hc-sheet-line);
}
.hc-header__links > li,
.hc-header__actions > :not(.hc-header__store) {
  border-bottom: 1px solid var(--hc-sheet-line);
}
.hc-header__links:not(:has(a)) + .hc-header__actions {
  border-top: 1px solid var(--hc-sheet-line);
}

/* The bar: from 1024px, while the links fit next to the logo. */
@media (min-width: 1024px) {
  .hc-header:not(.hc-header--sheet) .hc-header__toggle {
    display: none;
  }
  .hc-header:not(.hc-header--sheet) .hc-header__logo {
    flex: none;
  }
  .hc-header:not(.hc-header--sheet) .hc-header__nav {
    align-items: center;
    background: none;
    color: inherit;
    display: flex;
    flex-direction: row;
    gap: 32px;
    inset: auto;
    overflow: visible;
    padding: 0;
    position: static;
    width: auto;
    z-index: auto;
  }
  .hc-header:not(.hc-header--sheet) .hc-header__nav::before {
    content: none;
  }
  .hc-header:not(.hc-header--sheet) .hc-header__links,
  .hc-header:not(.hc-header--sheet) .hc-header__actions {
    align-items: center;
    border: 0;
    flex-direction: row;
  }
  .hc-header:not(.hc-header--sheet) .hc-header__links {
    gap: 28px;
  }
  .hc-header:not(.hc-header--sheet) .hc-header__actions {
    gap: 24px;
  }
  .hc-header:not(.hc-header--sheet) .hc-header__links > li,
  .hc-header:not(.hc-header--sheet) .hc-header__actions > :not(.hc-header__store) {
    border: 0;
  }
  .hc-header:not(.hc-header--sheet) .hc-header__link,
  .hc-header:not(.hc-header--sheet) .hc-ask-ai,
  .hc-header:not(.hc-header--sheet) .hc-header__user .dropdown-toggle {
    display: inline-flex;
    font-size: 15px;
    min-height: 44px;
    white-space: nowrap;
    width: auto;
  }
  .hc-header:not(.hc-header--sheet) .hc-header__store {
    margin-top: 0;
    min-height: 44px;
    white-space: nowrap;
    width: auto;
  }
  .hc-header:not(.hc-header--sheet) .hc-header__user {
    position: relative;
  }
  .hc-header:not(.hc-header--sheet) .hc-header__user .dropdown-chevron-icon {
    margin-inline-start: 0;
  }
  .hc-header:not(.hc-header--sheet) .hc-header__user .dropdown-menu {
    background: var(--hc-canvas);
    border: 1px solid var(--hc-line);
    border-radius: var(--hc-radius-sm);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--hc-ink) 12%, transparent);
    color: var(--hc-ink);
    font-size: 15px;
    margin-top: 4px;
    min-width: 170px;
    padding: 6px 0;
    position: absolute;
  }
  .hc-header:not(.hc-header--sheet) .hc-header__user .dropdown-menu [role=menuitem] {
    padding: 10px 20px;
  }
  .hc-header:not(.hc-header--sheet) .hc-header__user .dropdown-menu [role=separator] {
    border-bottom-color: var(--hc-line);
    margin-inline-start: 0;
  }
}

.skip-navigation {
  align-items: center;
  background-color: var(--hc-ink);
  border-radius: var(--hc-radius-sm);
  color: var(--hc-canvas);
  display: flex;
  font-size: 15px;
  justify-content: center;
  left: -999px;
  margin: 16px;
  padding: 16px 20px;
  overflow: hidden;
  position: absolute;
  top: auto;
  z-index: -999;
}
[dir=rtl] .skip-navigation {
  left: initial;
  right: -999px;
}
.skip-navigation:focus,
.skip-navigation:active {
  color: var(--hc-canvas);
  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 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: #C9F145;
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: #171717;
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/
/* A top hairline, then the links, the social icons and the language selector side by side from
   768px (stacked on phones), then a muted line with the footer text and the credit. A group with
   nothing in it is hidden, so an undressed footer is the language selector and the credit. */
.hc-footer {
  border-top: 1px solid var(--hc-line);
  color: var(--hc-ink);
  font-size: 15px;
  margin-top: 64px;
  padding: 32px 0 40px;
}

.hc-footer__inner,
.hc-footer__main {
  display: flex;
  flex-direction: column;
}
.hc-footer__inner {
  gap: 24px;
}
.hc-footer__main {
  align-items: flex-start;
  gap: 16px;
}

.hc-footer__links:not(:has(a)),
.hc-footer__social:not(:has(a)),
.hc-footer__main:not(:has(a, button)),
.hc-footer__base:not(:has(p)) {
  display: none;
}

.hc-footer__link,
.hc-footer__locale .dropdown-toggle {
  align-items: center;
  color: inherit;
  display: inline-flex;
  font-family: inherit;
  font-size: inherit;
  gap: 8px;
  min-height: 44px;
  text-decoration: none;
  text-underline-offset: 5px;
}
.hc-footer__link:hover,
.hc-footer__locale .dropdown-toggle:hover span {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* 24px icons in 44px targets; the negative margin lines the first icon up with the text above. */
.hc-footer__social {
  display: flex;
  gap: 4px;
  margin-inline-start: -10px;
}
.hc-footer__social-link {
  align-items: center;
  border-radius: 50%;
  color: inherit;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  transition: background-color 0.15s ease-in-out;
  width: 44px;
}
.hc-footer__social-link:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: inherit;
}
.hc-footer__social-link .hc-icon {
  height: 24px;
  width: 24px;
}

.hc-footer__base {
  color: var(--hc-ink-muted);
  display: flex;
  flex-direction: column;
  font-size: 14px;
  gap: 4px;
}
.hc-footer__base p {
  margin: 0;
}
.hc-footer__powered a {
  color: inherit;
}

@media (min-width: 768px) {
  .hc-footer {
    padding-top: 40px;
  }
  .hc-footer__main {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 32px;
  }
  .hc-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
    margin-inline-end: auto;
  }
  .hc-footer__base {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 24px;
    justify-content: space-between;
  }
}

/***** Breadcrumbs *****/
/* Zendesk's breadcrumbs helper prints an ol of links; search results and the profile print the
   same class for each result's trail. A muted 14px trail that wraps on phones, a drawn chevron
   after every step but the last (so a wrapped line starts with a name, not a chevron; mirrored in
   RTL), each step underlined in ink on hover. The page bar's trail alone gets 44px steps (Page
   bar). */
.breadcrumbs {
  align-items: center;
  color: var(--hc-ink-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  min-width: 0;
  padding: 0;
}
.breadcrumbs li {
  align-items: center;
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
}
.breadcrumbs li:not(:last-child)::after {
  background-color: currentColor;
  content: "";
  flex: none;
  height: 14px;
  margin-inline: 4px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  width: 14px;
}
[dir=rtl] .breadcrumbs li:not(:last-child)::after {
  transform: scaleX(-1);
}
.breadcrumbs a {
  align-items: center;
  color: inherit;
  display: inline-flex;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: var(--hc-ink);
  text-decoration: underline;
}

/***** Page bar *****/
/* Every inner page that lists or shows articles (category, section, article) opens with the same
   bar: the breadcrumbs, then the scoped search. Stacked on phones; from 768px on one line with
   the search 300px wide. */
.hc-page-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
/* The bar's trail: each step a 44px target, and a negative margin that sets wrapped lines 32px
   apart, so their 44px boxes overlap only in the blank band between two lines, never over a name.
   Only here: a result's trail sits right under its title, which a taller step would reach over. */
.hc-page-bar .breadcrumbs li {
  margin-block: -6px;
}
.hc-page-bar .breadcrumbs a {
  min-height: 44px;
}
@media (min-width: 768px) {
  .hc-page-bar {
    align-items: center;
    flex-direction: row;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 40px;
  }
  .hc-page-bar .search-container {
    flex: 0 0 300px;
  }
}

/***** Search field *****/
/* The form of Zendesk's search helper draws the field. Inner pages print it as .search (beside the
   breadcrumbs, on the search results page), the home hero as .hc-search (sized for the photo in
   Hero component). A hairline, the small radius and an accent border on focus; the input inside
   keeps no outline of its own, and Copenhagen's script adds a clear button once it holds text. */
.search-container {
  position: relative;
}

.search,
.hc-search {
  align-items: center;
  background: var(--hc-canvas);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-radius-sm);
  display: flex;
  position: relative;
  transition: border-color 0.12s ease-in-out;
}
.search:focus-within,
.hc-search:focus-within {
  border-color: var(--hc-accent);
  box-shadow: 0 0 0 1px var(--hc-accent);
}

.search input[type=search],
.hc-search input[type=search] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--hc-ink);
  flex: 1 1 auto;
  font: inherit;
  font-size: 16px;
  height: 42px;
  min-width: 0;
  outline: none;
  padding-block: 0;
  padding-inline: 40px 12px;
  width: 100%;
}
.search input[type=search]::placeholder,
.hc-search input[type=search]::placeholder {
  color: var(--hc-ink-muted);
  opacity: 1;
}
.search input[type=search]::-webkit-search-decoration,
.search input[type=search]::-webkit-search-cancel-button,
.hc-search input[type=search]::-webkit-search-decoration,
.hc-search input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search .clear-button,
.hc-search .clear-button {
  align-items: center;
  align-self: stretch;
  background: none;
  border: 0;
  border-radius: var(--hc-radius-sm);
  color: var(--hc-ink-muted);
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0;
  width: 44px;
}
.search .clear-button:hover,
.hc-search .clear-button:hover {
  color: var(--hc-ink);
}
.search .clear-button:focus-visible,
.hc-search .clear-button:focus-visible {
  outline-offset: -4px;
}
.search-has-value .clear-button {
  display: flex;
}

/* The magnifier inner pages print before the form, inside .search-container. */
.search-icon {
  color: var(--hc-ink-muted);
  height: 16px;
  inset-inline-start: 14px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  z-index: 1;
}

/***** Hero component *****/
/* The home hero, the one loud element: the brand's photo full bleed under an overlay tint, with
   the title, an optional subtitle, the search field and the popular terms centred on it in
   hero_text_color. Heights are minimums, so long copy grows the photo instead of spilling out of
   it. Under the transparent header the photo runs up behind the bar and the hero grows by the
   bar's height, so its content sits where it would below a light header. Nothing clips overflow:
   Zendesk's instant search opens its list below the field. */
.hc-hero {
  --hc-hero-h: 260px;
  --hc-hero-top: 0px;
  --hc-search-h: 48px;
  align-items: center;
  background-color: var(--hc-hero-overlay);
  background-image: var(--hc-hero-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--hc-hero-ink);
  display: flex;
  min-height: calc(var(--hc-hero-h) + var(--hc-hero-top));
  padding: calc(var(--hc-hero-top) + 32px) 0 32px;
  position: relative;
  text-align: center;
}
.hc-hero::before {
  background: var(--hc-hero-overlay);
  content: "";
  inset: 0;
  opacity: var(--hc-hero-opacity);
  position: absolute;
}

.hc-hero--compact {
  --hc-hero-h: 200px;
}
.hc-hero--regular {
  --hc-hero-h: 260px;
}
.hc-hero--tall {
  --hc-hero-h: 320px;
}
.hc-hero--focus-left {
  background-position: left center;
}
.hc-hero--focus-right {
  background-position: right center;
}

@media (min-width: 768px) {
  .hc-hero {
    --hc-search-h: 56px;
  }
  .hc-hero--compact {
    --hc-hero-h: 220px;
  }
  .hc-hero--regular {
    --hc-hero-h: 320px;
  }
  .hc-hero--tall {
    --hc-hero-h: 440px;
  }
}

/* Room for the transparent header (56px bar, 64px from 768px). */
body:has(.hc-header--transparent) main > [data-hc-page="home"] {
  --hc-hero-top: 56px;
}
@media (min-width: 768px) {
  body:has(.hc-header--transparent) main > [data-hc-page="home"] {
    --hc-hero-top: 64px;
  }
}

/* On the photo the accent may vanish, so the popular links ring in the hero text colour (the field
   draws its own ring below; its clear button keeps the accent, on white). */
.hc-hero__popular a:focus-visible {
  outline-color: var(--hc-hero-ink);
}

.hc-hero__inner {
  max-width: 720px;
  position: relative;
  width: 100%;
}

.hc-hero__title {
  color: inherit;
  margin: 0;
  text-wrap: balance;
}

.hc-hero__subtitle {
  font-size: 16px;
  margin: 8px 0 0;
  text-wrap: balance;
}
@media (min-width: 768px) {
  .hc-hero__subtitle {
    font-size: 18px;
  }
}

/* The field: white on the photo, borderless, the focus ring outside it. */
.hc-hero__search {
  margin: 24px auto 0;
  max-width: 600px;
  position: relative;
  text-align: start;
}
.hc-hero__search-icon {
  color: var(--hc-ink-muted);
  height: 20px;
  inset-inline-start: 16px;
  pointer-events: none;
  position: absolute;
  top: calc(var(--hc-search-h) / 2);
  transform: translateY(-50%);
  width: 20px;
  z-index: 1;
}
.hc-hero .hc-search {
  border-color: transparent;
}
.hc-hero .hc-search:focus-within {
  border-color: transparent;
  box-shadow: none;
  outline: 2px solid var(--hc-hero-ink);
  outline-offset: 2px;
}
.hc-hero .hc-search input[type=search] {
  height: calc(var(--hc-search-h) - 2px);
  padding-inline: 48px 16px;
}
@media (min-width: 768px) {
  .hc-hero .hc-search input[type=search] {
    font-size: 17px;
  }
}

.hc-hero__popular {
  font-size: 14px;
  margin: 12px 0 0;
}
/* Each term is a 44px tall target (22.4px of text and 12px above and below); the negative margins
   keep the line where it was. */
.hc-hero__popular a {
  color: inherit;
  display: inline-block;
  margin-block: -12px;
  padding-block: 12px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.hc-hero__popular a + a {
  margin-inline-start: 4px;
}
.hc-hero__popular a:hover {
  color: inherit;
  text-decoration-thickness: 2px;
}

/* The error page reuses the hero, tall enough to fill most of the window: the reason under the
   title, the search field, then the way home as the primary button, ringed in the hero text colour
   on the photo like the popular terms. The hero keeps its own minimum height; an empty flex item
   as tall as 65vh less the hero's padding lifts it to 65vh where that is more (no max() needed). */
.hc-hero--error::after {
  content: "";
  min-height: calc(65vh - var(--hc-hero-top) - 64px);
}
.hc-hero__actions {
  margin: 24px 0 0;
}
.hc-hero--error .hc-hero__subtitle a {
  color: inherit;
}
.hc-hero__actions .hc-button:focus-visible {
  outline-color: var(--hc-hero-ink);
}

/* Copenhagen's hero, still printed by the community and service catalog pages. */
.hero {
  background-image: url(/hc/theming_assets/01M5AAFS0V9SZJTBW19RR4E12R);
  background-position: center;
  background-size: cover;
  height: 300px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}
.hero-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-width: 610px;
  margin: 0 auto;
}

/***** Page header *****/
.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: wrap;
    gap: 16px;
    margin: 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;
}

/***** Tiles *****/
/* Outlined link tiles, an icon above a label, the whole tile one link: the home quick actions
   (tile_1 to tile_6), and later the article content kit and the request form picker. Two columns
   on phones, three from 768px, four from 1024px; long labels hyphenate (the page has a lang).
   Quiet at rest: a hairline and no shadow. Hover and focus answer with the icon (a 2px nudge, and
   the draw-in replay src/icons.js wires through data-animate="hover") and an ink border. An
   uploaded icon that loads as a real image (is-real, src/home.js) takes the place of the named
   one. */
.hc-tiles {
  --hc-tile-cols: 2;
  --hc-tile-gap: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--hc-tile-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hc-tiles:not(:has(> li)) {
  display: none;
}
.hc-tiles > li {
  display: flex;
  flex: 0 0 calc((100% - (var(--hc-tile-cols) - 1) * var(--hc-tile-gap)) / var(--hc-tile-cols));
  min-width: 0;
}
@media (min-width: 768px) {
  .hc-tiles {
    --hc-tile-cols: 3;
    --hc-tile-gap: 16px;
  }
}
@media (min-width: 1024px) {
  .hc-tiles {
    --hc-tile-cols: 4;
  }
}

.hc-tile {
  align-items: center;
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-radius);
  color: var(--hc-ink);
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 16px;
  font-weight: 500;
  gap: 12px;
  -webkit-hyphens: auto;
  hyphens: auto;
  justify-content: flex-start;
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 24px 16px;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.15s ease-in-out;
}
.hc-tile:hover {
  border-color: var(--hc-ink);
}
.hc-tile .hc-icon {
  transition: transform 0.2s ease-out;
}
.hc-tile:hover .hc-icon,
.hc-tile:focus-visible .hc-icon {
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .hc-tile:hover .hc-icon,
  .hc-tile:focus-visible .hc-icon {
    transform: none;
  }
}

.hc-tile__custom {
  display: none;
  height: 40px;
  object-fit: contain;
  width: 40px;
}
.hc-tile__custom.is-real {
  display: block;
}
.hc-tile__custom.is-real + .hc-icon {
  display: none;
}

/* Home: never more than four in a row, and a short last row is centred. Four tiles make one row
   from 768px; five or six keep three columns (3+2, 3+3) at every width from 768px. */
.hc-tiles--home {
  justify-content: center;
  margin: 32px 0 40px;
}
@media (min-width: 768px) {
  .hc-tiles--home {
    margin: 48px 0 64px;
  }
  .hc-tiles--home:has(> li:nth-child(4):last-child) {
    --hc-tile-cols: 4;
  }
}
@media (min-width: 1024px) {
  .hc-tiles--home:has(> li:nth-child(5)) {
    --hc-tile-cols: 3;
  }
}

/* Article grids from the content kit: two tiles a row at every width, or three from 768px (two on
   phones). A tile there may carry a one-liner under its label. */
.hc-tiles--2 {
  --hc-tile-cols: 2;
}
@media (min-width: 768px) {
  .hc-tiles--3 {
    --hc-tile-cols: 3;
  }
}

.hc-tile__text {
  color: var(--hc-ink-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  margin-top: -6px;
}

/***** Category cards *****/
/* The home categories, or the sections when there is one category: the brand's photos in a grid,
   or rows with a thumbnail. Each card is one link with no border and no shadow, the photo above
   the name and the article count (src/counts.js fills it; empty, it takes no room unless
   show_article_counts reserves its line, so nothing moves when the counts arrive). A photo comes
   from the cat_N slots (src/categories.js); without one the card shows a panel tinted with the
   accent and the name's first letter, so an unconfigured brand still looks finished. Hover and
   focus ease the photo 2% larger inside its frame and underline the name. */
.hc-categories {
  margin-bottom: 48px;
}
@media (min-width: 768px) {
  .hc-categories {
    margin-bottom: 80px;
  }
}

.hc-categories__head {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 20px;
}
.hc-categories__title {
  margin: 0;
}

/* Two icon buttons with 44px targets; the pressed one takes the accent, deepened with the ink like
   the card letters so a light accent stays visible on its tint. The template hides the pair until
   src/view-toggle.js wires it. */
.hc-view-toggle {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
}
.hc-view-toggle[hidden] {
  display: none;
}
.hc-view-toggle__button {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--hc-radius-sm);
  color: var(--hc-ink-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 20px;
  height: 44px;
  justify-content: center;
  padding: 0;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  width: 44px;
}
.hc-view-toggle__button:hover {
  color: var(--hc-ink);
}
.hc-view-toggle__button[aria-pressed="true"] {
  background-color: color-mix(in srgb, var(--hc-accent) 12%, var(--hc-canvas));
  color: color-mix(in srgb, var(--hc-accent) 65%, var(--hc-ink));
}

/* Grid: one card per row on phones, two from 560px, three from 768px. Two cards share a row, and
   four sit two by two, then in one row from 1024px, where seven or eight also make rows of four,
   rather than leave one card alone. */
.hc-cards {
  --hc-card-cols: 1;
  display: grid;
  gap: 28px 16px;
  grid-template-columns: repeat(var(--hc-card-cols), minmax(0, 1fr));
}
@media (min-width: 560px) {
  .hc-cards {
    --hc-card-cols: 2;
  }
}
@media (min-width: 768px) {
  .hc-cards {
    --hc-card-cols: 3;
  }
  .hc-cards:has(> li:nth-child(2):last-child),
  .hc-cards:has(> li:nth-child(4):last-child) {
    --hc-card-cols: 2;
  }
}
@media (min-width: 1024px) {
  .hc-cards {
    gap: 40px 24px;
  }
  .hc-cards:has(> li:nth-child(4):last-child),
  .hc-cards:has(> li:nth-child(7):last-child),
  .hc-cards:has(> li:nth-child(8):last-child) {
    --hc-card-cols: 4;
  }
}
.hc-cards > li {
  display: flex;
  min-width: 0;
}

.hc-card {
  border-radius: var(--hc-radius);
  color: var(--hc-ink);
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
}
.hc-card:focus-visible {
  outline-offset: 4px;
}

.hc-card__media {
  align-items: center;
  aspect-ratio: 3 / 2;
  background-color: color-mix(in srgb, var(--hc-accent) 12%, var(--hc-canvas));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--hc-radius);
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
/* The photo again on a layer of its own, so hover can scale it inside the rounded frame. */
.hc-card__media.has-image::before {
  background: inherit;
  content: "";
  inset: 0;
  position: absolute;
  transition: transform 0.3s ease-out;
}
.hc-card:hover .hc-card__media.has-image::before,
.hc-card:focus-visible .hc-card__media.has-image::before {
  transform: scale(1.02);
}
@media (prefers-reduced-motion: reduce) {
  .hc-card:hover .hc-card__media.has-image::before,
  .hc-card:focus-visible .hc-card__media.has-image::before {
    transform: none;
  }
}

/* The letter in the brand font, a shade of the accent that stays readable on its tint. Without
   JavaScript the whole name sits here, cut off at the panel's edge. */
.hc-card__initial {
  color: color-mix(in srgb, var(--hc-accent) 65%, var(--hc-ink));
  font-size: 64px;
  font-weight: 500;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.hc-card__media.has-image .hc-card__initial,
.hc-card__media.is-pending .hc-card__initial {
  display: none;
}

.hc-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 12px;
}
.hc-card__title {
  font-size: 16px;
  font-weight: 600;
  -webkit-hyphens: auto;
  hyphens: auto;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-underline-offset: 0.15em;
}
@media (min-width: 768px) {
  .hc-card__title {
    font-size: 17px;
  }
}
.hc-card:hover .hc-card__title,
.hc-card:focus-visible .hc-card__title {
  text-decoration: underline;
}
.hc-card__count {
  color: var(--hc-ink-muted);
  font-size: 14px;
  line-height: 1.4;
}
.hc-card__count:empty {
  display: none;
}
.has-counts .hc-card__count:empty {
  display: block;
  min-height: 1.4em;
}
.hc-card__chevron {
  display: none;
}

/* List: rows of at least 72px between hairlines, a 56px square thumbnail, the chevron at the end;
   two columns from 768px. */
.is-list .hc-cards {
  border-top: 1px solid var(--hc-line);
  gap: 0 48px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .is-list .hc-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.is-list .hc-cards > li {
  border-bottom: 1px solid var(--hc-line);
}
.is-list .hc-card {
  align-items: center;
  flex-direction: row;
  gap: 16px;
  min-height: 72px;
  padding: 8px 0;
}
.is-list .hc-card__media {
  aspect-ratio: 1;
  border-radius: var(--hc-radius-sm);
  flex-shrink: 0;
  width: 56px;
}
.is-list .hc-card__initial {
  font-size: 24px;
}
.is-list .hc-card__text {
  flex: 1;
  padding-top: 0;
}
.is-list .hc-card__chevron {
  color: var(--hc-ink-muted);
  display: block;
  height: 20px;
  width: 20px;
}
[dir=rtl] .hc-card__chevron {
  transform: scaleX(-1);
}

/***** Popular articles *****/
/* The promoted articles as plain rows between hairlines, each title in ink with a chevron; one
   column on phones, two from 768px. Behind show_promoted. */
.hc-promoted {
  margin-bottom: 48px;
}
@media (min-width: 768px) {
  .hc-promoted {
    margin-bottom: 80px;
  }
}

.hc-promoted__title {
  margin: 0 0 16px;
}

.hc-promoted__list {
  border-top: 1px solid var(--hc-line);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .hc-promoted__list {
    column-gap: 48px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.hc-promoted__item {
  border-bottom: 1px solid var(--hc-line);
}

.hc-promoted__link {
  align-items: center;
  color: var(--hc-ink);
  display: flex;
  gap: 12px;
  min-height: 56px;
  padding: 12px 0;
  text-decoration: none;
}
.hc-promoted__name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  text-underline-offset: 0.15em;
}
.hc-promoted__link:hover .hc-promoted__name {
  text-decoration: underline;
}
.hc-promoted__lock,
.hc-promoted__chevron {
  color: var(--hc-ink-muted);
}
.hc-promoted__chevron {
  height: 20px;
  width: 20px;
}
[dir=rtl] .hc-promoted__chevron {
  transform: scaleX(-1);
}

/***** Support *****/
/* Get support: the contact options as rows between hairlines, each one full-width link (a button
   for chat) with an icon, a title, an optional second line and a chevron. Opening hours and reply
   time sit quietly beside the rows from 768px, below them on phones. The template hides the
   section when no row can show; src/support.js shows the chat row, and the section with it, once
   the messaging widget is on the page. */
.hc-support {
  margin-bottom: 48px;
}
@media (min-width: 768px) {
  .hc-support {
    margin-bottom: 80px;
  }
}
.hc-support[hidden] {
  display: none;
}

.hc-support__title {
  margin: 0 0 16px;
}
.hc-support__intro {
  color: var(--hc-ink-muted);
  margin: -8px 0 16px;
}

.hc-support__rows {
  border-top: 1px solid var(--hc-line);
}

/* The hairline belongs to the row, not its list item, so the hidden chat row leaves none behind. */
.hc-support__row {
  align-items: center;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hc-line);
  border-radius: 0;
  color: var(--hc-ink);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 16px;
  min-height: 64px;
  padding: 12px 0;
  text-align: start;
  text-decoration: none;
  width: 100%;
}
.hc-support__row[hidden] {
  display: none;
}
.hc-support__icon {
  height: 24px;
  width: 24px;
}
.hc-support__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hc-support__label {
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-underline-offset: 0.15em;
}
.hc-support__row:hover .hc-support__label {
  text-decoration: underline;
}
.hc-support__detail {
  color: var(--hc-ink-muted);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.hc-support__detail:empty {
  display: none;
}
.hc-support__chevron {
  color: var(--hc-ink-muted);
  height: 20px;
  width: 20px;
}
[dir=rtl] .hc-support__chevron {
  transform: scaleX(-1);
}

/* Opening hours and reply time: muted 14px lines after a small clock, no box around them. */
.hc-support__meta {
  align-items: flex-start;
  color: var(--hc-ink-muted);
  display: flex;
  font-size: 14px;
  gap: 8px;
  line-height: 1.5;
  padding-top: 16px;
}
.hc-support__meta[hidden] {
  display: none;
}
.hc-support__clock {
  height: 16px;
  margin-top: 2.5px;
  width: 16px;
}
.hc-support__times p {
  margin: 0;
}

/* From 768px the rows take the left column and the hours the right, on the same grid as the
   popular articles above; the hours open with a hairline level with the rows' first one. With
   neither hours nor reply time (the default) the rows take the full width instead. */
@media (min-width: 768px) {
  .hc-support__body {
    align-items: start;
    column-gap: 48px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hc-support__body:has(> .hc-support__meta[hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }
  .hc-support__meta {
    border-top: 1px solid var(--hc-line);
    padding-top: 20px;
  }
}

/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community a {
  color: #171717;
  text-decoration: underline;
}
.community a:visited {
  color: #171717;
}
.community a:hover, .community a:active, .community a:focus {
  color: #171717;
}

.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: #171717;
  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: #171717;
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: #171717;
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: #171717;
}
.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: #C9F145;
  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 and section pages *****/
/* The two lists between the home page and an article, in hairline rows like the popular articles:
   a category's sections, each with its article titles, and a section's articles with pagination.
   A row is one link at least 56px tall: the title in ink at the body size (17px, 16px on phones),
   then a muted chevron, mirrored in RTL. From 1024px a category reads as an index, each section's
   name level with its first row; a section page sets its rows in two columns from 768px, like the
   section list under an article. */
.hc-listing {
  padding-bottom: 48px;
  padding-top: 16px;
}
@media (min-width: 768px) {
  .hc-listing {
    padding-bottom: 80px;
    padding-top: 24px;
  }
}

.hc-listing__header {
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  .hc-listing__header {
    margin-bottom: 48px;
  }
}
/* The section page's title with the follow button beside it; a long title pushes the button onto
   its own line. */
.hc-listing__heading {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.hc-listing__title {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
}
.hc-listing__description {
  color: var(--hc-ink-muted);
  margin: 12px 0 0;
  max-width: 64ch;
  overflow-wrap: break-word;
}

.hc-listing__section + .hc-listing__section {
  margin-top: 40px;
}
.hc-listing__section-title {
  margin: 0 0 12px;
  overflow-wrap: break-word;
}
.hc-listing__section-title a {
  color: var(--hc-ink);
  text-decoration: none;
}
.hc-listing__section-title a:hover {
  text-decoration: underline;
}
@media (min-width: 1024px) {
  .hc-listing__section {
    align-items: start;
    column-gap: 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
  .hc-listing__section + .hc-listing__section {
    margin-top: 56px;
  }
  .hc-listing__section-title {
    margin: 0;
    padding-top: 15px;
  }
}

.hc-article-list__item {
  border-bottom: 1px solid var(--hc-line);
}
.hc-article-list__item:first-child {
  border-top: 1px solid var(--hc-line);
}
.hc-article-list__link {
  align-items: center;
  color: var(--hc-ink);
  display: flex;
  gap: 12px;
  min-height: 56px;
  padding: 12px 0;
  text-decoration: none;
}
.hc-article-list__name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  text-underline-offset: 0.15em;
}
.hc-article-list__link:hover .hc-article-list__name {
  text-decoration: underline;
}
.hc-article-list__icon,
.hc-article-list__lock,
.hc-article-list__chevron {
  color: var(--hc-ink-muted);
}
.hc-article-list__icon,
.hc-article-list__chevron {
  height: 20px;
  width: 20px;
}
[dir=rtl] .hc-article-list__chevron {
  transform: scaleX(-1);
}
/* Child sections (Guide Enterprise) sit above the articles. */
.hc-article-list--sections {
  margin-bottom: 40px;
}
/* The section page's lists are direct children of the page; the category page's sit in a section. */
@media (min-width: 768px) {
  .hc-listing > .hc-article-list {
    column-gap: 48px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hc-listing > .hc-article-list > .hc-article-list__item:nth-child(2) {
    border-top: 1px solid var(--hc-line);
  }
}

.hc-listing__more {
  align-items: center;
  display: inline-flex;
  margin-top: 8px;
  min-height: 44px;
}

.hc-listing__empty {
  color: var(--hc-ink-muted);
  margin: 0;
}

/***** Article *****/
/* The page shoppers land on most. The page bar (breadcrumbs and scoped search), then the
   article beside an aside with the table of contents and the help card. One
   column on phones, where the help card follows the article and the contents list stays hidden
   (the headings are close enough there); two from 1024px, the aside sticky beside the text.
   src/main.js fills the reading time, builds the contents list and shows the print button at
   execution, so nothing moves after the first paint. */
.hc-article-page {
  padding-bottom: 48px;
  padding-top: 16px;
}
@media (min-width: 768px) {
  .hc-article-page {
    padding-bottom: 80px;
    padding-top: 24px;
  }
}

.hc-article {
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .hc-article {
    align-items: start;
    gap: 48px;
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  /* A long contents list scrolls inside the aside rather than pushing the help card off screen. */
  .hc-article__side {
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    position: sticky;
    top: 88px;
  }
}

/* The main column is the grid track; the measure sits on the running text in the body. */
.hc-article__main {
  min-width: 0;
}

.hc-article__header {
  margin-bottom: 32px;
}
.hc-article__title {
  margin: 0 0 12px;
  overflow-wrap: break-word;
}
.hc-article__lock {
  color: var(--hc-ink-muted);
  height: 0.6em;
  margin-inline-start: 8px;
  vertical-align: 0.05em;
  width: 0.6em;
}

/* Updated, reading time and the print button on one muted line, 44px tall so the button is a
   full target and the line keeps its height while the script fills it. */
.hc-article__meta {
  align-items: center;
  color: var(--hc-ink-muted);
  column-gap: 12px;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 1.4;
  min-height: 44px;
}
/* A small dot between items, drawn rather than typed so screen readers pass over it. */
.hc-article__meta > :not(.hc-article__print) + :not(.hc-article__print)::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 3px;
  margin-inline-end: 12px;
  vertical-align: middle;
  width: 3px;
}
.hc-article__author {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}
.hc-article__author a {
  color: var(--hc-ink);
}
.hc-article__avatar {
  border-radius: 50%;
  height: 24px;
  width: 24px;
}
.hc-article__print {
  margin-inline-start: auto;
}
.hc-article__header .article-subscribe {
  margin-top: 12px;
}

/* The body. Rules sit under :where(.article-body) so they weigh no more than a bare element: the
   content kit's classes and the shared tiles and buttons always win over them. Links keep the
   base underline. */
.article-body {
  display: flow-root;
  overflow-wrap: break-word;
}
:where(.article-body) > :first-child {
  margin-top: 0;
}
:where(.article-body) > :last-child {
  margin-bottom: 0;
}
:where(.article-body) p {
  margin: 0 0 1em;
}
/* The measure: running text stops at 48 times the body size, at least 768px, so on desktop it fills
   the 764px column and shares its right edge with the title, photos, tables and the divider (at 33
   it ended far short of them). Under 1024px, where the article is one wider column, it still stops
   there, about 95 characters a line. Tables, figures, video and the kit's tiles take the whole column. */
:where(.article-body) > :is(p, blockquote, h2, h3, h4),
:where(.article-body) > :is(ul, ol):not([class]) {
  max-width: calc(var(--hc-font-size) * 48);
}

:where(.article-body) h2 {
  font-size: 20px;
  margin: 2em 0 0.6em;
  scroll-margin-top: 24px;
}
:where(.article-body) h3 {
  font-size: calc(var(--hc-font-size) + 2px);
  margin: 1.75em 0 0.5em;
}
:where(.article-body) h4 {
  font-size: var(--hc-font-size);
  margin: 1.5em 0 0.5em;
}
:where(.article-body) :is(h5, h6) {
  color: var(--hc-ink-muted);
  font-size: 15px;
  margin: 1.5em 0 0.5em;
}
@media (min-width: 768px) {
  :where(.article-body) h2 {
    font-size: 24px;
  }
}

/* Lists the editor writes (no class); the kit's lists bring their own styles. */
:where(.article-body) :is(ul, ol):not([class]) {
  margin: 0 0 1em;
  padding-inline-start: 1.5em;
}
:where(.article-body) ul:not([class]) {
  list-style: disc;
}
:where(.article-body) ol:not([class]) {
  list-style: decimal;
}
:where(.article-body) :is(ul, ol):not([class]) > li + li {
  margin-top: 0.35em;
}
:where(.article-body) li > :is(ul, ol):not([class]) {
  margin: 0.35em 0 0;
}

/* Images take the column width at most and never a lightbox. */
:where(.article-body) img {
  border-radius: var(--hc-radius-sm);
  height: auto;
  max-width: 100%;
}
/* Image alignment from Zendesk's editor. */
:where(.article-body) figure.image {
  display: table;
  margin: 1.5em auto;
}
:where(.article-body) figure.image > img {
  display: block;
  width: 100%;
}
:where(.article-body) :is(p > img, figure.image).image-style-align-left {
  float: left;
  margin: 0.5em 20px 0.5em 0;
}
:where(.article-body) :is(p > img, figure.image).image-style-align-right {
  float: right;
  margin: 0.5em 0 0.5em 20px;
}
:where(.article-body) :is(p > img, figure.image).image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
:where(.article-body) :is(p > img, figure.image).image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
:where(.article-body) figcaption {
  color: var(--hc-ink-muted);
  font-size: 14px;
  padding-top: 8px;
  text-align: center;
}

/* Embeds from the editor never run wider than the column; one without a height keeps 16:9. */
:where(.article-body) iframe {
  max-width: 100%;
}
:where(.article-body) iframe:not([height]) {
  aspect-ratio: 16 / 9;
  height: auto;
  width: 100%;
}

:where(.article-body) table {
  border-collapse: collapse;
  margin: 0 0 1em;
  width: 100%;
}
/* A wide editor table scrolls inside its own region (src/table-scroll.js), never the page. */
.hc-table-scroll {
  margin: 0 0 1em;
  overflow-x: auto;
}
.hc-table-scroll > table {
  margin: 0;
}
:where(.article-body) :is(th, td) {
  border-bottom: 1px solid var(--hc-line);
  padding: 8px 12px;
  text-align: start;
  vertical-align: top;
}
:where(.article-body) :is(th, td) > p:first-child {
  margin-top: 0;
}
:where(.article-body) :is(th, td) > p:last-child {
  margin-bottom: 0;
}

:where(.article-body) :not(pre) > code {
  background: color-mix(in srgb, var(--hc-ink) 5%, var(--hc-canvas));
  border-radius: var(--hc-radius-sm);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
}
:where(.article-body) pre {
  background: color-mix(in srgb, var(--hc-ink) 5%, var(--hc-canvas));
  border-radius: var(--hc-radius-sm);
  direction: ltr;
  font-size: 14px;
  margin: 0 0 1em;
  overflow: auto;
  padding: 12px 16px;
  white-space: pre;
}
:where(.article-body) blockquote {
  border-inline-start: 2px solid var(--hc-line);
  color: var(--hc-ink-muted);
  margin: 1.5em 0;
  padding-inline-start: 16px;
}
:where(.article-body) hr {
  border: 0;
  border-top: 1px solid var(--hc-line);
  margin: 2em 0;
}

.article-attachments {
  border-top: 1px solid var(--hc-line);
  margin-top: 32px;
  padding-top: 24px;
}

/* Was this helpful: the question and Zendesk's two vote buttons on one line after a hairline, the
   count below. The buttons are Copenhagen's .button (quiet) and turn .button-primary when chosen. */
.hc-article__votes {
  align-items: center;
  border-top: 1px solid var(--hc-line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 48px;
  padding-top: 24px;
}
.hc-article__votes-question {
  font-size: var(--hc-font-size);
  margin: 0;
}
.hc-article__votes-controls {
  display: flex;
  gap: 8px;
}
.article-vote {
  min-width: 88px;
}
.hc-article__votes-count {
  color: var(--hc-ink-muted);
  flex-basis: 100%;
  font-size: 14px;
}

.hc-article__share {
  margin-top: 24px;
}

/* Related and recently viewed articles: Zendesk's helpers print the lists, so the rows follow the
   section list below and draw their chevron. */
.hc-article__main .related-articles,
.hc-article__main .recent-articles {
  margin-top: 48px;
}
.related-articles-title,
.recent-articles-title {
  font-size: 20px;
  margin: 0 0 16px;
}
@media (min-width: 768px) {
  .related-articles-title,
  .recent-articles-title {
    font-size: 24px;
  }
}
.related-articles ul,
.recent-articles ul {
  border-top: 1px solid var(--hc-line);
}
.related-articles li,
.recent-articles li {
  border-bottom: 1px solid var(--hc-line);
}
.related-articles li a,
.recent-articles li a {
  align-items: center;
  color: var(--hc-ink);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 56px;
  overflow-wrap: anywhere;
  padding: 12px 0;
  text-decoration: none;
}
.related-articles li a:hover,
.recent-articles li a:hover {
  text-decoration: underline;
}
.related-articles li a::after,
.recent-articles li a::after {
  border-block-start: 1.75px solid var(--hc-ink-muted);
  border-inline-end: 1.75px solid var(--hc-ink-muted);
  content: "";
  flex: none;
  height: 7px;
  margin-inline-end: 7px;
  transform: rotate(45deg);
  width: 7px;
}
[dir=rtl] .related-articles li a::after,
[dir=rtl] .recent-articles li a::after {
  transform: rotate(-45deg);
}

/* Contents list: only from 1024px, and only once the script has filled it (three headings up). */
.hc-toc-slot {
  margin-bottom: 32px;
}
@media (max-width: 1023px) {
  .hc-toc-slot {
    display: none;
  }
}
.hc-toc__title {
  font-size: 15px;
  margin: 0 0 12px;
}
/* The contents list hangs from a hairline; the entry being read takes the accent on it. */
.hc-toc ul {
  border-inline-start: 1px solid var(--hc-line);
}
.hc-toc a {
  border-inline-start: 2px solid transparent;
  color: var(--hc-ink-muted);
  display: block;
  font-size: 15px;
  line-height: 1.4;
  margin-inline-start: -1px;
  padding-block: 6px;
  padding-inline: 14px 4px;
  text-decoration: none;
}
.hc-toc a:hover {
  color: var(--hc-ink);
  text-decoration: underline;
}
.hc-toc a:focus-visible {
  outline-offset: -2px;
}
.hc-toc a.is-current {
  border-inline-start-color: var(--hc-accent);
  color: var(--hc-ink);
}

/* Need more help: a quiet tinted panel, the one primary button of the page in it. */
.hc-help-card {
  background: color-mix(in srgb, var(--hc-ink) 4%, var(--hc-canvas));
  border-radius: var(--hc-radius);
  padding: 24px;
}
.hc-help-card__title {
  font-size: var(--hc-font-size);
  margin: 0 0 4px;
}
.hc-help-card__text {
  color: var(--hc-ink-muted);
  font-size: 15px;
  margin: 0 0 16px;
}
.hc-help-card__text:last-child {
  margin-bottom: 0;
}
.hc-help-card .hc-button {
  width: 100%;
}

/* Articles in this section, under both columns: rows between hairlines with a chevron, two
   columns of rows from 768px like the popular articles on the home page. The open article is
   marked in bold; a section with only that article lists nothing. */
.hc-section-articles {
  margin-top: 64px;
}
@media (min-width: 768px) {
  .hc-section-articles {
    margin-top: 80px;
  }
}
.hc-section-articles:not(:has(.hc-section-articles__item + .hc-section-articles__item)) {
  display: none;
}
.hc-section-articles__title {
  margin: 0 0 16px;
}
.hc-section-articles__list {
  border-top: 1px solid var(--hc-line);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .hc-section-articles__list {
    column-gap: 48px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.hc-section-articles__item {
  border-bottom: 1px solid var(--hc-line);
}
.hc-section-articles__link {
  align-items: center;
  color: var(--hc-ink);
  display: flex;
  gap: 12px;
  min-height: 56px;
  padding: 12px 0;
  text-decoration: none;
}
.hc-section-articles__link[aria-current="page"] {
  font-weight: 600;
}
.hc-section-articles__name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  text-underline-offset: 0.15em;
}
.hc-section-articles__link:hover .hc-section-articles__name {
  text-decoration: underline;
}
.hc-section-articles__chevron {
  color: var(--hc-ink-muted);
  height: 20px;
  width: 20px;
}
[dir=rtl] .hc-section-articles__chevron {
  transform: scaleX(-1);
}
.hc-section-articles__more {
  align-items: center;
  display: inline-flex;
  margin-top: 8px;
  min-height: 44px;
}

/* The search results filters keep Copenhagen's sidebar classes. */
.sidenav-title {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}
.sidenav-item {
  display: block;
  margin-bottom: 16px;
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/***** Content kit *****/
/* Blocks authors paste into the article editor's source view; docs/snippets has one fragment per
   block. They use only what the Zendesk sanitiser keeps, and icons are spans that src/icons.js
   turns into svg. Text-like blocks (callouts, steps, accordions) keep the measure of the running
   text; tiles, columns, figures, tables and video take the whole column. The accent stays on
   .hc-button: callouts differ by their icon and a quiet tint mixed from the ink and the canvas, so
   they read on a light and on a dark canvas alike. Block margins sit at zero specificity, so the
   body's first and last child rules still trim them. */
:where(.article-body) :where(.hc-callout, .hc-steps, .hc-accordion, .hc-columns, .hc-figure, .hc-table, .hc-video) {
  margin: 1.5em 0;
}
.article-body :is(.hc-callout, .hc-steps, .hc-accordion) {
  max-width: calc(var(--hc-font-size) * 48);
}

/* Callout: an icon beside a bold title and a line or two of text. Tip, info and success share a
   neutral tint and are told apart by their icon; a warning takes a step stronger tint of the ink
   and its own icon. The ink keeps well over 7:1 on every tint. */
.article-body .hc-callout {
  border-radius: var(--hc-radius);
  display: flex;
  gap: 12px;
  padding: 16px 20px;
}
.article-body :is(.hc-callout, .hc-callout--tip, .hc-callout--info, .hc-callout--success) {
  background: color-mix(in srgb, var(--hc-ink) 4%, var(--hc-canvas));
}
.article-body .hc-callout--warning {
  background: color-mix(in srgb, var(--hc-ink) 8%, var(--hc-canvas));
}
.article-body .hc-callout > .hc-icon {
  height: 1.25em;
  margin-top: 0.175em;
  width: 1.25em;
}
.article-body .hc-callout > div {
  flex: 1;
  min-width: 0;
}
.article-body .hc-callout > div > * {
  margin: 0;
}
.article-body .hc-callout > div > strong {
  display: block;
}
.article-body .hc-callout > div > * + * {
  margin-top: 4px;
}
.article-body .hc-callout > div > p + p {
  margin-top: 0.5em;
}

/* Steps: a real sequence, so numbered. Each number sits in a 28px ink ring level with the first
   line, joined to the next by a hairline; an optional icon hangs between the number and the text,
   so wrapped lines stay aligned. */
.article-body .hc-steps {
  counter-reset: hc-step;
  list-style: none;
  padding: 0;
}
.article-body .hc-steps > li {
  counter-increment: hc-step;
  min-height: 28px;
  padding-inline-start: 44px;
  position: relative;
}
.article-body .hc-steps > li + li {
  margin-top: 20px;
}
.article-body .hc-steps > li::before {
  align-items: center;
  border: 1px solid var(--hc-ink);
  border-radius: 50%;
  color: var(--hc-ink);
  content: counter(hc-step);
  display: flex;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  height: 28px;
  inset-inline-start: 0;
  justify-content: center;
  line-height: 1;
  position: absolute;
  top: calc((var(--hc-font-size) * 1.6 - 28px) / 2);
  width: 28px;
}
.article-body .hc-steps > li:not(:last-child)::after {
  border-inline-start: 1px solid var(--hc-line);
  bottom: -16px;
  content: "";
  inset-inline-start: 13.5px;
  position: absolute;
  top: calc((var(--hc-font-size) * 1.6 + 28px) / 2 + 4px);
}
.article-body .hc-steps > li > .hc-icon:first-child {
  height: 1.25em;
  inset-inline-start: 44px;
  position: absolute;
  top: 0.175em;
  width: 1.25em;
}
.article-body .hc-steps > li:has(> .hc-icon:first-child) {
  padding-inline-start: calc(44px + 1.75em);
}
.article-body .hc-steps > li > p {
  margin: 0;
}
.article-body .hc-steps > li > p + p {
  margin-top: 0.5em;
}

/* Accordion: the browser's own details and summary, so it opens without JavaScript. Questions sit
   between hairlines (a run of them shares one) in rows of at least 48px; the chevron turns over
   when one opens. */
:where(.article-body) :where(.hc-accordion:has(+ .hc-accordion)) {
  margin-bottom: 0;
}
:where(.article-body) :where(.hc-accordion + .hc-accordion) {
  margin-top: 0;
}
.article-body .hc-accordion {
  border-block: 1px solid var(--hc-line);
}
.article-body .hc-accordion + .hc-accordion {
  border-top: 0;
}
.article-body .hc-accordion > summary {
  cursor: pointer;
  display: block;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  min-height: 48px;
  padding-block: 14px;
  padding-inline-end: 40px;
  position: relative;
}
.article-body .hc-accordion > summary::-webkit-details-marker {
  display: none;
}
.article-body .hc-accordion > summary:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.article-body .hc-accordion > summary::after {
  border-bottom: 1.75px solid var(--hc-ink-muted);
  border-right: 1.75px solid var(--hc-ink-muted);
  content: "";
  height: 8px;
  inset-inline-end: 8px;
  position: absolute;
  top: calc(50% - 4px);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease-out;
  width: 8px;
}
.article-body .hc-accordion[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}
@media (prefers-reduced-motion: reduce) {
  .article-body .hc-accordion > summary::after {
    transition: none;
  }
}
.article-body .hc-accordion[open] {
  padding-bottom: 16px;
}
.article-body .hc-accordion > :not(summary) {
  margin-top: 0;
}
.article-body .hc-accordion > :last-child:not(summary) {
  margin-bottom: 0;
}

/* Columns: two from 768px, stacked below; an image beside text lines up with its top. */
.article-body .hc-columns {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .article-body .hc-columns {
    gap: 32px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.article-body .hc-columns > * {
  margin: 0;
  min-width: 0;
}
.article-body .hc-columns > * > :first-child {
  margin-top: 0;
}
.article-body .hc-columns > * > :last-child {
  margin-bottom: 0;
}

/* Figure: the image fills the column with the card radius, the caption follows the text edge. */
.article-body .hc-figure > img {
  border-radius: var(--hc-radius);
  display: block;
  height: auto;
  width: 100%;
}
.article-body .hc-figure > figcaption {
  text-align: start;
}

/* Table: the kit's wrapper is the scroll region (role, tabindex and label come with the snippet),
   so a wide table scrolls sideways on a phone and the page does not. Cells keep 120px at least,
   header cells one line over an ink rule, and the outer columns line up with the text. */
.article-body .hc-table {
  overflow-x: auto;
}
/* Any table region, the kit's or the one src/table-scroll.js puts round an editor table, shows a
   soft shadow on the side where columns are hidden: canvas covers travel with the content and hide
   each shadow once that end is in view, so a table that fits shows none. */
.article-body :is(.hc-table, .hc-table-scroll) {
  background:
    linear-gradient(to right, var(--hc-canvas) 40%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--hc-canvas) 40%, transparent) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--hc-ink) 16%, transparent), transparent) left center / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--hc-ink) 16%, transparent), transparent) right center / 12px 100% no-repeat;
}
.article-body .hc-table > table {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.article-body .hc-table :is(th, td) {
  min-width: 120px;
  padding: 12px 16px;
}
.article-body .hc-table :is(th, td):first-child {
  padding-inline-start: 0;
}
.article-body .hc-table :is(th, td):last-child {
  padding-inline-end: 0;
}
.article-body .hc-table thead th {
  border-bottom-color: var(--hc-ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* Badge: a small label in a line of text or a heading, such as "Alleen EU". */
.article-body .hc-badge {
  background: color-mix(in srgb, var(--hc-ink) 7%, var(--hc-canvas));
  border-radius: var(--hc-radius-sm);
  color: var(--hc-ink);
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.6;
  padding: 0 8px;
  white-space: nowrap;
}
.article-body :is(h2, h3, h4) > .hc-badge {
  vertical-align: middle;
}
.article-body .hc-badge > .hc-icon {
  margin-inline-end: 4px;
}

/* Video: an embed from an allowed host at 16:9 across the column, whatever size it was pasted at. */
.article-body .hc-video > iframe {
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--hc-ink) 4%, var(--hc-canvas));
  border: 0;
  border-radius: var(--hc-radius);
  display: block;
  height: auto;
  width: 100%;
}

/* The shared tiles and buttons in an article: the body's rhythm around a grid, a 32px tile icon,
   and a gap between the buttons of one paragraph (they wrap on a phone). */
.article-body .hc-tiles:not(:first-child) {
  margin-top: 1.5em;
}
.article-body .hc-tiles:not(:last-child) {
  margin-bottom: 1.5em;
}
.article-body .hc-tile > .hc-icon {
  height: 32px;
  width: 32px;
}
.article-body p:has(> .hc-button) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/***** Attachments *****/
/* Files under articles, posts, requests and comments: a file icon, the name as a link, then the
   size and a download link in the muted meta style. */
.attachments .attachment-item {
  margin-bottom: 12px;
  padding-inline-start: 28px;
  position: relative;
}
.attachments .attachment-item:last-child {
  margin-bottom: 0;
}
.attachments .attachment-item .attachment-icon {
  color: var(--hc-ink-muted);
  height: 18px;
  inset-inline-start: 0;
  position: absolute;
  top: 0.2em;
  width: 18px;
}

.upload-dropzone span {
  color: var(--hc-ink-muted);
}

/***** Social share links *****/
/* Zendesk's share helper: muted icons in 44px targets, ink on hover. */
.share {
  display: flex;
  gap: 4px;
  padding: 0;
  white-space: nowrap;
}
.share li,
.share a {
  display: inline-flex;
}
.share a {
  align-items: center;
  border-radius: var(--hc-radius-sm);
  color: var(--hc-ink-muted);
  height: 44px;
  justify-content: center;
  width: 44px;
}
.share a:hover {
  color: var(--hc-ink);
  text-decoration: none;
}
.share a svg {
  display: block;
  height: 18px;
  width: 18px;
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid var(--hc-line);
  padding: 20px 0;
}
.comment-heading {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}
.comment-overview {
  border-bottom: 1px solid var(--hc-line);
  border-top: 1px solid var(--hc-line);
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: var(--hc-ink-muted);
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: var(--hc-link);
  text-decoration: underline;
}
.comment-callout a:visited {
  color: #171717;
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: var(--hc-link-hover);
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: var(--hc-ink-muted);
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid var(--hc-accent);
  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: var(--hc-accent);
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: var(--hc-font);
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: var(--hc-link);
  text-decoration: underline;
}
.comment-body a:visited {
  color: #171717;
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: var(--hc-link-hover);
}
.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: color-mix(in srgb, var(--hc-ink) 5%, var(--hc-canvas));
}
.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: color-mix(in srgb, var(--hc-ink) 3%, var(--hc-canvas));
  border: 1px solid var(--hc-line);
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: color-mix(in srgb, var(--hc-ink) 3%, var(--hc-canvas));
  border: 1px solid var(--hc-line);
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.comment-body blockquote {
  border-left: 1px solid var(--hc-line);
  color: var(--hc-ink-muted);
  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: var(--hc-ink-muted);
  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: var(--hc-accent);
}

.vote-up, .vote-down {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  color: var(--hc-ink-muted);
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vote-voted {
  color: var(--hc-accent);
}

.vote-voted:hover {
  color: color-mix(in srgb, var(--hc-accent) 65%, var(--hc-ink));
}

/***** 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: #C9F145;
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #171717;
  color: #171717;
}
.community-follow button[data-selected=true] {
  background-color: #C9F145;
  color: #171717;
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid #171717;
  color: #171717;
}
.community-follow button[data-selected=true]:hover {
  background-color: #98c10f;
  border-color: #98c10f;
}
.community-follow button::after {
  border-left: 1px solid #C9F145;
  content: attr(data-follower-count);
  color: #C9F145;
  display: inline-block;
  font-family: 'Inter', system-ui, 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 #C9F145;
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}

/***** Striped list *****/
/* Hairline rows: community post lists and the titles in the activity tables. */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid var(--hc-line);
  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: var(--hc-ink);
  font-weight: 500;
  margin-bottom: 10px;
  margin-inline-end: 5px;
  text-decoration: none;
}
.striped-list-title:hover,
.striped-list-title:focus,
.striped-list-title:active {
  text-decoration: underline;
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: var(--hc-ink-muted);
  font-size: 14px;
  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: var(--hc-ink);
    display: block;
  }
}

/***** Status labels *****/
/* Labels on requests, posts and articles: small quiet tints, never the accent. Request statuses
   keep Zendesk's meaning (new amber, open red, pending blue, solved grey) as light tints with dark
   text, each pair at least 4.5:1 on its own background whatever the canvas; community statuses
   without a pair of their own take the green default, pinned and featured the ink tint. */
.status-label {
  background-color: #E7F4EC;
  border-radius: var(--hc-radius-sm);
  color: #1D6440;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  margin-inline-end: 2px;
  padding: 1px 8px;
  vertical-align: middle;
  white-space: nowrap;
}
.status-label:hover,
.status-label:active,
.status-label:focus {
  text-decoration: none;
}
.status-label-pinned,
.status-label-featured,
.status-label-official,
.status-label-not-planned,
.status-label-closed {
  background-color: color-mix(in srgb, var(--hc-ink) 8%, var(--hc-canvas));
  color: var(--hc-ink);
}
.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 var(--hc-radius-sm) var(--hc-radius-sm);
    right: 30px;
    width: auto;
  }
}
[dir=rtl] .status-label-official {
  left: 30px;
  right: auto;
}
.status-label-new {
  background-color: #FDF1DC;
  color: #7A4510;
}
.status-label-open {
  background-color: #FCEBEA;
  color: #A1261B;
}
.status-label-pending,
.status-label-pending-moderation {
  background-color: #E8F0FA;
  color: #1E4F8A;
  text-align: center;
}
.status-label-solved {
  background-color: #EEF0F2;
  color: #4A545E;
}
.status-label-hold {
  background-color: #ECECEC;
  color: #2E2E2E;
}
.status-label-request {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@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', system-ui, 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: #171717;
  text-decoration: underline;
}
.post-body a:visited {
  color: #171717;
}
.post-body a:hover, .post-body a:active, .post-body a:focus {
  color: #171717;
}
.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;
  direction: ltr;
}
.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #4a4a4a;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #4a4a4a;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: #C9F145;
  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 that collapses on phones (the activity pages and the profile): the current entry
   shows with a 44px toggle at its end, the others drop below it when opened. From 768px the
   entries stand in a row and the current one is underlined in the accent. Copenhagen's script
   toggles .expanded on a click anywhere in the nav. */
.collapsible-nav {
  flex-direction: column;
  font-size: 15px;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav {
    flex-direction: row;
  }
}

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

.collapsible-nav-toggle {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--hc-radius-sm);
  color: var(--hc-ink-muted);
  display: flex;
  height: 44px;
  inset-inline-end: 0;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: 0;
  width: 44px;
}
@media (min-width: 768px) {
  .collapsible-nav-toggle {
    display: none;
  }
}
.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-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    column-gap: 32px;
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  line-height: 44px;
  order: 1;
}
.collapsible-nav-list li a {
  color: var(--hc-ink);
  display: block;
  text-decoration: none;
}
.collapsible-nav-list li a:hover {
  text-decoration: underline;
}
@media (min-width: 768px) {
  .collapsible-nav-list li {
    border-bottom: 2px solid transparent;
    line-height: 1.4;
  }
  .collapsible-nav-list li a {
    padding: 12px 0 10px;
  }
}
.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;
  }
}
.collapsible-nav-list li[aria-selected=true],
.collapsible-nav-list li.current {
  font-weight: 600;
  order: 0;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected=true],
  .collapsible-nav-list li.current {
    border-bottom-color: var(--hc-accent);
    order: 1;
  }
}

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

/* Sidebar that collapses below 1024px (the search filters and the request details): its title
   row is 48px, a click anywhere in it toggles (Copenhagen's script), and the 44px toggle sits at
   its end. From 1024px it stands open and the toggle goes. */
.collapsible-sidebar {
  flex: 1;
  min-height: 48px;
  padding: 12px 0;
  position: relative;
}
@media (min-width: 1024px) {
  .collapsible-sidebar {
    min-height: 0;
    padding: 0;
  }
}
.collapsible-sidebar-title {
  line-height: 24px;
  margin: 0;
  padding-inline-end: 48px;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-title {
    padding-inline-end: 0;
  }
}
.collapsible-sidebar-toggle {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--hc-radius-sm);
  color: var(--hc-ink-muted);
  cursor: pointer;
  display: flex;
  height: 44px;
  inset-inline-end: 0;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: 2px;
  width: 44px;
}
@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-body {
  display: none;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar.expanded .collapsible-sidebar-body {
  display: block;
}

/***** My activities *****/
/* The signed-in pages. My requests: the page bar, the title, then Copenhagen's request list
   bundle in #main-content. Contributions and following: their nav under a hairline instead of a
   grey band, then hairline tables (Tables). */
.hc-requests {
  padding-bottom: 48px;
  padding-top: 16px;
}
@media (min-width: 768px) {
  .hc-requests {
    padding-bottom: 80px;
    padding-top: 24px;
  }
}
.my-activities-nav {
  border-bottom: 1px solid var(--hc-line);
  margin-bottom: 24px;
}
.my-activities-header h1 {
  overflow-wrap: anywhere;
}
.my-activities-sub-nav {
  margin-bottom: 32px;
}
.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-inline-start: 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-inline-end: 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: 14px;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}
.requests-table-toolbar select {
  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 + .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 {
  bottom: 0;
  font-size: 10px;
  left: calc(100% + 3px);
  position: absolute;
}

/* 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 {
  align-items: center;
  display: flex;
}
.subscriptions-table .user-avatar {
  margin-inline-end: 10px;
}
.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}

/* Contributions table */
.contributions-table td:last-child {
  color: var(--hc-ink-muted);
  font-size: 14px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: var(--hc-ink-muted);
}

/***** New request *****/
/* Submit a request: the page bar, the title, the optional form picker (the tile component, three
   a row from 768px, each tile reopening the page with its ticket_form_id), the change topic link
   once a form is chosen, then Copenhagen's form bundle in its 650px column (Forms). */
.hc-request-new {
  padding-bottom: 48px;
  padding-top: 16px;
}
@media (min-width: 768px) {
  .hc-request-new {
    padding-bottom: 80px;
    padding-top: 24px;
  }
}
.hc-request-new__title {
  margin: 0 0 24px;
}
@media (min-width: 768px) {
  .hc-request-new__title {
    margin-bottom: 32px;
  }
}

/* The intro above the form (request_intro_show): a line of copy, the search field with instant
   search and the popular terms like the hero's, then the form's heading with the expected reply
   time, all in the form's 650px column. With the intro on, the page bar drops its small search
   field, so the page has one. */
.hc-request-intro {
  --hc-search-h: 48px;
  margin: -8px 0 32px;
  max-width: 650px;
}
.hc-request-intro__text,
.hc-request-intro__lead {
  margin: 0;
}
.hc-request-intro__search {
  margin: 16px 0 24px;
  position: relative;
}
.hc-request-intro__popular {
  font-size: 14px;
  margin: -12px 0 32px;
}
.hc-request-intro__popular[hidden] {
  display: none;
}
/* Same 44px targets as the hero's terms (see .hc-hero__popular a). */
.hc-request-intro__popular a {
  color: inherit;
  display: inline-block;
  margin-block: -12px;
  padding-block: 12px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.hc-request-intro__popular a + a {
  margin-inline-start: 4px;
}
.hc-request-intro__popular a:hover {
  color: inherit;
  text-decoration-thickness: 2px;
}
.hc-request-intro__reply {
  color: var(--hc-ink-muted);
  margin: 4px 0 0;
}
.hc-request-intro__search-icon {
  color: var(--hc-ink-muted);
  height: 20px;
  inset-inline-start: 16px;
  pointer-events: none;
  position: absolute;
  top: calc(var(--hc-search-h) / 2);
  transform: translateY(-50%);
  width: 20px;
  z-index: 1;
}
.hc-request-intro .hc-search input[type=search] {
  height: calc(var(--hc-search-h) - 2px);
  padding-inline: 48px 16px;
}
@media (min-width: 768px) {
  .hc-request-intro {
    --hc-search-h: 56px;
  }
  .hc-request-intro .hc-search input[type=search] {
    font-size: 17px;
  }
}

.hc-form-picker {
  margin-bottom: 40px;
}
.hc-form-picker[hidden] {
  display: none;
}
.hc-form-picker__title {
  margin: 0 0 16px;
}
/* On phones the picker is one column of rows, each icon beside its label and line, so the lines
   read whole instead of hyphenating in half-width tiles. */
@media (max-width: 767px) {
  .hc-form-picker .hc-tiles {
    --hc-tile-cols: 1;
  }
  .hc-form-picker .hc-tile {
    align-items: center;
    column-gap: 16px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    -webkit-hyphens: manual;
    hyphens: manual;
    padding: 16px;
    row-gap: 2px;
    text-align: start;
  }
  .hc-form-picker .hc-tile > .hc-icon {
    grid-row: span 2;
    height: 32px;
    width: 32px;
  }
  .hc-form-picker .hc-tile__text {
    margin-top: 0;
  }
}

/* The change topic link sits right under the title, above the chosen form. */
.hc-request-new .hc-link-button[data-hc-form-change] {
  margin: -16px 0 16px;
}

/***** Request *****/
/* One request: the conversation, and its details beside it from 1024px on a quiet ink tint (above
   it on phones, as the collapsible sidebar). Copenhagen's markup and script hooks are kept. */
.hc-request {
  padding-bottom: 48px;
  padding-top: 16px;
}
@media (min-width: 768px) {
  .hc-request {
    padding-bottom: 80px;
    padding-top: 24px;
  }
}
.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-main {
  flex: 1 0 auto;
  max-width: 100%;
  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%;
    min-width: 0;
    order: 0;
  }
}
.request-main .comment-form-controls {
  display: block;
}
.request-main .comment-ccs {
  display: block;
}
/* "Add to the conversation": a field-like button that opens the reply editor. */
.request-main .comment-show-container {
  background-color: var(--hc-canvas);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-radius-sm);
  color: var(--hc-ink-muted);
  cursor: text;
  font: inherit;
  min-height: 44px;
  padding: 10px 16px;
  text-align: start;
  width: 100%;
}
.request-main .comment-show-container:hover {
  border-color: var(--hc-ink);
}
.request-main .comment-show-container.hidden {
  display: none;
}
.request-main .form-field.comment-ccs > ul {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.request-main .form-field.comment-ccs > ul[data-hc-focus=true] {
  border: 1px solid var(--hc-accent);
}
.request-main .form-field.comment-ccs > input[type=text] {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 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 var(--hc-accent);
}
.request-main input#mark_as_solved {
  display: none;
}
.request-title {
  overflow-wrap: anywhere;
  width: 100%;
}
@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid var(--hc-line);
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}
.request-sidebar {
  border-bottom: 1px solid var(--hc-line);
  border-top: 1px solid var(--hc-line);
  flex: 1 0 auto;
  order: 0;
}
@media (min-width: 1024px) {
  .request-sidebar {
    background-color: color-mix(in srgb, var(--hc-ink) 3%, var(--hc-canvas));
    border: 0;
    border-radius: var(--hc-radius);
    flex: 0 0 auto;
    font-size: 14px;
    padding: 4px 20px;
    width: 30%;
  }
}
.request-sidebar h2 {
  font-size: 16px;
  font-weight: 600;
  position: relative;
}
@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}
.request-details {
  border-bottom: 1px solid var(--hc-line);
  font-size: 0;
  margin: 0;
  padding-bottom: 16px;
}
.request-details:last-child {
  border: 0;
}
.request-details dt,
.request-details dd {
  display: inline-block;
  font-size: 14px;
  margin: 16px 0 0 0;
  vertical-align: top;
}
.request-details dd {
  overflow: hidden;
  padding: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 60%;
}
.request-details dd::after {
  content: "\a";
  white-space: pre;
}
.request-details dt {
  color: var(--hc-ink-muted);
  line-break: strict;
  overflow-wrap: break-word;
  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;
}

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

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

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

.meta-group * {
  display: inline;
}

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

/* User Profiles */
.profile-header {
  padding: 30px 0;
  background-color: color-mix(in srgb, var(--hc-ink) 3%, var(--hc-canvas));
}

.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: var(--hc-ink-muted);
  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 var(--hc-line);
  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 var(--hc-line);
}
@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 var(--hc-ink-muted);
  border-radius: 4px;
  color: var(--hc-ink-muted);
  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 {
  border-bottom: 1px solid var(--hc-line);
  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: var(--hc-ink-muted);
  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 var(--hc-line);
  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 var(--hc-line);
  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: var(--hc-ink-muted);
  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 var(--hc-line);
}
@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 var(--hc-line);
}

.profile-contribution-icon {
  left: 0;
  position: absolute;
  color: var(--hc-ink-muted);
  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: var(--hc-ink-muted);
}

.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 var(--hc-line);
  }
  [dir=rtl] .profile-activity:not(:last-child) {
    border-left: 0;
    border-right: 1px solid var(--hc-line);
  }
}

.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: color-mix(in srgb, var(--hc-ink) 3%, var(--hc-canvas));
}
@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: var(--hc-canvas);
  background-position: 50% 50%;
  text-align: center;
  color: var(--hc-ink-muted);
}
[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 *****/
/* The results page under the page bar. On phones the filter groups (Copenhagen's collapsible
   sidebar markup, unchanged) fold into hairline rows above the results; from 1024px they stand in
   a 240px column beside them, and a page without filters gives the results the column alone. The
   results keep a reading measure: Zendesk's AI answer first in a quiet accent tint (only the
   wrapper is styled, its own markup renders inside), the count as the page title, then hairline
   rows of title, trail and snippet. */
.hc-search-page {
  padding-top: 16px;
}
@media (min-width: 768px) {
  .hc-search-page {
    padding-top: 24px;
  }
}

.search-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 48px;
}
@media (min-width: 768px) {
  .search-results {
    padding-bottom: 64px;
  }
}
@media (min-width: 1024px) {
  .search-results:has(.search-results-sidebar > *) {
    column-gap: 64px;
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

.search-results-column {
  max-width: 760px;
  min-width: 0;
}

/* Zendesk's answer, the panel only, tinted from the ink: the accent stays on the follow-up
   button. With generative search off the helper prints nothing and the panel goes with it. */
.hc-answer {
  background: color-mix(in srgb, var(--hc-ink) 4%, var(--hc-canvas));
  border-radius: var(--hc-radius);
  color: var(--hc-ink);
  margin-bottom: 32px;
  padding: 24px;
}
.hc-answer:empty {
  display: none;
}

.search-results-subheading {
  font-size: 20px;
  margin: 0 0 16px;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .search-results-subheading {
    font-size: 24px;
  }
}

/* A row: the title link stretched over the whole row (one target at least 44px tall), the trail's
   own links above it, the snippet with Zendesk's highlighted words in ink. */
.hc-results {
  border-top: 1px solid var(--hc-line);
}
.hc-result {
  border-bottom: 1px solid var(--hc-line);
  padding: 20px 0;
  position: relative;
}
.hc-result__title {
  font-size: 16px;
  line-height: 1.35;
  margin: 0;
}
@media (min-width: 768px) {
  .hc-result__title {
    font-size: 17px;
  }
}
.hc-result__title a {
  color: var(--hc-ink);
  overflow-wrap: anywhere;
  text-decoration: none;
}
.hc-result__title a::after {
  content: "";
  inset: 0;
  position: absolute;
}
.hc-result__title a:hover {
  text-decoration: underline;
}
.hc-result__external {
  color: var(--hc-ink-muted);
  margin-inline-start: 6px;
}
.hc-result__trail {
  margin-top: 4px;
  position: relative;
  width: fit-content;
  max-width: 100%;
}
.hc-result__snippet {
  color: var(--hc-ink-muted);
  margin: 8px 0 0;
  overflow-wrap: break-word;
}
.hc-result__snippet em {
  color: var(--hc-ink);
  font-style: normal;
  font-weight: 600;
}

/* No results: a quiet line, the hint and the way home. */
.no-results {
  border-top: 1px solid var(--hc-line);
  padding-top: 32px;
}
.no-results__icon {
  color: var(--hc-ink-muted);
}
.no-results__headline {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin: 16px 0 4px;
}
.no-results__prompt {
  color: var(--hc-ink-muted);
  margin: 0;
}
.no-results__prompt a {
  align-items: center;
  color: var(--hc-ink);
  display: inline-flex;
  min-height: 44px;
}

/* Filters: on phones each group is a hairline row that opens on a click (the collapsible sidebar
   in Community Badges); from 1024px the groups stand open in their column. The chosen filter takes
   the accent edge. */
.search-results-sidebar {
  margin-bottom: 24px;
}
.search-results-sidebar:not(:has(> *)) {
  display: none;
}
.search-results-sidebar .collapsible-sidebar {
  border-bottom: 1px solid var(--hc-line);
}
.search-results-sidebar .sidenav-title {
  font-size: 16px;
}
.search-results-sidebar .collapsible-sidebar:not(.expanded) .multibrand-filter-list {
  display: none;
}
.search-results-sidebar .multibrand-filter-list {
  margin-top: 12px;
}
@media (min-width: 1024px) {
  .search-results-sidebar {
    margin-bottom: 0;
  }
  .search-results-sidebar .collapsible-sidebar {
    border: 0;
    margin-bottom: 32px;
  }
  .search-results-sidebar .collapsible-sidebar:not(.expanded) .multibrand-filter-list {
    display: block;
  }
  .search-results-sidebar .multibrand-filter-list {
    margin-top: 8px;
  }
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6):not(.see-all-filters-item) {
  display: none;
}

.search-results-sidebar .sidenav-item {
  align-items: center;
  border-inline-start: 2px solid transparent;
  border-radius: var(--hc-radius-sm);
  color: var(--hc-ink);
  display: flex;
  font-size: 15px;
  gap: 6px;
  margin: 0 0 2px;
  min-height: 44px;
  padding: 8px 12px;
  text-decoration: none;
}
.search-results-sidebar .sidenav-item:hover {
  background-color: color-mix(in srgb, var(--hc-ink) 5%, var(--hc-canvas));
}
.search-results-sidebar .sidenav-item.current {
  background-color: color-mix(in srgb, var(--hc-ink) 5%, var(--hc-canvas));
  border-inline-start-color: var(--hc-accent);
  border-end-start-radius: 0;
  border-start-start-radius: 0;
  font-weight: 600;
}
.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}
.search-results-sidebar .filter-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-results-sidebar .doc-count {
  color: var(--hc-ink-muted);
  font-weight: 400;
}
.search-results-sidebar .see-all-filters {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  color: var(--hc-ink);
  cursor: pointer;
  font: inherit;
  min-height: 44px;
  padding: 0 12px;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.15em;
}
.search-results-sidebar .see-all-filters:hover {
  text-decoration-color: currentColor;
}
.search-results-sidebar .see-all-filters[aria-hidden=true] {
  display: none;
}

/* A chosen content tag: a tinted chip whose close link is a 44px target. */
.search-results-sidebar .sidenav-tag {
  display: flex;
}
.search-results-sidebar .sidenav-tag .content-tag {
  align-items: center;
  background: color-mix(in srgb, var(--hc-ink) 6%, var(--hc-canvas));
  border-radius: var(--hc-radius-sm);
  display: inline-flex;
  padding-inline-start: 12px;
}
.search-results-sidebar .sidenav-tag .content-tag .label {
  color: var(--hc-ink);
  font-size: 14px;
  font-weight: 500;
}
.search-results-sidebar .sidenav-tag .content-tag a {
  align-items: center;
  color: var(--hc-ink-muted);
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}
.search-results-sidebar .sidenav-tag .content-tag a:hover {
  color: var(--hc-ink);
}

/***** Notifications *****/
/* Notices Zendesk prints on the page (the request bundles show theirs through Copenhagen's flash
   notification bundle): a quiet ink tint with a hairline. Errors and alerts keep a red and an amber
   tint, each text colour at least 4.5:1 on its own background; the icons are masks in the text
   colour. */
.notification {
  background-color: color-mix(in srgb, var(--hc-ink) 4%, var(--hc-canvas));
  border: 1px solid var(--hc-line);
  color: var(--hc-ink);
  display: table;
  font-family: inherit;
  font-size: 14px;
  padding: 12px 16px;
  transition: height 0.2s;
  width: 100%;
}

.notification a {
  color: inherit;
  text-decoration: underline;
}

.notification-inner {
  margin: 0 auto;
  max-width: 1160px;
  padding: 0 16px;
}

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

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

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

.notification-icon::before, .notification-inline.notification-error::before {
  background-color: currentColor;
  content: "";
  display: inline-block;
  height: 14px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23000'%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") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23000'%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") center / contain no-repeat;
  vertical-align: middle;
  width: 14px;
}

/* Error */
.notification-error {
  background-color: #FCEBEA;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  color: #A1261B;
}

.notification-error .notification-icon::before, .notification-inline.notification-error::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23000'%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='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23000'%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='%23000'/%3E%3C/svg%3E");
}

/* Alert / Lock */
.notification-alert {
  background-color: #FDF1DC;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  color: #7A4510;
}

.notification-alert .notification-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' 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='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' 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='%23000'/%3E%3C/svg%3E");
}

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

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

/* Inline notifications */
.notification-inline {
  border-radius: var(--hc-radius-sm);
  line-height: 1.4;
  margin-top: 6px;
  padding: 6px 8px;
  position: relative;
  text-align: start;
  vertical-align: middle;
}
.notification-inline[aria-hidden=true] {
  display: none;
}
.notification-inline.notification-error::before {
  margin-block-start: -2px;
  margin-inline-end: 6px;
}
.notification-inline.notification-error {
  background-color: #FCEBEA;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  color: #A1261B;
}
.notification-inline.notification-large {
  margin-bottom: 24px;
  padding: 12px 16px;
}

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

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

.dropdown-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  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;
}

/* Menus: the canvas with a hairline and a soft ink shadow, rows in ink on a light ink tint. */
.dropdown-menu {
  background: var(--hc-canvas);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-radius-sm);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--hc-ink) 12%, transparent);
  display: none;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  left: 0;
  margin-top: 1px;
  min-width: 170px;
  padding: 8px 0;
  position: absolute;
  text-align: left;
  z-index: 1000;
}
[dir=rtl] .dropdown-menu {
  text-align: right;
}
.dropdown-menu [role=separator] {
  border-bottom: 1px solid var(--hc-line);
  margin: 4px 0;
}
.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
  -webkit-appearance: none;
  background-color: transparent;
  border: 0;
  color: var(--hc-ink);
  cursor: pointer;
  display: block;
  line-height: inherit;
  padding: 7px 40px 7px 20px;
  text-align: start;
  white-space: nowrap;
  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: color-mix(in srgb, var(--hc-ink) 6%, var(--hc-canvas));
  color: var(--hc-ink);
  text-decoration: none;
}
.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 {
  background-color: currentColor;
  content: "";
  display: inline-block;
  height: 12px;
  margin-left: 10px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  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 {
  float: left;
  margin-left: 0;
  margin-right: 10px;
}
.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: var(--hc-ink-muted);
  margin-bottom: 4px;
  margin-top: 32px;
}
.content-tags-add-hint {
  color: var(--hc-ink-muted);
  font-size: 14px;
}

.content-tag-list {
  display: flex;
  flex-wrap: wrap;
  word-break: break-word;
}
.content-tag-list li {
  border-inline-end: 1px solid var(--hc-line);
  margin-bottom: 4px;
  margin-inline-end: 8px;
  padding-inline-end: 8px;
}
.content-tag-list li:last-child {
  border: none;
}

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

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

/***** 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;
}

.service-catalog-hero {
  margin-bottom: 10px;
  height: 320px;
}
.service-catalog-description {
  display: flow-root;
}
.service-catalog-description a {
  color: #171717;
  text-decoration: underline;
}
.service-catalog-description a:visited {
  color: #171717;
}
.service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
  color: #171717;
}
.service-catalog-description img {
  height: auto;
  max-width: 100%;
}
.service-catalog-description p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figure.image {
  display: table;
  margin: 0 auto;
}
.service-catalog-description figure.image > img {
  display: block;
  width: 100%;
}
.service-catalog-description figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.service-catalog-description figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.service-catalog-description figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.service-catalog-description figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.service-catalog-description figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: #f2f2f2;
}
.service-catalog-description ul,
.service-catalog-description ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .service-catalog-description ul,
[dir=rtl] .service-catalog-description ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.service-catalog-description ul > ul,
.service-catalog-description ol > ol,
.service-catalog-description ol > ul,
.service-catalog-description ul > ol,
.service-catalog-description li > ul,
.service-catalog-description li > ol {
  margin: 0;
}
.service-catalog-description ul {
  list-style-type: disc;
}
.service-catalog-description :not(pre) > code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.service-catalog-description pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.service-catalog-description blockquote {
  border-left: 1px solid #ddd;
  color: #4a4a4a;
  font-style: italic;
  padding: 0 15px;
}
.service-catalog-main-content {
  display: flex;
  gap: 32px;
}
.service-catalog-list {
  width: 100%;
}
.service-catalog-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 20px;
}

.is-service-catalog-preview #navbar-container,
.is-service-catalog-preview .navbar-container,
.is-service-catalog-preview .assembly-bar,
.is-service-catalog-preview [data-garden-id="chrome.subnav"] {
  display: none !important;
}

/***** Print *****/
/* An article prints alone (carried over from BCS's internal theme). Every branch of the body but
   the article's is hidden, Zendesk's injected admin bars and widgets included, and so are the
   breadcrumbs, the aside, votes, related lists, comments and the section list. src/print.js zeroes
   the @page margin on article pages so the browser prints no title, date or URL lines; the article
   carries the paper margin itself, repeated on every page. */
@media print {
  body:has(.hc-article) {
    background: #fff;
  }
  body:has(.hc-article) > *:not(:has(.hc-article)) {
    display: none !important;
  }
  body:has(.hc-article) :is(.hc-page-bar, .hc-article__side, [data-action="print-article"], .article-subscribe, .content-tags, .hc-article__votes, .hc-article__share, .related-articles, .recent-articles, .article-comments, .hc-section-articles) {
    display: none !important;
  }
  body:has(.hc-article) .hc-container {
    max-width: none;
    padding: 0;
  }
  body:has(.hc-article) .hc-article {
    display: block;
  }
  body:has(.hc-article) .hc-article__main {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    max-width: none;
    padding: 14mm 16mm;
  }
  body:has(.hc-article) .article-body {
    overflow: visible;
  }
  body:has(.hc-article) .article-body :is(h2, h3, h4) {
    break-after: avoid;
  }
  body:has(.hc-article) .article-body :is(img, figure) {
    break-inside: avoid;
  }
}

/* Topic hint under the request form's topic field (src/request-topics.js, brands with topic data):
   the tinted panel of the help card, with the returns portal button, the article that may already
   answer the question and which photos to add. The photo check's message sits under the field. */
.hc-topic-help {
  background: color-mix(in srgb, var(--hc-ink) 4%, var(--hc-canvas));
  border-radius: var(--hc-radius);
  font-size: 15px;
  margin: 12px 0 24px;
  padding: 16px;
}
.hc-topic-help[hidden],
.hc-topic-help__error[hidden] {
  display: none;
}
.hc-topic-help__text {
  margin: 0;
}
.hc-topic-help__text + .hc-topic-help__text,
.hc-topic-help__portal + .hc-topic-help__text {
  margin-top: 12px;
}
.hc-topic-help__portal {
  margin-top: 12px;
}
.hc-topic-help__photos {
  font-weight: 500;
}
.hc-topic-help__error {
  color: #b42318;
  font-size: 15px;
  font-weight: 500;
  margin: 8px 0 0;
}