/* ==========================================================================
   Litguide Help Centre — Help Scout Docs custom CSS
   Matched to the litguide.ca design system.

   Tokens (same values the marketing site uses)
   ------------------------------------------------------------------
   Ink display    #0E202D      Headings
   Ink            #143A40      Strong body, links on light
   Body           #4A6360      Paragraphs
   Muted          #5F7B75      Labels, meta, placeholders
   Hairline       #EEF2F4      Row rules, dividers
   Border         #D9E5E2      Inputs, card edges
   Dark           #07333A      Primary buttons, nav ink
   Teal           #0F5A63      Hover, focus ring
   Green          #34B994      Accent, active state
   Deep green     #16704F      Icons, green text on light
   Mint tint      #EAF7F2      Soft grounds
   Cool tint      #E8F2FA      Blockquote, code ground
   Page ground    #FBFCFC      Body background

   Radii   8 / 14 / 22 / 999 only
   Type    Noto Sans 700/800 display · Roboto 400/500 body
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · Typography
   -------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700;800&family=Roboto:wght@300;400;500;700&display=swap');

body,
input,
button,
select,
textarea {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.navbar .nav li a,
strong,
b {
    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    background-color: #FBFCFC;
    color: #4A6360;
}

strong {
    font-weight: 700;
    color: #143A40;
}

em {
    color: #143A40;
}


/* --------------------------------------------------------------------------
   2 · Layout
   -------------------------------------------------------------------------- */

.container-fluid {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}


/* --------------------------------------------------------------------------
   3 · Navbar
   -------------------------------------------------------------------------- */

.navbar .navbar-inner {
    background: #FFFFFF;
    border-bottom: 1px solid #EEF2F4;
    box-shadow: none;
    z-index: 999;
    position: relative;
}

.navbar .brand {
    background: url(https://litguide.ca/wp-content/uploads/2023/10/Litguide-Logo-Light-.svg) no-repeat;
    background-size: contain;
    background-position: left center;
    /* logo art is 208x60; 153x44 matches the height used across the site */
    width: 153px;
    max-width: 153px;
    height: 44px;
    padding: 0;
    margin: 18px 0;
    box-shadow: none;
}

.navbar .brand span {
    display: none;
}

.navbar .nav li a {
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    color: #5F7B75;
    text-transform: none;          /* the site does not shout its nav */
    letter-spacing: 0;
    transition: color .18s ease;
}

.navbar .nav li a:hover,
.navbar .nav li a:focus,
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus {
    color: #0E202D;
}

.navbar .nav .active .caret {
    display: none;
}

/* Contact button — pill, sentence case, dark ground */
#contact a {
    display: inline-block;
    background-color: #07333A;
    border: 1.5px solid #07333A;
    border-radius: 999px;
    color: #FFFFFF !important;
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    padding: 15px 30px;
    margin-left: 18px;
    transition: background-color .18s ease, border-color .18s ease;
}

#contact a:hover {
    background-color: #0F5A63;
    border-color: #0F5A63;
    color: #FFFFFF !important;
}

/* Active + hover states, matched to the marketing site.
   Inactive #5F7B75; hover wipes a 2px green rule in from the left; the current
   page takes a 7px green dot and darker ink. No pill, no static underline. */

.navbar .nav li a { position: relative; }

.navbar .nav li:not(#contact):not(#contactMobile) a::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 100%;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: #34B994;
    transition: right .28s cubic-bezier(.22,.61,.36,1);
}

.navbar .nav li:not(#contact):not(#contactMobile) a:hover::after { right: 2px; }

.navbar .nav .active a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #0E202D;
}

.navbar .nav .active a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #34B994;
    flex: none;
}

/* the current page does not also need the hover rule */
.navbar .nav .active a::after { display: none; }

#contactMobile a::after,
#contactMobile a::before { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .navbar .nav li a::after { transition: none; }
}

@media (min-width: 769px) {
    .navbar .nav {
        position: absolute;
        right: 0;
        left: auto;
        bottom: 16px;
        margin-right: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 910px) {
    .navbar .nav li a { font-size: 15px; padding-left: 10px; padding-right: 10px; }
    #contact a { font-size: 14px; padding: 14px 20px; margin-left: 6px; }
}

@media (max-width: 768px) {
    .nav-collapse .nav { margin: 15px 0 30px; }
    .navbar .brand { width: 118px; max-width: 118px; height: 34px; margin: 14px 0; }
    .navbar .btn-navbar { position: absolute; top: 9px; }
    .btn-navbar .icon-bar + .icon-bar { margin-top: 5px; }
    .navbar .btn-navbar .icon-bar {
        background: #07333A !important;
        box-shadow: none !important;
        width: 25px !important;
        border-radius: 999px !important;
    }
    .navbar .nav li a { padding: 15px 0; }
}


/* --------------------------------------------------------------------------
   4 · Hero + search
   -------------------------------------------------------------------------- */

#docsSearch {
    border-bottom: 1px solid #EEF2F4;
    padding: 120px 24px 128px;
    margin-bottom: 96px;
    background-color: #FFFFFF;
    /* the site's hero wash: brand green and teal at low alpha over white */
    background-image:
        radial-gradient(56% 44% at 8% 0%, rgba(52,185,148,0.16), rgba(255,255,255,0) 70%),
        radial-gradient(48% 40% at 96% 14%, rgba(54,159,183,0.14), rgba(255,255,255,0) 70%),
        radial-gradient(64% 46% at 50% 104%, rgba(76,223,161,0.10), rgba(255,255,255,0) 72%);
    background-repeat: no-repeat;
}

#docsSearch h1 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 56px;
    line-height: 1.06;
    letter-spacing: -2.2px;
    font-weight: 800;
    color: #0E202D;
    max-width: 720px;
    margin: 0 auto;
    float: none;
    text-wrap: balance;
}

#searchBar {
    max-width: 620px;
    padding: 34px 0 0;
}

#searchBar .search-query {
    height: 68px;
    background-color: #FFFFFF;
    border: 1.5px solid #D9E5E2;
    border-radius: 999px;
    padding: 22px 30px;
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    line-height: 24px;
    color: #143A40;
    box-shadow: 0 1px 2px rgba(7,51,58,.04), 0 6px 14px rgba(7,51,58,.05);
    transition: border-color .18s ease, box-shadow .18s ease;
}

#searchBar button {
    position: absolute;
    top: 43px;
    right: 10px;
    height: 48px;
    padding: 15px 30px;
    background: #07333A;
    border: 0;
    border-radius: 999px;
    color: #FFFFFF;
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    transition: background-color .18s ease;
}

#searchBar button:hover {
    background-color: #0F5A63;
}

::placeholder { color: #5F7B75 !important; }
:-ms-input-placeholder { color: #5F7B75 !important; }

/* Focus — matches the site's AODA focus treatment */
input:focus,
input[type=text]:focus,
textarea:focus,
select:focus {
    border-color: #34B994 !important;
    outline: 2px solid rgba(52,185,148,0.35);
    outline-offset: 1px;
    box-shadow: none;
}

:focus-visible {
    outline: 3px solid #0F5A63;
    outline-offset: 2px;
}

/* Search results dropdown */
#serp-dd,
#serp-dd.sb {
    border: 1.5px solid #D9E5E2;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(7,51,58,.04), 0 6px 14px rgba(7,51,58,.05), 0 22px 44px rgba(7,51,58,.07);
    font-size: 16px;
    line-height: 24px;
    color: #4A6360;
    overflow: hidden;
}

#serp-dd.sb { top: 60px; }
#serp-dd    { top: 80%; }

#serp-dd .result a {
    padding: 12px 18px;
    font-size: 16px;
    color: #4A6360;
    transition: background-color .16s ease, color .16s ease;
}

#serp-dd .result > li.active,
#serp-dd .result a:hover {
    background: #EAF7F2;
    color: #0E202D;
}

@media only screen and (max-width: 600px) {
    #docsSearch { padding: 72px 24px 76px; margin-bottom: 64px; }
    #docsSearch h1 { font-size: 38px; letter-spacing: -1.2px; line-height: 1.1; }
    #searchBar { width: 100%; }
    #searchBar button span { display: none; }
    #searchBar button { padding: 15px 20px; }
    #searchBar .search-query { padding: 22px 24px; background-image: none; }
    #searchBar button .icon-search { display: block; color: #FFFFFF; }
    .icon-search:before { position: relative; bottom: 2px; }
}


/* --------------------------------------------------------------------------
   5 · Collections and category cards
   -------------------------------------------------------------------------- */

.collection-category h2,
.collection-category h2 a {
    font-family: 'Noto Sans', sans-serif;
    font-size: 34px;
    line-height: 1.14;
    letter-spacing: -1.1px;
    color: #0E202D;
    font-weight: 800;
    text-align: center;
}

h2 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 34px;
    line-height: 1.14;
    letter-spacing: -1.1px;
    color: #0E202D;
    font-weight: 800;
}

.collection-category h2 a:hover { border-bottom: 0; }
a:focus { text-decoration: none; }

.category-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 24px;
    margin-top: 34px;
    align-items: stretch;
}

/* .category is an <a>; force it to behave as a full grid item */
.category-list > .category {
    display: block;
    float: none;
    vertical-align: top;
    height: auto;
    min-width: 0;
}

.category-list .category {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    text-align: left;
    background-color: #FFFFFF;
    border: 1.5px solid #E4EDEA;
    border-radius: 22px;
    box-shadow: none;
    transition: border-color .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}

.category-list .category:hover {
    background-color: #FFFFFF;
    border-color: #07333A;
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(7,51,58,0.10);
}

.category-list h3 {
    font-family: 'Noto Sans', sans-serif;
    color: #0E202D;
    font-size: 22px;
    line-height: 1.24;
    letter-spacing: -0.5px;
    font-weight: 800;
    margin-bottom: 10px;
}

.category-list .category p {
    font-size: 16px;
    line-height: 26px;
    color: #4A6360;
}

/* Article count — the site's uppercase micro-label */
.category-list .category .article-count {
    display: inline-block;
    color: #0F5A63;
    font-family: 'Noto Sans', sans-serif;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 24px;
    transition: color .18s ease;
}

.category-list .category:hover .article-count { color: #16704F; }

#collection-category-33 { margin-top: 88px; }

@media only screen and (max-width: 1100px) {
    .category-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media only screen and (max-width: 700px) {
    .category-list { grid-template-columns: minmax(0, 1fr); grid-gap: 16px; }
}




/* --------------------------------------------------------------------------
   5b · Category icons — the site's line icons in the brand icon device
   Help Scout controls this markup, so the device is built from pseudo-elements:
   ::before is the offset colour square, ::after is the white bordered face
   carrying the glyph as an inline SVG.
   -------------------------------------------------------------------------- */

.category-list .category {
    position: relative;
    padding: 108px 34px 34px;      /* room for the device at the top-left */
    background-image: none;
}

.category-list .category::before,
.category-list .category::after {
    content: "";
    position: absolute;
}

.category-list .category::after {
    width: 46px;
    height: 46px;
    border-radius: 14px;
}

/* accent bar, replacing the offset square: no layered "card behind a card" read */
.category-list .category::before {
    left: 34px;
    top: 88px;
    width: 46px;
    height: 4px;
    border-radius: 8px;
    background: #34B994;
    transition: background-color .18s ease;
}

/* white face + glyph */
.category-list .category::after {
    left: 34px;
    top: 34px;
    border: 1.5px solid #1E3865;
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 23px 23px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.4%203.4h11.2v17.2H6.4z%20M9.4%208.4h5.2%20M9.4%2012h5.2%20M9.4%2015.6h3.2%27%2F%3E%3C%2Fsvg%3E");   /* default */
}

#category-46::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.6%205h16.8v11.4H3.6z%20M8.4%2020.4h7.2%20M12%2016.4v4%27%2F%3E%3C%2Fsvg%3E"); }
#category-46::before { background: #4CDFA1; }
#category-60::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.4%203.4h11.2v17.2H6.4z%20M9.4%208.4h5.2%20M9.4%2012h5.2%20M9.4%2015.6h3.2%27%2F%3E%3C%2Fsvg%3E"); }
#category-60::before { background: #6AC7D6; }
#category-4::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%204.6h16v10.8H4z%20M12%2015.4v4.2%20M8.6%2019.6h6.8%20M7.6%208h6%20M7.6%2011.4h4%27%2F%3E%3C%2Fsvg%3E"); }
#category-4::before { background: #9FC6E8; }
#category-17::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.4%2020.4%208v12.6H3.6V8z%20M9.4%2020.6v-5.4h5.2v5.4%20M10.6%2010.4h2.8%27%2F%3E%3C%2Fsvg%3E"); }
#category-17::before { background: #FDDBBA; }
#category-36::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.6%2020.6V9.4l6-3.4v14.6%20M9.6%2012.4l7.2-4v12.6%20M3.6%2020.6h16.8%20M6.4%2013.6h1%20M6.4%2016.8h1%20M12.8%2013.2h1%20M12.8%2016.6h1%27%2F%3E%3C%2Fsvg%3E"); }
#category-36::before { background: #4CDFA1; }
#category-31::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.2%2019.4%206v6.2c0%204.2-3%207.2-7.4%208.6C7.6%2019.4%204.6%2016.4%204.6%2012.2V6z%20M9.2%2012.2l2.2%202.2%203.8-4%27%2F%3E%3C%2Fsvg%3E"); }
#category-31::before { background: #6AC7D6; }
#category-32::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.6a8.4%208.4%200%201%200%200%2016.8%208.4%208.4%200%200%200%200-16.8z%20M9.6%209.6a2.4%202.4%200%201%201%203.3%202.2c-.6.3-.9.8-.9%201.4v.4%20M12%2016.6h.01%27%2F%3E%3C%2Fsvg%3E"); }
#category-32::before { background: #9FC6E8; }
#category-48::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.2%2021%208.6l-9%204.4-9-4.4z%20M6.6%2010.8v4.6c0%201.7%202.4%203%205.4%203s5.4-1.3%205.4-3v-4.6%27%2F%3E%3C%2Fsvg%3E"); }
#category-48::before { background: #FDDBBA; }
#category-47::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9.4%2011.2a3.1%203.1%200%201%201%200-6.2%203.1%203.1%200%200%201%200%206.2z%20M3.6%2019.6c0-3.2%202.6-5.8%205.8-5.8s5.8%202.6%205.8%205.8%20M16.6%205.4a3.1%203.1%200%200%201%200%206%20M17.4%2014.2c1.9.6%203.2%202.4%203.2%204.4%27%2F%3E%3C%2Fsvg%3E"); }
#category-47::before { background: #4CDFA1; }
#category-33::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231E3865%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020.2h16%20M7.2%2020.2V11%20M12%2020.2V5.4%20M16.8%2020.2v-6%27%2F%3E%3C%2Fsvg%3E"); }
#category-33::before { background: #6AC7D6; }

@media only screen and (max-width: 700px) {
    .category-list .category { padding: 96px 26px 26px; }
    .category-list .category::before { left: 33px; top: 33px; }
    .category-list .category::after  { left: 26px; top: 26px; }
}


/* --------------------------------------------------------------------------
   6 · Sidebar
   -------------------------------------------------------------------------- */

#sidebar form .search-query {
    border: 1.5px solid #D9E5E2;
    background: #FFFFFF;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(7,51,58,.04);
    font-size: 16px;
    line-height: 18px;
    color: #143A40;
    padding: 0 25px;
    height: 54px;
}

#sidebar form .search-query:focus {
    border-color: #34B994;
    border-radius: 999px !important;
    box-shadow: none;
}

#sidebar .nav-list {
    background-color: #FFFFFF;
    border: 1.5px solid #E4EDEA;
    border-radius: 22px;
    box-shadow: none;
    margin-top: 22px;
    margin-bottom: 0;
    padding: 26px 28px 32px;
}

#sidebar h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    line-height: 1.26;
    letter-spacing: -0.4px;
    font-weight: 800;
    color: #0E202D;
    text-transform: none;
}

#sidebar .nav-list a {
    font-size: 16px;
    line-height: 24px;
    color: #4A6360;
    padding: 10px 0;
    transition: color .18s ease;
}

#sidebar .nav-list a:hover { color: #0E202D; }

#sidebar .nav-list .active a {
    font-family: 'Noto Sans', sans-serif;
    color: #0E202D;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}

[class^=icon-] { color: #5F7B75; font-size: 18px; line-height: 22px; }
.icon-arrow:before { color: #16704F; }
#sidebar .nav-list .active a .icon-arrow,
#sidebar .nav-list .active a:hover .icon-arrow,
#sidebar .nav-list .active a:focus .icon-arrow { color: #16704F !important; }

@media (max-width: 768px) {
    #main-content { margin: 40px 0 2em; }
    #searchBar { max-width: 100%; }
    #sidebar form { position: relative; margin: 40px 0; }
    #categoryHead .sort { top: -52px; }
}


/* --------------------------------------------------------------------------
   7 · Content wrapper
   -------------------------------------------------------------------------- */

#main-content { background: none; }

.contentWrapper {
    background: #FFFFFF;
    border: 1.5px solid #E4EDEA;
    border-radius: 22px;
    box-shadow: none;
    padding: 50px 60px 66px;
}

.contentWrapper h1,
#categoryHead h1 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 42px;
    line-height: 1.08;
    letter-spacing: -1.5px;
    font-weight: 800;
    color: #0E202D;
}

.articleList li {
    font-size: 17px;
    line-height: 28px;
    color: #4A6360;
}

.contentWrapper a {
    color: #0F5A63;
    transition: color .18s ease;
}

.contentWrapper a:hover {
    color: #07333A;
    text-decoration: none;
}

.contentWrapper p.descrip {
    font-size: 17px;
    margin-top: 24px;
    color: #4A6360;
}

.icon-article-doc:before { color: #16704F; }

.articleList a span { transition: color .18s ease; }
.articleList a span:hover { color: #07333A; text-decoration: none; }

select {
    border: 1.5px solid #D9E5E2;
    border-radius: 8px;
    box-shadow: none;
    color: #4A6360;
}

#categoryHead .sort select {
    width: 160px;
    height: 36px;
    margin: 0;
    line-height: 24px;
    font-size: 13px;
}

@media (max-width: 768px) {
    #categoryHead .sort { display: none; }
    .contentWrapper { padding: 40px 26px 56px; }
}


/* --------------------------------------------------------------------------
   8 · Article
   -------------------------------------------------------------------------- */

#fullArticle { max-width: 100%; margin: auto; position: relative; }

#fullArticle h1,
#fullArticle h2,
#fullArticle h3,
#fullArticle h4,
#fullArticle h5 {
    font-family: 'Noto Sans', sans-serif;
    color: #0E202D;
}

#fullArticle .title {
    font-size: 42px;
    line-height: 1.08;
    letter-spacing: -1.5px;
    font-weight: 800;
}

#fullArticle h2 {
    font-size: 28px;
    line-height: 1.24;
    letter-spacing: -0.8px;
    font-weight: 800;
    margin-top: 40px;
}

#fullArticle,
#fullArticle p,
#fullArticle ul,
#fullArticle ol,
#fullArticle li,
#fullArticle div,
#fullArticle blockquote,
#fullArticle dd,
#fullArticle table {
    font-size: 17px;
    line-height: 28px;
    color: #4A6360;
}

#fullArticle strong { color: #143A40; font-weight: 700; }

#fullArticle blockquote {
    font-style: normal;
    background: #EAF7F2;
    border-left: 4px solid #34B994;
    border-radius: 14px;
    padding: 30px 34px;
}

pre,
#fullArticle pre,
#fullArticle code {
    background-color: #E8F2FA;
    color: #143A40;
    border: 1px solid #D9E5E2;
    border-radius: 14px;
    font-size: 15px;
    line-height: 26px;
}

#fullArticle img {
    border: 1px solid #EEF2F4;
    border-radius: 22px;
    padding: 0;
}

/* Edit button (staff only) */
#fullArticle .admin-edit {
    display: inline-block;
    margin-bottom: 22px;
    background-image: none;
    background-color: #07333A;
    border: none;
    border-radius: 999px;
    color: #FFFFFF;
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    line-height: 18px;
    font-weight: 700;
    padding: 15px 30px;
    text-shadow: none;
    transition: background-color .18s ease;
}

#fullArticle .admin-edit:hover { background-color: #0F5A63; }

.articleFoot p,
.articleFoot time {
    font-family: 'Roboto', sans-serif;
    color: #5F7B75;
    font-size: 15px;
}

#sbContact {
    color: #0F5A63;
    border: none;
    transition: color .18s ease;
}

#sbContact:hover { color: #07333A; }

#fullArticle .printArticle { position: absolute; right: -2%; top: -1%; }
.icon-print { transition: color .18s ease; }
#fullArticle .printArticle:hover .icon-print { color: #16704F; }

@media (min-width: 200px) and (max-width: 1220px) { #fullArticle .printArticle { right: -7%; } }
@media (min-width: 200px) and (max-width: 1150px) { #fullArticle .printArticle { right: 20px !important; } }

@media (max-width: 768px) {
    #fullArticle .printArticle { right: -14px; top: -18px; }
    #fullArticle .title { font-size: 32px; letter-spacing: -1px; line-height: 1.12; }
    #fullArticle h2 { font-size: 24px; line-height: 1.26; }
    .articleFoot time.lu { float: left; }
    .contentWrapper.withRelated { min-height: 205px; padding-bottom: 80px; }
}


/* --------------------------------------------------------------------------
   8b · Article body — reading layout
   Help Scout ships almost no article styling beyond colour. This sets a real
   vertical rhythm, a readable measure, and treatments for the elements that
   actually turn up in support docs: steps, tables, callouts, screenshots.
   -------------------------------------------------------------------------- */

/* Measure. Long support paragraphs are unreadable at full card width. */
#fullArticle > p,
#fullArticle > ul,
#fullArticle > ol,
#fullArticle > blockquote {
    max-width: 68ch;
}

#fullArticle > p { margin: 0 0 20px; }

/* The opening paragraph carries a little more weight. */
#fullArticle .title + p,
#fullArticle > p:first-of-type {
    font-size: 19px;
    line-height: 31px;
    color: #4A6360;
    margin-bottom: 28px;
}

/* Heading rhythm: generous above, tight below, so headings bind to their text. */
#fullArticle h2 {
    margin: 52px 0 16px;
    padding-top: 26px;
    border-top: 1px solid #EEF2F4;
}

#fullArticle h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

#fullArticle h3 {
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -0.4px;
    font-weight: 800;
    margin: 36px 0 12px;
}

#fullArticle h4 {
    font-size: 17px;
    line-height: 1.4;
    font-weight: 700;
    color: #143A40;
    margin: 28px 0 10px;
}

/* Lists — real indentation and breathing room between steps. */
#fullArticle ul,
#fullArticle ol {
    margin: 0 0 22px;
    padding-left: 24px;
}

#fullArticle li { margin-bottom: 10px; padding-left: 4px; }
#fullArticle li:last-child { margin-bottom: 0; }
#fullArticle li > ul,
#fullArticle li > ol { margin-top: 10px; margin-bottom: 4px; }

#fullArticle ol { list-style: decimal; }
#fullArticle ul { list-style: none; padding-left: 26px; }

/* Custom bullet in brand green rather than a browser dot. */
#fullArticle ul > li { position: relative; }
#fullArticle ul > li::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #34B994;
}

#fullArticle ol > li::marker {
    color: #16704F;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
}

/* Callout. Support docs lean on these for warnings and asides. */
#fullArticle blockquote {
    margin: 28px 0;
    font-size: 17px;
    line-height: 28px;
    color: #143A40;
}

#fullArticle blockquote p:last-child { margin-bottom: 0; }

/* Inline code must not inherit the block treatment. */
#fullArticle code {
    display: inline;
    padding: 2px 7px;
    border-radius: 8px;
    font-size: 15px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: nowrap;
}

#fullArticle pre {
    display: block;
    padding: 22px 24px;
    margin: 0 0 24px;
    overflow-x: auto;
    white-space: pre;
    border-radius: 14px;
}

#fullArticle pre code {
    padding: 0;
    background: none;
    border: 0;
    white-space: pre;
    font-size: 15px;
}

/* Screenshots. A hairline keeps light UI shots from bleeding into the page. */
#fullArticle img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 28px 0;
    border: 1px solid #EEF2F4;
    border-radius: 14px;
}

#fullArticle figure { margin: 28px 0; }
#fullArticle figure img { margin: 0; }
#fullArticle figcaption {
    margin-top: 12px;
    font-size: 15px;
    line-height: 24px;
    color: #5F7B75;
}

/* Tables — plans, limits, field references. */
#fullArticle table {
    width: 100%;
    margin: 0 0 28px;
    border-collapse: collapse;
    border: 1px solid #EEF2F4;
    border-radius: 14px;
    overflow: hidden;
    font-size: 16px;
}

#fullArticle table th {
    background: #F7FAF9;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #5F7B75;
    text-align: left;
    padding: 14px 18px;
    border-bottom: 1px solid #EEF2F4;
}

#fullArticle table td {
    padding: 15px 18px;
    border-bottom: 1px solid #EEF2F4;
    color: #4A6360;
    vertical-align: top;
}

#fullArticle table tr:last-child td { border-bottom: 0; }

/* Links in body copy stay legible without shouting. */
#fullArticle a:not(.admin-edit):not(.printArticle) {
    color: #0F5A63;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(15,90,99,.35);
    transition: color .18s ease, text-decoration-color .18s ease;
}

#fullArticle a:not(.admin-edit):not(.printArticle):hover {
    color: #07333A;
    text-decoration-color: #07333A;
}

#fullArticle hr {
    border: 0;
    border-top: 1px solid #EEF2F4;
    margin: 40px 0;
}

/* Article footer */
.articleFoot {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid #EEF2F4;
}

/* Print — staff do print these for PD sessions. */
@media print {
    .navbar, #sidebar, .related, footer, #fullArticle .printArticle,
    #fullArticle .admin-edit, #docsSearch { display: none !important; }
    .contentWrapper { border: 0; padding: 0; }
    body { background: #FFFFFF; }
    #fullArticle a { text-decoration: none; color: #143A40; }
}

@media (max-width: 768px) {
    #fullArticle > p,
    #fullArticle > ul,
    #fullArticle > ol,
    #fullArticle > blockquote { max-width: 100%; }
    #fullArticle h2 { margin-top: 40px; }
    #fullArticle table { font-size: 15px; display: block; overflow-x: auto; }
}


/* --------------------------------------------------------------------------
   9 · Related articles
   -------------------------------------------------------------------------- */

.related {
    background: #EAF7F2;
    border: 1px solid #D7EDE4;
    border-radius: 22px;
    box-shadow: none;
    padding: 48px 40px;
    margin-top: 40px;
}

.related h3 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    line-height: 1.26;
    letter-spacing: -0.4px;
    font-weight: 800;
    color: #0E202D;
    text-transform: none;
}

.related ul > li,
.related ul > li a {
    font-size: 17px;
    line-height: 28px;
    color: #0F5A63;
    transition: color .18s ease;
}

.related a:hover { color: #07333A; }
.related ul > li a:hover span { text-decoration: none; }

@media (max-width: 768px) {
    .related { border-radius: 22px !important; padding: 40px 26px !important; }
    .related h3 { padding-left: 0 !important; }
    .related ul { margin-left: 22px !important; }
}


/* --------------------------------------------------------------------------
   10 · Contact modal
   -------------------------------------------------------------------------- */

#contactModal,
.abuse {
    border: 1.5px solid #D9E5E2;
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(7,51,58,.04), 0 6px 14px rgba(7,51,58,.05), 0 22px 44px rgba(7,51,58,.10);
    top: 6%;
}

.modal { width: 650px; }

.modal-body { padding: 0 50px 56px; min-height: 600px; }

#contactModal h2,
.abuse h2 {
    font-family: 'Noto Sans', sans-serif;
    padding: 46px 0 14px 50px;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    border-bottom: none;
    font-size: 32px;
    line-height: 1.14;
    letter-spacing: -1px;
    font-weight: 800;
    color: #0E202D;
}

#contactModal .control-label { width: 100%; float: left; text-align: left; }
#contactModal .controls { margin-left: 0; }
#contactModal .form-actions { padding-left: 0; }
#contactModal #md-message { width: 100%; padding-top: 10px; height: 70px; }
.form-actions:before,
.form-actions:after { display: none; }

.form-horizontal .control-label,
label {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 700;
    color: #5F7B75;
}

/* All form fields share one spec */
input[type=text],
.form-horizontal textarea,
.form-search input, .form-inline input, .form-horizontal input,
.form-search textarea, .form-inline textarea,
.form-search select, .form-inline select, .form-horizontal select,
.form-search .uneditable-input, .form-inline .uneditable-input, .form-horizontal .uneditable-input,
#contactForm #name, #contactForm #email, #contactForm #subject, #contactForm #message {
    background-color: #F7FAF9;
    border: 1.5px solid #E4EDEA;
    border-radius: 14px;
    box-shadow: none;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #143A40;
    padding: 12px 16px;
    height: 48px;
    width: 95%;
    transition: border-color .16s ease, background-color .16s ease;
}

.form-horizontal textarea,
#contactForm #message { height: auto; min-height: 120px; }

input[type=text]:focus,
textarea:focus,
#contactForm #message:focus {
    background-color: #FFFFFF;
    border-color: #34B994;
}

#contactModal input[type=file],
#contactForm input[type=file] {
    height: auto;
    padding: 14px 16px;
    border: 1.5px solid #E4EDEA;
    border-radius: 14px;
    background-color: #F7FAF9;
    width: 95%;
}

#contactModal input[type=submit].btn,
button.btn,
input[type=submit].btn {
    background-color: #07333A;
    background-image: none;
    border: none;
    border-radius: 999px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 17px;
    line-height: 18px;
    font-weight: 700;
    color: #FFFFFF;
    width: 100%;
    height: 52px;
    text-shadow: none;
    margin-top: 16px;
    transition: background-color .18s ease;
}

#contactModal input[type=submit].btn:hover,
button.btn:hover,
input[type=submit].btn:hover { background-color: #0F5A63; }

textarea:focus, input:focus, input[type=text]:focus, input[type=password]:focus,
input[type=email]:focus, input[type=url]:focus, input[type=search]:focus,
input[type=tel]:focus, .uneditable-input:focus { box-shadow: none; }

/* Close button */
.modal #closeBtn { top: 26px; right: 26px; }
.icon-close:before,
.featherlight-close-icon:before { display: none; }

#contactModal .icon-close {
    background-image: url(https://d2x2losda9vsjs.cloudfront.net/docs/assets/2019/icon--cross.svg);
    width: 22px;
    height: 22px;
    background-size: cover;
    display: inline-block;
    opacity: .65;
    transition: opacity .18s ease;
    position: relative;
    right: 50%;
}

#contactModal .icon-close:hover { opacity: 1; }

/* Validation */
#contactModal .parsley-errors-list {
    font-size: 15px;
    margin-top: 12px;
    color: #C0392B;
}

#contactModal .parsley-error:not([type=file]),
#contactForm .parsley-error:not([type=file]),
.abuse .parsley-error:not([type=file]) {
    border: 1.5px solid #C0392B;
}

@media (max-width: 768px) {
    .modal-body { min-height: 700px; padding: 0 24px 48px; }
    #contactModal h2, .abuse h2 { padding: 36px 0 12px 24px; font-size: 26px; }
}


/* --------------------------------------------------------------------------
   11 · Footer
   -------------------------------------------------------------------------- */

footer {
    padding: 34px 0;
    border-top: 1px solid #EEF2F4;
    margin-top: 88px;
}

footer span { display: none; }

footer p {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    color: #5F7B75;
    text-align: center;
}

footer p a { color: #5F7B75; transition: color .18s ease; }
footer p a:hover { color: #07333A; }


/* --------------------------------------------------------------------------
   12 · Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    .category-list .category:hover { transform: none; }
}


/* --------------------------------------------------------------------------
   13 · Site parity — chrome and behaviour carried over from litguide.ca
   -------------------------------------------------------------------------- */

/* Sticky nav, as on the site */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Anchored headings clear the sticky nav */
html { scroll-behavior: smooth; }
#fullArticle h2,
#fullArticle h3,
[id] { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

::selection { background: #D7F0E6; color: #0E202D; }

/* The site's 3D press: flat at rest, pops on hover, presses flat again on click */
#contact a,
#searchBar button,
#fullArticle .admin-edit,
#contactModal input[type=submit].btn,
button.btn,
input[type=submit].btn {
    box-shadow: 0 0 0 #34B994;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1),
                box-shadow .18s cubic-bezier(.34,1.56,.64,1),
                background-color .18s ease;
    will-change: transform;
}

#contact a:hover,
#searchBar button:hover,
#fullArticle .admin-edit:hover,
#contactModal input[type=submit].btn:hover,
button.btn:hover,
input[type=submit].btn:hover {
    transform: translate(-3px, -3px);
    box-shadow: 5px 5px 0 #34B994;
}

#contact a:active,
#searchBar button:active,
#fullArticle .admin-edit:active,
#contactModal input[type=submit].btn:active,
button.btn:active,
input[type=submit].btn:active {
    transform: translate(0, 0);
    box-shadow: 0 0 0 #34B994;
}

@media (prefers-reduced-motion: reduce) {
    #contact a, #searchBar button, button.btn, input[type=submit].btn {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* Article list inside a category — currently just bullets */
.articleList { list-style: none; margin: 24px 0 0; padding: 0; }

.articleList li {
    margin: 0;
    border-bottom: 1px solid #EEF2F4;
}

.articleList li:last-child { border-bottom: 0; }

.articleList li a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 4px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 26px;
    color: #143A40;
    transition: color .18s ease, padding-left .18s ease;
}

.articleList li a:hover {
    color: #07333A;
    padding-left: 10px;
    text-decoration: none;
}

.icon-article-doc:before { color: #16704F; font-size: 17px; }

/* Category head */
#categoryHead { margin-bottom: 8px; }

#categoryHead .sort select {
    border-radius: 999px;
    height: 40px;
    padding: 0 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

.contentWrapper p.descrip {
    font-size: 18px;
    line-height: 29px;
    color: #4A6360;
    margin: 14px 0 0;
    max-width: 68ch;
}

/* Sidebar current item takes the site's dot */
#sidebar .nav-list .active > a {
    display: flex;
    align-items: center;
    gap: 9px;
}

#sidebar .nav-list .active > a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #34B994;
    flex: none;
}

/* "Still need help" block at the foot of an article */
.contactUs {
    background: #EAF7F2;
    border: 1px solid #D7EDE4;
    border-radius: 22px;
    padding: 30px 34px;
    margin-top: 34px;
    text-align: left;
}

.contactUs .help {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.4px;
    color: #0E202D;
    display: block;
    margin-bottom: 8px;
}

#sbContact, #sbContactMobile {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    color: #0F5A63;
}

.articleFoot time.lu { color: #5F7B75; font-size: 14px; }

.printArticle { color: #5F7B75; }

/* Empty search state */
#noResults {
    background: #FFFFFF;
    border: 1.5px solid #E4EDEA;
    border-radius: 22px;
    padding: 44px;
    text-align: center;
    color: #4A6360;
    font-size: 17px;
}


/* --------------------------------------------------------------------------
   14 · Accessible mode
   Mirrors the site's AODA toggle. The script sets data-a11y="on" on <html>;
   these rules are inert until it does, so the stylesheet is safe on its own.
   -------------------------------------------------------------------------- */

.lg-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
}

.lg-skip:focus {
    position: fixed;
    left: 12px;
    top: 12px;
    background: #07333A;
    color: #FFFFFF;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 22px;
    border-radius: 999px;
    outline: 3px solid #34B994;
}

.lg-a11y-btn {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #143A40;
    background: #FFFFFF;
    border: 1.5px solid #07333A;
    padding: 13px 20px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(7,51,58,.18);
}

.lg-a11y-btn[aria-pressed="true"] { background: #07333A; color: #FFFFFF; }

[data-a11y="on"] a { text-decoration: underline; text-underline-offset: 3px; }
[data-a11y="on"] :focus-visible { outline: 3px solid #0B5B45 !important; outline-offset: 3px; }
[data-a11y="on"] .article-count,
[data-a11y="on"] #fullArticle table th,
[data-a11y="on"] .collection-category .category h3::before {
    text-transform: none;
    letter-spacing: 0;
    color: #3F544F;
}
[data-a11y="on"] p,
[data-a11y="on"] li { line-height: 1.7 !important; }
[data-a11y="on"] #docsSearch { background-image: none; }
[data-a11y="on"] .navbar .nav li a { color: #143A40; }
[data-a11y="on"] *,
[data-a11y="on"] *::before,
[data-a11y="on"] *::after {
    animation: none !important;
    transition: none !important;
}
[data-a11y="on"] #contact a,
[data-a11y="on"] #searchBar button,
[data-a11y="on"] button.btn { transform: none !important; box-shadow: none !important; }

@media (max-width: 600px) {
    .lg-a11y-btn { left: 14px; bottom: 14px; font-size: 13px; padding: 10px 15px; }
}


/* --------------------------------------------------------------------------
   15 · Readability
   Measured against the live articles: no H2s anywhere, heavy nesting (one
   article has 12 lists in 331 words) and bold on roughly 1 word in 10. CSS
   can carry the structure that exists; the rest is an authoring fix.
   -------------------------------------------------------------------------- */

/* Numbered procedures become real steps. Most of these articles are
   "do this, then this", and a plain decimal marker does not carry that. */
#fullArticle ol {
    list-style: none;
    counter-reset: lg-step;
    padding-left: 0;
    margin: 0 0 26px;
}

#fullArticle ol > li {
    counter-increment: lg-step;
    position: relative;
    padding: 0 0 0 46px;
    margin-bottom: 18px;
    min-height: 32px;
}

#fullArticle ol > li::before {
    content: counter(lg-step);
    position: absolute;
    left: 0;
    top: -1px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #EAF7F2;
    border: 1.5px solid #34B994;
    color: #16704F;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 800;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
}

/* a nested list inside a step must not restart the numbering */
#fullArticle ol ol { counter-reset: none; margin-top: 12px; }

/* Nested bullets: each level gets its own marker and a shallower indent,
   so three levels deep is still legible. */
#fullArticle ul { padding-left: 24px; }
#fullArticle ul ul,
#fullArticle ol ul { margin-top: 10px; margin-bottom: 6px; padding-left: 22px; }

#fullArticle ul ul > li::before {
    background: none;
    border: 1.5px solid #34B994;
    width: 6px;
    height: 6px;
    top: 10px;
}

#fullArticle ul ul ul > li::before {
    background: #8FA6A2;
    border: 0;
    width: 5px;
    height: 5px;
}

/* Headings carry more weight now that they are the only wayfinding. */
#fullArticle h3 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: #0E202D;
}

#fullArticle h3::before {
    content: "";
    width: 20px;
    height: 3px;
    border-radius: 8px;
    background: #34B994;
    flex: none;
    position: relative;
    top: -5px;
}

/* Screenshots are the main teaching tool in these articles, so let them
   breathe and sit on a ground rather than floating in the text. */
#fullArticle img {
    width: 100%;
    margin: 30px 0;
    padding: 10px;
    background: #F7FAF9;
    border: 1px solid #E4EDEA;
    border-radius: 18px;
}

/* Auto table of contents, injected by the script when an article has
   three or more headings. Inert until then. */
.lg-toc {
    background: #F7FAF9;
    border: 1px solid #E4EDEA;
    border-radius: 18px;
    padding: 24px 28px;
    margin: 0 0 34px;
    max-width: 68ch;
}

.lg-toc-title {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #5F7B75;
    margin-bottom: 14px;
}

.lg-toc ol { margin: 0; counter-reset: lg-toc; }

.lg-toc ol > li {
    counter-increment: lg-toc;
    padding: 0;
    margin: 0 0 9px;
    min-height: 0;
}

.lg-toc ol > li:last-child { margin-bottom: 0; }
.lg-toc ol > li::before { display: none; }

.lg-toc a {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #0F5A63;
    text-decoration: none;
}

.lg-toc a:hover { color: #07333A; text-decoration: underline; text-underline-offset: 3px; }

[data-a11y="on"] .lg-toc-title { text-transform: none; letter-spacing: 0; color: #3F544F; }

@media (max-width: 768px) {
    #fullArticle ol > li { padding-left: 40px; }
    #fullArticle ol > li::before { width: 26px; height: 26px; line-height: 24px; font-size: 13px; }
    .lg-toc { padding: 20px 22px; }
}