/* Level Up CAD/CAM knowledge base theme.

   Ported from the Wix web components Mike supplied (levelup-kb-article-header,
   levelup-kb-article-footer, levelup-kb-directory). Every colour, radius,
   shadow, letter-spacing and breakpoint below is taken VERBATIM from those
   components rather than re-derived by eye, so the Ghost article and the Wix
   pages are the same design rather than a near-miss.

   ⚠ NOTE THE PALETTE. These components use #12aeea on dark navy — NOT the
   #00a886 teal of the Freshdesk portal at support.levelupcadcam.com. The two
   Level Up support surfaces do not currently match each other; this theme
   follows the components, because they are the newer KB design and are what
   Mike asked to adopt. */

:root {
    --lu-accent:        #12aeea;
    --lu-accent-deep:   #087ba8;
    --lu-accent-soft:   #67d0f5;
    --lu-ink:           #071b30;
    --lu-ink-soft:      #22384f;
    --lu-muted:         #667487;
    --lu-muted-2:       #647285;
    --lu-page:          #f6f8fb;
    --lu-card:          #ffffff;
    --lu-line:          #dce4ec;
    --lu-line-2:        #dce5ed;
    --lu-font:          Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--lu-page);
    color: var(--lu-ink);
    font-family: var(--lu-font);
    font-size: 16px;
    line-height: 1.6;
}

img { max-width: 100%; height: auto; }

/* ── Article hero — from levelup-kb-article-header ──────────────────────── */

.article-hero {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 430px;
    padding: 62px 34px 72px;
    overflow: hidden;
    background:
        radial-gradient(circle at 75% 115%, rgba(18, 174, 234, 0.27), transparent 38%),
        linear-gradient(120deg, #06182b 0%, #09243d 58%, #0b2c49 100%);
    color: #ffffff;
}

.article-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 52px 52px;
    pointer-events: none;
}

.article-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    color: rgba(225, 238, 247, 0.72);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: color 180ms ease, transform 180ms ease;
}

.back-link:hover { color: #ffffff; transform: translateX(-3px); }
.back-link svg { width: 16px; height: 16px; fill: currentColor; }

.category-row { margin-bottom: 25px; }

.category-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 15px;
    border: 1px solid rgba(86, 200, 242, 0.34);
    border-radius: 999px;
    background: rgba(18, 174, 234, 0.11);
    color: var(--lu-accent-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
    line-height: 1;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.article-title {
    max-width: 1040px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(43px, 5.25vw, 66px);
    font-weight: 750;
    line-height: 1.06;
    letter-spacing: -2.7px;
    text-wrap: balance;
}

.article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 30px;
    color: rgba(225, 237, 246, 0.66);
    font-size: 13px;
    font-weight: 600;
}

.meta-item { display: inline-flex; align-items: center; gap: 7px; }
.meta-item svg { width: 16px; height: 16px; fill: currentColor; }
.meta-divider { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.34); }

/* ── Article body ───────────────────────────────────────────────────────── */

.article-body {
    padding: 54px 34px 20px;
    background: var(--lu-page);
}

.article-body .article-container {
    max-width: 820px;          /* ~70ch of readable measure, not the hero's 1120 */
    padding: 44px 46px 52px;
    border: 1px solid var(--lu-line-2);
    border-radius: 18px;
    background: var(--lu-card);
    box-shadow: 0 10px 30px rgba(7, 27, 48, 0.045);
}

.article-body h2,
.article-body h3,
.article-body h4 {
    margin: 38px 0 12px;
    color: var(--lu-ink);
    font-weight: 760;
    line-height: 1.25;
    letter-spacing: -0.6px;
    scroll-margin-top: 22px;   /* so an anchor jump does not weld to the top edge */
}

.article-body h2 { font-size: 27px; }
.article-body h3 { font-size: 21px; }
.article-body h4 { font-size: 17px; }
.article-body > .article-container > *:first-child { margin-top: 0; }

.article-body p,
.article-body li { color: var(--lu-ink-soft); font-size: 16px; line-height: 1.72; }
.article-body p { margin: 0 0 17px; }
.article-body ul, .article-body ol { margin: 0 0 19px; padding-left: 23px; }
.article-body li { margin-bottom: 8px; }
.article-body strong { color: var(--lu-ink); font-weight: 700; }
.article-body a { color: var(--lu-accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--lu-accent); }

.article-body figure { margin: 28px 0; }
.article-body figure img {
    display: block;
    width: 100%;
    border: 1px solid var(--lu-line);
    border-radius: 12px;
}
.article-body figcaption {
    margin-top: 10px;
    color: var(--lu-muted);
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
}

.article-body table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15px; }
.article-body th, .article-body td { padding: 10px 12px; border: 1px solid var(--lu-line); text-align: left; }
.article-body th { background: #f2f6fa; font-weight: 700; }

.article-body blockquote {
    margin: 0 0 20px;
    padding: 14px 18px;
    border-left: 3px solid var(--lu-accent);
    background: rgba(18, 174, 234, 0.06);
    color: var(--lu-ink-soft);
}

.article-body code {
    padding: 2px 6px;
    border-radius: 5px;
    background: #eef3f8;
    font-size: 14px;
}

/* Table of contents injected by the migration converter. Styled here so the
   generated markup needs no inline CSS of its own. */
.kb-toc {
    margin: 0 0 34px;
    padding: 20px 24px;
    border: 1px solid var(--lu-line);
    border-radius: 14px;
    background: #fbfdff;
}
.kb-toc-title { margin: 0 0 11px; color: var(--lu-ink); font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase; }
.kb-toc ul { margin: 0; padding: 0; list-style: none; }
.kb-toc li { margin: 0 0 7px; }
.kb-toc li:last-child { margin-bottom: 0; }
.kb-toc a { color: var(--lu-accent-deep); font-size: 14px; font-weight: 650; text-decoration: none; }
.kb-toc a:hover { color: var(--lu-accent); text-decoration: underline; }
.kb-toc .toc-l1 { padding-left: 16px; }
.kb-toc .toc-l2 { padding-left: 32px; }

/* ── Footer — from levelup-kb-article-footer ────────────────────────────── */

.footer-section {
    width: 100%;
    padding: 68px 30px 84px;
    background: var(--lu-page);
    color: var(--lu-ink);
}

.footer-container { width: 100%; max-width: 1220px; margin: 0 auto; }

.related-section { width: 100%; margin-bottom: 54px; text-align: center; }

.section-title {
    margin: 0;
    color: var(--lu-ink);
    font-size: clamp(31px, 4vw, 44px);
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -1.8px;
}

.section-description {
    max-width: 590px;
    margin: 16px auto 32px;
    color: var(--lu-muted-2);
    font-size: 16px;
    line-height: 1.6;
}

.related-list {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

.related-count-1 .related-card { flex: 0 1 440px; width: 100%; max-width: 440px; }
.related-count-2 .related-card { flex: 0 1 440px; width: calc(50% - 10px); max-width: 440px; }
.related-count-3 .related-card { flex: 1 1 calc(33.333% - 14px); width: calc(33.333% - 14px); max-width: 393px; }

.related-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    padding: 25px;
    overflow: hidden;
    border: 1px solid var(--lu-line);
    border-radius: 17px;
    background: var(--lu-card);
    box-shadow: 0 10px 28px rgba(7, 27, 48, 0.055);
    color: inherit;
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.related-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(18, 174, 234, 0.08), transparent 44%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.related-card:hover {
    transform: translateY(-5px);
    border-color: rgba(18, 174, 234, 0.45);
    box-shadow: 0 18px 38px rgba(7, 27, 48, 0.10);
}
.related-card:hover::before { opacity: 1; }
.related-card:focus-visible { outline: 3px solid rgba(18, 174, 234, 0.35); outline-offset: 3px; }

.card-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin-bottom: 20px;
    border: 1px solid rgba(18, 174, 234, 0.16);
    border-radius: 13px;
    background: rgba(18, 174, 234, 0.09);
    color: var(--lu-accent-deep);
}
.card-icon svg { width: 22px; height: 22px; fill: currentColor; }

.card-category {
    position: relative; z-index: 1; display: block;
    margin-bottom: 10px;
    color: var(--lu-accent-deep);
    font-size: 10px; font-weight: 700; letter-spacing: 1px; line-height: 1.35; text-transform: uppercase;
}

.card-title {
    position: relative; z-index: 1; display: block;
    color: var(--lu-ink);
    font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.4px;
}

.card-description {
    position: relative; z-index: 1; display: -webkit-box;
    margin-top: 12px;
    overflow: hidden;
    color: var(--lu-muted);
    font-size: 14px; line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.card-link {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: auto; padding-top: 23px;
    color: var(--lu-accent-deep);
    font-size: 13px; font-weight: 700;
}
.card-link svg { width: 14px; height: 14px; fill: currentColor; transition: transform 180ms ease; }
.related-card:hover .card-link svg { transform: translateX(3px); }

.support-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    width: 100%;
    max-width: 1010px;
    min-height: 210px;
    margin: 0 auto;
    padding: 42px 48px;
    overflow: hidden;
    border-radius: 20px;
    background:
        radial-gradient(circle at 88% 110%, rgba(18, 174, 234, 0.42), transparent 40%),
        linear-gradient(120deg, #061b34, #0a4f82);
    box-shadow: 0 20px 45px rgba(7, 27, 48, 0.18);
    color: #ffffff;
}

.support-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.cta-content { position: relative; z-index: 1; max-width: 630px; }
.cta-title { margin: 0; color: #ffffff; font-size: clamp(27px, 3vw, 35px); font-weight: 750; line-height: 1.15; letter-spacing: -1.1px; }
.cta-description { margin: 13px 0 0; color: rgba(231, 241, 248, 0.77); font-size: 15px; line-height: 1.65; }

.cta-button {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    min-height: 49px;
    padding: 13px 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: var(--lu-accent);
    box-shadow: 0 10px 24px rgba(18, 174, 234, 0.28);
    color: #061b34;
    font-size: 14px; font-weight: 800; text-decoration: none;
    transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.cta-button:hover { transform: translateY(-2px); background: #43c2ef; box-shadow: 0 15px 30px rgba(18, 174, 234, 0.34); }
.cta-button:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.55); outline-offset: 3px; }

/* ── Directory (index) — from levelup-kb-directory ──────────────────────── */

.kb-hero {
    position: relative;
    padding: 76px 30px 88px;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 120%, rgba(18, 174, 234, 0.30), transparent 42%),
        linear-gradient(120deg, #06182b, #0b416a);
    color: #ffffff;
}
.kb-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 52px 52px;
    pointer-events: none;
}
.hero-container { position: relative; z-index: 1; width: 100%; max-width: 1120px; margin: 0 auto; text-align: center; }
.hero-label {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 33px; margin-bottom: 19px; padding: 7px 14px;
    border: 1px solid rgba(86, 200, 242, 0.30); border-radius: 999px;
    background: rgba(18, 174, 234, 0.10);
    color: var(--lu-accent-soft);
    font-size: 11px; font-weight: 700; letter-spacing: 1.25px; text-transform: uppercase;
}
.hero-title { margin: 0; font-size: clamp(43px, 6vw, 70px); font-weight: 760; line-height: 1.05; letter-spacing: -3px; }
.hero-description { max-width: 720px; margin: 21px auto 0; color: rgba(228, 239, 247, 0.77); font-size: 18px; line-height: 1.65; }

.search-panel {
    position: relative; z-index: 3;
    width: calc(100% - 40px); max-width: 1120px;
    margin: -34px auto 0;
    padding: 20px;
    border: 1px solid var(--lu-line-2); border-radius: 18px;
    background: var(--lu-card);
    box-shadow: 0 18px 45px rgba(7, 27, 48, 0.13);
}
.search-row { display: grid; grid-template-columns: minmax(0, 1fr) 215px auto; gap: 12px; }
.search-control { position: relative; width: 100%; }
.search-icon { position: absolute; top: 50%; left: 17px; width: 20px; height: 20px; color: #778699; transform: translateY(-50%); pointer-events: none; }
.search-icon svg { width: 100%; height: 100%; fill: currentColor; }
.search-input, .filter-select {
    width: 100%; height: 51px;
    border: 1px solid var(--lu-line); border-radius: 12px;
    background: #f9fbfd; color: var(--lu-ink);
    font-family: inherit; font-size: 14px; outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.search-input { padding: 0 17px 0 48px; }
.filter-select { padding: 0 38px 0 15px; cursor: pointer; }
.search-input:focus, .filter-select:focus { border-color: var(--lu-accent); background: #ffffff; box-shadow: 0 0 0 3px rgba(18, 174, 234, 0.13); }
.clear-button {
    min-width: 84px; height: 51px; padding: 0 17px;
    border: 1px solid var(--lu-line); border-radius: 12px;
    background: #ffffff; color: #526174;
    font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.clear-button:hover { border-color: var(--lu-accent); background: #f2fbff; color: var(--lu-accent-deep); }

.directory-section { padding: 62px 30px 82px; }
.directory-container { width: 100%; max-width: 1120px; margin: 0 auto; }
.results-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.results-count { color: #687588; font-size: 14px; }
.results-count strong { color: var(--lu-ink); }

.category-section {
    position: relative;
    margin-bottom: 25px;
    overflow: hidden;
    border: 1px solid var(--lu-line-2); border-radius: 18px;
    background: var(--lu-card);
    box-shadow: 0 10px 30px rgba(7, 27, 48, 0.045);
}
.category-section::before {
    content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--lu-accent), #79d8f6);
}
.category-header { display: flex; align-items: flex-start; gap: 15px; padding: 28px 29px 23px; border-bottom: 1px solid #e5ebf1; }
.category-icon {
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 45px; height: 45px;
    border: 1px solid rgba(18, 174, 234, 0.16); border-radius: 13px;
    background: rgba(18, 174, 234, 0.09); color: var(--lu-accent-deep);
}
.category-icon svg { width: 22px; height: 22px; fill: currentColor; }
.category-title { margin: 2px 0 7px; font-size: 20px; font-weight: 760; line-height: 1.25; letter-spacing: -0.4px; }
.category-description { max-width: 780px; margin: 0; color: var(--lu-muted); font-size: 14px; line-height: 1.55; }

.article-list { display: grid; gap: 10px; padding: 24px 29px 29px; }
.article-link {
    display: flex; align-items: flex-start; gap: 8px;
    color: var(--lu-ink-soft); font-size: 14px; font-weight: 650; line-height: 1.45;
    text-decoration: none;
    transition: color 150ms ease, transform 150ms ease;
}
.article-link:hover { color: var(--lu-accent-deep); transform: translateX(2px); }
.article-link svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px; fill: #8ba0b4; }

.empty-state {
    padding: 65px 28px;
    border: 1px solid var(--lu-line-2); border-radius: 18px;
    background: var(--lu-card); text-align: center;
}
.empty-icon {
    display: flex; align-items: center; justify-content: center;
    width: 55px; height: 55px; margin: 0 auto 18px;
    border-radius: 16px; background: rgba(18, 174, 234, 0.09); color: var(--lu-accent-deep);
}
.empty-icon svg { width: 27px; height: 27px; fill: currentColor; }
.empty-title { margin: 0; font-size: 23px; font-weight: 750; }
.empty-description { max-width: 520px; margin: 11px auto 0; color: #687588; font-size: 14px; line-height: 1.6; }

/* ── Responsive — breakpoints taken from the components ─────────────────── */

@media (max-width: 900px) {
    .related-count-2 .related-card,
    .related-count-3 .related-card { flex: 0 1 420px; width: calc(50% - 10px); max-width: 420px; }
    .related-card { min-height: 270px; }
    .support-cta { align-items: flex-start; flex-direction: column; padding: 37px; }
    .search-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .search-control { grid-column: 1 / -1; }
    .clear-button { width: 100%; }
}

@media (max-width: 767px) {
    .article-hero { min-height: 430px; padding: 46px 22px 56px; }
    .back-link { margin-bottom: 21px; }
    .category-row { margin-bottom: 21px; }
    .category-pill { font-size: 10px; letter-spacing: 1px; }
    .article-title { font-size: 40px; line-height: 1.08; letter-spacing: -1.9px; }
    .article-meta { align-items: flex-start; flex-direction: column; gap: 9px; margin-top: 25px; }
    .meta-divider { display: none; }
    .article-body { padding: 30px 16px 10px; }
    .article-body .article-container { padding: 28px 21px 32px; border-radius: 14px; }
}

@media (max-width: 700px) {
    .kb-hero { padding: 59px 21px 78px; }
    .hero-title { font-size: 44px; letter-spacing: -2px; }
    .hero-description { font-size: 16px; }
    .search-panel { width: calc(100% - 28px); padding: 15px; }
    .search-row { grid-template-columns: 1fr; }
    .search-control { grid-column: auto; }
    .directory-section { padding: 51px 16px 65px; }
    .category-header { padding: 26px 22px 21px; }
    .article-list { padding: 21px; }
}

@media (max-width: 650px) {
    .footer-section { padding: 55px 19px 65px; }
    .related-section { margin-bottom: 42px; }
    .section-title { font-size: 33px; }
    .related-count-1 .related-card,
    .related-count-2 .related-card,
    .related-count-3 .related-card { flex: 1 1 100%; width: 100%; max-width: 440px; }
    .related-card { min-height: 270px; padding: 23px; }
    .support-cta { min-height: 290px; padding: 32px 25px; border-radius: 18px; }
    .cta-title { font-size: 29px; }
    .cta-button { width: 100%; }
}

/* ── Koenig editor card classes ─────────────────────────────────────────────
   Ghost requires these; without them its theme validator warns that wide and
   full-width images will render unstyled, and any article using them breaks
   out of the reading column. */

.kg-width-wide  { max-width: 1040px; margin-left: calc(50% - 50vw + 50vw - 520px); }
.kg-width-full  { max-width: 100vw; margin-left: calc(50% - 50vw); }
.kg-image-card  { margin: 28px 0; }
.kg-image-card img { display: block; width: 100%; }
.kg-embed-card  { display: flex; justify-content: center; margin: 28px 0; }
.kg-embed-card iframe { max-width: 100%; }
.kg-gallery-container { display: flex; flex-direction: column; gap: 10px; margin: 28px 0; }
.kg-gallery-row { display: flex; gap: 10px; }
.kg-gallery-image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.kg-bookmark-card { margin: 28px 0; }
.kg-bookmark-container {
    display: flex; min-height: 148px;
    border: 1px solid var(--lu-line); border-radius: 14px;
    background: var(--lu-card); color: inherit; text-decoration: none;
}
.kg-bookmark-content { flex: 1 1 auto; padding: 20px; }
.kg-bookmark-title { color: var(--lu-ink); font-weight: 700; }
.kg-bookmark-description { margin-top: 6px; color: var(--lu-muted); font-size: 14px; }
.kg-bookmark-thumbnail { flex: 0 0 33%; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 14px 14px 0; }
.kg-callout-card { display: flex; gap: 12px; margin: 0 0 20px; padding: 16px 18px; border-radius: 12px; background: rgba(18, 174, 234, 0.07); }
.kg-toggle-card { margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--lu-line); border-radius: 12px; }
.kg-button-card { display: flex; justify-content: center; margin: 28px 0; }
.kg-btn {
    display: inline-flex; align-items: center; min-height: 46px; padding: 12px 22px;
    border-radius: 999px; background: var(--lu-accent); color: #061b34;
    font-weight: 800; text-decoration: none;
}

/* Full-bleed cards must not overflow the rounded article panel on mobile. */
@media (max-width: 900px) {
    .kg-width-wide, .kg-width-full { max-width: 100%; margin-left: 0; }
}

/* ── Phone optimisation ──────────────────────────────────────────────────────
   Measured on the pilot article at a true 390px viewport (an iframe — headless
   Edge clamps its own window to ~492px, which is not a phone and produced a
   misleading first reading): the layout itself is fine, nothing overflows. The
   ONE real problem is image scale. A 937px screenshot rendered ~316px wide,
   about a third of full size, and this KB is almost entirely screenshots of CAM
   software with small menu labels — exactly the detail the articles point at.

   Two changes, in order of how much they buy:
     1. tap-to-zoom (assets/js/kb.js) — the actual fix; full size on demand
     2. full-bleed figures below 767px — reclaims the 42px of card padding and
        the 32px page gutter, ~74px or +23% of image width, for free */

.kb-zoomable { cursor: zoom-in; }

.kb-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(4, 14, 26, 0.94);
    opacity: 0;
    transition: opacity 160ms ease;
    cursor: zoom-out;
    -webkit-overflow-scrolling: touch;
    overflow: auto;
}
.kb-lightbox.is-open { opacity: 1; }
.kb-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    /* On a phone the browser's own pinch-zoom takes over from here. */
}
.kb-lightbox-close {
    position: fixed;
    top: 12px;
    right: 14px;
    width: 44px;              /* 44px is the minimum comfortable tap target */
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.kb-lightbox-close:hover { background: rgba(255, 255, 255, 0.20); }

@media (prefers-reduced-motion: reduce) {
    .kb-lightbox { transition: none; }
}

@media (max-width: 767px) {
    /* Let screenshots use the full width of the phone. The card keeps its
       padding for TEXT, which still wants a comfortable measure — only figures
       break out. */
    .article-body { padding: 24px 0 10px; }
    .article-body .article-container {
        padding: 26px 16px 30px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
    .article-body figure,
    .article-body .kg-image-card {
        margin-left: -16px;
        margin-right: -16px;
    }
    .article-body figure img,
    .article-body .kg-image-card img {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
    .article-body figcaption { padding: 0 16px; }

    /* A tap hint, because a bare screenshot does not look interactive — but on
       the FIRST figure only. This article has 17 images; repeating the hint
       under every one of them is noise, and once the reader has learned the
       affordance they do not need telling again. */
    .article-body figure:first-of-type::after {
        content: "Tap any image to enlarge";
        display: block;
        margin-top: 6px;
        padding: 0 16px;
        color: var(--lu-muted);
        font-size: 12.5px;
        text-align: center;
    }

    .kb-toc { padding: 16px 18px; }
    .article-body h2 { font-size: 24px; }
    .article-body h3 { font-size: 19px; }
}


/* ── Phone typography ────────────────────────────────────────────────────────
   Raised on Mike's instruction 2026-08-13: 16px read as too small on a phone.
   I had measured 16px and called it 'already comfortable' — that was a
   judgement about a number, not about reading it on a handset, and the person
   holding the phone outranks the measurement.

   Sizes chosen to land on the house readability standard (17px base body,
   nothing below 12.5px anywhere) rather than picked to taste, and applied at
   the phone breakpoint only — the desktop article already reads at a
   comfortable measure inside its card. */

@media (max-width: 767px) {
    .article-body p,
    .article-body li      { font-size: 18px; line-height: 1.68; }
    .article-body ul,
    .article-body ol      { padding-left: 21px; }
    .article-body li      { margin-bottom: 10px; }

    .article-body h2      { font-size: 27px; letter-spacing: -0.5px; }
    .article-body h3      { font-size: 22px; }
    .article-body h4      { font-size: 18.5px; }

    .article-body figcaption { font-size: 15px; line-height: 1.5; }
    .article-body figure:first-of-type::after { font-size: 13.5px; }
    .article-body table      { font-size: 16px; }
    .article-body code       { font-size: 15.5px; }
    .article-body blockquote { font-size: 17px; }

    /* The contents list is the first thing a phone reader uses — it was the
       smallest text on the page at 14px, and it is all tap targets. */
    .kb-toc a          { font-size: 16.5px; line-height: 1.45; }
    .kb-toc li         { margin-bottom: 11px; }   /* thumb spacing, not just air */
    .kb-toc-title      { font-size: 14px; }

    /* Hero furniture: the byline row was 13px and the pill 10px. */
    .article-meta      { font-size: 14.5px; }
    /* 12.5px is the house floor — nothing on a page goes below it. The
       original component sets this pill at 10px on mobile; raising it to the
       floor is a deliberate, minimal deviation from Mike's component in favour
       of his own readability standard. Uppercase and tracked, it still reads
       as a label rather than as body text. */
    .category-pill     { font-size: 12.5px; letter-spacing: 1.1px; }
    .back-link         { font-size: 15.5px; }
}