/*---1790144750---*/
/* MAXXED — Comm100 Knowledge Base theme
 *
 * Paste into Comm100 admin -> Knowledge Base -> Design (this is the file the
 * `{{cssUrl}}` template variable resolves to, served as
 * https://help.maxxed.io/themes/style.css).
 *
 * Everything above the "MAXXED" section at the bottom is Comm100's stock
 * theme, untouched. The Maxxed article styling is appended there rather than
 * edited in place, so the vendor default stays readable as a reference and
 * any single rule can be reverted by deleting one line.
 *
 * `@import` has to be the first thing in the file — a stylesheet drops any
 * `@import` that follows a rule.
 */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap");

@font-face {
    font-family: "SourceSans Pro";
    src: url('/kb/resources/fonts/SourceSansPro-Regular.woff') format('woff'), url('/kb/resources/fonts/SourceSansPro-Regular.ttf') format('truetype'), url('/kb/resources/fonts/SourceSansPro-Regular.svg#SourceSans-Pro') format('svg');
}
@font-face {
    font-family: "SourceSans Pro Italic";
    src: url('/kb/resources/fonts/SourceSansPro-It.woff') format('woff'), url('/kb/resources/fonts/SourceSansPro-It.ttf') format('truetype'), url('/kb/resources/fonts/SourceSansPro-It.svg#SourceSans-Pro-Italic') format('svg');
}
@font-face {
    font-family: "SourceSans Pro Bold";
    src: url('/kb/resources/fonts/SourceSansPro-Semibold.woff') format('woff'), url('/kb/resources/fonts/SourceSansPro-Semibold.ttf') format('truetype'), url('/kb/resources/fonts/SourceSansPro-Semibold.svg#SourceSans-Pro-Semibold') format('svg');
}
@font-face {
    font-family: "SourceSans Pro Light";
    src: url('/kb/resources/fonts/SourceSansPro-Light.woff') format('woff'), url('/kb/resources/fonts/SourceSansPro-Light.ttf') format('truetype'), url('/kb/resources/fonts/SourceSansPro-Light.svg#SourceSans-Pro-Light') format('svg');
}
@font-face {
    font-family: "kb-icons";
    src: url("/kb/resources/icons/fonts/kb-icons.eot");
    src: url("/kb/resources/icons/fonts/kb-icons.eot?#iefix") format("embedded-opentype"), url("/kb/resources/icons/fonts/kb-icons.woff") format("woff"), url("/kb/resources/icons/fonts/kb-icons.ttf") format("truetype"), url("/kb/resources/icons/fonts/kb-icons.svg#kb-icons") format("svg");
    font-weight: normal;
    font-style: normal;
}
body {
    font-size: 18px;
    margin: 0;
    font-family: "SourceSans Pro";
}
a {
    text-decoration: none;
    color: #329fd9;
}
img {
    max-width: 100%;
}
.clear {
    clear: both;
}
::-webkit-input-placeholder {
    color: rgba(255, 255, 255, .7);
}
::-moz-placeholder {
    color: rgba(255, 255, 255, .7);
}
:-ms-input-placeholder {
    color: rgba(255, 255, 255, .7);
}
:-moz-placeholder {
    color: rgba(255, 255, 255, .7);
}
/**icon begin**/
.iconfont:before {
    text-decoration: none;
    font: 16px "kb-icons";
    font-style: normal;
    /*cursor: pointer;*/
}
.icon-search {
    position: relative;
    left: -36px;
    color: #329fd9;
}
@media(max-width: 767px) {
    .icon-search {
        position: absolute;
        right: 20px;
        top: 17px;
        left: auto;
    }
}
.icon-search:before {
    content: "\e000";
}
.icon-feature:before {
    content: "\e001";
}
.icon-folder:before {
    content: "\e006";
}
.icon-fold:before {
    content: "\e002";
}
.icon-unfold:before {
    content: "\e003";
}
.icon-helpful:before {
    content: "\e004";
}
.icon-not-helpful:before {
    content: "\e005";
}
.icon-feature {
    color: #ff9a22;
    padding-right: 5px;
}
/**icon end**/
/**header begin**/
.header {
    height: 350px;
    background-color: #3b99e0;
    padding: 65px 0;
    text-align: center;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.header__logo {
    height: 80px;
}
.header__logo--compact {
    margin-left: 40px;
    float: left;
}
@media(max-width: 767px) {
    .header__logo--compact {
        margin-left: 0px;
        float: none;
    }
}
.header__title {
    margin: 35px 0;
    color: #fff;
    font-size: 35px;
    height: 35px;
    line-height: 1;
    font-family: "SourceSans Pro Light", Verdana;
}
.header__search {
    transform: translateY(30%);
    -moz-transform: translateY(30%);
    -webkit-transform: translateY(30%);
    /*margin-top: 30px;*/
}
@media(max-width: 767px) {
    .header__search {
        margin: 30px auto 0;
        width: calc(100% - 60px);
        position: relative;
    }
}
.header__searchinput {
    width: 100%;
    max-width: calc(100% - 100px);
    height: 50px;
    padding: 0 36px 0 20px;
    font-size: 22px;
    /*color: rgba(255, 255, 255, .7);*/
    background-color: rgba(255, 255, 255, .4);
    border-radius: 2px;
    border: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    transition: 0.3s background-color, 0.3s box-shadow;
    -moz-transition: 0.3s background-color, 0.3s box-shadow;
    -webkit-transition: 0.3s background-color, 0.3s box-shadow;
    font-family: "Source Sans Pro Regular", Verdana;
    color: #fff;
}
@media(max-width: 767px) {
    .header__searchinput {
        max-width: 100%;
    }
}
.header__searchinput:focus {
    color: #000;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
    outline: none !important;
}
    .header__searchinput:focus + .iconfont {
        color: #000;
        transition: .3s color;
        -moz-transition: .3s color;
        -webkit-transition: .3s color;
    }
.header__searchbtn {
}
/*header for category, article, 404 page*/
.header--compact {
    height: 170px;
    background-color: #3b99e0;
    padding: 45px 0;
    text-align: center;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
@media(max-width: 768px) {
    .header--compact {
        height: auto;
    }
}
.header--compact .header__searchinput {
    /*width: 700px;*/
    width: 100%;
}
@media(min-width: 768px) {
    .header--compact .header__searchinput {
        max-width: 500px;
    }
}
@media(min-width: 992px) {
    .header--compact .header__searchinput {
        max-width: 750px;
    }
}
@media(min-width: 1200px) {
    .header--compact .header__searchinput {
        max-width: 750px;
    }
}
/**header end**/
/**public**/
.content {
    padding-top: 50px;
    padding-bottom: 100px;
}
.container {
    margin-right: auto;
    margin-left: auto;
}
@media(min-width: 768px) {
    .container {
        width: 800px;
    }
}
@media(min-width: 992px) {
    .container {
        width: 970px;
    }
}
@media(min-width: 1200px) {
    .container {
        width: 1170px;
    }
}
.breadcrumbs {
    font-size: 16px;
    color: #bbb;
    /*margin-top: 50px;*/
    margin-left: 40px;
    margin-bottom: 35px;
    margin-right: 40px;
}
    .breadcrumbs a {
        color: #329fd9;
        text-decoration: none;
    }
        .breadcrumbs a:hover {
            text-decoration: underline;
        }
.show {
    display: block;
}
.collapse {
    display: none;
}
/**category list begin**/
.category-list {
    /*border-bottom: 1px solid #ddd;*/
    box-sizing: border-box;
    user-select: none;
    margin-left: 40px;
    margin-right: 40px;
}
    .category-list .icon-folder {
        position: relative;
        left: 8px;
    }
.category-list_solidline {
    border-top: 1px solid #ddd;
}
.category-list_dashedline {
    border-top: 1px dashed #ddd;
}
.category-list__item {
    border-bottom: 1px solid #ddd;
}
.category-list__item__header {
}
    .category-list__item__header:hover {
        cursor: pointer;
    }
/*.category-list__item__header:hover .icon-folder {
            color: #329fd9;
        }
        .category-list__item__header:hover .icon-fold {
            color: #329fd9;
        }
        .category-list__item__header:hover .icon-unfold {
            color: #329fd9;
        }*/
.category-list__item__header__sub {
}
.category-list__item__content {
    padding-bottom: 25px;
}
.category-list__item__name {
    padding-left: 18px;
    font: 24px/70px "SourceSans Pro", Arial, sans-serif;
    display: inline-block;
    /*cursor: pointer;*/
}
    .category-list__item__name a {
        color: #000;
        text-decoration: none;
    }
        .category-list__item__name a:hover {
            color: #329fd9;
            text-decoration: underline;
        }
.category-list__item__artilceNumber {
    display: inline;
    font-size: 14px;
    color: #bbb;
    border: 1px solid #bbb;
    border-radius: 2px;
    padding: 0 5px;
    margin-left: 10px;
    top: -3px;
    position: relative;
    /*transform: translateY(-20%);*/
    -moz-transform: translateY(-20%);
    -webkit-transform: translateY(-20%);
    font-family: "Source Sans Pro-Regular", Verdana;
}
.category-list .icon-fold {
    float: right;
    margin-top: 23px;
    padding-right: 20px;
    /*left: -20px;*/
}
.category-list .icon-unfold {
    float: right;
    margin-top: 23px;
    padding-right: 20px;
    /*left: -20px;*/
}
.category-list__item--sub {
    border: 0px;
    margin-top: -15px;
}
.article-list {
    padding-left: 40px;
    padding-right: 40px;
}
.article-list--solidline {
    border-top: 1px solid #ddd;
    padding-top: 25px;
    max-width: 100%;
}
.article-list--dashedline {
    border-top: 1px dashed #ddd;
    padding-top: 25px;
    max-width: 100%;
}
.article-list__morebtn {
    margin-top: 12px;
    /*margin-bottom: 10px;*/
}
.article-list--hidden {
    display: none;
}
.article-list__title {
    padding-bottom: 10px;
}
    .article-list__title a {
        color: #329fd9;
        text-decoration: none;
        font-size: 20px;
        font-family: "SourceSans Pro Regular";
    }
        .article-list__title a:hover {
            text-decoration: underline;
        }
.article-list .article-list__title:last-child {
    padding-bottom: 20px;
}
.article-list__content {
    font: 16px/27px "SourceSans Pro Regular";
    color: #888;
    padding: 0px 0px 30px 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.subcategory-list {
    /*border-bottom:1px solid #ddd;*/
    margin-left: 40px;
    /*margin-top: 20px;*/
}
    /*.subcategory-list:hover .icon-folder {
        color: #329fd9;
    }*/
    .subcategory-list:last-child {
        padding-bottom: 20px;
    }
.category-list__item__sub__name {
    padding-left: 18px;
    font: 24px/50px "SourceSans Pro", Arial, sans-serif;
    display: inline-block;
    /*cursor: pointer;*/
}
    .category-list__item__sub__name a {
        color: #000;
        text-decoration: none;
    }
        .category-list__item__sub__name a:hover {
            color: #329fd9;
            text-decoration: underline;
        }
.folded .category-list,
.folded .article-list,
.folded .category-list__item,
.folded .category-list__item__sub,
.folded .subcategory-list {
    display: none !important;
}
.unfolded .category-list,
.unfolded .article-list,
.unfolded .category-list__item,
.unfolded .category-list__item__sub,
.unfolded .subcategory-list {
    display: block;
}
.folded .icon-fold {
    transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}
.unfolded .icon-fold {
    /*transform: rotate(-90deg);*/
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}
/**article page begin**/
.article {

}
.article__title {
    font-size: 24px;
    color: #000;
    padding-bottom: 40px;
    border-bottom: 1px solid #ddd;
    font-family: "SourceSans Pro Regular", Arial, sans-serif;
}
.article__content {
    padding: 20px 0;
    color: #666;
    font-size: 20px;
    font-family: "SourceSans Pro light", Arial, sans-serif;
}
.article__feedback {
    height: 70px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font: 20px/70px "SourceSans Pro Light";
    color: #bbb;
    margin-top: 20px;
}
.article__feedbackbtn {
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 2px;
    color: rgba(0, 0, 0, .5);
    width: 60px;
    height: 30px;
    padding: 0 20px;
    margin-left: 20px;
    cursor: pointer;
    text-decoration: none;
}
.article__feedbacklabel {
    float: right;
}
.article__feedbackbtn:hover {
    color: rgba(0, 0, 0, .8);
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    border: 1px solid rgba(0, 0, 0, .4);
    text-decoration: none;
}
.article__feedbackbtn:active {
    box-shadow: none;
    text-decoration: none;
}
.article__feedbackbtn.disabled {
    color: rgba(0, 0, 0, .15);
    border-color: rgba(0, 0, 0, .15);
    box-shadow: none;
    text-decoration: none;
}
.article__feedbackbtn.selected {
    color: rgba(0, 0, 0, 1);
    border-color: rgba(0, 0, 0, 1);
    box-shadow: none;
    text-decoration: none;
}
.fr-view table {
    border: none;
    border-collapse: collapse;
    empty-cells: show;
    max-width: 100%;
}
    .fr-view table td {
        min-width: 5px;
    }
    .fr-view table.fr-dashed-borders td,
    .fr-view table.fr-dashed-borders th {
        border-style: dashed;
    }
    .fr-view table.fr-alternate-rows tbody tr:nth-child(2n) {
        background: #f5f5f5;
    }
    .fr-view table td,
    .fr-view table th {
        border: 1px solid #ddd;
    }
        .fr-view table td:empty,
        .fr-view table th:empty {
            height: 20px;
        }
        .fr-view table td.fr-highlighted,
        .fr-view table th.fr-highlighted {
            border: 1px double red;
        }
        .fr-view table td.fr-thick,
        .fr-view table th.fr-thick {
            border-width: 2px;
        }
    .fr-view table th {
        background: #ececec;
    }
/**article end**/
/**search result begin**/
.search-result--norecord {
    text-align: center;
}
.seach-result__label {
    font: 24px/24px "SourceSans Pro Regular";
    color: #bbb;
    margin-left: 40px;
    margin-bottom: 40px;
}
.search-result__keywords {
    font: 24px/24px "SourceSans Pro Regular";
    color: #000;
}
.search-result__highlight {
    background-color: yellow;
    color: #000;
}
/**search result end**/
/**page not found begin**/
.page-not-found {
    padding-top: 100px;
    text-align: center;
    margin-left: 40px;
    margin-right: 40px;
    margin-bottom: 60px;
}
.page-not-found__title {
    margin-top: 50px;
    font: 65px "SourceSans Pro Semibold", Verdana;
    color: #666;
}
.page-not-found__description {
    margin-top: 40px;
    font: 30px "SourceSans Pro Regular", Verdana;
    color: #666;
}
/**page not found end**/
.poweredby {
      height: 23px;
      float: right;
      padding-left: 40px;
      padding-right: 40px;
      margin-top: 30px;
    }
    .poweredby a[href] {
      line-height: 15px
    }
    .poweredby a[href]:active,
    .poweredby a[href]:focus,
    .poweredby a[href]:hover {
      border-bottom: none
    }
    .poweredby a[href] svg {
      height: 15px;
      vertical-align: text-bottom
    }
    .poweredby a[href] svg polygon {
      fill: #ffd928
    }
    .poweredby a[href] svg path {
      fill: #bbb
    }

/* ==========================================================================
   MAXXED — article page
   ==========================================================================

   Mirrors Figma "03x-Maxxed-V1-DS" -> page "↘ Live Chat {WIP}" ->
   `suport-search-result / category=result` (node 99264-55887).

   !! THIS SECTION IS THE WIDGET PANEL ONLY — NOT THE PUBLIC ARTICLE PAGE !!

   It used to be both. Figma later drew the public article page as a LIGHT
   page sharing the home hero and footer (node 99618-26276), so that page now
   has its own section at the bottom of this file and this one is reduced to
   the in-widget reader.

   The divider is `.header`, and it is structural rather than a convention:
   the `?vs=true` render emits NO `.header` at all — verified, its body is
   `.content > .container > .article` and nothing else — while the public page
   always has one. So every rule below is scoped
   `body.page-article:not(:has(.header))`, and the public page's rules are all
   anchored on `.header:not(.header--compact) ~ .content`, which the panel can
   never match. One template, two themes, no extra class needed.

   This is the one part of the file that depends on `:has()`. If it were
   unsupported the panel would fall back to the light theme rather than
   breaking, and `:has()` ships in every current browser.

   HOW THIS IS SCOPED — two mechanisms, both plain CSS
   ---------------------------------------------------
   1. `.page-article` on `<body>`, added by `comm100-kb-article-template.html`,
      narrowed to `:not(:has(.header))` as above.

      This is load-bearing, not decoration. Comm100 serves the category,
      search-result, 404 and custom pages from THIS SAME stylesheet, and those
      pages' stock rules paint dark text (`#000`, `#666`, `#888`). A dark
      `body` with no per-page scope would leave them unreadable. Scoping to
      the article page keeps this file additive — delete the class from the
      template and the page reverts to Comm100's stock theme above, with
      nothing else touched.

      It also means the rules win on specificity without `!important`:
      `.page-article .article__title` is (0,2,0) against the stock
      `.article__title` at (0,1,0). No rule below relies on source order.

   2. Nothing else. In particular NO media query — see the "Panel metrics"
      note further down. The shape test is the whole scope, at every width.

      Comm100 serves this KB from two templates that both set `.page-article`:

        https://help.maxxed.io/<slug>            the public help centre
        https://help.maxxed.io/<slug>?vs=true    inside the chat widget panel

      The public one emits a `.header` hero and a footer; the panel emits
      `.content > .container > .article` and nothing else. That is the only
      difference this section needs, and it does not depend on how wide
      either of them happens to be rendered.

   An earlier version of this section keyed everything on
   `body:not(:has(.header))` with no body class. That is replaced: it made the
   whole theme depend on `:has()` support, and it applied the panel's type
   scale to the desktop site.

   ---------------------------------------------------------------------------
   !! NONE OF THIS LOADS IN THE PANEL UNTIL ITS TEMPLATE IS SAVED !!

   The panel has its own template, `comm100-kb-widget-template.html`, and the
   `.page-article` class on its `<body>` is what every rule here hangs off.

   On attribute quoting: the `?vs=true` render has been seen to double every
   double-quote in its output — `<link href=""./themes/style.css"" />` resolves
   to an empty href so this file never loads, and `class=""article""` parses as
   an EMPTY class so nothing here could match if it did. Checked against the
   live render on 2026-09-23 and it is NOT doing that today; the panel template
   is plain double-quoted and loads correctly. If it ever regresses, the fix is
   to single-quote every attribute in that template, as
   `comm100-kb-article-template.html` already does — single quotes are not
   doubled. Check view-source before blaming this file.
   ------------------------------------------------------------------------ */

/* --- Palette, every viewport --------------------------------------------- */

body.page-article:not(:has(.header)) {
    background: linear-gradient(180deg, #141414 0%, #222222 100%);
    /* The gradient needs a box at least as tall as the viewport, or it bands
       at the content height when an article is short. */
    background-attachment: fixed;
    color: #e0e0e0;
    font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.page-article:not(:has(.header)) a {
    color: #5afa44;
}

/* Site chrome — present on the public page, stripped from the `?vs=true`
   render. Comm100 ships a 350px #3b99e0 hero here; `--compact` already
   shortens it for the article page, so only the colours change. */
.page-article:not(:has(.header)) .header {
    background-color: #141414;
    border-bottom: 1px solid #222222;
}

.page-article:not(:has(.header)) .header__title {
    color: #f5f5f5;
}

.page-article:not(:has(.header)) .header__searchinput {
    background-color: #222222;
    border: 1px solid #333333;
    border-radius: 16px;
    color: #f5f5f5;
}

.page-article:not(:has(.header)) .header__searchinput:focus {
    background-color: #222222;
    border-color: #5afa44;
    color: #f5f5f5;
}

/* Stock sets these to `rgba(255,255,255,.7)`, which was chosen against the
   blue hero and is near-invisible on #222. */
.page-article:not(:has(.header)) .header__searchinput::-webkit-input-placeholder {
    color: #a3a3a3;
}

.page-article:not(:has(.header)) .header__searchinput::placeholder {
    color: #a3a3a3;
}

.page-article:not(:has(.header)) .icon-search:before {
    color: #a3a3a3;
}

.page-article:not(:has(.header)) .breadcrumbs {
    color: #a3a3a3;
}

.page-article:not(:has(.header)) .breadcrumbs a {
    color: #5afa44;
}

/* --- The article -------------------------------------------------------- */

.page-article:not(:has(.header)) .article__title {
    border-bottom: 1px solid #222222;
    color: #f5f5f5;
    font-family: inherit;
}

.page-article:not(:has(.header)) .article__content {
    color: #e0e0e0;
    font-family: inherit;
}

.page-article:not(:has(.header)) .article__content h1,
.page-article:not(:has(.header)) .article__content h2,
.page-article:not(:has(.header)) .article__content h3,
.page-article:not(:has(.header)) .article__content h4 {
    color: #f5f5f5;
    font-family: inherit;
}

/* Comm100's editor wraps every heading in an empty `<a>` anchor target, which
   would otherwise take the link colour and underline on hover. */
.page-article:not(:has(.header)) .article__content h1 > a:empty,
.page-article:not(:has(.header)) .article__content h2 > a:empty,
.page-article:not(:has(.header)) .article__content h3 > a:empty {
    display: none;
}

.page-article:not(:has(.header)) .article__content strong,
.page-article:not(:has(.header)) .article__content b {
    color: #f5f5f5;
    font-weight: 600;
}

.page-article:not(:has(.header)) .article__content a,
.page-article:not(:has(.header)) .article__content a[href] {
    color: #5afa44;
    text-decoration: underline;
}

.page-article:not(:has(.header)) .article__content blockquote {
    background-color: #222222;
    border-left: 2px solid #333333;
    border-radius: 0 12px 12px 0;
    color: #e0e0e0;
    padding: 8px 12px;
}

.page-article:not(:has(.header)) .article__content code,
.page-article:not(:has(.header)) .article__content pre {
    background-color: #222222;
    border-radius: 4px;
    color: #f5f5f5;
}

.page-article:not(:has(.header)) .article__content pre {
    overflow-x: auto;
    padding: 8px 12px;
}

.page-article:not(:has(.header)) .article__content hr {
    border: 0;
    border-top: 1px solid #222222;
}

.page-article:not(:has(.header)) .article__content img {
    border-radius: 12px;
}

/* Froala tables — stock gives them #ddd borders, an #ececec header and an
   #f5f5f5 zebra stripe, all of which glow on a dark card. */
.page-article:not(:has(.header)) .article__content.fr-view table td,
.page-article:not(:has(.header)) .article__content.fr-view table th {
    border-color: #333333;
    padding: 6px 8px;
}

.page-article:not(:has(.header)) .article__content.fr-view table th {
    background: #222222;
    color: #f5f5f5;
}

.page-article:not(:has(.header)) .article__content.fr-view table.fr-alternate-rows tbody tr:nth-child(2n) {
    background: #1a1a1a;
}

/* Related articles. Shares `.article-list__title` with the category page, so
   it is reached through `.article__related` as well as `.page-article`. */
.page-article:not(:has(.header)) .article__related {
    border-top: 1px solid #222222;
    margin-top: 20px;
    padding-top: 16px;
}

.page-article:not(:has(.header)) .article__related .article__title {
    border-bottom: 0;
    padding-bottom: 8px;
}

.page-article:not(:has(.header)) .article__related .article-list__title a {
    color: #5afa44;
    font-family: inherit;
}

/* Helpful? — not rendered in the panel today (`ifAllowFeedback` is off and the
   `?vs=true` response carries no `.article__feedback`), styled so switching it
   on in KB admin does not put a light strip in a dark page. */
.page-article:not(:has(.header)) .article__feedback {
    border-top: 1px solid #222222;
    border-bottom: 0;
    color: #a3a3a3;
}

.page-article:not(:has(.header)) .article__feedbackbtn {
    border: 1px solid #333333;
    border-radius: 12px;
    color: #e0e0e0;
}

.page-article:not(:has(.header)) .article__feedbackbtn:hover {
    border-color: #5afa44;
    box-shadow: none;
    color: #5afa44;
}

.page-article:not(:has(.header)) .article__feedbackbtn.disabled {
    border-color: #333333;
    color: #646464;
}

.page-article:not(:has(.header)) .article__feedbackbtn.selected {
    border-color: #5afa44;
    color: #5afa44;
}

.page-article:not(:has(.header)) .poweredby a[href] svg path {
    fill: #646464;
}

/* Scrollbars. Hung off `html`, NOT `body` — the document scroller is the root
   element, and `body::-webkit-scrollbar` only reaches a scrollbar when `body`
   itself is the scroll container, which it is not here (verified: the same
   rules on `body` left the track white). `html` carries no `.page-article`,
   so this is scoped by `:has()` — the one place it is used, and a failure just
   means a light scrollbar rather than an unstyled page.

   THE TWO `:has()` MUST STAY SIBLINGS, NOT NESTED. Every other rule in this
   section is scoped `body.page-article:not(:has(.header))`, and the obvious
   way to lift that onto `html` —
   `html:has(body.page-article:not(:has(.header)))` — is INVALID CSS: the
   spec forbids `:has()` inside `:has()`, so the browser throws a SyntaxError
   and silently drops all four rules. (`:has()` inside `:not()` is fine; only
   the `:has()`-within-`:has()` nesting is banned.) Written flat as
   `html:has(body.page-article):not(:has(.header))` it parses and matches the
   same elements. An earlier revision had the nested form and the panel
   scrollbar stayed light.

   `color-scheme` is the standards-track half of the same job, and also covers
   Firefox, which implements none of the `::-webkit-*` pseudo-elements. */
html:has(body.page-article):not(:has(.header)) {
    color-scheme: dark;
}

html:has(body.page-article):not(:has(.header))::-webkit-scrollbar {
    width: 8px;
}

html:has(body.page-article):not(:has(.header))::-webkit-scrollbar-track {
    background: transparent;
}

html:has(body.page-article):not(:has(.header))::-webkit-scrollbar-thumb {
    background-color: #333333;
    border-radius: 4px;
}

html:has(body.page-article):not(:has(.header))::-webkit-scrollbar-thumb:hover {
    background-color: #4d4d4d;
}

/* --- Panel metrics — Figma 99264-55887 ----------------------------------

   Everything below is measurement rather than colour, and all of it is scoped
   on SHAPE, not width: `body.page-article:not(:has(.header))` is true only in
   the `?vs=true` panel render, whose body is `.content > .container > .article`
   and nothing else.

   IT USED TO BE WRAPPED IN `@media (max-width: 767px)`. That was written when
   this section styled the public article page too, so the media query was what
   kept Figma's 12px panel body off a 1170px desktop column. The public page has
   had its own section since — anchored on `.header:not(.header--compact) ~
   .content`, which the panel can never match — so the width test was doing no
   work the `:has()` test was not already doing, and it introduced a cliff: at
   768px and wider EVERY rule below switched off and Comm100's stock sizes took
   over, giving a 24px title bar, a 40px h1 and 20px body text. Measured across
   360-1170px, the break was exact and total at 768. Any Comm100 configuration
   that opens the panel at 768px or wider — or anyone opening a `?vs=true` URL
   in a desktop tab — got that. Scoped on shape, the panel is correct at every
   width.

   The one thing the media query did usefully was bound the line length, which
   `max-width` on `.content` now does directly. */

body.page-article:not(:has(.header)) {
    font-size: 12px;
}

/* Stock insets the page 50/100px and the article 40px either side, sized
   for a 1170px desktop column. Figma's panel is 16px all round. */
.page-article:not(:has(.header)) .content {
    padding: 0;
}

/* Figma's panel is 360px and Comm100 renders it between 360 and 490. The
   max-width is a bound, not a layout: it does nothing at any width the panel
   is actually served at, and only stops a `?vs=true` URL opened directly in a
   desktop tab from setting 12px text across 1400px. This is the one thing the
   old `@media (max-width: 767px)` wrapper was still earning its keep for. */
.page-article:not(:has(.header)) .container {
    margin: 0 auto;
    max-width: 520px;
    width: auto;
}

.page-article:not(:has(.header)) .article {
    padding: 0 16px 24px;
}

/* Figma draws the article title as fixed chrome across the top of the reader
   (`atoms/support/history/header`), OUTSIDE the scrolling viewport — hence
   sticky rather than just the first line. `{{title}}` already renders it, so
   nothing is invented: the bar is `.article__title`, bled to the panel edges
   with negative margins and given the frame's own 10px/14px padding. The
   background must be opaque so the article scrolls underneath.

   HEIGHT IS 52px AND HAS TO BE SET EXPLICITLY. Figma's frame is 10px padding
   around a 32px close button, so it measures 52 — but that button is the chat
   window's own chrome, drawn outside this iframe, and we render only the 24px
   text. Left to size itself the bar came out at 45 (10 + 24 + 10 + 1px rule),
   7px short, which is what made the header look tight against the title below
   it. `min-height` with `box-sizing: border-box` reproduces Figma's 52
   including the rule, since Figma strokes inside; the flex centring keeps the
   text on the same baseline the button would have given it. */
.page-article:not(:has(.header)) .article__title {
    align-items: center;
    background-color: #141414;
    box-sizing: border-box;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    margin: 0 -16px 16px;
    min-height: 52px;
    padding: 10px 14px;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Figma `content/regular/xs`. Stock is 20px/#666 with 20px of padding. */
.page-article:not(:has(.header)) .article__content {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    padding: 0;
}

/* `heading/title/md` — the "Maxxed Help Center: <topic>" line that opens
   every article body. */
.page-article:not(:has(.header)) .article__content h1 {
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
    margin: 0 0 20px;
}

/* `heading/h3/xs`, with the frame's 20px gap above and 8px to its own
   paragraphs below. */
.page-article:not(:has(.header)) .article__content h2 {
    font-size: 18px;
    font-weight: 600;
    line-height: 32px;
    margin: 20px 0 8px;
}

.page-article:not(:has(.header)) .article__content h3,
.page-article:not(:has(.header)) .article__content h4 {
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    margin: 16px 0 8px;
}

/* Figma's 12px gap between paragraphs within one section. */
.page-article:not(:has(.header)) .article__content p {
    margin: 0 0 12px;
}

.page-article:not(:has(.header)) .article__content p:last-child {
    margin-bottom: 0;
}

.page-article:not(:has(.header)) .article__content ul,
.page-article:not(:has(.header)) .article__content ol {
    margin: 0 0 12px;
    padding-left: 20px;
}

.page-article:not(:has(.header)) .article__content li {
    margin-bottom: 4px;
}

.page-article:not(:has(.header)) .article__content hr {
    margin: 20px 0;
}

/* The sticky bar is chrome for the reader only. Inside `.article__related`,
   "Related Articles" is an ordinary subheading, so it has to give back the
   bar's box as well as its background — without the `display` and
   `min-height` resets it inherits the 52px flex row and sits in a tall
   empty band. */
.page-article:not(:has(.header)) .article__related .article__title {
    background: none;
    display: block;
    margin: 0 0 8px;
    min-height: 0;
    padding: 0;
    position: static;
}

.page-article:not(:has(.header)) .article__related .article-list__title {
    padding-bottom: 8px;
}

.page-article:not(:has(.header)) .article__related .article-list__title a {
    font-size: 12px;
    line-height: 16px;
}

.page-article:not(:has(.header)) .article__feedback {
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
    height: auto;
    margin-top: 20px;
    padding: 12px 0;
}

.page-article:not(:has(.header)) .article__feedbackbtn {
    height: 24px;
    margin-left: 8px;
    padding: 0 10px;
    width: auto;
}

.page-article:not(:has(.header)) .article__feedbacklabel {
    float: none;
    margin-top: 8px;
}

/* ==========================================================================
   MAXXED — help centre home page
   ==========================================================================

   Mirrors Figma "03x-Maxxed-V1-DS" -> node 99602-28160, the
   https://help.maxxed.io/ landing page.

   HOW THIS IS SCOPED — no body class, no `:has()`
   -----------------------------------------------
   The article section above hangs off `body.page-article`, which only exists
   because `comm100-kb-article-template.html` puts it there. The home page is
   styled WITHOUT touching its template, so there is no class to hang off and
   the scope has to be read out of the stock markup.

   The discriminator is `.header--compact`. Comm100 emits

       <div class="header ">                  home page
       <div class="header header--compact">   category, article, search, 404

   — verified against /, /withdrawals, /search?keyword=… and a 404. So
   `.header:not(.header--compact)` matches the home page and nothing else, and
   because `.content` is its NEXT SIBLING, everything below the hero is reached
   with `~` rather than `:has()`. That keeps the whole section working in any
   browser that ships CSS3, and — more importantly — keeps these light-theme
   rules off the dark article page, which shares this one stylesheet.

   Every rule below therefore begins with one of exactly two prefixes:

       .header:not(.header--compact)              the hero band
       .header:not(.header--compact) ~ .content   everything under it

   THE PAGE IS LIGHT, THE ARTICLE PAGE IS DARK
   -------------------------------------------
   That is the design, not an oversight: Figma draws the home page on white
   with #141414 text, and only the hero band (and, in Figma, a footer) dark.
   The article theme above is dark because it doubles as the in-widget reader.

   WHAT THE STOCK MARKUP CANNOT EXPRESS
   ------------------------------------
   These parts of the Figma frame have no corresponding element in the home
   template's output and are therefore NOT implemented here. They need the
   Home design template edited in Comm100 admin, the same way the article page
   was:

     - the "Back to Maxxed.com" button in the header
     - the "N Topics" line under each card title (no count is rendered)
     - the whole footer (logo, category link row, social buttons)

   Two more are one-field copy edits in KB admin, not CSS:

     - the hero reads "Find answers in Maxxed Knowledge Base"; Figma says
       "How can we help?"
     - the search placeholder reads "Enter your question..."; Figma says
       "Search for topics"

   The type and colour for all of the above are already correct, so changing
   the copy is all that is needed.
   ------------------------------------------------------------------------ */

/* The `bg.pattern` band — the real Figma export, uploaded to Comm100.

   This REPLACES an earlier hand-built tile. That tile was reconstructed from
   the app's `public/icons/game-card-bg-pattern.svg` and repeated; it was the
   right motif at the wrong scale — the source file is the pattern shrunk into
   a 480x294 card, whereas Figma's band draws it many times larger, with the
   shapes overlapping and bleeding off the top edge. Repeating the small cell
   could never produce that. The exported band is the only faithful source.

   IT ALREADY CONTAINS THE GRADIENT. The export is a flat render of Figma's
   whole 1464x364 band, so the fade from watermark at the top to flat #141414
   at the bottom is baked into the pixels (they range #141414 to #191919).
   That is why neither user of this variable layers a `linear-gradient` over
   it any more — doing so darkens the band twice and flattens the motif out
   of existence.

   Sized with `cover`, not a fixed size or a repeat: the export is one fixed
   1464x364 band rather than a tile, so it has no seam to repeat on. `cover`
   guarantees it always fills whatever box it is given, and `center top` keeps
   the motif-heavy top edge in frame when the box is shorter than the band —
   which is exactly the footer's case at 232px. `background-color` stays as
   the base so the box is the right colour before the image arrives. */
:root {
    --mx-kb-pattern: url("https://file17.comm100download.com/fileservice/v1/files/at16UH9gThO4A0aRI97hiHB5iXQ11kYz0rANbxQUWFy9wtCP_rq0e6EOA0USi95xtBzzC2uHWkVoDbJTxnn1qwIuNGFIz6g_RC5Kph606IgvxZciy4NEFJrHRnHj-TKZy0zhDGH6uFUmid1xbzFWGj9JAC2vGH7zffnm1OPR3uGQ");
    /* The card panel's own `bg.pattern`, exported at the instance's exact
       301x140 (602x280 @2x). It is a DIFFERENT crop and scale from the hero
       band above, not the same image reused, which is why it is its own
       variable. Like the band it carries Figma's fade baked in — but NOT the
       green top bloom, verified by sampling: no pixel in it has g > r. That
       bloom therefore stays a CSS `box-shadow` on the panel. */
    --mx-kb-card-pattern: url("https://file17.comm100download.com/fileservice/v1/files/iTf2IDLhJJz-8ojWZRXzJ3jskxex0WN0laGwrah6zvrAQP0znX9Z7ASMEU_1q8nqtcSV9Xvd2BaaM_yoQhFhjQ89PcOyky9Ux-AHWgpZv7_bnxal4bGbAZB4eTFHsoylyRBc7_ZB6NdBb1SZhmh8ij2ZZAgdKWuiTnuE2nB0guYg");
    --mx-kb-chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 5 7 7-7 7'/></svg>");
}

/* --- Hero band — Figma 99602:28161 --------------------------------------
   Stock paints a 350px #3b99e0 slab with everything centred. The band here is
   the sum of Figma's own boxes: 16px above the 48px logo, a 124px gap, the
   40px title, 32px, the 48px search, then 40px of tail. */

.header:not(.header--compact) {
    background-color: #141414;
    /* No gradient layer here: the export already carries Figma's fade. */
    background-image: var(--mx-kb-pattern);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    color: #f5f5f5;
    font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    height: auto;
    padding: 16px 0 40px;
    text-align: left;
}

/* Figma's content column is 952px inside 256px gutters at a 1464px frame.
   `max-width` reproduces that at and above 1464px and degrades on its own
   below it, which the stock fixed 800/970/1170px steps do not. */
.header:not(.header--compact) .container,
.header:not(.header--compact) ~ .content .container {
    box-sizing: border-box;
    margin: 0 auto;
    /* 952px of content plus the 24px gutter either side, so the column is
       exactly Figma's 952 at and above 1464px. */
    max-width: 1000px;
    padding: 0 24px;
    width: 100%;
}

.header:not(.header--compact) .header__logo {
    height: 48px;
    /* Figma's 124px gap between the header row and the title, PLUS the 16px
       of bottom padding the header row carries around the 48px logo (the row
       is `py-[16px]`, 80px tall). There is no row element here — the logo is
       simply the title's previous sibling — so both land on this margin.
       16 + 48 + 140 + 40 + 32 + 48 + 40 = the band's 364px. */
    margin-bottom: 140px;
}

/* The logo links to the knowledge base home. The anchor is `inline-block`
   with `line-height: 0` so it wraps the image tightly: an inline `<a>` would
   sit on a text baseline and add a descender gap under the 48px image, which
   `.header__logo`'s own fixed height would then clip. No size is repeated
   here — the image rule below is still what sets it, at both breakpoints. */
.header .header__logo a {
    -webkit-tap-highlight-color: transparent;
    display: inline-block;
    line-height: 0;
}

.header:not(.header--compact) .header__logo img {
    display: block;
    height: 48px;
    width: auto;
}

/* `heading/h2/sm` — 32/40 bold. Stock is 35px/1 with a fixed 35px height,
   which clips descenders at this weight. */
.header:not(.header--compact) .header__title {
    color: #ffffff;
    font-family: inherit;
    font-size: 32px;
    font-weight: 700;
    height: auto;
    line-height: 40px;
    margin: 0 0 32px;
    padding-left: 4px;
}

/* Stock lifts the field with `translateY(30%)` to make it straddle the edge of
   the blue slab. Figma has it sitting inside the band, so the transform goes.
   `position: relative` is added because the magnifier is absolutely positioned
   and stock only sets a containing block for it under 768px. */
.header:not(.header--compact) .header__search {
    margin: 0;
    position: relative;
    transform: none;
}

.header:not(.header--compact) .header__searchinput {
    background-color: #222222;
    border: 0;
    border-radius: 20px;
    box-sizing: border-box;
    color: #e0e0e0;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    height: 48px;
    line-height: 24px;
    max-width: 100%;
    /* 12px inset + 24px icon + 8px gap = 44px of room on the left. */
    padding: 0 12px 0 44px;
    width: 100%;
}

.header:not(.header--compact) .header__searchinput:focus {
    background-color: #222222;
    border: 0;
    box-shadow: none;
    color: #f5f5f5;
    outline: none;
}

/* Stock's placeholder is `rgba(255,255,255,.7)`, picked against the blue hero.
   Figma draws the resting search string in `content/primary/alt` (#e0e0e0),
   but that is the typed-text colour — a placeholder that bright reads as real
   input, so this follows the article theme's #a3a3a3 instead. */
.header:not(.header--compact) .header__searchinput::-webkit-input-placeholder {
    color: #a3a3a3;
}

.header:not(.header--compact) .header__searchinput::placeholder {
    color: #a3a3a3;
}

/* Stock floats the magnifier to the RIGHT of the field. Figma leads with it. */
.header:not(.header--compact) .icon-search {
    color: #a3a3a3;
    left: 12px;
    line-height: 24px;
    position: absolute;
    right: auto;
    top: 12px;
}

/* `.iconfont:before` sets the glyph with the `font` shorthand at 16px; this
   wins on specificity, so only the size has to be restated. */
.header:not(.header--compact) .icon-search:before {
    font-size: 24px;
}

.header:not(.header--compact) .header__searchinput:focus + .iconfont {
    color: #5afa44;
}

/* --- The page below the hero -------------------------------------------- */

.header:not(.header--compact) ~ .content {
    /* #f5f5f5, NOT white. Sampled from both Figma frames — the home page's
       gutters, the strip between card rows and the card label areas are all
       (245,245,245), as is the article page's whole content area. An earlier
       version used #ffffff here and on the card, which kept their relationship
       right but made the whole page a shade too bright. */
    background-color: #f5f5f5;
    color: #141414;
    font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    padding: 48px 0 0px;
}

/* Comm100 renders a one-word breadcrumb ("Maxxed") that links nowhere. Figma
   has no breadcrumb on the home page. */
.header:not(.header--compact) ~ .content .breadcrumbs {
    display: none;
}

/* --- Category cards — Figma 99602:28173 ---------------------------------
   `.article-list` appears TWICE in this document: once here as the top-level
   category grid, and once nested inside `.category-list` as the trending list.
   The `>` chain is what keeps the two apart — do not relax it to a descendant
   combinator. */

.header:not(.header--compact) ~ .content > .container > .article-list {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
}

.header:not(.header--compact) ~ .content > .container > .article-list > .article-list__title {
    padding: 0;
}

/* The card is the `<a>` itself — there is no wrapper to hang it on, and the
   artwork panel is its `::before`. */
.header:not(.header--compact) ~ .content > .container > .article-list > .article-list__title > a {
    /* Same full-element tap flash as the search card — see the note there. */
    -webkit-tap-highlight-color: transparent;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
    box-sizing: border-box;
    color: #141414;
    display: block;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    overflow: hidden;
    padding: 14px 16px;
    text-align: center;
    text-decoration: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Figma defines no hover for these cards. Stock's `text-decoration: underline`
   has to go regardless, and a card-sized link with no affordance at all reads
   as dead, so this is the smallest substitute that is still on-palette. */
.header:not(.header--compact) ~ .content > .container > .article-list > .article-list__title > a:hover {
    border-color: #5afa44;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    text-decoration: none;
}

/* The 140px artwork panel.

   The negative margins are the card's own padding plus its 1px border
   (14+1 top, 16+1 sides), which bleeds the dark panel to the card edge so the
   light frame shows only around the label — as drawn. `overflow: hidden` on
   the card clips the panel's top corners to the 20px radius.

   TWO background layers: the illustration on top, the panel's `bg.pattern`
   underneath. They are separate because the pattern is shared by all nine
   cards and the illustration is not.

   The illustration is sized `auto 120px` — Figma's icon box. An earlier
   version said 140px on the theory that the export included the panel's
   margin; it does not, and a sweep of candidate sizes composited against the
   Figma card confirms 120 (mean abs delta 4.8, against 12.7 at 140).

   This only works because the illustrations are keyed to TRANSPARENT. As
   first exported they were opaque: Figma composites the parent backdrop into
   a child node's render, so each one carried its own flat #141414 square,
   which sat on top of the pattern as a visible 120px hole. They are now
   alpha-keyed — the backdrop was flat (34 near-identical neutral values, no
   pattern in it), so it keys out cleanly on distance-from-backdrop rather
   than luminance. Luminance alone would have eaten the dark navy in the
   `rewards` illustration (8,31,45). Re-exporting from Figma will reproduce
   the opaque originals and reintroduce the hole. */
.header:not(.header--compact) ~ .content > .container > .article-list > .article-list__title > a::before {
    background-color: #141414;
    background-image: var(--mx-kb-art, none), var(--mx-kb-card-pattern);
    background-position: center, center top;
    background-repeat: no-repeat, no-repeat;
    background-size: auto 120px, cover;
    border-bottom: 1px solid #e0e0e0;
    /* Figma's `inset 0 20px 56px -56px #5afa44` — a green bloom off the top
       edge, nearly subliminal at this spread. */
    box-shadow: inset 0 20px 56px -56px #5afa44;
    content: "";
    display: block;
    height: 140px;
    margin: -15px -17px 14px;
}

/* --- Card artwork -------------------------------------------------------
   Exported from Figma at 3x into `public/help-center/` in the Maxxed app repo
   and served from the main site, per the hosting decision. Each file is the
   category's `icons/loyalty/*` node with the card's #141414 backdrop and
   watermark already rendered into it.

   Keyed on the article SLUG, which is the only per-category handle the stock
   markup offers. A slug that changes simply stops matching and the card falls
   back to a plain #141414 panel — it does not break the layout. This is why
   the artwork is mapped this way and the "N Topics" counts are not: a slug is
   stable and fails visibly-but-safely, whereas a hardcoded count would go
   silently wrong the moment an article is added.

   !! `https://maxxed.io` DOES NOT SERVE THIS APP YET !!

   At the time of writing maxxed.io returns a different site, and
   staging/dev.maxxed.io are behind HTTP auth, so these nine URLs 404 and every
   card renders as the flat dark panel. The moment the Next app is deployed to
   maxxed.io the artwork appears with no change to this file. To point them
   somewhere else in the meantime, rewrite the host in these nine lines and
   nothing else.

   `vip-partners` exists in the knowledge base but not in the Figma frame, so
   it has no illustration and is expected to fall through to the default. */

.header:not(.header--compact) ~ .content > .container > .article-list > .article-list__title > a[href$="/withdrawals"] {
    --mx-kb-art: url("https://file17.comm100download.com/fileservice/v1/files/3xjuJjgFM44JynfI0BnOcxUhU5BIHmAiTCzb2r08yOiOXVuOuwss06SzPwkzYOO_of9Cx5jeFyounXC8be3RIAEKj56Pd4LjPZZyEb9pyQhRC0CUwTmie9ddHn9zUkALAhkMaARZRBQQhv0X2U36praklOolT2m5BmXpMUDbJh-w");
}

.header:not(.header--compact) ~ .content > .container > .article-list > .article-list__title > a[href$="/verification"] {
    --mx-kb-art: url("https://file17.comm100download.com/fileservice/v1/files/L1SROO4iDk2W2jfH-dVeKetx3-bYCVMNO8CBGjQj-b647IuILACbK848SeeqXJOuUgS594Yugxg3B6KHzE7dMwgoYG0dr8UhkfOzFaSc4-hr_BrsAQ79Mxvf-mJdfAQFF6URB5HgjS7PDjgDvDXAwopX1ImdzXJ894kzSlHPa2uQ");
}

.header:not(.header--compact) ~ .content > .container > .article-list > .article-list__title > a[href$="/vip-partners"] {
    --mx-kb-art: url("https://file17.comm100download.com/fileservice/v1/files/L1SROO4iDk2W2jfH-dVeKetx3-bYCVMNO8CBGjQj-b647IuILACbK848SeeqXJOuUgS594Yugxg3B6KHzE7dMwgoYG0dr8UhkfOzFaSc4-hr_BrsAQ79Mxvf-mJdfAQFF6URB5HgjS7PDjgDvDXAwopX1ImdzXJ894kzSlHPa2uQ");
}

.header:not(.header--compact) ~ .content > .container > .article-list > .article-list__title > a[href$="/sportsbook"] {
    --mx-kb-art: url("https://file17.comm100download.com/fileservice/v1/files/13At02Mcq-vQA3EVG8BLdhmSoTwJ95k0fjiXdwU79s_bMG9R-313TSgsWDKsHHEgXr7bM8WFD1LIiB1fU3VAnggmDmuW8Xzz252FDxoSU3YnEXoh08rHYZiZApIChCjeqQkF6_whKCz2_OKTRBzn8DBEfkFI8H2Lx5sGtgXhQUSw");
}

.header:not(.header--compact) ~ .content > .container > .article-list > .article-list__title > a[href$="/rewards"] {
    --mx-kb-art: url("https://file17.comm100download.com/fileservice/v1/files/rhulfpc5Ql1I29pWulhIXEIqnywInyGGS1rK0aRbMZJMo794Z4rfkfGuhxMcjnXZnj3xQkHFzm5vg0VwXNwj6gg5anA9qjykp9xuUrOOJprAIs0QVQ__fCtqBKwczgbVEj_c0AuJO1vI0SaUjjGGywt5BRI9bnRuNzVQ5nxSmhnA");
}

.header:not(.header--compact) ~ .content > .container > .article-list > .article-list__title > a[href$="/originals-provably-fair"] {
    --mx-kb-art: url("https://file17.comm100download.com/fileservice/v1/files/NuFUzYpvF8b4Wh5yj4ZQS9Pho1p-POdboHDg97FzWwmmxpus1XHTaHV8YiMrRlqvKXR-3ZAx9DULQVPaHjIJqg6Ux5vLwOWY8QSKWPBpS4bvrXujd9jiqHSHiFW34PifI7UWAGfHUeAQ4SYdSH3exJcdzdf80RP2lMckkHn3I8Og");
}

.header:not(.header--compact) ~ .content > .container > .article-list > .article-list__title > a[href$="/originals-deep"] {
    --mx-kb-art: url("https://file17.comm100download.com/fileservice/v1/files/f-tho0uSYcJWhVEdJAzrVYi3mF8f4fuABhQVAyrIfN5RLLW2W7LmR3X6R3JgckUnD7mn9j11egUQGptIQG-yaQPhGHMMGEMnAT-PBxHTeznMmLq6wGvaUpsv0kvDSZiumTXPY1ouPmvLwrQdrj5WoPkfB-AoQFxKQr8QqBIBnCZg");
}

.header:not(.header--compact) ~ .content > .container > .article-list > .article-list__title > a[href$="/deposits"] {
    --mx-kb-art: url("https://file17.comm100download.com/fileservice/v1/files/z6mU6TbBbglQNccYVVdQH6paIi0idBe9zU_7lW02h6WmpHiXWlQQ_CaWhZxzb0mGakAyAnCcx6ZQgGklZk_FHAKlbAkdlog6V7xWHmFTvPWO6i27o2X0BYyMLdDlgZgoTR6e8Q8Gu9T7uOh_OyXozqzCyjFHDfNGSZI_KhJanozA");
}

.header:not(.header--compact) ~ .content > .container > .article-list > .article-list__title > a[href$="/bonuses"] {
    --mx-kb-art: url("https://file17.comm100download.com/fileservice/v1/files/zYjw5LueXYW-5D9sBb0aouUAR5306Ba216R2uKEMx8YVFNhd1dlMLE6KutOwDbWynWzRgqRklmOAjGT1fUyxkgiJTxyHmyZVxJdlLcoyUKoH2w56k33kCD6nXvj7J5I_2g2rzI3bS51HqhZeSkY7G5DUqQh8aHY3JDQkhGr0z5zQ");
}

.header:not(.header--compact) ~ .content > .container > .article-list > .article-list__title > a[href$="/account-security"] {
    --mx-kb-art: url("https://file17.comm100download.com/fileservice/v1/files/E3TcdhppLOvglEYo1C5sJR-yL2Havdl1Umx3LKUt8L_4KpnhA129xvu1Mill5VB79YjihCyvnkgBlYSGqBG5OAZB1JB-2Hrk9lZs85C9Y29sASElXFewjt9OM6dHaf1zhL5srrQwC5FI30CcLjCZS67Sb6GaVQSbfweSZ8YZldfw");
}

/* --- Trending Topics — Figma 99602:28182 --------------------------------
   Figma's "Trending Topics" heading and its bordered list of four rows map
   onto Comm100's "Popular Articles" block: `.category-list__item__header`
   becomes the heading, `.category-list__item__content` becomes the card.

   The heading text is Comm100's own label, set in KB admin — rename it there
   to read "Trending Topics". */

.header:not(.header--compact) ~ .content .category-list {
    border: 0;
    margin: 48px 0 80px 0;
    padding: 0;
}

.header:not(.header--compact) ~ .content .category-list__item {
    border-bottom: 0;
}

/* Comm100 ships this block collapsed (`.collapse { display: none }`) behind an
   `onclick="showHide()"` toggle. Figma has it open and offers no affordance to
   close it, so it is forced open and the chevron hidden. `!important` also
   beats the inline `style` the toggle would write, so a stray click cannot
   collapse it. */
.header:not(.header--compact) ~ .content .category-list__item__content {
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    display: block !important;
    padding: 12px;
}

.header:not(.header--compact) ~ .content .category-list__item__header {
    cursor: default;
    margin: 0 0 32px;
    padding: 0 0 0 4px;
}

/* The folder glyph, the article count pill and the fold/unfold chevron are all
   Comm100 chrome with no counterpart in the design. */
.header:not(.header--compact) ~ .content .category-list .icon-folder,
.header:not(.header--compact) ~ .content .category-list .icon-fold,
.header:not(.header--compact) ~ .content .category-list .icon-unfold,
.header:not(.header--compact) ~ .content .category-list__item__artilceNumber {
    display: none;
}

/* `heading/h2/xs` — 28/40 bold. */
.header:not(.header--compact) ~ .content .category-list__item__name {
    color: #141414;
    display: block;
    font-family: inherit;
    font-size: 28px;
    font-weight: 700;
    line-height: 40px;
    padding: 0;
}

.header:not(.header--compact) ~ .content .category-list .article-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
}

/* Stock adds 10px under every row and 20px under the last; the 4px flex gap
   above is the whole spacing story here. */
.header:not(.header--compact) ~ .content .category-list .article-list__title,
.header:not(.header--compact) ~ .content .category-list .article-list .article-list__title:last-child {
    padding: 0;
}

/* `help_center/article` — a 56px row, 14/24 medium, chevron hard right. */
.header:not(.header--compact) ~ .content .category-list .article-list__title > a {
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    border-radius: 12px;
    /* Figma's 56px row is the outer height, so the 16px padding has to count
       inwards — stock sets no `box-sizing` on these. */
    box-sizing: border-box;
    color: #141414;
    display: flex;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    gap: 12px;
    line-height: 24px;
    min-height: 56px;
    padding: 16px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.header:not(.header--compact) ~ .content .category-list .article-list__title > a:hover {
    background-color: #ebebeb;
    text-decoration: none;
}

.header:not(.header--compact) ~ .content .category-list .article-list__title > a::after {
    background-image: var(--mx-kb-chevron);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    content: "";
    flex: none;
    height: 24px;
    margin-left: auto;
    width: 24px;
}

/* --- Responsive ---------------------------------------------------------
   Figma only draws the 1464px frame. The grid steps down at the two widths
   where a 3-up row of 286px cards stops fitting, and the hero's 124px gap —
   which is generous even on desktop — closes up with it. */

@media (max-width: 1023px) {
    .header:not(.header--compact) ~ .content > .container > .article-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .header:not(.header--compact) .header__logo {
        margin-bottom: 72px;
    }
}

/* --- Mobile — Figma `mob/article` 99646-287862 --------------------------
   The 360px frame re-specifies the hero rather than just shrinking it: a
   90x36 logo instead of 120x48, a 24/32 SEMIBOLD title (the desktop one is
   32/40 bold), 16px between title and search instead of 32, and a 24px tail.
   Band total: 16 + 36 + 16 (the row) + 48 + 32 + 16 + 48 + 24 = 236px. */
@media (max-width: 767px) {
    .header:not(.header--compact) {
        padding-bottom: 24px;
    }

    .header:not(.header--compact) .container,
    .header:not(.header--compact) ~ .content .container {
        padding: 0 16px;
    }

    .header:not(.header--compact) .header__logo {
        height: 36px;
        /* 16px of row tail + Figma's 48px gap. */
        margin-bottom: 64px;
    }

    .header:not(.header--compact) .header__logo img {
        height: 36px;
    }

    .header:not(.header--compact) .header__title {
        font-size: 24px;
        /* `heading/h3/lg` — 600 here, against the desktop band's 700. */
        font-weight: 600;
        line-height: 32px;
        margin-bottom: 16px;
    }

    /* Stock's mobile rule insets the field by 30px either side and re-centres
       it; the container already owns the gutter here. */
    .header:not(.header--compact) .header__search {
        margin: 0;
        width: 100%;
    }

    .header:not(.header--compact) .header__searchinput {
        max-width: 100%;
    }

    .header:not(.header--compact) ~ .content {
        padding: 32px 0 48px;
    }

    .header:not(.header--compact) ~ .content .category-list {
        margin-top: 48px;
    }

    .header:not(.header--compact) ~ .content .category-list__item__header {
        margin-bottom: 24px;
    }

    .header:not(.header--compact) ~ .content .category-list__item__name {
        font-size: 22px;
        line-height: 32px;
    }
}

@media (max-width: 599px) {
    .header:not(.header--compact) ~ .content > .container > .article-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   MAXXED — site chrome: header back-link + footer
   ==========================================================================

   Figma 99602-28160 draws two pieces of chrome that the stock Comm100
   templates emit NO markup for at all:

     - "Back to Maxxed.com" in the header row (node 99602:28166)
     - the whole footer: brand mark, category links, socials (node 99627:31699)

   Unlike everything above, these therefore CANNOT be pure CSS — they need the
   elements added to each page's design template in Comm100 admin. The markup
   is in `comm100-kb-search-template.html`; paste the same two blocks into the
   Home, Category, Article and 404 templates to get them site-wide.

   DELIBERATELY NOT SCOPED TO A PAGE. The hero and card rules above are fenced
   behind `.header:not(.header--compact)` because they would wreck the other
   pages. These two are the opposite: they are meant to appear on every page,
   so they hang off their own class names (`.header__backlink`, `.site-footer`)
   and appear only where the template actually emits them. Nothing here can
   fire on a page whose template was not edited.

   The footer is dark on every page — including the LIGHT home page — because
   that is how Figma draws it. It is self-contained, so it does not care which
   theme the page above it is using.
   ------------------------------------------------------------------------ */

/* --- Header back-link — Figma 99602:28166 -------------------------------
   Figma puts this opposite the logo on the header row. There is no row
   element in the stock markup (the logo, title and search are flat siblings),
   so it is positioned against `.container` instead of laid out in flow —
   which also keeps it out of the way of the centred stock layout on the
   pages that still use it. */

.header .container {
    position: relative;
}

.header__backlink {
    border-radius: 12px;
    color: #f5f5f5;
    font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    padding: 4px 12px;
    position: absolute;
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
    z-index: 2;
}

.header__backlink:hover {
    color: #5afa44;
    text-decoration: none;
}

/* The two header variants put their content at different heights, so the
   link is aligned to each rather than to a shared offset. Home: the 32px
   link centred on the 80px logo row that starts at the header's 16px of top
   padding. Compact: centred on the stock 80px `.header__logo`, whose
   container starts 45px down. `right` matches each variant's own gutter —
   24px for the home column, the stock 40px logo inset otherwise. */
.header:not(.header--compact) .header__backlink {
    right: 24px;
    top: 8px;
}

.header--compact .header__backlink {
    right: 40px;
    top: 24px;
}

/* --- Sticky footer ------------------------------------------------------
   When a page has little content — a search with two hits, a short article —
   the footer would otherwise sit wherever the content ends, with the body's
   background showing below it to the bottom of the window. This pins it to
   the bottom of the viewport on short pages while leaving it to scroll
   normally on long ones.

   Scoped with `:has(> .site-footer)` so it only applies to templates that
   actually emit the footer. The Category and 404 templates have not been
   edited yet, and turning their `<body>` into a flex column would change how
   the stock `.poweredby` float behaves for no benefit.

   `100dvh` first, `100vh` as the fallback line above it: on mobile browsers
   `100vh` is the viewport WITHOUT the retracting toolbar, so a `100vh` page
   is always a little taller than the screen and shows a scrollbar even when
   the content fits. `dvh` tracks the toolbar. Browsers that do not know `dvh`
   simply keep the `vh` line.

   `flex: 1 0 auto` on the content — grow to fill, never shrink below its own
   height, which is what keeps long pages scrolling instead of compressing. */
body:has(> .site-footer) {
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

body:has(> .site-footer) > .content {
    flex: 1 0 auto;
}

body:has(> .site-footer) > .header,
body:has(> .site-footer) > .site-footer {
    flex: 0 0 auto;
}

/* The belt to the braces above. `.content { flex: 1 0 auto }` only pins the
   footer when a `.content` element EXISTS — and Comm100's stock 404 template
   is the one that puts `.container` straight into `<body>` with no `.content`
   around it, so on that page nothing grew and the footer floated up to wherever
   the message ended.

   `margin-top: auto` on the last flex item absorbs all the free space by
   itself, whatever is above it, so the footer stays pinned even on a template
   that was pasted in without the wrapper. With `.content` present this is a
   no-op — the content has already taken the space. */
body:has(> .site-footer) > .site-footer {
    margin-top: auto;
}

/* --- Footer — Figma 99627:31699 -----------------------------------------
   40 + 40 (mark) + 32 + 24 (nav) + 32 + 32 (socials) + 32 = the frame's 232px.
   Shares the hero's `bg.pattern` band, cropped to the footer's height. */

.site-footer {
    background-color: #141414;
    background-image: var(--mx-kb-pattern);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    color: #a3a3a3;
    font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    padding: 40px 0 32px;
}

.site-footer .container {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 0 auto;
    max-width: 1000px;
    padding: 0 24px;
    width: 100%;
}

/* The brand mark, inlined for the same reason as the watermark — the footer
   must not depend on an external host to render. It is the app's own
   `public/maxxed.svg` with the `#67FA53` accent recoloured to `#F5F5F5`,
   because Figma's footer mark samples as white-on-#141414 with no green. */
.site-footer__logo {
    background-image: url("data:image/svg+xml,<svg width='39' height='32' viewBox='0 0 39 32' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(%23clip0_86537_75451)'> <mask id='mask0_86537_75451' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='39' height='32'> <path d='M38.32 0H0V31.8752H38.32V0Z' fill='white'/> </mask> <g mask='url(%23mask0_86537_75451)'> <path d='M22.3168 6.4672L38.32 4.1888L38.1824 28.5248L14.736 31.8752L15.952 26.0736L0 28.5856V3.0912L23.488 0L22.3168 6.4672Z' fill='%23222222'/> <path d='M9.43082 7.65445L10.7236 11.0145L12.2084 7.24805L16.5188 6.62085L13.2644 13.5073L16.6884 19.8369L12.378 20.4641L10.8708 16.6945L9.29002 20.9153L5.05322 21.5329L8.40362 14.2145L5.12362 8.27845L9.43402 7.65125L9.43082 7.65445Z' fill='%23F5F5F5'/> <path d='M10.8521 13.9167L13.1753 20.3551L25.6169 18.5407L23.6713 12.0479L12.7881 13.6351L10.8521 13.9167Z' fill='%23F5F5F5'/> <path d='M26.4733 11.632L27.7661 14.992L29.2509 11.2256L33.5613 10.5984L30.3069 17.4848L33.7309 23.8144L29.4205 24.4416L27.9133 20.672L26.3325 24.8928L22.0957 25.5104L25.4461 18.192L22.1661 12.256L26.4765 11.6288L26.4733 11.632Z' fill='%23F5F5F5'/> </g> </g> <defs> <clipPath id='clip0_86537_75451'> <rect width='38.4' height='32' fill='white'/> </clipPath> </defs> </svg>");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    flex: none;
    height: 40px;
    width: 49px;
}

.site-footer__nav {
    column-gap: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
}

.site-footer__nav a {
    color: #a3a3a3;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.site-footer__nav a:hover {
    color: #f5f5f5;
    text-decoration: none;
}

.site-footer__social {
    display: flex;
    gap: 8px;
}

/* 32px button, 20px glyph — Figma's `p-[6px]` around a 20px icon. */
.site-footer__social a {
    background-color: #222222;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    border-radius: 12px;
    display: block;
    height: 32px;
    transition: background-color 0.2s ease;
    width: 32px;
}

.site-footer__social a:hover {
    background-color: #333333;
}

.site-footer__social a[data-social="telegram"] {
    background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M12 0C18.6274 0 24 5.37258 24 12C24 18.6275 18.6275 24 12 24C5.37258 24 0 18.6274 0 12C4.07166e-05 5.3726 5.3726 4.07179e-05 12 0ZM16.8975 7.21484C16.4489 7.23354 15.7567 7.47622 12.4297 8.85938C11.2521 9.34536 8.91527 10.3364 5.41992 11.8691C4.85943 12.0934 4.56083 12.3179 4.52344 12.5234C4.46737 12.9346 5.06498 13.0657 5.8125 13.3086C6.42912 13.5141 7.25161 13.7567 7.68164 13.7568C8.07407 13.7568 8.5044 13.6078 8.99023 13.2715C12.2594 11.0671 13.9418 9.94476 14.0557 9.9248C14.1304 9.90611 14.2241 9.88826 14.2988 9.94434C14.3734 10.0004 14.3555 10.1119 14.3555 10.1494C14.2994 10.4109 11.2189 13.1926 11.0469 13.3828C10.374 14.0744 9.60758 14.505 10.7852 15.29C11.813 15.9628 12.4114 16.3925 13.458 17.084C14.1309 17.5139 14.6727 18.0375 15.3643 17.9814C15.682 17.9441 16.0183 17.645 16.1865 16.748C16.5977 14.6359 17.3648 10.0187 17.5518 8.13086C17.5704 7.96264 17.5509 7.75653 17.5322 7.66309C17.5135 7.56966 17.4762 7.43898 17.3643 7.3457C17.2149 7.23379 16.9911 7.21489 16.8975 7.21484Z' fill='white'/> </svg>");
}

.site-footer__social a[data-social="x"] {
    background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M17.5764 3.05945H20.5963L14.0002 10.649L21.7884 20.9406H15.6691L10.9008 14.702L5.41728 20.9406H2.39736L9.47033 12.8345L2 3.05945H8.27825L12.6095 8.7814L17.5764 3.05945ZM16.5036 19.1127H18.1725L7.36433 4.76809H5.53648L16.5036 19.1127Z' fill='white'/> </svg>");
}

.site-footer__social a[data-social="discord"] {
    background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M20.2407 4.26675C18.694 3.53987 17.0402 3.01161 15.3111 2.71082C15.0988 3.09643 14.8507 3.61508 14.6797 4.02767C12.8417 3.75003 11.0206 3.75003 9.21636 4.02767C9.04536 3.61508 8.79164 3.09643 8.5774 2.71082C6.8465 3.01161 5.19078 3.54181 3.64406 4.2706C0.524322 9.0058 -0.321389 13.6234 0.101468 18.1754C2.17064 19.7275 4.17593 20.6703 6.14737 21.2872C6.63412 20.6144 7.06825 19.8991 7.44224 19.1452C6.72996 18.8734 6.04776 18.5379 5.40316 18.1484C5.57417 18.0212 5.74144 17.8881 5.90305 17.7512C9.83466 19.5983 14.1065 19.5983 17.9911 17.7512C18.1546 17.8881 18.3219 18.0212 18.491 18.1484C17.8445 18.5398 17.1604 18.8753 16.4482 19.1472C16.8221 19.8991 17.2544 20.6163 17.743 21.2892C19.7164 20.6722 21.7235 19.7294 23.7927 18.1754C24.2888 12.8985 22.9451 8.32328 20.2407 4.26675ZM7.97786 15.376C6.79763 15.376 5.82975 14.2693 5.82975 12.9216C5.82975 11.5739 6.77697 10.4653 7.97786 10.4653C9.1788 10.4653 10.1466 11.572 10.126 12.9216C10.1278 14.2693 9.1788 15.376 7.97786 15.376ZM15.9163 15.376C14.7361 15.376 13.7682 14.2693 13.7682 12.9216C13.7682 11.5739 14.7154 10.4653 15.9163 10.4653C17.1172 10.4653 18.0851 11.572 18.0644 12.9216C18.0644 14.2693 17.1172 15.376 15.9163 15.376Z' fill='white'/> </svg>");
}

@media (max-width: 767px) {
    /* `controls/input/sm` — 12/16 in a 24px button, against 14/24 in a 32px
       one on desktop. The 24px height is what centres it on the 68px row. */
    .header__backlink {
        font-size: 12px;
        line-height: 16px;
        padding: 4px 12px;
    }

    .header:not(.header--compact) .header__backlink {
        right: 16px;
        /* (68 - 24) / 2 = 22 from the band top, less the header's 16px of top
           padding, which is where `.container` starts. */
        top: 6px;
    }

    /* Figma's mobile footer is 244px: 24 + 36 (mark) + 24 + 80 (three link
       rows) + 24 + 32 (socials) + 24. */
    .site-footer {
        padding: 24px 0;
    }

    .site-footer__logo {
        height: 36px;
        width: 44px;
    }

    .site-footer .container {
        gap: 24px;
        padding: 0 16px;
    }

    /* Nine links do not fit one line on a phone; Figma wraps them to three
       centred rows on a 16px grid both ways. */
    .site-footer__nav {
        column-gap: 16px;
        row-gap: 16px;
    }

    .site-footer__nav a {
        font-size: 12px;
        line-height: 16px;
    }
}

/* ==========================================================================
   MAXXED — public article page
   ==========================================================================

   Mirrors Figma "03x-Maxxed-V1-DS" -> node 99618-26276 (`web/topic`), the
   https://help.maxxed.io/<slug> reading page.

   It is the HOME PAGE'S HERO AND FOOTER around an article. That is the whole
   idea of the design: the same 364px band with logo, back-link, "How can we
   help?" and search, then light content, then the same footer. So
   `comm100-kb-article-template.html` drops `header--compact` and the hero,
   card-column and footer rules already written above simply apply — the only
   new work is the article's own typography.

   SCOPING — why every rule below is this verbose
   ----------------------------------------------
   `body.page-article .header:not(.header--compact) ~ .content`

   All three parts earn their place:

     `body.page-article`            separates this from the HOME page, which
                                    shares the identical hero and content
                                    prefix. Without it the breadcrumb rule
                                    below would un-hide the home breadcrumb.
     `.header:not(.header--compact)` separates it from the WIDGET PANEL, whose
                                    `?vs=true` render has no `.header` and
                                    which must stay on the dark theme above.
     `~ .content`                   the sibling hop the whole file uses.

   Drop any one and two pages collide. The specificity is also deliberate:
   (0,5,1) beats the home page's `.breadcrumbs` hide at (0,3,0) and the dark
   theme's `.article__title` at (0,2,0), so nothing here needs `!important`.

   WHAT FIGMA HAS AND COMM100 DOES NOT
   -----------------------------------
   - "All Collections > Withdrawal > Can I delete my account?" — Comm100's
     `{{breadcrumbs}}` renders ONE level on this knowledge base (`<a>Maxxed</a>`
     and nothing else), because the articles sit at the root with no parent
     category. The chevrons and the greyed current page are styled here and
     will appear by themselves if the KB is ever restructured into categories;
     they cannot be invented in CSS today.
   - "Updated over 3 weeks ago" under the title. The article template exposes
     no last-modified variable, so there is nothing to render.
   ------------------------------------------------------------------------ */

/* Figma's band is 372px here against the home page's 364: the same boxes with
   48px of tail instead of 40. */
body.page-article .header:not(.header--compact) {
    padding-bottom: 48px;
}

body.page-article .header:not(.header--compact) ~ .content {
    padding: 40px 0 80px;
}

/* The home page hides `.breadcrumbs` because Figma's home has none. This page
   does have them, so they come back — which is the single reason this section
   needs `body.page-article` in its scope at all. */
body.page-article .header:not(.header--compact) ~ .content .breadcrumbs {
    color: #a3a3a3;
    display: block;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    margin: 0 0 48px;
    padding: 8px 0;
}

body.page-article .header:not(.header--compact) ~ .content .breadcrumbs a {
    color: #141414;
    text-decoration: none;
}

body.page-article .header:not(.header--compact) ~ .content .breadcrumbs a:hover {
    text-decoration: underline;
}

/* Figma separates each crumb with a 14px chevron. Comm100 emits the trail as
   a flat run of `<a>`s, so the separator is generated before every crumb
   after the first. With a single-level trail this never fires, which is why
   the page looks right today and will still look right with more levels. */
body.page-article .header:not(.header--compact) ~ .content .breadcrumbs a + a::before {
    background-image: var(--mx-kb-chevron);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    content: "";
    display: inline-block;
    height: 14px;
    margin: 0 4px;
    vertical-align: -2px;
    width: 14px;
}

body.page-article .header:not(.header--compact) ~ .content .article {
    padding: 0;
}

/* `heading/h2/xs` — 28/40 bold. Stock gives it a 40px bottom pad and a #ddd
   rule; Figma has neither, just 48px of air before the body. */
body.page-article .header:not(.header--compact) ~ .content .article__title {
    border-bottom: 0;
    color: #141414;
    font-family: inherit;
    font-size: 28px;
    font-weight: 700;
    line-height: 40px;
    padding: 0 0 48px;
}

/* `content/regular/md` — 16/24. Stock is 20px #666 in a light serif stack. */
body.page-article .header:not(.header--compact) ~ .content .article__content {
    color: #141414;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding: 0;
}

/* `heading/h3/sm` — 20/32 semibold, pure black in the design (not #141414),
   with Figma's 48px between sections and 16px down to its own body. */
body.page-article .header:not(.header--compact) ~ .content .article__content h2,
body.page-article .header:not(.header--compact) ~ .content .article__content h3 {
    color: #000000;
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
    margin: 48px 0 16px;
}

/* Every article in this knowledge base opens its BODY with an `<h1>` that
   repeats the title ("Maxxed Help Center: Bonuses"). Figma has no such line —
   the title above is the only one. It is styled down to a section heading
   rather than hidden, because hiding content that authors typed is worse than
   showing it small; the real fix is to delete that line from the articles. */
body.page-article .header:not(.header--compact) ~ .content .article__content h1 {
    color: #000000;
    font-family: inherit;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    margin: 0 0 16px;
}

body.page-article .header:not(.header--compact) ~ .content .article__content h1:first-child,
body.page-article .header:not(.header--compact) ~ .content .article__content h2:first-child,
body.page-article .header:not(.header--compact) ~ .content .article__content h3:first-child {
    margin-top: 0;
}

body.page-article .header:not(.header--compact) ~ .content .article__content p {
    margin: 0 0 16px;
}

body.page-article .header:not(.header--compact) ~ .content .article__content p:last-child {
    margin-bottom: 0;
}

body.page-article .header:not(.header--compact) ~ .content .article__content ul,
body.page-article .header:not(.header--compact) ~ .content .article__content ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

body.page-article .header:not(.header--compact) ~ .content .article__content li {
    margin-bottom: 8px;
}

body.page-article .header:not(.header--compact) ~ .content .article__content strong,
body.page-article .header:not(.header--compact) ~ .content .article__content b {
    font-weight: 600;
}

/* Body links stay dark and underlined rather than taking the brand green:
   #5afa44 on #f5f5f5 is roughly 1.7:1, nowhere near readable. The underline
   is what marks them. */
body.page-article .header:not(.header--compact) ~ .content .article__content a,
body.page-article .header:not(.header--compact) ~ .content .article__content a[href] {
    color: #141414;
    text-decoration: underline;
}

body.page-article .header:not(.header--compact) ~ .content .article__content a:hover {
    color: #000000;
}

/* Comm100's editor wraps every heading in an empty `<a>` anchor target. */
body.page-article .header:not(.header--compact) ~ .content .article__content h1 > a:empty,
body.page-article .header:not(.header--compact) ~ .content .article__content h2 > a:empty,
body.page-article .header:not(.header--compact) ~ .content .article__content h3 > a:empty {
    display: none;
}

body.page-article .header:not(.header--compact) ~ .content .article__content blockquote {
    background-color: #ebebeb;
    border-left: 2px solid #e0e0e0;
    border-radius: 0 12px 12px 0;
    margin: 0 0 16px;
    padding: 12px 16px;
}

body.page-article .header:not(.header--compact) ~ .content .article__content code,
body.page-article .header:not(.header--compact) ~ .content .article__content pre {
    background-color: #ebebeb;
    border-radius: 4px;
    color: #141414;
}

body.page-article .header:not(.header--compact) ~ .content .article__content pre {
    overflow-x: auto;
    padding: 12px 16px;
}

body.page-article .header:not(.header--compact) ~ .content .article__content hr {
    border: 0;
    border-top: 1px solid #e0e0e0;
    margin: 32px 0;
}

body.page-article .header:not(.header--compact) ~ .content .article__content img {
    border-radius: 12px;
}

body.page-article .header:not(.header--compact) ~ .content .article__content.fr-view table td,
body.page-article .header:not(.header--compact) ~ .content .article__content.fr-view table th {
    border-color: #e0e0e0;
    padding: 8px 12px;
}

body.page-article .header:not(.header--compact) ~ .content .article__content.fr-view table th {
    background: #ebebeb;
    color: #141414;
}

body.page-article .header:not(.header--compact) ~ .content .article__content.fr-view table.fr-alternate-rows tbody tr:nth-child(2n) {
    background: #ebebeb;
}

/* --- Related articles + feedback ---------------------------------------
   Neither is in the Figma frame, but both are switched on per knowledge base
   in Comm100 admin, so they are styled to belong rather than left as the
   stock blue-on-white. */

body.page-article .header:not(.header--compact) ~ .content .article__related {
    border-top: 1px solid #e0e0e0;
    margin-top: 48px;
    padding-top: 32px;
}

body.page-article .header:not(.header--compact) ~ .content .article__related .article__title {
    font-size: 20px;
    line-height: 32px;
    padding: 0 0 16px;
}

body.page-article .header:not(.header--compact) ~ .content .article__related .article-list__title {
    padding-bottom: 8px;
}

body.page-article .header:not(.header--compact) ~ .content .article__related .article-list__title a {
    color: #141414;
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    text-decoration: underline;
}

body.page-article .header:not(.header--compact) ~ .content .article__feedback {
    border-bottom: 0;
    border-top: 1px solid #e0e0e0;
    color: #a3a3a3;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    height: auto;
    margin-top: 48px;
    padding: 24px 0;
}

body.page-article .header:not(.header--compact) ~ .content .article__feedbackbtn {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    color: #141414;
    height: 32px;
    line-height: 30px;
    margin-left: 8px;
    padding: 0 12px;
    width: auto;
}

body.page-article .header:not(.header--compact) ~ .content .article__feedbackbtn:hover {
    border-color: #141414;
    box-shadow: none;
    color: #000000;
}

body.page-article .header:not(.header--compact) ~ .content .poweredby a[href] svg path {
    fill: #a3a3a3;
}

/* --- Mobile — Figma `mob/article` 99646-287862 --------------------------
   Every size steps down, not just the headings: the body is 14/24 here
   against 16/24 on desktop, and the section headings are 16/24 against
   20/32. Getting only the headings right and leaving the body at 16 is what
   makes a phone layout feel unconsidered. */
@media (max-width: 767px) {
    /* The desktop rule above sets the band's tail to 48px at (0,3,0), which
       outranks the hero section's own mobile rule at (0,2,0) and is not in a
       media query — so without this the phone kept the desktop tail and the
       band came out 24px too tall. Restated here at equal specificity. */
    body.page-article .header:not(.header--compact) {
        padding-bottom: 24px;
    }

    body.page-article .header:not(.header--compact) ~ .content {
        padding: 16px 0 32px;
    }

    /* `content/medium/xs` — 12/16, and Figma's 20px down to the title. */
    body.page-article .header:not(.header--compact) ~ .content .breadcrumbs {
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 20px;
    }

    /* `heading/title/lg` — 24/32 SEMIBOLD. The desktop title is 28/40 bold;
       this is a different weight, not just a smaller one. */
    body.page-article .header:not(.header--compact) ~ .content .article__title {
        font-size: 24px;
        font-weight: 600;
        line-height: 32px;
        padding-bottom: 24px;
    }

    /* `content/regular/sm`. */
    body.page-article .header:not(.header--compact) ~ .content .article__content {
        font-size: 14px;
    }

    /* `heading/title/sm` — 16/24, with Figma's 24px between sections. */
    body.page-article .header:not(.header--compact) ~ .content .article__content h2,
    body.page-article .header:not(.header--compact) ~ .content .article__content h3 {
        font-size: 16px;
        line-height: 24px;
        margin: 24px 0 16px;
    }

    body.page-article .header:not(.header--compact) ~ .content .article__content h1 {
        font-size: 18px;
        line-height: 24px;
    }

    body.page-article .header:not(.header--compact) ~ .content .article__related .article-list__title a {
        font-size: 14px;
    }
}

/* ==========================================================================
   MAXXED — search results page
   ==========================================================================

   Mirrors Figma 99618-26431 (`web/search_result`) and 99646-288071
   (`mob/search_result`). Like the article page it is the home page's hero and
   footer around its own content, so only the results themselves are new.

   `body.page-search` IS NOT OPTIONAL HERE — it prevents a collision.

   This page's `.article-list` is a DIRECT child of `.container`, which is
   exactly the selector the home page's category grid uses, and its header is
   not `header--compact`. Without the class the stylesheet lays search results
   out as a three-column grid of illustrated cards. The first rule below is
   what overrides that, and it only wins because `body.page-search` pushes the
   specificity to (0,6,1) against the grid's (0,5,0).

   Reached by POST, not by URL: `common.js` submits a hidden form to
   `/search-result` with a `keyword` field, so a GET of that path renders the
   home page. Preview with
       curl -X POST https://help.maxxed.io/search-result --data 'keyword=cash'

   Figma has no breadcrumb here, and none is styled — the home page's
   `.breadcrumbs { display: none }` already covers this page, because
   `page-search` never re-shows it the way `page-article` does.
   ------------------------------------------------------------------------ */

/* Undo the category grid. Everything else on this page hangs off the fact
   that `.article-list` is a plain vertical stack again. */
body.page-search .header:not(.header--compact) ~ .content > .container > .article-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
}

body.page-search .header:not(.header--compact) ~ .content {
    padding: 40px 0 80px;
}

/* `heading/subtitle/sm` — 16/24 medium #a3a3a3, with the keyword in
   `heading/title/sm` 16/24 semibold #141414 beside it. Stock is 24px #bbb
   with a 40px left margin that fights the column. */
body.page-search .header:not(.header--compact) ~ .content .seach-result__label {
    color: #a3a3a3;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin: 0 0 32px;
    padding-left: 4px;
}

body.page-search .header:not(.header--compact) ~ .content .search-result__keywords {
    color: #141414;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    margin-left: 8px;
}

/* One result, and THE WHOLE CARD IS THE LINK. The wrapper is added by the
   template — Comm100 emits the title and summary as flat siblings with the
   anchor around the title only, and two siblings cannot be boxed together in
   CSS — and that wrapper is an `<a>`, so clicking anywhere in the card opens
   the article.

   Done by making the card an anchor rather than by stretching an invisible
   `::after` over it from the title link. The overlay trick needs no template
   change, but it swallows text selection across the card and leaves the focus
   ring around the title only. A real anchor focus-rings the whole card.

   Figma: 1px #e0e0e0, radius 20, 16px padding, 104px tall on desktop
   (16 + 24 title + 48 summary + 16). */
body.page-search .header:not(.header--compact) ~ .content .search-result__item {
    color: #141414;
    display: block;
    text-decoration: none;
    /* Mobile browsers paint a translucent overlay across the WHOLE element on
       tap — `-webkit-tap-highlight-color`, UA default `rgba(0,0,0,0.18)`,
       rendered bluish on iOS. Harmless on a text link; on a 104px card it is
       a full-card flash. Suppressed here, with `:active` below taking over so
       a tap still gives feedback. Nothing in this file ever sets a background
       on the card — focus is the green outline only. */
    -webkit-tap-highlight-color: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    box-sizing: border-box;
    min-height: 56px;
    /* 15, not 16, ON PURPOSE — do not "correct" it. Figma draws frame strokes
       INSIDE the frame, so its 104px card is 16 + 24 + 48 + 16 with the 1px
       stroke sitting within that 16px inset. CSS puts the border outside the
       padding box, so `padding: 16px` yields 106. Border 1 + padding 15 gives
       both the same 16px inset from the card edge to the text AND Figma's
       exact height. */
    padding: 15px;
    transition: border-color 0.2s ease;
}

/* Figma defines no hover. The border is the card-level affordance and the
   title underlines, so it is obvious the whole card is the target. */
body.page-search .header:not(.header--compact) ~ .content .search-result__item:hover {
    border-color: #141414;
    text-decoration: none;
}

body.page-search .header:not(.header--compact) ~ .content .search-result__item:hover .article-list__title {
    text-decoration: underline;
}

/* Press feedback, replacing the tap highlight that was just suppressed. The
   border, not a fill — a background on press is what was being complained
   about, and Figma defines no pressed state at all. */
body.page-search .header:not(.header--compact) ~ .content .search-result__item:active {
    border-color: #141414;
}

/* Keyboard users get the ring on the card, which is the whole point of making
   it a real anchor. `:focus-visible` keeps it off mouse clicks. */
body.page-search .header:not(.header--compact) ~ .content .search-result__item:focus-visible {
    border-color: #141414;
    outline: 2px solid #5afa44;
    outline-offset: 2px;
}

/* The font metrics have to sit on the DIV, not only on the `<a>` inside it:
   the div's own inherited 18px font sets the line box's strut, so styling
   just the link left each card 2px taller than Figma's 104. */
body.page-search .header:not(.header--compact) ~ .content .search-result__item .article-list__title {
    color: #141414;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    padding: 0;
}

/* `content/medium/sm` — 14/24. The title is a plain div now that the card is
   the anchor; these `a` rules are kept so that a knowledge base still running
   the OLDER template — anchor around the title, plain div wrapper — renders
   identically instead of falling back to stock 20px #329fd9. */
body.page-search .header:not(.header--compact) ~ .content .search-result__item .article-list__title a {
    color: #141414;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
}

/* `content/regular/sm` — 14/24 #646464, clamped to the two lines Figma draws.
   `{{article.body | truncate:256}}` already caps the string, but 256
   characters is three lines at this width, so the clamp is what actually
   holds the card at 104px. The `-webkit-` prefixes are the only syntax any
   browser ships for this, including Firefox. */
body.page-search .header:not(.header--compact) ~ .content .search-result__item .article-list__content {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #646464;
    display: -webkit-box;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    overflow: hidden;
    padding: 0;
}

/* The featured star Comm100 puts before a promoted result. */
body.page-search .header:not(.header--compact) ~ .content .search-result__item .icon-feature {
    color: #5afa44;
}

body.page-search .header:not(.header--compact) ~ .content .search-result--norecord {
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    color: #646464;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    padding: 24px 16px;
    text-align: center;
}

body.page-search .header:not(.header--compact) ~ .content .poweredby a[href] svg path {
    fill: #a3a3a3;
}

/* --- Mobile — Figma `mob/search_result` 99646-288071 --------------------
   Content 24/32 instead of 40/80, a 14/24 label, 12px between cards rather
   than 16, and the summary drops to `content/regular/xs` 12/16. */
@media (max-width: 767px) {
    /* Same specificity trap as the article page: the desktop rule above is
       (0,3,0) and outside any media query, so the hero's own mobile tail does
       not win on width alone and has to be restated. */
    body.page-search .header:not(.header--compact) {
        padding-bottom: 24px;
    }

    body.page-search .header:not(.header--compact) ~ .content {
        padding: 24px 0 32px;
    }

    body.page-search .header:not(.header--compact) ~ .content .seach-result__label,
    body.page-search .header:not(.header--compact) ~ .content .search-result__keywords {
        font-size: 14px;
    }

    body.page-search .header:not(.header--compact) ~ .content .seach-result__label {
        margin-bottom: 24px;
    }

    body.page-search .header:not(.header--compact) ~ .content > .container > .article-list {
        gap: 12px;
    }

    body.page-search .header:not(.header--compact) ~ .content .search-result__item .article-list__content {
        font-size: 12px;
        line-height: 16px;
    }
}

/* ==========================================================================
   MAXXED — page not found (404)
   ==========================================================================

   Mirrors Figma node 92973-16599.

   THIS PAGE'S CONTENT IS DARK. Every other page in this theme puts light
   #f5f5f5 content between the dark hero and the dark footer; the 404 does
   not — Figma sets it on #141414, so the whole page reads as one dark slab.
   That is the design, not an oversight, and it is why this section overrides
   the shared `~ .content` background instead of inheriting it.

   `comm100-kb-404-template.html` also has to ADD a `.content` wrapper. Stock
   is the only KB template that puts `.container` straight inside `<body>`,
   and every shared rule is anchored on
   `.header:not(.header--compact) ~ .content` — without it this page gets the
   hero and footer with nothing between them styled, and the sticky footer has
   nothing to grow.
   ------------------------------------------------------------------------ */

body.page-404 .header:not(.header--compact) ~ .content {
    background-color: #141414;
    color: #f5f5f5;
    padding: 80px 0;
}

body.page-404 .header:not(.header--compact) ~ .content .page-not-found {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    text-align: center;
}

/* The 200px `assets/maxxed/stubs/404` mark — the XX letterforms with the
   green 404 punched through. Inlined as a data URI rather than uploaded:
   it is two vector paths, it is the only artwork this page needs, and an
   error page in particular should not depend on another host being reachable.

   Stock renders `/kb/resources/404.jpg` here instead — a 325x125 JPEG of a
   blue "404" in Comm100's #3b99e0 on a WHITE background. The template drops
   that `<img>`; if one is left in place this rule does not hide it, so remove
   it from the markup rather than expecting CSS to. */
body.page-404 .header:not(.header--compact) ~ .content .page-not-found__mark {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'><path id='Vector' d='M198.143 66.9082L170.915 70.9011L161.532 94.8909L153.373 73.4829L126.145 77.4759V77.5079L54.4501 88.0435L54.2593 87.7068L74.839 43.8325L47.6114 47.8255L38.2281 71.8152L30.0693 50.4072L2.84172 54.4162L23.5646 92.2129L2.38049 138.829L29.1628 134.9L39.1346 108.008L48.677 132.03L53.7026 131.292V131.308L145.723 117.79L125.684 161.905L152.466 157.976L162.438 131.084L171.965 155.106L199.192 151.113L177.563 110.782L198.143 66.9082Z' fill='white'/><path id='404' d='M141.377 72.6882C143.791 72.2977 146.065 73.9381 146.456 76.3524L149.884 97.552C152.059 97.4112 154.033 98.8897 154.494 101.041L154.536 101.265L154.926 103.674C155.293 105.945 153.862 108.091 151.68 108.662L152.184 111.769C152.574 114.184 150.934 116.458 148.519 116.848L144.027 117.574C141.613 117.965 139.339 116.324 138.948 113.91L138.449 110.824L123.63 113.221C121.272 113.602 119.048 112.045 118.582 109.722C118.492 110.104 118.395 110.484 118.285 110.859C117.211 114.536 115.364 117.656 112.718 120.145L112.712 120.15C110.064 122.625 106.837 124.152 103.116 124.754C99.3939 125.356 95.8378 124.926 92.5158 123.425L92.4981 123.417L92.4804 123.409C89.2245 121.873 86.5121 119.493 84.3394 116.35L84.3334 116.341C84.104 116.006 83.8844 115.664 83.6719 115.316C83.9735 117.545 82.5562 119.628 80.4118 120.189L80.915 123.295C81.3055 125.71 79.6643 127.984 77.2499 128.374L72.7584 129.101C70.344 129.492 68.0701 127.851 67.6796 125.436L67.1804 122.351L52.3617 124.748C49.9473 125.138 47.6735 123.498 47.2828 121.084L46.6749 117.328C46.5204 116.373 46.6832 115.393 47.138 114.539L61.6104 87.3619L61.7388 87.1368C62.4101 86.0362 63.5313 85.2785 64.8124 85.0713L70.1082 84.2144L70.3344 84.1836C72.5879 83.9357 74.6698 85.4385 75.1446 87.6554L75.187 87.8795L78.6151 109.079C79.5137 109.021 80.3774 109.24 81.1148 109.667C80.6525 108.217 80.2931 106.693 80.0351 105.098C79.345 100.831 79.5054 96.8535 80.6023 93.217L80.8148 92.5408C81.9169 89.1983 83.6885 86.3623 86.1557 84.0999L86.6645 83.6481C89.2418 81.4412 92.3061 80.062 95.7951 79.4976C99.5477 78.8907 103.111 79.3168 106.41 80.8334L106.409 80.8334C109.658 82.2931 112.365 84.6166 114.532 87.7189L114.934 88.3083C116.897 91.2937 118.175 94.8201 118.822 98.8246C118.975 99.7669 119.083 100.696 119.153 101.611L132.879 75.8348L133.007 75.6097C133.679 74.5092 134.8 73.7515 136.081 73.5442L141.377 72.6882ZM100.841 91.8101C100.008 91.2284 99.0164 90.9828 97.688 91.1976C96.3812 91.409 95.5262 91.9573 94.919 92.7989L94.8978 92.8284C94.1735 93.8004 93.6499 95.1085 93.4246 96.8631C93.1922 98.6735 93.2375 100.664 93.5908 102.849C93.9569 105.112 94.5557 107.098 95.3653 108.823C96.1428 110.481 97.0665 111.632 98.0807 112.399C98.9784 113.02 99.9752 113.255 101.223 113.053C102.508 112.846 103.354 112.296 103.962 111.427C104.698 110.375 105.221 108.978 105.439 107.137C105.664 105.241 105.608 103.187 105.249 100.963C104.889 98.7385 104.301 96.817 103.512 95.1751C102.745 93.581 101.835 92.5042 100.841 91.8101ZM62.3815 111.683L65.8152 111.128L65.0795 106.577L62.3815 111.683ZM133.65 100.156L137.084 99.6013L136.348 95.0504L133.65 100.156Z' fill='%231FDD05' stroke='white' stroke-width='4.7428'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 200px;
    width: 200px;
}

/* `heading/h2/lg` — 36/48 bold. Stock is 65px #666 with a 50px top margin. */
body.page-404 .header:not(.header--compact) ~ .content .page-not-found__title {
    color: #f5f5f5;
    font-family: inherit;
    font-size: 36px;
    font-weight: 700;
    line-height: 48px;
    margin: 0;
}

/* `content/regular/lg` — 18/28, Figma's 12px under the title. */
body.page-404 .header:not(.header--compact) ~ .content .page-not-found__description {
    color: #a3a3a3;
    font-family: inherit;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    margin: 12px 0 0;
}

/* `button/action` inverted — a light pill on the dark page. 16/24 semibold
   #141414 on #f5f5f5, radius 20, 12/20 padding, 40px below the text block. */
body.page-404 .header:not(.header--compact) ~ .content .page-not-found__action {
    -webkit-tap-highlight-color: transparent;
    background-color: #f5f5f5;
    border-radius: 20px;
    color: #141414;
    display: inline-block;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    margin-top: 40px;
    padding: 12px 20px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

body.page-404 .header:not(.header--compact) ~ .content .page-not-found__action:hover {
    background-color: #ffffff;
    text-decoration: none;
}

body.page-404 .header:not(.header--compact) ~ .content .page-not-found__action:focus-visible {
    outline: 2px solid #5afa44;
    outline-offset: 2px;
}

/* The Comm100 credit sits on the dark page here, not the light one. */
body.page-404 .header:not(.header--compact) ~ .content .poweredby a[href] svg path {
    fill: #646464;
}

/* Figma draws only the 1664px frame. The mark and headline step down so the
   block still reads as one unit on a phone. */
@media (max-width: 767px) {
    /* Same specificity trap as the article and search pages — the desktop
       rule is outside any media query, so the hero's mobile tail has to be
       restated here. */
    body.page-404 .header:not(.header--compact) {
        padding-bottom: 24px;
    }

    body.page-404 .header:not(.header--compact) ~ .content {
        padding: 48px 0;
    }

    body.page-404 .header:not(.header--compact) ~ .content .page-not-found__mark {
        height: 140px;
        width: 140px;
    }

    body.page-404 .header:not(.header--compact) ~ .content .page-not-found__title {
        font-size: 28px;
        line-height: 40px;
    }

    body.page-404 .header:not(.header--compact) ~ .content .page-not-found__description {
        font-size: 16px;
        line-height: 24px;
    }

    body.page-404 .header:not(.header--compact) ~ .content .page-not-found__action {
        margin-top: 32px;
    }
}

.webview__close {
    fill: #ffffff !important;
    height: 50px !important;
}