@charset "UTF-8";
/* ==================================================================
   Fusion 2026 Theme — COMPLETE style.css
   ------------------------------------------------------------------
   Built 2026-07-26. This is a DROP-IN REPLACEMENT for the whole file:
   select all in Zendesk's style.css and paste this over it.

   WHAT IT IS, EXACTLY
     theme_snapshot/2026_style.css  (your 2026-07-21 revision, 4008 lines)
   + the Inter @import, inserted at the TOP where it is actually valid
   + the 2026-07-26 home page / header / footer block, appended at the end

   ⚠ READ THIS BEFORE PASTING — IT CARRIES TWO CHANGES, NOT ONE
   Your folder holds two stylesheets. `style.css` (3905 lines) does NOT
   contain the 2026-07-21 article-readability work; `2026_style.css`
   (4008 lines) DOES. This file is built on the 4008-line version, so
   pasting it deploys BOTH:
     1. the 2026-07-21 article changes — Roboto stack, h2/h3/h4
        hierarchy, figure captions, borderless tables, wider article
        column, navy #3E5B73 buttons
     2. the 2026-07-26 home page, header and footer refresh
   If the article changes were never published, this is the moment they
   go live. That is probably what you want, but it should not be a
   surprise.

   ⚠ AND IF YOU HAVE EDITED style.css SINCE 2026-07-21
   Those edits are NOT in here and pasting this will discard them. In
   that case use snippets/style_APPEND_to_existing_style.css instead —
   appending is safe no matter what the current file contains.

   NO document_head.hbs CHANGE NEEDED WITH THIS FILE
   Inter is imported on line 4 below. An @import is only valid before
   any rule, which is why the append-only route had to load the font
   from document_head.hbs instead. Using this complete file, you can
   skip that step entirely.
   ================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');
/***** 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: Roboto;
  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: roboto;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}
/***** Base *****/
* {
  box-sizing: border-box;
}
body {
  background-color: rgba(255, 255, 255, 1);
  color: rgba(50, 58, 66, 1);
  font-family: roboto;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  body > main {
    min-height: 65vh;
  }
}
h1, h2, h3, h4, h5, h6 {
  font-family: roboto;
  font-weight: 400;
  margin-top: 0;
}
h1 {
  font-size: 32px;
}
h2 {
  font-size: 22px;
}
h3 {
  font-size: 18px;
  font-weight: 600;
}
h4 {
  font-size: 16px;
}
a {
  color: rgba(103, 152, 192, 1);
  text-decoration: none;
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}
input,
textarea {
  color: #000;
  font-size: 14px;
}
input {
  font-weight: 300;
  max-width: 100%;
  box-sizing: border-box;
  transition: border .12s ease-in-out;
}
input:not([type="checkbox"]) {
  outline: none;
}
input:not([type="checkbox"]):focus {
  border: 1px solid rgba(50, 58, 66, 1);
}
input[disabled] {
  background-color: #ddd;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url(/hc/theming_assets/01HZKYNWB8Q2A7TEF18SM85PMP) no-repeat #fff;
  background-position: right 10px center;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: #555;
  width: 100%;
}
select:focus {
  border: 1px solid rgba(50, 58, 66, 1);
}
select::-ms-expand {
  display: none;
}
textarea {
  border: 1px solid #ddd;
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
textarea:focus {
  border: 1px solid rgba(50, 58, 66, 1);
}
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1160px) {
  .container {
    padding: 0;
    width: 90%;
  }
}
.container-divider {
  border-top: 1px solid #ddd;
  margin-bottom: 20px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.error-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
}
@media (min-width: 1160px) {
  .error-page {
    padding: 0;
    width: 90%;
  }
}
.visibility-hidden, .recent-activity-accessibility-label, .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;
}
/***** Buttons *****/
.button, .section-subscribe button, .article-subscribe button, .community-follow button, .requests-table-toolbar .organization-subscribe button, .subscriptions-subscribe button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .edit-profile-button a {
  background-color: #1155aa;
  border: 1px solid rgba(50, 58, 66, 1);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}
@media (min-width: 768px) {
  .button, .section-subscribe button, .article-subscribe button, .community-follow button, .requests-table-toolbar .organization-subscribe button, .subscriptions-subscribe button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .edit-profile-button a {
    width: auto;
  }
}
.button:hover, .section-subscribe button:hover, .article-subscribe button:hover, .community-follow button:hover, .requests-table-toolbar .organization-subscribe button:hover, .subscriptions-subscribe button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .edit-profile-button a:hover, .button:active, .section-subscribe button:active, .article-subscribe button:active, .community-follow button:active, .requests-table-toolbar .organization-subscribe button:active, .subscriptions-subscribe button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active, .edit-profile-button a:active, .button.button-primary, .section-subscribe button.button-primary, .section-subscribe button[data-selected="true"], .article-subscribe button.button-primary, .article-subscribe button[data-selected="true"], .community-follow button.button-primary, .requests-table-toolbar .organization-subscribe button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected="true"], .subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected="true"], .button-primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-first-link, .button-primary.pagination-last-link, .edit-profile-button a.button-primary {
  background-color: rgba(50, 58, 66, 1);
  color: #fff;
  text-decoration: none;
}
.button.button-primary:hover, .section-subscribe button.button-primary:hover, .section-subscribe button[data-selected="true"]:hover, .article-subscribe button.button-primary:hover, .article-subscribe button[data-selected="true"]:hover, .community-follow button.button-primary:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-selected="true"]:hover, .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected="true"]: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, .edit-profile-button a.button-primary:hover, .button.button-primary:focus, .section-subscribe button.button-primary:focus, .section-subscribe button[data-selected="true"]:focus, .article-subscribe button.button-primary:focus, .article-subscribe button[data-selected="true"]:focus, .community-follow button.button-primary:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button[data-selected="true"]:focus, .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button[data-selected="true"]:focus, .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .edit-profile-button a.button-primary:focus, .button.button-primary:active, .section-subscribe button.button-primary:active, .section-subscribe button[data-selected="true"]:active, .article-subscribe button.button-primary:active, .article-subscribe button[data-selected="true"]:active, .community-follow button.button-primary:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button[data-selected="true"]:active, .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button[data-selected="true"]:active, .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active, .edit-profile-button a.button-primary:active {
  background-color: #060708;
  border-color: #060708;
}
.button[data-disabled], .section-subscribe button[data-disabled], .article-subscribe button[data-disabled], .community-follow button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .subscriptions-subscribe button[data-disabled], .pagination-next-link[data-disabled], .pagination-prev-link[data-disabled], .pagination-first-link[data-disabled], .pagination-last-link[data-disabled], .edit-profile-button a[data-disabled] {
  cursor: default;
}
.button-large, input[type="submit"] {
  cursor: pointer;
  background-color: rgba(50, 58, 66, 1);
  border: 0;
  border-radius: 4px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}
@media (min-width: 768px) {
  .button-large, input[type="submit"] {
    width: auto;
  }
}
.button-large:hover, .button-large:active, .button-large:focus, input[type="submit"]:hover, input[type="submit"]:active, input[type="submit"]:focus {
  background-color: #060708;
}
.button-large[disabled], input[type="submit"][disabled] {
  background-color: #ddd;
}
.button-secondary {
  color: #5e6d7c;
  border: 1px solid #ddd;
  background-color: transparent;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: rgba(50, 58, 66, 1);
  border: 1px solid #ddd;
  background-color: #f7f7f7;
}
/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}
.table th,
.table th a {
  color: #5e6d7c;
  font-size: 13px;
  font-weight: 300;
  text-align: left;
}
[dir="rtl"] .table th, [dir="rtl"]
.table th a {
  text-align: right;
}
.table tr {
  border-bottom: 1px solid #ddd;
  display: block;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .table tr {
    display: table-row;
  }
}
.table td {
  display: block;
}
@media (min-width: 768px) {
  .table td {
    display: table-cell;
  }
}
@media (min-width: 1024px) {
  .table td, .table th {
    padding: 20px 30px;
  }
}
@media (min-width: 768px) {
  .table td, .table th {
    padding: 10px 20px;
    height: 60px;
  }
}
/***** Forms *****/
.form {
  max-width: 650px;
}
.form-field ~ .form-field {
  margin-top: 25px;
}
.form-field label {
  display: block;
  font-size: 13px;
  margin-bottom: 5px;
}
.form-field input {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.form-field input:focus {
  border: 1px solid rgba(50, 58, 66, 1);
}
.form-field input[type="text"] {
  border: 1px solid #ddd;
  border-radius: 4px;
}
.form-field input[type="text"]:focus {
  border: 1px solid rgba(50, 58, 66, 1);
}
.form-field input[type="checkbox"] {
  width: auto;
}
.form-field .nesty-input {
  border-radius: 4px;
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}
.form-field .nesty-input:focus {
  border: 1px solid rgba(50, 58, 66, 1);
  text-decoration: none;
}
.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid rgba(50, 58, 66, 1);
  text-decoration: none;
}
.form-field textarea {
  vertical-align: middle;
}
.form-field input[type="checkbox"] + label {
  margin: 0 0 0 10px;
}
.form-field .optional {
  color: #5e6d7c;
  margin-left: 4px;
}
.form-field p {
  color: #5e6d7c;
  font-size: 12px;
  margin: 5px 0;
}
[data-loading="true"] input,
[data-loading="true"] textarea {
  background: transparent url(/hc/theming_assets/01HZKYNXDJBH6S76E3SXRRT1GN) 99% 50% no-repeat;
  background-size: 16px 16px;
}
.form footer {
  margin-top: 40px;
  padding-top: 30px;
}
.form footer a {
  color: #5e6d7c;
  cursor: pointer;
  margin-right: 15px;
}
.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}
.form .suggestion-list label {
  border-bottom: 1px solid #ddd;
  display: block;
  padding-bottom: 5px;
}
.form .suggestion-list li {
  padding: 10px 0;
}
.form .suggestion-list li a:visited {
  color: #396588;
}
/***** Header *****/
.header {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  position: relative;
  align-items: center;
  display: flex;
  height: 71px;
  justify-content: space-between;
}
@media (min-width: 1160px) {
  .header {
    padding: 0;
    width: 90%;
  }
}
.logo img {
  margin-top:10px;
}
.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .user-nav {
    position: relative;
  }
}
.user-nav[aria-expanded="true"] {
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15), 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  right: 0;
  left: 0;
  top: 71px;
  z-index: 1;
}
.user-nav[aria-expanded="true"] > a {
  display: block;
  margin: 20px;
}
.nav-wrapper a {
  border: 0;
  color: rgba(103, 152, 192, 1);
  display: none;
  font-size: 14px;
  padding: 0 20px 0 0;
  width: auto;
}
@media (min-width: 768px) {
  .nav-wrapper a {
    display: inline-block;
  }
}
[dir="rtl"] .nav-wrapper a {
  padding: 0 0 0 20px;
}
.nav-wrapper a:hover, .nav-wrapper a:focus, .nav-wrapper a:active {
  background-color: transparent;
  color: rgba(103, 152, 192, 1);
  text-decoration: underline;
}
.nav-wrapper a.login {
  display: inline-block;
}
.nav-wrapper .menu-button {
  background: none;
  border: 0;
  color: rgba(103, 152, 192, 1);
  display: inline-block;
  margin-right: 10px;
  padding: 0;
  width: auto;
}
@media (min-width: 768px) {
  .nav-wrapper .menu-button {
    display: none;
  }
}
.nav-wrapper .menu-button .icon-menu {
  vertical-align: middle;
  width: 13px;
  height: 13px;
}
[dir="rtl"] .nav-wrapper .menu-button {
  margin-left: 10px;
  margin-right: 0;
}
.nav-wrapper .menu-button:hover, .nav-wrapper .menu-button:focus, .nav-wrapper .menu-button:active {
  background-color: transparent;
  color: rgba(103, 152, 192, 1);
}
.skip-navigation {
  align-items: center;
  background-color: black;
  color: white;
  display: flex;
  font-size: 14px;
  justify-content: center;
  left: -999px;
  margin: 20px;
  padding: 20px;
  overflow: hidden;
  position: absolute;
  top: auto;
  z-index: -999;
}
.skip-navigation:focus, .skip-navigation:active {
  left: auto;
  overflow: auto;
  text-align: center;
  text-decoration: none;
  top: auto;
  z-index: 999;
}
/***** User info in header *****/
.user-info {
  display: inline-block;
}
.user-info .dropdown-toggle::after {
  display: none;
}
@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}
.user-info > button {
  border: 0;
  color: rgba(103, 152, 192, 1);
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: rgba(103, 152, 192, 1);
  background-color: transparent;
}
.user-info > button::after {
  color: rgba(103, 152, 192, 1);
  padding-right: 15px;
}
[dir="rtl"] .user-info > button::after {
  padding-left: 15px;
  padding-right: 0;
}
#user #user-name {
  display: none;
  font-size: 14px;
}
@media (min-width: 768px) {
  #user #user-name {
    display: inline-block;
  }
}
#user #user-name:hover {
  text-decoration: underline;
}
/***** User avatar *****/
.user-avatar {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}
.avatar {
  display: inline-block;
  position: relative;
}
.avatar img {
  height: 40px;
  width: 40px;
}
.avatar .icon-agent {
  color: rgba(50, 58, 66, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  bottom: -4px;
  background-color: rgba(50, 58, 66, 1);
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}
/***** Footer *****/
.footer {
  border-top: 0px solid #ddd;
  margin-top: 60px;
  padding: 30px 0;
  background-color: #323a42;
}
.footer a {
  color: #fff;
  text-align: center;
}
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  display: block;
  text-align:center;
  justify-content: space-between;

}
@media (min-width: 1160px) {
  .footer-inner {
    padding: 0;
    width: 90%;
  }
}
.footer-language-selector {
  color: #5e6d7c;
  display: inline-block;
  font-weight: 300;
}
/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  color: #5e6d7c;
  display: inline;
  font-weight: 500;
  font-size: 14px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumbs li + li::before {
  content: ">";
  margin: 0 4px;
}
.breadcrumbs li a:visited {
  color: rgba(103, 152, 192, 1);
}
/***** Search field *****/
.search {
  position: relative;
}
.search input[type="search"] {
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  color: #323a42;
  font-weight:400;
  height: 50px;
  padding-left: 15px;
  padding-right: 20px;
  -webkit-appearance: none;
  width: 100%;
  box-shadow: 0 10px 12px rgb(3 54 61 / 10%);
  font-size: 12pt;
}
[dir="rtl"] .search input[type="search"] {
  padding-right: 40px;
  padding-left: 20px;
}
.search input[type="search"]:focus {
    border: none;
    color: #272727;
    font-weight: 600;
}
.search-full input[type="search"] {
  border: 1px solid #fff;
}
.search-icon {
top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    color: #06363C;
    content: "\1F50D\00FE0E";
    font-size: 18px;
    position: absolute;
    left: 15px;
  display:none;
}
[dir="rtl"] .search-icon {
  right: 15px;
  left: auto;
}
.search-container {
  position: relative;
}
/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01HZKYP5ARRXMK84194WW0JXZ6);
  background-position: center;
  background-size: cover;
  height: 350px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}
.hero-inner {
position: relative;
    max-width: 610px;
    padding-top: 8%;
  padding-left: 1%;
}
.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;
    margin: 0;
  }
}
.page-header .section-subscribe {
  flex-shrink: 0;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .page-header .section-subscribe {
    margin-bottom: 0;
  }
}
.page-header h1 {
  flex-grow: 1;
  margin-bottom: 10px;
  font-weight:600;
}
.page-header-description {
  font-weight: 500;
  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 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 30px;
  min-height: 50px;
  padding-bottom: 15px;
}
@media (min-width: 768px) {
  .sub-nav {
    align-items: baseline;
    flex-direction: row;
  }
}
@media (min-width: 768px) {
  .sub-nav input[type="search"] {
    min-width: 300px;
  }
}
.sub-nav input[type="search"]::after {
  font-size: 15px;
}
/***** Blocks *****/
/* Used in Homepage#categories and Community#topics */
.blocks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) {
  .blocks-list {
    margin: 0 -15px;
  }
}
.blocks-item {
border-radius: 5px;
    box-sizing: border-box;
    color: rgba(50, 58, 66, 1);
    display: flex;
    flex: 1 0 300px;
    max-width: 100%;
    text-align: center;
    transition: all 0.3s ease 0s;
    box-shadow: 0 2px 14px rgb(202 202 202 / 50%);
}
@media (min-width: 768px) {
  .blocks-item {
    margin: 0 30px 30px;
  }
}
.blocks-item:hover, .blocks-item:focus, .blocks-item:active {
box-shadow: 0px 15px 20px rgb(50 58 66 / 20%);
    color: #fff;
    transform: translateY(-3px);
}
.blocks-item:hover *, .blocks-item:focus *, .blocks-item:active * {
  color: rgba(50, 58, 66, 1);
  text-decoration: none;
}
.blocks-item-internal {
  background-color: transparent;
  border: 1px solid #ddd;
}
.blocks-item-internal .icon-lock {
  height: 15px;
  width: 15px;
  bottom: 5px;
  position: relative;
}
.blocks-item-internal a {
  color: rgba(50, 58, 66, 1);
}
.blocks-item-link {
  color: rgba(50, 58, 66, 1);
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: right;
  border-radius: inherit;
}
.blocks-item-link:hover, .blocks-item-link:active {
  text-decoration: none;
}
.blocks-item-link:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(50, 58, 66, 1);
  text-decoration: none;
}
.blocks-item-title {
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
  font-family: roboto;
}
.blocks-item-description {
  font-weight: 300;
  margin: 0;
}
.blocks-item-description:not(:empty) {
  margin-top: 10px;
  display:none;
}
/***** Homepage *****/
.section {
  margin-bottom: 40px;
    padding-right: 2%;
}
@media (min-width: 768px) {
  .section {
    margin-bottom: 60px;
  }
}
.home-section h2 {
  margin-bottom: 10px;
  text-align: center;
}
/***** Promoted articles *****/
.promoted-articles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
@media (min-width: 1024px) {
  .promoted-articles {
    flex-direction: row;
  }
}
.promoted-articles-item {
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .promoted-articles-item {
    align-self: flex-end;
    flex: 0 0 auto;
    padding-right: 30px;
    width: 33%;
    /* Three columns on desktop */
  }
  [dir="rtl"] .promoted-articles-item {
    padding: 0 0 0 30px;
  }
}
.promoted-articles-item:nth-child(3n) {
  padding-right: 0;
}
.promoted-articles-item a {
  display: block;
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
  color: rgba(50, 58, 66, 1);
}
.promoted-articles-item .icon-lock {
  vertical-align: baseline;
}
.promoted-articles-item:last-child a {
  border: 0;
}
@media (min-width: 1024px) {
  .promoted-articles-item:last-child a {
    border-bottom: 1px solid #ddd;
  }
}
/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  background-image: url(/hc/theming_assets/01HZKYP5K2V79K5ZZE7CGQKG36);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.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-parent {
  font-size: 16px;
  font-weight: 700;
}
.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  color: rgba(50, 58, 66, 1);
  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;
  font-weight: 300;
}
.recent-activity-item-meta {
  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 {
  color: #5e6d7c;
  display: inline-block;
  font-size: 13px;
  font-weight: 300;
}
.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-comment-icon svg {
  vertical-align: middle;
  color: rgba(50, 58, 66, 1);
  width: 16px;
  height: 16px;
}
.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}
[dir="rtl"] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}
/***** Category pages *****/
.category-container {
  display: flex;
  justify-content: flex-end;
}
.category-content {
  flex: 1;
}
@media (min-width: 1024px) {
  .category-content {
    flex: 0 0 100%;
  }
}
.section-tree {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 2% 0% 0% 0%;
  background-color: none;
}
@media (min-width: 768px) {
  .section-tree {
    flex-direction: row;
    flex: 0 0 25%;
  }
}
.section-tree .section {
  flex: 0 0 25%;
}
@media (min-width: 768px) {
  .section-tree .section {
    flex: 0 0 25%;
    border: none;
    /* Two columns for tablet and desktop. Leaving 5% separation between columns */
  }
}
.section-tree-title {
margin-bottom: 0;
    font-size: 20px;
    letter-spacing: 0;
    font-weight: 600;
    padding-bottom: 4%;
}
.section-tree-title a {
  color: rgba(50, 58, 66, 1);
}
.section-tree .see-all-articles {
display: block;
    color: #6798C0;
    font-weight: 700;
    padding: 15px 0;
    font-size: 12pt;
}
.article-list-item {
font-size: 14px;
    padding: 7px 0;
    margin-left: 0%;
    color: #323a42 !important;
    font-weight: 500;
}
.article-list-item a {
  color: #3E5B73;
}
.icon-star {
  color: #3E5B73;
  font-size: 18px;
}
/***** Section pages *****/
.section-container {
  display: flex;
  justify-content: flex-end;
}
.section-content {
  flex: 1;
}
@media (min-width: 1024px) {
  .section-content {
    flex: 0 0 100%;
  }
}
.section-list {
  margin: 40px 0;
}
.section-list--collapsed .section-list-item:nth-child(1n + 6) {
  display: none;
}
.section-list-item {
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  padding: 15px 0;
}
.section-list-item:first-child {
  border-top: 1px solid #ddd;
}
.section-list-item a {
  align-items: center;
  color: rgba(50, 58, 66, 1);
  display: flex;
  justify-content: space-between;
}
.see-all-sections-trigger {
  cursor: pointer;
  display: block;
  padding: 15px;
  text-align: center;
}
.see-all-sections-trigger[aria-hidden="true"] {
  display: none;
}
/***** Article *****/
.article {
  /*
  * The article grid is defined this way to optimize readability:
  * Sidebar | Content | Free space
  * 17%     | 66%     | 17%
  */
  flex: 1 0 auto;
}
@media (min-width: 1024px) {
  .article {
    flex: 1 0 66%;
    max-width: 66%;
    min-width: 640px;
    padding: 0 30px;
  }
}
.article-container {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .article-container {
    flex-direction: row;
  }
}
.article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .article-header {
    flex-direction: row;
    margin-top: 0;
  }
}
.article-avatar {
  margin-right: 10px;
}
.article-author {
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .article-title {
    flex-basis: 100%;
    /* Take entire row */
  }
}
.article-title .icon-lock {
  position: relative;
  left: -5px;
  vertical-align: baseline;
}
.article [role="button"] {
  flex-shrink: 0;
  /*Avoid collapsing elements in Safari (https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored)*/
  width: 100%;
}
@media (min-width: 768px) {
  .article [role="button"] {
    width: auto;
  }
}
.article-info {
  max-width: 100%;
}
.article-meta {
  display: inline-block;
  vertical-align: middle;
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body ul, .article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir="rtl"] .article-body ul, [dir="rtl"] .article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.article-body ul > ul, .article-body ol > ol, .article-body ol > ul, .article-body ul > ol, .article-body li > ul, .article-body li > ol {
  margin: 0;
}
.article-body ul {
  list-style-type: disc;
}
.article-body a:visited {
  color: #396588;
}
.article-body code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.article-body blockquote {
  border-left: 1px solid #ddd;
  color: #5e6d7c;
  font-style: italic;
  padding: 0 15px;
}
.article-body > p:last-child {
  margin-bottom: 0;
}
.article-content {
  line-height: 1.6;
  margin: 40px 0;
  word-wrap: break-word;
}
.article-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.article-comment-count {
  color: #5e6d7c;
  font-weight: 300;
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: rgba(50, 58, 66, 1);
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  margin-right:40px;
  padding: 0;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 22%;
    height: auto;
  }
}
.article-relatives {
  border-top: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .article-relatives {
    flex-direction: row;
  }
}
.article-relatives > * {
  flex: 1 0 50%;
  min-width: 50%;
  overflow-wrap: break-word;
  margin-right: 0;
}
.article-relatives > *:last-child {
  padding: 0;
}
@media (min-width: 768px) {
  .article-relatives > * {
    padding-right: 20px;
  }
}
.article-votes {
  border-top: 1px solid #ddd;
  padding: 30px 0;
  text-align: center;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-return-to-top {
  border-top: 1px solid #ddd;
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: rgba(50, 58, 66, 1);
  display: block;
  padding: 20px 0;
}
.article-return-to-top a:hover, .article-return-to-top a:focus {
  text-decoration: none;
}
.article-return-to-top-icon {
  transform: rotate(0.5turn);
}
.sidenav-title {
  font-size: 15px;
  position: relative;
  font-weight: 600;
}
.sidenav-item {
  border-radius: 4px;
  color: #323a42;
  display: block;
  font-weight: 600;
  margin-bottom: 10px;
  padding: 10px;
}
.sidenav-item.current-article, .sidenav-item:hover {
  background-color: rgba(50, 58, 66, 1);
  color: #fff;
  text-decoration: none;
}
.recent-articles li,
.related-articles li {
  margin-bottom: 15px;
}
/***** Attachments *****/
/* Styles attachments inside posts, articles and comments */
.attachments .attachment-item {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}
.attachments .attachment-item:last-child {
  margin-bottom: 0;
}
.attachments .attachment-item .attachment-icon {
  color: rgba(50, 58, 66, 1);
  left: 0;
  position: absolute;
  top: 5px;
}
[dir="rtl"] .attachments .attachment-item {
  padding-left: 0;
  padding-right: 20px;
}
[dir="rtl"] .attachments .attachment-item .attachment-icon {
  left: auto;
  right: 0;
}
.upload-dropzone span {
  color: #5e6d7c;
}
/***** Social share links *****/
.share {
  padding: 0;
  white-space: nowrap;
}
.share li, .share a {
  display: inline-block;
}
.share li {
  height: 25px;
  width: 25px;
}
.share a {
  color: #5e6d7c;
}
.share a:hover {
  text-decoration: none;
  color: rgba(50, 58, 66, 1);
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}
/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}
.comment-heading, .recent-articles-title,
.related-articles-title {
  margin-bottom: 5px;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}
.comment-overview {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: #5e6d7c;
  display: inline-block;
  font-weight: 300;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: rgba(50, 58, 66, 1);
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: #5e6d7c;
  font-weight: 300;
  font-size: 13px;
}
[dir="rtl"] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid rgba(50, 58, 66, 1);
  padding: 40px 20px 20px;
}
@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}
.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir="rtl"] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}
.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}
.comment-avatar {
  margin-right: 10px;
}
[dir="rtl"] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.comment-meta {
  flex: 1 0 auto;
}
.comment-labels {
  flex-basis: 100%;
}
@media (min-width: 768px) {
  .comment-labels {
    flex-basis: auto;
  }
}
.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}
.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}
.comment-container {
  width: 100%;
}
.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}
@media (min-width: 768px) {
  [dir="ltr"] .comment-form-controls {
    text-align: right;
  }
}
.comment-form-controls input[type="submit"] {
  margin-top: 15px;
}
@media (min-width: 1024px) {
  .comment-form-controls input[type="submit"] {
    margin-left: 15px;
  }
  [dir="rtl"] .comment-form-controls input[type="submit"] {
    margin-left: 0;
    margin-right: 15px;
  }
}
.comment-form-controls input[type="checkbox"] {
  margin-right: 5px;
}
.comment-form-controls input[type="checkbox"] [dir="rtl"] {
  margin-left: 5px;
}
.comment-ccs {
  display: none;
}
.comment-ccs + textarea {
  margin-top: 10px;
}
.comment-attachments {
  margin-top: 10px;
}
.comment-attachments a {
  color: rgba(50, 58, 66, 1);
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  font-family: roboto;
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body img {
  height: auto;
  max-width: 100%;
}
.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 a:visited {
  color: #396588;
}
.comment-body code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.comment-body blockquote {
  border-left: 1px solid #ddd;
  color: #5e6d7c;
  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: #5e6d7c;
  display: block;
  margin: 3px 0;
}
[dir="rtl"] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}
.vote-up svg {
  transform: scale(1, -1);
}
.vote-up:hover,
.vote-down:hover {
  color: rgba(50, 58, 66, 1);
}
.vote-up, .vote-down {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  color: #5e6d7c;
  cursor: pointer;
  min-height: 35px;
  min-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vote-voted {
  color: rgba(50, 58, 66, 1);
}
.vote-voted:hover {
  color: #060708;
}
/***** 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 {
  background-image: url(/hc/theming_assets/01HZKYP5F282HQKGZ5D95DJCDV);
  margin-bottom: 10px;
}
.community-footer {
  padding-top: 50px;
  text-align: center;
}
.community-footer-title {
  font-size: 16px;
  margin-bottom: 20px;
}
.community-featured-posts .title {
  font-size: 18px;
  font-weight: 600;
}
.community-featured-posts, .community-activity {
  padding-top: 40px;
  width: 100%;
}
.community-header {
  margin-bottom: 30px;
}
.community-header .title {
  margin-bottom: 0;
  font-size: 16px;
}
.post-to-community {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .post-to-community {
    margin: 0;
  }
}
/* Community topics grid */
.topics {
  max-width: none;
  width: 100%;
}
.topics-item .meta-group {
  justify-content: center;
  margin-top: 20px;
}
/* Community topic page */
.topic-header {
  border-bottom: 1px solid #ddd;
  font-size: 13px;
}
@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}
.topic-header .dropdown {
  display: block;
  border-top: 1px solid #ddd;
  padding: 10px 0;
}
@media (min-width: 768px) {
  .topic-header .dropdown {
    border-top: 0;
    display: inline-block;
    margin-right: 20px;
    padding: 0;
  }
}
.no-posts-with-filter {
  margin-top: 20px;
  margin-bottom: 20px;
}
/* Topic, post and user follow button */
.community-follow {
  margin-bottom: 10px;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow {
    margin-bottom: 0;
    width: auto;
  }
}
.community-follow button {
  line-height: 30px;
  padding: 0 10px 0 15px;
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  .community-follow button {
    width: auto;
  }
}
.community-follow button:hover {
  background-color: rgba(50, 58, 66, 1);
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #FFF;
  color: #FFF;
}
.community-follow button[data-selected="true"] {
  background-color: rgba(50, 58, 66, 1);
  color: #FFF;
}
.community-follow button[data-selected="true"]::after {
  border-left: 1px solid #FFF;
  color: #FFF;
}
.community-follow button[data-selected="true"]:hover {
  background-color: #060708;
  border-color: #060708;
}
.community-follow button::after {
  border-left: 1px solid rgba(50, 58, 66, 1);
  content: attr(data-follower-count);
  color: rgba(50, 58, 66, 1);
  display: inline-block;
  font-family: roboto;
  margin-left: 15px;
  padding-left: 10px;
  position: absolute;
  right: 10px;
}
@media (min-width: 768px) {
  .community-follow button::after {
    position: static;
  }
}
[dir="rtl"] .community-follow button::after {
  border-left: 0;
  border-right: 1px solid rgba(50, 58, 66, 1);
  margin: 0 10px 0 0;
  padding: 0 10px 0 0;
}
/***** Striped list *****/
/* Used in community posts list and requests list */
.striped-list {
  padding: 0;
}
.striped-list-item {
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .striped-list-item {
    align-items: center;
    flex-direction: row;
  }
}
.striped-list-info {
  flex: 2;
}
.striped-list-title {
  color: rgba(103, 152, 192, 1);
  margin-bottom: 10px;
  margin-right: 5px;
  font-weight:600;
}
.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}
.striped-list-title:visited {
  color: #396588;
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: #5e6d7c;
  font-weight: 300;
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}
.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}
@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}
.striped-list-count-item:last-child::after {
  display: none;
}
.striped-list-number {
  font-weight: 300;
  text-align: center;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: rgba(50, 58, 66, 1);
    display: block;
    font-weight: 400;
  }
}
/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #038153;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-right: 2px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
  display: inline-block;
}
.status-label:hover, .status-label:active, .status-label:focus {
  text-decoration: none;
}
.status-label-pinned, .status-label-featured, .status-label-official {
  background-color: rgba(50, 58, 66, 1);
}
.status-label-official {
  border-radius: 0;
  margin-right: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .status-label-official {
    border-radius: 0 0 4px 4px;
    right: 30px;
    width: auto;
  }
}
[dir="rtl"] .status-label-official {
  left: 30px;
  right: auto;
}
.status-label-not-planned, .status-label-closed {
  background-color: #e9ebed;
  color: #5e6d7c;
}
.status-label-pending {
  background-color: #1f73b7;
  text-align: center;
}
.status-label-open {
  background-color: #c72a1c;
}
.status-label-solved {
  background-color: #68737d;
}
.status-label-new {
  background-color: #ffb648;
  color: #703b15;
}
.status-label-hold {
  background-color: #000;
}
.status-label-open, .status-label-closed, .status-label-solved, .status-label-new, .status-label-hold, .status-label-answered {
  text-transform: lowercase;
}
/***** 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: roboto;
  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 img {
  height: auto;
  max-width: 100%;
}
.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 a:visited {
  color: #396588;
}
.post-body code {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.post-body pre {
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
}
.post-body blockquote {
  border-left: 1px solid #ddd;
  color: #5e6d7c;
  font-style: italic;
  padding: 0 15px;
}
.post-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.post-comment-count {
  color: #5e6d7c;
  font-weight: 300;
}
.post-comment-count:hover {
  text-decoration: none;
}
.post-comment-count .icon-comments {
  color: rgba(50, 58, 66, 1);
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 5px;
  vertical-align: middle;
}
.post-sidebar {
  border-top: 1px solid #ddd;
  flex: 1;
  padding: 30px 0;
  text-align: center;
}
@media (min-width: 1024px) {
  .post-sidebar {
    border: 0;
    flex: 1 0 30%;
    padding: 0 0 0 50px;
    text-align: initial;
  }
  [dir="rtl"] .post-sidebar {
    padding: 0 50px 0 0;
  }
}
.post-sidebar-title {
  font-size: 18px;
  font-weight: 600;
}
.post-comments {
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .post-comments {
    margin-bottom: 0;
  }
}
/* Navigation element that collapses on mobile */
.collapsible-nav {
  flex-direction: column;
  font-size: 14px;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav {
    flex-direction: row;
  }
}
.collapsible-nav-border {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}
@media (min-width: 768px) {
  .collapsible-nav-border {
    border-top: 0;
  }
}
.collapsible-nav-toggle {
  top: calc(45px / 2);
  transform: translateY(-50%);
  position: absolute;
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 768px) {
  .collapsible-nav-toggle {
    display: none;
  }
}
[dir="rtl"] .collapsible-nav-toggle {
  left: 0;
  right: auto;
}
.collapsible-nav-toggle-icon {
  display: none;
}
.collapsible-nav-toggle[aria-expanded="false"] .chevron-icon {
  display: inline-block;
}
.collapsible-nav-toggle[aria-expanded="true"] .x-icon {
  display: inline-block;
}
.collapsible-nav-toggle:focus {
  outline: none;
  border: 1px solid rgba(50, 58, 66, 1);
}
.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: rgba(50, 58, 66, 1);
  line-height: 45px;
  order: 1;
}
@media (min-width: 768px) {
  .collapsible-nav-list li {
    line-height: normal;
    margin-right: 30px;
  }
  [dir="rtl"] .collapsible-nav-list li {
    margin-left: 30px;
    margin-right: 0;
  }
  .collapsible-nav-list li a {
    text-decoration: none;
    padding: 15px 0;
  }
}
.collapsible-nav-list li a {
  color: rgba(50, 58, 66, 1);
  display: block;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid #ddd;
  }
  .collapsible-nav-list li:hover a:not([aria-current="page"]) {
    padding: 15px 0 11px 0;
    text-decoration: none;
  }
}
.collapsible-nav-list li:not([aria-selected="true"]),
.collapsible-nav-list li:not(.current) {
  display: none;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:not([aria-selected="true"]),
  .collapsible-nav-list li:not(.current) {
    display: block;
  }
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected="true"] {
    padding: 15px 0 11px 0;
  }
}
.collapsible-nav-list li[aria-selected="true"],
.collapsible-nav-list li.current {
  order: 0;
  position: relative;
}
@media (min-width: 768px) {
  .collapsible-nav-list li[aria-selected="true"],
  .collapsible-nav-list li.current {
    border-bottom: 4px solid rgba(50, 58, 66, 1);
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected="true"] a,
.collapsible-nav-list li.current a {
  color: rgba(50, 58, 66, 1);
}
.collapsible-nav[aria-expanded="true"] li:not([aria-selected="true"]),
.collapsible-nav[aria-expanded="true"] li:not(.current) {
  display: block;
}
/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}
@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 6%;
    background-color: #f7f7f7;
  }
}
.collapsible-sidebar-title {
  margin-top: 0;
}
.collapsible-sidebar-toggle {
  position: absolute;
  top: calc(45px / 2);
  transform: translateY(-50%);
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-toggle {
    display: none;
  }
}
[dir="rtl"] .collapsible-sidebar-toggle {
  left: 0;
  right: auto;
}
.collapsible-sidebar-toggle-icon {
  display: none;
}
.collapsible-sidebar-toggle[aria-expanded="false"] .chevron-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle[aria-expanded="true"] .x-icon {
  display: inline-block;
}
.collapsible-sidebar-toggle:focus {
  outline: none;
  border: 1px solid rgba(50, 58, 66, 1);
}
.collapsible-sidebar-body {
  display: none;
}
@media (min-width: 1024px) {
  .collapsible-sidebar-body {
    display: block;
  }
}
.collapsible-sidebar[aria-expanded="true"] {
  max-height: none;
}
.collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-body {
  display: block;
}
/***** My activities *****/
.my-activities-nav {
  background-color: #f2f2f2;
  margin-bottom: 20px;
}
.my-activities-sub-nav {
  margin-bottom: 30px;
}
.my-activities-table .striped-list-title {
  /* My activities tables */
  display: block;
  margin-bottom: 10px;
  max-width: 350px;
  white-space: normal;
}
@media (min-width: 1024px) {
  .my-activities-table .striped-list-title {
    margin-bottom: 0;
    max-width: 500px;
    min-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.my-activities-table thead {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table thead {
    display: table-header-group;
  }
}
.my-activities-table th:first-child,
.my-activities-table td:first-child {
  padding-left: 0;
}
@media (min-width: 1024px) {
  .my-activities-table th:first-child,
  .my-activities-table td:first-child {
    width: 500px;
  }
}
.my-activities-table th:last-child,
.my-activities-table td:last-child {
  padding-right: 0;
}
.my-activities-table td:not(:first-child) {
  display: none;
}
@media (min-width: 768px) {
  .my-activities-table td:not(:first-child) {
    display: table-cell;
  }
}
/* Requests table */
.requests-search {
  width: 100%;
}
.requests-table-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .requests-table-toolbar {
    flex-direction: row;
  }
}
.requests-table-toolbar .search {
  flex: 1;
  width: 100%;
}
.requests-table-toolbar .request-table-filter {
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-table-filter {
    width: auto;
  }
}
.requests-table-toolbar .request-filter {
  display: block;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter {
    margin: 0 0 0 30px;
  }
  [dir="rtl"] .requests-table-toolbar .request-filter {
    margin: 0 30px 0 0;
  }
}
.requests-table-toolbar .request-filter-label {
  font-size: 13px;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .requests-table-toolbar .request-filter-label {
    margin-top: 0;
  }
}
.requests-table-toolbar select {
  max-height: 40px;
  margin-bottom: 30px;
  width: 100%;
}
@media (min-width: 768px) {
  .requests-table-toolbar select {
    margin-bottom: 0;
    max-width: 300px;
    width: auto;
  }
}
@media (min-width: 768px) {
  .requests-table-toolbar .organization-subscribe {
    margin-left: 10px;
  }
  [dir="rtl"] .requests-table-toolbar .organization-subscribe {
    margin: 0 10px 0 0;
  }
}
.requests-table-toolbar .organization-subscribe button {
  line-height: 40px;
  max-height: 40px;
  padding: 0 20px;
}
.requests-table-toolbar + .requests-search-info {
  margin-top: 15px;
}
.requests-table-toolbar + .requests-search-info.meta-data::after {
  content: "";
  margin: 0;
}
.requests-table-toolbar + .requests-search-info + .requests {
  margin-top: 20px;
}
.requests-table-toolbar + .requests {
  margin-top: 40px;
}
.requests .requests-table-meta {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-meta {
    display: none;
  }
}
.requests .requests-table thead {
  display: none;
}
@media (min-width: 768px) {
  .requests .requests-table thead {
    display: table-header-group;
  }
}
.requests .requests-table-info {
  display: block;
}
@media (min-width: 768px) {
  .requests .requests-table-info {
    display: table-cell;
    vertical-align: middle;
    width: auto;
  }
}
.requests .requests-table .requests-link {
  position: relative;
}
.requests .requests-table .requests-sort-symbol {
  position: absolute;
  left: calc(100% + 3px);
  bottom: 0;
  font-size: 10px;
}
/* Following table */
@media (min-width: 768px) {
  .subscriptions-subscribe button {
    width: auto;
  }
}
.subscriptions-table td:last-child {
  display: block;
}
@media (min-width: 768px) {
  .subscriptions-table td:last-child {
    display: table-cell;
  }
}
.subscriptions-table td:first-child {
  display: flex;
  align-items: center;
}
.subscriptions-table .user-avatar {
  margin-right: 10px;
}
.subscriptions .striped-list-title {
  display: inline-block;
  vertical-align: middle;
}
/* Contributions table */
.contributions-table td:last-child {
  color: #5e6d7c;
  font-size: 13px;
  font-weight: 300;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}
.no-activities {
  color: #5e6d7c;
}
/***** Request *****/
.request-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .request-container {
    align-items: flex-start;
    flex-direction: row;
  }
}
.request-container .comment-container {
  min-width: 0;
}
.request-breadcrumbs {
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .request-breadcrumbs {
    margin-bottom: 60px;
  }
}
.request-main {
  flex: 1 0 auto;
  order: 1;
}
.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}
.request-main .comment-fields.shown {
  display: block;
}
.request-main .request-submit-comment.shown {
  display: inline;
}
@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    order: 0;
    min-width: 0;
  }
}
.request-main .comment-form-controls {
  display: block;
}
.request-main .comment-ccs {
  display: block;
}
.request-main .comment-show-container {
  border-radius: 2px;
  border: 1px solid #ddd;
  color: #5e6d7c;
  text-align: inherit;
  padding: 8px 25px;
  width: 100%;
}
.request-main .comment-show-container.hidden {
  display: none;
}
.request-main .form-field.comment-ccs > ul {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .form-field.comment-ccs > ul[data-hc-focus="true"] {
  border: 1px solid rgba(50, 58, 66, 1);
}
.request-main .form-field.comment-ccs > input[type="text"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.request-main .comment-ccs + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}
.request-main .comment-ccs + textarea:focus {
  border-top: 1px solid rgba(50, 58, 66, 1);
}
.request-main input#mark_as_solved {
  display: none;
}
.request-title {
  width: 100%;
}
@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}
.request-sidebar {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  order: 0;
}
@media (min-width: 1024px) {
  .request-sidebar {
    background-color: #f7f7f7;
    border: 0;
    font-size: 13px;
    flex: 0 0 auto;
    padding: 0 20px;
    width: 30%;
  }
}
.request-sidebar h2 {
  font-size: 15px;
  font-weight: 600;
  position: relative;
}
@media (min-width: 1024px) {
  .request-sidebar h2 {
    display: none;
  }
}
.request-details {
  border-bottom: 1px solid #ddd;
  font-size: 0;
  margin: 0;
  padding-bottom: 20px;
}
.request-details:last-child {
  border: 0;
}
.request-details dt, .request-details dd {
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  margin: 20px 0 0 0;
}
.request-details dd {
  padding: 0 10px;
  width: 60%;
}
.request-details dd::after {
  content: "\A";
  white-space: pre;
}
.request-details dt {
  color: #5e6d7c;
  font-weight: 300;
  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-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 * {
  display: inline;
}
.meta-data {
  color: #5e6d7c;
  font-size: 13px;
  font-weight: 300;
}
.meta-data:not(:last-child)::after {
  content: "\00B7";
  margin: 0 5px;
}
/* User Profiles */
.profile-header {
  padding: 30px 0;
  background-color: #f7f7f7;
}
.profile-header .container {
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .profile-header .container {
    flex-wrap: nowrap;
  }
}
.profile-header .profile-info {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}
.profile-avatar {
  position: relative;
  line-height: 0;
  align-self: center;
  margin-right: 10px;
}
[dir="rtl"] .profile-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.profile-avatar .user-avatar {
  width: 65px;
  height: 65px;
}
.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;
}
.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;
  }
}
.edit-profile-button a {
  background-color: rgba(50, 58, 66, 1);
  border: 0;
  color: rgba(50, 58, 66, 1);
  line-height: normal;
  padding: 8px 20px;
  outline-color: rgba(50, 58, 66, 1);
}
.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: #5e6d7c;
  font-weight: 300;
  flex: 0 0 100px;
  margin-right: 10px;
}
[dir="rtl"] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}
.profile-stats-activity {
  border-top: solid 1px #ddd;
  margin-top: 15px;
}
@media (min-width: 768px) {
  .profile-stats-activity {
    border-top: 0;
    flex-direction: row;
  }
}
@media (min-width: 768px) {
  .profile-stats-activity .stat {
    flex-direction: column;
  }
}
.profile-stats-activity .stat:first-child {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .profile-stats-activity .stat:first-child {
    margin-top: 0;
  }
}
@media (min-width: 768px) {
  .profile-stats-activity .stat:not(:last-child) {
    margin-right: 40px;
  }
  [dir="rtl"] .profile-stats-activity .stat:not(:last-child) {
    margin-left: 40px;
    margin-right: 0;
  }
}
@media (min-width: 768px) {
  .profile-stats-activity .stat-label {
    flex: 0 1 auto;
  }
}
.profile-stats-counters {
  border-bottom: solid 1px #ddd;
}
@media (min-width: 768px) {
  .profile-stats-counters {
    flex: 0 0 200px;
    border-bottom: 0;
    margin-left: 40px;
  }
  [dir="rtl"] .profile-stats-counters {
    margin-left: 0;
    margin-right: 40px;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters {
    flex: 0 0 270px;
    margin-left: 60px;
  }
  [dir="rtl"] .profile-stats-counters {
    margin-right: 60px;
    margin-left: 0;
  }
}
@media (min-width: 768px) {
  .profile-stats-counters .stat {
    flex-direction: column;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters .stat {
    flex-direction: row;
  }
}
@media (min-width: 768px) {
  .profile-stats-counters .stat:not(:last-child) {
    margin-bottom: 15px;
  }
}
@media (min-width: 768px) {
  .profile-stats-counters .stat-label {
    flex: 0 1 auto;
  }
}
@media (min-width: 1024px) {
  .profile-stats-counters .stat-label {
    flex: 0 0 100px;
  }
}
.profile-private-badge {
  flex-basis: 100%;
  border: solid 1px rgba(50, 58, 66, 1);
  border-radius: 4px;
  color: rgba(50, 58, 66, 1);
  padding: 5px 20px;
  font-size: 12px;
  text-align: center;
}
.profile-private-badge .profile-private-icon {
  margin-left: 5px;
  line-height: 15px;
}
@media (min-width: 768px) {
  .profile-private-badge {
    flex-basis: auto;
  }
}
.profile-nav {
  background-color: #f2f2f2;
  margin-bottom: 37px;
}
.profile-section {
  width: 100%;
}
@media (min-width: 1024px) {
  .profile-section {
    width: calc(100% - 330px);
  }
}
.profile-section-header {
  display: flex;
  flex-wrap: wrap;
}
.profile-section-title {
  flex-basis: 100%;
  margin-bottom: 0;
}
.profile-section-description {
  flex-basis: 100%;
  padding: 10px 0;
  color: #5e6d7c;
  font-weight: 300;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .profile-section-description {
    flex: 1 0 50%;
    padding-bottom: 0;
  }
}
.profile-section-sorter {
  flex-basis: 100%;
  border-top: solid 1px #eee;
  font-size: 13px;
}
.profile-section-sorter .dropdown-toggle {
  padding: 10px 0;
  width: 100%;
}
.profile-section-sorter .dropdown-toggle::after {
  position: absolute;
  right: 0;
}
[dir="rtl"] .profile-section-sorter .dropdown-toggle::after {
  left: 0;
  right: initial;
}
@media (min-width: 768px) {
  .profile-section-sorter .dropdown-toggle::after {
    position: relative;
  }
}
@media (min-width: 768px) {
  .profile-section-sorter {
    flex: 0 1 auto;
    padding-top: 0;
    border-top: 0;
    margin-left: 20px;
  }
  [dir="rtl"] .profile-section-sorter {
    margin-left: 0;
    margin-right: 20px;
  }
}
.profile-contribution {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  padding: 20px 0;
  position: relative;
}
.profile-contribution-header {
  margin-bottom: 5px;
}
.profile-contribution-title {
  margin: 0 0 5px 0;
  display: inline;
  line-height: 21px;
  font-size: 15px;
  vertical-align: middle;
}
.profile-contribution-body {
  margin: 10px 0;
}
.profile-contribution-list > .profile-contribution {
  border-top: 1px solid #eee;
}
@media (min-width: 768px) {
  .profile-contribution-list > .profile-contribution {
    padding-left: 30px;
  }
  [dir="rtl"] .profile-contribution-list > .profile-contribution {
    padding-right: 30px;
    padding-left: 0;
  }
}
.profile-contribution-list > .profile-contribution:last-child {
  border-bottom: 1px solid #eee;
}
.profile-contribution-icon {
  left: 0;
  position: absolute;
  color: #ccc;
  line-height: 25px;
}
[dir="rtl"] .profile-contribution-icon {
  right: 0;
}
.profile-contribution-icon svg {
  vertical-align: middle;
}
.profile-contribution-list .profile-contribution-header {
  margin-left: 30px;
}
[dir="rtl"] .profile-contribution-list .profile-contribution-header {
  padding-right: 30px;
  padding-left: 0;
}
@media (min-width: 768px) {
  .profile-contribution-list .profile-contribution-header {
    margin-left: 0;
  }
  [dir="rtl"] .profile-contribution-list .profile-contribution-header {
    padding-right: 0;
  }
}
.profile-comments .profile-contribution-breadcrumbs {
  margin-left: 30px;
}
[dir="rtl"] .profile-comments .profile-contribution-breadcrumbs {
  padding-right: 30px;
  padding-left: 0;
}
@media (min-width: 768px) {
  .profile-comments .profile-contribution-breadcrumbs {
    margin-left: 0;
  }
  [dir="rtl"] .profile-comments .profile-contribution-breadcrumbs {
    padding-right: 0;
  }
}
.profile-section .no-activity,
.profile-section .private-activity {
  display: block;
  margin-top: 40px;
  color: #999;
}
.private-activity-icon {
  margin-right: 10px;
}
[dir="rtl"] .private-activity-icon {
  margin-right: 0;
  margin-left: 10px;
}
.profile-activity-list {
  margin-top: 25px;
}
.profile-activity {
  position: relative;
  padding-bottom: 30px;
}
@media (min-width: 768px) {
  .profile-activity {
    padding-left: 20px;
  }
  [dir="rtl"] .profile-activity {
    padding-right: 20px;
    padding-left: 0;
  }
}
@media (min-width: 768px) {
  .profile-activity:not(:last-child) {
    border-left: 1px solid #ddd;
  }
  [dir="rtl"] .profile-activity:not(:last-child) {
    border-left: 0;
    border-right: 1px solid #ddd;
  }
}
.profile-activity-header {
  display: flex;
  align-items: center;
  margin-left: 35px;
}
[dir="rtl"] .profile-activity-header {
  margin-left: 0;
  margin-right: 35px;
}
@media (min-width: 768px) {
  .profile-activity-header {
    margin-left: 0;
  }
  [dir="rtl"] .profile-activity-header {
    margin-right: 0;
  }
}
.profile-activity-header .user-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  min-width: 40px;
  align-self: flex-start;
}
[dir="rtl"] .profile-activity-header .user-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.profile-activity-description {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  margin: 0;
  min-width: 0;
  width: 100%;
}
.profile-activity-description span:first-child {
  font-weight: 600;
  display: inline;
}
.profile-activity-contribution {
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #f7f7f7;
}
@media (min-width: 768px) {
  .profile-activity-contribution {
    margin-top: 0;
    margin-left: 50px;
  }
  [dir="rtl"] .profile-activity-contribution {
    margin-left: 0;
    margin-right: 50px;
  }
}
.profile-activity-icon {
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 1);
  background-position: 50% 50%;
  text-align: center;
  color: #ccc;
}
[dir="rtl"] .profile-activity-icon {
  right: 0;
}
@media (min-width: 768px) {
  .profile-activity-icon {
    left: -14px;
  }
  [dir="rtl"] .profile-activity-icon {
    right: -14px;
  }
}
.profile-activity-icon svg {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  margin: auto;
}
/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}
.search-results-column {
  flex: 1;
}
@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}
.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: #e9ebed;
  color: inherit;
  text-decoration: none;
}
.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}
.search-results-sidebar .collapsible-sidebar {
  margin-bottom: 30px;
}
.search-results-sidebar .collapsible-sidebar[aria-expanded="false"] .multibrand-filter-list {
  display: none;
}
@media (min-width: 1024px) {
  .search-results-sidebar .collapsible-sidebar[aria-expanded="false"] .multibrand-filter-list {
    display: block;
  }
}
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n + 6) {
  display: none;
}
.search-results-sidebar .multibrand-filter-list .doc-count {
  color: #666;
}
.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: rgba(103, 152, 192, 1);
}
.search-results-sidebar .see-all-filters[aria-hidden="true"] {
  display: none;
}
.search-results-sidebar .see-all-filters:hover {
  text-decoration: underline;
}
.search-results-sidebar .see-all-filters::after {
  content: ' \2304';
  font-weight: bold;
}
.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}
.search-results-list {
  margin-bottom: 25px;
}
.search-results-list > li {
  padding: 20px 0;
}
.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}
.search-results-list > li h2 {
  margin-bottom: 0;
}
.search-results .meta-group {
  display: block;
  align-items: center;
  clear: both;
  color: #666;
}
@media (min-width: 1024px) {
  .search-results .meta-group {
    display: flex;
  }
}
.search-results .meta-group > li {
  display: block;
}
@media (min-width: 1024px) {
  .search-results .meta-group > li {
    display: inline;
  }
}
@media (min-width: 1024px) {
  .search-results .meta-group li:first-child {
    flex: 1;
  }
}
.search-results .meta-group .meta-data {
  color: inherit;
}
[dir="ltr"] .search-results .meta-group .meta-data:not(:last-child) {
  margin-right: 20px;
}
[dir="rtl"] .search-results .meta-group .meta-data:not(:last-child) {
  margin-left: 20px;
}
.search-results .meta-group .meta-data::after {
  content: none;
}
.search-results-description {
  margin-top: 10px;
  word-break: break-word;
}
.search-result-title {
  font-size: 16px;
  display: inline-block;
}
[dir="ltr"] .search-result-icons {
  float: right;
}
[dir="rtl"] .search-result-icons {
  float: left;
}
.search-result-votes, .search-result-meta-count {
  color: #5e6d7c;
  display: inline-block;
  font-size: 13px;
  font-weight: 300;
  padding: 4px 5px;
  position: relative;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: rgba(50, 58, 66, 1);
  vertical-align: middle;
  width: 13px;
  height: 13px;
}
[dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count {
  margin-left: 5px;
}
[dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before {
  margin-right: 3px;
}
[dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count {
  margin-right: 5px;
}
[dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before {
  margin-left: 3px;
}
.search-result .meta-group {
  align-items: center;
}
.search-result-breadcrumbs {
  margin: 0;
}
@media (min-width: 1024px) {
  .search-result-breadcrumbs {
    display: table-row;
  }
}
@media (min-width: 1024px) {
  .search-result-breadcrumbs li {
    display: table-cell;
  }
}
.search-result-breadcrumbs li, .search-result-breadcrumbs li a, .search-result-breadcrumbs li a:visited {
  color: inherit;
}
/* By default use bold instead of italic to highlight */
.search-results-description em {
  font-style: normal;
  font-weight: bold;
}
/* Add a yellow background for Chinese */
html[lang|="zh"] .search-results-description em {
  font-style: normal;
  background: yellow;
}
/***** Notifications *****/
.notification {
  border: 1px solid;
  display: table;
  font-family: roboto;
  font-size: 12px;
  padding: 13px 15px;
  transition: height .2s;
  width: 100%;
  color: #555;
}
.notification a {
  color: #158ec2;
}
.notification-inner {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 980px;
}
.notification-icon, .notification-text, .notification-dismiss {
  display: table-cell;
  vertical-align: middle;
}
.notification-text {
  padding: 0 15px;
  width: 100%;
}
.notification + .notification {
  margin-bottom: -1px;
  position: relative;
  top: -1px;
}
/* Error */
.notification-error {
  background: #ffeded;
  border-color: #f7cbcb;
}
.notification-error .notification-icon::before, .notification-error .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23555555'/%3E%3C/svg%3E");
}
/* Notice */
.notification-notice {
  background: #dbf3ff;
  border-color: #b5e0f5;
}
.notification-notice .notification-icon::before, .notification-notice .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
}
/* Alert / Lock */
.notification-alert {
  color: #ad5e18;
  background: #fff8ed;
  border-color: #fcdba9;
}
.notification-alert .notification-icon::before, .notification-alert .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ad5e18' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 00-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23ad5e18'/%3E%3C/svg%3E");
}
.notification-icon::before, .notification-inline.notification-error::before {
  background-size: cover;
  content: "";
  display: inline-block;
  height: 14px;
  width: 14px;
  vertical-align: middle;
}
/* Dismiss button */
.notification-dismiss, a.notification-dismiss {
  color: #555;
  cursor: pointer;
  opacity: .6;
  transition: opacity 100ms ease;
  text-decoration: none !important;
}
.notification-dismiss:hover {
  opacity: 1;
}
/* Inline notifications */
.notification-inline {
  border-radius: 4px;
  line-height: 14px;
  margin-top: 5px;
  padding: 5px;
  position: relative;
  text-align: left;
  vertical-align: middle;
}
[dir="rtl"] .notification-inline {
  text-align: right;
}
.notification-inline[aria-hidden="true"] {
  display: none;
}
.notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E");
  margin: -2px 5px 0 0;
}
[dir="rtl"] .notification-inline.notification-error::before {
  margin: 0 0 0 5px;
}
.notification-inline.notification-error {
  background-color: #fff0f1;
  border: 1px solid #e35b66;
  color: #cc3340;
}
.notification-inline.notification-large {
  padding: 13px 15px;
  margin-bottom: 25px;
}
.notification-left-aligned {
  text-align: left;
  padding-left: 0;
}
html[dir="rtl"] .notification-left-aligned {
  text-align: right;
  padding-left: auto;
  padding-right: 0;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-toggle {
  cursor: pointer;
  background: none;
  border: 0;
  display: inline-block;
  padding: 0;
  text-align: initial;
  vertical-align: middle;
}
.dropdown-toggle:hover {
  text-decoration: none;
}
.dropdown-toggle > * {
  display: inline-block;
}
.dropdown-menu {
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  display: none;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  left: 0;
  margin-top: 1px;
  min-width: 170px;
  padding: 10px 0;
  position: absolute;
  text-align: left;
  z-index: 1000;
}
[dir="rtl"] .dropdown-menu {
  text-align: right;
}
.dropdown-menu[aria-expanded="true"] {
  display: block;
}
.dropdown-menu [role="separator"] {
  border-bottom: 1px solid #d8d8d8;
  color: #969696;
  display: block;
  font-weight: normal;
  font-size: 11px;
  padding: 5px 0;
  margin: 5px 20px 10px 20px;
}
.dropdown-menu [role="menuitem"] {
  color: #333;
  cursor: pointer;
  display: block;
  padding: 7px 40px 7px 20px;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  text-align: start;
  line-height: inherit;
  width: 100%;
}
[dir="rtl"] .dropdown-menu [role="menuitem"] {
  padding: 7px 20px 7px 40px;
}
.dropdown-menu [role="menuitem"]:hover, .dropdown-menu [role="menuitem"]:focus {
  background: #f3f3f3;
  text-decoration: none;
  color: #333;
}
.dropdown-menu [role="menuitem"][aria-selected="true"] {
  cursor: default;
}
.dropdown-menu [role="menuitem"][aria-selected="true"]::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E");
  display: inline-block;
  height: 12px;
  margin-left: 10px;
  width: 12px;
}
[dir="rtl"] .dropdown-menu [role="menuitem"][aria-selected="true"]::after {
  margin-left: 0;
  margin-right: 10px;
  float: left;
}
.dropdown-menu [role="menuitem"][hidden], .dropdown-menu [role="menuitem"][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;
}
.iconauto {
  max-width: 75px;
margin: 0 auto 0 auto;
}
.article-author {
  display:none;
}
.article-subscribe {
  display:none;
}
.centered-element {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* legacy http Roboto import removed 2026-07-21 (was mixed-content blocked) */
/***** Custom CSS *****/
.col_half, .col_third, .col_twothird, .col_fourth, .col_three_fourth, .col_fifth {
    position: relative;
    display: inline;
    display: inline-block;
    float: left;
    margin-right: 2%;
    margin-bottom: 20px;
}
.col-md-6 a {
color:#323a42;
}
.demo-problem, .demo-solution {
  font-size: 3em;
}
.demo-solution--flexbox {
  display: flex;
  align-items: center;
  margin:auto;
  padding: 4%;
}
.demo-solution--flexbox:hover, .demo-solution--flexbox:focus, .demo-solution--flexbox:active {
    transform: translateY(-3px);
  transition: all 0.3s ease 0s;
}
.row {
  display:flex;
  margin-bottom: 35px;
}
.col-md-4 a {
color:#323a42;
}
.herogettingstarted {
background-size: cover;
    color: #ffffff;
    padding: 2em;
    height: 314px;
    border-radius: 5px;
    box-shadow: 0 2px 14px rgb(202 202 202 / 50%);
    margin-bottom: 50px;
}
.heroacademy {
background-size: cover;
  background-color: #fff;
    color: #ffffff;
    padding: 2em;
    height: 217px;
    border-radius: 5px;
    box-shadow: 0 2px 14px rgb(202 202 202 / 50%);
  margin-left: 15px;
}
.heroproductupdates {
background-size: cover;
    background-color: #fff;
    color: #ffffff;
    padding: 2em;
    height: 217px;
    border-radius: 5px;
    box-shadow: 0 2px 14px rgb(202 202 202 / 50%);
  margin-left: 15px;
}
.orangebutton {
  background-color: #ED6A5A;
    border: none;
    color: #fff;
    font-family: 'roboto';
    font-weight: 500;
    padding: 10px 25px 10px 25px;
    border-radius: 5px;
}
.orangebutton:hover {
  background-color: #323A42;
}
.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


/* ==================================================================
   eSUB theme overrides — 2026-07-21 (article readability)
   Appended intentionally so it wins the cascade; safe to lift out.
   ================================================================== */

/* Fonts: Roboto with a real fallback stack so text never drops to a
   browser default if the webfont fails to load. */
body, button, input, optgroup, select, textarea,
h1, h2, h3, h4, h5, h6,
.article-body, .comment-body, .post-content, .blocks-item-title {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* Heading hierarchy: H2 > H3 > H4, so sections read louder than the
   subsections beneath them. */
h2 { font-size: 24px; font-weight: 700; line-height: 1.3; margin: 32px 0 12px; }
h3 { font-size: 19px; font-weight: 600; line-height: 1.35; margin: 24px 0 8px; }
h4 { font-size: 16px; font-weight: 600; line-height: 1.4; margin: 20px 0 6px; color: #3b444b; }
/* Keep the comments section heading as designed. */
.comment-heading { font-size: 18px; font-weight: 600; margin: 0 0 5px; }

/* Figure captions: box hugs the image width and sits flush beneath it.
   Scoped with :has() to captioned figures so the Pro Tip badge figure
   is untouched. Falls back to full-width captions on old browsers. */
.article-body figure:has(> figcaption) {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 16px 0;
}
.article-body figure:has(> figcaption) img {
  display: block;
  margin: 0;
}
.article-body figcaption {
  text-align: center;
  font-size: 13px;
  color: #5b656d;
  background-color: #f4f5f6;
  padding: 6px 12px;
  border-radius: 0 0 3px 3px;
  margin: 0;
}

/* Buttons: one consistent color. The base .button rule hardcodes
   #1155aa (blue); use the eSUB navy #3E5B73 instead, with a darker
   hover. Selected/pressed (.button-primary) stays dark slate so a
   clicked vote still reads as "on". */
.button,
.button-large,
input[type="submit"],
.article-vote {
  background-color: #3E5B73;
  border-color: #3E5B73;
  color: #fff;
}
.button:hover, .button:focus, .button:active,
.button-large:hover, .button-large:focus, .button-large:active,
input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active,
.article-vote:hover, .article-vote:focus {
  background-color: #32495c;
  border-color: #32495c;
  color: #fff;
}

/* Wider article column: let content fill the row beside the sidebar
   instead of capping at 66% and leaving an empty right band. */
@media (min-width: 1024px) {
  .article {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    padding: 0;
  }
}

/* Images: never exceed the text column (paragraph) width. */
.article-body img { max-width: 100%; height: auto; }

/* Tables: house-standard default is BORDERLESS. Any article can still
   add its own borders/styling inline and it wins (no !important here).
   Scoped with :not() to skip the borderless callout pattern (inline
   "border-style: none"). max-width keeps tables within the paragraph. */
.article-body table {
  max-width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}
.article-body table:not([style*="border-style: none"]) th,
.article-body table:not([style*="border-style: none"]) td {
  border: none;
  padding: 8px 12px;
  vertical-align: top;
  text-align: left;
}
.article-body table:not([style*="border-style: none"]) tr:first-child > td,
.article-body table:not([style*="border-style: none"]) th {
  background-color: #f4f5f6;
}



/* ==================================================================
   eSUB Help Center — HOME PAGE refresh  ·  2026-07-26
   ------------------------------------------------------------------
   Pairs with:  home_page_OPTION-A_2026-07-26.hbs                (card grid)
                home_page_OPTION-B_REVISED-DRAFT_2026-07-26.hbs  (search-led,
                  hero photo — this is the one Daniel picked 2026-07-26)
                header_NEW-DRAFT_2026-07-26.hbs
                footer_NEW-DRAFT_2026-07-26.hbs
   Both options share this one block. Ship whichever .hbs you pick;
   the unused rules are inert (a few hundred bytes).

   HOW TO INSTALL
   1. Paste this whole block at the END of 2026_style.css, after the
      2026-07-21 "article readability" block.
   2. Inter is NOT loaded by this file. A bottom-of-file @import is
      invalid CSS and browsers drop it. Add the font one of two ways:
        (a) document_head.hbs  (preferred, faster):
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&amp;display=swap">
            (note the &amp; — in HTML a bare & starts an entity reference.
             The @import form below is CSS, not HTML, so it keeps the plain &.)
        (b) or add this as line 3 of 2026_style.css, beside the Roboto
            @import that is already there and working:
            @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
      Until then the stack falls back to Roboto and nothing breaks.

   SCOPING
   Everything is namespaced under .hc-home, so this block cannot leak
   into article, category, section, request, or profile templates.
   Nothing above line 3906 of 2026_style.css is modified.

   DELIBERATE DEVIATIONS FROM THE DESIGN SYSTEM (both flagged, both
   defensible — say the word and I'll revert either one):
   · DS token --fg-on-brand is #FFFFFF for text on yellow #FCBA03.
     White on that yellow is ~1.9:1 contrast and fails WCAG AA badly.
     The product gets away with it on one login button; a public help
     center should not. Text on yellow here is #2A3340 (~9:1).
   · DS token --border-focus is MUI blue #1976D2. Blue focus rings on
     the navy hero are nearly invisible. The hero search focus ring is
     yellow; everything on white still focuses blue.
   ================================================================== */

.hc-home,
.hc-page,
.hc-header,
.hc-footer {
  /* ---- eSUB Design System tokens, July 2026 ---- */
  --navy:          #3C4A5C;   /* logo-mark field / sidebar chrome */
  --navy-dark:     #2A3340;
  --navy-700:      #3E4C59;
  --yellow:        #FCBA03;   /* BRAND PRIMARY — use sparingly */
  --yellow-hover:  #FFA500;
  --canvas:        #F5F7FA;   /* surface behind cards */
  --surface:       #FFFFFF;
  --fg:            rgba(0, 0, 0, 0.87);
  --fg-secondary:  rgba(0, 0, 0, 0.72);   /* added 2026-07-27 */
  --fg-muted:      rgba(0, 0, 0, 0.60);
  --hairline:      rgba(0, 0, 0, 0.12);
  --hairline-soft: rgba(0, 0, 0, 0.08);
  --link:          #1976D2;

  --r-sm: 4px;    /* buttons, icon tiles */
  --r-md: 8px;    /* cards, inputs */
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
  --shadow-2: 0 2px 4px rgba(16, 24, 40, 0.06), 0 4px 8px rgba(16, 24, 40, 0.08);
  --shadow-3: 0 4px 8px rgba(16, 24, 40, 0.08), 0 12px 20px rgba(16, 24, 40, 0.10);   /* added 2026-07-27 */

  --font: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  font-family: var(--font);
  color: var(--fg);
}

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

.hc-home a { color: var(--link); }
.hc-home a:hover { text-decoration: none; }


/* ==================================================================
   1. HERO  —  slate navy band (Option A) or the theme's hero
      photograph behind a flat navy scrim (Option B v2). No gradients.
   .hc-hero replaces .hero. The old .hero rule is left alone so the
   category and section templates that use it keep working. Option B v2
   reads the same /hc/theming_assets/01HZKYP5ARRXMK84194WW0JXZ6 theme setting that .hero
   does, so the hero image stays under Guide > Customize design and is
   changed there, not here.
   ================================================================== */

.hc-hero {
  background-color: var(--navy);
  border-bottom: 3px solid var(--yellow);
  padding: 56px 0 48px;
  width: 100%;
}

/* Option B runs a shorter hero because search is doing the work. */
.hc-hero--compact { padding: 40px 0 32px; }

.hc-hero__inner { max-width: 680px; }

.hc-hero__eyebrow {
  font: 600 11px/16px var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 8px;
}

.hc-hero__title {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0 0 8px;
}

.hc-hero__sub {
  font: 400 16px/24px var(--font);
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 24px;
}

/* ---- Search field inside the hero -------------------------------
   Overrides the base theme's 50px / 12pt / radius-5 / drop-shadowed
   input. Note the base theme sets `border: none` on :focus, which
   causes a 1px layout jump — fixed here by keeping the border and
   only changing its colour. ---------------------------------------- */

.hc-home .search { position: relative; }

.hc-home .search input[type="search"],
.hc-home .search-full input[type="search"] {
  height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-md);
  box-shadow: none;
  background-color: #FFFFFF;
  color: var(--fg);
  font: 400 15px/48px var(--font);
  width: 100%;
}

.hc-home .search input[type="search"]::placeholder {
  color: var(--fg-muted);
  font-weight: 400;
}

.hc-home .search input[type="search"]:focus {
  border: 1px solid var(--yellow);
  box-shadow: 0 0 0 3px rgba(252, 186, 3, 0.45);
  outline: none;
  color: var(--fg);
  font-weight: 400;   /* base theme jumps to 600 on focus — don't */
}

/* The hand-rolled SVG magnifier in the old markup was invisible:
   the base theme sets .search-icon { display: none }. Removed from
   the markup rather than resurrected. */


/* ---- PHOTO HERO (Option B v2) ----------------------------------
   Keeps the CURRENT hero photograph. It comes from the theme SETTING
   /hc/theming_assets/01HZKYP5ARRXMK84194WW0JXZ6, not from an asset file and not from the
   template — which is why it cannot be found anywhere in the code.
   Change it in Guide > Customize design > (theme) > the settings
   sidebar, NOT in Edit code. On the live site it currently resolves to
   /hc/theming_assets/01HZKYP5ARRXMK84194WW0JXZ6.

   Referencing /hc/theming_assets/01HZKYP5ARRXMK84194WW0JXZ6 here is safe: style.css is
   compiled by Zendesk, and this file already uses rgba(50, 58, 66, 1),
   rgba(103, 152, 192, 1) and friends throughout.

   THE SCRIM. A light flat navy wash sits between photo and text. It is
   deliberately LIGHT, because the current image was measured, not
   guessed. Sampling the live asset (1502x419) across the region the
   headline and search actually occupy:
     mean colour there ................. rgb(63,90,111)
     #FFFFFF on the bare image ......... 7.23  already passes AA
     #FFFFFF on its brightest pixel .... 5.66  still passes AA
     with this 0.30 scrim .............. ~8.6
   So the photo needed no rescuing; a heavy 0.55 wash would only have
   dulled an image that was already doing its job. The scrim earns its
   place by absorbing moderate variation when the setting is changed.
   Be aware of its limit: over a pure-white pixel even a 0.55 scrim only
   reaches 3.26, which is large-text-only. CSS cannot save a bright
   hero image. The durable safeguard is a note on the theme setting:
   hero images must be dark or pre-tinted. Flat colour, not a gradient,
   so this stays inside the DS rule.
   ---------------------------------------------------------------- */

.hc-hero--photo {
  position: relative;
  background-color: var(--navy);              /* fallback if no image is set */
  background-image: url(/hc/theming_assets/01HZKYP5ARRXMK84194WW0JXZ6);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 340px;
  display: flex;
  align-items: center;
  padding: 40px 0;
}

.hc-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(42, 51, 64, 0.30);   /* --navy-dark at 30% */
  pointer-events: none;
}

.hc-hero--photo > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 599px) {
  .hc-hero--photo { min-height: 0; display: block; padding: 32px 0; }
}


/* ---- Popular-search chips (Option B) ---- */
.hc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

/* BUG FIX 2026-07-26 (Daniel spotted it on the preview): these chips
   were rendering in link blue, not white. `.hc-home a` above is
   specificity 0,1,1 — a class plus a type selector — which beats a bare
   `.hc-chip` at 0,1,0. Doubling the class to `.hc-home .hc-chip` (0,2,0)
   wins it back. Same trap that bit the header nav links.
   White at FULL opacity, not 87% — and that part was not cosmetic.
   Composited properly (live hero mean rgb(63,90,111) + the 0.30 navy
   scrim = rgb(57,78,97), then this chip's 0.14 white fill on top =
   rgb(85,103,119)):
     #FFFFFF on the chip ......... 5.85  passes AA
     white at 87% on the chip .... 4.34  FAILS the 4.5 body threshold
   So full white was required, not preferred.
   The 0.38 white border measures 2.68 against the hero, under the 3.0
   non-text threshold. Left as-is deliberately: the chip's fill and its
   label already identify it, so the border is decorative rather than
   load-bearing. Raise it to 0.55 if you would rather not rely on that
   reading. */
.hc-home .hc-chip {
  display: inline-block;
  font: 600 13px/18px var(--font);
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hc-home .hc-chip:hover,
.hc-home .hc-chip:focus {
  background-color: rgba(252, 186, 3, 0.20);   /* DS sidebar-active tint */
  border-color: var(--yellow);
  color: #FFFFFF;
  text-decoration: none;
}


/* ==================================================================
   2. PAGE SHELL & SECTION HEADINGS
   ================================================================== */

.hc-home__body { padding-top: 48px; padding-bottom: 24px; }

.hc-section { margin: 0 0 48px; }
.hc-section:last-child { margin-bottom: 0; }

/* Class selectors beat the theme's unscoped h2/h3 rules. */
.hc-home .hc-section__title {
  font: 700 24px/32px var(--font);
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 0 0 4px;
}

.hc-section__hint {
  font: 400 14px/20px var(--font);
  color: var(--fg-muted);
  margin: 0 0 20px;
}


/* ==================================================================
   3. BUTTONS  —  one primary (yellow), one secondary (navy outline).
   Replaces .orangebutton (#ED6A5A), which is not an eSUB colour.
   ================================================================== */

.hc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/20px var(--font);
  letter-spacing: 0.02em;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.hc-btn:hover, .hc-btn:focus { text-decoration: none; }

.hc-home .hc-btn--primary {
  background-color: var(--yellow);
  color: var(--navy-dark);
}
.hc-home .hc-btn--primary:hover,
.hc-home .hc-btn--primary:focus {
  background-color: var(--yellow-hover);
  color: var(--navy-dark);
}

.hc-home .hc-btn--secondary {
  background-color: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.hc-home .hc-btn--secondary:hover,
.hc-home .hc-btn--secondary:focus {
  background-color: var(--navy);
  color: #FFFFFF;
}

.hc-home .hc-btn--ghost {
  background-color: transparent;
  color: var(--link);
  border-color: var(--hairline);
  padding: 9px 16px;
}
.hc-home .hc-btn--ghost:hover,
.hc-home .hc-btn--ghost:focus {
  background-color: var(--canvas);
  border-color: var(--hairline);
}


/* ==================================================================
   4. BANNER  —  flat card, no background photograph.
   Replaces .herogettingstarted (GettingStartedBG.jpg + 314px fixed
   height + .vertical-center absolute positioning).
   ================================================================== */

.hc-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background-color: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-left: 4px solid var(--yellow);
  border-radius: var(--r-md);
  padding: 32px;
}

.hc-banner__copy { flex: 1 1 320px; min-width: 0; }

.hc-home .hc-banner__title {
  font: 700 24px/32px var(--font);
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 0 0 6px;
}

.hc-banner__text {
  font: 400 15px/22px var(--font);
  color: var(--fg-muted);
  margin: 0;
}

.hc-banner__action { flex: 0 0 auto; }


/* ---- PHOTO BANNER — Getting Started, above Browse by Module -------
   Per Daniel 2026-07-26: use GettingStartedBG.jpg as the block
   background and span the full width.

   The image is used UNMODIFIED, and that is the point. It was built
   with a white fade on the left and the subject on the right,
   specifically so dark text can sit on the left — which is exactly how
   the original .herogettingstarted band worked. So the copy here is
   dark, not white, and the photo needs no recut.

   "Full width" here means the full width of the 1160px content
   container, spanning both columns of the split below it — not
   edge-to-edge viewport. Reason: the asset is 1000px wide. Contained,
   it upscales about 1.16x, which is invisible. Edge-to-edge on a 1600px
   display is a 1.6x upscale on a photo of a face, which is visibly
   soft. If you want true edge-to-edge, move the block outside
   .container in the template and ask Marketing for a 2400px original —
   the CSS below needs no change.

   Text sits in a max-width column so it never collides with the
   subject, and the background falls back to the canvas grey if the
   asset ever goes missing. Below 700px the photo is dropped for a flat
   canvas panel, because at that width the subject sits directly behind
   the text. ---------------------------------------------------------- */

.hc-banner--photo {
  background-color: var(--canvas);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  border: 1px solid var(--hairline-soft);
  border-left: 4px solid var(--yellow);
  border-radius: var(--r-md);
  padding: 36px 32px;
  min-height: 200px;
  display: flex;
  align-items: center;
}

.hc-banner--photo .hc-banner__copy {
  flex: 0 1 clamp(260px, 46%, 460px);
}

.hc-home .hc-banner--photo .hc-banner__title {
  font: 700 28px/36px var(--font);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 6px;
}

.hc-banner--photo .hc-banner__text {
  font: 400 15px/22px var(--font);
  color: var(--fg-muted);
  margin: 0 0 18px;
}

@media (max-width: 699px) {
  .hc-banner--photo {
    background-image: none !important;
    min-height: 0;
    padding: 24px;
    display: block;
  }
  .hc-banner--photo .hc-banner__copy { flex: 1 1 auto; }
  .hc-home .hc-banner--photo .hc-banner__title { font-size: 22px; line-height: 30px; }
}


/* ==================================================================
   5. MODULE CARD GRID  (Option A)
   Real CSS Grid. Kills .row{display:flex} + .col-md-4 + the
   `style="width: 30.7%"` patch on the Activity Stream tile, which was
   only there because .col-md-4 has no width rule in this theme.
   ================================================================== */

.hc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 600px) { .hc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .hc-grid { grid-template-columns: repeat(3, 1fr); } }

.hc-grid--duo { grid-template-columns: 1fr; }
@media (min-width: 700px) { .hc-grid--duo { grid-template-columns: repeat(2, 1fr); gap: 24px; } }

.hc-card {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  background-color: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: 16px;
  text-decoration: none;
  color: var(--fg);
  /* DS: motion is utilitarian — colour and shadow only. The old
     translateY(-3px) lift is gone. */
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.hc-home a.hc-card { color: var(--fg); }

.hc-card:hover,
.hc-card:focus {
  box-shadow: var(--shadow-2);
  border-color: var(--hairline);
  text-decoration: none;
}
.hc-card:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.hc-card__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  object-fit: contain;
}

.hc-card__title {
  font: 600 16px/24px var(--font);
  letter-spacing: 0.01em;
  color: var(--fg);
  margin: 0;
}

.hc-card__desc {
  font: 400 13px/18px var(--font);
  color: var(--fg-muted);
  margin: 2px 0 0;
}

/* Panel variant used for Academy / Product Updates (Option A) */
.hc-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background-color: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: 28px;
  height: 100%;
}

.hc-home .hc-panel__title {
  font: 700 20px/28px var(--font);
  color: var(--fg);
  margin: 0;
}

.hc-panel__text {
  font: 400 14px/20px var(--font);
  color: var(--fg-muted);
  margin: 0 0 12px;
}

.hc-panel__action { margin-top: auto; }


/* ==================================================================
   6. SPLIT LAYOUT  (Option B)  —  dense module list + action rail
   ================================================================== */

.hc-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 900px) {
  .hc-split { grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); gap: 48px; }
}

/* Gap opened up from 4px to 10px. With the tiles now carrying a fill by
   default, a 4px gutter made them read as one continuous grey slab
   rather than nine separate tiles. */
.hc-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 620px) { .hc-list { grid-template-columns: repeat(2, 1fr); gap: 10px 16px; } }

/* Per Daniel 2026-07-26: what used to be the hover state is now the
   DEFAULT for every tile, to give the list some contrast against the
   white page. */
.hc-list__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background-color: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--fg);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hc-home a.hc-list__item { color: var(--fg); }

/* Hover: faint yellow glow.
   Note the background FLIPS to white rather than staying grey. It has to
   — grey is now the resting state, so re-applying grey on hover would
   leave the tile with no feedback at all. White + the yellow ring reads
   as lifting off the page and keeps the interaction legible.
   The ring is a flat colour fading in, which stays inside the DS motion
   rule ("fades and colour transitions only"), and the tint is the same
   rgba(252,186,3,...) family the DS already uses for sidebar-active. */
.hc-list__item:hover,
.hc-list__item:focus {
  background-color: var(--surface);
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(252, 186, 3, 0.18);
  text-decoration: none;
}
.hc-list__item:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* ---- "Coming soon" badge + non-interactive tile ------------------
   Per Daniel 2026-07-26: show the eSUB Time tile with a badge beside
   the title.

   The tile is a <div>, NOT an <a>, and that is the important part.
   There is still no Zendesk section for eSUB Time, so a link would go
   nowhere. A tile that looks clickable and then 404s is worse than one
   that plainly says "not yet" — on a help centre it generates the exact
   support tickets the page exists to prevent. The badge explains the
   absence of a link, so the two work together.
   TO ACTIVATE LATER: swap the <div> back to <a href="...">, drop the
   badge span, and remove the --soon class. Nothing else changes.

   Badge colour: yellow tint from the same rgba(252,186,3,...) family the
   DS uses for sidebar-active, with --navy-dark text. Measured 10.46:1 on
   the grey tile and 11.06:1 on the white hover state, so it clears AA
   comfortably at 11px. Type is the DS overline treatment (11px/600/
   0.08em/uppercase), matching the hero eyebrow.
   Uppercased in CSS, so the markup keeps readable sentence case. ------ */

.hc-badge {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 8px;
  font: 600 11px/16px var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-dark);
  background-color: rgba(252, 186, 3, 0.25);
  border: 1px solid rgba(252, 186, 3, 0.55);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  white-space: nowrap;
}

/* Neutralises the hover glow — the base .hc-list__item:hover rule still
   matches a <div>, and an unclickable tile must not imply otherwise. */
.hc-list__item--soon { cursor: default; }
.hc-list__item--soon:hover,
.hc-list__item--soon:focus {
  background-color: var(--canvas);
  border-color: var(--hairline-soft);
  box-shadow: none;
}

/* Makes the `hidden` attribute actually work on a tile.
   Without this it would NOT: `hidden` is only `display: none` from the
   browser's own stylesheet, and the author `display: flex` above beats
   it every time. This is the single most common way a "hidden" element
   ships visible. Needed for the staged-rollout route described in
   home_page_OPTION-B_REVISED-DRAFT_2026-07-26.hbs (see the eSUB Time
   tile). */
.hc-list__item[hidden] { display: none !important; }

/* Icon chip. 40 -> 52 -> 64px across Daniel's rounds of feedback, and as
   of 2026-07-26 it holds INLINE SVG rather than an <img>.

   Why the switch: the ten legacy PNGs were the old illustrated icon set,
   which Daniel did not want to carry forward. Drawing the replacements as
   inline SVG means nothing to upload, nothing that can 404, no HTTP
   requests, sharp at every resolution, and the glyph inherits colour from
   `color` below — so it adapts automatically to the hover state and to any
   future dark surface. It also matches the rail medallions, which were
   already inline SVG.

   The chip is WHITE on purpose. The tile itself is canvas grey at rest, so
   a grey chip would dissolve into it; white keeps the icon reading as an
   object, and the hairline holds its edge when the tile flips to white on
   hover.

   `display: grid` + `place-items: center` replaces the old
   `object-fit: contain` + padding — those only ever applied to a
   replaced element like <img> and do nothing for a span wrapping an SVG. */
.hc-list__icon {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--r-sm);
  background-color: var(--surface);
  border: 1px solid var(--hairline-soft);
  color: var(--navy);
  display: grid;
  place-items: center;
}

.hc-list__icon svg {
  width: 32px;
  height: 32px;
  display: block;
}

/* BUG FIX 2026-07-26 (Daniel spotted it): title and description are
   <span>s, and without display:block they ran together as one flowing
   line — "Administration Users, roles, permissions, and company
   settings." Now the title owns its line and the description drops
   beneath it, which is what was asked for and what the margins here
   always assumed. */
.hc-list__title {
  display: block;
  font: 600 16px/24px var(--font);
  color: var(--fg);
  margin: 0;
}

.hc-list__desc {
  display: block;
  font: 400 13px/18px var(--font);
  color: var(--fg-muted);
  margin: 2px 0 0;
}

/* ---- Action rail ---- */
.hc-rail {
  display: grid;
  gap: 12px;
  align-content: start;
}

/* Rail cards, reworked 2026-07-26 (Daniel: "I'd like these to pop a
   little more").
   Diagnosis first: they were white cards on a white page carrying a
   hairline and shadow-1, which is almost nothing. Imagery alone would
   not have fixed that, so three things changed together — a stronger
   resting shadow, an icon medallion, and a pill instead of a text link.

   The whole card is now an <a>. That is why the hover state is honest:
   previously only the text link was clickable while the card looked
   interactive. Bigger target, and valid HTML because the pill inside is
   a <span>, not a nested anchor. */
.hc-rail__card {
  display: block;
  background-color: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  padding: 22px;
  text-decoration: none;
  color: var(--fg);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.hc-home a.hc-rail__card { color: var(--fg); }

.hc-home a.hc-rail__card:hover,
.hc-home a.hc-rail__card:focus {
  box-shadow: var(--shadow-3);
  border-color: var(--hairline);
  text-decoration: none;
}
.hc-home a.hc-rail__card:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Icon medallion. Inline SVG, not an icon font and not a new PNG:
   no extra CDN dependency (the theme loads no icon font today), no new
   assets to upload, crisp at any DPI, and it inherits colour.
   All three are navy on the canvas tint rather than three different
   hues — that keeps them a family with the module tiles' white icon
   chips, and the DS is explicit that the palette is "not flashy". The
   glyph does the differentiating, not the colour. */
.hc-rail__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background-color: var(--canvas);
  border: 1px solid var(--hairline-soft);
  color: var(--navy);
  display: grid;
  place-items: center;
  margin: 0 0 14px;
}
.hc-rail__icon svg { width: 22px; height: 22px; display: block; }

/* Pill link, replacing the bare text link. Pill-shaped on purpose — it
   rhymes with the quick-link chips up in the hero. Navy outline, never
   yellow: the header CTA and the Getting Started banner already hold the
   two yellow accents on this page. */
.hc-rail__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 13px/18px var(--font);
  letter-spacing: 0.02em;
  color: var(--navy);
  background-color: transparent;
  border: 1px solid var(--navy);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  margin-top: 14px;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hc-rail__btn svg { width: 13px; height: 13px; flex: 0 0 13px; }

/* Hovering anywhere on the card fills its pill, so the whole tile reads
   as one control. */
.hc-home a.hc-rail__card:hover .hc-rail__btn,
.hc-home a.hc-rail__card:focus .hc-rail__btn {
  background-color: var(--navy);
  color: #FFFFFF;
}

/* The same pill used STANDALONE — currently "View status page" in the
   System status block. Per Daniel 2026-07-26 that button was link-blue
   (.hc-btn--ghost) while every other secondary pill on the page was
   navy; now they all match.
   The `a.` prefix is what separates the two cases: inside a rail card the
   pill is a <span> driven by its parent's hover, so it can never match
   this rule, and these two hover behaviours cannot collide. */
.hc-home a.hc-rail__btn { color: var(--navy); }
.hc-home a.hc-rail__btn:hover,
.hc-home a.hc-rail__btn:focus {
  background-color: var(--navy);
  color: #FFFFFF;
  text-decoration: none;
}
.hc-home a.hc-rail__btn:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* .hc-btn--ghost is now unused — "View status page" was its only caller.
   Left defined rather than deleted in case a future block wants a quiet
   rectangular button. */

.hc-rail__card--primary {
  background-color: var(--canvas);
  border-left: 4px solid var(--yellow);
  box-shadow: none;
}

.hc-home .hc-rail__title {
  font: 600 16px/24px var(--font);
  letter-spacing: 0.01em;
  color: var(--fg);
  margin: 0 0 4px;
}

.hc-rail__text {
  font: 400 13px/18px var(--font);
  color: var(--fg-muted);
  margin: 0;   /* the pill's own margin-top supplies the gap */
}

.hc-rail__link {
  font: 600 14px/20px var(--font);
  color: var(--link);
  text-decoration: none;
}
.hc-rail__link:hover { color: #1565C0; text-decoration: underline; }

/* Photo band inside the primary rail card. This is how imagery still
   reaches phones and tablets after the hero photo drops out at
   1199px. Uses the tight subject crop, which carries no white haze. */
.hc-rail__media {
  display: block;
  height: 120px;
  margin: -20px -20px 16px -24px;   /* -24 on the left clears the 4px accent */
  background-color: var(--navy);
  background-repeat: no-repeat;
  background-position: center 22%;  /* keeps her face in frame on the crop */
  background-size: cover;
}


/* ==================================================================
   7. HEADER  (pairs with header_NEW-DRAFT_2026-07-26.hbs)
   The element keeps its original class="header" because script.js
   queries '.header .menu-button'. .hc-header carries the new styling
   and wins on specificity.
   ================================================================== */

/* The base theme makes .header itself the centred 1160px flex row. To get
   a full-bleed white bar with a hairline that spans the viewport, .header
   becomes a plain block and .hc-header__inner takes over the centring. */
.hc-header {
  background-color: var(--surface);
  border-bottom: 1px solid var(--hairline-soft);
  font-family: var(--font);
  display: block;
  max-width: none;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  position: relative;
}

.hc-header .logo img { margin-top: 0; }

/* Single row, logo through Sign in — per Daniel 2026-07-26.
   nowrap is the point: previously this wrapped and dropped Sign in onto
   a second line. Wrapping is re-enabled only below 768px, where the
   contact links hide and the burger takes over. */
.hc-header__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 12px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: nowrap;
}
@media (min-width: 1160px) {
  .hc-header__inner { width: 90%; padding-left: 0; padding-right: 0; }
}
@media (max-width: 767px) {
  .hc-header__inner { flex-wrap: wrap; gap: 12px; }
}

.hc-header__logo { flex: 0 0 auto; line-height: 0; }
.hc-header__logo img {
  max-height: 40px;
  width: auto;
  height: auto;
  display: block;
}

.hc-header__nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 20px;
  margin-left: auto;          /* pins the whole group right */
  font: 400 14px/20px var(--font);
}
@media (max-width: 767px) {
  .hc-header__nav { flex-wrap: wrap; gap: 8px 12px; }
}

/* Button pair, hard-right. Submit a request sits immediately left of
   Sign in, per Daniel 2026-07-26. */
.hc-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Phone + email: quiet, icon-led.
   Selectors are doubled up (.hc-header .hc-header__x) on purpose. The base
   theme's `.nav-wrapper a` is specificity 0,1,1 and would otherwise beat a
   single class and force display:inline-block back on. */
.hc-header .hc-header__contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-secondary);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 400;
  padding: 0;
}
.hc-header .hc-header__contact:hover { color: var(--navy); text-decoration: none; }
.hc-header .hc-header__contact svg { flex: 0 0 15px; }

.hc-header__divider {
  width: 1px;
  height: 20px;
  background-color: var(--hairline);
}

.hc-header .hc-header__link {
  display: inline-block;
  color: var(--fg-secondary);
  text-decoration: none;
  font-weight: 400;
  white-space: nowrap;
  padding: 0;
}
.hc-header .hc-header__link:hover { color: var(--navy); text-decoration: none; }

/* "Back to eSUB Fusion" — the product's own door in the header. Styled as
   a quiet nav link rather than a button: it is a destination, not an
   action, and the header already has one button too many for comfort.
   The launch glyph marks it as leaving the help centre. */
.hc-header .hc-header__applink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--navy);
  font-weight: 600;
}
.hc-header .hc-header__applink:hover { color: var(--navy-dark); }
.hc-header .hc-header__applink svg { flex: 0 0 13px; }

/* MOBILE NAV FIX.
   The base theme hides every .nav-wrapper a below 768px and shows the
   burger instead. But #user-nav shipped EMPTY and with an inline
   display:none, and script.js hides the burger whenever #user-nav has no
   children — so on phones the header collapsed to a logo and a sign-in
   link, with phone, email, Submit a request and Community all
   unreachable. The template now populates #user-nav, so the burger has
   something to open and the theme's own aria-expanded mechanism works
   unchanged. No script.js edit needed. */
/* BUG FIX 2026-07-26 (Daniel spotted it): the populated #user-nav was
   leaking onto desktop and duplicating the whole link set — the header
   showed phone, email, Submit a request and Community twice. Cause: the
   base theme leaves `.user-nav { display: inline-block }` at every width
   (2026_style.css:520) and only repositions it at 768px. Stock Copenhagen
   gets away with that because its user-nav holds DIFFERENT links; mine
   holds the mobile duplicates by design.
   So: hidden outright, and revealed only when the burger expands it,
   and never on desktop at any state. */
.hc-header .user-nav { display: none; padding: 0; }

@media (min-width: 768px) {
  .hc-header .user-nav,
  .hc-header .user-nav[aria-expanded="true"] { display: none !important; }
}

.hc-header .user-nav[aria-expanded="true"] {
  display: block;
  border: 1px solid var(--hairline);
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--shadow-2);
  top: 100%;
  padding: 8px 0;
}
.hc-header .user-nav[aria-expanded="true"] > a {
  display: block;
  margin: 0;
  padding: 12px 20px;
  font: 400 15px/22px var(--font);
  color: var(--fg);
  text-decoration: none;
}
.hc-header .user-nav[aria-expanded="true"] > a:hover {
  background-color: var(--canvas);
  color: var(--navy);
}

.hc-header .menu-button {
  color: var(--navy);
  margin-right: 0;
  order: 99;
}
.hc-header .menu-button .icon-menu { width: 18px; height: 18px; }

/* On phones the contact links collapse into the burger menu, but the two
   buttons stay visible — Submit a request and Sign in are the whole point
   of the header for a stuck user, so they should never be behind a tap. */
@media (max-width: 767px) {
  .hc-header .hc-header__contact,
  .hc-header .hc-header__link,
  .hc-header__divider { display: none; }
  .hc-header a.hc-header__cta,
  .hc-header a.hc-header__signin { padding: 8px 14px; font-size: 13px; }
  .hc-header__actions { gap: 8px; }
}

/* Submit a request — yellow, matching the "Get Started" button in the
   home page body. Per Daniel 2026-07-26.
   Heads up on the trade-off: this was navy outline before precisely
   because the DS asks for one yellow accent per view, and the home page
   body already has a yellow Get Started. On the home page there are now
   two. That is a defensible read — the header is site-wide chrome and the
   banner is content — but it is a deliberate departure, not an oversight.
   Text is #2A3340, not the DS --fg-on-brand white, for the same measured
   reason as everywhere else: white on #FCBA03 is 1.73:1. */
.hc-header .hc-header__cta,
.hc-header a.hc-header__cta {
  display: inline-flex;
  align-items: center;
  font: 600 14px/20px var(--font);
  letter-spacing: 0.02em;
  color: var(--navy-dark);
  background-color: var(--yellow);
  border: 1px solid var(--yellow);
  border-radius: var(--r-sm);
  padding: 9px 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.hc-header a.hc-header__cta:hover,
.hc-header a.hc-header__cta:focus {
  background-color: var(--yellow-hover);
  border-color: var(--yellow-hover);
  color: var(--navy-dark);
  text-decoration: none;
}

/* Sign in — same size, shape and weight as the button beside it, but
   navy outline rather than filled, so the pair still reads as primary
   plus secondary instead of two competing yellows. Say the word if you
   want them identical. */
.hc-header a.hc-header__signin,
.hc-header .hc-header__signin {
  display: inline-flex;
  align-items: center;
  font: 600 14px/20px var(--font);
  letter-spacing: 0.02em;
  color: var(--navy);
  background-color: transparent;
  border: 1px solid var(--navy);
  border-radius: var(--r-sm);
  padding: 9px 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hc-header a.hc-header__signin:hover,
.hc-header a.hc-header__signin:focus {
  background-color: var(--navy);
  color: #FFFFFF;
  text-decoration: none;
}

.hc-header .user-info .dropdown-toggle {
  font: 600 14px/20px var(--font);
  color: var(--navy);
  text-decoration: none;
}

.hc-header .user-avatar { border-radius: var(--r-pill); }

/* Skip link: visible only on keyboard focus */
.hc-skip-nav {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.hc-skip-nav:focus {
  left: 8px;
  top: 8px;
  background-color: var(--navy);
  color: #FFFFFF;
  font: 600 14px/20px var(--font);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  text-decoration: none;
}

@media (max-width: 767px) {
  .hc-header__contact span { display: none; }   /* icon-only on phones */
  .hc-header__divider { display: none; }
  .hc-header__nav { gap: 8px 12px; }
}


/* ==================================================================
   8. FOOTER  (pairs with footer_NEW-DRAFT_2026-07-26.hbs)
   Navy band, bookending the hero. The DS ships a white wordmark
   specifically for dark surfaces — use it here.
   ================================================================== */

.hc-footer {
  background-color: var(--navy);
  border-top: 3px solid var(--yellow);
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font);
  margin-top: 64px;
}

.hc-footer__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 40px 5% 32px;
}
@media (min-width: 1160px) {
  .hc-footer__inner { width: 90%; padding-left: 0; padding-right: 0; }
}

.hc-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 700px) {
  .hc-footer__cols { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

.hc-footer__heading {
  font: 600 11px/16px var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 10px;
}

.hc-footer__list { list-style: none; margin: 0; padding: 0; }
.hc-footer__list li { margin: 0 0 8px; }

.hc-footer a,
.hc-footer__list a {
  font: 400 14px/20px var(--font);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}
.hc-footer a:hover,
.hc-footer__list a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

.hc-footer__text {
  font: 400 14px/20px var(--font);
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 8px;
}

/* Bottom bar aligned to the SAME three-column grid as Support / Learn /
   eSUB above it, per Daniel 2026-07-26. The base theme centres footer
   text (2026_style.css:706 `.footer-inner { text-align: center }`), so
   matching the grid puts the copyright centred under Support and the
   status pill centred under Learn — which is where it already sat by
   accident. Now it is deliberate and it stays put. Collapses to a
   single centred stack under 700px. */
.hc-footer__bar {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin-top: 28px;
  padding-top: 20px;
}
@media (min-width: 700px) {
  .hc-footer__bar { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

.hc-footer__legal {
  font: 400 13px/18px var(--font);
  color: rgba(255, 255, 255, 0.60);
  margin: 0;
  text-align: center;
}

/* Language selector inherits the theme's dropdown behaviour; only the
   colours change so it reads on navy. */
.hc-footer .language-selector .dropdown-toggle {
  font: 400 13px/18px var(--font);
  color: rgba(255, 255, 255, 0.75);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-sm);
  padding: 7px 12px;
}
.hc-footer .language-selector .dropdown-toggle:hover { color: #FFFFFF; }
.hc-footer .language-selector .dropdown-menu a { color: var(--fg); }


/* ==================================================================
   9. SYSTEM STATUS  (pairs with status_widget_snippet_2026-07-26.js)
   ------------------------------------------------------------------
   Reads https://status.esubcloud.com/api/v2/status.json — Atlassian
   Statuspage, page code vylp1xmtmy5v. That endpoint returns exactly
   the thing worth showing:
     {"status":{"indicator":"none","description":"All Systems Operational"}}
   `description` is the human string; `indicator` is one of
   none | minor | major | critical | maintenance.

   COLOUR RULE: the colour lives in the DOT ONLY. Label text always
   uses the surface's normal text colour. Two reasons.
   1. Contrast. Measured: DS amber #FFA000 on white is 2.04 and fails
      AA outright; DS green #2E7D32 on the navy footer is 1.76 and is
      effectively invisible. Coloured status text cannot work on both
      surfaces, so it works on neither.
   2. Never colour alone. The label always spells the state out, so the
      widget still reads correctly to anyone who cannot separate the
      hues.
   Dots are non-text and need 3.0, which each pair below clears.
   ================================================================== */

.hc-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

/* Hidden until the script has an answer. A status widget that says
   "unknown" is worse than no status widget, so a failed or blocked
   request leaves this collapsed and nothing is shown. */
.hc-status[hidden] { display: none !important; }

.hc-status__dot {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background-color: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
}

.hc-status__label { font: 400 13px/18px var(--font); }

/* ---- Compact pill, used in the navy footer ---- */
.hc-footer .hc-status { color: #81C784; }                    /* dot, 4.49 on navy */
.hc-footer .hc-status[data-indicator="minor"],
.hc-footer .hc-status[data-indicator="maintenance"] { color: #FFD54F; }
.hc-footer .hc-status[data-indicator="major"],
.hc-footer .hc-status[data-indicator="critical"]    { color: #EF9A9A; }

.hc-footer .hc-status__label { color: rgba(255, 255, 255, 0.75); }  /* 5.24 on navy */
.hc-footer .hc-status:hover .hc-status__label { color: #FFFFFF; text-decoration: underline; }

/* ---- Expanded block, used at the foot of the home page ---- */
.hc-statusblock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background-color: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  padding: 18px 20px;
  color: #2E7D32;                                            /* dot, 5.13 on white */
}
.hc-statusblock[data-indicator="minor"],
.hc-statusblock[data-indicator="maintenance"] { color: #B36B00; }
.hc-statusblock[data-indicator="major"],
.hc-statusblock[data-indicator="critical"]    { color: #D32F2F; }

.hc-statusblock .hc-status__dot { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05); }

.hc-statusblock__main { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* display:block matters — these are spans, so the margins below would
   be dropped if they stayed inline. */
.hc-statusblock__label {
  display: block;
  font: 600 15px/22px var(--font);
  color: var(--fg);                                          /* not the accent */
}

.hc-statusblock__meta {
  display: block;
  font: 400 13px/18px var(--font);
  color: var(--fg-muted);
  margin: 2px 0 0;
}

.hc-statusblock__detail[hidden] { display: none !important; }

/* Component detail. Rendered ONLY when something is not operational —
   eight green rows on a healthy day is noise, and noise is what makes
   people stop reading a status element at all. */
.hc-statusblock__detail {
  flex: 1 1 100%;
  border-top: 1px solid var(--hairline-soft);
  margin: 4px 0 0;
  padding: 14px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 20px;
}
@media (min-width: 620px) {
  .hc-statusblock__detail { grid-template-columns: repeat(2, 1fr); }
}

.hc-statusblock__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font: 400 13px/20px var(--font);
  color: var(--fg);
}
.hc-statusblock__row span:last-child { color: var(--fg-muted); white-space: nowrap; }

.hc-statusblock__cta { flex: 0 0 auto; }


/* ==================================================================
   10. RESPONSIVE TRIM — home page, header, footer
   ================================================================== */

@media (max-width: 599px) {
  .hc-hero { padding: 40px 0 32px; }
  .hc-home__body { padding-top: 32px; }
  .hc-banner { padding: 24px; }
  .hc-panel { padding: 22px; }
  .hc-section { margin-bottom: 36px; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .hc-home * { transition: none !important; }
}

/* ==================================================================
   11. INNER PAGES — shared chrome
   ------------------------------------------------------------------
   Added 2026-07-26 (second pass) for category_page, section_page,
   search_results, request_page, requests_page and error_page.

   Namespaced under .hc-page exactly as the home page is under
   .hc-home, so none of this can reach the article template or any
   other view that was not deliberately migrated. Every inner page
   template wraps its content in <div class="hc-page">.

   These pages were NOT unstyled before — base Copenhagen already
   carries 34 rules for search results, 32 for the requests table, 33
   for the collapsible navs. The job here is to make them agree with
   the new home page: Inter, the navy/yellow palette, 4/8px radii,
   hairline borders, and the same card and pill patterns.

   DS note on lists: the design system calls for "bordered rows, not
   rounded-rect cards" in dense lists, which is why article lists below
   are hairline-separated rows rather than the filled tiles used for the
   ten home page modules.
   ================================================================== */

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

.hc-page { padding-bottom: 24px; }

/* LINK COLOUR — a deliberate DS deviation, per Daniel 2026-07-26
   ("ensure link colors are appropriate to the theme").
   The DS sets links to MUI blue #1976D2. On these pages almost every
   element IS a link — breadcrumbs, section titles, every article row,
   result titles, table rows — so blue-everywhere reads noisy and reads
   as someone else's palette. Navy keeps it tight and on-brand.
   Blue is NOT abandoned: it stays on focus rings, and article BODY
   prose links are outside .hc-page so the DS colour still governs
   them, which is where an inline link most needs to stand out. */
.hc-page a { color: var(--navy); }
.hc-page a:hover { color: var(--navy-dark); }

/* ---- Sub-nav: breadcrumbs left, compact search right -------------
   Replaces the base .sub-nav. The old markup hand-rolled an SVG
   magnifier that never rendered, because base Copenhagen sets
   .search-icon { display: none } — same dead code that was in the
   home page hero. Removed from the markup rather than revived. ---- */

.hc-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline-soft);
  margin: 0 0 28px;
}

.hc-page .hc-subnav ol.breadcrumbs,
.hc-page .breadcrumbs {
  margin: 0;
  padding: 0;
  font: 400 13px/20px var(--font);
}
.hc-page .breadcrumbs li { color: var(--fg-muted); }
.hc-page .breadcrumbs li a { color: var(--fg-secondary); text-decoration: none; }
.hc-page .breadcrumbs li a:hover { color: var(--navy); text-decoration: underline; }
.hc-page .breadcrumbs li:last-child a { color: var(--fg); }

/* Compact search for inner pages. Deliberately different from the hero
   field: on white, the DS focus colour (MUI blue) is the correct choice,
   so only the navy hero gets the yellow ring. */
.hc-subnav__search { flex: 0 1 320px; min-width: 200px; }

.hc-page .search input[type="search"] {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: none;
  background-color: var(--surface);
  color: var(--fg);
  font: 400 14px/40px var(--font);
  width: 100%;
}
.hc-page .search input[type="search"]::placeholder { color: var(--fg-muted); font-weight: 400; }
.hc-page .search input[type="search"]:focus {
  border: 1px solid var(--border-focus, #1976D2);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18);
  outline: none;
  font-weight: 400;
}

/* ---- Page header ---- */
.hc-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 28px;
}

.hc-page .hc-page__title {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
}

.hc-page__desc {
  flex: 1 1 100%;
  font: 400 15px/24px var(--font);
  color: var(--fg-muted);
  margin: 6px 0 0;
  max-width: 68ch;   /* measure — long descriptions get unreadable full-width */
}

.hc-page__headeraside { flex: 0 0 auto; }

/* ---- Follow / Subscribe buttons -----------------------------------
   Per Daniel 2026-07-26: "the bright blue doesn't quite match."
   He was looking at base Copenhagen line 289, which paints
   `.button, .section-subscribe button, .article-subscribe button, …`
   with #1155aa. The 2026-07-21 override block reset `.button` and
   `input[type=submit]` to the eSUB navy #3E5B73 but did NOT include the
   subscribe selectors — so Follow kept the stock blue while everything
   around it went navy. That is the whole explanation.

   Navy OUTLINE rather than navy filled, to match every other secondary
   control in this theme (.hc-seeall, .hc-rail__btn, Sign in). Filled
   navy is reserved for the "already following" state, so the button
   still reads as on/off rather than relying on label text alone. */
.hc-page .button,
.hc-page .section-subscribe button,
.hc-page .article-subscribe button,
.hc-page .organization-subscribe button,
.hc-page .subscriptions-subscribe button {
  background-color: transparent;
  border: 1px solid var(--navy);
  border-radius: var(--r-sm);
  color: var(--navy);
  font: 600 13px/18px var(--font);
  letter-spacing: 0.02em;
  padding: 8px 16px;
  width: auto;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hc-page .button:hover,
.hc-page .section-subscribe button:hover,
.hc-page .article-subscribe button:hover,
.hc-page .organization-subscribe button:hover,
.hc-page .subscriptions-subscribe button:hover {
  background-color: var(--navy);
  color: #FFFFFF;
}
/* Following = filled. Zendesk sets data-selected on the subscribe
   button, so this needs no JS. */
.hc-page .section-subscribe button[data-selected="true"],
.hc-page .article-subscribe button[data-selected="true"],
.hc-page .organization-subscribe button[data-selected="true"],
.hc-page .subscriptions-subscribe button[data-selected="true"],
.hc-page .button.button-primary {
  background-color: var(--navy);
  border-color: var(--navy);
  color: #FFFFFF;
}

/* ---- Pagination ---------------------------------------------------
   Daniel 2026-07-26: the "Next ›" and "»" controls were bright blue.
   THIRD instance of the same root cause, so it is worth naming as a
   pattern rather than a one-off: base Copenhagen line 288 paints a long
   shared selector list with #1155aa —
     .button, .section-subscribe button, .article-subscribe button,
     .community-follow button, .organization-subscribe button,
     .subscriptions-subscribe button, .pagination-next-link,
     .pagination-prev-link, .pagination-first-link,
     .pagination-last-link, .edit-profile-button a
   The 2026-07-21 override reset only `.button`, `.button-large`,
   `input[type=submit]` and `.article-vote`. Everything ELSE in that list
   kept the stock blue: Follow, pagination, edit-profile.
   ANY control still showing #1155aa is on that line. Check there first.

   The chevrons are text characters (› » ‹ «) inside the links, so they
   inherit `color` and need no separate rule. */
.hc-page .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 32px 0 8px;
  text-align: center;
}
.hc-page .pagination-first,
.hc-page .pagination-prev,
.hc-page .pagination-next,
.hc-page .pagination-last { display: inline-block; }

.hc-page .pagination-first-link,
.hc-page .pagination-prev-link,
.hc-page .pagination-next-link,
.hc-page .pagination-last-link {
  display: inline-block;
  background-color: transparent;
  border: 1px solid var(--navy);
  border-radius: var(--r-sm);
  color: var(--navy);
  font: 600 13px/18px var(--font);
  letter-spacing: 0.02em;
  padding: 8px 14px;
  width: auto;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hc-page .pagination-first-link:hover,
.hc-page .pagination-prev-link:hover,
.hc-page .pagination-next-link:hover,
.hc-page .pagination-last-link:hover,
.hc-page .pagination-first-link:focus,
.hc-page .pagination-prev-link:focus,
.hc-page .pagination-next-link:focus,
.hc-page .pagination-last-link:focus {
  background-color: var(--navy);
  color: #FFFFFF;
  text-decoration: none;
}
/* Zendesk marks unavailable ends with data-disabled rather than removing
   them, and base only sets `cursor: default` — so they still looked like
   live buttons. Now they read as inert. */
.hc-page .pagination-first-link[data-disabled],
.hc-page .pagination-prev-link[data-disabled],
.hc-page .pagination-next-link[data-disabled],
.hc-page .pagination-last-link[data-disabled] {
  border-color: var(--hairline);
  color: var(--fg-disabled, rgba(0,0,0,0.38));
  background-color: transparent;
  cursor: default;
  pointer-events: none;
}
.hc-page .pagination-current,
.hc-page .pagination-page {
  font: 600 13px/18px var(--font);
  color: var(--fg-muted);
  padding: 8px 4px;
}
.hc-page .pagination-current { color: var(--fg); }

/* Same family, same stock-blue problem. */
.hc-page .edit-profile-button a {
  background-color: transparent;
  border: 1px solid var(--navy);
  border-radius: var(--r-sm);
  color: var(--navy);
  font: 600 13px/18px var(--font);
  padding: 8px 16px;
  width: auto;
  text-decoration: none;
}
.hc-page .edit-profile-button a:hover { background-color: var(--navy); color: #FFFFFF; }

/* ---- Empty state ---- */
.hc-empty {
  display: block;
  background-color: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  padding: 28px;
  font: 400 15px/22px var(--font);
  color: var(--fg-muted);
  font-style: normal;   /* base theme used <i>, which italicised it */
}


/* ==================================================================
   12. SECTION TREE + ARTICLE LISTS  (category_page, section_page)
   ================================================================== */

/* Four groups per row, smaller type, each group in its own grey
   container — per Daniel 2026-07-26. He liked the density of the old
   4-across layout, so the tree now steps 1 -> 2 -> 3 -> 4 columns and
   the type drops a size at every level. */
.hc-tree {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 620px)  { .hc-tree { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .hc-tree { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hc-tree { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --split is kept as a no-op alias so category_page.hbs needs no edit. */
.hc-tree--split { }

/* The contrasting container Daniel asked for. Canvas grey on white,
   hairline, 8px radius — the same surface language as the home page
   module tiles, so the two pages read as one system. */
.hc-tree__group {
  margin: 0;
  background-color: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  padding: 16px 16px 18px;
}

.hc-page .hc-tree__title {
  font: 600 16px/22px var(--font);
  letter-spacing: 0;
  margin: 0 0 10px;
}
.hc-page .hc-tree__title a { color: var(--fg); text-decoration: none; }
.hc-page .hc-tree__title a:hover { color: var(--navy); text-decoration: underline; }

.hc-tree__count {
  font: 400 12px/16px var(--font);
  color: var(--fg-muted);
  margin: 0 0 12px;
}

/* Bordered rows, per the DS guidance on dense lists. */
.hc-artlist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.hc-artlist__item {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--hairline);
  margin: 0;
  padding: 0;
}

.hc-page .hc-artlist__link {
  flex: 1 1 auto;
  display: block;
  padding: 9px 8px;
  margin: 0 -8px;
  font: 400 13.5px/19px var(--font);
  color: var(--fg);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: background-color 0.2s ease, color 0.2s ease;
}
/* Hover goes WHITE, not grey — the group container is grey now, so grey
   on grey would give no feedback. Same inversion the home page tiles
   needed when their resting state became grey. */
.hc-page .hc-artlist__link:hover,
.hc-page .hc-artlist__link:focus {
  background-color: var(--surface);
  color: var(--navy);
  text-decoration: none;
}

/* Promoted + internal markers. Colour is not the only signal — each
   carries a title attribute and a visually-hidden label in the markup. */
.hc-artlist__icon {
  flex: 0 0 14px;
  display: grid;
  place-items: center;
  color: var(--fg-muted);
}
.hc-artlist__icon svg { width: 12px; height: 12px; display: block; }
.hc-artlist__icon--promoted { color: var(--yellow-800, #E8890B); }

.hc-artlist__item--promoted .hc-artlist__link { font-weight: 600; }

/* Subsection rows read as navigation, not as articles, so they get the
   chevron and a slightly stronger weight. */
.hc-artlist__item--sub .hc-artlist__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
  color: var(--navy);
}
.hc-artlist__item--sub svg { width: 12px; height: 12px; flex: 0 0 12px; }

.hc-page .hc-seeall {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  font: 600 12px/16px var(--font);
  letter-spacing: 0.02em;
  color: var(--navy);
  background-color: transparent;
  border: 1px solid var(--navy);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hc-page .hc-seeall:hover,
.hc-page .hc-seeall:focus {
  background-color: var(--navy);
  color: #FFFFFF;
  text-decoration: none;
}
.hc-seeall svg { width: 12px; height: 12px; }




/* ==================================================================
   13. SEARCH RESULTS
   ================================================================== */

.hc-results { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) {
  .hc-results { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); gap: 40px; }
}

.hc-results__side { align-self: start; }

.hc-filter { margin: 0 0 24px; }
.hc-page .hc-filter__title {
  font: 600 11px/16px var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 10px;
}
.hc-filter__list { list-style: none; margin: 0; padding: 0; }

.hc-page .hc-filter__list .sidenav-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  margin: 0 -10px;
  border-radius: var(--r-sm);
  font: 400 14px/20px var(--font);
  color: var(--fg-secondary);
  text-decoration: none;
}
.hc-page .hc-filter__list .sidenav-item:hover { background-color: var(--canvas); color: var(--navy); }
.hc-page .hc-filter__list .sidenav-item.current {
  background-color: var(--canvas);
  color: var(--fg);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--yellow);
}
.hc-page .doc-count { color: var(--fg-muted); font-variant-numeric: tabular-nums; }

/* ---- "Show more categories" ---------------------------------------
   Daniel 2026-07-26: it was rendering as a raw browser button.

   Two things were wrong. The theme never styled it beyond
   `background:none; border:none`, so once visible it fell back to the
   UA default. And more importantly its hide rule
   `.see-all-filters[aria-hidden="true"] { display:none }` is scoped to
   `.search-results-sidebar` — a wrapper class I had replaced — so with
   only four categories, where script.js never reveals the button, there
   was nothing keeping it out of view. `aria-hidden` alone hides an
   element from assistive tech, NOT from sight; that distinction is the
   whole bug.

   The wrapper class is restored in the template. These rules duplicate
   the hide and the clamp under .hc-page as a safety net, so the control
   still behaves if that class is ever dropped again, and style the
   button to match the theme.

   Behaviour, unchanged and driven entirely by the existing script.js:
   the list clamps to five entries, and the button is revealed only when
   there are more than six children. Clicking it removes the button and
   the clamp. No JS change. */
.hc-page .see-all-filters {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  margin: 4px 0 0;
  padding: 8px 10px;
  font: 600 13px/18px var(--font);
  color: var(--navy);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hc-page .see-all-filters:hover,
.hc-page .see-all-filters:focus {
  background-color: var(--canvas);
  color: var(--navy-dark);
  text-decoration: none;
}
.hc-page .see-all-filters:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
/* The safety net. aria-hidden does not hide visually — this does. */
.hc-page .see-all-filters[aria-hidden="true"] { display: none !important; }
/* And the clamp, so the button always has something to reveal. */
.hc-page .multibrand-filter-list--collapsed li:nth-child(1n + 6) { display: none; }

.hc-page .hc-resultcount {
  font: 700 22px/30px var(--font);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 20px;
}

.hc-resultlist { list-style: none; margin: 0; padding: 0; }

.hc-result {
  border-bottom: 1px solid var(--hairline-soft);
  padding: 20px 0;
}
.hc-result:first-child { padding-top: 0; }

.hc-page .hc-result__title { font: 600 17px/24px var(--font); margin: 0 0 6px; }
/* Navy, not MUI blue — see the link-colour note in section 11. */
.hc-page .hc-result__title a { color: var(--navy); text-decoration: none; }
.hc-page .hc-result__title a:hover { color: var(--navy-dark); text-decoration: underline; }

.hc-result__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  font: 400 12px/18px var(--font);
  color: var(--fg-muted);
}
.hc-page .hc-result__meta .breadcrumbs { font-size: 12px; }
.hc-page .hc-result__meta .breadcrumbs li a { color: var(--fg-muted); }

.hc-result__text {
  font: 400 14px/22px var(--font);
  color: var(--fg-secondary);
  max-width: 76ch;
}
.hc-result__text em { background-color: rgba(252, 186, 3, 0.28); font-style: normal; }

.hc-result__stats {
  display: flex;
  gap: 14px;
  font: 400 12px/18px var(--font);
  color: var(--fg-muted);
  margin: 8px 0 0;
}
.hc-result__stats svg { width: 12px; height: 12px; vertical-align: -1px; }


/* ==================================================================
   14. MY ACTIVITIES  (requests_page, request_page)
   ================================================================== */

.hc-activities__nav {
  border-bottom: 1px solid var(--hairline-soft);
  background-color: var(--surface);
}

.hc-page .collapsible-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hc-page .collapsible-nav-list > li { margin: 0; }
.hc-page .collapsible-nav-list a,
.hc-page .collapsible-nav-list > li > span {
  display: inline-block;
  padding: 12px 14px;
  font: 600 14px/20px var(--font);
  color: var(--fg-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.hc-page .collapsible-nav-list a:hover { color: var(--navy); }
.hc-page .collapsible-nav-list li.current > a,
.hc-page .collapsible-nav-list li[aria-selected="true"] {
  color: var(--fg);
  border-bottom-color: var(--yellow);
}

.hc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 18px;
  background-color: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  margin: 0 0 20px;
}
.hc-toolbar .search { flex: 1 1 220px; }
.hc-toolbar__field { display: grid; gap: 4px; }
.hc-page .hc-toolbar__field label {
  font: 600 11px/16px var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.hc-page .hc-toolbar select {
  height: 40px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background-color: var(--surface);
  font: 400 14px/38px var(--font);
  color: var(--fg);
  padding: 0 10px;
}

/* Requests table. Base Copenhagen already collapses this to stacked
   rows on mobile via .requests-table-meta, which is left intact. */
.hc-page .my-activities-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 14px/20px var(--font);
}
.hc-page .my-activities-table th {
  text-align: left;
  font: 600 11px/16px var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
}
.hc-page .my-activities-table th a { color: var(--fg-muted); text-decoration: none; }
.hc-page .my-activities-table th a:hover { color: var(--navy); text-decoration: underline; }
.hc-page .my-activities-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--hairline-soft);
  vertical-align: top;
}
.hc-page .my-activities-table tbody tr:hover { background-color: var(--canvas); }
.hc-page .striped-list-title { font-weight: 600; color: var(--navy); text-decoration: none; }
.hc-page .striped-list-title:hover { text-decoration: underline; }
.hc-page .request-closed td { color: var(--fg-muted); }

/* Status pills. Uses the DS semantic tints; each keeps its text label,
   so colour is never the only signal. */
.hc-page .status-label {
  display: inline-block;
  font: 600 11px/16px var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 3px 10px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.hc-page .status-label-new,
.hc-page .status-label-open {
  background-color: #FFF8E1; color: #8A5300; border-color: rgba(255,160,0,.35);
}
.hc-page .status-label-pending,
.hc-page .status-label-hold {
  background-color: #E3F2FD; color: #0D47A1; border-color: rgba(25,118,210,.3);
}
.hc-page .status-label-solved,
.hc-page .status-label-closed {
  background-color: #E8F5E9; color: #1B5E20; border-color: rgba(46,125,50,.3);
}

.hc-page .no-activities {
  background-color: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  padding: 28px;
  font: 400 15px/22px var(--font);
  color: var(--fg-muted);
  margin: 0;
}


/* ==================================================================
   15. REQUEST DETAIL  (request_page)
   ================================================================== */

/* ------------------------------------------------------------------
   LAYOUT FIX, diagnosed 2026-07-26 from Daniel's screenshot ("column
   sizing and text size look off").

   Base Copenhagen sets, at min-width 1024px:
       .request-sidebar { width: 30%; padding: 0 20px; font-size: 13px }
   That was written for a FLEX row, where 30% resolves against the flex
   container. Once this element becomes a GRID item, `width: 30%`
   resolves against its own grid TRACK instead — 30% of a ~300px track
   is ~90px, which is exactly the squeezed column in the screenshot,
   with "July 24, 2026" wrapping onto three lines.

   So the track is pinned to a fixed width AND the inherited width /
   padding / font-size are all reset below. Worth remembering as a
   general trap: percentage widths written for flex children silently
   change meaning when the parent becomes a grid.
   ------------------------------------------------------------------ */
.hc-request { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px)  { .hc-request { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; } }
@media (min-width: 1100px) { .hc-request { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; } }

.hc-page .request-sidebar,
.hc-page .request-main {
  width: auto;
  flex: initial;
  min-width: 0;
}
.hc-page .request-sidebar {
  border: 0;
  padding: 0;
  font-size: inherit;
  background-color: transparent;
}
/* The base .collapsible-sidebar carries `max-height:45px; overflow:hidden`
   for the mobile collapse and, at >=1024px, its own grey padding. The
   collapse behaviour is kept — it is what the toggle button drives — but
   the desktop padding and background are replaced by the card below. */
@media (min-width: 1024px) {
  .hc-page .request-sidebar,
  .hc-page .collapsible-sidebar {
    padding: 0;
    background-color: transparent;
    max-height: none;
    overflow: visible;
  }
}
/* Sidebar becomes one grey card, matching the tree groups. */
@media (min-width: 900px) {
  .hc-request__side .collapsible-sidebar-body {
    background-color: var(--canvas);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--r-md);
    padding: 18px;
  }
}

.hc-page .comment-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 16px; }

.hc-page .comment {
  background-color: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: 18px;
}
/* An agent reply is the answer the requester is waiting for — give it a
   left accent so it is findable in a long thread. */
.hc-page .comment.comment--agent { border-left: 3px solid var(--yellow); }

.hc-page .comment-author { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.hc-page .comment-avatar { position: relative; flex: 0 0 36px; }
.hc-page .comment-avatar .user-avatar { width: 36px; height: 36px; border-radius: var(--r-pill); display: block; }
.hc-page .comment-meta span { font: 600 14px/20px var(--font); color: var(--fg); }
.hc-page .comment-meta a { color: var(--fg); text-decoration: none; }
.hc-page .comment-meta a:hover { text-decoration: underline; }
.hc-page .meta-group { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.hc-page .meta-data { font: 400 12px/18px var(--font); color: var(--fg-muted); }

.hc-page .comment-body { font: 400 14.5px/23px var(--font); color: var(--fg); }
.hc-page .comment-body p { margin: 0 0 12px; }
.hc-page .comment-body :last-child { margin-bottom: 0; }

.hc-page .attachments { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.hc-page .attachment-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 13px/20px var(--font);
  background-color: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
  padding: 8px 10px;
}
.hc-page .attachment-icon { width: 14px; height: 14px; color: var(--fg-muted); flex: 0 0 14px; }

.hc-page .comment-form {
  background-color: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  padding: 18px;
  display: flex;
  gap: 14px;
}
.hc-page .comment-container { flex: 1 1 auto; min-width: 0; }
.hc-page .comment-form textarea {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background-color: var(--surface);
  font: 400 15px/24px var(--font);
  padding: 12px;
  color: var(--fg);
}
.hc-page .comment-form textarea:focus {
  border-color: #1976D2;
  box-shadow: 0 0 0 3px rgba(25,118,210,.18);
  outline: none;
}
.hc-page .comment-form-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

/* Submit is the one yellow accent on this page. */
.hc-page .comment-form input[type="submit"],
.hc-page .request-submit-comment input[type="submit"] {
  background-color: var(--yellow);
  border: 1px solid var(--yellow);
  color: var(--navy-dark);
  font: 600 14px/20px var(--font);
  letter-spacing: 0.02em;
  border-radius: var(--r-sm);
  padding: 11px 20px;
  cursor: pointer;
}
.hc-page .comment-form input[type="submit"]:hover { background-color: var(--yellow-hover); }

.hc-page .button-secondary,
.hc-page .mark-as-solved {
  background-color: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
  font: 600 14px/20px var(--font);
  border-radius: var(--r-sm);
  padding: 10px 18px;
  cursor: pointer;
}
.hc-page .mark-as-solved:hover { background-color: var(--navy); color: #FFFFFF; }

/* Sidebar */
.hc-request__side { align-self: start; }
.hc-page .collapsible-sidebar-title {
  font: 600 11px/16px var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 12px;
}
.hc-page .request-details {
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--hairline-soft);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}
.hc-page .request-details:last-child { border-bottom: 0; padding-bottom: 0; }

/* Consecutive detail groups that should read as ONE block. Needed because
   the organisation <select> must live inside its own <form>, and a <form>
   cannot legally sit inside a <dl> — see the note in request_page.hbs. So
   one logical group is three <dl>s, and these two suppress the divider. */
.hc-page .request-details--cont {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.hc-page .request-details--cont:empty { display: none; }
.hc-page .request-details dt {
  font: 600 10.5px/15px var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-top: 12px;
}
.hc-page .request-details dt:first-child { margin-top: 0; }
.hc-page .request-details dd {
  font: 400 13.5px/19px var(--font);
  color: var(--fg);
  margin: 2px 0 0;
  overflow-wrap: break-word;
}
.hc-page .request-collaborators { list-style: none; margin: 0; padding: 0; }


/* ==================================================================
   16. ERROR PAGE
   ================================================================== */

.hc-error {
  max-width: 620px;
  margin: 56px auto 72px;
  text-align: center;
}
.hc-error__badge {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: var(--r-md);
  background-color: var(--canvas);
  border: 1px solid var(--hairline-soft);
  color: var(--navy);
  display: grid;
  place-items: center;
}
.hc-error__badge svg { width: 28px; height: 28px; }
.hc-page .hc-error__title {
  font: 800 clamp(26px, 4vw, 34px)/1.2 var(--font);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.hc-page .hc-error__msg { font: 400 16px/24px var(--font); color: var(--fg-muted); margin: 0 0 8px; }
.hc-error__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
}
.hc-error__search { max-width: 380px; margin: 24px auto 0; }


/* ==================================================================
   17. RESPONSIVE TRIM — inner pages
   ================================================================== */

@media (max-width: 599px) {
  .hc-subnav { padding: 14px 0; margin-bottom: 20px; }
  .hc-tree { gap: 28px; }
  .hc-page .comment { padding: 14px; }
  .hc-page .comment-form { flex-direction: column; padding: 14px; }
  .hc-toolbar { padding: 14px; }
  .hc-error { margin: 36px auto 48px; }
}

/* ==================================================================
   18. ARTICLE PAGE
   ------------------------------------------------------------------
   Added 2026-07-26. Brings article_page into line with the rest.

   WHAT IS DELIBERATELY NOT TOUCHED
   The 2026-07-21 block earlier in this file already tuned the article
   BODY — h2/h3/h4 hierarchy, figure captions, borderless tables, image
   max-width, wider column. That was Daniel's own work and it stays.
   Nothing here restyles `.article-body` headings, tables or figures.

   TWO THINGS THAT DO GET OVERRIDDEN, both deliberate:

   1. FONT. The 07-21 block sets `.article-body { font-family: Roboto…}`
      directly. A direct rule beats inheritance, so with the rest of the
      theme on Inter the article body would have stayed Roboto — two
      typefaces on one page. `.hc-page .article-body` (0,2,0) wins it
      back to the Inter-first stack, which is what the DS asks for
      (Inter is its sole brand family). Roboto is still the immediate
      fallback, so nothing breaks if Inter fails to load.

   2. LINK COLOUR — the exception to section 11. Everywhere else in
      .hc-page links are navy. Inside `.article-body` they stay MUI blue
      `#1976D2`, because that is exactly the case I argued for when the
      navy decision was made: a link inside a paragraph of prose is the
      one place a link genuinely must stand out mid-sentence. Navy body
      links would read as bold text, not as links.
   ================================================================== */

.hc-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
@media (min-width: 1024px) {
  .hc-article { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; }
}

/* ---- Sidebar: other articles in this section ---- */
.hc-article__side { align-self: start; }

/* Base sets .article-sidebar { width } / .collapsible-sidebar padding for a
   flex layout — same percentage-in-a-grid trap the request page hit. Reset. */
.hc-page .article-sidebar {
  width: auto;
  flex: initial;
  padding: 0;
  border: 0;
  background-color: transparent;
}
@media (min-width: 1024px) {
  .hc-page .article-sidebar .collapsible-sidebar {
    padding: 0;
    background-color: transparent;
    max-height: none;
    overflow: visible;
  }
  .hc-article__side .collapsible-sidebar-body {
    background-color: var(--canvas);
    border: 1px solid var(--hairline-soft);
    border-radius: var(--r-md);
    padding: 14px;
  }
}
.hc-page .sidenav-title {
  display: block;
  font: 600 11px/16px var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 10px;
}
.hc-article__side .collapsible-sidebar-body ul { list-style: none; margin: 0; padding: 0; }

.hc-page .article-sidebar .sidenav-item {
  display: block;
  padding: 7px 10px;
  margin: 0 -10px;
  border-radius: var(--r-sm);
  font: 400 13px/18px var(--font);
  color: var(--fg-secondary);
  text-decoration: none;
}
.hc-page .article-sidebar .sidenav-item:hover {
  background-color: var(--surface);
  color: var(--navy);
}
/* The article you are reading. Yellow inset rule, same device as the
   active search filter, so "you are here" reads the same way everywhere. */
.hc-page .article-sidebar .sidenav-item.current-article {
  background-color: var(--surface);
  color: var(--fg);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--yellow);
}
.hc-page .article-sidebar-item {
  display: inline-block;
  margin-top: 10px;
  font: 600 12px/16px var(--font);
  color: var(--navy);
  text-decoration: none;
}
.hc-page .article-sidebar-item:hover { text-decoration: underline; }

/* ---- Article header ---- */
.hc-page .article-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 0 0 24px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--hairline-soft);
}
.hc-page .article-title {
  flex: 1 1 100%;
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
}
.hc-page .article-title .icon-lock { width: 18px; height: 18px; color: var(--fg-muted); vertical-align: 2px; }

.hc-page .article-author { display: flex; align-items: center; gap: 10px; }
.hc-page .article-avatar { flex: 0 0 36px; position: relative; }
.hc-page .article-avatar .user-avatar { width: 36px; height: 36px; border-radius: var(--r-pill); display: block; }
.hc-page .article-meta a { font: 600 14px/20px var(--font); color: var(--fg); text-decoration: none; }
.hc-page .article-meta a:hover { text-decoration: underline; }
.hc-page .article-subscribe { flex: 0 0 auto; }

/* ---- Body ---- */
.hc-page .article-body,
.hc-page .comment-body { font-family: var(--font); }

.hc-page .article-body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--fg);
  /* No measure cap — per Daniel 2026-07-26, body text runs the full
     column width so it matches the tables and images beside it.
     The honest trade-off: long lines make the eye harder to return to
     the right next line. The mitigation is the generous 1.68 line-height
     set in section 20, which is why it is 1.68 rather than ~1.5. If long
     paragraphs ever feel like work to read, `max-width: 76ch` here is
     the one-line change that fixes it. */
}
.hc-page .article-body > :first-child { margin-top: 0; }

/* The one place links stay MUI blue. See the note at the top. */
.hc-page .article-body a { color: var(--link); }
.hc-page .article-body a:hover { color: #1565C0; }

.hc-page .article-body ul,
.hc-page .article-body ol { padding-left: 22px; margin: 0 0 16px; }
.hc-page .article-body li { margin: 0 0 6px; }

/* ---- List spacing corrections, 2026-07-26 -------------------------
   FIX 5. NESTED LISTS WERE INHERITING THE TOP-LEVEL BOTTOM MARGIN.
   The base sheet zeroes nested list margins at line 1352:

     .article-body li > ul, .article-body ul > ul, ...  { margin: 0 }
       -> specificity (0,1,2)

   but my rule two lines above is

     .hc-page .article-body ul                          { margin: 0 0 16px }
       -> specificity (0,2,1)

   (0,2,1) beats (0,1,2) because class count is compared before element
   count. So EVERY nested sub-list picked up a 16px bottom margin the
   base sheet had deliberately removed, and the gap compounded at each
   level. That is the airy jump-link TOC: the gaps sit exactly where a
   nested <ul> closes, not between ordinary items.

   Re-zeroing it here rather than lowering the 16px, because the 16px is
   correct for a top-level list separating two paragraphs. */
.hc-page .article-body :is(li, ul, ol) > :is(ul, ol) {
  margin-top: 0;
  margin-bottom: 0;
}

/* FIX 6. A <p> WRAPPED AROUND A SINGLE LIST ITEM'S CONTENT.
   The editor sometimes emits <li><p>text</p></li> — the "Add Vendors"
   TOC row is one — and that paragraph brings its own 14px bottom margin
   into a list that has no other paragraphs. Only collapsed when the
   paragraph is the item's ONLY child, so genuine multi-paragraph steps
   (a sentence plus a figure, which the numbered procedures rely on)
   keep their spacing. */
.hc-page .article-body li > p:only-child { margin: 0; }

/* FIX 7. JUMP-LINK TOCs RIDE TIGHTER THAN PROSE LISTS.
   Detected, not classed: a list whose items are in-page fragment links
   is a table of contents. Prose lists keep the 6px because their items
   often wrap to two or three lines and need the separation; a TOC is
   one line per row and reads better tight, which is what the Zendesk
   editor shows.

   A false positive here is harmless — a slightly tighter list. */
.hc-page .article-body ul:is(:has(> li > a[href^="#"]), :has(> li > p > a[href^="#"])),
.hc-page .article-body ul:is(:has(> li > a[href^="#"]), :has(> li > p > a[href^="#"])) :is(ul, ol) {
  padding-left: 20px;
}
.hc-page .article-body ul:is(:has(> li > a[href^="#"]), :has(> li > p > a[href^="#"])) li {
  margin: 0 0 2px;
}
.hc-page .article-body code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.9em;
  background-color: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-xs, 2px);
  padding: 1px 5px;
}
.hc-page .article-body blockquote {
  margin: 18px 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--yellow);
  color: var(--fg-secondary);
}

.hc-page .article-attachments { margin-top: 24px; }

/* ---- Footer: share, comment count, votes, callout ---- */
.hc-page .article-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-soft);
}
.hc-page .article-comment-count {
  font: 600 13px/18px var(--font);
  color: var(--navy);
  text-decoration: none;
}
.hc-page .article-comment-count svg { width: 12px; height: 12px; vertical-align: -1px; }

/* "Was this article helpful?" — the vote pair. Base paints .article-vote
   navy via the 07-21 block; these make the two read as one control and
   give the chosen answer a filled state. */
.hc-page .article-votes {
  background-color: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin: 24px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.hc-page .article-votes-question {
  font: 600 15px/22px var(--font);
  color: var(--fg);
  flex: 1 1 auto;
}
.hc-page .article-votes-controls { display: flex; gap: 8px; }
.hc-page .article-vote {
  background-color: transparent;
  border: 1px solid var(--navy);
  border-radius: var(--r-sm);
  color: var(--navy);
  font: 600 13px/18px var(--font);
  padding: 8px 18px;
  width: auto;
  cursor: pointer;
}
.hc-page .article-vote:hover { background-color: var(--navy); color: #FFFFFF; }
.hc-page .article-vote.button-primary {
  background-color: var(--navy);
  border-color: var(--navy);
  color: #FFFFFF;
}
.hc-page .article-votes-count { font: 400 12px/16px var(--font); color: var(--fg-muted); flex: 0 0 100%; }

.hc-page .article-more-questions {
  font: 400 14px/22px var(--font);
  color: var(--fg-secondary);
  margin: 20px 0;
}
.hc-page .article-return-to-top a {
  font: 600 13px/18px var(--font);
  color: var(--navy);
  text-decoration: none;
}

/* ---- Recently viewed / related ---- */
.hc-page .article-relatives {
  display: grid;
  gap: 24px;
  margin: 32px 0;
}
@media (min-width: 700px) { .hc-page .article-relatives { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hc-page .recent-articles,
.hc-page .related-articles {
  background-color: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.hc-page .recent-articles h3,
.hc-page .related-articles h3,
.hc-page .recent-articles-title,
.hc-page .related-articles-title {
  font: 600 11px/16px var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 10px;
}
.hc-page .recent-articles ul,
.hc-page .related-articles ul { list-style: none; margin: 0; padding: 0; }
.hc-page .recent-articles li,
.hc-page .related-articles li { border-bottom: 1px solid var(--hairline); }
.hc-page .recent-articles li:last-child,
.hc-page .related-articles li:last-child { border-bottom: 0; }
.hc-page .recent-articles a,
.hc-page .related-articles a {
  display: block;
  padding: 8px 8px;
  margin: 0 -8px;
  border-radius: var(--r-sm);
  font: 400 13.5px/19px var(--font);
  color: var(--fg);
  text-decoration: none;
}
.hc-page .recent-articles a:hover,
.hc-page .related-articles a:hover { background-color: var(--surface); color: var(--navy); }

/* ---- Comments ---------------------------------------------------
   The .comment card styling from section 15 already applies here, since
   both templates use .comment / .comment-body / .comment-author. Only
   the article-specific chrome is below. ------------------------------ */
.hc-page .article-comments { margin-top: 40px; }
.hc-page .comment-overview {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline-soft);
}
.hc-page .comment-heading {
  font: 700 20px/28px var(--font);
  color: var(--fg);
  margin: 0;
}
.hc-page .comment-callout { font: 400 13px/18px var(--font); color: var(--fg-muted); margin: 0; }
.hc-page .comment-sorter { margin-left: auto; }
.hc-page .comment-sorter .dropdown-toggle {
  font: 600 13px/18px var(--font);
  color: var(--navy);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 7px 12px;
  cursor: pointer;
}
.hc-page .comment-sorter .dropdown-toggle:hover { border-color: var(--navy); }

.hc-page .comment-labels { display: flex; gap: 6px; margin-left: auto; }
.hc-page .escalation-badge {
  background-color: var(--canvas);
  color: var(--navy);
  border: 1px solid var(--hairline);
  text-decoration: none;
}

.hc-page .comment-actions-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline-soft);
}
.hc-page .comment-vote { display: flex; align-items: center; gap: 6px; }
.hc-page .vote-up,
.hc-page .vote-down {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--fg-muted);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
}
.hc-page .vote-up:hover,
.hc-page .vote-down:hover { color: var(--navy); background-color: var(--canvas); }
.hc-page .vote-voted { color: var(--navy); border-color: var(--hairline); }
.hc-page .vote-sum { font: 600 13px/18px var(--font); color: var(--fg); min-width: 18px; text-align: center; }
.hc-page .comment-actions .dropdown-toggle { color: var(--fg-muted); }

.hc-page .comment-form .comment-container { width: 100%; }

/* ---- Article page responsive trim ---- */
@media (max-width: 699px) {
  .hc-page .article-header { padding-bottom: 16px; margin-bottom: 18px; }
  .hc-page .article-body { font-size: 15px; }
  .hc-page .article-votes { padding: 14px 16px; }
  .hc-page .comment-overview { gap: 6px 10px; }
  .hc-page .comment-sorter { margin-left: 0; }
}

/* ==================================================================
   20. ARTICLE BODY — heading scale, tables, captions, callouts
   ------------------------------------------------------------------
   Added 2026-07-26 in answer to four questions from Daniel.

   ------------------------------------------------------------------
   A. THE HEADING SCALE HAD A REAL BREAK
   ------------------------------------------------------------------
   Measured against the 15.5px body I had set:
       h2   24px / 700   1.55x body
       h3   19px / 600   1.23x body
       h4   16px / 600   1.03x body   <-- only 0.5px larger than body
   An h4 half a pixel bigger than a paragraph is not a heading; it is
   bold text. Weight was doing all the work.

   Worse, h5 and h6 were never defined, so inside the article body they
   fell through to UA defaults — h5 ~0.83em (~12.9px) and h6 ~0.67em
   (~10.4px), both SMALLER than body text. Any article using h5 had an
   inverted hierarchy.

   Fixed with a proper progression. Body drops half a point to 15px so
   every step is unambiguous:
       h2   25px / 700   1.67x
       h3   20px / 700   1.33x
       h4   17px / 700   1.13x
       h5   15px / 700   1.00x  — same size, uppercase overline instead
       h6   15px / 600   1.00x  — same size, italic; last resort
   h2 and h3 keep the character of Daniel's 07-21 choices, just nudged
   for clearance. h5/h6 stop competing on size and differentiate by
   treatment instead, which is the honest way to run out of levels.

   These are scoped to `.hc-page .article-body`, so Daniel's global
   h2/h3/h4 rules still govern everywhere else and nothing outside the
   article body changes.

   ------------------------------------------------------------------
   B. CAPTIONS — UNCHANGED, and they were never broken
   ------------------------------------------------------------------
   The 07-21 figcaption rules are intact: box hugs the image width, grey
   #f4f5f6 fill, centred, 13px, flush beneath. They "disappeared" only
   because my earlier mock-up contained no captioned figure. There is
   one addition below — a `figure` margin reset so the caption cannot be
   pushed away from its image by inherited paragraph spacing — and the
   caption font-size is now expressed relative to the body so it stays
   smaller than paragraph text if the body size is ever changed again.

   ------------------------------------------------------------------
   C. TABLES
   ------------------------------------------------------------------
   The house default stays BORDERLESS with a grey header row, exactly as
   the 07-21 block sets it. Untouched.

   Added: an OPT-IN `.hc-datatable` class for tables that carry real
   data rather than layout. Multi-row figures are genuinely hard to read
   without row separators — the eye loses the line. Add the class in the
   Zendesk editor's source view when a table has more than about three
   rows of numbers. Borderless remains what you get by default.

   ------------------------------------------------------------------
   D. CALLOUTS — Pro Tip and Knowledge
   ------------------------------------------------------------------
   The house pattern is a borderless two-column table, badge left, text
   right in #2F3941, and that keeps working untouched — the 07-21 rules
   already skip it via :not([style*="border-style: none"]).

   Added below is an OPTIONAL class-based version, `.hc-note`, that
   produces a tidier result with less inline styling: a tinted panel with
   the badge and the text properly aligned, and it degrades to a plain
   bordered block if the CSS ever fails to load. Two variants:
     .hc-note--tip        warm amber field, for pro-tip-badge.png
     .hc-note--knowledge  grey field,       for knowledge.png
   Both patterns are supported. The inline table is still valid for
   anything already published; use whichever suits the article.

   COLOURS ARE SAMPLED FROM THE BADGES, not taken from DS tokens.
   Revised 2026-07-26 after Daniel asked for the panel to match the badge
   better. Sampling the two PNGs explained the mismatch:
     pro-tip-badge.png  81% of pixels are #3C546C — NOT the DS navy
                        #3C4A5C. Bluer and a shade lighter.
     knowledge.png      #30303C dark + #FCD854 yellow — NOT the DS
                        yellow #FCBA03. Softer and lighter.
   The panel had been built from DS tokens while the badges were built
   from their own palette, which is precisely what looked off.

   And one measurable problem: the old bright-yellow left rule scored
   only **1.62:1** against its own yellow field — below the 3.0 non-text
   threshold, so it barely registered. Even the deeper #E8890B only
   reaches 2.47. A yellow rule on a yellow panel cannot work.

   So each variant now takes its rule and border from its own badge:
     tip        rule #3C546C  = 8.5:1 on the amber field
     knowledge  rule #30303C  from knowledge.png
   Two navy-ish elements now bracket the warm field, so the badge reads
   as part of the panel rather than dropped onto it. House text colour
   #2F3941 is unchanged and measures 11.09:1 on the amber field.

   The values are exposed as custom properties immediately below, so
   changing a badge later means editing two lines, not hunting rules.
   ================================================================== */

/* ---- A. Heading scale inside the article body ---- */
.hc-page .article-body { font-size: 15px; line-height: 1.68; }

.hc-page .article-body h2 {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 36px 0 12px;
}
.hc-page .article-body h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--fg);
  margin: 28px 0 8px;
}
.hc-page .article-body h4 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.38;
  color: #3b444b;              /* Daniel's 07-21 colour, kept */
  margin: 22px 0 6px;
}
/* Out of size headroom — differentiate by treatment, not scale. */
.hc-page .article-body h5 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  margin: 20px 0 4px;
}
.hc-page .article-body h6 {
  font-size: 15px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.4;
  color: var(--fg-secondary);
  margin: 18px 0 4px;
}
/* A heading should never be the first thing to add space at the top. */
.hc-page .article-body > :first-child { margin-top: 0; }
.hc-page .article-body p { margin: 0 0 14px; }

/* ---- B. Captions: keep the 07-21 look, remove one failure mode ---- */
/* FIX 8 (2026-07-26) — this was `margin: 18px 0`, and the shorthand
   set margin-left AND margin-right to 0. A figure with a width (the
   editor writes `style="width: 41.01%"` on every resized image) centres
   itself with `margin-left/right: auto`, so zeroing those sides pinned
   every resized image hard left no matter what alignment was chosen in
   the editor. Exactly the same shorthand mistake as the nested-list
   margins in FIX 5. Only the vertical margin is set now. */
.hc-page .article-body figure { margin-top: 18px; margin-bottom: 18px; }
.hc-page .article-body figure > img { display: block; margin: 0; }
.hc-page .article-body figcaption {
  /* relative to the body, so it stays smaller if body size changes */
  font-size: 0.867em;          /* 13px against a 15px body */
  line-height: 1.45;
  text-align: center;
  color: #5b656d;
  background-color: #f4f5f6;
  padding: 7px 12px;
  border-radius: 0 0 3px 3px;
  margin: 0;
}

/* ---- C. Opt-in data table ---- */
.hc-page .article-body table.hc-datatable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 18px 0;
}
.hc-page .article-body table.hc-datatable th {
  background-color: var(--canvas);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--hairline);
}
.hc-page .article-body table.hc-datatable td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline-soft);
  vertical-align: top;
}
.hc-page .article-body table.hc-datatable tbody tr:last-child td { border-bottom: 0; }
/* Numeric columns line up when they are actually numbers. */
.hc-page .article-body table.hc-datatable td.num,
.hc-page .article-body table.hc-datatable th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Long tables get a scroll container rather than breaking the layout.
   Wrap the table in <div class="hc-tablewrap"> when it has many columns. */
.hc-page .article-body .hc-tablewrap {
  overflow-x: auto;
  margin: 18px 0;
  -webkit-overflow-scrolling: touch;
}
.hc-page .article-body .hc-tablewrap > table { margin: 0; }

/* ---- D. Optional class-based callouts ----
   Sampled badge colours, kept as properties so a future badge change is
   a two-line edit. See the note at the top of this section. */
.hc-page .article-body {
  --tip-field:  #FFF8E1;   /* warm amber, DS amber-50 — text on it is 11.09:1 */
  --tip-ink:    #3C546C;   /* sampled: 81% of pro-tip-badge.png */
  --note-field: #F5F7FA;   /* canvas grey */
  --note-ink:   #30303C;   /* sampled: the dark in knowledge.png */
  --note-text:  #2F3941;   /* house callout text colour, unchanged */
}

.hc-page .article-body .hc-note {
  display: flex;
  align-items: center;        /* badge dead-centre against the text, per Daniel */
  gap: 14px;
  margin: 20px 0;
  padding: 16px 18px;
  border: 1px solid var(--hairline-soft);
  border-left: 4px solid var(--hairline);
  border-radius: var(--r-md);
  background-color: var(--note-field);
  color: var(--note-text);
  font-size: 14.5px;
  line-height: 1.6;
}
.hc-page .article-body .hc-note > img,
.hc-page .article-body .hc-note__badge {
  flex: 0 0 auto;
  margin: 0;
  max-width: 124px;
  height: auto;
}
.hc-page .article-body .hc-note__body { min-width: 0; }
.hc-page .article-body .hc-note__body > :first-child { margin-top: 0; }
.hc-page .article-body .hc-note__body > :last-child { margin-bottom: 0; }

/* Pro Tip — warm field, rule and border taken from the badge's own navy
   so the two relate. The old yellow-on-yellow rule measured 1.62:1. */
.hc-page .article-body .hc-note--tip {
  background-color: var(--tip-field);
  border-color: rgba(60, 84, 108, 0.18);
  border-left-color: var(--tip-ink);
}
/* Knowledge / general note — grey field, rule from knowledge.png's dark.
   Grey rather than amber keeps the two callout types distinguishable at a
   glance, with the badge itself doing the rest of the work. */
.hc-page .article-body .hc-note--knowledge {
  background-color: var(--note-field);
  border-color: rgba(48, 48, 60, 0.14);
  border-left-color: var(--note-ink);
}
.hc-page .article-body .hc-note--knowledge .hc-note__badge { width: 44px; }

@media (max-width: 599px) {
  .hc-page .article-body .hc-note { flex-direction: column; gap: 10px; }
}

/* ==================================================================
   21. CALLOUT TABLES — auto-detected, no classes required
   ------------------------------------------------------------------
   Added 2026-07-26. REWRITTEN 2026-07-26 (see FIX NOTES below).
   Daniel's Pro Tip and Note blurbs are built as two-column tables in
   the Zendesk editor. He wanted them to diverge from ordinary data
   tables automatically, without adding a class by hand to each one.
   So detection is by the badge image inside the table.

   ------------------------------------------------------------------
   FIX NOTES — 2026-07-26, second pass
   ------------------------------------------------------------------
   Two real defects found against the live Purchase Orders article:

   1. THE NOTE CALLOUTS NEVER MATCHED AT ALL.
      Zendesk renames pasted images to `blobid0.png`, `blobid1.png`, ...
      Every Note badge in the PO article carries alt="blobid0.png", so
      `alt*="knowledge"` and `alt="Note"` both missed, and those tables
      fell through to the ordinary data-table styling. That is the
      "legacy looking" callout.
      FIX: match on the hosted /guide-media/ IDs, which are stable and
      shared across every article. This is now the PRIMARY hook; alt
      text is the fallback, not the other way round, because alt is the
      one thing the editor rewrites without asking.

        Pro Tip badge  /guide-media/01GV8BH9W9KF5KNCKQA1R7G2GA
        Note badge     /guide-media/01GV8TBMZFXYW1Z48A7GTP4SBX

      Deliberately NOT matching `alt*="blobid"` — that is the generic
      name for any pasted image, including screenshots inside genuine
      data tables. It would produce false positives.

   2. WHITE STRIP THROUGH THE TINTED FIELD.
      Some callout text is wrapped in
      `<span style="background-color: #FFFFFF; color: #2F3941;">`,
      left over from the old white-background treatment. Inline styles
      beat stylesheet rules, so that span paints a white rectangle over
      the amber field. Visible as a white bar behind the sentence.
      FIX: neutralise inline backgrounds INSIDE a detected callout only
      (see "inline-background neutraliser" below). `!important` is
      required here — nothing else beats an inline declaration — and it
      is scoped so tightly that it cannot leak into article content.
      The inline `color` is left alone; #2F3941 is the correct ink.

   ------------------------------------------------------------------
   WHY :is() INSTEAD OF SPELLING OUT EVERY COMBINATION
   ------------------------------------------------------------------
   The first version repeated an 11-selector list eight times, ~104
   selectors. Adding the two IDs above would have made it 13 x 8 = 104+.
   `:is()` collapses each block to one selector.

   Compatibility: no new risk. `:is()` shipped in Chrome 88 / Safari 14
   / Firefox 78, which is EARLIER than `:has()` (Chrome 105 / Safari
   15.4 / Firefox 121). Any browser that can run the `:has()` this
   section already depends on can run `:is()`.

   Specificity: unchanged. `:is()` takes the specificity of its most
   specific argument; every argument here is an attribute selector at
   (0,1,0), so the whole `:is()` contributes (0,1,0) exactly as a
   single `[attr]` did before.

   ------------------------------------------------------------------
   ADDING A NEW BADGE LATER
   ------------------------------------------------------------------
   Add its /guide-media/ ID (or filename fragment) to ONE list:
   --tip list  -> the `:is()` inside .hc-callout-tip-match  below
   --note list -> the `:is()` inside .hc-callout-note-match below
   Nothing else needs touching. The frame rules read both.

   `border-collapse: separate` is required — border-radius is ignored
   on a collapsed table, so the base `collapse` has to be undone.
   ================================================================== */

/* ------------------------------------------------------------------
   The two match lists. Kept adjacent so they are edited together.

   TIP  = Pro Tip badge
   NOTE = Knowledge / general note badge
   ------------------------------------------------------------------ */

/* ---- Shared callout-table frame (tip + note) ---- */
.hc-page .article-body table:has(img:is(
  [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"],   /* hosted Pro Tip badge  */
  [src*="52035965687955"],               /* legacy Pro Tip attachment */
  [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
  [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
  [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],   /* hosted Note badge     */
  [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
)) {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--r-md);
  margin: 20px 0;
  color: var(--note-text);
  font-size: 14.5px;
  line-height: 1.6;

  /* FIX 3 (2026-07-26, third pass) - the editor writes
     class="wysiwyg-table-resized" plus a <colgroup> on SOME callouts and
     not others. Zendesk's editor CSS pairs that class with
     table-layout: fixed, which turns the width: 1% badge-column trick
     below into a literal 1% (about 12px) and lets the 124px badge overflow
     into the text. Forcing auto layout makes width: 1% shrink-wrap as
     intended, so both table shapes behave identically. */
  table-layout: auto !important;
}

/* Kill the editor's <colgroup> widths inside callouts. They vary wildly
   across a single article (9%, 14%, 17%, 20%) and fight the badge column. */
.hc-page .article-body table:has(img:is(
  [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
  [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
  [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
  [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
  [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
)) > colgroup > col { width: auto !important; }

/* Cells: no borders, no grey header row, vertically centred so the
   badge sits dead-centre against however many lines of text there are.
   The inline `border-style: none` the editor writes on these tds is
   harmless — it agrees with us. */
.hc-page .article-body table:has(img:is(
  [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
  [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
  [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
  [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
  [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
)) :is(td, th) {
  border: 0;
  background-color: transparent;
  padding: 16px 10px;
  vertical-align: middle;
  text-align: left;
}

/* Badge column. `width: 1%` + nowrap shrink-wraps it regardless of the
   colgroup or inline td widths the editor leaves behind (those vary
   from 9% to 20% across the PO article and must not be trusted). */
.hc-page .article-body table:has(img:is(
  [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
  [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
  [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
  [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
  [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
)) td:first-child {
  width: 1% !important;      /* beats the inline width="19.4286%" */
  white-space: nowrap;
  padding-left: 18px;
  padding-right: 6px;
}
.hc-page .article-body table:has(img:is(
  [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
  [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
  [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
  [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
  [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
)) td:last-child { padding-right: 18px; }

/* The badge itself. `figure.wysiwyg-image` wraps it in the editor, so
   the figure has to be flattened or it contributes its own margins. */
.hc-page .article-body table:has(img:is(
  [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
  [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
  [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
  [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
  [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
)) td:first-child :is(figure, figure.wysiwyg-image) {
  margin: 0;
  padding: 0;
  width: auto !important;    /* beats inline width: 41.01% etc. */
  display: block;
}
.hc-page .article-body table:has(img:is(
  [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
  [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
  [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
  [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
  [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
)) img {
  display: block;
  margin: 0;
  height: auto;
}

/* Inline-background neutraliser — DEFECT 2 above.
   Old callout text carries background-color: #FFFFFF inline, which
   punches a white strip through the tint. Only an `!important` beats
   an inline declaration. Scoped to inside a detected callout, so it
   cannot affect anything else in the article. */
.hc-page .article-body table:has(img:is(
  [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
  [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
  [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
  [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
  [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
)) [style*="background"] {
  background-color: transparent !important;
  background-image: none !important;
}

/* Collapse the editor's stray leading/trailing paragraph margins. */
.hc-page .article-body table:has(img:is(
  [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
  [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
  [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
  [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
  [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
)) td > :first-child { margin-top: 0; }
.hc-page .article-body table:has(img:is(
  [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
  [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
  [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
  [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
  [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
)) td > :last-child { margin-bottom: 0; }

/* ---- Pro Tip: warm field, rule from the badge's own #3C546C ----
   TIP MATCH LIST. Add new Pro Tip badge IDs here and to the frame
   lists above. */
.hc-page .article-body table:has(img:is(
  [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
  [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
  [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i]
)) {
  background-color: var(--tip-field);
  /* FIX 4 (2026-07-26, third pass) - !important is REQUIRED here.
     Some callout tables carry style="border-style: none;" inline, left
     over from the old borderless treatment. An inline border-style beats
     any stylesheet border, so the 4px left rule silently vanished on
     exactly those tables and survived on the ones without the attribute.
     That is the whole difference between the callouts that looked right
     and the ones that did not. */
  border: 1px solid rgba(60, 84, 108, 0.18) !important;
  border-left: 4px solid var(--tip-ink) !important;
}
.hc-page .article-body table:has(img:is(
  [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
  [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
  [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i]
)) td:first-child img { max-width: 124px; }
/* Guard the badge column against being squeezed narrower than the badge
   itself, whatever the colgroup asked for. 124px badge + 18px/6px pads. */
.hc-page .article-body table:has(img:is(
  [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
  [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
  [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i]
)) td:first-child { min-width: 148px; }

/* ---- Knowledge / Note: grey field, rule from knowledge.png's #30303C ----
   NOTE MATCH LIST. */
.hc-page .article-body table:has(img:is(
  [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
  [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
)) {
  background-color: var(--note-field);
  /* See FIX 4 above - same inline border-style: none problem. */
  border: 1px solid rgba(48, 48, 60, 0.14) !important;
  border-left: 4px solid var(--note-ink) !important;
}
.hc-page .article-body table:has(img:is(
  [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
  [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
)) td:first-child img { max-width: 44px; }
/* Same guard, sized for the 44px knowledge badge. */
.hc-page .article-body table:has(img:is(
  [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
  [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
)) td:first-child { min-width: 68px; }

/* Stack on phones — a 124px badge plus text in two columns is too
   tight below about 480px. */
@media (max-width: 479px) {
  .hc-page .article-body table:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  )) td { display: block; padding: 0 18px; }
  .hc-page .article-body table:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  )) td:first-child { width: auto !important; padding-top: 16px; padding-bottom: 8px; }
  .hc-page .article-body table:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  )) td:last-child { padding-bottom: 16px; }
}


/* ==================================================================
   22. DATA TABLES — house defaults that yield to the editor
   ------------------------------------------------------------------
   Added 2026-07-26. REVISED same day, see "SECOND PASS" below.

   WHY THIS SECTION EXISTS — my mistake, recorded so it is not repeated.
   Section 20 styled `table.hc-datatable`, and the article mockups used
   that class. No real article has it. Measured across the 2026-07-16
   export:

       tables in published articles ............ 321  (in 90 articles)
       carrying class="hc-datatable" ............. 0

   So every real table fell through to the base rules at line 4028 and
   looked nothing like the mockup. The mockup had quietly become the
   spec, the same way the preview harness's Material Icons did. Fixed by
   styling the BARE `table` element against the markup the editor really
   produces:

       <td> containing a <p> .................... 294   <- airy rows
       first row as <td><strong>Header</strong> . 195   <- not <th>
       real <th> ................................. 53
       real <thead> .............................. 16
       <colgroup> ................................ 11

   ------------------------------------------------------------------
   SECOND PASS — 2026-07-26. THE EDITOR WINS, NOT THIS SHEET.
   ------------------------------------------------------------------
   Daniel: the CSS must respect per-article text alignment, text
   formatting, image size and alignment, and any custom row/cell
   background. The first pass overrode all four. Removed:

   1. `> colgroup > col { width: auto !important }`  DELETED.
      This is what blew the status badges up. Those cells hold
      <figure style="width: 41.01%"> — a PERCENTAGE. Zeroing the
      colgroup let the column auto-size, the percentage resolved
      against a much wider column, and a 112px badge rendered
      enormous. The colgroup is the author sizing the column, so it
      stands. (Still zeroed for CALLOUT tables in section 21, where the
      badge column is a fixed 124px and the colgroup is noise.)

   2. `padding: ... !important`  DELETED. 28 cells carry an inline
      padding. That is a deliberate choice, so it wins now. The cost is
      that those cells sit at a slightly different rhythm; that is the
      author's call to make, not mine.

   3. Uppercase / letter-spacing / 12px / muted-grey HEADER TEXT
      DELETED. It fought the author's own bold and centring. The header
      row now gets only a tint and a hairline; whatever formatting and
      alignment you applied in the editor comes through untouched.

   4. `text-align: left`  DELETED. It silently beat
      `wysiwyg-text-align-center` on 276 cells. See section 23, which
      makes those classes actually work.

   PRINCIPLE for anything added here later: house style supplies the
   DEFAULT. Anything the author set explicitly — inline or via a
   wysiwyg-* class — must win. That means no `!important` in this
   section, and no property set here that the editor also exposes.
   ================================================================== */

.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 18px 0;
}

/* ---- Cells. No padding !important; inline padding wins. ---- */
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) :is(td, th) {
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) tr:last-child > :is(td, th) { border-bottom: 0; }

/* Vertical rhythm: prose reads better top-aligned, but a cell whose
   whole content is an image (status badges, button captures) should
   centre against the text beside it — which is what the editor shows. */
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) :is(td, th) { vertical-align: top; }
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) :is(td, th):has(> :is(img, figure, p > img, figure > img)) { vertical-align: middle; }

/* ---- Header row: tint and hairline ONLY. The author's bold, size and
        alignment are left alone. thead first, else the first row. ---- */
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) thead :is(th, td),
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))):not(:has(thead)) > tbody > tr:first-child > td,
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) > tbody > tr:first-child > th {
  background-color: var(--canvas);
  border-bottom: 1px solid var(--hairline);

  /* REVISED 2026-07-26 (Daniel): the house uppercase small-caps
     treatment IS wanted, but ONLY on the top row. Everything below the
     header row is left entirely to the editor.

     Note what is deliberately absent: `text-align`. The earlier version
     forced `left` and killed `wysiwyg-text-align-center` on the header
     cells — your "Status" column is centred and must stay centred. Case,
     size, tracking and colour are house style; alignment is yours. */
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  vertical-align: bottom;
}
/* ...but not if the author tinted the header themselves. */
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) thead :is(th, td)[style*="background"],
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))):not(:has(thead)) > tbody > tr:first-child > td[style*="background"],
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) > tbody > tr:first-child > th[style*="background"] {
  background-color: revert;
}

/* ---- Paragraphs and lists inside cells: the real cause of tall rows.
        294 cells wrap their text in a <p> that drags the body's 14px
        bottom margin into the cell. Margins only — no alignment, no
        size, no colour. ---- */
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) :is(td, th) > p:only-child { margin: 0; }
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) :is(td, th) > p { margin: 0 0 8px; }
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) :is(td, th) > p:last-child { margin-bottom: 0; }
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) :is(td, th) > :is(ul, ol) { margin: 0; padding-left: 18px; }
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) :is(td, th) > :is(ul, ol) li { margin: 0 0 4px; }
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) :is(td, th) > :is(ul, ol) li:last-child { margin-bottom: 0; }

/* Figures inside cells carry the editor's own width; strip only the
   vertical margin that section 20 gives standalone figures. */
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) :is(td, th) figure { margin-top: 0; margin-bottom: 0; }

/* ---- Zebra, very light — and ONLY on rows the author has not tinted.
        82 inline background-colors exist across the corpus (the PO
        status bands are 21 of them). A zebra stripe showing through an
        untinted cell in an otherwise coloured row looks like a bug. ---- */
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) > tbody > tr:nth-child(even):not(:has(> [style*="background"])) {
  background-color: rgba(244, 245, 246, 0.45);
}

/* ---- Wide tables scroll rather than break the column ---- */
@media (max-width: 599px) {
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) { display: block; overflow-x: auto; }
}


/* ==================================================================
   23. EDITOR INTENT — making the wysiwyg-* classes actually work
   ------------------------------------------------------------------
   Added 2026-07-26.

   In the article audit I reported that every `wysiwyg-*` class has zero
   rules in this stylesheet and concluded they were "inert, so they
   cannot conflict". That was half the story, and the half I missed is
   the one that matters here: INERT ALSO MEANS THE EDITOR'S CHOICES ARE
   SILENTLY DROPPED. Zendesk ships these rules in its own article CSS;
   a theme that replaces the stylesheet has to supply them again.

   Measured across the 2026-07-16 export (uses / rule present before):

       wysiwyg-list-color .......... 346 / missing
       wysiwyg-list-marker-color ... 334 / missing
       wysiwyg-font-size-medium .... 325 / missing
       wysiwyg-text-align-center ... 276 / missing
       wysiwyg-color-black70 ....... 231 / missing
       wysiwyg-image-resized ....... 171 / missing
       wysiwyg-table ............... 155 / missing
       wysiwyg-color-cyan130 ........ 65 / missing
       wysiwyg-table-align-left ..... 62 / missing
       wysiwyg-text-align-left ...... 51 / missing
       wysiwyg-underline ............ 50 / missing
       wysiwyg-indent1 .............. 47 / missing

   Roughly two thousand editor decisions with nothing behind them.

   WHAT IS IMPLEMENTED BELOW: alignment, font size, underline, indent,
   table alignment, resized images. All unambiguous — the class name
   states the intent exactly and there is nothing to guess.

   WHAT IS DELIBERATELY NOT IMPLEMENTED: the ~500 `wysiwyg-color-*`
   uses. Those names map to specific hex values in Zendesk's Garden
   palette and I do not know them; inventing them would put wrong
   colours on 500 spans, which is worse than leaving them inert. Left
   inert, that text falls back to the theme body colour, which is
   already contrast-checked — arguably the better outcome, and it keeps
   the AA work intact. If you want them restored, send me the palette
   from a published article's computed styles (devtools > pick a
   wysiwyg-color-black70 span > read the colour) and I will add them.
   Same reasoning for wysiwyg-list-color / wysiwyg-list-marker-color,
   which only carry colour.
   ================================================================== */

/* ---- Text alignment. 276 + 51 uses. ---- */
.hc-page .article-body .wysiwyg-text-align-left    { text-align: left; }
.hc-page .article-body .wysiwyg-text-align-center  { text-align: center; }
.hc-page .article-body .wysiwyg-text-align-right   { text-align: right; }
.hc-page .article-body .wysiwyg-text-align-justify { text-align: justify; }

/* ---- Font size. Relative to the body so it tracks the 15px base
        rather than pinning px sizes that break the heading scale. ---- */
.hc-page .article-body .wysiwyg-font-size-small   { font-size: 0.867em; }  /* ~13px */
.hc-page .article-body .wysiwyg-font-size-medium  { font-size: 1em; }      /* ~15px, the default */
.hc-page .article-body .wysiwyg-font-size-large   { font-size: 1.2em; }    /* ~18px */
.hc-page .article-body .wysiwyg-font-size-x-large { font-size: 1.6em; }    /* ~24px */

/* ---- Underline and bold-list. ---- */
.hc-page .article-body .wysiwyg-underline { text-decoration: underline; }
.hc-page .article-body .wysiwyg-list-bold { font-weight: 600; }

/* ---- Indent levels. Zendesk steps 30px per level. ---- */
.hc-page .article-body .wysiwyg-indent1 { margin-left: 30px; }
.hc-page .article-body .wysiwyg-indent2 { margin-left: 60px; }
.hc-page .article-body .wysiwyg-indent3 { margin-left: 90px; }
.hc-page .article-body .wysiwyg-indent4 { margin-left: 120px; }
.hc-page .article-body .wysiwyg-indent5 { margin-left: 150px; }

/* ---- Table alignment. 62 uses of -align-left. These sit on the
        <figure> wrapper, not the table. ---- */
.hc-page .article-body .wysiwyg-table-align-left   { margin-left: 0; margin-right: auto; }
.hc-page .article-body .wysiwyg-table-align-center { margin-left: auto; margin-right: auto; }
.hc-page .article-body .wysiwyg-table-align-right  { margin-left: auto; margin-right: 0; }

/* ---- Resized images. 171 uses. The editor puts a percentage width on
        the FIGURE and expects the image to fill it. Without this the
        image renders at its intrinsic size and ignores your resize. ---- */
.hc-page .article-body figure.wysiwyg-image-resized > img { width: 100%; height: auto; }

/* ---- Image alignment / float. 54 inline floats exist; these classes
        express the same intent. ---- */
.hc-page .article-body .wysiwyg-image-align-center { margin-left: auto; margin-right: auto; }
.hc-page .article-body .wysiwyg-image-align-left  { float: left;  margin: 4px 18px 12px 0; }
.hc-page .article-body .wysiwyg-image-align-right { float: right; margin: 4px 0 12px 18px; }
.hc-page .article-body .wysiwyg-float-left  { float: left;  margin: 4px 18px 12px 0; }
.hc-page .article-body .wysiwyg-float-right { float: right; margin: 4px 0 12px 18px; }

/* ---- IMAGE ALIGNMENT: centred everywhere (Daniel, 2026-07-26).
        Zendesk's editor centres figures by default; FIX 8 explains how
        this sheet was clobbering that with a margin shorthand. Now
        stated explicitly and applied to every figure in the article
        body, standalone captioned screenshots included, so the rendered
        article matches what the editor shows.

        Floated/explicitly-aligned figures are excluded so the
        wysiwyg-image-align-* and float classes still win. ---- */
.hc-page .article-body figure:not(.wysiwyg-image-align-left):not(.wysiwyg-image-align-right):not(.wysiwyg-float-left):not(.wysiwyg-float-right) {
  margin-left: auto;
  margin-right: auto;
}

/* ---- Sized images inside a data-table cell centre in their column.
        This is Zendesk's own editor default and what the PO status
        badges show in the editor: the figure carries a percentage width
        and centres on auto side-margins. FIX 8 above stopped this sheet
        from clobbering that; this states it explicitly so it does not
        depend on inheritance.

        SUPERSEDED IN PART: Daniel chose "centre all images" on
        2026-07-26, so the block ABOVE now centres every figure in the
        article body, standalone captioned screenshots included. These
        table-cell rules are kept because they also carry the per-cell
        left/right overrides below, which the global rule does not. ---- */
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) :is(td, th) > figure.wysiwyg-image,
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) :is(td, th) > p > figure.wysiwyg-image {
  margin-left: auto;
  margin-right: auto;
}
/* ...unless the cell explicitly asks for left or right. */
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) :is(td, th):is([style*="text-align: left"], :has(> .wysiwyg-text-align-left)) > figure.wysiwyg-image {
  margin-left: 0; margin-right: auto;
}
.hc-page .article-body table:not(:has(img:is(
    [src*="01GV8BH9W9KF5KNCKQA1R7G2GA"], [src*="52035965687955"],
    [alt*="pro tip" i], [alt*="pro-tip" i], [alt*="protip" i],
    [src*="pro tip" i], [src*="pro%20tip" i], [src*="pro-tip" i], [src*="protip" i],
    [src*="01GV8TBMZFXYW1Z48A7GTP4SBX"],
    [alt*="knowledge" i], [src*="knowledge" i], [alt="Note" i]
  ))) :is(td, th):is([style*="text-align: right"], :has(> .wysiwyg-text-align-right)) > figure.wysiwyg-image {
  margin-left: auto; margin-right: 0;
}
/* ==================================================================
   24. EXTERNAL DOC TILE (.hc-extdoc)
   ------------------------------------------------------------------
   Added 2026-07-27. Section-page promo linking out to
   docs.esubcloud.io. Renders only on section 53524169602323
   (REST API) via an {{#is}} guard in section_page.hbs.

   WHITE, NOT CANVAS — deliberate. The .hc-tree__group containers
   directly below this are canvas grey with a hairline and the same
   8px radius, so a canvas tile would read as one more tree group
   rather than as a promoted destination. White plus shadow-2 borrows
   the home page rail-card language, which is the pattern already
   established for "secondary destination worth noticing".

   CLASS IS DOUBLED (.hc-page .hc-extdoc) DELIBERATELY: a bare
   .hc-extdoc is (0,1,0) and loses to `.hc-page a` at (0,1,1) in
   section 11. Same trap that bit .hc-chip and the header nav links.
   The :hover rules are tripled for the same reason against
   `.hc-page a:hover` at (0,2,1).

   Shadows are literal rather than var(--shadow-3), because that token
   is referenced elsewhere in this file but never declared.
   ================================================================== */

.hc-page .hc-extdoc {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px;
  padding: 20px 24px;
  background-color: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-left: 4px solid var(--navy);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  color: var(--fg);
  text-decoration: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.hc-page .hc-extdoc:hover,
.hc-page .hc-extdoc:focus {
  box-shadow: 0 4px 8px rgba(16, 24, 40, 0.08), 0 12px 20px rgba(16, 24, 40, 0.10);
  border-color: var(--hairline);
  border-left-color: var(--navy);
  color: var(--fg);
  text-decoration: none;
}
.hc-page .hc-extdoc:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Medallion. Canvas fill on the white card, mirroring .hc-rail__icon
   (the module tiles invert this because their own field is grey). */
.hc-page .hc-extdoc__medallion {
  flex: 0 0 44px;
  height: 44px;
  border-radius: var(--r-md);
  background-color: var(--canvas);
  border: 1px solid var(--hairline-soft);
  color: var(--navy);
  display: grid;
  place-items: center;
}
.hc-page .hc-extdoc__medallion svg { width: 24px; height: 24px; display: block; }

.hc-page .hc-extdoc__copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hc-page .hc-extdoc__title {
  display: block;
  font: 600 16px/24px var(--font);
  color: var(--fg);
}
.hc-page .hc-extdoc__desc {
  display: block;
  font: 400 13px/18px var(--font);
  color: var(--fg-muted);
}

/* Navy outline pill, filling on card hover — same device as
   .hc-rail__btn, so the whole tile reads as one control. Never yellow:
   the header CTA already holds this page's single yellow accent. */
.hc-page .hc-extdoc__pill {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 13px/18px var(--font);
  letter-spacing: 0.02em;
  color: var(--navy);
  background-color: transparent;
  border: 1px solid var(--navy);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hc-page .hc-extdoc__pill svg { width: 13px; height: 13px; flex: 0 0 13px; }
.hc-page .hc-extdoc:hover .hc-extdoc__pill,
.hc-page .hc-extdoc:focus .hc-extdoc__pill {
  background-color: var(--navy);
  color: #FFFFFF;
}

@media (max-width: 699px) {
  .hc-page .hc-extdoc { flex-wrap: wrap; padding: 16px 18px; }
  .hc-page .hc-extdoc__pill { margin-left: 60px; }
}
/* ==================================================================
   25. MAINTENANCE NOTICE (.hc-notice)
   ------------------------------------------------------------------
   Added 2026-07-29. Temporary site-wide banner for the Help Center
   overhaul. Lifted out of the inline <style> block that shipped in
   home_page.hbs on 2026-07-27, because the notice now renders on more
   than one template.

   REMOVAL WHEN THE OVERHAUL ENDS
     1. delete this section
     2. delete the dismissal handler in script.js
     3. delete the .hc-notice-band block from home_page.hbs and
        article_page.hbs
   Nothing else references any of it.

   TWO VARIANTS
     .hc-notice-band          full-bleed band that wraps its own
                              .container (home_page, under the hero)
     .hc-notice-band--inset   sits INSIDE an existing .container and
                              supplies its own horizontal padding.
                              It must NOT nest a second .container:
                              .container is `padding: 0 5%`, so nesting
                              one inside another doubles the inset and
                              the notice text stops lining up with the
                              breadcrumbs and the article title.
   ================================================================== */

.hc-notice-band {
  background: #FFF8E6;
  border-bottom: 1px solid #F2E3BC;
}

/* Inset variant: bordered card rather than a full-width band. */
.hc-notice-band--inset {
  border: 1px solid #F2E3BC;
  border-radius: var(--r-md, 8px);
  margin: 0 0 28px;
}
.hc-notice-band--inset .hc-notice { padding: 14px 18px; }

/* Collapse the BAND when its notice is dismissed. Without this the
   band keeps its background and its 1px border while the notice inside
   it is display:none, leaving a stray amber hairline across the page,
   and a 2px empty rounded box in the inset variant. Hiding the child is
   not the same as hiding the wrapper. */
.hc-notice-band:has(.hc-notice[hidden]) { display: none; }

.hc-notice {
  padding: 14px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #2F3941;
  font-size: 15px;
  line-height: 1.5;
}
.hc-notice[hidden] { display: none; }

.hc-notice__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: #8C5C00;
}

.hc-notice__text { flex: 1 1 auto; margin: 0; }
.hc-notice__text strong { font-weight: 700; }

/* Link colour set EXPLICITLY rather than inherited. Two reasons, both
   measured against the #FFF8E6 field:
   1. Inheritance gives a different colour per template. `.hc-home a`
      is #1976D2 and `.hc-page a` is navy, so the identical banner
      would render blue on the home page and navy on an article.
   2. #1976D2 on #FFF8E6 measures 4.36:1 and FAILS the 4.5 body-text
      threshold. Navy #3C4A5C measures 8.50:1.
   Underlined because colour alone does not carry it either way: blue
   against the #2F3941 body text is 2.55:1 and navy is 1.31:1, both
   under the 3.0 needed to identify a link by hue alone. */
.hc-notice__text a {
  color: var(--navy, #3C4A5C);
  text-decoration: underline;
  font-weight: 600;
}
.hc-notice__text a:hover { color: var(--navy-dark, #2A3340); }

.hc-notice__close {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 2px 6px;
  margin: -2px -6px 0 0;
  font-size: 20px;
  line-height: 1;
  color: #68737D;
  cursor: pointer;
  border-radius: var(--r-sm, 4px);
}
.hc-notice__close:hover { color: #2F3941; background: #F7EBCB; }
.hc-notice__close:focus-visible { outline: 2px solid #F2B233; outline-offset: 1px; }

@media (max-width: 640px) {
  .hc-notice { padding: 12px 0; font-size: 14px; gap: 10px; }
  .hc-notice-band--inset .hc-notice { padding: 12px 14px; }
}