/* Glokore EyeRenew Pro — shared advertorial design system (Presell 2.0, Aug 2026).
   Linked by Views/EyeRenewPro/Pre4.cshtml and Pre4b.cshtml.
   Base = the designer's V1 "Presell 2.0" stylesheet. pre4b now shares the mobile .adv-heading-1
   sizing from this file (owner asked for the two pages to match, Aug 2026); its only remaining
   page-local rules are .adv-navbar desktop padding and .science-card/.highlight-box, which stay
   inline in Pre4b.cshtml rather than forking this file.
   Plain .css, so at-rules are NOT @@-escaped — a stray @@media here is silently inert. */

        /* Metric-matched fallback (Arial sized to Open Sans) so the deferred webfont swap doesn't reflow text → no CLS */
@font-face {
    font-family: 'Open Sans Fallback';
    src: local('Arial');
    ascent-override: 101.18%;
    descent-override: 27.73%;
    line-gap-override: 0%;
    size-adjust: 107.06%;
}
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Open Sans', 'Open Sans Fallback', sans-serif; color: #00183a; background: #fff; margin: 0; }
img { pointer-events: none; }

/* Sale banner */
.sale-banner {
    background-image: linear-gradient(90deg, #560f8a, #441964);
    color: #fff;
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    gap: 24px; padding: 8px 32px;
    font-size: 14px; font-weight: 700; text-align: center;
}
.sale-banner .usp { display: flex; align-items: center; gap: 8px; }
.sale-banner .hl { color: #ffd84d; }

/* Logo nav */
.adv-navbar { background: #000; border-bottom: 1px solid #e7e7e7; display: flex; justify-content: center; align-items: center; padding: 18px 32px; }
.adv-navbar img { max-height: 32px; width: auto; }

/* Article shell */
.adv-section { display: flex; flex-flow: column; align-items: center; padding: 40px 32px 80px; }
.adv-container { width: 100%; max-width: 1120px; display: flex; flex-flow: column; align-items: center; justify-content: center; }
.adv-left-column { width: 100%; max-width: 760px; display: flex; flex-flow: column; gap: 24px; }

/* Right sticky rail — emsense sticky-banner style */
.adv-right-rail { display: flex; flex-flow: column; gap: 24px; }
@media (min-width: 992px) {
    .adv-container {
        flex-flow: row;
        justify-content: center;
        align-items: stretch;
        /* Owner request: more breathing room between the article and the sticky product CTA.
           The container max-width is raised by the same 32px the gap grows (48 -> 80), so the
           article column keeps its exact rendered width and the body copy does not re-wrap —
           only the rail moves further right. Desktop only; mobile stacks and is untouched. */
        gap: 80px;
        max-width: 1152px;
    }
    .adv-right-rail { flex: 0 0 340px; width: 340px; }
}
.adv-sticky-banner { position: sticky; top: 24px; border: 1px solid #e7e7e7; border-radius: 8px; background: #fff; display: flex; flex-flow: column; align-items: center; gap: 16px; padding: 24px; }
.adv-sticky-banner img { width: 100%; max-width: 250px; height: auto; border-radius: 8px; }
.adv-sticky-banner .hl { color: #000000; font-weight: 700; font-size: 20px; line-height: 26px; text-align: center; text-decoration: none; display: block; }
.adv-sticky-banner .sub { color: #00183a; font-size: 18px; line-height: 24px; text-align: center; }
.adv-sticky-banner .btn-avail { background: #00c249; color: #fff !important; text-transform: uppercase; font-weight: 800; font-size: 18px; line-height: 24px; width: 100%; padding: 16px; border-radius: 8px; text-align: center; text-decoration: none; transition: background .2s; }
.adv-sticky-banner .btn-avail:hover { background: #06a341; }

.adv-heading-1 { color: #02122e; font-size: 40px; font-weight: 800; line-height: 53px; margin: 0; }
.adv-subhead { color: #444; font-size: 20px; font-weight: 500; line-height: 30px; margin: 0; }

/* Author byline */
.adv-author-wrapper { display: flex; align-items: center; gap: 12px; }
.adv-author-wrapper .avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.adv-author-sep { background: #349b76; width: 2px; height: 40px; min-height: 40px; align-self: center; }
.adv-author-name { display: flex; flex-flow: column; gap: 2px; }
.adv-author-name .name { color: #000000; font-weight: 700; font-size: 18px; line-height: 26px; }
.adv-author-name .date { color: #767779; font-weight: 400; font-size: 14px; line-height: 20px; }

/* Rich-text article body */
.adv-rte { width: 100%; display: flex; flex-flow: column; gap: 25px; }
.adv-rte > * { margin: 0; }
.adv-rte p { color: #00183a; font-size: 18px; line-height: 32px; }
.adv-rte h2 { color: #02122e; font-size: 32px; font-weight: 800; line-height: 38px; margin-top: 16px; }
/* all lists use marker classes (symptom/feature/no-list, list-style:none), so no disc indent is needed → symmetric 16px padding */
.adv-rte ul { background: #edf3fd; border-radius: 8px; list-style: none; padding: 16px; margin: 0; display: flex; flex-flow: column; gap: 4px; }
.adv-rte li { color: #00183a; font-size: 16px; font-weight: 400; line-height: 22px; }
.adv-rte a { color: #1264e8; font-weight: 700; text-decoration: none; }

/* ── PULL QUOTE ── */
.pull-quote { border-left: 4px solid #10b981; padding: 20px 24px; margin: 32px 0; background: #10b98125; border-radius: 0 8px 8px 0; display: flex; align-items: flex-start; gap: 18px; }
.pull-quote .pq-avatar { flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #e63946, #9a2530); color: #fff; display: flex; align-items: center; justify-content: center; margin-top: 15px; font-family: 'Segoe UI', system-ui, sans-serif; font-weight: 700; font-size: 22px; box-shadow: 0 3px 10px rgba(230, 57, 70, 0.3); }
.pull-quote .pq-body { flex: 1; }
.pull-quote p { font-size: 19px; font-style: italic; color: #374151; margin: 10px; line-height: 1.6; }
.pull-quote cite { display: block; font-size: 13px; font-family: 'Segoe UI', system-ui, sans-serif; color: #9ca3af; font-style: normal; margin-top: 10px; }

/* ── SYMPTOM LIST ── */
.symptom-list { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.symptom-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 17px; color: #374151; }
.symptom-list li::before { content: '→'; color: #e63946; font-weight: 700; flex-shrink: 0; margin-top: 1px; }

/* ── FEATURE LIST ── */
.feature-list { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.feature-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 17px; color: #374151; }
.feature-list li::before { content: '✓'; color: #10b981; font-weight: 800; flex-shrink: 0; margin-top: 2px; }

/* ── PRODUCT LINK ── */
.product-link { color: #1264e8; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(57, 109, 230, 0.3); transition: border-color 0.15s; }
.product-link:hover { border-color: #1264e8; }

/* ── REVIEW SNIPPET ── */
.review-snippet { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 22px 24px; margin: 0px 0; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.review-snippet .rev-stars { color: #f59e0b; font-size: 15px; margin-bottom: 8px; }
.review-snippet .rev-text { font-size: 16px; color: #374151; font-style: italic; margin-bottom: 10px; line-height: 1.6; }
.review-snippet .rev-author { font-family: 'Segoe UI', system-ui, sans-serif; font-size: 13px; color: #9ca3af; font-style: normal; }
.review-snippet .rev-author strong { color: #374151; }
.review-photo-box { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; margin: 5px 0; display: flex; align-items: stretch; }
.review-photo-box img { width: 50%; max-width: 250px; object-fit: cover; display: block; flex-shrink: 0;
    /* The source art is square and these images are lazy-loaded; without a reserved ratio the
       flex row collapses to the text height and then jumps when the image arrives (26px on
       desktop, 378px on mobile). This reproduces the designer's geometry exactly. */
    aspect-ratio: 1 / 1; }
.review-photo-box .rpb-text-wrap { padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; }
.review-photo-box .rev-stars { color: #f59e0b; font-size: 15px; margin-bottom: 8px; }
.review-photo-box .rev-text { font-size: 16px; color: #374151; font-style: italic; line-height: 1.6; margin-bottom: 10px; }
.review-photo-box .rev-author { font-family: 'Segoe UI', system-ui, sans-serif; font-size: 13px; color: #9ca3af; }
.review-photo-box .rev-author strong { color: #374151; }
@media (max-width: 480px) {
.review-photo-box { flex-direction: column; }
.review-photo-box img { width: 100%; max-width: none; }
}

/* ── GUARANTEE SECTION ── */
.guarantee-section { background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); border: 2px solid #bbf7d0; border-radius: 16px; padding: 32px 28px; margin: 32px 0; text-align: center; }

/* The designer's 400px-wide guarantee image is unconstrained, so inside this 28px-padded box it
   overflowed a 412px phone by 34px and gave the whole page a horizontal scroll. Present in the
   designer's own static file too, but it's an unintended bug rather than a design choice.
   No effect on desktop, where the box is wider than 400px. */
.guarantee-section img {
    max-width: 100%;
    height: auto;
}
.guarantee-section .g-badge { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #10b981; color: #fff; font-size: 32px; margin-bottom: 14px; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35); }
.guarantee-section h2 { margin-top: 0; margin-bottom: 6px; }
.guarantee-section .g-sub { font-size: 15px; color: #059669; font-weight: 600; margin-bottom: 18px; letter-spacing: 0.3px; text-transform: uppercase; }
.guarantee-section .g-intro { font-size: 16px; color: #374151; max-width: 560px; margin: 0 auto 20px; margin-top: 15px; text-align: center; }
.guarantee-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0; text-align: left; }
.guarantee-grid .g-card { background: #fff; border: 1px solid #d1fae5; border-radius: 10px; padding: 16px; }
.guarantee-grid .g-card .g-icon { font-size: 22px; margin-bottom: 8px; }
.guarantee-grid .g-card .g-title { font-weight: 700; color: #065f46; font-size: 14px; margin-bottom: 6px; }
.guarantee-grid .g-card .g-desc { font-size: 13.5px; color: #4b5563; line-height: 1.5; }
.guarantee-section .g-closing { font-size: 15px; color: #374151; max-width: 560px; margin: 20px auto 0; text-align: left; font-style: italic; }
@media (max-width: 640px) {
.guarantee-grid { grid-template-columns: 1fr; }
}

/* ── INLINE IMAGES ── */
/* margin:0 — spacing comes from the .adv-rte flex gap (25px), same as single .adv-media figures */
.article-img-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
/* #showbar is an empty 0-height scroll-anchor between a figure and the next <h2>; inside the
   .adv-rte flex (gap:25px) it would add a gap on BOTH sides → double spacing. Cancel one gap. */
#showbar { margin-top: -25px; }
.article-img-pair img, .article-img-pair video { width: 100%; height: auto; border-radius: 8px; background: #f3f4f6; object-fit: cover; display: block; }

/* Full-width media */
.adv-media { width: 100%; border-radius: 8px; display: block; height: auto; }
/* margin-top: -24px hugs the caption to its image; margin-bottom: 0 leaves the standard .adv-rte 25px gap below (was 32px → oversized before the next paragraph) */
.adv-media-caption { font-family: 'Segoe UI', system-ui, sans-serif; font-size: 13px; color: #1f2937; text-align: center; margin-top: -24px; margin-bottom: 0; font-style: italic; }

/* Callout + CTA */
.adv-callout { background: #edf3fd; border-left: 4px solid #1264e8; border-radius: 8px; padding: 16px; color: #00183a; font-size: 16px; line-height: 24px; }
.adv-cta {
    display: block; width: 100%; max-width: 760px; margin: 8px auto;
    background: #00c249; color: #fff !important; font-weight: 800; font-size: 20px;
    text-align: center; padding: 18px 24px; border-radius: 10px; text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,194,73,.30);
}
.adv-cta:hover { background: #06a341; }

/* STAT CALLOUT */
.stat-callout { background: #111; color: #fff; border-radius: 10px; padding: 28px 28px; margin: 32px 0; text-align: center; }
.stat-callout .stat-num { font-size: 52px; font-weight: 900; color: #f59e0b; line-height: 1; font-family: 'Segoe UI', system-ui, sans-serif; }
.stat-callout .stat-label { font-size: 16px; color: #d1d5db; margin-top: 8px; font-family: 'Segoe UI', system-ui, sans-serif; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #374151; border-radius: 10px; overflow: hidden; margin: 32px 0; }
.stat-cell { background: #111; padding: 24px 16px; text-align: center; }
.stat-cell .num { font-size: 34px; font-weight: 900; color: #f59e0b; font-family: 'Segoe UI', system-ui, sans-serif; line-height: 1; }
.stat-cell .lbl { font-size: 13px; color: #9ca3af; margin-top: 6px; font-family: 'Segoe UI', system-ui, sans-serif; line-height: 1.4; }

/* COST COMPARISON BOX */
.cost-box { background: #fff8f0; border: 1px solid #fed7aa; border-radius: 10px; padding: 24px 28px; margin: 15px 0; font-family: 'Segoe UI', system-ui, sans-serif; font-size: 16px; color: #374151; }
.cost-box .cost-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #fed7aa; }
.cost-box .cost-row:last-child { border-bottom: none; }
.cost-box .cost-label { font-weight: 500; }
.cost-box .cost-amt { font-weight: 800; color: #dc2626; }
.cost-box .cost-amt.green { color: #16a34a; }

/* Bottom product-block CTA */
.adv-product-block { background: #eafafa; border-radius: 8px; padding: 32px; display: flex; flex-flow: column; align-items: center; gap: 24px; text-align: center; }
.adv-product-block .pb-heading { color: #02122e; font-size: 28px; font-weight: 800; line-height: 34px; margin: 0; }
.adv-pb-media { position: relative; display: inline-block; width: 100%; max-width: 320px; }
.adv-pb-media img { width: 100%; height: auto; display: block; }
.adv-product-block .adv-cta { margin: 0 auto; max-width: 580px; }
.adv-product-block .pb-sellout { color: #17191c; font-size: 16px; font-weight: 700; line-height: 22px; margin: 0; }
@media (max-width: 768px) {
    .adv-product-block { padding: 24px 16px; }
    .adv-product-block .pb-heading { font-size: 22px; line-height: 28px; }
}

/* Footer */
.adv-footer { background: #cce0eb; padding: 40px 32px; margin-top: 96px; }
.adv-footer-inner { max-width: 940px; margin: 0 auto; text-align: center; color: rgba(0,0,0,.5); font-size: 14px; line-height: 22px; }
.adv-footer-inner p { margin: 0 0 16px; }
.adv-footer-inner p:last-child { margin-bottom: 0; }

/* Floating bottom CTA bar */
.floating-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,.12); padding: 10px 16px; transform: translateY(120%); transition: transform .2s ease; }
.floating-bar.floating-visible { transform: translateY(0); }
.floating-bar .inner { max-width: 760px; margin: 0 auto; }
.floating-bar .adv-cta { margin: 0; font-size: clamp(13px, 4.2vw, 17px); white-space: nowrap; padding: 14px 12px; }
@media (min-width: 768px) { .floating-bar { display: none; } }

/* ===== Mobile ===== */
@media (max-width: 768px) {
    .adv-section { padding: 16px 16px 64px; }
    /* 32px/48px left the highlighted headline very ragged on a phone — "Making Women" and
       "Eye Filler" ended as short stubs, so the marker strokes stepped in and out. Dropping the
       size fits more words per line and evens the strokes; balance shares the remainder out.
       (pre4b overrides this in its own inline <style> and is unaffected.) */
    .adv-heading-1 { font-size: clamp(22px, 7.5vw, 29px); line-height: 1.33; text-wrap: balance; }
    .adv-subhead { font-size: 18px; line-height: 26px; }
    .adv-rte h2 { font-size: 24px; line-height: 32px; }
    .adv-navbar { padding: 8px 16px; }
    .adv-navbar img { max-height: 28px; }
    .sale-banner { gap: 12px; padding: 6px 16px; font-size: 12px; }
    .adv-cta { font-size: 18px; }
    .adv-right-rail { margin-top: 24px; }
}

/* ===== Reviews summary (emsense sidebar) ===== */
.adv-reviews { width: 100%; display: flex; flex-flow: column; gap: 16px; }
.adv-reviews-heading { color: #02122e; font-weight: 800; font-size: 20px; line-height: 26px; margin: 0; }
.adv-reviews-sep { height: 1px; width: 100%; background: #e7e7e7; }
.adv-reviews-box { background: #f8f8f8; border-radius: 8px; padding: 12px 0; display: flex; flex-flow: column; align-items: center; gap: 4px; }
.adv-reviews-total { color: #02122e; font-weight: 700; font-size: 50px; line-height: 56px; text-align: center; margin-top: 10px; }
.adv-reviews-count { color: #02122e; font-weight: 400; font-size: 16px; line-height: 22px; text-align: center; }
.adv-reviews-bars { display: flex; flex-flow: column; gap: 16px; }
.adv-reviews-row { display: flex; align-items: center; justify-content: center; gap: 16px; height: 20px; }
.adv-reviews-row .stars { font-size: 15px; letter-spacing: 1px; white-space: nowrap; line-height: 1; }
.adv-reviews-row .stars .on { color: #ffb400; }
.adv-reviews-row .stars .off { color: #d9d9d9; }
.adv-bar-track { flex: 1; background: #eaeaea; border: 1px solid #f7f8fa; border-radius: 100px; height: 8px; overflow: hidden; }
.adv-bar-fill { background: #24aa2f; height: 8px; }

        /* Page-unique (Pre4a) */
        .article-img { width: 100%; border-radius: 8px; margin: 28px 0; display: block; background: #f3f4f6; min-height: 260px; object-fit: cover; }
        .no-list { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 8px; }
        .no-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 17px; color: #374151; }
        .no-list li::before { content: '✗'; color: #e63946; font-weight: 800; flex-shrink: 0; margin-top: 2px; }
    

/* ── Presell 3.0 brings the science-card component to this page too; it previously existed only
   in the V2/pre4b inline style. Now shared, so pre4b's inline copy is redundant. */
.science-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #e63946;
    border-radius: 0 10px 10px 0;
    padding: 20px 24px;
    margin: 0px 0;
}

.science-card .sc-title {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #e63946;
    margin-bottom: 6px;
}

.science-card p {
    margin-bottom: 0;
    color: #374151;
    font-size: 16px;
    line-height: 1.6;
}


/* ── Mobile-only review edits (owner, Aug 2026). Desktop is untouched by all of these. */
@media (max-width: 768px) {
    /* a1. The black/orange stats chart is unreadable as 3 columns on a phone — stack it. */
    .stat-grid {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }

    .stat-cell + .stat-cell {
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        border-left: 0 !important;
    }

    /* Stacked, the cell is ~3x wider than the desktop column it was sized for, so the 13px caption
       is smaller than the body copy around it and sits only 6px under a 34px number. Give it body
       size, a real gap, and a measure that breaks the 2-line captions evenly instead of leaving a
       stranded last word. */
    .stat-cell {
        padding: 26px 20px;
    }

    .stat-cell .lbl {
        font-size: 15px;
        line-height: 1.45;
        margin-top: 10px;
        text-wrap: balance;
    }

    /* a2. Same for the side-by-side image pair. */
    .article-img-pair {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 12px;
    }

    /* a3. The right-rail sticky product card is desktop furniture; on mobile it lands in the
       footer area and duplicates the floating CTA, so drop it. */
    .adv-right-rail {
        display: none !important;
    }

    /* b. Cost table read as a ragged two-column jumble on a phone: the label and the price were
       fighting for the same row. Stack each row so the price sits under its own label, both hard
       left, with room to breathe between rows so it is obvious which price belongs to which line.
       NOTE the .cost-box prefix — the desktop rule is .cost-box .cost-row (0-2-0) and sets
       align-items:center, so a bare .cost-row (0-1-0) loses and every row renders centred. */
    .cost-box {
        padding: 8px 18px;
    }

    .cost-box .cost-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 4px;
        padding: 12px 0;
        text-align: left;
    }

    .cost-box .cost-label {
        max-width: 100%;
        line-height: 1.35;
    }

    .cost-box .cost-amt {
        align-self: flex-start;
        text-align: left;
        font-size: 17px;
        white-space: nowrap;
    }
}

/* ── Mobile vertical rhythm (owner, Aug 2026) ──────────────────────────────────
   The article ran on a flat 25px flex gap with extra per-block margins layered on top,
   producing gaps of 25/30/35/40/41/57/73px — inconsistent, and 25px between paragraphs of
   18px/32px body made the page read loose and very long on a phone.
   New scale, two steps only:
       18px  normal flow (paragraph → paragraph, and around media/cards/lists)
       28px  before an <h2>, so headings are the only real break
   The emphasis blocks (stat grid, pull quote, cost box, guarantee, review photos) lose their
   own margins: they already carry a background/border/padding, so they read as separate
   without extra space around them. */
@media (max-width: 768px) {
    .adv-rte {
        gap: 18px;
    }

    .adv-rte h2 {
        margin-top: 10px;
    }

    /* #showbar is a 0-height scroll anchor; it eats one flex gap on each side, so this negative
       margin MUST track the gap above or the anchor re-introduces double spacing. */
    #showbar {
        margin-top: -18px;
    }

    .stat-grid,
    .pull-quote,
    .cost-box,
    .guarantee-section,
    .review-photo-box {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* Headings measured a uniform 28px above, but the ones following a BLOCK read tighter than the
   ones following a paragraph: a paragraph contributes ~7px of half-leading below its last line
   (18px text in a 32px line box), while an image edge or a filled card gives you exactly 28px of
   real white. Add that difference back so the optical gap matches everywhere.
   Applies to pre4 and pre4b — they share this stylesheet. */
@media (max-width: 768px) {
    .adv-rte > img + h2,
    .adv-rte > video + h2,
    .adv-rte > picture + h2,
    .adv-rte > ul + h2,
    .adv-rte > .stat-grid + h2,
    .adv-rte > .pull-quote + h2,
    .adv-rte > .article-img-pair + h2,
    .adv-rte > .cost-box + h2,
    .adv-rte > .science-card + h2,
    .adv-rte > .review-snippet + h2,
    .adv-rte > .review-photo-box + h2,
    .adv-rte > .guarantee-section + h2 {
        margin-top: 20px;
    }
}

/* ── Headline highlighter (owner review, Aug 2026) ─────────────────────────────
   Was `background-color` on an inline span. A background fills the whole LINE BOX
   (40px text in a 53px line), and consecutive line boxes touch, so three highlighted
   lines painted one solid yellow rectangle — the "big block of yellow" the reviewer
   flagged. A real highlighter only covers the text band and leaves paper showing
   between strokes, so paint a gradient that is transparent above and below instead.
   box-decoration-break:clone makes every wrapped line paint its own full band rather
   than the span being treated as one continuous box. */
.hl-mark {
    background-image: linear-gradient(
        to bottom,
        transparent 18%,
        #f9e079 18%,
        #f9e079 90%,
        transparent 90%
    );
    padding: 0 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Feature list inside the article: the items were only 4px apart (.adv-rte ul's gap wins over
   .feature-list's own 8px on specificity), and with 22px leading a two-line item ran straight
   into the next one — the groups didn't read as separate points. Owner request: more air between
   each group. Scoped to ul.feature-list so the sidebar's div.feature-list is untouched. */
.adv-rte ul.feature-list {
    gap: 14px;
}

.adv-rte ul.feature-list li {
    line-height: 26px;
}