/* sh-blog-post.css — copied verbatim from theme/P-blog-post.css on 2026-08-11.
   page.php:563-567 inlined this ONLY for blog pages (slug 'blog' or parent
   'blog'), because it is not part of global 02-CSS. It carries every
   .sh-post-hero-* and .sh-byline-* rule — SH Post Hero renders completely
   unstyled without it, and .sh-post-hero has NO rules in sh-theme.css at all.
   Loaded conditionally via the widget's get_style_depends(), which is
   Elementor's own per-widget asset mechanism. Do not hand-edit: regenerate
   from the theme file.

   ⚠ NO LONGER BYTE-IDENTICAL TO theme/P-blog-post.css. Regenerating from the
   theme file will silently revert the divergences below, so they are listed
   here rather than only marked at the rule. Each is a deliberate design fix
   agreed with Robbie, not a port artefact — the original has the same fault.

     2026-09-20  .sh-decide-table and its rows get font-size: inherit, because
                 it declares none and a theme's `table` font-size lands on it.

     2026-09-20  .sh-cmp-table / .sh-decide-table tbody td+th get
                 background-color: revert and vertical-align: revert, to take
                 back two cells a WordPress theme styles and this file does
                 not. See the block at the foot of the file.

     2026-08-15  .sh-figure-body     padding 1.5rem 1.5rem 0.75rem -> 1.5rem
                 .sh-figure-caption  padding 0.875rem 1.5rem 1.25rem
                                             -> 1rem 1.5rem
                 .sh-figure-caption--plain  padding-top 0.875rem -> 1rem,
                                            which keeps it equal to the base
                                            as it was before the change */

/* ════════════════════════════════════════════════════════════════════════
   StronkHAMMER — P-blog-post.css
   Dedicated stylesheet for the blog-post page template.

   Loaded by P-blog-post.html via <link rel="stylesheet" href="theme/P-blog-post.css">.
   Loads AFTER 02-CSS.html so any cascade ties go to this file.

   Created 2026-06-08 by extracting all blog-post-only CSS out of
   02-CSS.html and concatenating the page-local <style>
   block that was previously embedded in P-blog-post.html.

   CONTENTS (top to bottom):
     1. A2  Featured Post Hero          (was 02-CSS L2120-2215)
     2. E1  Series Navigation           (was 02-CSS L2217-2274)
     3. K1  Long-form blog post family  (was 02-CSS L3934-4642 — 109 rules promoted 2026-05-17)
     4. PAGE-LOCAL retains              (was P-blog-post.html L58-452 — the 16 documented retains
                                        + the 768px mobile block kept per Stevie's directive)

   Naming/scope: every rule is `.sh-page`-scoped, identical to canonical sheet
   conventions. Selectors are unchanged from the originals — this is a move,
   not a refactor.
   ════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════
   SECTION 1 — A2. FEATURED POST HERO
   Extracted from 02-CSS.html L2120-2215 on 2026-06-08.
   ════════════════════════════════════════════════════════════════════════ */

/* ============================================
   A2. FEATURED POST HERO
   Full-width image with overlaid title + meta.
   Use instead of A1 on blog/series pages.
   ============================================ */
.sh-post-hero {
    position: relative;
    background: var(--sh-primary-dark) !important;
    overflow: hidden;
}

.sh-post-hero-img-wrap {
    width: 100%;
    height: 480px;
    position: relative;
    overflow: hidden;
}

.sh-post-hero-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%);
}

.sh-post-hero-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sh-post-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem 1.5rem;
    max-width: var(--sh-container);
    margin: 0 auto;
}

.sh-post-hero h1 {
    color: var(--sh-white) !important;
    font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
    margin-bottom: 1rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.sh-post-hero .sh-eyebrow {
    color: var(--sh-white) !important;
    background: rgba(0,0,0,0.55) !important;
    display: inline-block;
    padding: 0.3rem 1rem;
    border-radius: 100px;
    font-size: 0.8125rem !important;
    letter-spacing: 0.08em !important;
}

.sh-post-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
}

.sh-post-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem !important;
    color: rgba(255,255,255,0.8) !important;
    font-family: var(--sh-font-body) !important;
    font-weight: 500 !important;
}

.sh-post-hero-meta-item svg {
    width: 15px;
    height: 15px;
    color: rgba(255,255,255,0.6) !important;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .sh-post-hero-img-wrap {
        height: 320px;
    }

    .sh-post-hero-content {
        padding: 1.5rem 1rem;
    }

    .sh-post-hero-meta {
        gap: 0.75rem;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   SECTION 2 — E1. SERIES NAV (Prev/Next article links)
   Extracted from 02-CSS.html L2217-2274 on 2026-06-08.
   ════════════════════════════════════════════════════════════════════════ */

/* ============================================
   E1. SERIES NAV — Prev / Next article links
   Sits below D9 Final CTA on series pages.
   ============================================ */
.sh-series-nav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}

.sh-series-nav-item {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-width: 380px;
}

.sh-series-nav-prev {
    align-items: flex-start;
    text-align: left;
}

.sh-series-nav-next {
    align-items: flex-end;
    text-align: right;
    margin-left: auto;
}

.sh-series-nav-desc {
    font-size: 0.875rem !important;
    color: var(--sh-gray) !important;
    margin: 0 !important;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .sh-series-nav {
        flex-direction: column;
        gap: 1.5rem;
    }

    .sh-series-nav-next {
        align-items: flex-start;
        text-align: left;
        margin-left: 0;
    }

    .sh-series-nav-item {
        max-width: 100%;
    }

    .sh-series-nav .sh-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   SECTION 3 — K1. POST (Long-form blog post archetype family)
   Extracted from 02-CSS.html L3934-4642 on 2026-06-08.
   109-rule family originally promoted from P-blog-post page-local CSS
   on 2026-05-17. Now lives here instead of the canonical sheet.
   ════════════════════════════════════════════════════════════════════════ */

/* ============================================================
   K1. POST — Long-form blog post archetype family
   Phase B fold-back 2026-05-17 — promoted from P-blog-post.html page-local <style>.
   Family covers: reading-progress bar (K1.1), hero byline pill + author footer
   card (K1.13), sticky TOC + mobile drawer (K1.2), TL;DR callout + stat strip
   (K1.3), inline figure + chart legend (K1.5/9), before/after figure-wrapper
   modifier (K1.11), cost-breakdown cards (K1.6), pros/cons cards (K1.7),
   pull-quote (K1.8), inline callouts tip/note/warning (K1.10), decision-helper
   matrix (K1.12). All .sh-page-scoped to avoid theme bleed.
   Specificity gotcha: global .sh-page h1-h4 rule uses !important on color, font-
   weight, font-family, line-height, text-transform — overrides below either match
   that with !important or live inside a more-specific selector.
   Source-of-truth: this section. P-blog-post no longer carries these rules locally.
   Two patterns intentionally NOT promoted, retained page-local in P-blog-post:
     - Comparison reference table (gated on data shape lock: rows × cols × winner-flag)
     - Long-form body rhythm (gated on .sh-prose typography pass; BACKLOG)
   K1.1 added 2026-05-17 (Pattern 1 promotion session). Header-height gate
   resolved: top offset references --sh-header-bar-height with 120px fallback
   (matches .sh-header's own fallback at L2457; single source of truth).
   ============================================================ */

/* ──────── K1.1 — Reading-progress bar ────────
   Fixed 4px bar that sits flush against the bottom edge of the sticky header,
   visualizing scroll progress through the article. Width is driven by a
   --sh-read-progress CSS custom property that the inline reading-progress
   script updates on scroll. Top offset references the canonical header-bar
   height variable so any future header-geometry change carries through
   automatically. z-index 999 (one below header z-1000) so the header
   border-bottom can still appear above the bar at exact alignment. */
.sh-page .sh-read-progress {
    position: fixed;
    top: var(--sh-header-bar-height, 120px);
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(0, 0, 0, 0.05);
    z-index: 999;
    pointer-events: none;
}
.sh-page .sh-read-progress::after {
    content: '';
    display: block;
    height: 100%;
    width: var(--sh-read-progress, 0%);
    background: linear-gradient(90deg, var(--sh-accent) 0%, var(--sh-accent-bright) 100%);
    transition: width 0.08s ease-out;
}


/* ──────── K1.13a — Author byline card (post-hero meta enhancement) ────────
   Replaces the .sh-post-hero-meta inline strip on long-form posts with a
   short author card that gives the post an explicit byline + a one-line
   credibility blurb. Sits inside .sh-post-hero-content so it inherits the
   dark-overlay positioning automatically. */
.sh-page .sh-byline-card {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 0.625rem 1rem 0.625rem 0.625rem;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 1rem;
}
.sh-page .sh-byline-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--sh-accent);
    color: var(--sh-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sh-font-heading) !important;
    font-size: 0.875rem !important;
    font-weight: 800 !important;
    flex-shrink: 0;
}
.sh-page .sh-byline-text {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.875rem;
    line-height: 1.35;
}
.sh-page .sh-byline-text strong {
    display: block;
    font-weight: 700;
    color: var(--sh-white);
    font-size: 0.9375rem;
}


/* ──────── K1.2 — Sticky TOC + long-form body layout ────────
   Desktop: 240px sidebar TOC on the left, article body on the right, sticky
   behavior on .sh-toc so it follows scroll within its section. Tablet (1024px):
   TOC collapses into a compact horizontal jump bar above the article. Mobile (768px):
   TOC becomes a <details> drawer at the top of the article. */
.sh-page .sh-longform-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 3.5rem;
    align-items: start;
}
.sh-page .sh-toc {
    position: sticky;
    /* Ticket issue-20260615-134646: TOC was cramped at the top; margin-top reads
       intentional. BOUNCE-BACK 2026-06-16 (HITL): when scrolling, the sticky TOC
       tucked UNDER the sticky site header (.sh-header is position:sticky; top:0;
       z-index:1000; bar height ~120px). The old top:24px parked the TOC inside the
       header's band, so the header (higher z-index) painted over it. Fix: park the
       TOC just BELOW the header by offsetting sticky-top to the header bar height
       plus a gap, and give it a small z-index so it sits above article content. */
    top: calc(var(--sh-header-bar-height, 120px) + 26px);
    z-index: 1;
    margin-top: 2.5rem;
    padding: 1.5rem 0;
    border-top: 3px solid var(--sh-accent-bright);
    align-self: start;
}
.sh-page .sh-toc-label {
    font-family: var(--sh-font-button) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--sh-gray) !important;
    margin: 0 0 1rem !important;
}
.sh-page .sh-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sh-page .sh-toc li {
    margin: 0;
    padding: 0;
}
.sh-page .sh-toc a {
    display: block;
    padding: 0.5rem 0 0.5rem 0.875rem;
    font-family: var(--sh-font-body) !important;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--sh-gray) !important;
    border-left: 2px solid var(--sh-border);
    transition: color var(--sh-transition), border-color var(--sh-transition);
    text-decoration: none;
}
.sh-page .sh-toc a:hover {
    color: var(--sh-primary) !important;
    border-left-color: var(--sh-primary);
}
.sh-page .sh-toc a.is-active {
    color: var(--sh-accent-bright) !important;
    border-left-color: var(--sh-accent-bright);
    font-weight: 600;
}
.sh-page .sh-toc-readtime {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sh-border);
    font-size: 0.75rem;
    color: var(--sh-gray-mid);
    line-height: 1.5;
}
.sh-page .sh-toc-readtime strong { color: var(--sh-gray-dark); display: block; font-size: 0.8125rem; margin-bottom: 0.15rem; }

.sh-page .sh-toc-mobile { display: none; }


/* ──────── K1.3 — TL;DR callout + stat strip ────────
   Big "bottom-line-up-front" card at the start of the article. Cool surface,
   primary border-left, three stat cells with oversized numbers. */
.sh-page .sh-tldr {
    background: var(--sh-surface-cool);
    border-left: 5px solid var(--sh-primary);
    border-radius: var(--sh-radius);
    padding: 1.75rem 1.75rem 0.5rem;
    margin: 0 0 2.5rem;
}
.sh-page .sh-tldr-label {
    font-family: var(--sh-font-button) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--sh-accent-bright) !important;
    margin: 0 0 0.5rem !important;
}
.sh-page .sh-tldr h3 {
    font-size: 1.125rem !important;
    color: var(--sh-primary) !important;
    text-transform: none !important;
    letter-spacing: -0.005em;
    margin: 0 0 0.625rem !important;
}
.sh-page .sh-tldr p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--sh-gray-dark);
    margin: 0 0 1.5rem;
}
.sh-page .sh-stat-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(42, 66, 111, 0.15);
    margin-bottom: 1.25rem;
}
.sh-page .sh-stat-strip .sh-stat-num {
    font-family: var(--sh-font-heading) !important;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
    font-weight: 900 !important;
    color: var(--sh-primary) !important;
    line-height: 1 !important;
    display: block;
    margin-bottom: 0.25rem;
}
.sh-page .sh-stat-strip .sh-stat-num em {
    font-style: normal;
    color: var(--sh-accent-bright) !important;
    font-size: 0.55em;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.sh-page .sh-stat-strip .sh-stat-label {
    font-family: var(--sh-font-body) !important;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sh-gray);
    line-height: 1.4;
}


/* ──────── K1.5/9 — Inline figure wrapper (chart + annotated diagram) ────────
   Shared <figure> wrapper for any inline data viz or diagram. Caption sits below
   in a quiet style. The wrapper + caption styles are general-purpose; the SVGs
   themselves are content. */
.sh-page .sh-figure {
    margin: 2rem 0 2.5rem;
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    background: var(--sh-white);
    overflow: hidden;
    box-shadow: var(--sh-shadow);
}
/* Even on all sides. The original bottom-padded this at half the rest, which
   read as the image sitting low in its own box. Divergence, see the header. */
.sh-page .sh-figure-body { padding: 1.5rem; }
.sh-page .sh-figure svg { display: block; width: 100%; height: auto; }
/* Divergence, see the header: the original was top-light against its bottom. */
.sh-page .sh-figure-caption {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--sh-border);
    background: var(--sh-surface-warm);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--sh-gray);
}
.sh-page .sh-figure-caption strong {
    display: inline-block;
    font-family: var(--sh-font-button) !important;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sh-accent-bright);
    margin-right: 0.5rem;
}

/* ──────── K1.5b — Figure image, callout labels, caption modifier ────────
   Folded up from inline style="" attributes in P-blog-post.html on
   2026-06-08 (post-fold-up inline-cleanup pass). Behavior identical to
   the original inline styles.

   .sh-figure-img            — <img> inside a figure-body fills the wrapper.
   .sh-figure-callout-label  — numbered (①②③④⑤⑥) inline label in a
                                figcaption. Base sets display:inline-block
                                and the standard middle-position margin.
                                Use the --lead modifier on the FIRST label
                                of a run (no left margin), and a color
                                modifier to tint the digit.
   .sh-figure-caption--plain — figcaption variant without the top divider
                                or warm background, used when the figure
                                body is a before/after slider or other
                                visual that doesn't need the chrome.
   ============================================ */
.sh-page .sh-figure-img { width: 100%; height: auto; display: block; }

.sh-page .sh-figure-callout-label { display: inline-block; margin: 0 0.6em 0 0.4em; }
.sh-page .sh-figure-callout-label--lead          { margin: 0 0.6em 0 0; }
.sh-page .sh-figure-callout-label--primary       { color: var(--sh-primary); }
.sh-page .sh-figure-callout-label--green         { color: #3aaa9a; }
.sh-page .sh-figure-callout-label--accent-bright { color: var(--sh-accent-bright); }
.sh-page .sh-figure-callout-label--accent        { color: var(--sh-accent); }

.sh-page .sh-figure-caption--plain {
    border-top: none;
    background: transparent;
    /* Tracks the base rule rather than overriding it — it was 0.875rem when
       the base was 0.875rem. Left in place because it came from a folded-up
       inline style, so removing it is a bigger claim than keeping it in step. */
    padding-top: 1rem;
}

/* Chart-specific tweaks */
.sh-page .sh-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 0 1.5rem 1rem;
    font-size: 0.8125rem;
    color: var(--sh-gray-dark);
}
.sh-page .sh-chart-legend-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.sh-page .sh-chart-legend-swatch {
    width: 14px; height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}


/* ──────── K1.6 — Cost-breakdown block ────────
   Two stacked itemized cost cards. Each row is a line-item label + dollar value,
   with the total in a heavier band at the bottom. Useful on any cost-anchor post. */
.sh-page .sh-cost-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1.5rem 0 2.5rem;
}
.sh-page .sh-cost-card {
    background: var(--sh-white);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    overflow: hidden;
    box-shadow: var(--sh-shadow);
    display: flex;
    flex-direction: column;
}
.sh-page .sh-cost-card-head {
    background: var(--sh-primary);
    color: var(--sh-white);
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}
.sh-page .sh-cost-card-head h4 {
    color: var(--sh-white) !important;
    font-size: 1rem !important;
    margin: 0 !important;
    letter-spacing: 0.02em;
}
.sh-page .sh-cost-card-head span {
    font-family: var(--sh-font-body) !important;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.sh-page .sh-cost-card.sh-cost-card-alt .sh-cost-card-head { background: var(--sh-accent); }
.sh-page .sh-cost-rows {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    flex: 1;
}
.sh-page .sh-cost-rows li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    color: var(--sh-gray-dark);
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}
.sh-page .sh-cost-rows li:last-child { border-bottom: none; }
.sh-page .sh-cost-rows .sh-cost-label { line-height: 1.35; }
.sh-page .sh-cost-rows .sh-cost-value {
    font-family: var(--sh-font-heading) !important;
    font-weight: 700;
    color: var(--sh-primary);
    white-space: nowrap;
}
.sh-page .sh-cost-total {
    background: var(--sh-surface-warm);
    border-top: 2px solid var(--sh-primary);
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.sh-page .sh-cost-total .sh-cost-label {
    font-family: var(--sh-font-button) !important;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sh-gray-dark);
}
.sh-page .sh-cost-total .sh-cost-value {
    font-family: var(--sh-font-heading) !important;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--sh-primary);
}


/* ──────── K1.7 — Pros / Cons side-by-side cards ────────
   Two-column card pair. Each card has a header, a pros list, and a cons list with
   iconography (✓ / −). Generic enough for any decision post. */
.sh-page .sh-procon-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0 2.5rem;
}
.sh-page .sh-procon-card {
    background: var(--sh-white);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    padding: 1.5rem 1.5rem 1.75rem;
    box-shadow: var(--sh-shadow);
}
.sh-page .sh-procon-card h4 {
    color: var(--sh-primary) !important;
    font-size: 1.0625rem !important;
    margin: 0 0 0.25rem !important;
}
.sh-page .sh-procon-card-sub {
    font-size: 0.8125rem;
    color: var(--sh-gray);
    margin: 0 0 1.25rem;
    line-height: 1.4;
}
.sh-page .sh-procon-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}
.sh-page .sh-procon-list-head {
    font-family: var(--sh-font-button) !important;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0.75rem 0 0.5rem;
}
.sh-page .sh-procon-list-head.is-pros { color: var(--sh-primary); }
.sh-page .sh-procon-list-head.is-cons { color: var(--sh-accent); }
.sh-page .sh-procon-list li {
    display: flex;
    gap: 0.625rem;
    padding: 0.35rem 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--sh-gray-dark);
}
.sh-page .sh-procon-list li::before {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1;
    margin-top: 0.2rem;
}
.sh-page .sh-procon-list.is-pros li::before {
    content: '✓';
    background: rgba(42, 66, 111, 0.12);
    color: var(--sh-primary);
}
.sh-page .sh-procon-list.is-cons li::before {
    content: '−';
    background: rgba(200, 54, 49, 0.12);
    color: var(--sh-accent);
}


/* ──────── K1.8 — Pull quote ────────
   Big editorial pull-quote. Lives between paragraphs to break up the reading rhythm. */
.sh-page .sh-pullquote {
    border-left: 5px solid var(--sh-accent-bright);
    padding: 0.5rem 0 0.5rem 1.5rem;
    margin: 2.5rem 0;
    font-family: var(--sh-font-accent) !important;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.5;
    color: var(--sh-primary);
    font-weight: 500;
    font-style: italic;
}
.sh-page .sh-pullquote-attr {
    display: block;
    margin-top: 0.75rem;
    font-family: var(--sh-font-button) !important;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sh-gray);
}


/* ──────── K1.10 — Inline callouts (tip / note / warning) ────────
   Three variants of an inline "aside" block used to surface a single important point
   inside the flow of prose. Borrows the visual grammar from Stripe Docs / MDN /
   Linear changelog. */
.sh-page .sh-callout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.875rem;
    align-items: start;
    padding: 1rem 1.125rem;
    border-radius: var(--sh-radius);
    border: 1px solid var(--sh-border);
    margin: 1.5rem 0;
    line-height: 1.55;
    font-size: 0.9375rem;
    color: var(--sh-gray-dark);
}
.sh-page .sh-callout-icon {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 0.05rem;
}
.sh-page .sh-callout-icon svg { width: 16px; height: 16px; stroke-width: 2.25; }
.sh-page .sh-callout-body { padding-top: 0.05rem; }
.sh-page .sh-callout-body strong {
    display: block;
    font-family: var(--sh-font-button) !important;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}
.sh-page .sh-callout p { margin: 0; }
.sh-page .sh-callout p + p { margin-top: 0.5rem; }

.sh-page .sh-callout.is-tip {
    background: rgba(42, 66, 111, 0.04);
    border-color: rgba(42, 66, 111, 0.25);
}
.sh-page .sh-callout.is-tip .sh-callout-icon { background: var(--sh-primary); color: var(--sh-white); }
.sh-page .sh-callout.is-tip strong { color: var(--sh-primary); }

.sh-page .sh-callout.is-note {
    background: var(--sh-surface-warm);
    border-color: rgba(0, 0, 0, 0.08);
}
.sh-page .sh-callout.is-note .sh-callout-icon { background: var(--sh-gray-dark); color: var(--sh-white); }
.sh-page .sh-callout.is-note strong { color: var(--sh-gray-dark); }

.sh-page .sh-callout.is-warning {
    background: rgba(200, 54, 49, 0.06);
    border-color: rgba(200, 54, 49, 0.35);
}
.sh-page .sh-callout.is-warning .sh-callout-icon { background: var(--sh-accent); color: var(--sh-white); }
.sh-page .sh-callout.is-warning strong { color: var(--sh-accent); }


/* ──────── K1.12 — Decision-helper matrix table ────────
   Tighter, more scannable cousin of the spec table. Rows are user situations;
   columns are decision categories. Cells render as colored chips. */
.sh-page .sh-decide-wrap {
    overflow-x: auto;
    margin: 1.5rem 0 2.5rem;
    border-radius: var(--sh-radius);
    border: 1px solid var(--sh-border);
    box-shadow: var(--sh-shadow);
}
.sh-page .sh-decide-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--sh-white);
    min-width: 540px;
}
.sh-page .sh-decide-table thead th {
    background: var(--sh-primary-dark);
    color: var(--sh-white);
    font-family: var(--sh-font-heading) !important;
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.75rem 1.125rem;
    text-align: center;
}
.sh-page .sh-decide-table thead th:first-child {
    background: var(--sh-primary);
    text-align: left;
}
.sh-page .sh-decide-table tbody th {
    background: var(--sh-surface-warm);
    color: var(--sh-gray-dark);
    font-family: var(--sh-font-body) !important;
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0.75rem 1.125rem;
    text-align: left;
    border-top: 1px solid var(--sh-border);
    line-height: 1.4;
}
.sh-page .sh-decide-table tbody td {
    padding: 0.75rem 1.125rem;
    border-top: 1px solid var(--sh-border);
    border-left: 1px solid var(--sh-border);
    text-align: center;
    vertical-align: middle;
}
.sh-page .sh-decide-chip {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-family: var(--sh-font-button) !important;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.5;
    white-space: nowrap;
}
.sh-page .sh-decide-chip.is-yes {
    background: rgba(42, 66, 111, 0.12);
    color: var(--sh-primary);
}
.sh-page .sh-decide-chip.is-maybe {
    background: rgba(251, 188, 4, 0.18);
    color: #946700;
}
.sh-page .sh-decide-chip.is-no {
    background: rgba(102, 103, 103, 0.12);
    color: var(--sh-gray);
}


/* ──────── K1.11 — Before / after drag-reveal figure modifier ────────
   Wraps the existing .sh-ba-* primitives (canonical at 02-CSS + 03-JS) inside a
   figure-styled shell consistent with the other inline figures. */
.sh-page .sh-figure .sh-ba-card { border-radius: 0; box-shadow: none; }
.sh-page .sh-figure .sh-ba-slider { aspect-ratio: 16 / 9; }


/* ──────── K1.13b — Author footer card (article close) ────────
   Sits at the bottom of the article — short bio + credibility note. Paired with
   K1.13a hero byline pill. */
.sh-page .sh-author-card {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1.25rem;
    align-items: center;
    background: var(--sh-surface-warm);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    padding: 1.25rem 1.5rem;
    margin: 2.5rem 0 1rem;
}
.sh-page .sh-author-card-avatar {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--sh-primary);
    color: var(--sh-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sh-font-heading) !important;
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    flex-shrink: 0;
}
.sh-page .sh-author-card-text { line-height: 1.55; font-size: 0.9375rem; color: var(--sh-gray-dark); }
.sh-page .sh-author-card-text h4 {
    color: var(--sh-primary) !important;
    font-size: 1rem !important;
    margin: 0 0 0.35rem !important;
    text-transform: none !important;
}
.sh-page .sh-author-card-text p { margin: 0; }


/* ──────── K1 RESPONSIVE — 1024px / Tablet ────────
   TOC collapses to a mobile drawer; two-col grids drop to 1-col where content
   needs the room. (Longform body rhythm responsive lives page-local in P-blog-post.) */
@media (max-width: 1024px) {
    .sh-page .sh-longform-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .sh-page .sh-toc { display: none; }
    .sh-page .sh-toc-mobile {
        display: block;
        background: var(--sh-surface-cool);
        border-left: 4px solid var(--sh-accent-bright);
        border-radius: var(--sh-radius);
        padding: 0.75rem 1rem;
        margin-bottom: 2rem;
    }
    .sh-page .sh-toc-mobile summary {
        font-family: var(--sh-font-button) !important;
        font-size: 0.8125rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--sh-primary);
        cursor: pointer;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .sh-page .sh-toc-mobile summary::-webkit-details-marker { display: none; }
    .sh-page .sh-toc-mobile summary::after {
        content: '▾';
        font-size: 0.875rem;
        color: var(--sh-accent-bright);
        transition: transform var(--sh-transition);
    }
    .sh-page .sh-toc-mobile[open] summary::after { transform: rotate(180deg); }
    .sh-page .sh-toc-mobile ol {
        margin: 0.875rem 0 0.25rem;
        padding-left: 1.25rem;
        font-size: 0.9375rem;
        line-height: 1.7;
        color: var(--sh-gray-dark);
    }
    .sh-page .sh-toc-mobile ol a { color: var(--sh-gray-dark); text-decoration: none; }
    .sh-page .sh-toc-mobile ol a:hover { color: var(--sh-accent-bright) !important; }
    .sh-page .sh-cost-grid,
    .sh-page .sh-procon-grid {
        grid-template-columns: 1fr;
    }
}

/* ──────── K1 RESPONSIVE — 768px / Mobile ────────
   Stat strip collapses to 1-col; callout drops icon; author card stacks. */
@media (max-width: 768px) {
    .sh-page .sh-stat-strip { grid-template-columns: 1fr; gap: 1rem; }
    .sh-page .sh-tldr { padding: 1.5rem 1.25rem 0.5rem; }
    .sh-page .sh-callout { grid-template-columns: 1fr; }
    .sh-page .sh-callout-icon { display: none; }
    .sh-page .sh-author-card { grid-template-columns: 1fr; text-align: center; }
    .sh-page .sh-author-card-avatar { margin: 0 auto; }
}


/* ════════════════════════════════════════════════════════════════════════
   SECTION 4 — PAGE-LOCAL RETAINS (folded in from P-blog-post.html)
   Extracted from P-blog-post.html page-local <style> block
   (L58-452) on 2026-06-08. Includes:
     - Pattern 4 (comparison reference table) — 10 rules
     - Long-form body rhythm — 6 rules
     - 768px mobile overrides per Stevie directive — 50+ rules
   Behavior identical to before; just lives here now instead of inline.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   PAGE-LOCAL CSS — P-blog-post.html
   Scope: every rule is prefixed with .sh-page to keep this scoped to the
   page wrapper and out of Elementor / theme bleed.

   STATUS: Phase-B-merged 2026-05-17 (K1 family); Pattern 1 promoted 2026-05-17
   (K1.1 — reading-progress bar; header-bar-height gate resolved with single-
   source-of-truth reference to --sh-header-bar-height). 109 + 2 = 111 of this
   file's original 127 page-local rules have now been promoted to 02-CSS.html
   under the K1 archetype family. The 16 rules that remain below are
   deliberate page-local retains, each gated on a specific blocker that
   prevents canonical promotion:

     - PATTERN 4 (Comparison reference table, 10 rules): gated on data
       shape lock (rows × columns × winner-flag). Promote once the
       data-shape contract is decided.
     - Long-form body rhythm (5 top-level rules + 1 responsive override
       inside @media 1024px): gated on the proper .sh-prose typography
       pass — same BACKLOG entry P-legal and P-blog-post raised. Promote
       as part of that pass.

   See Daily Reports/2026-05-17-stronkhammer-css-p-blog-post-phase-b-merge.md
   for the full rule-by-rule disposition ledger.

   Specificity gotcha: the global .sh-page h1/h2/h3/h4 rule in 02-CSS.html
   uses !important on color, font-weight, font-family, line-height, and
   text-transform. Overrides below either match that with !important or
   live inside a more-specific selector. Inline SVG text isn't affected.
   ════════════════════════════════════════════════════════════════════════ */


/* ──────── PATTERN 4 (RETAIN page-local): Comparison reference table ────────
   Spec-by-spec side-by-side table. First column is a row label, second
   and third are the two materials. Highlighted "winner" cell per row
   uses a thin accent rule on the left edge. RETAIN RATIONALE: needs the
   data shape locked first (rows × columns × winner-flag) before this is
   safe to promote as a canonical archetype. Promote once the data-shape
   contract is decided. */
.sh-page .sh-cmp-table-wrap {
    overflow-x: auto;
    margin: 1.5rem 0 2rem;
    border-radius: var(--sh-radius);
    border: 1px solid var(--sh-border);
    box-shadow: var(--sh-shadow);
}
.sh-page .sh-cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    background: var(--sh-white);
    min-width: 540px;
}
.sh-page .sh-cmp-table thead th {
    background: var(--sh-primary);
    color: var(--sh-white);
    font-family: var(--sh-font-heading) !important;
    font-size: 0.9375rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.875rem 1.125rem;
    text-align: left;
}
.sh-page .sh-cmp-table thead th:first-child { background: var(--sh-primary-dark); }
.sh-page .sh-cmp-table tbody th {
    background: var(--sh-surface-warm);
    color: var(--sh-gray-dark);
    font-family: var(--sh-font-body) !important;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.75rem 1.125rem;
    text-align: left;
    border-top: 1px solid var(--sh-border);
    width: 30%;
}
.sh-page .sh-cmp-table tbody td {
    padding: 0.75rem 1.125rem;
    border-top: 1px solid var(--sh-border);
    border-left: 1px solid var(--sh-border);
    color: var(--sh-gray-dark);
    line-height: 1.5;
    vertical-align: top;
}
.sh-page .sh-cmp-table tbody tr:nth-child(even) td,
.sh-page .sh-cmp-table tbody tr:nth-child(even) th { background-color: rgba(247, 245, 239, 0.4); }
.sh-page .sh-cmp-table .sh-cmp-win {
    position: relative;
    background: rgba(58, 170, 154, 0.06) !important;
    box-shadow: inset 3px 0 0 var(--sh-primary);
    font-weight: 600;
}
.sh-page .sh-cmp-table .sh-cmp-win::before {
    content: '✓';
    display: inline-block;
    margin-right: 0.4rem;
    color: var(--sh-primary);
    font-weight: 900;
}
.sh-page .sh-cmp-source {
    font-size: 0.8125rem;
    color: var(--sh-gray-mid);
    margin: 0 0 2rem;
    font-style: italic;
}


/* ──────── Long-form body rhythm (RETAIN page-local) ────────
   Slightly tightened body text inside the article column. Reuses the
   existing .sh-text size/line-height feel but with measure-friendly
   max-width so paragraphs don't get too wide. RETAIN RATIONALE: candidate
   for a proper .sh-prose typography pass — same BACKLOG entry P-legal
   and P-blog-post already raised. Promote as part of that pass, not
   piecemeal here. */
.sh-page .sh-longform-body { max-width: 720px; }
.sh-page .sh-longform-body > p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--sh-gray-dark);
    margin: 0 0 1.25rem;
}
.sh-page .sh-longform-body > h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
    margin: 2.5rem 0 1rem !important;
    scroll-margin-top: 2rem;
}
.sh-page .sh-longform-body > h2:first-child { margin-top: 0 !important; }
.sh-page .sh-longform-body > h3 {
    font-size: 1.125rem !important;
    margin: 1.75rem 0 0.75rem !important;
    text-transform: none !important;
    letter-spacing: -0.005em;
    scroll-margin-top: 2rem;
}


/* ──────── RESPONSIVE — 1024px / Tablet (RETAIN page-local) ────────
   Only the longform-body max-width override remains here; the layout +
   TOC + grid responsive rules moved to K1 in 02-CSS. */
@media (max-width: 1024px) {
    .sh-page .sh-longform-body { max-width: none; }
}


/* ──────── RESPONSIVE — 768px / Mobile (Session 5, 2026-05-29) ────────
   Page-local mobile pass for P-blog-post. Kept page-local per Stevie's
   directive: "we are working exclusively on the blog template." These
   rules override canonical K1 from page-local where they collide;
   identical selector specificity, page-local stylesheet appears after
   02-CSS in the harness composite, so source order wins.

   ROOT CAUSE THIS BLOCK KILLS — horizontal page overflow:
   The .sh-longform-body is a CSS grid item inside .sh-longform-layout.
   Grid items default to min-width: auto, which lets intrinsically wide
   content (the spec table and decision matrix both have min-width: 540px
   on the <table>) BUBBLE UP and force the grid item — and through it the
   .sh-container, and through it the document — wider than the viewport.
   The .sh-cmp-table-wrap / .sh-decide-wrap overflow-x:auto wrappers
   never get to do their job because the parent never agrees to shrink.
   Setting min-width:0 on the grid item + the grid container lets the
   wrappers contain the horizontal scroll where it belongs.

   Secondary kill: .sh-byline-card (canonical K1.13a) is inline-flex with
   no width cap. The long second-line blurb forces the pill wider than
   the viewport. Drop the pill shape on mobile and let it grow into a
   normal card. */
@media (max-width: 768px) {

    /* Grid-item min-width — the cascade-killer. */
    .sh-page .sh-longform-layout { min-width: 0; }
    .sh-page .sh-longform-body   { min-width: 0; }

    /* Byline card mobile shape — overrides canonical K1.13a inline-flex
       pill. Full-width card, normal radius, text wraps inside. */
    .sh-page .sh-byline-card {
        display: flex;
        max-width: 100%;
        border-radius: var(--sh-radius);
        box-sizing: border-box;
        flex-wrap: nowrap;
        gap: 0.75rem;
        padding: 0.625rem 0.875rem;
    }
    .sh-page .sh-byline-text {
        min-width: 0;
        flex: 1 1 0;
    }

    /* A2 hero — breathing room around the content stack. The canonical
       768px rule tightens .sh-post-hero-content to 1.5rem 1rem, which
       crashes the eyebrow + h1 + byline against the viewport edges and
       against the bottom of the hero image. Bump horizontal + vertical
       to give the stack room to breathe. h1 margin-bottom also tightened
       so the byline card sits closer to the title and the whole stack
       reads as one unit. */
    .sh-page .sh-post-hero-content {
        padding: 2rem 1.25rem 1.75rem;
    }
    .sh-page .sh-post-hero h1 {
        margin-bottom: 0.75rem;
    }
    .sh-page .sh-byline-card {
        margin-top: 0.75rem;
    }


    /* ─── PATTERN 4 (comparison spec table) — STACKED-CARD MOBILE MODE ───
       At 375px the desktop horizontal-scroll table only shows ~2 columns;
       the replace column requires a sideways swipe most users never
       discover. Reflow the same <table> markup into a vertical stack of
       cards — one card per spec row, spec name as a navy banner header,
       both material values stacked inside as labeled rows.

       The <td>s carry a data-label written from the table's own column
       headings, and ::before prints it, so the card labels are whatever
       cmp_col_1 / cmp_col_2 say. Winner cells (.sh-cmp-win) keep the ✓
       + primary-green accent, inlined ahead of the same label.

       ⚠ THIS USED TO BE :nth-of-type WITH THE LABELS WRITTEN OUT IN THE
       CSS — 'Lean Repair' and 'Lean Replace', the reference site's own
       column headings — 2026-09-21, Robbie: "the labels are wrong
       (hardcoded as lean repair/lean replace and repair/replace instead
       of the actual headings)".

       He is right, and the flat file does it too: theme/P-blog-post.css
       carries the identical rules, so every one of TMAK's three posts
       reads "Lean Repair / Lean Replace" on a phone over columns headed
       "Lean Refinish / Lean Replace", "Refresh / Full Remodel" and
       "Feels Bigger / Costs You Space". A stylesheet cannot know a
       table's headings, so it was never going to be right in CSS; the
       markup knows them and now says so. A DIVERGENCE FROM
       theme/P-blog-post.css, and a deliberate one.

       Wrapper border + shadow drop on mobile since each row-card has its
       own border. The canonical .sh-cmp-win::before rule (content '✓',
       font-weight 900) is overridden by the higher-specificity rule
       below: the canonical is (0,3,1) and the card-mode one is (0,3,3),
       the extra weight coming from `tbody td` rather than, as it used
       to, from :nth-of-type. */
    .sh-page .sh-cmp-table-wrap {
        overflow-x: visible;
        border: none;
        box-shadow: none;
        border-radius: 0;
        margin: 1rem 0 1.5rem;
    }
    .sh-page .sh-cmp-table {
        display: block;
        min-width: 0;
        background: transparent;
        border-collapse: separate;
    }
    .sh-page .sh-cmp-table thead { display: none; }
    .sh-page .sh-cmp-table tbody { display: block; }
    .sh-page .sh-cmp-table tbody tr {
        display: block;
        background: var(--sh-white);
        border: 1px solid var(--sh-border);
        border-radius: var(--sh-radius);
        box-shadow: var(--sh-shadow);
        margin: 0 0 0.875rem;
        overflow: hidden;
    }
    /* Kill canonical even-row tint in card mode */
    .sh-page .sh-cmp-table tbody tr:nth-child(even) td,
    .sh-page .sh-cmp-table tbody tr:nth-child(even) th {
        background-color: transparent;
    }
    /* Spec name (was left tbody <th>) becomes the card banner */
    .sh-page .sh-cmp-table tbody th {
        display: block;
        width: 100%;
        background: var(--sh-primary);
        color: var(--sh-white);
        font-family: var(--sh-font-heading) !important;
        font-size: 0.875rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 0.75rem 1rem;
        border: none;
    }
    /* Each material cell becomes a labeled row inside the card */
    .sh-page .sh-cmp-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        padding: 0.75rem 1rem;
        border: none;
        border-top: 1px solid var(--sh-border);
        background: var(--sh-white);
        color: var(--sh-gray-dark);
        line-height: 1.5;
    }
    /* Synthesize the column label that the hidden thead would have shown */
    .sh-page .sh-cmp-table tbody td::before {
        flex-shrink: 0;
        display: inline-block;
        font-family: var(--sh-font-button) !important;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--sh-gray);
        margin: 0;
    }
    .sh-page .sh-cmp-table tbody td::before { content: attr(data-label); }
    /* Winner cell: green accent stays, ✓ inlines with col label.
       ⚠ THE THREE ELEMENT NAMES ARE LOAD-BEARING. The canonical
       `.sh-page .sh-cmp-table .sh-cmp-win::before { content: '✓' }` is
       (0,3,1); this is (0,3,3) and outranks it. Dropping `tbody td`
       would lose the label and leave a bare tick. */
    .sh-page .sh-cmp-table tbody td.sh-cmp-win::before {
        content: '\2713  ' attr(data-label);
        color: var(--sh-primary);
        font-weight: 700;
    }


    /* ─── PATTERN 12 (decision matrix) — STACKED-CARD MOBILE MODE ───
       Same structural problem as PATTERN 4 above: horizontal-scroll
       table on 375px hides the third column. Reflow into stacked cards
       with the same ::before trick, reading the same data-label the
       comparison table uses. Situation question is the navy banner, the
       column headings label the rows on the left, canonical chips on
       the right.

       ⚠ THE LABELS WERE 'Repair' / 'Replace' IN THE CSS HERE TOO, and
       went the same way on 2026-09-21 — see PATTERN 4 above.

       Override of canonical K1.12 from page-local — selectors match
       canonical specificity, page-local stylesheet appears after 02-CSS
       in the harness composite so source order wins at the cascade.

       Chip wrap: canonical chip has white-space:nowrap which would force
       the long "Yes, almost every time" chip to push the row wider than
       375px. Allow wrap on mobile and let the chip pill grow to two
       lines if it has to. */
    .sh-page .sh-decide-wrap {
        overflow-x: visible;
        border: none;
        box-shadow: none;
        border-radius: 0;
        margin: 1rem 0 1.5rem;
    }
    .sh-page .sh-decide-table {
        display: block;
        min-width: 0;
        background: transparent;
        border-collapse: separate;
    }
    .sh-page .sh-decide-table thead { display: none; }
    .sh-page .sh-decide-table tbody { display: block; }
    .sh-page .sh-decide-table tbody tr {
        display: block;
        background: var(--sh-white);
        border: 1px solid var(--sh-border);
        border-radius: var(--sh-radius);
        box-shadow: var(--sh-shadow);
        margin: 0 0 0.875rem;
        overflow: hidden;
    }
    /* Situation question (was left tbody <th>) becomes the card banner */
    .sh-page .sh-decide-table tbody th {
        display: block;
        width: 100%;
        background: var(--sh-primary);
        color: var(--sh-white);
        font-family: var(--sh-font-heading) !important;
        font-size: 0.875rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 0.75rem 1rem;
        border: none;
        text-align: left;
        line-height: 1.3;
    }
    /* Each chip cell becomes a labeled row */
    .sh-page .sh-decide-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border: none;
        border-top: 1px solid var(--sh-border);
        background: var(--sh-white);
        text-align: left;
    }
    .sh-page .sh-decide-table tbody td::before {
        flex-shrink: 0;
        display: inline-block;
        font-family: var(--sh-font-button) !important;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--sh-gray);
        margin: 0;
    }
    .sh-page .sh-decide-table tbody td::before { content: attr(data-label); }
    /* Allow chip pill to wrap to two lines on long values like
       "Yes, almost every time" so the row doesn't overflow horizontally */
    .sh-page .sh-decide-chip {
        white-space: normal;
        text-align: center;
        line-height: 1.35;
    }

}

/* ════════════════════════════════════════════════════════════════════════
   ⚠ DIVERGENCE — TABLE DEFAULTS THE FLAT FILE NEVER HAD TO DECLARE.
   2026-09-20, Robbie: "Comparison table right column is not styled correctly,
   and labels are aligned middle instead of top. Tier table should not have
   alternating background colors."

   Measured on the live pair. Two rules in the WordPress theme reach the cells
   this stylesheet does not style itself:

       table td, table th { vertical-align: top }                    (0,0,2)
       table tbody > tr:nth-child(2n+1) > td,
       table tbody > tr:nth-child(2n+1) > th
                         { background-color: rgba(128,128,128,.07) } (0,1,3)

   so against the original:

       tbody th  vertical-align   original middle       WordPress top
       tbody td  background       original transparent  WordPress grey 7%
                 (on ODD rows — the even ones carry our own warm tint in both,
                  which is why it read as "alternating" rather than "grey")

   The stylesheet declares vertical-align on `tbody td` and a background on
   `tbody th`, and nothing for the other half of each pair, because the flat
   file had no theme to declare it for them. Same absence as line-height,
   box-sizing, the root font size and figcaption's font-style.

   ⚠ THE WEIGHT HAS TO SIT IN A GAP, and the ladder is measured, not counted:

       table td, table th                                       (0,0,2) theme
       table tbody > tr:nth-child(2n+1) > td                    (0,1,4) theme
       .sh-page .sh-cmp-table thead th   { background }         (0,2,2) ours
       .sh-page .sh-cmp-table tbody th   { background }         (0,2,2) ours
       .sh-page .sh-cmp-table tbody td   { vertical-align, lh } (0,2,2) ours
       .sh-page .sh-cmp-table tbody tr:nth-child(even) td       (0,3,3) ours

   It must beat the theme's (0,1,4) and lose to our own (0,2,2). :where()
   contributes nothing, so this selector is (0,2,0): above the theme on class
   count, below our own on type count.

   ⚠ THE FIRST CUT WAS `tbody :is(td, th)` AND THAT WAS (0,2,2) — a TIE with
   the two rules it must lose to, handed to this one by source order. It
   blanked the label column's background and dropped the value column's top
   alignment: the fix reintroduced the bug in the other direction. Scoped to
   the table with :where() there is room on both sides; :is() here would be
   (0,2,1), which still fits, but :where() is the one that says why.

   ⚠ NOT SCOPED TO tbody, because thead th has no line-height of ours either.

   ⚠ revert FOR THE TWO CELL PROPERTIES, inherit FOR line-height, and the
   difference is smaller than it looks. `revert` rolls this element's cascade back to the
   user-agent origin; for an INHERITED property the UA declares nothing about,
   that lands on the inherited value anyway — measured, `line-height: revert`
   and `line-height: inherit` give the same 22.4px here. `inherit` is written
   because it says what the original does: .sh-page sets
   `line-height: 1.6 !important` and every cell without one of its own takes
   it. Measured, with a theme adding `table td, table th { line-height: 1.5 }`:

       .sh-cmp-table thead th      original 24px      WordPress 22.5px
       .sh-cmp-table tbody th      original 22.4px    WordPress 21px
       .sh-decide-table thead th   original 22.4px    WordPress 21px
       .sh-decide-table tbody td   original 25.6px    WordPress 24px

   Every one is a cell this file declares no line-height for. The ones it does
   — cmp tbody td at 1.5, decide tbody th at 1.3 — matched already and still
   do, because (0,2,2) beats this.

   ⚠ AND AN A/B DIFF CANNOT CATCH A MISTAKE HERE, because both sides load this
   file: a rule that outranks our own breaks them equally and the diff stays
   clean. verify/render-diff/tables.mjs asserts the absolute values for that
   reason. It is the only thing that caught the :is() version. */
.sh-page .sh-cmp-table :where(td, th),
.sh-page .sh-decide-table :where(td, th) {
    background-color: revert;
    vertical-align: revert;
}

/* ⚠ AND line-height IS RE-ANCHORED AT THE TABLE, NOT AT THE CELL — 2026-09-20,
   Robbie: "Second table still has the wrong line height", after the cell-level
   fix above had already landed.

   line-height INHERITS, so `td { line-height: inherit }` copies whatever the
   row above it computed. A theme that styles the cell is fixed by that; a
   theme that styles `table`, `tbody` or `tr` is not — the cell faithfully
   inherits the wrong number and the restore does nothing. Reproduced in
   verify/render-diff by moving the modelled theme rule up one level: 26
   elements diverge, and the cmp table's own cells stay right only because
   they carry an explicit 1.5.

   Every node from the table down is pinned, so the chain starts again at
   .sh-page's 1.6 wherever the theme broke it. The cells that declare their own
   — cmp tbody td at 1.5, decide tbody th at 1.3 — still win at (0,2,2). */
.sh-page .sh-cmp-table,
.sh-page .sh-decide-table,
.sh-page .sh-cmp-table :where(thead, tbody, tfoot, tr, td, th),
.sh-page .sh-decide-table :where(thead, tbody, tfoot, tr, td, th) {
    line-height: inherit;
}

/* ⚠ AND THE DECISION TABLE'S FONT SIZE, WHICH IS WHAT THE LAST TWO ROUNDS OF
   "the second table still has the wrong line height" ACTUALLY WERE.
   2026-09-20, measured on the live pair:

       .sh-decide-table   original 16px / 25.6px   WordPress 14.4px / 23.04px

   line-height computes to 1.6 on both sides — the restore above works. The
   pixels differ because 25.6 is 1.6 × 16 and 23.04 is 1.6 × 14.4, and 14.4 is
   0.9 × 16: the theme sets a font-size on `table`, and this table declares
   none of its own. Reported as a line-height because that is what a computed
   line-height looks like when the font size moved underneath it — and it is
   why modelling three shapes of line-height rule fixed a harness and not a
   page.

   ⚠ THE COMPARISON TABLE IS DELIBERATELY NOT HERE. It declares
   `font-size: 0.9375rem` at (0,2,0), the same weight this rule would have, so
   including it would tie and win on source order and push its cells from 15px
   to 16px — breaking the table that was already right. That is the same
   mistake :is(td, th) made two rounds ago, and it is why this names one table
   rather than both.

   Cells that declare their own — thead th at 0.875rem, tbody th at 0.9375rem —
   keep it at (0,2,2). */
.sh-page .sh-decide-table,
.sh-page .sh-decide-table :where(thead, tbody, tfoot, tr, td, th) {
    font-size: inherit;
}