/* ==========================================================================
   Venpo · glossary (/glossary, /glossary/category/{slug}, /glossary/{slug})

   Loaded AFTER pub/pub.css, which supplies the tokens on :root and a few
   bare-element rules (`section{padding:64px 0 0}` above all). Every rule
   below is scoped under .gls, and the inherited section padding is reset.
   A term page's body is the author's HTML (h2, h3, p, ul, ol, li, a,
   strong, em, blockquote only — glossary:import refuses anything else), so
   .gls-body styles those elements and nothing more.

   Type: the glossary downloads no webfont (Val, 31 Oct), like every public
   page since 2 Nov: the text is the visitor's system font, and the three
   small mono labels take the system mono stack.
   ========================================================================== */

.gls { background: var(--paper); padding-bottom: 8px; }
.gls section { padding: 0; }
.gls [hidden] { display: none !important; }
.gls-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

.gls-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--purple);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    box-shadow: var(--shadow-n);
    transition: background .15s ease;
}
.gls-btn:hover { background: var(--purple-deep); color: #fff; }
.gls-btn--light { background: #fff; color: var(--ink); }
.gls-btn--light:hover { background: var(--purple-soft); color: var(--ink); }

.gls-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 34px 0 22px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
}
.gls-crumb a { color: var(--muted); }
.gls-crumb a:hover { color: var(--purple); }
.gls-sep { color: var(--faint); }

/* --------------------------------------------------------------------------
   Term page
   -------------------------------------------------------------------------- */
.gls-term { max-width: 820px; }

/* "On this page": a folded box under the definition, and from 1100px a
   column of its own that stays in view, the section being read marked
   (pub/glossary-toc.js), as the reading column keeps its ~790px measure. */
.gls-toc-box { margin: 26px 0 0; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.gls-toc-box summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    list-style: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}
.gls-toc-box summary::-webkit-details-marker { display: none; }
.gls-toc-box summary::after { content: '+'; font-size: 20px; line-height: 1; font-weight: 400; color: var(--muted); }
.gls-toc-box[open] summary::after { content: '\2212'; }
.gls-toc-box ul { margin: 0; padding: 0 0 10px; list-style: none; }
.gls-toc-box li a { display: block; padding: 8px 18px; font-size: 14px; line-height: 1.4; color: var(--body); }
.gls-toc-box li a:hover { color: var(--purple); }
.gls-block > h2[id] { scroll-margin-top: 90px; }

@media (prefers-reduced-motion: no-preference) {
    html:has(.gls-toc) { scroll-behavior: smooth; }
}

@media (min-width: 1100px) {
    .gls-term { max-width: 1180px; }
    .gls-term-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 248px;
        grid-template-areas: "head toc" "body toc";
        column-gap: 64px;
    }
    .gls-term-head { grid-area: head; }
    .gls-term-body { grid-area: body; }
    .gls-toc { grid-area: toc; }
    .gls-toc-nav { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; }
    .gls-toc-box { margin: 6px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
    .gls-toc-box summary { padding: 0 0 12px; pointer-events: none; cursor: default; }
    .gls-toc-box summary::after,
    .gls-toc-box[open] summary::after { content: none; }
    .gls-toc-box ul { padding: 0; border-left: 2px solid var(--border); }
    .gls-toc-box li a { margin-left: -2px; padding: 9px 14px; border-left: 3px solid transparent; }
    .gls-toc-box li a.is-current { border-left-color: var(--purple); background: var(--purple-soft); color: var(--ink); font-weight: 600; }
}

/* Uxify's title size (Val, 1 Nov), a clear step above the 38px section
   headings; on phones Apple's iOS large title, 34px over 28px headings. */
.gls-title {
    margin: 0;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.026em;
    color: var(--ink);
    overflow-wrap: anywhere;
    text-wrap: balance;
}

/* The short definition as a speech bubble in venpo.com's navy, with an
   open-book badge tilted on its top edge (Val, 31 Oct, from a Clay-style
   mock). The bubble starts on the content's left edge like the text around
   it; the badge sits inside that edge. Flat, no shadow. */
.gls-definition { position: relative; margin: 36px 0 0; }
.gls-definition-badge {
    position: absolute;
    top: -18px;
    left: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 3px solid var(--paper);
    border-radius: 12px;
    background: #0A2540;
    color: #fff;
    transform: rotate(-6deg);
}
.gls-definition-text {
    margin: 0;
    padding: 32px 28px 24px;
    border-radius: 16px;
    background: #0A2540;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -.005em;
    color: #fff;
    text-wrap: pretty;
}

/* Text spacing (Val, 31 Oct, after comparing with Uxify's blog against the
   readability standards): our column (788px, about 100 characters a line;
   Val kept it on 1 Nov) and our contrast stay; the lines open to 1.65, a
   paragraph is followed by 24px (a clear step up from the line spacing) and
   headings are larger with room around them, so a page reads in sections.
   Section headings are Uxify's size (Val, 1 Nov): 38px; on phones they
   follow Apple's iOS type sizes instead, 28px. */
.gls-body { margin-top: 12px; font-size: 16px; line-height: 1.65; color: var(--body); overflow-wrap: break-word; }
.gls-body h2 {
    margin: 56px 0 20px;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--ink);
}
.gls-body > h2:first-child { margin-top: 44px; }
.gls-body h3 { margin: 36px 0 12px; font-size: 20px; font-weight: 600; line-height: 1.35; color: var(--ink); }
/* The public header is fixed: a jump to a section heading lands below it. */
.gls-body h2[id], .gls-body h3[id] { scroll-margin-top: 90px; }
.gls-body p { margin: 0 0 24px; text-wrap: pretty; }
.gls-body ul, .gls-body ol { margin: 0 0 24px; padding-left: 22px; }
.gls-body li { margin: 0 0 12px; padding-left: 2px; }
.gls-body li::marker { color: var(--purple); }
.gls-body strong { color: var(--ink); font-weight: 600; }
.gls-body a { color: var(--purple); text-decoration: underline; text-decoration-color: var(--purple-line); text-underline-offset: 3px; }
.gls-body a:hover { text-decoration-color: var(--purple); }
.gls-body blockquote {
    margin: 0 0 24px;
    padding: 16px 20px;
    border-left: 3px solid var(--purple);
    border-radius: 0 10px 10px 0;
    background: #fff;
    box-shadow: var(--shadow);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink);
}

.gls-start { margin: 34px 0 0; }

.gls-block { margin-top: 56px; }
.gls-block > h2 {
    margin: 0 0 20px;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--ink);
}
.gls-faq h3 { margin: 28px 0 8px; font-size: 16.5px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.gls-faq p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--body); text-wrap: pretty; }

.gls-sources { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--body); }
.gls-sources li { margin: 0 0 6px; overflow-wrap: anywhere; }

.gls-reviewed { margin: 56px 0 72px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.gls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gls-grid--two { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.gls-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow);
    color: var(--body);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.gls-card:hover { border-color: var(--purple-line); box-shadow: var(--shadow-h); color: var(--body); }
.gls-card-cat {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--purple);
}
.gls-card-title { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.gls-card-def { font-size: 13.5px; line-height: 1.5; color: var(--body); }

/* --------------------------------------------------------------------------
   Hub and category pages
   -------------------------------------------------------------------------- */
.gls-hero .gls-wrap { padding-top: 64px; padding-bottom: 40px; }
.gls-hero h1 {
    margin: 0;
    max-width: 820px;
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -1.6px;
    color: var(--ink);
    text-wrap: balance;
}
.gls-hero p { margin: 18px 0 0; max-width: 640px; font-size: 17px; line-height: 1.55; color: var(--body); text-wrap: pretty; }
.gls-hero--category .gls-wrap { padding-top: 0; }

.gls-h2 { margin: 0 0 18px; font-size: 24px; font-weight: 650; letter-spacing: -.5px; color: var(--ink); }
.gls-h2--other { margin-top: 56px; font-size: 18px; }

.gls-start-here .gls-wrap { padding-top: 40px; padding-bottom: 56px; }

.gls-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.gls-cats a {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: var(--body);
}
.gls-cats a:hover { border-color: var(--purple-line); color: var(--purple); }

/* Hub hero, in venpo.com's own hero language (its tokens below, read off
   the live site): a plain light page, a centred navy headline, slate lede,
   and the redline as the brand mark (venpo.com strikes "not" in red in its
   own headline). Around the title, slips of clauses as they change, each
   opening its term. From 1280px the slips float at the edges and each
   strike is drawn once on load; narrower, they are one row to swipe under
   the letters. */
.gls-hero--hub {
    --gls-navy: #0A2540;
    --gls-slate: #425466;
    --gls-accent: #635BFF;
    --gls-red: #D62828;
    --gls-green: #0F8A5F;
    --gls-line: #E3E8EE;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #FCFCFD;
    border-bottom: 1px solid var(--gls-line);
}
.gls-hero--hub .gls-hero-core { position: relative; padding-top: 92px; padding-bottom: 68px; text-align: center; }
.gls-hero--hub h1 {
    margin: 0 auto;
    max-width: 760px;
    font-size: clamp(38px, 5.6vw, 64px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--gls-navy);
}
.gls-hero--hub p { margin: 20px auto 0; max-width: 560px; font-size: 18px; color: var(--gls-slate); }
/* Two lines instead of three where the slips leave the room. */
@media (min-width: 1440px) {
    .gls-hero--hub h1 { max-width: 900px; }
}

.gls-search { position: relative; max-width: 600px; margin: 34px auto 0; }
.gls-search input {
    width: 100%;
    height: 58px;
    padding: 0 58px 0 52px;
    border: 1px solid var(--gls-line, var(--border));
    border-radius: 999px;
    background: #fff;
    font-size: 16.5px;
    color: var(--gls-navy, var(--ink));
    box-shadow: 0 1px 2px rgba(10, 37, 64, .05), 0 8px 24px -12px rgba(10, 37, 64, .18);
}
.gls-search input::placeholder { color: #8792A2; }
.gls-search input:focus { outline: 3px solid rgba(99, 91, 255, .18); outline-offset: 0; border-color: var(--gls-accent, var(--purple)); }
.gls-search-icon {
    position: absolute;
    top: 50%;
    left: 20px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    color: var(--gls-slate, var(--muted));
    pointer-events: none;
}
.gls-search-key {
    position: absolute;
    top: 50%;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    transform: translateY(-50%);
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--paper);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    pointer-events: none;
    transition: opacity .15s ease;
}
.gls-search input:focus ~ .gls-search-key,
.gls-search input:not(:placeholder-shown) ~ .gls-search-key { opacity: 0; }
@media (hover: none) { .gls-search-key { display: none; } }

.gls-letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 3px; max-width: 640px; margin: 24px auto 0; }
.gls-letters a, .gls-letters span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 32px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
}
.gls-letters a { color: var(--gls-navy, var(--ink)); }
.gls-letters a:hover { background: rgba(99, 91, 255, .08); color: var(--gls-accent, var(--purple)); }
.gls-letters span { color: var(--faint); }

.gls-slips {
    position: relative;
    order: 2;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 20px 36px;
    scroll-snap-type: x proximity;
    scroll-padding-left: 20px;
    scrollbar-width: none;
}
.gls-slips::-webkit-scrollbar { display: none; }
.gls-slip {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 210px;
    padding: 12px 14px 13px;
    border: 1px solid var(--gls-line, var(--border));
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(10, 37, 64, .04), 0 10px 26px -14px rgba(10, 37, 64, .2);
    scroll-snap-align: start;
    transition: transform .2s ease, box-shadow .2s ease;
}
.gls-slip:hover { box-shadow: 0 1px 2px rgba(10, 37, 64, .05), 0 16px 34px -14px rgba(10, 37, 64, .28); }
.gls-slip-term { font-size: 12px; font-weight: 600; color: var(--gls-accent, var(--purple)); }
.gls-slip-clause { font-size: 13.5px; line-height: 1.55; color: var(--gls-navy, var(--ink)); }
/* venpo.com's redline: the struck word in red with a heavy strike, no fill. */
.gls-slip del {
    color: var(--gls-red);
    text-decoration: line-through;
    text-decoration-color: var(--gls-red);
    text-decoration-thickness: 2px;
}
.gls-slip ins {
    color: var(--gls-green);
    font-weight: 600;
    text-decoration: none;
}

@media (min-width: 1280px) {
    .gls-slips {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        display: block;
        width: min(1440px, 100%);
        padding: 0;
        overflow: visible;
        transform: translateX(-50%);
        pointer-events: none;
    }
    .gls-slip { position: absolute; transform: rotate(var(--gls-tilt)); pointer-events: auto; }
    .gls-slip:hover { transform: rotate(0deg) translateY(-2px); }
    .gls-slip--1 { top: 58px; left: 44px; --gls-tilt: -4deg; }
    .gls-slip--2 { top: 46px; right: 52px; --gls-tilt: 3deg; }
    .gls-slip--3 { top: 228px; left: 14px; --gls-tilt: 2.5deg; }
    .gls-slip--4 { top: 236px; right: 18px; --gls-tilt: -2deg; }
    .gls-slip--5 { bottom: 30px; left: 28px; --gls-tilt: -1.5deg; }
    .gls-slip--6 { bottom: 38px; right: 30px; --gls-tilt: 4deg; }
}

/* Wide enough for the 26 letters (and #) on one line, as an index reads. */
@media (min-width: 1100px) {
    .gls-letters { flex-wrap: nowrap; max-width: none; gap: 2px; }
    .gls-letters a, .gls-letters span { width: 28px; }
}

/* One moment on load: each slip's strike is drawn, then the new words appear. */
@media (min-width: 1280px) and (prefers-reduced-motion: no-preference) {
    .gls-slip del { position: relative; text-decoration: none; }
    .gls-slip del::after {
        content: '';
        position: absolute;
        top: 55%;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--gls-red);
        transform: scaleX(0);
        transform-origin: left center;
        animation: gls-strike .45s ease-out forwards;
        animation-delay: calc(var(--gls-slip-delay) + 400ms);
    }
    .gls-slip ins { opacity: 0; animation: gls-insert .4s ease-out forwards; animation-delay: calc(var(--gls-slip-delay) + 820ms); }
}
@keyframes gls-strike { to { transform: scaleX(1); } }
@keyframes gls-insert { to { opacity: 1; } }

.gls-empty { margin: 8px 0 0; font-size: 15px; color: var(--muted); }

/* Topics: one tile per category, opening its page. */
.gls-topics .gls-wrap { padding-bottom: 56px; }
.gls-topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.gls-topic {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow);
    transition: box-shadow .15s ease, border-color .15s ease;
}
.gls-topic:hover { border-color: var(--purple-line); box-shadow: var(--shadow-h); }
.gls-topic-name { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.gls-topic-intro { font-size: 13px; line-height: 1.5; color: var(--muted); }
.gls-topic-count {
    margin-top: auto;
    padding-top: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--purple);
}

/* All terms A to Z: a letter bar, then each letter's names in columns. */

.gls-letter { scroll-margin-top: 80px; }
.gls-letter summary {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 26px 0 10px;
    border-bottom: 1px solid var(--border);
    list-style: none;
    pointer-events: none;
}
.gls-letter summary::-webkit-details-marker { display: none; }
.gls-letter-key { font-size: 22px; font-weight: 700; color: var(--ink); }
.gls-letter-count { font-size: 12px; color: var(--muted); }

.gls-az { margin: 10px 0 0; padding: 0; list-style: none; columns: 3 220px; column-gap: 32px; }
.gls-az li { break-inside: avoid; padding: 5px 0; }
.gls-az a { font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.gls-az a:hover { color: var(--purple); }
.gls-az-def { display: none; }

/* While the visitor types: only the matching terms, with their definitions. */
.gls.is-searching .gls-start-here,
.gls.is-searching .gls-topics,
.gls.is-searching .gls-alpha .gls-h2,
.gls.is-searching .gls-slips,
.gls.is-searching .gls-letters,
.gls.is-searching .gls-letter-count { display: none; }
.gls.is-searching .gls-alpha .gls-wrap { padding-top: 8px; }
.gls.is-searching .gls-az { columns: 1; }
.gls.is-searching .gls-az li { padding: 12px 0; border-bottom: 1px solid var(--soft); }
.gls.is-searching .gls-az a { font-weight: 600; }
.gls.is-searching .gls-az-def { display: block; margin-top: 3px; max-width: 760px; font-size: 13.5px; line-height: 1.5; color: var(--body); }

.gls-cta .gls-wrap { padding-top: 72px; padding-bottom: 80px; }
.gls-cta-box {
    padding: 44px 48px;
    border-radius: 18px;
    background: var(--ink);
    color: #fff;
}
.gls-cta-box h2 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.7px; color: #fff; }
.gls-cta-box p { margin: 12px 0 24px; max-width: 560px; font-size: 16px; line-height: 1.6; color: #d9d6e0; }

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .gls-wrap { padding: 0 20px; }
    .gls-crumb { padding-top: 24px; }
    .gls-hero .gls-wrap { padding-top: 40px; padding-bottom: 28px; }
    .gls-hero--category .gls-wrap { padding-top: 0; }
    .gls-definition { margin-top: 32px; }
    .gls-definition-badge { top: -16px; left: 18px; width: 38px; height: 38px; }
    .gls-definition-badge svg { width: 19px; height: 19px; }
    .gls-definition-text { padding: 28px 20px 20px; font-size: 17px; }
    .gls-title { font-size: 34px; }
    .gls-body h2, .gls-block > h2 { margin-top: 44px; font-size: 28px; }
    .gls-block > h2 { margin-top: 0; }
    .gls-body p, .gls-body ul, .gls-body ol, .gls-body blockquote { margin-bottom: 20px; }
    .gls-body h2[id], .gls-body h3[id] { scroll-margin-top: 76px; }
    .gls-grid, .gls-grid--two { grid-template-columns: 1fr; }
    /* The category page's "Other categories" row: one row that scrolls
       sideways instead of a wall of wrapped links, faded at the right edge
       so it reads as more to swipe. It bleeds to the screen edge (negative
       margin = .gls-wrap's padding) so a link is not cut short of it. */
    .gls-cats {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -20px;
        padding: 2px 20px 6px;
        scroll-snap-type: x proximity;
        scroll-padding-left: 20px;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    }
    .gls-cats::-webkit-scrollbar { display: none; }
    .gls-cats a { flex: none; white-space: nowrap; scroll-snap-align: start; padding: 6px 11px; font-size: 12.5px; }
    .gls-hero--hub .gls-hero-core { padding-top: 48px; padding-bottom: 32px; }
    .gls-hero--hub h1 { letter-spacing: -1.2px; }
    .gls-hero--hub p { font-size: 16px; }
    .gls-search { margin-top: 26px; }
    .gls-search input { height: 52px; font-size: 16px; }
    .gls-letters { gap: 2px 1px; }
    .gls-letters a, .gls-letters span { width: 24px; height: 30px; font-size: 14px; }
    /* Topics: name and count on one line, the intro is on the topic's page. */
    .gls-topic-grid { gap: 8px; }
    .gls-topic { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
    .gls-topic-intro { display: none; }
    .gls-topic-count { margin: 0; padding: 0; white-space: nowrap; }
    /* A to Z: the letters fold (pub/glossary-search.js closes them here); a
       letter in the hero opens its row. */
    .gls-letter summary { pointer-events: auto; cursor: pointer; padding: 16px 0 12px; }
    .gls-letter summary::after { content: '+'; margin-left: auto; font-size: 20px; line-height: 1; color: var(--muted); }
    .gls-letter[open] summary::after { content: '\2212'; }
    .gls.is-searching .gls-letter summary::after { content: none; }
    .gls-az { columns: 1; }
    .gls-az li { padding: 8px 0; }
    .gls-az a { font-size: 15px; }
    .gls-cta .gls-wrap { padding-top: 48px; padding-bottom: 56px; }
    .gls-cta-box { padding: 30px 24px; }
    .gls-cta-box h2 { font-size: 23px; }
}

/* Under a section heading whose term has a page of its own (GlossaryContents). */
.gls-body .gls-fullpage { margin: -4px 0 14px; font-size: 14.5px; }
.gls-body .gls-fullpage a { font-weight: 600; text-decoration: none; }
.gls-body .gls-fullpage a:hover { text-decoration: underline; }