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

/***** 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;
}
/* SPECIFICITY, not order: Copenhagen's own `.article-list-item a { color:
   #F8FAF9 }` is one class plus a type selector — (0,1,1) — which beats a
   plain `.article-list-link` at (0,1,0) regardless of which comes later in
   the file. Found on the new knowledge base page (Zendesk/templates/
   custom_pages/knowledge.hbs), which reuses these classes, but it was
   already live on the category page too: every article link there has been
   rendering Copenhagen's white instead of the intended mint green. Scoping
   to `.article-list-item .article-list-link` (0,2,0) clears it. */
.article-list-item .article-list-link,
.article-list-item .article-list-link:visited {
  color: var(--os-card-ink);
}
.article-list-item .article-list-link:hover,
.article-list-item .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;
}

/* ===========================================================================
   OS TICKET FORM MENU — a caret beside Submit a request

   SPECIFICITY, deliberately: `.user-nav-list > li` already sets display:block
   at (0,2,1). A plain `.os-ticket-item` rule is (0,1,0) and loses the cascade,
   which would drop the caret onto a second line inside a fixed-height pill.
   Every layout rule here is qualified to outscore it rather than reaching for
   !important.
=========================================================================== */
.nav-wrapper-desktop .user-nav-list > li.os-ticket-item {
  display: inline-flex;
  align-items: stretch;
}

/* The link and the caret read as one control, so the shared edge is drawn once
   and the outer corners are rounded. */
.nav-wrapper-desktop .user-nav-list > li.os-ticket-item.dropdown a.submit-a-request {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
  padding-right: 12px;
}

.nav-wrapper-desktop .user-nav-list > li.os-ticket-item .os-ticket-caret {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  padding: 0;
  background: transparent;
  color: var(--os-text);
  border: 1px solid var(--os-text);
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  border-top-right-radius: var(--os-radius-pill);
  border-bottom-right-radius: var(--os-radius-pill);
  cursor: pointer;
}

.nav-wrapper-desktop .user-nav-list > li.os-ticket-item .os-ticket-caret:hover,
.nav-wrapper-desktop .user-nav-list > li.os-ticket-item .os-ticket-caret:focus-visible {
  background: var(--os-green-wash);
  border-color: var(--os-green-border);
  color: var(--os-hover-text);
}

/* Drawn in CSS rather than shipped as an asset — no third-party requests, and
   it inherits currentColor so the hover state needs no second rule. */
.os-ticket-caret-glyph {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.os-ticket-caret[aria-expanded="true"] .os-ticket-caret-glyph {
  transform: translateY(1px) rotate(-135deg);
}
@media (prefers-reduced-motion: reduce) {
  .os-ticket-caret-glyph { transition: none; }
}

/* The flyout. Right-aligned to the control so it cannot overflow the viewport
   on the last nav item, and capped in height because the form list grows —
   without the cap a sixth form would be unreachable. */
.os-ticket-forms {
  /* top is EXPLICIT because neither .dropdown-menu rule sets it, so the block
     axis was falling back to the STATIC POSITION — and per CSS Flexbox the
     static-position rectangle of an absolutely positioned child of a flex
     container is the container's CONTENT BOX. .os-ticket-item is inline-flex,
     so the panel's top edge landed at the top of the <li>, i.e. on top of the
     button. 100% + 8px puts it under the whole control, link and caret both. */
  top: calc(100% + 8px);
  bottom: auto;
  right: 0;
  left: auto;
  min-width: 240px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
}
.os-ticket-forms [role="menuitem"] {
  display: block;
  padding: 9px 18px;
  color: var(--os-text);
  font-size: 15px;
  text-decoration: none;
  white-space: normal;   /* form names are sentences; let them wrap */
}
.os-ticket-forms [role="menuitem"]:hover,
.os-ticket-forms [role="menuitem"]:focus-visible {
  background: var(--os-green-wash);
  color: var(--os-hover-text);
  text-decoration: none;
}

/* Mobile: no hover and no room for a flyout, so the forms are an indented list
   under the link rather than behind a caret. */
.os-ticket-forms-mobile .os-ticket-forms-group {
  display: flex;
  flex-direction: column;
}
.menu-list-mobile-items .os-ticket-form-link {
  padding-left: 32px;
  font-size: 15px;
  opacity: 0.92;
}

/* ===========================================================================
   OS HOME — category rail, category icons, most popular, search panel
=========================================================================== */

/* ---- CATEGORY RAIL -------------------------------------------------------
   Four cards per page on BOTH breakpoints, scrolling horizontally on desktop
   and vertically on a phone, swipeable either way.

   ALIGNMENT. The track used to be inset 48px on each side by an arrow gutter,
   so the cards sat 48px inside the featured panel below them — measured 864px
   of cards against a 960px panel. The gutter is gone and the track is flush
   with the panel, which is what makes the cards bigger: (960 - 3 x gap) / 4
   rather than (864 - 3 x gap) / 4. The arrows are centred ON the track's edge
   instead of living outside it, so they straddle the end card exactly as
   asked and still sit well inside the page container.

   WHY NOT overflow: visible for the hover lift — one axis being a scroll
   container forces the other to compute to auto (CSS Overflow 3 §3.2), so the
   lift is given room with padding and the padding is cancelled with a negative
   margin. On the vertical rail that padding would eat a visible row, so the
   height is computed to include it.

   The bleed is on the CROSS axis only. scrollWidth counts an overflowing
   scroller's padding-left but not its padding-right, and scrollHeight behaves
   the same vertically, so padding on the scroll axis corrupts the paging
   arithmetic. */
.os-catrail-host {
  position: relative;
  display: flow-root; /* contains the scroller's negative margins */
  --catrail-arrow: 40px;
}

.os-catrail-host .os-catrail-track {
  display: grid;
  /* .blocks-list declares three EXPLICIT columns and grid-auto-columns only
     sizes IMPLICIT ones, so without this the first three cards collapse. */
  grid-template-columns: none;
  /* NO scroll-behavior here. It has to be smooth only for the arrows, and a
     CSS declaration turns out to WIN over the behavior option passed to
     scrollTo — measured: with `scroll-behavior: smooth` in the stylesheet,
     scrollTo({left, behavior:"auto"}) moved the rail 0px, while the identical
     call with the CSS set to auto moved it 489px. CSS and JS were fighting for
     the same control. script.js passes the behavior explicitly per call now,
     which also lets it honour prefers-reduced-motion per scroll. User-driven
     scrolling — wheel, trackpad, touch — is unaffected either way. */
  scrollbar-width: none;
  /* Let the browser own the swipe on the scroll axis, and keep a drag that
     starts on a card from selecting its label. */
  -webkit-user-select: none;
  user-select: none;
}
.os-catrail-host .os-catrail-track::-webkit-scrollbar { display: none; }
.os-catrail-host .os-catrail-track > li { margin: 0; }
/* While a pointer drag is in progress the smooth behaviour would fight the
   frame-by-frame updates, and the snap would fight the finger. */
.os-catrail-host .os-catrail-track.is-dragging {
  /* snapping would fight the finger mid-drag */
  scroll-snap-type: none;
  cursor: grabbing;
}

.os-catrail-arrow {
  position: absolute;
  z-index: 3;
  width: var(--catrail-arrow);
  height: var(--catrail-arrow);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--os-hairline);
  background: var(--os-page);
  color: var(--os-text);
  cursor: pointer;
  /* Hidden is the DEFAULT, so a script that never runs leaves no dead control.
     visibility rather than display keeps the button measurable and lets it
     transition; pointer-events off means a hidden arrow cannot be clicked
     through. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.os-catrail-host[data-can-prev="1"] .os-catrail-arrow--prev,
.os-catrail-host[data-can-next="1"] .os-catrail-arrow--next {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.os-catrail-arrow:hover,
.os-catrail-arrow:focus-visible {
  background: var(--os-green-wash);
  border-color: var(--os-green-border);
  color: var(--os-hover-text);
}
.os-catrail-chevron {
  width: 9px;
  height: 9px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
}

/* ---- DESKTOP: four across, scrolls left/right ---------------------------- */
@media (min-width: 768px) {
  .os-catrail-host { --catrail-gap: 18px; --catrail-bleed: 28px; }

  .os-catrail-host .os-catrail-track {
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * var(--catrail-gap)) / 4);
    gap: var(--catrail-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: var(--catrail-bleed) 0 40px;
    margin: calc(var(--catrail-bleed) * -1) 0 -40px;
    cursor: grab;
  }
  .os-catrail-host .os-catrail-track > li { scroll-snap-align: start; }

  /* Centred on the track edge: half over the end card, half outside it. */
  .os-catrail-arrow { top: 50%; transform: translateY(-50%); }
  .os-catrail-arrow--prev { left: calc(var(--catrail-arrow) / -2); }
  .os-catrail-arrow--next { right: calc(var(--catrail-arrow) / -2); }
  .os-catrail-arrow--next .os-catrail-chevron { transform: translateX(-2px) rotate(45deg); }
  .os-catrail-arrow--prev .os-catrail-chevron { transform: translateX(2px) rotate(-135deg); }
}

/* ---- PHONE: four down, scrolls up/down ----------------------------------- */
@media (max-width: 767px) {
  .os-catrail-host {
    --catrail-gap: 12px;
    --catrail-row: 96px;
    --catrail-arrow: 36px;
    margin-block: 18px; /* room for the arrows straddling the ends */
  }

  .os-catrail-host .os-catrail-track {
    grid-auto-flow: row;
    grid-auto-rows: var(--catrail-row);
    /* The base rule clears grid-template-columns so every column is implicit,
       and an implicit column defaults to `auto` — which sizes to CONTENT, not
       to the track. That left the cards ~268px inside a 491px track, i.e. half
       way across, while the featured panel below ran the full width. */
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--catrail-gap);
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    /* NO padding on the scroll axis. This is the same trap the horizontal rail
       hit from the other side: a scroller's resting scrollTop is its
       padding-top, not 0, so "at the start" never tested true and the up arrow
       showed on a rail that could not move up. The horizontal rail keeps its
       vertical padding for the hover lift; a phone has no hover, so there is
       nothing here for padding to buy. */
    max-height: calc(4 * var(--catrail-row) + 3 * var(--catrail-gap));
    padding: 0;
    /* Stop a swipe that reaches the end of the rail from yanking the page. */
    overscroll-behavior-y: contain;
  }
  .os-catrail-host .os-catrail-track > li { scroll-snap-align: start; }
  /* The card is short and full width on a phone, so lay it out as a row.
     It also fixes the icon: .blocks-item-link is a flex container, the icon is
     its ::before, and in the column layout there was not enough height for
     icon + label — so the icon was shrunk to 2.6px rather than overflowing.
     flex: 0 0 auto stops that happening again whatever the row height. */
  .os-catrail-host .blocks-item-link {
    height: 100%;
    flex-direction: row;
    align-items: center;
    /* icon and label travel together as one centred pair, rather than the
       icon pinning to the left edge of a full-width card */
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 16px 18px;
  }
  .os-catrail-host .blocks-item-link::before {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin: 0;
  }
  .os-catrail-host .blocks-item-title { text-align: center; }

  .os-catrail-arrow { left: 50%; transform: translateX(-50%); }
  .os-catrail-arrow--prev { top: calc(var(--catrail-arrow) / -2); }
  .os-catrail-arrow--next { bottom: calc(var(--catrail-arrow) / -2); }
  .os-catrail-arrow--prev .os-catrail-chevron { transform: translateY(3px) rotate(-45deg); }
  .os-catrail-arrow--next .os-catrail-chevron { transform: translateY(-3px) rotate(135deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* the scroll itself is handled in script.js, which checks the same query */
  .os-catrail-arrow { transition: none; }
}

/* ---- CATEGORY ICONS ------------------------------------------------------
   Ported from the Freshdesk portal, which keyed each glyph off the category id
   in the href. Re-keyed here onto the Zendesk category ids. A category with no
   rule of its own still gets the folder fallback rather than an empty box, so
   adding a category degrades instead of breaking. Masks, not <img>: one colour
   token drives every icon and nothing is fetched. */
.blocks-item-link::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  background-color: var(--os-text);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
}
/* Integrations */
.blocks-item-link[href*="/categories/54751477585555"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'/%3E%3Cpath d='M9 8V2'/%3E%3Cpath d='M15 8V2'/%3E%3Cpath d='M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'/%3E%3Cpath d='M9 8V2'/%3E%3Cpath d='M15 8V2'/%3E%3Cpath d='M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z'/%3E%3C/svg%3E");
}
/* Offstreet Basics */
.blocks-item-link[href*="/categories/54685855125523"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
}
/* Organization Setup */
.blocks-item-link[href*="/categories/54685778608787"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7h-9'/%3E%3Cpath d='M14 17H5'/%3E%3Ccircle cx='17' cy='17' r='3'/%3E%3Ccircle cx='7' cy='7' r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7h-9'/%3E%3Cpath d='M14 17H5'/%3E%3Ccircle cx='17' cy='17' r='3'/%3E%3Ccircle cx='7' cy='7' r='3'/%3E%3C/svg%3E");
}
/* Payments */
.blocks-item-link[href*="/categories/54751502124307"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
}
/* Permit Types & Events */
.blocks-item-link[href*="/categories/54685383194387"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 17V7h4a3 3 0 0 1 0 6H9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 17V7h4a3 3 0 0 1 0 6H9'/%3E%3C/svg%3E");
}
/* Release Notes */
.blocks-item-link[href*="/categories/54974031182483"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E");
}
/* Reporting */
.blocks-item-link[href*="/categories/54751703845267"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E");
}

/* ---- MOST POPULAR --------------------------------------------------------
   Title-only cards, matching the Freshdesk markup this mirrors. */
.os-popular { margin: 40px 0 8px; }
.os-popular-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.os-popular-title { margin: 0; font-size: 22px; color: var(--os-ink-heading, var(--os-text)); }
.os-popular-all { font-size: 15px; white-space: nowrap; }
.os-popular-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .os-popular-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.os-popular-card {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--os-hairline);
  border-radius: var(--os-radius-control, 10px);
  background: var(--os-panel, transparent);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.os-popular-card:hover,
.os-popular-card:focus-visible {
  border-color: var(--os-green-border);
  transform: translateY(-2px);
  text-decoration: none;
}
.os-popular-card-title {
  display: block;
  font-size: 17px;
  font-weight: var(--os-weight-bold, 600);
  color: var(--os-text);
}
@media (prefers-reduced-motion: reduce) {
  .os-popular-card { transition: none; }
  .os-popular-card:hover, .os-popular-card:focus-visible { transform: none; }
}

/* ---- SEARCH PANEL --------------------------------------------------------
   Freshdesk never removes its dropdown from the box model: it is permanently
   display:block and opens purely by fading opacity/visibility and sliding
   -10px -> 0 over 0.25s. The first port toggled the HTML `hidden` property
   against display:none, and display is not animatable, so it popped. Same
   technique as Freshdesk now, with .is-open standing in for :focus-within
   because the panel must also stay open while the pointer is inside it.

   TWO SECTIONS. Typing used to close the panel and hand the field back to
   Zendesk's instant search. Instant search is off now (see home_page.hbs) and
   results render here instead, above recent activity, which stays put and is
   pushed down rather than replaced. */
.os-search-host { position: relative; }
.os-search-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  max-height: min(60vh, 464px);
  overflow-y: auto;
  padding: 12px 22px;
  text-align: left;
  background: var(--os-page);
  border: 1px solid rgba(0, 168, 98, 0.55);
  border-radius: 18px;
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.38);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s linear;
}
.os-search-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.os-search-section[hidden] { display: none; }
/* The gap between the two sections only exists once both are showing. */
.os-search-section + .os-search-section:not([hidden]) { margin-top: 24px; }
.os-search-panel-title {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(248, 250, 249, 0.55);
}
.os-search-panel a { display: block; padding: 8px 0; color: var(--os-text); text-decoration: none; }
.os-search-panel a:hover,
.os-search-panel a:focus-visible { color: var(--os-green); text-decoration: none; }
.os-search-panel .recent-activity-header { display: none; }
.os-search-panel .recent-activity-list { margin: 0; padding: 0; list-style: none; }
.os-search-panel .recent-activity-item { padding: 4px 0; border-bottom: 1px solid var(--os-hairline); }
.os-search-panel .recent-activity-item:last-child { border-bottom: 0; }
.os-search-empty { margin: 0; padding: 4px 0 8px; color: rgba(248, 250, 249, 0.55); font-size: 14px; }

/* The field itself: Freshdesk keeps the border and fades in a 2px ring hugging
   it over 0.15s, rather than recolouring the border.

   INSET, not outset. The search box sits with a 0px gap under the sticky
   header (TIGHTEN THE HOME PAGE, below) — that gap was measured against
   Freshdesk and is intentional. An outward ring bleeds up into that 0px gap,
   which the header (position: sticky, z-index: 100, opaque) then paints over:
   confirmed on the live page, focusing the search shows the ring on the
   left/right/bottom but the top is a hard flat cut exactly at the header's
   edge. Drawing it inset keeps the whole ring inside the search box's own
   border, so it can't be covered no matter how tight the header sits. */
.hero .search,
.os-hero-search,
.os-fab-search { transition: box-shadow 0.15s ease-in-out; }
.hero .search:focus-within,
.os-hero-search:focus-within,
.os-fab-search:focus-within { box-shadow: inset 0 0 0 2px rgba(248, 250, 249, 0.9); }

@media (prefers-reduced-motion: reduce) {
  .os-search-panel { transition: none; }
  .hero .search,
  .os-hero-search,
  .os-fab-search { transition: none; }
}

/* ===========================================================================
   OFFSTREET FEATURED PANEL — bring it to the Freshdesk composition

   The first port simplified the panel: it padded the panel itself and rendered
   the article strip as separate outlined cards. Freshdesk pads nothing at the
   panel level, divides it with a full-bleed hairline, and runs the strip as a
   seamless grid whose cells are separated only by border-left. The glyphs are
   part of the identity too — icon tile, star in the eyebrow, chevron on the
   CTA, per-link icon — and without them it reads as a different component.
=========================================================================== */
.os-featured {
  padding: 0;
  overflow: hidden;
}
.os-featured-top {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--os-hairline);
}
/* On a phone the row has nowhere to go: the blurb collapses to one word per
   line and the CTA rides over it. Stack instead, and let the CTA span so it
   stays a comfortable tap target. */
@media (max-width: 767px) {
  .os-featured-top {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .os-featured-cta { align-self: stretch; justify-content: center; }
}
.os-featured-icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(0, 168, 98, 0.14);
  position: relative;
}
.os-featured-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 26px;
  height: 26px;
  background-color: var(--os-green);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M9 15h6'/%3E%3Cpath d='M9 11h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M9 15h6'/%3E%3Cpath d='M9 11h6'/%3E%3C/svg%3E");
}
.os-featured-copy { flex: 1 1 auto; min-width: 0; }
.os-featured-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 4px 12px 4px 10px;
  border-radius: var(--os-radius-pill);
  background: rgba(0, 168, 98, 0.16);
  color: var(--os-green);
  font-size: 11px;
  font-weight: var(--os-weight-bold, 700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.os-featured-eyebrow::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E");
}
.os-featured-title { margin: 0 0 6px; font-size: clamp(20px, 2vw, 26px); }
.os-featured-blurb { margin: 0; color: var(--os-ink-muted, var(--os-text)); font-size: 15px; }
.os-featured-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--os-radius-pill);
  background: var(--os-green);
  color: var(--os-brand-text, #fff);
  font-size: 14px;
  font-weight: var(--os-weight-bold, 700);
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease;
}
.os-featured-cta::after {
  content: "";
  width: 12px;
  height: 12px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.os-featured-cta:hover,
.os-featured-cta:focus-visible { transform: translateY(-2px); text-decoration: none; }

/* The strip: one seamless grid, cells divided by hairlines rather than gaps. */
.os-featured-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 768px) {
  .os-featured-links { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .os-featured-link + .os-featured-link { border-left: 1px solid var(--os-hairline); border-top: 0; }
}
.os-featured-link {
  display: block;
  padding: 16px 18px 18px;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  transition: background 0.18s ease;
}
.os-featured-link + .os-featured-link { border-top: 1px solid var(--os-hairline); }
.os-featured-link:hover,
.os-featured-link:focus-visible { background: rgba(248, 250, 249, 0.04); text-decoration: none; }
.os-featured-link-icon {
  display: block;
  width: 18px;
  height: 18px;
  margin-bottom: 10px;
  background-color: var(--os-green);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E");
}
.os-featured-link-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: var(--os-weight-bold, 700);
  color: var(--os-text);
  margin-bottom: 6px;
}
.os-featured-link-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  color: rgba(248, 250, 249, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .os-featured-cta, .os-featured-link { transition: none; }
  .os-featured-cta:hover, .os-featured-cta:focus-visible { transform: none; }
}

/* ===========================================================================
   OFFSTREET FOOTER

   The page is an 8px-inset rounded card — .header and main, both on the shell
   colour — floating on the page colour, which shows as a border all the way
   round. The footer belongs to that BORDER, not to the card.

   It was painted the shell colour, which made it a third band: card, then a
   full-bleed dark strip, then nothing. Transparent instead of a colour token
   on purpose — whatever the frame is, the footer is the same thing by
   definition, so the two can never drift apart. The hairline goes too; there
   is no edge there to mark.
=========================================================================== */
.footer {
  background: transparent;
  border-top: 0;
  /* Copenhagen leaves 60px of frame between the card and the footer, and the
     footer then adds 30px of its own padding above the text — 90px of frame in
     total, which read as the card stopping well short. Both are pulled in: the
     card's bottom edge and the footer text are 18px apart now. The bottom
     padding stays generous so the text is not jammed against the page edge. */
  margin-top: 0;
  padding: 18px 0 34px;
}

/* The content ran flush to the bottom edge of the card — measured 1px between
   the last section and main's bottom — so the card looked cut off rather than
   closed. This also carries the black further down, toward the footer. */
main {
  padding-bottom: clamp(28px, 3vw, 44px);
}

/* ===========================================================================
   KNOWLEDGE BASE PAGE

   Freshdesk's /support/solutions, measured directly: every category is its
   own flat panel — background matching the page (border does the work, the
   same trick .os-featured already uses below), a 1px hairline border, 18px
   radius, 32px padding, 24px between panels. A hairline under the heading
   separates it from the grid.

   The grid itself is NOT new CSS — it's .section-tree, reused verbatim from
   category_page.hbs below. That block already matches Freshdesk's ruled-
   table folder listing (2-up over 768px, hairline dividers, the odd-column/
   last-row border fix Freshdesk itself doesn't bother with), because it's
   the exact same component: one category's sections there, one category's
   sections here, just inside an added outer panel instead of the page's own
   background. */
.os-kb-heading {
  margin: clamp(20px, 2.4vw, 28px) 0 clamp(16px, 2vw, 24px);
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: var(--os-weight-body);
  line-height: 1.2;
  color: var(--os-text);
}

.os-kb-tree {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 24px);
}

.os-kb-category {
  background: var(--os-page);
  border: 1px solid var(--os-hairline);
  border-radius: var(--os-radius-panel);
  padding: clamp(20px, 2.6vw, 32px);
}
.os-kb-category-title {
  margin: 0 0 clamp(16px, 2vw, 24px);
  padding-bottom: clamp(16px, 2vw, 24px);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: var(--os-weight-body);
  line-height: 1.2;
  border-bottom: 1px solid var(--os-hairline);
}
.os-kb-category-title a,
.os-kb-category-title a:visited {
  color: var(--os-text);
}
.os-kb-category-title a:hover,
.os-kb-category-title a:focus-visible {
  color: var(--os-hover-text);
  text-decoration: none;
}

.os-kb-empty {
  margin: 0;
  color: var(--os-text-muted);
}
/* Swapped for the tree, or removed on failure, once script.js resolves. */
.os-kb-loading { padding: 4px 0 24px; }

/* MOUNTED IN AN ARTICLE, so undo the article's own styling where it collides.
   ".article { background: var(--os-paper) }" a few screens up is a deliberate
   light reading card for prose — correct for every other article on the
   site, wrong for a dark, full-bleed tree of panels. Its descendant rules
   (.article-body h1-h6, .article-body a) are also `.class + type`, one
   notch more specific than a plain .os-kb-* class, so they were winning:
   confirmed on the draft — "Offstreet Basics" rendered bold and green-black
   (.article-body h2's weight+color), section titles rendered as
   --os-link's dark green instead of white, and every link was underlined,
   all inside a light card instead of the intended dark one.

   Scoped with :has() so this touches ONLY the article that hosts #os-kb-tree
   — no other article on the site is affected — and needs no article/section
   ID, so it keeps working if the mount ever moves to a different article. */
.article:has(#os-kb-tree) {
  background: none;
  color: var(--os-text);
  max-width: none;
}
/* The article's own title (Zendesk's article.title, "Knowledge base" here,
   rendered above .article-body by article_page.hbs — not one of the .os-kb-*
   classes below) is --os-ink, meant for the same light card. Rendered nearly
   invisible against the now-dark background: rgb(15,25,33) on near-black. */
.article:has(#os-kb-tree) .article-title {
  color: var(--os-text);
}
.article-body:has(#os-kb-tree) {
  color: var(--os-text);
  max-width: none;
}
.article-body:has(#os-kb-tree) .os-kb-heading,
.article-body:has(#os-kb-tree) .os-kb-category-title,
.article-body:has(#os-kb-tree) .section-tree-title {
  color: var(--os-text);
  font-weight: var(--os-weight-body);
}
.article-body:has(#os-kb-tree) .os-kb-category-title a,
.article-body:has(#os-kb-tree) .section-tree-title a {
  color: var(--os-text);
}
.article-body:has(#os-kb-tree) .os-kb-category-title a:hover,
.article-body:has(#os-kb-tree) .os-kb-category-title a:focus-visible,
.article-body:has(#os-kb-tree) .section-tree-title a:hover,
.article-body:has(#os-kb-tree) .section-tree-title a:focus-visible {
  color: var(--os-hover-text);
}
/* .article-list-link's OWN rule is `.article-list-item .article-list-link`
   (0,2,0), which already beats `.article-body a` (0,1,1) unscoped — confirmed
   on the draft, its colour was correct without help. .see-all-articles is a
   single class (0,1,0), one notch BELOW `.article-body a` (0,1,1), so it was
   losing: rendered as --os-link's dark green instead of --os-green. Needs its
   own scoped rule; .article-list-link does not. */
.article-body:has(#os-kb-tree) .see-all-articles {
  color: var(--os-green);
}
.article-body:has(#os-kb-tree) .see-all-articles:hover,
.article-body:has(#os-kb-tree) .see-all-articles:focus-visible {
  color: var(--os-card-ink);
}
/* Every link this page renders is meant to be underlined only on hover —
   .article-body a's blanket `text-decoration: underline` at rest otherwise
   wins, since neither .article-list-link nor .see-all-articles set their own
   text-decoration except on :hover. This only needs to clear the rest-state
   underline; colour is handled above. */
.article-body:has(#os-kb-tree) a {
  text-decoration: none;
}

/* Full width, no reading-column squeeze, and no bordered "shell" reserved
   for a two-column layout that's now one column. */
.article:has(#os-kb-tree) {
  max-width: none;
}
.article-container:has(#os-kb-tree) {
  max-width: none;
  border: 0;
  box-shadow: none;
}
/* --os-hairline-ink is a dark, low-alpha line meant for the light paper
   card (mirrors --os-ink) — nearly invisible on the now-dark background.
   var(--os-hairline) is the equivalent token for dark surfaces. .article-
   header is a sibling of .article-body, not an ancestor of #os-kb-tree, so
   this scopes from their shared parent, .article, instead. */
.article:has(#os-kb-tree) .article-header {
  border-bottom-color: var(--os-hairline);
}

/* No "Articles in this section" sidebar, no breadcrumbs, on this one page —
   requested directly: the sidebar only ever held this article's own name
   (it's alone in its section), and the crumb trail (Release Notes >
   Knowledge Base) describes where the container article lives, not
   anything a visitor browsing "every article in one place" needs to see.
   script.js also removes .sub-nav outright once it moves the search out of
   it; this covers the instant before that JS runs, and is what actually
   removes the sidebar (script.js doesn't touch that one). */
body:has(#os-kb-tree) .article-sidebar,
body:has(#os-kb-tree) .sub-nav {
  display: none;
}

/* The search bar's OWN "home page" position, moved here rather than left in
   .sub-nav: on the home page the field sits inside .hero (full width, gutter
   padding) > .hero-inner (no padding of its own, just a max-width and
   margin: 0 auto to narrow and centre it) — TWO levels, because on mobile
   .hero-inner's max-width floor (400px) never binds and .hero's own padding
   is what actually insets the field, while on desktop it's the reverse:
   .hero-inner's max-width is what narrows the field, .hero's padding barely
   matters. Collapsing that into one element with both padding AND max-width
   double-counts: the form came out 556px inside a 620px-max wrap, short by
   exactly 2×gutter, because padding shrank the CONTENT box the max-width was
   already sized against. So .os-hero-search-wrap keeps only .hero's job (full
   width, gutter padding, vertical spacing); .os-hero-search — the form itself —
   keeps .hero-inner's job (max-width + margin: 0 auto). No visible
   background needed on either since main's own shell colour already runs
   underneath, unlike .hero which paints nothing of its own either. */
.os-hero-search-wrap {
  width: 100%;
  padding: clamp(6px, 1.2vw, 16px) var(--os-gutter) clamp(4px, 1vw, 12px);
}
.os-hero-search {
  max-width: clamp(400px, calc(25.5vw + 264px), 620px);
  margin: 0 auto;
}
/* Matches TIGHTEN THE HOME PAGE below: run the header and the search
   together with nothing measured stealing space between them. Generic —
   every page reshapeSearchToHero() touches gets this, not just the
   knowledge base one it started on. */
main:has(.os-hero-search-wrap) {
  padding-top: 0;
}
/* .hero's own bottom padding is deliberately tiny (4-12px) because the rail
   below it supplies the real gap with its OWN top margin. Category, section
   and article pages have no equivalent next-element margin of their own, so
   the gap before their heading lives here instead — on whichever heading
   the page actually has. Scoped from main, not from .article/.category-
   container/.section-container: .os-hero-search-wrap is main's own first
   child, a SIBLING of those containers, not a descendant of any one of
   them, so :has() has to look from something that's an ancestor of both. */
main:has(.os-hero-search-wrap) .article-header,
main:has(.os-hero-search-wrap) .page-header {
  margin-top: clamp(12px, 1.8vw, 20px);
}

/* ===========================================================================
   HEADER DESKTOP <-> MOBILE CROSS-FADE

   Copenhagen swaps the two nav blocks with display:none at 1024px. display is
   not animatable, so the header cut rather than faded. Both blocks now stay
   display:flex at every width and only their opacity/visibility switch, which
   is the same technique the Freshdesk portal settled on.

   The hidden block is taken out of flow with position:absolute so it cannot
   affect layout or cause a shift mid-fade, and visibility:hidden keeps it out
   of the tab order and out of the accessibility tree — opacity alone would
   leave a focusable invisible nav. No transition runs on first paint, because
   there is no prior state to transition from.

   ASYMMETRIC FADE, FIXED: position was flipping the instant the breakpoint
   crossed, not over the 220ms both other properties take. visibility gets a
   spec carve-out that holds it at the OLD value until 220ms is up when
   hiding, and switches to the NEW value at 0ms when showing — exactly what
   you want for a cross-fade. position has no such carve-out; it just snaps.
   So on shrink, the outgoing desktop nav was yanked out of flow at frame one
   and any content reflowing into its place could paint over the still-fading
   element, reading as "gone almost instantly." On grow, same snap in the
   other direction read as a fade that starts already partway done.
   `transition-behavior: allow-discrete` makes position animate rather than
   snap, closing most of that gap (Chrome 117+, Safari 17.4+, Firefox 129+;
   below that it degrades to today's snap, not a broken state). It isn't a
   full match for visibility's old/new-at-the-edges behavior — allow-discrete
   flips a plain discrete property at the transition's midpoint, since only
   display and content-visibility get visibility's edge-of-transition
   treatment — but the outgoing element now stays in flow for the first half
   of its own fade instead of zero, which is what actually causes the
   asymmetry. Both wrappers share one rule, so whatever position does, it does
   identically in both directions.
=========================================================================== */
.nav-wrapper-desktop,
.nav-wrapper-mobile {
  transition: opacity var(--os-nav-fade, 220ms) ease,
              visibility var(--os-nav-fade, 220ms) linear,
              position var(--os-nav-fade, 220ms) linear;
  transition-behavior: allow-discrete;
}

@media (min-width: 1024px) {
  .nav-wrapper-desktop {
    display: flex;
    opacity: 1;
    visibility: visible;
  }
  .nav-wrapper-mobile {
    display: flex;
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 1023px) {
  .nav-wrapper-desktop {
    display: flex;
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .nav-wrapper-mobile {
    display: flex;
    opacity: 1;
    visibility: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-wrapper-desktop,
  .nav-wrapper-mobile { transition: none; }
}

/* ===========================================================================
   ONE OPEN/CLOSE ANIMATION FOR THE WHOLE PAGE

   The search panel faded and slid; every dropdown on the page — the ticket
   form menu, the profile menu, the mobile hamburger — snapped, because
   Copenhagen toggles them with display, and display is not animatable.

   They are all moved onto the search panel's timing here: fade plus a 10px
   slide over 0.25s. visibility rather than display keeps a closed menu out of
   the tab order and out of the accessibility tree while still letting it
   transition, and pointer-events: none means a fading menu cannot be clicked
   through on its way out. Every one of these is absolutely positioned, so
   keeping them in the box model costs no layout.
=========================================================================== */
.dropdown-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.25s ease,
              transform 0.25s ease,
              visibility 0.25s linear;
}
.dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* The hamburger panel is toggled by aria-expanded on the panel itself rather
   than by a sibling toggle, so it needs its own pair. */
.nav-wrapper-mobile .menu-list-mobile {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.25s ease,
              transform 0.25s ease,
              visibility 0.25s linear;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded="false"] { display: block; }
.nav-wrapper-mobile .menu-list-mobile[aria-expanded="true"] {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .dropdown-menu,
  .nav-wrapper-mobile .menu-list-mobile { transition: none; }
}

/* ===========================================================================
   SEARCH PANEL — recent activity, trimmed

   Zendesk's recent_activity markup carries a meta block under each title with
   "Article created N hours ago" and a comment count. In a search dropdown that
   is noise competing with the titles, and after the migration every one of
   them read the same date anyway.
=========================================================================== */
.os-search-panel .recent-activity-item-meta { display: none; }
.os-search-panel .recent-activity-item { padding: 2px 0; }

/* ===========================================================================
   FOOTER — Freshdesk's width and centring

   Freshdesk sets the footer to calc(100vw - 16px), which is the same 8px inset
   the header and main card already use, and centres its contents in a 44px
   row. Matched here. .footer-inner was justify-content: space-between, which
   is why the name sat hard left with the language selector pushed to the far
   right; centred now, and the selector is dropped entirely when the help
   center has no alternative locales rather than sitting there as an empty flex
   child skewing the centre.
=========================================================================== */
.footer {
  margin-left: 8px;
  margin-right: 8px;
}
.footer-inner {
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
  min-height: 44px;
  text-align: center;
}
.footer-inner a { font-size: 14px; }
.footer-language-selector:not(:has(.dropdown)) { display: none; }

/* ===========================================================================
   FRESHDESK PARITY

   Every value below was measured off the live Freshdesk home page
   (support.joinoffstreet.com) at a matched window, or read from the exact rule
   in Freshdesk/Stylesheet.css. Hover values were captured by really hovering
   the live elements, not inferred from the source.

   Deliberate divergence: the category rail shows FOUR cards, where Freshdesk
   shows three. That was asked for specifically and is kept.
=========================================================================== */

/* -- Base type. Freshdesk body is 16px/24px; this build was 15px/22.5px, and
      that one difference cascades into every element on the page. Changing the
      base rather than overriding per component, so articles and the home page
      stay consistent with each other. ------------------------------------- */
body { font-size: 16px; line-height: 1.5; }

/* -- Category cards ----------------------------------------------------- */
.os-catrail-host .blocks-item-link {
  background: #2C5B40;
  border: 1px solid #437557;
  border-radius: 18px;
  transition: background 0.2s, border-color 0.2s,
              transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.os-catrail-host .blocks-item-link:hover,
.os-catrail-host .blocks-item-link:focus-visible {
  background: #346B4B;
  border-color: #518C69;
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 168, 98, 0.15);
}
/* The site-wide focus ring (line ~6082) is `outline: 2px solid var(--os-hover-text);
   outline-offset: 3px` — drawn 3-5px OUTSIDE the card. Fine for cards in normal
   flow, but these live in `.os-catrail-track`, an `overflow: auto` scroller with
   no padding on the scroll axis (padding there breaks the paging math — see the
   track rule above). The first and last card sit flush against that clip edge,
   so their outward-facing ring has nowhere to paint: confirmed on the live page,
   Tab to the first card and its LEFT ring is gone; Tab to the last and its RIGHT
   ring is gone. Cards in the middle are fine because a neighbour's gap gives the
   ring room.
   Fixed by drawing the ring INSET for cards in the rail specifically, so it can
   never extend past the card it belongs to. Scoped narrowly (not a change to the
   shared rule) because cards elsewhere on the site aren't inside a clipping
   scroller and the outside ring reads better there. */
.os-catrail-host .blocks-item-link:focus-visible {
  outline: none;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 168, 98, 0.15),
              inset 0 0 0 2px var(--os-hover-text);
}
/* Same lift, disabled specifically on the phone-width vertical rail: it's an
   overflow-y: auto scroller with zero padding on the scroll axis (padding
   there breaks the "resting scrollTop is 0" arrow-visibility test — see the
   PHONE: four down track rule), so translateY(-6px) and the glow it triggers
   get hard-clipped at the track's own top/bottom edge the moment a card sits
   at either end of the resting scroll position. Confirmed on the live page:
   the top card's lift is sliced flat, not rounded, right at the rail's edge.
   Scoped to this breakpoint only — the desktop rail already reserves cross-
   axis padding for the same lift and doesn't have this problem. Placed after
   the base rule above (same selector, same specificity) so source order, not
   !important, is what makes this win. */
@media (max-width: 767px) {
  .os-catrail-host .blocks-item-link:hover,
  .os-catrail-host .blocks-item-link:focus-visible {
    transform: none;
    box-shadow: none;
  }
  .os-catrail-host .blocks-item-link:focus-visible {
    box-shadow: inset 0 0 0 2px var(--os-hover-text);
  }
}
.os-catrail-host .blocks-item-title {
  color: #c8ebc7;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
}

/* -- Featured panel ------------------------------------------------------ */
/* The three-column grid is DESKTOP ONLY. Left unconditional, it silently
   killed the phone stacking block further up (~line 8054). That block sets
   flex-direction on what it expects to be `display: flex`, but this rule is
   later at the same specificity, so the panel stayed a grid and
   flex-direction was inert -- while the CTA's `align-self: stretch` DID still
   apply, because align-self works on grid items too. Measured on the live
   page: columns `76px 64px 273px`, the blurb 64px wide by 302px tall (one
   word per line) under a 273x409 CTA pill.

   Only the layout properties are scoped. The padding and the removed hairline
   are wanted at every width, so they stay out here. */
.os-featured-top {
  gap: clamp(18px, 2.2vw, 28px);
  padding: clamp(20px, 2.4vw, 28px);
  border-bottom: 0;
}
@media (min-width: 768px) {
  .os-featured-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }
}
.os-featured-icon {
  width: clamp(76px, 7vw, 96px);
  height: clamp(76px, 7vw, 96px);
  border-radius: 16px;
  background: rgba(0, 168, 98, 0.10);
  border: 1px solid rgba(0, 168, 98, 0.25);
}
.os-featured-icon::after { width: 34px; height: 34px; }
.os-featured-eyebrow {
  gap: 7px;
  margin: 0 0 12px;
  padding: 6px 13px 6px 11px;
  background: rgba(0, 168, 98, 0.16);
  border: 1px solid rgba(0, 168, 98, 0.5);
  color: #BFFFD0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.8px;
}
.os-featured-title {
  margin: 0;
  color: #F8FAF9;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.25;
}
.os-featured-blurb {
  margin: 8px 0 0;
  color: rgba(248, 250, 249, 0.62);
  font-size: 15px;
  line-height: 1.55;
  max-width: 52ch;
}
.os-featured-cta {
  gap: 10px;
  padding: 14px 22px;
  background: #1B704A;
  border: 1px solid rgba(0, 168, 98, 0.55);
  color: #F8FAF9;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease,
              transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.os-featured-cta:hover,
.os-featured-cta:focus-visible {
  background: #00A862;
  border-color: #00A862;
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35), 0 6px 12px rgba(0, 168, 98, 0.18);
}
.os-featured-cta:hover::after { transform: rotate(45deg) translate(3px, -3px); }

.os-featured-links {
  gap: 0;
  padding: 8px clamp(12px, 1.6vw, 18px) 14px;
  border-top: 1px solid rgba(248, 250, 249, 0.08);
}
.os-featured-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 8px;
  padding: 14px 14px 12px;
  height: 100%;
  border-radius: 12px;
  transition: background 0.2s ease, transform 0.25s ease-out;
}
@media (min-width: 768px) {
  .os-featured-link + .os-featured-link {
    border-left: 1px solid rgba(248, 250, 249, 0.07);
    border-top: 0;
  }
}
.os-featured-link:hover,
.os-featured-link:focus-visible {
  background: rgba(0, 168, 98, 0.07);
  transform: translateY(-2px);
}
.os-featured-link-icon { width: 22px; height: 22px; margin-bottom: 0; }
.os-featured-link-title {
  color: #c8ebc7;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0;
  transition: color 0.2s ease;
}
.os-featured-link:hover .os-featured-link-title { color: #FFFFFF; }
.os-featured-link-desc {
  color: rgba(248, 250, 249, 0.5);
  font-size: 12px;
  line-height: 1.45;
}

/* -- Most popular -------------------------------------------------------- */
.os-popular { margin: 40px 0 0; }
.os-popular-head { margin-bottom: 16px; }
.os-popular-title {
  color: #F8FAF9;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.2;
}
.os-popular-all { color: #00A862; }
.os-popular-all:hover, .os-popular-all:focus-visible { color: #BFFFD0; }
.os-popular-grid {
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: clamp(18px, 2.5vw, 36px);
  /* Collapses with .os-popular-head's 16px bottom margin, so the larger of the
     two wins: 39 here + the 1px between the heading's text box and the head's
     bottom edge = Freshdesk's 40px from heading to first card. */
  margin-top: 39px;
}
@media (min-width: 768px) {
  .os-popular-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.os-popular-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #12171C;
  border: 1px solid rgba(0, 168, 98, 0.35);
  border-radius: 16px;
  padding: 24px 20px;
  transition: background 0.2s ease, border-color 0.2s ease,
              transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.os-popular-card:hover,
.os-popular-card:focus-visible {
  transform: translateY(-4px);
  background: #151b22;
  border-color: #00A862;
  box-shadow: 0 12px 24px rgba(0, 168, 98, 0.12);
}
.os-popular-card-title {
  color: #c8ebc7;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  width: 100%;
  transition: color 0.2s ease;
}
.os-popular-card:hover .os-popular-card-title { color: #ffffff; }

/* -- Vertical rhythm.

      MEASURE VISIBLE EDGES, NOT WRAPPERS. The first pass compared wrapper
      boxes (.os-catrail-host against Freshdesk's .offstreet-catrail) and read
      "6px = 6px", so this landed on 6px and the page came out visibly cramped.
      The wrappers carry different internal padding on each platform, so that
      number described nothing anyone can see. These values come from painted
      edge to painted edge at clientW 1652:

        search bottom  -> card top      30
        card bottom    -> featured top  50
        featured bottom-> heading top   40   (already right: .os-popular 40px)
        heading bottom -> card top      40
        card bottom    -> footer top    77   (already right: main padding)

      The host sits 1px above the card's painted edge (the card's border) and
      the track's negative margins are contained by flow-root, so the host
      margin is the visible gap minus 1.

      SPECIFICITY: .categories.blocks is two classes and was beating a plain
      .os-catrail-host rule, so Copenhagen's 36.72/48.96px margins survived and
      the first attempt at this changed nothing. Measured, not assumed — the
      computed margin-top still read 36.72px after the rule was added. */
.hero { margin-bottom: 0; }
.categories.blocks.os-catrail-host {
  margin-top: 29px;
  margin-bottom: 0;
}
.section.knowledge-base .os-featured { margin-top: 49px; }
/* Freshdesk leaves 77px between the last popular card and the footer; this is
   the card's own bottom padding, so the dark panel carries all the way down. */
main { padding-bottom: 76px; }

/* Card padding: Freshdesk uses a flat 24px. Copenhagen's 29.376px vertical
   padding is what made the card 179px tall against Freshdesk's 160px. */
.os-catrail-host .blocks-item-link { padding: 24px; }

/* -- Footer: a short rounded panel, not a tall transparent band ----------- */
.footer {
  width: calc(100vw - 16px);
  max-width: calc(100vw - 16px);
  margin: 0 5px;
  padding: 0;
  background: #12171D;
  border: 1px solid #12171C;
  border-radius: 14px;
  box-sizing: border-box;
  overflow: hidden;
}
.footer-inner {
  min-height: 44px;
  padding: 0 16px 6px;
  gap: 0;
}
.footer-inner a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  font-weight: 300;
  line-height: 21px;
  padding: 0 12px;
}
.footer-inner a:hover,
.footer-inner a:focus-visible { color: #BFFFD0; }

@media (prefers-reduced-motion: reduce) {
  .os-catrail-host .blocks-item-link,
  .os-featured-cta,
  .os-featured-link,
  .os-popular-card { transition: none; }
  .os-catrail-host .blocks-item-link:hover,
  .os-featured-cta:hover,
  .os-featured-link:hover,
  .os-popular-card:hover { transform: none; }
}

/* -- Search field -------------------------------------------------------
   Freshdesk: input background rgb(19,23,28), 1px rgb(48,54,58) border, 8px
   radius, 48px tall, 18px/300 text, with a submit button attached on the
   right. Zendesk's {{search}} helper renders the button itself when called
   with submit=true, so this is reachable without hand-built markup — only the
   styling is ours.
------------------------------------------------------------------------- */
/* .os-hero-search / .os-fab-search added alongside these everywhere: neither
   is rendered inside an actual .hero (the page's relocated search, and the
   floating button's own popover search), so each needs its own hook to
   reuse this exact styling. Both are unique, purpose-built classes, so
   they're listed bare rather than chained — nothing else can collide with
   them. */
.hero .search.search-full,
.os-hero-search,
.os-fab-search {
  height: 48px;
  background: #13171C;
  border: 1px solid #30363A;
  border-radius: 8px;
  overflow: hidden;
}
.hero .search.search-full input[type="search"],
.os-hero-search input[type="search"],
.os-fab-search input[type="search"] {
  height: 46px;
  font-size: 18px;
  font-weight: 300;
  border-radius: 0;
  background: transparent;
}
/* The helper renders an <input type="submit">, not a <button> — so it arrived
   as a default grey browser button with a 2px black border. An input cannot
   carry a pseudo-element, so the magnifier is a background-image data URI
   (nothing fetched) and the value text is collapsed with font-size: 0. */
.hero .search.search-full input[type="submit"],
.os-hero-search input[type="submit"],
.os-fab-search input[type="submit"] {
  flex: 0 0 auto;
  width: 52px;
  height: 46px;
  align-self: stretch;
  background-color: #00A862;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  border: 0;
  border-radius: 0;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.hero .search.search-full input[type="submit"]:hover,
.hero .search.search-full input[type="submit"]:focus-visible,
.os-hero-search input[type="submit"]:hover,
.os-hero-search input[type="submit"]:focus-visible,
.os-fab-search input[type="submit"]:hover,
.os-fab-search input[type="submit"]:focus-visible {
  background-color: #14a06a;
}
/* Freshdesk puts the magnifier in the button on the right, with nothing on the
   left of the field. Neither .os-hero-search nor .os-fab-search ever has a
   .search-icon sibling to begin with — on the relocated page search it was
   hand-written in category_page.hbs's markup, outside the {{search}}
   helper's own output, and gets left behind (then removed) with the rest of
   .sub-nav; the popover search has no such markup at all, script.js builds
   it bare — but this stays bare-selector-safe either way. */
.hero .search-icon { display: none; }
.hero .search.search-full input[type="search"],
.os-hero-search input[type="search"],
.os-fab-search input[type="search"] { padding-left: 18px; }
/* Copenhagen's clear button (an accessibility feature — Escape/Delete clears
   the field, script.js's appendClearSearchButton) is one flex item among
   others in the form, shown via a `search-has-value` class the moment there's
   text. In a search-full box that pushes the submit button left to make room
   for it, visibly "bumping" it — confirmed against a real screenshot on the
   live site. Not wanted here: hidden specifically for search-full, not
   removed from the underlying feature, which stays intact for any smaller,
   non-hero search field. `.search-full.search-has-value` (0,3,0) beats the
   stock `.search-has-value .clear-button` (0,2,0) that shows it, no
   !important needed. */
.search-full.search-has-value .clear-button {
  display: none;
}

/* ===========================================================================
   TIGHTEN THE HOME PAGE

   Measured against Freshdesk at the same viewport: it runs the search hard
   against the header (-6px — its search lives INSIDE the header shell and
   overlaps the bottom edge), then 6px to the rail. Ours was 48px then 18px,
   because the search is the first thing inside main and picked up main's 32px
   top padding plus the hero's own 16px.

   Scoped with :has(.hero) so article, category and section pages keep their
   normal 32px top padding — only the home page is pulled up. Landing at 0
   rather than -6: the last 6px would mean the hero overflowing main's top
   edge into the header's rounded corner, which buys nothing visible when both
   surfaces are the same colour.
=========================================================================== */
main:has(.hero) { padding-top: 0; }
.hero {
  padding-top: 0;
  padding-bottom: 0;
}

/* Freshdesk's category cards are 190px tall; ours came out 168 because the
   card is narrower at four across and the content is shorter.

   SCOPED TO DESKTOP. Left unconditional, this collided with the phone rail,
   which lays the cards out as 96px rows (--catrail-row) on a 108px stride.
   A 190px min-height in a 108px slot made every card overpaint the one above
   it by 82px. Measured on the live page at clientW 555: 7 cards, heights all
   190, tops 108px apart, overlaps [82 x 6], and the backgrounds are opaque so
   each card's title is cut through by the card below. */
@media (min-width: 768px) {
  .os-catrail-host .blocks-item { min-height: 190px; }
  .os-catrail-host .blocks-item-link { min-height: 190px; }
}

/* ===========================================================================
   OS FLOATING SEARCH BUTTON

   Bottom-right, deliberately: Zendesk's own Web Widget launcher (the "Help"
   button) is moved to bottom-left via window.zESettings in document_head.hbs,
   so a visitor submits a ticket on the left and searches on the right instead
   of the two fighting over the same corner. z-index 60 — comfortably above
   ordinary content, comfortably below the sticky header's 100, and nowhere
   near the launcher's own stack (it runs in the high 2 billions from inside
   its iframe, not a scale worth matching).

   .os-search-fab-wrap holds both the round button and its popover search,
   laid out as a flex row (`justify-content: flex-end`) anchored to the
   button's corner, so opening the popover grows leftward from the button
   rather than pushing the button itself around. is-visible/is-open live on
   the wrap, not the button: script.js's IntersectionObserver only ever
   toggles one class regardless of which page/JS wired the button, and
   closing the popover (Escape, an outside click, or scrolling the wrap out
   of view) should hide both pieces together.
=========================================================================== */
.os-search-fab-wrap {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.os-search-fab-wrap.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .os-search-fab-wrap {
    transition: opacity 0.01ms linear, visibility 0.01ms linear;
  }
}

/* Collapsed to 0 width and clipped: the popover form inside (.os-fab-search,
   sized like any other block box — it fills whatever width its parent
   currently has) grows into view as this widens on .is-open, rather than
   appearing all at once. Capped at 100vw - 120px so it can't run off the
   left edge of a narrow phone screen (24px right inset + 52px button + 12px
   gap + a little breathing room). */
.os-search-fab-expand {
  flex: 0 0 auto;
  width: 0;
  overflow: hidden;
  transition: width 0.25s ease;
}
.os-search-fab-wrap.is-open .os-search-fab-expand {
  width: min(320px, calc(100vw - 120px));
}
@media (prefers-reduced-motion: reduce) {
  .os-search-fab-expand {
    transition: width 0.01ms linear;
  }
}

.os-search-fab {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--os-green);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: background-color 0.2s ease;
}
.os-search-fab:hover,
.os-search-fab:focus-visible {
  background: var(--os-green-hover);
}