@charset "UTF-8";

/* ==========================================================================
   OFFSTREET FOUNDATION
   Design system carried across from the Freshdesk portal. Values only —
   see ../ZENDESK-MIGRATION-HANDOFF.md §5 for provenance.

   Self-hosted Nunito Sans. The Freshdesk build hotlinked Google Fonts, which
   the security audit removed (finding F5); it is not coming back. One variable
   font file per subset covers weights 200–1000, so body 300 and headings
   600/700/800 all come from a single download.
   ========================================================================== */

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url(/hc/theming_assets/01M0RRTVJASKZ64TXSM8YJTYVV) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url(/hc/theming_assets/01M0RRTVE9QTKR0HH9GNCYCXYQ) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* -- Type ------------------------------------------------------------- */
  --os-font: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Helvetica, Arial, sans-serif;
  --os-weight-body: 300;
  --os-weight-medium: 600;
  --os-weight-bold: 700;
  --os-weight-heavy: 800;

  /* -- Surfaces --------------------------------------------------------- */
  --os-page: #12171C;        /* body ground, nav pill, footer */
  --os-shell: #090B0F;       /* the inset header panel */

  /* -- Ink -------------------------------------------------------------- */
  --os-text: #F8FAF9;        /* primary text on dark */
  --os-ink: #0F1921;         /* text on light surfaces */

  /* -- Green ------------------------------------------------------------ */
  --os-green: #00A862;         /* links, accents */
  --os-green-hover: #00AC69;
  --os-green-active: #145C3D;  /* active nav pill, primary buttons */
  --os-green-lift: #1B704A;    /* primary button hover */
  --os-hover-text: #BFFFD0;    /* link and nav hover */
  --os-green-wash: rgba(0, 168, 98, 0.12);
  --os-green-border: rgba(0, 168, 98, 0.55);

  /* -- Hairlines --------------------------------------------------------
     Copenhagen's light-theme literals have been substituted IN PLACE
     throughout its own CSS rather than overridden in a later region — 98
     property-aware replacements (52 #ddd borders, 12 #848F99 input borders,
     the greys used as muted text, and so on), plus the 10 #fff sites and the
     grey glyphs baked into SVG data: URIs, which no `color` can reach.
     An earlier version of this comment promised a "HAIRLINE SUBSTITUTION
     region below" that was never written; the sweep is that work. */
  --os-hairline: rgba(248, 250, 249, 0.18);
  --os-hairline-strong: rgba(248, 250, 249, 0.35);

  /* -- Derived roles ----------------------------------------------------
     Copenhagen expresses "muted text" as a 20% lightening of the text colour,
     and "recessed surface" as a 3-5% darkening of the background. Both idioms
     invert on a dark theme: muted text computed to #fff (BRIGHTER than body
     text, 18.03:1 vs 17.20:1) and recessed panels computed to #0c0f13, which
     is 1.07:1 against the page - invisible. 57 call sites were replaced with
     the roles below, taken from the alpha ladder the Freshdesk build already
     used rather than invented here. */
  --os-text-muted: rgba(248, 250, 249, 0.65);       /* 7.80:1 on page */
  --os-surface-raised: rgba(248, 250, 249, 0.07);   /* code, pre, sidebars */
  --os-surface-raised-2: rgba(248, 250, 249, 0.12); /* figcaption, sub-navs */

  /* -- Header geometry --------------------------------------------------
     THESE THREE CLAMPS MUST STAY IN LOCKSTEP. They share the 5.6vw slope, and
     the shell is exactly the pill + 37px. Change one without the others and
     the pill stops sitting flush in the shell.
       pill   clamp(64px,  5.6vw,        78px)
       shell  clamp(101px, 5.6vw + 37px, 115px)
     Freshdesk had to spell these as clamp() because its CSS validator rejected
     min()/max(); Zendesk has no such validator, but clamp() is still the
     clearest way to say it. */
  --os-nav-h: clamp(64px, 5.6vw, 78px);
  --os-shell-h: clamp(101px, calc(5.6vw + 37px), 115px);
  --os-shell-inset: 8px;
  --os-shell-pad: clamp(20px, 2.5vw, 32px);

  /* Wing width is visible overhang + the overlap that hides the wedge's thin
     tail behind the pill. At the tail the wedge is 1.2/66 = 1.8% of its width,
     so without the overlap you would see a ~4px hairline seam. */
  --os-wing-visible: clamp(96px, 6.4vw, 124px);
  --os-wing-overlap: clamp(72px, 5vw, 92px);
  --os-wing-width: calc(var(--os-wing-visible) + var(--os-wing-overlap));

  /* Index pages (category, section) run wider than the home page. That is a
     real Freshdesk distinction, not an inconsistency: its home column was
     960px and its category/folder pages 1180px. */
  --os-measure-wide: 1180px;

  /* -- Cards and measure -----------------------------------------------
     The green card sub-palette. Freshdesk used two near-identical inks for
     card text, #c8ebc8 and #c8ebc7 (one level apart on blue) - almost
     certainly a typo rather than a distinction, so this is one token.
     Contrast: #c8ebc8 is 6.04:1 on the card and 4.83:1 on its hover, so both
     states clear AA for body text. */
  --os-card: #2c5b40;
  --os-card-border: #437557;
  --os-card-hover: #346b4b;
  --os-card-hover-border: #518c69;
  --os-card-ink: #c8ebc8;

  /* The outlined card used for article lists: the page colour sitting on the
     shell, so it reads as a panel lifted off the surface rather than a fill. */
  --os-card-outline: rgba(0, 168, 98, 0.35);
  --os-card-outline-hover: #00A862;
  --os-card-raised: #151b22;

  /* A shorter lift for secondary cards. Freshdesk used -6px on category cards
     and primary buttons, -4px on article cards - a deliberate two-tier
     hierarchy, not an inconsistency. */
  --os-lift-sm: translateY(-4px);
  --os-lift-sm-shadow: 0 12px 24px rgba(0, 168, 98, 0.12);

  /* Horizontal system: 8px shell inset, then a fluid gutter, then a 960px
     centred column. Copenhagen instead uses percentage gutters inside a 1160px
     cap, which cannot express this. */
  --os-measure: 960px;
  --os-gutter: clamp(16px, 4vw, 32px);

  /* -- LIGHT SURFACES ---------------------------------------------------
     Article reading columns only. Everything above this point assumes a dark
     ground; none of it survives here, so this is a parallel set rather than a
     few exceptions.

     Two results worth stating, because both are counter-intuitive:

     1. --os-green (#00A862) is NOT usable on the reading card. It measures
        2.99:1 there — below even the 3:1 large-text/non-text floor, by 0.01.
        On pure white the same green is 3.10:1 and scrapes past; #F2FEF3 is
        marginally darker than white and that is enough to lose it. So the
        light link is a different green, not the same one.

     2. An alpha overlay does NOT buy the same contrast on light as its
        complement does on dark at the same alpha. The +0.05 flare term in the
        WCAG ratio means a small luminance change is huge against a near-black
        ground and negligible against a near-white one. Measured: alpha 0.35
        gives 3.12:1 on dark but only 2.20:1 on light. Light needs MORE alpha.
        The values below are solved to match their dark counterparts:
          hairline        dark 0.18 -> 1.72:1    light 0.25 -> 1.72:1
          hairline-strong dark 0.35 -> 3.12:1    light 0.47 -> 3.09:1
          sunk            dark 0.07 -> 1.20:1    light 0.09 -> 1.20:1
          sunk-2          dark 0.12 -> 1.40:1    light 0.16 -> 1.40:1
     Porting the alphas by symmetry would ship a visibly weaker light theme
     and one 1.4.11 failure. That is what the Freshdesk build did. */

  --os-paper: #F2FEF3;                        /* mirrors --os-page; ink 17.14:1 */
  --os-paper-field: #F8FAF9;                  /* field fill; its border does the work */
  --os-paper-sunk: rgba(15, 25, 33, 0.09);    /* code/callout ground, 1.20:1 */
  --os-paper-sunk-2: rgba(15, 25, 33, 0.16);  /* table header, 1.40:1 */

  /* On light, "recessed" is DARKER. The dark theme's raised overlays lighten,
     which is a null operation against a near-white ground. */

  --os-ink-muted: #45535D;                    /* 7.64:1; mirrors --os-text-muted 7.80:1 */
  --os-ink-placeholder: #64707A;              /* 4.89:1; corrects Freshdesk's #6B7882 at 4.37:1 */
  --os-ink-heading: #03422A;                  /* 11.15:1; light-only role, no dark twin */

  --os-link: #00713F;                         /* 5.90:1; mirrors --os-green's 5.82:1 on dark */
  --os-link-hover: #005730;                   /* 8.42:1; mirrors the ROLE (hover gains
                                                 contrast), not the 15.82:1 — no green that
                                                 still reads green gets there on light */
  --os-link-visited: #00713F;                 /* parity, matching the dark theme's choice not
                                                 to distinguish visited links */

  --os-hairline-ink: rgba(15, 25, 33, 0.25);        /* 1.72:1, exact mirror */
  --os-hairline-ink-strong: rgba(15, 25, 33, 0.47); /* 3.09:1, clears 1.4.11 for controls */

  /* A light card sitting on the DARK page needs a dark shadow; an ink-tinted
     one composites to 1.005:1 against the shell, i.e. nothing at all. */
  --os-paper-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
  --os-lift-shadow-ink: 0 16px 32px rgba(15, 25, 33, 0.18),
    0 8px 16px rgba(15, 25, 33, 0.10);

  /* Ground-agnostic, verified both ways, so deliberately NOT duplicated:
     --os-green-wash (ink on it 15.13:1), --os-green-active (7.70:1 as ink on
     paper), --os-green-lift (5.85:1), --os-ink (17.14:1), and every
     non-colour token. */

  /* -- Shape ------------------------------------------------------------ */
  --os-radius-panel: 18px;   /* panels and dropdowns */
  --os-radius-shell: 14px;   /* outer shells */
  --os-radius-small: 10px;   /* small surfaces and hover blocks */
  --os-radius-pill: 999px;   /* pills and buttons */

  /* -- Motion -----------------------------------------------------------
     Lift is pointer-only. Touch gets :active scale instead — a tap otherwise
     leaves :hover stuck on the button. See PORTAL-HANDOFF §8. */
  --os-lift: translateY(-6px);
  --os-lift-shadow: 0 16px 32px rgba(0, 0, 0, 0.45),
    0 8px 16px rgba(0, 168, 98, 0.15);

  /* -- Header nav wing --------------------------------------------------
     The angled wing flanking the centred nav pill, as an SVG mask. Inlined as
     a data: URI — the Freshdesk build served this from a Webflow CDN, which
     the audit removed as a third-party dependency (F5). */
  --os-nav-wing: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2066%2072'%3E%3Cpath%20d='M19.2,12.6C14.8,4.7,7.6,0,0,0h66v72h-1.2c-7.6,0-14.8-4.7-19.2-12.6l-15.2-26.9h0l-11.2-19.9Z'/%3E%3C/svg%3E");
}

/* Preview-loop canary. If this rule is missing from the served stylesheet,
   you are debugging code that is not deployed — the single biggest time-waster
   of the Freshdesk build. Check for it before believing any diagnosis. */
:root { --os-build: "package-b-11"; }

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

body {
  margin: 0;
}

main {
  display: block;
}

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

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

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

a {
  background-color: transparent;
}

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

b,
strong {
  font-weight: bolder;
}

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

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

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

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

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

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

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

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

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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

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

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

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

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

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

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

body {
  background-color: #12171C;
  color: #F8FAF9;
  font-family: var(--os-font);
  font-size: 15px;
  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: var(--os-font);
  margin-top: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

h3 {
  font-size: 18px;
  font-weight: 600;
}

h4 {
  font-size: 16px;
}

a {
  color: #00A862;
  text-decoration: none;
}
a:visited {
  color: #00A862;
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

.hbs-form input,
.hbs-form textarea, .search input,
.search textarea {
  color: var(--os-text);
  font-size: 14px;
}
.hbs-form input, .search input {
  max-width: 100%;
  box-sizing: border-box;
  transition: border 0.12s ease-in-out;
  /* We use the :where selector to not increase the specificity of the selector */
}
.hbs-form input:where(:not([type=checkbox])), .search input:where(:not([type=checkbox])) {
  outline: none;
}
.hbs-form input:where(:not([type=checkbox])):focus, .search input:where(:not([type=checkbox])):focus {
  border: 1px solid #00A862;
}
.hbs-form input[disabled], .search input[disabled] {
  background-color: var(--os-surface-raised);
}
.hbs-form select, .search select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23A8ABAC' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E%0A") no-repeat var(--os-page);
  background-position: right 10px center;
  border: 1px solid var(--os-hairline-strong);
  border-radius: 4px;
  padding: 8px 30px 8px 10px;
  outline: none;
  color: var(--os-text-muted);
  width: 100%;
}
.hbs-form select:focus, .search select:focus {
  border: 1px solid #00A862;
}
.hbs-form select::-ms-expand, .search select::-ms-expand {
  display: none;
}
.hbs-form textarea, .search textarea {
  border: 1px solid var(--os-hairline-strong);
  border-radius: 2px;
  resize: vertical;
  width: 100%;
  outline: none;
  padding: 10px;
}
.hbs-form textarea:focus, .search textarea:focus {
  border: 1px solid #00A862;
}

.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 var(--os-hairline);
  margin-bottom: 20px;
}

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

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

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

/* ==========================================================================
   TYPE APPLICATION

   PLACEMENT IS LOAD-BEARING. This region must sit AFTER normalize.css (which
   is inlined above, around line 130) and after Copenhagen's Base section.
   Both use bare element selectors, so specificity ties and SOURCE ORDER
   decides. This block was first written at the top of the file and normalize's
   `b, strong { font-weight: bolder }` silently beat it - measured in the
   harness: strong stayed at 400. Do not move it back up.
   ========================================================================== */

body {
  font-weight: var(--os-weight-body);
}

/* `bolder` is RELATIVE: from an inherited 300 it computes to 400, not 700, so
   bold text would render barely heavier than body copy. The Freshdesk build hit
   the same thing - "words bolded in the editor came out lighter than the
   surrounding text". An absolute weight is the fix, and it must stay paired
   with the body rule above.

   h1/h2/h4-h6 need no equivalent: they take `bold` from the UA stylesheet as an
   element-level rule, which is not inherited and so is unaffected by body 300.
   Verified: h1/h2 = 700, h3 = 600 (Copenhagen sets h3 explicitly). */
b,
strong {
  font-weight: var(--os-weight-bold);
}

/***** Buttons *****/
.button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
  background-color: transparent;
  border: 1px solid #00A862;
  border-radius: 4px;
  color: #00A862;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 2.34;
  margin: 0;
  padding: 0 20px;
  text-align: center;
  transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out, color 0.15s ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  -webkit-touch-callout: none;
}
@media (min-width: 768px) {
  .button, .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link, .subscriptions-subscribe button, .requests-table-toolbar .organization-subscribe button, .community-follow button, .article-subscribe button, .section-subscribe button, .split-button button {
    width: auto;
  }
}
.button:visited, .pagination-next-link:visited, .pagination-prev-link:visited, .pagination-first-link:visited, .pagination-last-link:visited, .subscriptions-subscribe button:visited, .requests-table-toolbar .organization-subscribe button:visited, .community-follow button:visited, .article-subscribe button:visited, .section-subscribe button:visited, .split-button button:visited {
  color: #00A862;
}
.button:hover, .pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover, .subscriptions-subscribe button:hover, .requests-table-toolbar .organization-subscribe button:hover, .community-follow button:hover, .article-subscribe button:hover, .section-subscribe button:hover, .split-button button:hover, .button:active, .pagination-next-link:active, .pagination-prev-link:active, .pagination-first-link:active, .pagination-last-link:active, .subscriptions-subscribe button:active, .requests-table-toolbar .organization-subscribe button:active, .community-follow button:active, .article-subscribe button:active, .section-subscribe button:active, .split-button button:active, .button:focus, .pagination-next-link:focus, .pagination-prev-link:focus, .pagination-first-link:focus, .pagination-last-link:focus, .subscriptions-subscribe button:focus, .requests-table-toolbar .organization-subscribe button:focus, .community-follow button:focus, .article-subscribe button:focus, .section-subscribe button:focus, .split-button button:focus, .button.button-primary, .button-primary.pagination-next-link, .button-primary.pagination-prev-link, .button-primary.pagination-first-link, .button-primary.pagination-last-link, .subscriptions-subscribe button.button-primary, .subscriptions-subscribe button[data-selected=true], .requests-table-toolbar .organization-subscribe button.button-primary, .requests-table-toolbar .organization-subscribe button[data-selected=true], .community-follow button.button-primary, .article-subscribe button.button-primary, .article-subscribe button[data-selected=true], .section-subscribe button.button-primary, .section-subscribe button[data-selected=true], .split-button button.button-primary {
  /* The brand colour (#00A862) behind the brand text colour (#F8FAF9) is
     2.96:1 —
     below AA for a 12px label. This rule is the hover state of every .button
     AND of all four pagination arrows AND the section Follow control, so it
     was failing in a lot of places at once. --os-green-active is 7.62:1 and
     matches the filled-green convention used by Ask AI and the featured CTA. */
  background-color: var(--os-green-active);
  color: var(--os-text);
  text-decoration: none;
}
.button.button-primary:hover, .button-primary.pagination-next-link:hover, .button-primary.pagination-prev-link:hover, .button-primary.pagination-first-link:hover, .button-primary.pagination-last-link:hover, .subscriptions-subscribe button.button-primary:hover, .subscriptions-subscribe button[data-selected=true]:hover, .requests-table-toolbar .organization-subscribe button.button-primary:hover, .requests-table-toolbar .organization-subscribe button[data-selected=true]:hover, .community-follow button.button-primary:hover, .article-subscribe button.button-primary:hover, .article-subscribe button[data-selected=true]:hover, .section-subscribe button.button-primary:hover, .section-subscribe button[data-selected=true]:hover, .split-button button:hover, .button.button-primary:focus, .button-primary.pagination-next-link:focus, .button-primary.pagination-prev-link:focus, .button-primary.pagination-first-link:focus, .button-primary.pagination-last-link:focus, .subscriptions-subscribe button.button-primary:focus, .subscriptions-subscribe button[data-selected=true]:focus, .requests-table-toolbar .organization-subscribe button.button-primary:focus, .requests-table-toolbar .organization-subscribe button[data-selected=true]:focus, .community-follow button.button-primary:focus, .article-subscribe button.button-primary:focus, .article-subscribe button[data-selected=true]:focus, .section-subscribe button.button-primary:focus, .section-subscribe button[data-selected=true]:focus, .split-button button.button-primary:focus, .button.button-primary:active, .button-primary.pagination-next-link:active, .button-primary.pagination-prev-link:active, .button-primary.pagination-first-link:active, .button-primary.pagination-last-link:active, .subscriptions-subscribe button.button-primary:active, .subscriptions-subscribe button[data-selected=true]:active, .requests-table-toolbar .organization-subscribe button.button-primary:active, .requests-table-toolbar .organization-subscribe button[data-selected=true]:active, .community-follow button.button-primary:active, .article-subscribe button.button-primary:active, .article-subscribe button[data-selected=true]:active, .section-subscribe button.button-primary:active, .section-subscribe button[data-selected=true]:active, .split-button button.button-primary:active {
  background-color: var(--os-green-lift);
  border-color: var(--os-green-lift);
}
.button[data-disabled], [data-disabled].pagination-next-link, [data-disabled].pagination-prev-link, [data-disabled].pagination-first-link, [data-disabled].pagination-last-link, .subscriptions-subscribe button[data-disabled], .requests-table-toolbar .organization-subscribe button[data-disabled], .community-follow button[data-disabled], .article-subscribe button[data-disabled], .section-subscribe button[data-disabled], .split-button button[data-disabled] {
  cursor: default;
}

.button-large, .hbs-form input[type=submit] {
  cursor: pointer;
  /* Same 2.96:1 pair, but this is the RESTING state of the large/submit
     button — the primary action on the ticket form. Its hover already uses
     --os-green-lift, so #145C3D -> #1B704A is the house button ramp. */
  background-color: var(--os-green-active);
  border: 0;
  border-radius: 4px;
  color: var(--os-text);
  font-size: 14px;
  line-height: 2.72;
  min-width: 190px;
  padding: 0 1.9286em;
  width: 100%;
}
@media (min-width: 768px) {
  .button-large, .hbs-form input[type=submit] {
    width: auto;
  }
}
.button-large:visited, .hbs-form input[type=submit]:visited {
  color: #F8FAF9;
}
.button-large:hover, .button-large:active, .button-large:focus, .hbs-form input[type=submit]:hover, .hbs-form input[type=submit]:active, .hbs-form input[type=submit]:focus {
  background-color: var(--os-green-lift);
}
.button-large[disabled], .hbs-form input[type=submit][disabled] {
  background-color: var(--os-surface-raised);
}

.button-secondary {
  color: var(--os-text-muted);
  border: 1px solid var(--os-hairline-strong);
  background-color: transparent;
}
.button-secondary:visited {
  color: var(--os-text-muted);
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: #F8FAF9;
  border: 1px solid var(--os-hairline-strong);
  background-color: var(--os-surface-raised);
}

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

.split-button button {
  background-color: var(--os-green-active);
  border: 0;
  color: var(--os-text);
  height: 32px;
  line-height: 16px;
  outline-color: #00A862;
}

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

/***** Tables *****/
.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
@media (min-width: 768px) {
  .table {
    table-layout: auto;
  }
}
.table th,
.table th a {
  color: var(--os-text-muted);
  font-size: 13px;
  text-align: left;
}
[dir=rtl] .table th,
[dir=rtl] .table th a {
  text-align: right;
}
.table tr {
  border-bottom: 1px solid var(--os-hairline);
  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 var(--os-hairline-strong);
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}
.form-field input:focus {
  border: 1px solid #00A862;
}

.form-field input[type=text] {
  border: 1px solid var(--os-hairline-strong);
  border-radius: 4px;
}
.form-field input[type=text]:focus {
  border: 1px solid #00A862;
}

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

.form-field .nesty-input {
  border-radius: 4px;
  border: 1px solid var(--os-hairline-strong);
  height: 40px;
  line-height: 40px;
  outline: none;
  vertical-align: middle;
}
.form-field .nesty-input:focus {
  border: 1px solid #00A862;
  text-decoration: none;
}

.form-field .hc-multiselect-toggle {
  border: 1px solid var(--os-hairline-strong);
}

.form-field .hc-multiselect-toggle:focus {
  outline: none;
  border: 1px solid #00A862;
  text-decoration: none;
}

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

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

.form-field .optional {
  color: var(--os-text-muted);
  margin-left: 4px;
}

.form-field p {
  color: var(--os-text-muted);
  font-size: 12px;
  margin: 5px 0;
}

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

.form footer a {
  color: var(--os-text-muted);
  cursor: pointer;
  margin-right: 15px;
}

.form .suggestion-list {
  font-size: 13px;
  margin-top: 30px;
}
.form .suggestion-list label {
  border-bottom: 1px solid var(--os-hairline);
  display: block;
  padding-bottom: 5px;
}
.form .suggestion-list li {
  padding: 10px 0;
}
.form .suggestion-list li a:visited {
  color: #00A862;
}

/***** Header *****/
/* The inset shell. `position: relative` is load-bearing: it is the containing
   block the centred nav pill positions against.

   `align-items: flex-start` (not center) because the pill hangs from the TOP
   of the shell; the logo and user controls are then centred on the pill's band
   rather than on the shell, by being given the pill's height.

   Width is left to auto with an 8px margin rather than Freshdesk's
   `calc(100vw - 16px)`. Same result, but auto width excludes the scrollbar,
   where 100vw includes it and overflows by the scrollbar's width. */
.header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: var(--os-shell-h);
  margin: 0 var(--os-shell-inset);
  padding: 0 var(--os-shell-pad);
  background: var(--os-shell);
  border: 1px solid var(--os-page);
  border-bottom: 0;
  border-radius: var(--os-radius-shell) var(--os-radius-shell) 0 0;
}

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

.logo span {
  margin: 0 10px;
  color: #00A862;
}

.logo a {
  display: inline-block;
}

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

.user-nav {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
}
/* REMOVED: `@media (min-width: 768px) { .user-nav { position: relative } }`.
   It cancelled the base `position: absolute` at every desktop width, pinning
   .user-nav into the flex flow where it cannot be centred on the shell. It
   existed only for Copenhagen's .user-nav[aria-expanded=true] dropdown panel,
   which is dead code (removed below). */
/* REMOVED: the four .user-nav[aria-expanded=true] rules (a white #fff panel
   with #ddd borders). Provably dead, not just unused: header.hbs gives
   .user-nav only class/id/aria-label, script.js references #user-nav-mobile
   and .dropdown-toggle but never #user-nav, and no asset bundle touches it.
   Nothing can ever set that attribute, so the selector could never match. */

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

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

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

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

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

.ask-ai {
  align-items: center;
  background-color: #00A862;
  border: 1px solid #00A862;
  border-radius: 4px;
  color: #F8FAF9;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  line-height: 1.4286;
  padding: 6px 14px;
}
.ask-ai:visited {
  color: #F8FAF9;
}
.ask-ai .ask-ai-icon {
  flex-shrink: 0;
}

.nav-wrapper-desktop .ask-ai {
  margin-inline-end: 16px;
  padding: 6px 14px;
}
.nav-wrapper-desktop .ask-ai, .nav-wrapper-desktop .ask-ai:visited {
  color: #F8FAF9;
}
.nav-wrapper-desktop .ask-ai:hover, .nav-wrapper-desktop .ask-ai:focus, .nav-wrapper-desktop .ask-ai:active {
  background-color: #BFFFD0;
  border-color: #BFFFD0;
  color: #F8FAF9;
  text-decoration: none;
}

.nav-wrapper-mobile .ask-ai {
  margin: 4px 24px;
  padding: 6px 14px;
  width: auto;
  height: auto;
}
.nav-wrapper-mobile .ask-ai, .nav-wrapper-mobile .ask-ai:visited {
  color: #F8FAF9;
}
.nav-wrapper-mobile .ask-ai:hover, .nav-wrapper-mobile .ask-ai:focus, .nav-wrapper-mobile .ask-ai:active {
  background-color: #BFFFD0;
  border-color: #BFFFD0;
  color: #F8FAF9;
  text-decoration: none;
}

/***** User info in header *****/
.user-info {
  display: inline-block;
}
.user-info .dropdown-toggle::after {
  display: none;
}
@media (min-width: 768px) {
  .user-info .dropdown-toggle::after {
    display: inline-block;
  }
}
.user-info > button {
  border: 0;
  color: #00A862;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
}
.user-info > button:hover, .user-info > button:focus {
  color: #00A862;
  background-color: transparent;
}
.user-info > button::after {
  color: #00A862;
  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: var(--os-text);
  border: 2px solid var(--os-shell);
  border-radius: 50%;
  bottom: -4px;
  background-color: var(--os-green-active);
  font-size: 17px;
  height: 17px;
  line-height: 17px;
  position: absolute;
  right: -2px;
  text-align: center;
  width: 17px;
}

/***** Footer *****/
.footer {
  border-top: 1px solid var(--os-hairline);
  margin-top: 60px;
  padding: 30px 0;
}
.footer a {
  color: var(--os-text-muted);
}
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
}
@media (min-width: 1160px) {
  .footer-inner {
    padding: 0;
    width: 90%;
  }
}
.footer-language-selector button {
  color: var(--os-text-muted);
  display: inline-block;
}

.powered-by-zendesk a,
.powered-by-zendesk a:visited {
  color: var(--os-text-muted);
}

/***** Breadcrumbs *****/
.breadcrumbs {
  margin: 0 0 15px 0;
  padding: 0;
  display: flex;
}
@media (min-width: 768px) {
  .breadcrumbs {
    margin: 0;
  }
}
.breadcrumbs li {
  display: inline-block;
  color: var(--os-text-muted);
  font-size: 13px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breadcrumbs li + li::before {
  content: ">";
  margin: 0 4px;
}
.breadcrumbs li a:visited {
  color: #00A862;
}

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

.search {
  border-color: var(--os-hairline-strong);
  border-radius: 30px;
  border-style: solid;
  border-width: 1px;
  display: flex;
  position: relative;
  transition: border 0.12s ease-in-out;
}
.search:focus-within {
  border-color: #00A862;
}
.search input[type=search],
.search .clear-button {
  background-color: transparent;
  border-radius: 30px;
  border: none;
}
.search-full input[type=search], .search-full .clear-button {
  border-color: var(--os-hairline);
}
.search input[type=search] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: var(--os-text-muted);
  flex: 1 1 auto;
  height: 40px;
  width: 100%;
}
.search input[type=search]:focus {
  color: var(--os-text-muted);
}
.search input[type=search]::-webkit-search-decoration, .search input[type=search]::-webkit-search-cancel-button, .search input[type=search]::-webkit-search-results-button, .search input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.search input[type=search]:-webkit-autofill, .search input[type=search]:-webkit-autofill:hover, .search input[type=search]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--os-page) inset;
}
.search .clear-button {
  align-items: center;
  box-sizing: border-box;
  color: var(--os-text-muted);
  cursor: pointer;
  display: none;
  flex: none;
  justify-content: center;
  padding: 0 15px;
}
.search .clear-button:hover {
  background-color: var(--os-green-wash);
  color: var(--os-hover-text);
}
.search .clear-button:focus {
  outline: 0;
  box-shadow: 0 0 0 3px #00A862;
}
.search-has-value .clear-button {
  display: flex;
}

[dir=ltr] .search input[type=search] {
  padding-left: 40px;
  padding-right: 20px;
}
[dir=ltr] .search-has-value input[type=search] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=ltr] .search-has-value input[type=search]:focus {
  border-right-color: #00A862;
}
[dir=ltr] .search .clear-button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=ltr] .search .clear-button:focus {
  border-left-color: #00A862;
}

[dir=rtl] .search input[type=search] {
  padding-left: 20px;
  padding-right: 40px;
}
[dir=rtl] .search-has-value input[type=search] {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left-color: transparent;
}
[dir=rtl] .search-has-value input[type=search]:focus {
  border-left-color: #00A862;
}
[dir=rtl] .search .clear-button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right-color: transparent;
}
[dir=rtl] .search .clear-button:focus {
  border-right-color: #00A862;
}

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

/***** Hero component *****/
.hero {
  background-image: url(/hc/theming_assets/01KQDK2ZMJG6ANWJ7T35GZQ5Y7);
  background-position: center;
  background-size: cover;
  height: 300px;
  padding: 0 20px;
  text-align: center;
  width: 100%;
}
.hero-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-width: 610px;
  margin: 0 auto;
}

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

.sub-nav {
  align-items: baseline;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 15px 30px;
  justify-content: space-between;
  margin-bottom: 55px;
}
@media (min-width: 768px) {
  .sub-nav {
    flex-direction: row;
  }
}
.sub-nav .breadcrumbs {
  margin: 0;
}
.sub-nav .search-container {
  max-width: 300px;
  width: 100%;
}
@media (min-width: 768px) {
  .sub-nav .search-container {
    flex: 0 1 300px;
  }
}
.sub-nav input[type=search]::after {
  font-size: 15px;
}

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

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

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

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

/***** Community section in homepage *****/
.community {
  text-align: center;
}
.community-image {
  min-height: 300px;
  margin-top: 32px;
  background-image: url(/hc/theming_assets/01KQDK30DRG95GS3Q9JXJKSKYX);
  background-position: center;
  background-repeat: no-repeat;
  max-width: 100%;
}
.community a {
  color: #00A862;
  text-decoration: underline;
}
.community a:visited {
  color: #00A862;
}
.community a:hover, .community a:active, .community a:focus {
  color: #BFFFD0;
}

.community,
.activity {
  border-top: 1px solid var(--os-hairline);
  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 var(--os-hairline);
  overflow: auto;
  padding: 20px 0;
}
.recent-activity-item h3 {
  margin: 0;
}
.recent-activity-item-parent {
  font-size: 16px;
  font-weight: 600;
}
.recent-activity-item-parent, .recent-activity-item-link {
  margin: 6px 0;
  display: inline-block;
  width: 100%;
}
@media (min-width: 768px) {
  .recent-activity-item-parent, .recent-activity-item-link {
    width: 70%;
    margin: 0;
  }
}
.recent-activity-item-link {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-activity-item-meta {
  color: #F8FAF9;
  margin: 15px 0 0 0;
  float: none;
}
@media (min-width: 768px) {
  .recent-activity-item-meta {
    margin: 0;
    float: right;
  }
  [dir=rtl] .recent-activity-item-meta {
    float: left;
  }
}
.recent-activity-item-time, .recent-activity-item-comment {
  display: inline-block;
  font-size: 13px;
}
.recent-activity-item-comment {
  padding-left: 5px;
}
[dir=rtl] .recent-activity-item-comment {
  padding: 0 5px 0 0;
}
.recent-activity-item-comment::before {
  display: inline-block;
}
.recent-activity-controls {
  padding-top: 15px;
}
.recent-activity-controls a {
  color: #00A862;
  text-decoration: underline;
}
.recent-activity-controls a:visited {
  color: #00A862;
}
.recent-activity-controls a:hover, .recent-activity-controls a:active, .recent-activity-controls a:focus {
  color: #BFFFD0;
}
.recent-activity-accessibility-label {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.recent-activity-comment-icon svg {
  vertical-align: middle;
  color: #00A862;
  width: 16px;
  height: 16px;
}
.recent-activity-comment-icon:after {
  content: attr(data-comment-count);
  margin-left: 3px;
}
[dir=rtl] .recent-activity-comment-icon:after {
  margin-left: 0;
  margin-right: 3px;
}

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

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

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

.icon-star {
  color: #00A862;
  font-size: 18px;
}

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

.section-list-item {
  border-bottom: 1px solid var(--os-hairline);
  font-size: 16px;
  padding: 15px 0;
}
.section-list-item:first-child {
  border-top: 1px solid var(--os-hairline);
}
.section-list-item a {
  align-items: center;
  color: #F8FAF9;
  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;
}
.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@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 {
  display: flow-root;
}
.article-body a {
  color: #00A862;
  text-decoration: underline;
}
.article-body a:visited {
  color: #00A862;
}
.article-body a:hover, .article-body a:active, .article-body a:focus {
  color: #BFFFD0;
}
.article-body img {
  height: auto;
  max-width: 100%;
}
.article-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figure.image {
  display: table;
  margin: 0 auto;
}
.article-body figure.image > img {
  display: block;
  width: 100%;
}
.article-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.article-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.article-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.article-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.article-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: var(--os-surface-raised-2);
}
.article-body ul,
.article-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .article-body ul,
[dir=rtl] .article-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.article-body ul > ul,
.article-body ol > ol,
.article-body ol > ul,
.article-body ul > ol,
.article-body li > ul,
.article-body li > ol {
  margin: 0;
}
.article-body ul {
  list-style-type: disc;
}
.article-body :not(pre) > code {
  background: var(--os-surface-raised);
  border: 1px solid var(--os-hairline);
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.article-body pre {
  background: var(--os-surface-raised);
  border: 1px solid var(--os-hairline);
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.article-body blockquote {
  border-left: 1px solid var(--os-hairline);
  color: var(--os-text-muted);
  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: var(--os-text-muted);
}
.article-comment-count:hover {
  text-decoration: none;
}
.article-comment-count-icon {
  vertical-align: middle;
  color: #00A862;
  width: 18px;
  height: 18px;
}
.article-sidebar {
  border-bottom: 1px solid var(--os-hairline);
  border-top: 1px solid var(--os-hairline);
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}
@media (min-width: 1024px) {
  .article-sidebar {
    border: 0;
    flex: 0 0 17%;
    height: auto;
    max-width: 17%;
  }
}
.article-relatives {
  border-top: 1px solid var(--os-hairline);
  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 var(--os-hairline);
  padding: 30px 0;
  text-align: center;
}
.article-votes-question {
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 0;
}
.article-vote {
  margin: 10px 5px;
  min-width: 90px;
  width: auto;
}
.article-more-questions {
  margin: 10px 0 20px;
  text-align: center;
}
.article-more-questions a {
  color: #00A862;
  text-decoration: underline;
}
.article-more-questions a:visited {
  color: #00A862;
}
.article-more-questions a:hover, .article-more-questions a:active, .article-more-questions a:focus {
  color: #BFFFD0;
}
.article-return-to-top {
  border-top: 1px solid var(--os-hairline-strong);
}
@media (min-width: 1024px) {
  .article-return-to-top {
    display: none;
  }
}
.article-return-to-top a {
  color: #F8FAF9;
  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);
}
.article td > p:first-child,
.article th > p:first-child {
  margin-top: 0;
}
.article td > p:last-child,
.article th > p:last-child {
  margin-bottom: 0;
}

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

.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: #F8FAF9;
  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: var(--os-text-muted);
}

/***** 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: var(--os-text-muted);
}
.share a:hover {
  text-decoration: none;
  color: #00A862;
}
.share a svg {
  height: 18px;
  width: 18px;
  display: block;
}

/***** Comments *****/
/* Styles comments inside articles, posts and requests */
.comment {
  border-bottom: 1px solid var(--os-hairline);
  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 var(--os-hairline);
  border-top: 1px solid var(--os-hairline);
  padding: 20px 0;
}
.comment-overview p {
  margin-top: 0;
}
.comment-callout {
  color: var(--os-text-muted);
  display: inline-block;
  font-size: 13px;
  margin-bottom: 0;
}
.comment-callout a {
  color: #00A862;
  text-decoration: underline;
}
.comment-callout a:visited {
  color: #00A862;
}
.comment-callout a:hover, .comment-callout a:active, .comment-callout a:focus {
  color: #BFFFD0;
}
.comment-sorter {
  display: inline-block;
  float: right;
}
.comment-sorter .dropdown-toggle {
  color: var(--os-text-muted);
  font-size: 13px;
}
[dir=rtl] .comment-sorter {
  float: left;
}
.comment-wrapper {
  display: flex;
  position: relative;
}
.comment-wrapper.comment-official {
  border: 1px solid #00A862;
  padding: 40px 20px 20px;
}
@media (min-width: 768px) {
  .comment-wrapper.comment-official {
    padding-top: 20px;
  }
}
.comment-info {
  min-width: 0;
  padding-right: 20px;
  width: 100%;
}
[dir=rtl] .comment-info {
  padding-right: 0;
  padding-left: 20px;
}
.comment-author {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .comment-author {
    justify-content: space-between;
  }
}
.comment-avatar {
  margin-right: 10px;
}
[dir=rtl] .comment-avatar {
  margin-left: 10px;
  margin-right: 0;
}
.comment-meta {
  flex: 1 1 auto;
}
.comment-labels {
  flex-basis: 100%;
}
@media (min-width: 768px) {
  .comment-labels {
    flex-basis: auto;
  }
}
.comment .status-label:not(.status-label-official) {
  margin-top: 10px;
}
@media (min-width: 768px) {
  .comment .status-label:not(.status-label-official) {
    margin-top: 0;
  }
}
.comment-form {
  display: flex;
  padding-top: 30px;
  word-wrap: break-word;
}
.comment-container {
  width: 100%;
}
.comment-form-controls {
  display: none;
  margin-top: 10px;
  text-align: left;
}
@media (min-width: 768px) {
  [dir=ltr] .comment-form-controls {
    text-align: right;
  }
}
.comment-form-controls input[type=submit] {
  margin-top: 15px;
}
@media (min-width: 1024px) {
  .comment-form-controls input[type=submit] {
    margin-left: 15px;
  }
  [dir=rtl] .comment-form-controls input[type=submit] {
    margin-left: 0;
    margin-right: 15px;
  }
}
.comment-form-controls input[type=checkbox] {
  margin-right: 5px;
}
.comment-form-controls input[type=checkbox] [dir=rtl] {
  margin-left: 5px;
}
.comment-ccs {
  display: none;
}
.comment-ccs + textarea {
  margin-top: 10px;
}
.comment-attachments {
  margin-top: 10px;
}
.comment-attachments a {
  color: #00A862;
}
.comment-body {
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
  display: flow-root;
  font-family: var(--os-font);
  line-height: 1.6;
  overflow-x: auto;
}
.comment-body a {
  color: #00A862;
  text-decoration: underline;
}
.comment-body a:visited {
  color: #00A862;
}
.comment-body a:hover, .comment-body a:active, .comment-body a:focus {
  color: #BFFFD0;
}
.comment-body img {
  height: auto;
  max-width: 100%;
}
.comment-body p > img.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body p > img.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body p > img.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body p > img.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figure.image {
  display: table;
  margin: 0 auto;
}
.comment-body figure.image > img {
  display: block;
  width: 100%;
}
.comment-body figure.image.image-style-align-left {
  float: left;
  margin: 8px 20px 6px 0;
}
.comment-body figure.image.image-style-align-right {
  float: right;
  margin: 8px 0px 6px 20px;
}
.comment-body figure.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}
.comment-body figure.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.comment-body figcaption {
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  background-color: var(--os-surface-raised-2);
}
.comment-body ul,
.comment-body ol {
  padding-left: 20px;
  list-style-position: outside;
  margin: 20px 0 20px 20px;
}
[dir=rtl] .comment-body ul,
[dir=rtl] .comment-body ol {
  padding-right: 20px;
  padding-left: 0;
  margin-left: 0;
  margin-right: 20px;
}
.comment-body ul > ul,
.comment-body ol > ol,
.comment-body ol > ul,
.comment-body ul > ol,
.comment-body li > ul,
.comment-body li > ol {
  margin: 0;
}
.comment-body ul {
  list-style-type: disc;
}
.comment-body :not(pre) > code {
  background: var(--os-surface-raised);
  border: 1px solid var(--os-hairline);
  border-radius: 3px;
  padding: 0 5px;
  margin: 0 2px;
}
.comment-body pre {
  background: var(--os-surface-raised);
  border: 1px solid var(--os-hairline);
  border-radius: 3px;
  padding: 10px 15px;
  overflow: auto;
  white-space: pre;
  direction: ltr;
}
.comment-body blockquote {
  border-left: 1px solid var(--os-hairline);
  color: var(--os-text-muted);
  font-style: italic;
  padding: 0 15px;
}
.comment-mark-as-solved {
  display: inline-block;
}

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

.vote-sum {
  color: var(--os-text-muted);
  display: block;
  margin: 3px 0;
}
[dir=rtl] .vote-sum {
  direction: ltr;
  unicode-bidi: bidi-override;
}

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

.vote-up:hover,
.vote-down:hover {
  color: #00A862;
}

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

.vote-voted {
  color: #00A862;
}

.vote-voted:hover {
  color: var(--os-green-lift);
}

/***** 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/01KQDK300QP0W342YV7Q7NTWQ0);
  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 var(--os-hairline);
  font-size: 13px;
}
@media (min-width: 768px) {
  .topic-header {
    padding-bottom: 10px;
  }
}
.topic-header .dropdown {
  display: block;
  border-top: 1px solid var(--os-hairline);
  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: #00A862;
}
.community-follow button:hover::after, .community-follow button:focus::after {
  border-color: #F8FAF9;
  color: #F8FAF9;
}
.community-follow button[data-selected=true] {
  background-color: var(--os-green-active);
  color: var(--os-text);
}
.community-follow button[data-selected=true]::after {
  border-left: 1px solid #F8FAF9;
  color: #F8FAF9;
}
.community-follow button[data-selected=true]:hover {
  background-color: var(--os-green-lift);
  border-color: var(--os-green-lift);
}
.community-follow button::after {
  border-left: 1px solid #00A862;
  content: attr(data-follower-count);
  color: #00A862;
  display: inline-block;
  font-family: var(--os-font);
  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 #00A862;
  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 var(--os-hairline);
  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: #00A862;
  margin-bottom: 10px;
  margin-right: 5px;
}
.striped-list-title:hover, .striped-list-title:focus, .striped-list-title:active {
  text-decoration: underline;
}
.striped-list-title:visited {
  color: #00A862;
}
.striped-list .meta-group {
  margin: 5px 0;
}
.striped-list-count {
  color: var(--os-text-muted);
  font-size: 13px;
  justify-content: flex-start;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .striped-list-count {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
}
.striped-list-count-item::after {
  content: "·";
  display: inline-block;
  padding: 0 5px;
}
@media (min-width: 768px) {
  .striped-list-count-item::after {
    display: none;
  }
}
.striped-list-count-item:last-child::after {
  display: none;
}
.striped-list-number {
  text-align: center;
}
@media (min-width: 768px) {
  .striped-list-number {
    color: #F8FAF9;
    display: block;
  }
}

/***** Status labels *****/
/* Styles labels used in posts, articles and requests */
.status-label {
  background-color: #038153;
  border-radius: 4px;
  color: var(--os-text);
  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: #00A862;
}
.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: var(--os-surface-raised);
  color: var(--os-text-muted);
}
.status-label-pending, .status-label-pending-moderation {
  background-color: #1f73b7;
  text-align: center;
}
.status-label-open {
  background-color: #c72a1c;
}
.status-label-solved {
  background-color: var(--os-surface-raised);
}
.status-label-new {
  background-color: #ffb648;
  color: #703b15;
}
.status-label-hold {
  background-color: var(--os-page);
}
.status-label-request {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .status-label-request {
    max-width: 150px;
  }
}

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

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

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

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

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

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

.community-badge {
  margin: 2px;
}

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

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

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

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

.collapsible-nav-list {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .collapsible-nav-list {
    flex-direction: row;
  }
}
.collapsible-nav-list li {
  color: #F8FAF9;
  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: #F8FAF9;
  display: block;
}
@media (min-width: 768px) {
  .collapsible-nav-list li:hover {
    border-bottom: 4px solid var(--os-hairline);
  }
  .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 #00A862;
    order: 1;
  }
}
.collapsible-nav-list li[aria-selected=true] a,
.collapsible-nav-list li.current a {
  color: #F8FAF9;
}

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

/* Sidebar navigation that collapses on mobile */
.collapsible-sidebar {
  flex: 1;
  max-height: 45px;
  overflow: hidden;
  padding: 10px 0;
  position: relative;
}
@media (min-width: 1024px) {
  .collapsible-sidebar {
    max-height: none;
    padding: 0;
  }
}
.collapsible-sidebar-title {
  margin-top: 0;
}
.collapsible-sidebar-toggle {
  position: absolute;
  top: 22.5px;
  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 #00A862;
}
.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: var(--os-surface-raised-2);
  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: var(--os-text-muted);
  font-size: 13px;
}
@media (min-width: 768px) {
  .contributions-table td:last-child {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
}

.no-activities {
  color: var(--os-text-muted);
}

/***** 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;
  max-width: 100%;
  order: 1;
}
.request-main .comment-fields, .request-main .request-submit-comment {
  display: none;
}
.request-main .comment-fields.shown {
  display: block;
}
.request-main .request-submit-comment.shown {
  display: inline;
}
@media (min-width: 1024px) {
  .request-main {
    flex: 0 0 66%;
    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 var(--os-hairline);
  color: var(--os-text-muted);
  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 #00A862;
}
.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 #00A862;
}
.request-main input#mark_as_solved {
  display: none;
}
.request-title {
  width: 100%;
}
@media (min-width: 1024px) {
  .request-title {
    border-bottom: 1px solid var(--os-hairline);
    margin-bottom: 0;
    max-width: 66%;
    padding-bottom: 20px;
  }
}
.request-sidebar {
  border-bottom: 1px solid var(--os-hairline);
  border-top: 1px solid var(--os-hairline);
  flex: 1 0 auto;
  order: 0;
}
@media (min-width: 1024px) {
  .request-sidebar {
    background-color: var(--os-surface-raised);
    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 var(--os-hairline);
  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%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.request-details dd::after {
  content: "\a";
  white-space: pre;
}
.request-details dt {
  line-break: strict;
  color: var(--os-text-muted);
  width: 40%;
  overflow-wrap: break-word;
}
.request-details .request-collaborators {
  display: inline-block;
}
.request-attachments dt, .request-attachments dd {
  width: 100%;
}
.request-attachments dd {
  margin: 10px 0 0 0;
}
.request-form textarea {
  min-height: 120px;
}
.request-follow-up {
  padding-top: 20px;
}

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

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

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

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

.meta-group * {
  display: inline;
}

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

/* User Profiles */
.profile-header {
  padding: 30px 0;
  background-color: var(--os-surface-raised);
}

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

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

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

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

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

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

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

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

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

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

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

.profile-stats .stat-label {
  color: var(--os-text-muted);
  flex: 0 0 100px;
  margin-right: 10px;
}
[dir=rtl] .profile-stats .stat-label {
  margin-left: 10px;
  margin-right: 0;
}

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

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

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

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

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

.profile-stats-counters {
  border-bottom: solid 1px var(--os-hairline);
}
@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 #00A862;
  border-radius: 4px;
  color: #00A862;
  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: var(--os-surface-raised-2);
  margin-bottom: 37px;
}

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

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

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

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

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

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

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

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

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

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

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

.profile-contribution-list > .profile-contribution:last-child {
  border-bottom: 1px solid var(--os-hairline);
}

.profile-contribution-icon {
  left: 0;
  position: absolute;
  color: var(--os-text-muted);
  line-height: 25px;
}
[dir=rtl] .profile-contribution-icon {
  right: 0;
}
.profile-contribution-icon svg {
  vertical-align: middle;
}

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

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

.profile-section .no-activity,
.profile-section .private-activity {
  display: block;
  margin-top: 40px;
  color: #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 var(--os-hairline);
  }
  [dir=rtl] .profile-activity:not(:last-child) {
    border-left: 0;
    border-right: 1px solid var(--os-hairline);
  }
}

.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: var(--os-surface-raised);
}
@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: #12171C;
  background-position: 50% 50%;
  text-align: center;
  color: var(--os-text-muted);
}
[dir=rtl] .profile-activity-icon {
  right: 0;
}
@media (min-width: 768px) {
  .profile-activity-icon {
    left: -14px;
  }
  [dir=rtl] .profile-activity-icon {
    right: -14px;
  }
}

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

/***** Search results *****/
.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 var(--os-hairline);
  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 {
  border-radius: 4px;
  padding: 10px 36px;
  margin-bottom: 4px;
  color: #F8FAF9;
}
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current {
  background-color: var(--os-surface-raised);
  text-decoration: none;
}
.search-results-sidebar .sidenav-subitem {
  unicode-bidi: embed;
}
.search-results-sidebar .sidenav-tag {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-grow: 0;
}
.search-results-sidebar .sidenav-tag .content-tag {
  background: var(--os-surface-raised);
  border-radius: 4px;
  padding: 4px 12px;
  text-decoration: none;
}
.search-results-sidebar .sidenav-tag .content-tag .label {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.000427656px;
  color: #49545C;
  flex-grow: 0;
  vertical-align: middle;
  display: inline-block;
}
.search-results-sidebar .sidenav-tag .content-tag .close-icon {
  color: #555555;
  vertical-align: middle;
  display: inline-block;
}
.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):not(.see-all-filters-item) {
  display: none;
}
.search-results-sidebar .multibrand-filter-list .doc-count {
  color: var(--os-text-muted);
}
.search-results-sidebar .see-all-filters {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: #00A862;
}
.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: " ⌄";
  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 var(--os-hairline);
}
.search-results .no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
}
.search-results .no-results .headline {
  color: var(--os-text);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.45px;
}
.search-results .no-results .action-prompt {
  color: var(--os-text-muted);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.154px;
}
.search-results .no-results .action-prompt a {
  color: #00A862;
}
.search-results .no-results .action-prompt a:visited {
  color: #00A862;
}

.search-result-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-result-title {
  font-size: 16px;
  margin-bottom: 0;
}
.search-result-votes, .search-result-meta-count {
  color: var(--os-text-muted);
  font-size: 13px;
}
.search-result-votes-icon, .search-result-meta-count-icon {
  color: #00A862;
  vertical-align: middle;
  width: 13px;
  height: 13px;
}
[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count {
  margin-left: 20px;
}
[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count {
  margin-right: 20px;
}
.search-result-meta-container {
  color: var(--os-text-muted);
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .search-result-meta-container {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .search-result-meta-container nav {
    flex: 1;
  }
}
@media (min-width: 1024px) {
  [dir=ltr] .search-result-meta-container .meta-data {
    margin-left: 20px;
  }
}
@media (min-width: 1024px) {
  [dir=rtl] .search-result-meta-container .meta-data {
    margin-right: 20px;
  }
}
.search-result-meta-container .meta-data::after {
  content: none;
}
.search-result-breadcrumbs {
  margin: 0;
}
.search-result-description {
  margin-top: 10px;
  margin-bottom: 0;
  word-break: break-word;
}

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

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

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

.notification a {
  color: #158ec2;
}

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

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

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

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

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

.notification-error .notification-icon::before, .notification-error .notification-inline.notification-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23A8ABAC'%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='%23A8ABAC'/%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='%23A8ABAC'%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: var(--os-text-muted);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 100ms ease;
  text-decoration: none !important;
}

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

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

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

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

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

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

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

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

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

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

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

.content-tags > p {
  color: var(--os-text-muted);
  margin-top: 32px;
  margin-bottom: 4px;
}
.content-tags-add-hint {
  color: var(--os-text-muted);
  font-size: 14px;
}

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

/***** WYSIWYG Editor *****/
#hc-wysiwyg {
  border: 1px solid var(--os-hairline-strong);
}

/***** Upload Dropzone *****/
.upload-dropzone {
  border: 1px solid var(--os-hairline-strong);
}

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

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

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

/* ==========================================================================
   OFFSTREET HEADER

   Placed after Copenhagen's own Header / User-info / User-avatar sections so
   it wins on source order without needing !important. The Freshdesk build used
   !important throughout because it was fighting Freshdesk's own stylesheet;
   here we own style.css, so specificity alone is enough.

   Composition: a sticky band in the page colour, holding an inset #090B0F
   shell. Logo left, a centred nav pill with angled wings, user controls right.
   ========================================================================== */

/* -- The sticky band ------------------------------------------------------
   Two elements rather than one: the shell is inset 8px and rounded, so the
   12px strip above it must be painted by something opaque or page content
   shows through it while scrolling. */
.header-outer {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--os-page);
  padding-top: 12px;
}

/* -- The shell's other half ----------------------------------------------
   The header shell and the main content are ONE continuous #090B0F panel:
   the header is its top (rounded top, no bottom border), main is its bottom
   (rounded bottom, no top border). They meet with no seam. Without this rule
   the header reads as a panel floating above an unrelated page. */
body > main {
  position: relative;
  background: var(--os-shell);
  margin: 0 var(--os-shell-inset);
  border: 1px solid var(--os-page);
  border-top: 0;
  border-radius: 0 0 var(--os-radius-shell) var(--os-radius-shell);
  padding-top: 32px;
}

/* -- Logo ---------------------------------------------------------------- */
.logo {
  display: flex;
  align-items: center;
  height: var(--os-nav-h);   /* centres it on the pill's band, not the shell */
  flex-shrink: 0;
  z-index: 2;                /* above the wings */
}
.logo img {
  height: clamp(30px, 3vw, 42px);
  max-height: clamp(30px, 3vw, 42px);
  width: auto;
  display: block;
}
/* Copenhagen paints the {{help_center.name}} wordmark in #00A862, i.e.
   saturated green on near-black at body weight 300 — the weakest text in the
   header. The Offstreet header carries the logo alone, so this is ink, not
   accent. */
/* Copenhagen leaves .logo a as inline-block with a `display: block` img
   inside, so the wordmark wraps onto a second line — measured 66px tall for a
   42px mark. Flex puts them on one row. */
.logo a {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo span {
  margin: 0;
  color: var(--os-text);
  font-weight: var(--os-weight-medium);
  font-size: 16px;
  white-space: nowrap;
}

/* -- Right-hand controls -------------------------------------------------
   With .user-nav lifted out into the centred pill, .nav-wrapper-desktop holds
   only Ask AI and the user dropdown. */
.nav-wrapper-desktop {
  align-items: center;
  gap: 8px;
  height: var(--os-nav-h);
  flex-shrink: 0;
  z-index: 2;
}
@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: flex;
  }
}

/* -- The centred nav pill ------------------------------------------------ */
@media (min-width: 1024px) {
  .user-nav {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    height: var(--os-nav-h);
    padding: 0 clamp(18px, 1.8vw, 26px);
    background: var(--os-page);
    border-radius: 0 0 24px 24px;
    white-space: nowrap;
    /* `isolation: isolate` makes the pill its own stacking context so the
       wings (z-index 0) stay behind the nav items (z-index 2) without
       escaping backwards behind the shell. */
    isolation: isolate;
  }

  /* The angled wings. Painted rectangles in the PAGE colour, masked to a
     wedge, so the pill and its wings read as one unbroken shape cut out of
     the shell. */
  .user-nav::before,
  .user-nav::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: var(--os-wing-width);
    height: var(--os-nav-h);
    background-color: var(--os-page);
    -webkit-mask-image: var(--os-nav-wing);
    mask-image: var(--os-nav-wing);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    pointer-events: none;
    z-index: 0;
  }
  /* The wedge's mass is top-right, so the LEFT wing uses it as drawn and the
     RIGHT wing is mirrored. (Freshdesk has this on ::after, not ::before —
     easy to get backwards.) */
  .user-nav::before {
    right: calc(100% - var(--os-wing-overlap));
    left: auto;
  }
  .user-nav::after {
    left: calc(100% - var(--os-wing-overlap));
    right: auto;
    transform: scaleX(-1);
    transform-origin: center;
  }

  .user-nav-list {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.4vw, 20px);
    margin: 0;
    padding: 0;
  }
  .user-nav-list > li {
    display: block;
    position: relative;
    z-index: 2;              /* above the wings */
  }
}

/* -- Nav item states ----------------------------------------------------- */
.nav-wrapper-desktop .user-nav-list a {
  display: block;
  color: var(--os-text);
  font-size: 15px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--os-radius-pill);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-wrapper-desktop .user-nav-list a:visited {
  color: var(--os-text);
}
/* :focus-visible, never :focus — :focus persists after a mouse click and the
   highlight sticks until you click elsewhere. */
.nav-wrapper-desktop .user-nav-list a:hover,
.nav-wrapper-desktop .user-nav-list a:focus-visible {
  background: var(--os-green-wash);
  color: var(--os-hover-text);
  text-decoration: none;
}
/* Current page. Copenhagen's header emits no current-page marker of any kind,
   so script.js sets aria-current="page" — see the header nav block there. */
.nav-wrapper-desktop .user-nav-list a[aria-current="page"] {
  background: var(--os-green-active);
  color: var(--os-text);
}

/* -- "Submit a ticket", a bordered button inside the pill ---------------- */
.nav-wrapper-desktop .user-nav-list a.submit-a-request {
  border: 1px solid var(--os-text);
  padding: 9px 17px;
}
.nav-wrapper-desktop .user-nav-list a.submit-a-request:hover,
.nav-wrapper-desktop .user-nav-list a.submit-a-request:focus-visible {
  background: var(--os-green-wash);
  border-color: var(--os-green-border);
  color: var(--os-hover-text);
}

/* -- Ask AI -------------------------------------------------------------
   RETAINED DELIBERATELY THOUGH THE BUTTON IS CURRENTLY REMOVED from
   header.hbs. Copenhagen's own .ask-ai rules are still in the stock section
   above, and they fail contrast under this palette — so if the button is ever
   switched back on, leaving these here means it comes back correct rather than
   unreadable. Delete both sets together or neither.

   Copenhagen paints this with #00A862 behind #F8FAF9. Under the
   Offstreet palette that is #F8FAF9 on #00A862 = 2.96:1, which fails WCAG AA
   (and even the 3:1 large-text floor); its hover, #F8FAF9 on #BFFFD0, is
   1.09:1 — effectively invisible. Treating it as a primary green button
   instead gives 7.62:1 at rest and 5.78:1 on hover, and makes it consistent
   with every other green button in the system. */
/* Scoped `.header .ask-ai` (0,2,0) rather than bare `.ask-ai` (0,1,0):
   Copenhagen's `.nav-wrapper-desktop a { border: 0 }` is (0,1,1) and beat the
   unscoped version, so the border silently never drew. Measured: border-style
   computed to `none` and border-width to 0px, with border-color reporting
   currentColor — which looks like a colour bug and is really a missing border. */
.header .ask-ai {
  background-color: var(--os-green-active);
  border: 1px solid var(--os-green-active);
  border-radius: var(--os-radius-pill);
  color: var(--os-text);
  font-weight: var(--os-weight-medium);
  transition: background 0.2s ease, border-color 0.2s ease,
              transform 0.25s ease-out, box-shadow 0.25s ease-out;
  will-change: transform, box-shadow;
}
.header .ask-ai:visited {
  color: var(--os-text);
}
.nav-wrapper-desktop .ask-ai,
.nav-wrapper-mobile .ask-ai {
  color: var(--os-text);
}
.nav-wrapper-desktop .ask-ai:hover,
.nav-wrapper-desktop .ask-ai:focus-visible,
.nav-wrapper-mobile .ask-ai:hover,
.nav-wrapper-mobile .ask-ai:focus-visible {
  background-color: var(--os-green-lift);
  border-color: var(--os-green-lift);
  color: var(--os-text);
  transform: var(--os-lift);
  box-shadow: var(--os-lift-shadow);
}

/* -- Sign in, in the profile slot ---------------------------------------
   Signed out, this sits where the profile menu sits when signed in, so it gets
   the same affordance: transparent pill, green wash on hover. Scoped through
   .header (0,2,0) to clear Copenhagen's `.nav-wrapper-desktop a` (0,1,1),
   which otherwise sets `border: 0; padding: 0 20px 0 0` and the link colour. */
.header .nav-wrapper-desktop .sign-in {
  display: flex;
  align-items: center;
  color: var(--os-text);
  padding: 8px 16px;
  border: 1px solid var(--os-hairline-strong);
  border-radius: var(--os-radius-pill);
  font-weight: var(--os-weight-medium);
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.header .nav-wrapper-desktop .sign-in:hover,
.header .nav-wrapper-desktop .sign-in:focus-visible {
  background: var(--os-green-wash);
  border-color: var(--os-green-border);
  color: var(--os-hover-text);
  text-decoration: none;
}

/* -- User controls and dropdown ----------------------------------------- */
.user-info > button {
  color: var(--os-text);
  /* buttons do not inherit font-weight from body, so this measured 400 next to
     nav items at 300 */
  font-weight: var(--os-weight-body);
  border-radius: var(--os-radius-pill);
  padding: 4px 10px;
  transition: background 0.2s ease, color 0.2s ease;
}
.user-info > button:hover,
.user-info > button:focus-visible {
  background: var(--os-green-wash);
  color: var(--os-hover-text);
}
.user-avatar {
  height: 28px;
  width: 28px;
}

/* Copenhagen's dropdown is a light panel (#fff, #d8dcde border, #2f3941 text,
   and a blue hover wash). Recoloured, geometry left alone. The open/close
   mechanism stays display-based because script.js only toggles aria-expanded
   and reads the menu's rect to decide which way to flip it — swapping to an
   animated opacity/visibility panel is a separate, testable change. */
.dropdown-menu {
  background: var(--os-page);
  border: 1px solid var(--os-green-border);
  border-radius: var(--os-radius-panel);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
  padding: 8px;
  min-width: 220px;
}
.dropdown-menu [role=menuitem],
.dropdown-menu [role=menuitemradio] {
  color: var(--os-text);
  border-radius: var(--os-radius-small);
  padding: 9px 14px;
}
.dropdown-menu [role=menuitem]:hover,
.dropdown-menu [role=menuitem]:focus-visible,
.dropdown-menu [role=menuitemradio]:hover,
.dropdown-menu [role=menuitemradio]:focus-visible {
  background: var(--os-green-wash);
  color: var(--os-hover-text);
  text-decoration: none;
}
.dropdown-menu [role=separator],
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 1px solid var(--os-hairline);
  margin: 6px 0;
}

/* -- Mobile ------------------------------------------------------------- */
.nav-wrapper-mobile {
  align-items: center;
  height: var(--os-nav-h);
  z-index: 2;
}
.nav-wrapper-mobile .menu-button-mobile {
  color: var(--os-text);
  border-radius: var(--os-radius-pill);
  min-width: 0;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease;
}
.nav-wrapper-mobile .menu-button-mobile:hover,
.nav-wrapper-mobile .menu-button-mobile:focus-visible {
  background: var(--os-green-wash);
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] {
  background: var(--os-green-wash);
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu {
  padding: 0;
  width: 20px;
  height: 20px;
}
/* Copenhagen paints a #f3f3f3 circle behind the icon while the menu is open
   (style.css:900). Overriding the BUTTON's expanded background is not enough —
   the icon carries its own. On a #090B0F shell it rendered as a light grey
   blob; caught with elementsFromPoint, because at phone scale it just looked
   like a slightly odd icon. */
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu {
  background: transparent;
}
/* Copenhagen's mobile panel is #fff with #ddd dividers and #68737D text. */
.nav-wrapper-mobile .menu-list-mobile {
  background-color: var(--os-page);
  border: 1px solid var(--os-green-border);
  border-radius: var(--os-radius-panel);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
  padding: 8px;
  /* A short phone with every item open must not run past the bottom of the
     screen with no way to reach the last one. */
  max-height: calc(100vh - var(--os-shell-h) - 32px);
  overflow-y: auto;
}
.nav-wrapper-mobile .menu-list-mobile-items li a,
.nav-wrapper-mobile .menu-list-mobile-items li button {
  color: var(--os-text);
  border-radius: var(--os-radius-small);
  padding: 10px 14px;
}
.nav-wrapper-mobile .menu-list-mobile-items li a:hover,
.nav-wrapper-mobile .menu-list-mobile-items li a:focus-visible,
.nav-wrapper-mobile .menu-list-mobile-items li button:hover,
.nav-wrapper-mobile .menu-list-mobile-items li button:focus-visible {
  background-color: var(--os-green-wash);
  color: var(--os-hover-text);
  text-decoration: none;
}
.nav-wrapper-mobile .menu-list-mobile-items li a:active,
.nav-wrapper-mobile .menu-list-mobile-items li button:active {
  background-color: var(--os-green-wash);
  color: var(--os-hover-text);
}
.nav-wrapper-mobile .menu-list-mobile-items .my-profile-tooltip {
  color: var(--os-text-muted);
}
.nav-wrapper-mobile .menu-list-mobile-items .nav-divider {
  border-bottom: 1px solid var(--os-hairline);
}

/* -- Shell height below the pill breakpoint -----------------------------
   The shell is deliberately 37px taller than the nav pill so that, on desktop,
   there is a band of shell visible below the pill's rounded bottom — that gap
   is what makes the pill read as a notch cut into the shell.

   With no pill there is nothing to make room for, and the gap becomes dead
   space: measured 101px of shell holding a 64px row, so 37px of emptiness
   under the logo on a phone. (In Freshdesk that band was not empty — it held
   the header search bar, positioned at `top: clamp(74px, 5.6vw + 10px, 88px)`.
   Copenhagen puts search on the page instead, so the band has no job here.) */
@media (max-width: 1023px) {
  .header {
    height: calc(var(--os-nav-h) + 14px);
  }
}

/* The user's name was previously pulled out of the layout below 1440px to buy
   back ~80px for the right-hand flank. With Ask AI removed and the pill down
   to three items that space is no longer contested, so the name shows at every
   desktop width. If anything is added back to the header later, this is the
   first place to reclaim room — the rule is in git history. */

/* -- The desktop/mobile switch -----------------------------------------
   Copenhagen's own 1024px, restored. The earlier 1280px was forced by how much
   sat in the header: with Ask AI and a five-item pill, the right wing ran
   under the controls at every width below 1600px. The header is now three
   items — Home / Knowledge / Submit a ticket — with Sign in in the profile
   slot rather than the pill, and no Ask AI, so 1024px clears again. */
@media (max-width: 1023px) {
  .nav-wrapper-desktop {
    display: none;
  }
  .nav-wrapper-mobile {
    display: flex;
  }
}
@media (min-width: 1024px) {
  .nav-wrapper-mobile {
    display: none;
  }
}

/* -- Skip link ----------------------------------------------------------- */
.skip-navigation:focus,
.skip-navigation:active {
  background-color: var(--os-green-active);
  color: var(--os-text);
  border-radius: var(--os-radius-small);
  z-index: 200;
}

/* -- Keyboard focus ring -------------------------------------------------
   Freshdesk defined no focus ring at all — its only `outline` declaration was
   `outline: none`. That is a gap, not a convention, so it is not carried over.
   A visible ring is required for keyboard users; green-on-dark reads clearly
   against both the shell and the pill. */
.header-outer a:focus-visible,
.header-outer button:focus-visible {
  outline: 2px solid var(--os-hover-text);
  outline-offset: 2px;
}

/* -- Touch --------------------------------------------------------------
   A touch screen has no real hover: the browser applies :hover on tap and
   LEAVES IT THERE, so a lifted button stays lifted after the finger goes.
   Drop the movement and give touch a press instead. The comma is OR. */
@media (hover: none), (pointer: coarse) {
  .ask-ai:hover,
  .nav-wrapper-desktop .ask-ai:hover,
  .nav-wrapper-mobile .ask-ai:hover {
    transform: none;
    box-shadow: none;
  }
  .ask-ai:active,
  .nav-wrapper-desktop .ask-ai:active,
  .nav-wrapper-mobile .ask-ai:active {
    transform: scale(0.975);
    transition: transform 0.08s ease-out;
  }
  .header-outer a,
  .header-outer button {
    -webkit-tap-highlight-color: transparent;
  }
}

/* -- Reduced motion -----------------------------------------------------
   Freshdesk's reduced-motion block covered only its ticket-form animation and
   missed the lift entirely. Closing that gap here. */
@media (prefers-reduced-motion: reduce) {
  .header-outer *,
  .header-outer *::before,
  .header-outer *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .ask-ai:hover,
  .ask-ai:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   OFFSTREET HOME

   Placed after the header region so it wins on source order without
   !important. The Freshdesk home page was three stacked sections on a fully
   DARK panel — no hero, no masthead, no light cards. The light #F2FEF3 surface
   belongs to article bodies, not to this page.

   Horizontal system, which Copenhagen's percentage gutters cannot express:
     8px shell inset  ->  --os-gutter (16-32px)  ->  960px centred column
   ========================================================================== */

/* -- Measure --------------------------------------------------------------
   Copenhagen's .container is a 1160px cap with `padding: 0 5%`, switching to
   `width: 90%` above 1160px. Percentage gutters grow without limit on wide
   screens and cannot hold a fixed reading measure, so the home page gets the
   Freshdesk system instead. */
.home-page .container,
body:has(.hero) .container {
  max-width: none;
  width: 100%;
  padding-left: var(--os-gutter);
  padding-right: var(--os-gutter);
}
.home-page .container > .section,
body:has(.hero) .container > .section {
  max-width: var(--os-measure);
  margin-left: auto;
  margin-right: auto;
}

/* -- Hero ---------------------------------------------------------------
   Copenhagen ships a 300px band carrying /hc/theming_assets/01KQDK2ZMJG6ANWJ7T35GZQ5Y7 — the
   stock pastel illustration, which is entirely wrong for this palette. The
   Freshdesk portal had no hero at all; its search sat in the header shell.

   Search stays on the page rather than moving into the header, deliberately:
   six of the nine {{search}} call sites pass a `scoped` argument, and a single
   header instance has no page context to scope against, so moving it would
   trade a working feature for a visual one. It would also mean reverting the
   mobile shell collapse and accepting a permanently sticky overhanging field.

   So the hero survives as a plain band holding the field. It also carries
   id="main-content", the skip-link target — do not delete the element. */
.hero {
  background-image: none;
  background-color: transparent;
  height: auto;
  /* Three paddings stack above the search field: the 37px of shell left below
     the nav pill, `body > main`'s 32px, and this. Together they measured ~117px
     of empty space before the field, so this contributes little. Freshdesk
     spent that band on the search itself; since the field now sits on the page
     instead, the band is simply quiet. */
  padding: clamp(6px, 1.2vw, 16px) var(--os-gutter) clamp(4px, 1vw, 12px);
  width: 100%;
}
.hero-inner {
  /* Same cap as the field, so .search-icon's `left: 15px` — which resolves
     against this element, not the field — lands on the field's edge. */
  position: relative;
  top: auto;
  transform: none;
  max-width: clamp(400px, calc(25.5vw + 264px), 620px);
  margin: 0 auto;
}

/* -- Search field -------------------------------------------------------
   A recessed well: the PAGE colour sitting on the SHELL, which is what makes
   it read as cut into the panel rather than floated on it. Freshdesk used
   #13171c for the field against #090b0f, one level off --os-page, and a
   #30363a border which is --os-hairline composited over the shell (measured
   rgb(52,54,57) vs rgb(48,54,58)) — so both map onto existing tokens rather
   than needing new hex.

   Copenhagen gives the border to the form AND a second border to the input,
   then splits the radius between input and clear button once there is a value.
   One well with `overflow: hidden` is simpler and survives the clear button
   appearing, so that radius-splitting is neutralised below. */
.hero .search,
.sub-nav .search {
  display: flex;
  align-items: center;
  background: var(--os-page);
  border: 1px solid var(--os-hairline);
  border-radius: var(--os-radius-small);
  border-width: 1px;
  border-style: solid;
  border-color: var(--os-hairline);
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.hero .search {
  height: 48px;
}
.hero .search:focus-within,
.sub-nav .search:focus-within {
  border-color: var(--os-green);
}
.hero .search input[type=search],
.sub-nav .search input[type=search] {
  background: transparent;
  border: 0;
  color: var(--os-text);
  height: 100%;
  flex: 1 1 auto;
  min-width: 0;
}
.hero .search input[type=search] {
  font-size: 18px;
}
.hero .search input[type=search]::placeholder,
.sub-nav .search input[type=search]::placeholder {
  color: var(--os-text-muted);
  opacity: 1;
}
/* Copenhagen paints an autofilled field white with
   `-webkit-box-shadow: 0 0 0 1000px #fff inset` — on a dark well that is a
   full-width white block the moment the browser autofills. */
.search input[type=search]:-webkit-autofill,
.search input[type=search]:-webkit-autofill:hover,
.search input[type=search]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--os-page) inset;
  -webkit-text-fill-color: var(--os-text);
}
/* One well, one radius — drop the split-radius mechanics. */
[dir=ltr] .search-has-value input[type=search],
[dir=rtl] .search-has-value input[type=search],
[dir=ltr] .search-has-value input[type=search]:focus,
[dir=rtl] .search-has-value input[type=search]:focus {
  border-radius: 0;
  border-right-color: transparent;
  border-left-color: transparent;
}
.search .clear-button,
[dir=ltr] .search .clear-button,
[dir=rtl] .search .clear-button {
  background-color: transparent;
  color: var(--os-text-muted);
  border-radius: 0;
  border: 0;
  transition: color 0.2s ease, background 0.2s ease;
}
.search .clear-button:hover,
.search .clear-button:focus-visible {
  background-color: var(--os-green-wash);
  color: var(--os-hover-text);
}
.search-icon {
  color: var(--os-text-muted);
}

/* Copenhagen strips the focus ring from every input, including this one.
   The header region already established that a visible ring is required and
   that Freshdesk's blanket `outline: none` was a gap rather than a
   convention. Same judgement here. */
.search input:where(:not([type=checkbox])):focus-visible {
  outline: 2px solid var(--os-hover-text);
  outline-offset: 2px;
}

/* -- Section rhythm ----------------------------------------------------- */
.home-page .section,
body:has(.hero) .container .section {
  margin-bottom: 0;
}
.categories.blocks {
  margin: clamp(24px, 3vw, 40px) auto clamp(32px, 4vw, 50px);
}
.knowledge-base .articles {
  margin-top: clamp(24px, 3vw, 40px);
}
.home-section.activity {
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

/* -- Category cards -----------------------------------------------------
   Copenhagen lays these out as `flex: 1 0 340px` with wrapping, which makes a
   lone card on the last row stretch to full width — with four categories that
   produced a 3-up row and one full-bleed orphan. An explicit grid keeps every
   card one column wide however many there are. Freshdesk went 3-up above
   768px and 1-up below, with no 2-column state. */
.blocks-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 36px);
  margin: 0;
}
@media (max-width: 768px) {
  .blocks-list {
    grid-template-columns: 1fr;
  }
}

.blocks-item {
  display: flex;
  margin: 0;
  max-width: none;
  background: var(--os-card);
  border: 1px solid var(--os-card-border);
  border-radius: var(--os-radius-panel);
  color: var(--os-card-ink);
  text-align: center;
  transition: background 0.2s ease, border-color 0.2s ease,
              transform 0.25s ease-out, box-shadow 0.25s ease-out;
  will-change: transform, box-shadow;
}
/* Copenhagen also styles `.blocks-item:hover *`, which repaints every
   descendant on hover; the title and description are handled explicitly
   below, so that blanket rule is neutralised to avoid it fighting them. */
.blocks-item:hover,
.blocks-item:focus-within {
  background: var(--os-card-hover);
  border-color: var(--os-card-hover-border);
  transform: var(--os-lift);
  box-shadow: var(--os-lift-shadow);
}
.blocks-item:hover *,
.blocks-item:focus *,
.blocks-item:active * {
  color: inherit;
}
.blocks-item-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: clamp(22px, 2.4vw, 32px) clamp(16px, 2vw, 24px);
  color: var(--os-card-ink);
}
.blocks-item-link:hover,
.blocks-item-link:focus,
.blocks-item-link:active,
.blocks-item-link:visited {
  color: var(--os-card-ink);
  text-decoration: none;
}
.blocks-item-title {
  color: var(--os-card-ink);
  font-size: 18px;
  font-weight: var(--os-weight-medium);
  line-height: 1.3;
}
.blocks-item-description {
  color: var(--os-card-ink);
  font-weight: var(--os-weight-body);
  line-height: 1.45;
}
/* Copenhagen reserves space for the description even when empty. A category
   with no description should not leave a gap. */
.blocks-item-description:empty {
  display: none;
}

/* -- Promoted articles --------------------------------------------------
   Copenhagen renders these as a 33%-wide flex list separated by #ddd
   bottom-borders. Freshdesk used outlined cards in a 3-up grid, which is a
   different form entirely, so this is rebuilt rather than recoloured.

   Note Zendesk's promoted_articles is editorially curated where Freshdesk's
   popular_articles was view-ranked, and it has no count limit — so the grid
   has to tolerate any number of cards, which a grid does and a 3-column flex
   list does not. */
.knowledge-base .articles > h2 {
  color: var(--os-text);
  font-size: 22px;
  font-weight: var(--os-weight-bold);
  margin-bottom: clamp(16px, 2vw, 24px);
}
.article-list.promoted-articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 36px);
  margin: 0;
}
@media (max-width: 768px) {
  .article-list.promoted-articles {
    grid-template-columns: 1fr;
  }
}
.promoted-articles-item,
.promoted-articles-item:nth-child(3n),
[dir=rtl] .promoted-articles-item {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  float: none;
}
.promoted-articles-item a,
.promoted-articles-item:last-child a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
  height: 100%;
  padding: 24px 20px;
  background: var(--os-page);
  border: 1px solid var(--os-card-outline);
  border-radius: var(--os-radius-panel);
  color: var(--os-card-ink);
  font-size: 16px;
  font-weight: var(--os-weight-medium);
  line-height: 1.4;
  text-decoration: none;
  /* A shorter lift than the category cards — Freshdesk's deliberate two-tier
     hierarchy, -6px for primary surfaces and -4px for secondary. */
  transition: background 0.3s ease, border-color 0.3s ease,
              transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, box-shadow;
}
.promoted-articles-item a:hover,
.promoted-articles-item a:focus-visible {
  background: var(--os-card-raised);
  border-color: var(--os-card-outline-hover);
  color: var(--os-text);
  transform: var(--os-lift-sm);
  box-shadow: var(--os-lift-sm-shadow);
  text-decoration: none;
}
.promoted-articles-item a:visited {
  color: var(--os-card-ink);
}
.promoted-articles-item .icon-lock {
  color: var(--os-text-muted);
  flex: 0 0 auto;
}

/* -- Recent activity ---------------------------------------------------- */
.home-section h2,
/* Copenhagen centres this heading while every other section heading on the
   page is left-aligned. */
.recent-activity-header {
  color: var(--os-text);
  font-size: 22px;
  font-weight: var(--os-weight-bold);
  text-align: left;
}

/* Copenhagen floats .recent-activity-item-meta right at >=768px, but the meta
   comes AFTER a block-level h3 in source order, so a float cannot rise beside
   it — it lands on its own line, right-aligned, ~33px below the title it
   belongs to. Stacked and left-aligned reads as one item instead of two. */
.recent-activity-item-meta {
  float: none;
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.recent-activity-item-link,
.recent-activity-item-parent {
  width: auto;
  margin: 0;
}
.recent-activity-list {
  margin-top: clamp(12px, 1.5vw, 20px);
}
.recent-activity-item {
  border-bottom: 1px solid var(--os-hairline);
  padding: 16px 0;
}
.recent-activity-item:last-child {
  border-bottom: 0;
}
.recent-activity-item h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: var(--os-weight-medium);
}
.recent-activity-item-link {
  color: var(--os-text);
}
.recent-activity-item-link:hover,
.recent-activity-item-link:focus-visible {
  color: var(--os-hover-text);
  text-decoration: none;
}
.recent-activity-item-meta,
.recent-activity-item-time {
  color: var(--os-text-muted);
  font-size: 13px;
}
.recent-activity-item-parent {
  color: var(--os-green);
}
.recent-activity-item-parent:hover,
.recent-activity-item-parent:focus-visible {
  color: var(--os-hover-text);
  text-decoration: none;
}
.recent-activity-controls a,
.recent-activity-controls a:visited {
  color: var(--os-green);
  text-decoration: none;
}
.recent-activity-controls a:hover,
.recent-activity-controls a:focus-visible {
  color: var(--os-hover-text);
  text-decoration: none;
}

/* -- Focus rings on the new cards --------------------------------------
   Freshdesk declared no :focus or :focus-visible on any home-page card, so a
   keyboard user got only the UA default. That is a gap, not a convention. */
.blocks-item-link:focus-visible,
.promoted-articles-item a:focus-visible {
  outline: 2px solid var(--os-hover-text);
  outline-offset: 3px;
}

/* -- Touch -------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .blocks-item:hover,
  .promoted-articles-item a:hover {
    transform: none;
    box-shadow: none;
  }
  .blocks-item:active,
  .promoted-articles-item a:active {
    transform: scale(0.975);
    transition: transform 0.08s ease-out;
  }
  .blocks-item,
  .promoted-articles-item a {
    -webkit-tap-highlight-color: transparent;
  }
}

/* -- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .blocks-item,
  .promoted-articles-item a {
    transition-duration: 0.01ms;
  }
  .blocks-item:hover,
  .blocks-item:focus-within,
  .promoted-articles-item a:hover,
  .promoted-articles-item a:focus-visible {
    transform: none;
  }
}

/* -- Featured panel -----------------------------------------------------
   The Freshdesk home page's featured spotlight, rebuilt. Its editorial copy
   comes from theme settings and its links from promoted_articles; Freshdesk
   fed it from ~120 lines of Liquid that Curlybars cannot express.

   Two deliberate departures:
   - No icons. The per-link icons were chosen by keyword-matching each title
     across 14 categories, which was the least portable part; and the panel's
     single decorative icon tile would be an empty green square without a
     glyph, so it is gone too.
   - The link strip is auto-fit rather than Freshdesk's repeat(5, 1fr).
     promoted_articles has no count limit and Curlybars cannot slice a
     collection, so a fixed 5-column grid would break at 3 items or at 8. */
.os-featured {
  background: var(--os-page);
  border: 1px solid var(--os-card-outline);
  border-radius: var(--os-radius-panel);
  padding: clamp(20px, 2.4vw, 32px);
  margin: 0;
}
.os-featured-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 2.2vw, 28px);
  margin-bottom: clamp(18px, 2.2vw, 26px);
}
@media (max-width: 768px) {
  .os-featured-top {
    grid-template-columns: minmax(0, 1fr);
  }
}
.os-featured-copy {
  min-width: 0;
}
.os-featured-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 6px 13px;
  background: var(--os-green-wash);
  border: 1px solid var(--os-green-border);
  border-radius: var(--os-radius-pill);
  color: var(--os-hover-text);
  font-size: 12px;
  font-weight: var(--os-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.os-featured-title {
  margin: 0;
  color: var(--os-text);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: var(--os-weight-bold);
  line-height: 1.25;
}
.os-featured-blurb {
  margin: 10px 0 0;
  color: var(--os-text-muted);
  font-weight: var(--os-weight-body);
  line-height: 1.55;
  max-width: 62ch;
}

/* The CTA is a primary green button, matching Ask AI and the other primary
   actions rather than inventing a third button species. */
.os-featured-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 14px 22px;
  background: var(--os-green-active);
  border: 1px solid var(--os-green-active);
  border-radius: var(--os-radius-pill);
  color: var(--os-text);
  font-weight: var(--os-weight-medium);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease,
              transform 0.25s ease-out, box-shadow 0.25s ease-out;
  will-change: transform, box-shadow;
}
.os-featured-cta:visited {
  color: var(--os-text);
}
.os-featured-cta:hover,
.os-featured-cta:focus-visible {
  background: var(--os-green-lift);
  border-color: var(--os-green-lift);
  color: var(--os-text);
  transform: var(--os-lift);
  box-shadow: var(--os-lift-shadow);
  text-decoration: none;
}

.os-featured-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
/* Explicit steps between desktop and phone. Left to auto-fit alone, a 768px
   tablet showed four small link cells directly under full-width single-column
   category cards, which read as two unrelated layouts on one page. The
   category grid goes 1-up at <=768px (Freshdesk had no 2-column state), so the
   link strip steps down with it. */
@media (max-width: 900px) {
  .os-featured-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .os-featured-links {
    grid-template-columns: 1fr;
  }
}
.os-featured-link {
  /* Block, not flex. -webkit-line-clamp on the description needs
     `display: -webkit-box`, and a flex ITEM has its display blockified —
     Chrome normalised it to `flow-root` and the clamp silently did nothing.
     A block cell keeps the clamp working; the 8px gap becomes a margin. */
  display: block;
  text-align: left;
  padding: 14px;
  background: var(--os-shell);
  border: 1px solid var(--os-hairline);
  border-radius: var(--os-radius-small);
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease,
              transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, box-shadow;
}
.os-featured-link:hover,
.os-featured-link:focus-visible {
  background: var(--os-card-raised);
  border-color: var(--os-card-outline-hover);
  transform: var(--os-lift-sm);
  box-shadow: var(--os-lift-sm-shadow);
  text-decoration: none;
}
.os-featured-link-title {
  display: block;
  width: 100%;
  color: var(--os-card-ink);
  font-size: 14px;
  font-weight: var(--os-weight-medium);
  line-height: 1.35;
  transition: color 0.3s ease;
}
.os-featured-link:hover .os-featured-link-title,
.os-featured-link:focus-visible .os-featured-link-title {
  color: var(--os-text);
}
.os-featured-link-desc {
  width: 100%;
  margin-top: 8px;
  color: var(--os-text-muted);
  font-size: 13px;
  font-weight: var(--os-weight-body);
  line-height: 1.45;
  /* `snippet` has no length cap, so clamp it rather than let one long
     excerpt set the height of every card in the row. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.os-featured-link .icon-lock {
  color: var(--os-text-muted);
  vertical-align: middle;
}
.os-featured-link:focus-visible,
.os-featured-cta:focus-visible {
  outline: 2px solid var(--os-hover-text);
  outline-offset: 3px;
}

@media (hover: none), (pointer: coarse) {
  .os-featured-cta:hover,
  .os-featured-link:hover {
    transform: none;
    box-shadow: none;
  }
  .os-featured-cta:active,
  .os-featured-link:active {
    transform: scale(0.975);
    transition: transform 0.08s ease-out;
  }
  .os-featured-cta,
  .os-featured-link {
    -webkit-tap-highlight-color: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .os-featured-cta,
  .os-featured-link {
    transition-duration: 0.01ms;
  }
  .os-featured-cta:hover,
  .os-featured-cta:focus-visible,
  .os-featured-link:hover,
  .os-featured-link:focus-visible {
    transform: none;
  }
}

/* -- Footer: service status link ---------------------------------------
   Freshdesk faked this as a real solution category whose href JS rewrote to
   the statuspage.io URL. Zendesk categories cannot hold an external URL
   either, so per Ryan it is a footer link instead — which is also where a
   service-status link normally belongs. */
.footer-status-link,
.footer-status-link:visited {
  color: var(--os-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-status-link:hover,
.footer-status-link:focus-visible {
  color: var(--os-hover-text);
  text-decoration: none;
}

/* ==========================================================================
   OFFSTREET CHROME — the shared index-page furniture

   Covers the sub-nav (breadcrumbs + scoped search), the category page and the
   section page. Appended last, like the other Offstreet regions, so it wins on
   source order without !important.

   The Freshdesk analogues of these two pages were ONE DARK PANEL each
   (#13171c on the #090b0f shell, 1px #30363a, 18px radius, 32px padding) with
   no cards, no lift and no shadow. Both map onto existing tokens: #13171c is
   one level off --os-page, and #30363a is --os-hairline composited over the
   shell. So this is a panel, not a card grid.
   ========================================================================== */

/* -- Horizontal system, globally ----------------------------------------
   Copenhagen's .container is a 1160px cap with percentage gutters. Percentages
   grow without limit on wide screens and cannot hold a fixed measure, so the
   Offstreet system replaces it everywhere rather than page by page — the
   earlier home-page override was scoped `body:has(.hero)`, which both missed
   these pages and leaked onto the community and service-list pages, which also
   have heroes. A `.home-page` selector was in there too; no template emits
   that class, so it never matched anything. */
.container {
  max-width: none;
  width: 100%;
  padding-left: var(--os-gutter);
  padding-right: var(--os-gutter);
}

/* -- The dead sidebar column --------------------------------------------
   .category-container and .section-container are `display: flex;
   justify-content: flex-end` with the content at `flex: 0 0 80%` above
   1024px — Copenhagen reserving a 20% sidebar that NEITHER template ever
   fills. Measured: 232px of empty page pinned to the left of every category
   and section page, with the content shoved flush right. */
.category-container,
.section-container {
  display: block;
}
.category-content,
.section-content {
  flex: none;
  max-width: var(--os-measure-wide);
  margin: 0 auto;
}

/* -- The panel ----------------------------------------------------------- */
.category-content,
.section-content {
  background: var(--os-page);
  border: 1px solid var(--os-hairline);
  border-radius: var(--os-radius-panel);
  padding: clamp(20px, 2.6vw, 32px);
}

/* -- The divider above the sub-nav --------------------------------------
   Line 1 of both templates is a .container-divider, a direct child of <main>
   and so outside .container — a full-bleed 1px line straight across the
   #090B0F panel, 32px under the header seam. It was the most visible
   light-theme artefact left on these pages. The panel seam already separates
   header from content, so the line has no job. */
.container-divider {
  display: none;
}

/* -- Sub-nav: breadcrumbs + scoped search ------------------------------- */
.sub-nav {
  align-items: center;
  margin-bottom: clamp(16px, 2vw, 24px);
}
/* Copenhagen's .breadcrumbs is a nowrap flex row whose li carry
   text-overflow: ellipsis and max-width: 450px. On a phone the row simply
   overflowed the panel and the last crumb was cut off mid-word with no
   ellipsis — the li never shrank, because a flex item's default min-width is
   auto. Wrapping plus min-width: 0 makes both the wrap and the ellipsis work. */
.breadcrumbs {
  flex-wrap: wrap;
  row-gap: 2px;
}
.breadcrumbs li {
  min-width: 0;
  color: var(--os-text-muted);
}
/* An ASCII ">" reads as markup. Freshdesk used a proper single angle quote. */
.breadcrumbs li + li::before {
  content: "\203A";
  color: var(--os-hairline-strong);
  margin: 0 7px;
}
/* The current page's crumb is unlinked plain text, so it inherited exactly the
   muted colour of the separators and every ancestor — the trail read as one
   flat string with no "you are here". */
.breadcrumbs li:last-child {
  color: var(--os-text);
}
.breadcrumbs li a:hover,
.breadcrumbs li a:focus-visible {
  color: var(--os-hover-text);
  text-decoration: none;
}

/* The scoped field is the same well as the hero's, one size down. Only the
   hero instance was given a height, so this one collapsed to its line-box. */
.sub-nav .search {
  height: 40px;
}
.sub-nav .search input[type=search] {
  font-size: 15px;
}

/* -- Page header -------------------------------------------------------- */
.page-header h1 {
  grid-column: 1;
  color: var(--os-text);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
  margin: 0;
}
/* Copenhagen italicises this. Nothing else in the design is italic. */
.page-header-description {
  grid-column: 1 / -1;
  font-style: normal;
  color: var(--os-text-muted);
  font-weight: var(--os-weight-body);
  line-height: 1.55;
  margin: 10px 0 0;
  max-width: 70ch;
}
/* Copenhagen makes .page-header a flex row, so the title, the Follow control
   and the description all landed on one line.

   Flex wrapping does not fix it, and the reason is worth writing down: a flex
   item's hypothetical main size is its basis CLAMPED BY max-width, and line
   breaking uses that clamped figure. So `flex: 1 0 100%` plus the
   `max-width: 70ch` reading measure resolved to 658px, which fits beside a
   281px title — the item never wrapped no matter what the basis said.

   Grid says the thing directly instead: title and Follow share row one, the
   description spans both columns on row two. */
.page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px 16px;
  padding-bottom: clamp(18px, 2.2vw, 26px);
  border-bottom: 1px solid var(--os-hairline);
  margin-bottom: clamp(18px, 2.2vw, 26px);
}

.section-subscribe {
  grid-column: 2;
  justify-self: end;
}

/* -- Category page: the section tree -----------------------------------
   Freshdesk's folder listing was a two-column RULED TABLE inside the panel —
   no per-cell fill, no radius, no lift, and a zero gap, with cells separated
   by hairlines. 2-up at >=768px, 1-up below, with no intermediate state. */
.section-tree {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
@media (max-width: 768px) {
  .section-tree {
    grid-template-columns: 1fr;
  }
}
.section-tree > .section {
  margin: 0;
  padding: clamp(18px, 2vw, 26px) clamp(16px, 1.8vw, 24px);
  border-bottom: 1px solid var(--os-hairline);
}
/* The rule between the two columns. */
@media (min-width: 769px) {
  /* :not(:last-child) so the rule is not drawn beside an empty half-row —
     with an odd number of sections the last cell has no neighbour. */
  .section-tree > .section:nth-child(odd):not(:last-child) {
    border-right: 1px solid var(--os-hairline);
  }
  /* Freshdesk applied border-bottom to every cell with no last-row
     exception, so it always ended on a stray trailing rule under the final
     row. Fixing rather than porting: drop the rule on the last row, whether
     that row holds one cell or two. */
  .section-tree > .section:last-child,
  .section-tree > .section:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }
}
@media (max-width: 768px) {
  .section-tree > .section:last-child {
    border-bottom: 0;
  }
}
.section-tree-title {
  margin: 0 0 14px;
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: var(--os-weight-medium);
  line-height: 1.25;
}
.section-tree-title a,
.section-tree-title a:visited {
  color: var(--os-text);
}
.section-tree-title a:hover,
.section-tree-title a:focus-visible {
  color: var(--os-hover-text);
  text-decoration: none;
}

/* -- Article lists (both pages) ---------------------------------------- */
.article-list-item {
  padding: 0;
  border: 0;
}
.article-list-link,
.article-list-link:visited {
  color: var(--os-card-ink);
}
.article-list-link:hover,
.article-list-link:focus-visible {
  color: var(--os-green-hover);
  text-decoration: none;
}
.article-list-item .icon-star {
  color: var(--os-green);
}
.article-list-item .icon-lock {
  color: var(--os-text-muted);
}

/* On the category page the list is tight, since each cell only shows a few. */
.section-tree .article-list-item {
  padding: 5px 0;
}
.section-tree .article-list-link {
  font-size: 15px;
  line-height: 1.45;
}

/* Freshdesk's "view all" link used the exact SWAP of the article link's two
   colours — green at rest, article-ink on hover. Small, deliberate, easy to
   miss. */
.see-all-articles,
.see-all-articles:visited {
  display: inline-block;
  margin-top: 12px;
  color: var(--os-green);
  font-size: 14px;
}
.see-all-articles:hover,
.see-all-articles:focus-visible {
  color: var(--os-card-ink);
  text-decoration: none;
}

/* -- Section page: the article rows ------------------------------------
   Freshdesk's folder rows were full-width block anchors with a 10px radius and
   a green wash on hover — divided-less rows, explicitly NOT cards. A single
   hairline sits on top of the list and nowhere else. */
.section-content > .article-list {
  border-top: 1px solid var(--os-hairline);
  margin-top: clamp(18px, 2.2vw, 26px);
  padding-top: clamp(8px, 1vw, 12px);
}
.section-content > .article-list > .article-list-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0;
}
.section-content > .article-list > .article-list-item > .article-list-link {
  /* flex: 0 1 auto, not 1 1 auto — a full-width link pushed the "internal"
     lock icon to the far right edge of the panel, away from the title it
     qualifies. */
  display: block;
  flex: 0 1 auto;
  padding: 16px 18px;
  border-radius: var(--os-radius-small);
  font-size: 16px;
  line-height: 1.4;
  transition: background 0.2s ease, color 0.2s ease;
}
.section-content > .article-list > .article-list-item > .article-list-link:hover,
.section-content > .article-list > .article-list-item > .article-list-link:focus-visible {
  background: var(--os-green-wash);
  color: var(--os-hover-text);
}

/* -- Section page: nested sections -------------------------------------
   Zendesk sections can nest; Freshdesk folders could not, so this page state
   has no Freshdesk equivalent. Copenhagen's chevron row is a reasonable form,
   so it is recoloured rather than redesigned. */
.section-list-item + .section-list-item {
  border-top: 1px solid var(--os-hairline);
}
/* No rule on the first item: .page-header already closes with one, and the two
   together read as a double line with a gap. */
/* No closing rule here: the article list below opens with its own top
   hairline, and the two together drew a doubled line with a gap between. */
.section-list-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--os-radius-small);
  color: var(--os-text);
  font-weight: var(--os-weight-medium);
  transition: background 0.2s ease, color 0.2s ease;
}
.section-list-item a:hover,
.section-list-item a:focus-visible {
  background: var(--os-green-wash);
  color: var(--os-hover-text);
  text-decoration: none;
}
.section-list-item a svg {
  flex: 0 0 auto;
  color: var(--os-text-muted);
}

/* -- Follow control ----------------------------------------------------- */
.section-subscribe button {
  border-radius: var(--os-radius-pill);
  font-size: 13px;
  padding: 0 18px;
}

/* -- Pagination --------------------------------------------------------
   Copenhagen styles the four arrows with the generic .button rule, which gives
   them a 4px radius and `width: 100%` below 768px — a stack of full-width
   buttons on a phone. Freshdesk used centred 44px targets in a row, which is
   also the minimum comfortable touch size. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: clamp(24px, 3vw, 32px) 0 0;
}
.pagination-first,
.pagination-prev,
.pagination-next,
.pagination-last {
  display: inline-flex;
}
.pagination-first-link,
.pagination-prev-link,
.pagination-next-link,
.pagination-last-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  width: auto;
  padding: 0 14px;
  border-radius: var(--os-radius-small);
  font-size: 14px;
  line-height: 1;
}
/* .pagination-prev-text / -next-text carry Copenhagen's own side margins,
   which double up inside a flex row that already has a gap. */
.pagination-prev-text,
.pagination-next-text {
  margin: 0;
}
/* .pagination-first-text and -last-text are visually hidden, so if Zendesk
   supplies no icon these links render as empty bordered boxes either side of
   Previous/Next. :has() adds a glyph only when there is no svg, so this is
   correct whether or not the helper provides one. */
.pagination-first-link:not(:has(svg))::before {
  content: "\00AB";
}
.pagination-last-link:not(:has(svg))::before {
  content: "\00BB";
}

[data-disabled].pagination-first-link,
[data-disabled].pagination-prev-link,
[data-disabled].pagination-next-link,
[data-disabled].pagination-last-link {
  opacity: 0.45;
  pointer-events: none;
}

/* -- Focus rings -------------------------------------------------------- */
.breadcrumbs a:focus-visible,
.section-tree-title a:focus-visible,
.article-list-link:focus-visible,
.see-all-articles:focus-visible,
.section-list-item a:focus-visible,
.pagination a:focus-visible,
.section-subscribe button:focus-visible {
  outline: 2px solid var(--os-hover-text);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .article-list-link,
  .section-list-item a {
    transition-duration: 0.01ms;
  }
}

/* ==========================================================================
   OFFSTREET ARTICLE

   The one page with a LIGHT reading surface. Freshdesk put article bodies on
   #F2FEF3 inside a single rounded shell whose other half was a dark sidebar,
   and that composition is what this reproduces.

   Freshdesk's article prose, however, was essentially UNSTYLED — no heading
   sizes, no paragraph size or line-height, and no rules at all for lists,
   tables, code, images or blockquotes (greps over all 6,052 lines return
   nothing for any of them). Its base theme supplied those. So unlike every
   other page in this migration there are no prose decisions to port, and the
   type treatment below is designed against the light tokens instead.

   Breakpoint stays at Copenhagen's 1024px rather than Freshdesk's 992px:
   .article-container, .collapsible-sidebar and three other rules all switch
   together at 1024, and moving one without the rest is how that becomes a bug.
   ========================================================================== */

/* -- The shell ----------------------------------------------------------
   .container gives this page no max-width at all (the CHROME region removed
   Copenhagen's 1160px cap globally), and .article was sized in percentages
   with no upper bound — the reading column grew to 1213px at 1920px viewport
   and 1647px at 2560px. The measure belongs here. */
.article-container {
  max-width: var(--os-measure-wide);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  /* One rounded shell containing both columns, so the light card and the dark
     sidebar read as two halves of one object rather than two panels.
     `overflow: hidden` is what lets the children square their own corners. */
  .article-container {
    border: 1px solid var(--os-hairline);
    border-radius: var(--os-radius-panel);
    overflow: hidden;
    box-shadow: var(--os-paper-shadow);
  }
  /* Copenhagen puts the sidebar first in the DOM, so a plain flex row would
     place it left. Freshdesk had content left, sidebar right. `order` fixes
     the visual sequence without touching the template, which keeps the
     sidebar first for screen readers and for the mobile accordion. */
  .article {
    order: 1;
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    padding: clamp(24px, 2.6vw, 36px);
  }
  .article-sidebar {
    order: 2;
    flex: 0 0 25%;
    max-width: 25%;
    padding: clamp(20px, 2.2vw, 28px);
  }
}

/* -- The light card ----------------------------------------------------- */
.article {
  background: var(--os-paper);
  color: var(--os-ink);
}
@media (max-width: 1023px) {
  /* Stacked, each half becomes its own rounded card with a 16px gap. */
  .article {
    border: 1px solid var(--os-hairline);
    border-radius: var(--os-radius-panel);
    padding: clamp(18px, 4vw, 28px);
    margin-bottom: 16px;
  }
}

/* -- The sidebar (stays DARK) ------------------------------------------- */
.article-sidebar {
  background: var(--os-page);
  color: var(--os-text);
  border: 0;
  margin-bottom: 0;
}
@media (max-width: 1023px) {
  .article-sidebar {
    border: 1px solid var(--os-hairline);
    border-radius: var(--os-radius-panel);
    padding: clamp(14px, 3vw, 20px);
    margin-bottom: 16px;
  }
}
.sidenav-title,
.collapsible-sidebar-title {
  color: var(--os-text);
  font-weight: var(--os-weight-medium);
}
.article-sidebar .sidenav-item {
  display: block;
  padding: 8px 10px;
  border-radius: var(--os-radius-small);
  color: var(--os-card-ink);
  font-size: 14px;
  line-height: 1.4;
}
.article-sidebar .sidenav-item:hover,
.article-sidebar .sidenav-item:focus-visible {
  background: var(--os-green-wash);
  color: var(--os-hover-text);
  text-decoration: none;
}
.article-sidebar .sidenav-item.current-article,
.article-sidebar .sidenav-item[aria-current=page] {
  background: var(--os-green-active);
  color: var(--os-text);
}
.article-sidebar-item {
  display: inline-block;
  margin-top: 10px;
  padding: 0 10px;
  color: var(--os-green);
  font-size: 14px;
}
.article-sidebar-item:hover,
.article-sidebar-item:focus-visible {
  color: var(--os-hover-text);
  text-decoration: none;
}
.collapsible-sidebar-toggle {
  color: var(--os-text);
}

/* -- LIGHT-SURFACE OVERRIDES -------------------------------------------
   Everything below re-grounds values that Copenhagen injects from theme
   SETTINGS at Zendesk's compile step. Those cannot be token-substituted the
   way the light-literal sweep worked, because #00A862 and friends are
   replaced before the CSS ever reaches us. Overriding the rules, scoped to
   the light card, is the only route.

   What they currently resolve to on #F2FEF3, all failing:
     #00A862 / #00A862  #00A862  2.99:1
     #BFFFD0                  #BFFFD0  1.10:1  (invisible)
     #F8FAF9                        #F8FAF9  1.01:1  (invisible)
     #00A862                       #00A862  2.99:1                     */
.article a {
  color: var(--os-link);
}
/* Same value as rest, deliberately — the dark theme sets visited_link_color
   equal to link_color, so light keeps that decision rather than inventing a
   distinction. Named so the choice is visible. */
.article a:visited {
  color: var(--os-link-visited);
}
.article a:hover,
.article a:active,
.article a:focus-visible {
  color: var(--os-link-hover);
}
.article a:focus-visible {
  outline: 2px solid var(--os-link);
  outline-offset: 2px;
}

/* #F8FAF9 reached these as near-white ink on the card. */
.article-return-to-top a,
.article-return-to-top a:visited {
  color: var(--os-ink-muted);
}
.article-return-to-top a:hover,
.article-return-to-top a:focus-visible {
  color: var(--os-link-hover);
}
.article .attachments .attachment-item .attachment-icon,
.article .article-comment-count-icon,
.article .share a {
  color: var(--os-ink-muted);
}
.article .share a:hover,
.article .share a:focus-visible,
.article .article-comment-count:hover .article-comment-count-icon {
  color: var(--os-link-hover);
}
.article .meta-data,
.article .article-meta,
.article .comment-meta,
.article .attachment-meta,
.article .article-votes-count,
.article .comment-callout,
.article .content-tags > p {
  color: var(--os-ink-muted);
}

/* -- Article header ----------------------------------------------------- */
.article-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px 16px;
  padding-bottom: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--os-hairline-ink);
  margin-bottom: clamp(20px, 2.4vw, 28px);
}
.article-title {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--os-ink);
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: var(--os-weight-bold);
  line-height: 1.2;
}
.article-author {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.article-subscribe {
  grid-column: 2;
  justify-self: end;
}
/* The subscribe control is a .button, whose outline and label are the brand
   green — 2.99:1 here. On the card it needs the light link colour. */
.article .article-subscribe button,
.article .article-subscribe button:visited {
  border-color: var(--os-link);
  color: var(--os-link);
  border-radius: var(--os-radius-pill);
  font-size: 13px;
  padding: 0 18px;
}
.article .article-subscribe button:hover,
.article .article-subscribe button:focus-visible,
.article .article-subscribe button[data-selected=true] {
  background-color: var(--os-link);
  border-color: var(--os-link);
  color: var(--os-paper);
}

/* -- PROSE -------------------------------------------------------------
   Designed, not ported. Body copy stays at the house weight 300; headings
   take the deep-green light-surface ink, which is the one heading colour the
   Freshdesk build ever specified on paper. */
.article-body {
  color: var(--os-ink);
  font-size: 16px;
  line-height: 1.65;
  max-width: 74ch;
}
.article-body > *:first-child {
  margin-top: 0;
}
.article-body p {
  margin: 0 0 1.1em;
}
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
  color: var(--os-ink-heading);
  font-weight: var(--os-weight-bold);
  line-height: 1.25;
  margin: 1.9em 0 0.6em;
}
/* Zendesk's editor lets authors emit an h1 inside the body, which would
   compete with the article title. Sized down so the outline still reads even
   when the markup is wrong. */
.article-body h1 { font-size: 24px; }
.article-body h2 { font-size: 22px; }
.article-body h3 { font-size: 19px; }
.article-body h4,
.article-body h5,
.article-body h6 { font-size: 17px; }

.article-body a {
  color: var(--os-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.article-body a:visited {
  color: var(--os-link-visited);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.article-body a:hover,
.article-body a:focus-visible {
  color: var(--os-link-hover);
}
.article-body strong,
.article-body b,
.article-body th {
  font-weight: var(--os-weight-bold);
}
.article-body ul,
.article-body ol {
  margin: 0 0 1.1em;
  padding-left: 1.6em;
}
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 0.4em; }
.article-body li > ul,
.article-body li > ol { margin: 0.4em 0 0; }

.article-body blockquote {
  margin: 1.4em 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--os-hairline-ink-strong);
  color: var(--os-ink-muted);
  font-style: normal;
}
.article-body hr {
  height: 0;
  border: 0;
  border-top: 1px solid var(--os-hairline-ink);
  margin: 2em 0;
}
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--os-radius-small);
}
.article-body figcaption {
  color: var(--os-ink-muted);
  font-size: 14px;
  background: none;
  padding: 8px 0 0;
}

/* Inline code and code blocks sit on the SUNK ground — on light, recessed is
   darker, the inverse of the dark theme's raised overlays. */
.article-body :not(pre) > code {
  background: var(--os-paper-sunk);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 0.9em;
}
.article-body pre {
  background: var(--os-paper-sunk);
  color: var(--os-ink);
  border-radius: var(--os-radius-small);
  padding: 16px 18px;
  margin: 0 0 1.3em;
  overflow-x: auto;
  white-space: pre;
  font-size: 14px;
  line-height: 1.55;
}
.article-body pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

/* Copenhagen gives .comment-body an overflow-x container but never
   .article-body, so a wide table blew out the card. The table itself becomes
   the scroller, which needs no markup change. */
.article-body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 1.4em;
  font-size: 15px;
}
.article-body th,
.article-body td {
  border: 1px solid var(--os-hairline-ink);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.article-body thead th {
  background: var(--os-paper-sunk-2);
  color: var(--os-ink);
  white-space: nowrap;
}

/* -- Content tags, attachments ------------------------------------------ */
.content-tags {
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid var(--os-hairline-ink);
}
.content-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.content-tag-item a {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--os-hairline-ink);
  border-radius: var(--os-radius-pill);
  font-size: 13px;
  text-decoration: none;
}
.content-tag-item a:hover,
.content-tag-item a:focus-visible {
  background: var(--os-green-wash);
  border-color: var(--os-link);
  text-decoration: none;
}
.article-attachments {
  margin-top: clamp(16px, 2vw, 22px);
}
.attachment-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
}

/* -- Footer: votes, more questions, return to top ----------------------- */
.article .article-footer {
  align-items: center;
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--os-hairline-ink);
  margin-top: clamp(20px, 2.4vw, 28px);
}
.article-votes {
  padding: clamp(18px, 2.2vw, 26px);
  background: var(--os-paper-sunk);
  border-radius: var(--os-radius-panel);
  margin: clamp(20px, 2.4vw, 28px) 0;
  text-align: center;
}
.article-votes-question {
  color: var(--os-ink);
  font-size: 17px;
  font-weight: var(--os-weight-medium);
  margin: 0 0 14px;
}
.article-votes-controls {
  display: inline-flex;
  gap: 10px;
}
.article .article-vote {
  min-width: 92px;
  border-radius: var(--os-radius-pill);
  border-color: var(--os-link);
  color: var(--os-link);
  width: auto;
}
.article .article-vote:hover,
.article .article-vote:focus-visible,
.article .article-vote.button-primary {
  background-color: var(--os-link);
  border-color: var(--os-link);
  color: var(--os-paper);
}
.article-votes-count {
  display: block;
  margin-top: 12px;
  color: var(--os-ink-muted);
  font-size: 13px;
}
.article-more-questions {
  text-align: center;
  color: var(--os-ink-muted);
}
.article-return-to-top {
  padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid var(--os-hairline-ink);
  text-align: right;
}

/* -- Relatives and comments, still on the light card -------------------- */
.article-relatives {
  margin-top: clamp(24px, 3vw, 34px);
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--os-hairline-ink);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
}
.article-relatives h3,
.recent-articles-title,
.related-articles-title {
  color: var(--os-ink-heading);
  font-size: 17px;
  font-weight: var(--os-weight-medium);
  margin: 0 0 10px;
}
.article-relatives li {
  margin-bottom: 8px;
  line-height: 1.45;
}

.article-comments {
  margin-top: clamp(24px, 3vw, 34px);
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--os-hairline-ink);
}
.comment-heading {
  color: var(--os-ink);
  font-size: 20px;
  font-weight: var(--os-weight-bold);
  margin: 0;
}
.comment-overview {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: clamp(14px, 1.8vw, 20px);
}
.article .comment-sorter .dropdown-toggle {
  color: var(--os-ink-muted);
}
.comment {
  padding: clamp(14px, 1.8vw, 20px) 0;
  border-bottom: 1px solid var(--os-hairline-ink);
}
.comment:last-child {
  border-bottom: 0;
}
.comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.comment-body {
  color: var(--os-ink);
  line-height: 1.6;
}
.comment-body p:last-child {
  margin-bottom: 0;
}
/* The "official" marker was #00A862 — 2.99:1 on the card. */
.article .comment-wrapper.comment-official,
.article .comment.comment-official .comment-wrapper {
  border-left: 3px solid var(--os-link);
  padding-left: 14px;
}
.article .community-badge-title {
  background: var(--os-green-wash);
  color: var(--os-ink-heading);
  border-radius: var(--os-radius-pill);
  padding: 2px 10px;
  font-size: 12px;
}
/* Display names are attacker-influenceable and unbounded. */
.comment-meta span,
.article-meta a {
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .article a,
  .article .article-vote,
  .content-tag-item a {
    transition-duration: 0.01ms;
  }
}

/* =============================================================================
   OFFSTREET ARTICLE — PACKAGE B CONSTRUCTS

   Package B (chosen 2026-09-19, see ARTICLE-MIGRATION-HANDOFF.md §2.3): the
   Notion converter emits semantic markup with `os-` class hooks and NO inline
   styles, and appearance lives here. One edit to this file restyles every
   article; nothing has to be re-rendered.

   These are the constructs the stock theme never covered, because Copenhagen
   has no rule for callout, details, iframe, or a CTA button inside an article.
   The element-level constructs (p, h2-h4, ul/ol/li, blockquote, hr, img,
   figcaption, code, pre, table, thead th) are already handled above; the
   matching os- classes on them are hooks, not overrides.

   Every colour below composites to AA on the light reading card. Measured:
     ink on callout          15.13:1      link on callout        5.20:1
     ink-muted on callout     6.75:1      white on the button    7.99:1
     ink-muted on paper       7.64:1      ink-muted on sunk      6.36:1
============================================================================= */

/* Indented content under a paragraph, heading, quote or list item. Notion
   allows arbitrary nesting; the converter now renders it (it used to be
   silently dropped for paragraphs, headings and quotes). */
.article-body .os-nested {
  margin: 0.6em 0 1.2em 1.5em;
}
.article-body .os-nested > *:last-child {
  margin-bottom: 0;
}

/* Callout ------------------------------------------------------------------
   Freshdesk used a #C0EDC5 fill with a #145C3D bar. Same shape, but built from
   theme tokens so it tracks the palette instead of pinning a hex. */
.article-body .os-callout {
  margin: 1.5em 0;
  padding: 14px 18px;
  background: var(--os-green-wash);
  border-left: 4px solid var(--os-green-active);
  border-radius: var(--os-radius-small);
  color: var(--os-ink);
}
.article-body .os-callout > *:first-child { margin-top: 0; }
.article-body .os-callout > *:last-child  { margin-bottom: 0; }
.article-body .os-callout-icon {
  margin-right: 6px;
}

/* Collapsibles -------------------------------------------------------------
   <details> survives Zendesk's sanitizer (verified §2.1), so this is a real
   disclosure widget, not a JS one. */
.article-body .os-details {
  margin: 1.4em 0;
  padding: 12px 16px;
  background: var(--os-paper-sunk);
  border: 1px solid var(--os-hairline-ink);
  border-radius: var(--os-radius-small);
}
.article-body .os-details > summary,
.article-body .os-toggle-heading > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--os-ink-heading);
}
.article-body .os-details > summary:focus-visible,
.article-body .os-toggle-heading > summary:focus-visible {
  outline: 2px solid var(--os-link);
  outline-offset: 2px;
  border-radius: 4px;
}
.article-body .os-details[open] > summary {
  margin-bottom: 10px;
}
/* A toggleable Notion heading. Reads as a heading, behaves as a disclosure. */
.article-body .os-toggle-heading {
  margin: 1.8em 0 1em;
}
.article-body .os-toggle-heading > summary {
  font-size: 19px;
  line-height: 1.3;
}

/* Embeds -------------------------------------------------------------------
   Loom and YouTube are on Zendesk's iframe host allowlist and pass through as
   real iframes. Scribe is not — see .os-scribe below. */
.article-body .os-embed {
  margin: 1.6em 0;
}
.article-body .os-embed iframe {
  display: block;
  width: 100%;
  border: 1px solid var(--os-hairline-ink);
  border-radius: var(--os-radius-small);
}

/* Scribe -------------------------------------------------------------------
   scribehow.com is absent from Zendesk's 10-host iframe allowlist, so an
   <iframe> in the article body is ERASED at render with no trace. The body
   therefore carries an inert <div data-scribe="ID"> and script.js builds the
   iframe after load — the sanitizer only filters stored article HTML, and an
   element the theme creates was never in it. Verified working with "Display
   unsafe content" OFF; the help center sends no CSP.

   min-height reserves the space so the page does not jump when the iframe
   mounts. The fallback link is what a reader sees with JS off, and what a
   crawler and a screen reader get. */
.article-body .os-scribe {
  margin: 1.6em 0;
  min-height: 120px;
}
.article-body .os-scribe iframe {
  display: block;
  width: 100%;
  min-height: 600px;
  border: 1px solid var(--os-hairline-ink);
  border-radius: var(--os-radius-small);
}

/* Resource button ----------------------------------------------------------
   Also the Scribe no-JS fallback, so the two share an appearance. */
.article-body .os-resource {
  margin: 1.5em 0;
}
.article-body .os-resource-link,
.article-body .os-scribe-fallback {
  display: inline-block;
  padding: 11px 20px;
  background: var(--os-green-active);
  color: #ffffff;
  border-radius: var(--os-radius-pill);
  font-weight: 700;
  text-decoration: none;
}
.article-body .os-resource-link:hover,
.article-body .os-scribe-fallback:hover {
  background: var(--os-green-lift);
  color: #ffffff;
  text-decoration: none;
}
.article-body .os-resource-link:visited,
.article-body .os-scribe-fallback:visited {
  color: #ffffff;
}

/* Code block language label ------------------------------------------------ */
.article-body .os-code {
  margin: 1.4em 0;
}
.article-body .os-code-lang {
  margin-bottom: 5px;
  color: var(--os-ink-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.article-body .os-code pre {
  margin: 0;
}

/* Columns ------------------------------------------------------------------
   Grid, not flex. Zendesk strips inline `gap` and `align-items` while KEEPING
   `display: flex`, so an inline-styled flex row renders gapless and
   misaligned — the worst of both. Doing it here in the stylesheet avoids that
   entirely and collapses to one column on narrow screens. */
.article-body .os-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin: 1.6em 0;
}
.article-body .os-column > *:first-child { margin-top: 0; }
.article-body .os-column > *:last-child  { margin-bottom: 0; }

/* To-do --------------------------------------------------------------------
   Notion to_do blocks. The glyph is decorative and aria-hidden in the markup;
   the state is carried by visually-hidden text so it is not colour-only. */
.article-body .os-todo {
  margin: 0 0 0.6em;
}

/* Wide tables --------------------------------------------------------------
   The converter wraps every table so it can scroll on narrow screens rather
   than forcing the page wide. */
.article-body .os-table-scroll {
  margin: 1.6em 0;
  overflow-x: auto;
}
.article-body .os-table-scroll table {
  margin: 0;
}

/* Images ------------------------------------------------------------------
   Copenhagen only styles `figure.image`, the class its own editor emits. The
   converter emits `figure.os-figure`, which would otherwise inherit the browser
   default `margin: 1em 40px` and sit indented 40px from both sides. */
.article-body .os-figure {
  margin: 1.6em 0;
}
.article-body .os-figure > img {
  display: block;
}
.article-body .os-figcaption {
  margin-top: 8px;
  color: var(--os-ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* The one-sentence lede lifted out of the first Notion paragraph. */
.article-body .os-lede {
  margin: 0 0 1.75em;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--os-hairline-ink);
  color: var(--os-ink-muted);
}

/* Visually hidden, still read aloud. */
.article-body .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Notion's fourth heading level, which its toolbar does not show but its API
   returns, lands here as <h5>. Copenhagen sizes h4, h5 and h6 identically at
   17px, so without this a Notion heading_3 and heading_4 look the same and the
   outline flattens - which matters in "Understanding the Permit Type Builder",
   where 17 of these carry the structure.

   Scoped to .os-h5 rather than .article-body h5 on purpose: it changes only
   articles this converter produced, so nothing already published shifts. */
.article-body .os-h5 {
  font-size: 15px;
  color: var(--os-ink-heading);
  letter-spacing: 0.01em;
}

/* The byline and the article date are independent settings, so both can be off
   at once — which leaves .article-author rendering as an empty flex row that
   still carries its 10px bottom margin, and a gap under the title. Collapse it
   only when it genuinely has nothing in it, so the row still behaves normally
   when either element is switched back on. Degrades to that 10px gap on a
   browser without :has(). */
.article-author:not(:has(.article-avatar)):not(:has(.meta-group)) {
  display: none;
}