/* ==============================================================
   blog-editorial.css — production CSS for the v3 blog template
   Extracted from seo/backlink-posts/recovered-posts/_REDESIGN-MOCKUP.html
   Image fixes locked in per "images always fail first" memory.

   ⚠ PHASE 0 IMAGE-RENDERING GUARDRAILS — DO NOT REGRESS

   These rules are the reason image rendering does NOT hang at 30s
   anymore. Every prior session that touched the blog template
   regressed at least one of them and we had to rebuild.

   1. Background-stage glow uses filter: blur(60px) — NEVER 180px.
      180px hangs the browser on retina screens.
   2. The glow elements MUST have:
        will-change: transform
        contain: strict
        transform: translateZ(0)
      Otherwise the GPU compositor falls back to CPU and the page
      stalls during scroll.
   3. The `.background-stage .glow` animation MUST be wrapped by
      `@media (prefers-reduced-motion: reduce) { animation: none }`.
   4. Hero figures (.article-hero) use max-width: 520px and have
      NO `aspect-ratio` lock — portrait PDFs decide their own height.
   5. Anatomy figures (the in-body annotated paystub) use a parent
      max-width of ~880px and again NO aspect-ratio lock.
   6. Annotated-figure chip overlays use percentage coordinates
      on top of the rendered PNG (.zchip uses left:var(--x); top:var(--y)
      with values like "23%" / "47%"). Do NOT introduce an SVG overlay
      with preserveAspectRatio="none" — the chips will misalign by
      ~150px on portrait renders.
   7. PNG renders from scripts/render-template-pdfs.cjs MUST stay at
      viewportScale 1.3 (~800×1029, ~120-160KB). 2.0 hangs the page.

   See: ~/.claude/projects/.../memory/feedback_images_fail_first.md
   ============================================================== */

/* ============================================================
   Tokens — verbatim from site.storefront.bundle.css 3983–4018
   ============================================================ */
:root,
[data-theme="light"] {
    color-scheme: light;
    --bg: #fbfbfd;
    --surface: rgba(255,255,255,0.92);
    --surface-strong: rgba(255,255,255,0.98);
    --surface-soft: rgba(12,18,34,0.035);
    --border: rgba(12,18,34,0.08);
    --border-strong: rgba(12,18,34,0.14);
    --text: #1a2333;
    --text-muted: #4e6077;
    --text-soft: #7a8699;
    --heading: #0a1220;
    --brand: #0f4fff;
    --accent: #18b7ff;
    --atmo-blue: #b0c4de;
    --atmo-violet: #c5b4d1;
    --grain-opacity: 0.022;
    --primary: #0385ff;
    --primary-dk: #0270d9;
    --primary-deep: #075eb8;
    --reading-bg: rgba(251,251,253,0.96);
    --rule: rgba(12,18,34,0.10);
    --rule-soft: rgba(12,18,34,0.055);
    --motion-fast: 110ms cubic-bezier(0.22,1,0.36,1);
    --motion-base: 220ms cubic-bezier(0.22,1,0.36,1);
    --font-display: "Söhne","Inter","Plus Jakarta Sans",system-ui,sans-serif;
    --font-body: "Plus Jakarta Sans","Inter",system-ui,sans-serif;
    --font-ui: "Plus Jakarta Sans","Inter",system-ui,sans-serif;
    --font-mono: "JetBrains Mono",ui-monospace,monospace;
    /* Modular scale 1.25 — locked */
    --fs-xs: 0.75rem; /* 12px */
    --fs-sm: 0.875rem; /* 14px */
    --fs-base: 1.125rem; /* 18px */
    --fs-lead: 1.41rem; /* 22.5px */
    --fs-h3: 1.41rem; /* 22.5px */
    --fs-h2: 1.95rem; /* 31.2px */
    --fs-h1: 3.05rem; /* 48.8px */
    --fs-pull: 1.41rem; /* 22.5px — harmonized with lead/H3 */
    --lh-body: 1.72;
    --lh-tight: 1.18;
    --space-xs: 6px;
    --space-sm: 12px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 64px;
    --space-2xl: 96px;
}
[data-theme="dark"]{
  color-scheme: dark;
  --bg: #050811;
  --surface: rgba(10,16,32,0.78);
  --surface-strong: rgba(14,22,42,0.94);
  --surface-soft: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.14);
  --text: #e8edf4;
  --text-muted: #b5c0d0;
  --text-soft: #7d8b9f;
  --heading: #ffffff;
  --atmo-blue: #4a5d7a;
  --atmo-violet: #5c5470;
  --grain-opacity: 0.035;
  --reading-bg: rgba(10,14,26,0.62);
  --rule: rgba(255,255,255,0.12);
  --rule-soft: rgba(255,255,255,0.06);
}

/* ⚠ MUST stay scoped to `.editorial-shell` — the mockup was a standalone
   HTML doc where these rules sat on `body` directly. In the app, `body` also
   carries the site header / footer / menu typography. A bare `body { font-family }`
   here would override the menus on every v3 blog post (which it did in a
   prior session — see post-mortem in chat history). DO NOT regress. */
html{scroll-behavior:smooth}
.editorial-shell{
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"liga","onum","ss01";
}

/* ⚠ PHASE 0 IMAGE GUARDRAIL — Background-stage.
   filter: blur(60px) NOT 180px. GPU-accelerated. Paused on prefers-reduced-motion. */
.background-stage{position:fixed;inset:0;overflow:hidden;z-index:-2;pointer-events:none;
  contain:strict}
.background-stage .glow{position:absolute;border-radius:50%;filter:blur(60px);
  opacity:.10;animation:glowDrift 36s ease-in-out infinite alternate;
  will-change:transform;transform:translateZ(0)}
.background-stage .glow-primary{width:64vw;height:64vh;top:-10%;left:-10%;
  background:var(--atmo-blue);opacity:.08}
.background-stage .glow-accent{width:54vw;height:54vh;bottom:-10%;right:-10%;
  background:var(--atmo-violet);opacity:.06;animation-delay:-15s}
@media (prefers-reduced-motion: reduce){
  .background-stage .glow{animation:none}
}
.background-stage .grain{position:absolute;inset:0;opacity:var(--grain-opacity);
  mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") center/220px 220px repeat}
.reading-mask{position:fixed;top:0;bottom:0;left:50%;width:min(1100px,96vw);
  transform:translateX(-50%);background:var(--reading-bg);
  z-index:-1;pointer-events:none;opacity:.94}
@keyframes glowDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4vw,3vh,0) scale(1.04)}
  100%{transform:translate3d(-3vw,-2vh,0) scale(.97)}
}

/* Reading-progress bar */
.read-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:50;
  background:transparent;pointer-events:none}
.read-progress__fill{height:100%;width:0%;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  transition:width 80ms linear;box-shadow:0 0 10px rgba(3,133,255,.45)}

/* Theme toggle */
.theme-toggle{position:fixed;top:16px;right:20px;display:inline-flex;gap:6px;
  align-items:center;padding:6px 11px;border:1px solid var(--border-strong);
  border-radius:999px;background:var(--surface-strong);backdrop-filter:blur(14px);
  font-family:var(--font-ui);font-size:var(--fs-xs);color:var(--text-muted);
  cursor:pointer;z-index:40;transition:background var(--motion-fast)}

/* ============================================================
   LAYOUT — title and body share the SAME left edge.
   Grid: 720px content + 64px gap + 220px sidebar = 1004px,
   centered inside the shell.
   ============================================================ */
.editorial-shell{max-width:1100px;margin:0 auto;padding:0 28px 96px}

/* Topmatter spans the content column ONLY (matches body left edge).
   The left margin matches the auto-centering of .article-layout
   (which is max-width: 1004px centered inside the ~1044px shell-inner).
   That keeps the title's left edge flush with the prose column's left edge.
   max(0px, ...) collapses the offset on narrow screens where the layout
   has no centering room to give. */
/* Topmatter now spans the FULL article+sidebar layout width (1004px =
   720 content + 64 gap + 220 sidebar) instead of just the content column.
   Title / byline / breadcrumb get the same horizontal extent as the
   layout below, so the topmatter visually anchors over the whole
   two-column area rather than only the left half. */
.article-topmatter{max-width:1004px;
  margin-left:auto;
  margin-right:auto;
  margin-top:1rem;
  margin-bottom:20px}
/* site.storefront.bundle.css:2887 sets `.article-topmatter { display:grid;
   gap:1rem }` which adds 16 px between every child on top of the explicit
   margins on tags/title/byline/dek. Override that gap to 0 so the tightened
   margins control the spacing on their own. Selector qualified with
   .editorial-shell so specificity (0,2,0) beats the bundle's (0,1,0). */
.editorial-shell .article-topmatter{gap:0}

/* Category pills above the title. Asymmetric corners (TL square, TR
   rounded, BL square, BR rounded) is the canonical site-wide pill shape.
   Lives in the base styles so desktop + mobile share it; the mobile
   media-query block below only overrides typographic sizing. */
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.article-tag{display:inline-block;
  padding:6px 14px;
  background:var(--primary, #0385ff);color:#fff;
  font-family:"Cabin",system-ui,sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  border-radius:0 8px 0 8px;line-height:1.4;
  transition:background var(--motion-fast)}
.article-tag:hover{background:var(--primary-dk, #0270d9);color:#fff}
.sf-breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;
  font-family:var(--font-ui);font-size:var(--fs-xs);color:var(--text-soft);
  margin-bottom:var(--space-md);letter-spacing:.02em}
.sf-breadcrumbs a{color:var(--text-soft);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color var(--motion-fast)}
.sf-breadcrumbs a:hover{color:var(--primary-deep);border-color:var(--primary-deep)}

.kicker{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--primary-deep);
  margin-bottom:var(--space-md)}
.kicker::before{content:"";width:22px;height:1.5px;background:currentColor}
[data-theme="dark"] .kicker{color:var(--accent)}

/* Selector includes .article-topmatter so this rule out-specifies the
   `.article-topmatter h1 { max-width: 16ch }` declaration in
   site.storefront.bundle.css line 2892 — without the bump the bundle
   rule wins (same specificity, loads later) and the title wraps to 4
   lines on desktop. max-width:none lets the title flow to the 720px
   topmatter container width — typically 1-2 lines. */
.article-topmatter h1.article-title{font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,4vw,var(--fs-h1));line-height:1.05;letter-spacing:-.025em;
  color:var(--heading);margin:0 0 10px;max-width:none;text-wrap:balance}
.article-dek{font-family:var(--font-body);font-size:var(--fs-lead);
  line-height:1.45;color:var(--text-muted);max-width:60ch;
  margin:0;font-weight:400}

.editorial-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0;
  font-family:var(--font-ui);font-size:var(--fs-xs);color:var(--text-soft);
  margin-bottom:var(--space-md)}
.editorial-meta > *{padding:0 12px;border-right:1px solid var(--rule-soft)}
.editorial-meta > *:first-child{padding-left:0}
.editorial-meta > *:last-child{border-right:0}
.editorial-meta strong{color:var(--text);font-weight:600}
.editorial-meta .reviewed-on{color:#16a34a;font-weight:700;letter-spacing:.02em}

.byline-strip{display:flex;align-items:center;gap:12px;
  padding-top:var(--space-md);border-top:1px solid var(--rule-soft);font-family:var(--font-ui)}
.byline-avatar{width:42px;height:42px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-ui);font-weight:700;color:#fff;font-size:13px;
  background:linear-gradient(135deg,var(--primary),var(--primary-deep));
  box-shadow:0 4px 10px rgba(3,133,255,.20)}
.byline-name{font-weight:700;color:var(--heading);font-size:var(--fs-sm);letter-spacing:-.01em}
.byline-role{color:var(--text-soft);font-size:var(--fs-xs);margin-top:2px}

/* Topmatter byline — Investopedia-style "By Author · Updated date" strip
   that sits directly under the H1. Single line on every viewport. */
.article-byline{font-family:var(--font-ui);font-size:.92rem;color:var(--text-soft);
  margin:0 0 8px;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.article-byline__name{color:var(--text);font-weight:600;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color var(--motion-fast)}
.article-byline__name:hover{border-color:var(--primary-deep)}
.article-byline__sep{color:var(--text-soft);opacity:.55}
.article-byline time{font-variant-numeric:tabular-nums}

/* Hero figure now matches the article column width (720px) so the cover image
   sits flush with the prose underneath. Was 520px before. NO aspect-ratio
   lock — portrait PDF renders decide their own height. */
/* Hero — desktop: 860px wide, 16:9 aspect-locked, subtle drop-shadow.
   Mobile: full-bleed (breaks out of column padding), edge-to-edge image,
   no border-radius, becomes the visual anchor of the page. */
.article-hero{margin:0 auto var(--space-xl) auto;max-width:860px;
  display:flex;flex-direction:column;align-items:stretch}
.article-hero__image{border-radius:14px;overflow:hidden;
  box-shadow:0 28px 64px -28px rgba(12,18,34,.32);
  position:relative;width:100%;aspect-ratio:16/9}
.article-hero__image img{display:block;width:100%;height:100%;object-fit:cover}
.article-hero__image svg{display:block;width:100%;height:100%}
.article-hero__credit{font-family:var(--font-ui);font-size:var(--fs-xs);
  color:var(--text-soft);margin-top:var(--space-sm);
  display:flex;justify-content:space-between;gap:14px;letter-spacing:.02em}

@media (max-width: 768px) {
  .article-hero{
    max-width:none;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    margin-bottom:var(--space-lg);
  }
  .article-hero__image{
    border-radius:0;
    border:0;
    aspect-ratio:16/9;
    box-shadow:none;
  }
  /* Generic .article-content img rule adds border-radius:18px and
     margin:1rem 0; the hero img inherits those and ends up with rounded
     corners and a 16px gap above. Reset both on mobile. */
  .article-hero img{
    border-radius:0;
    margin:0;
  }
  .article-hero__credit{
    padding:0 1rem;
  }
}

/* ============================================================
   2-col layout — 720px content + 220px sticky sidebar
   ============================================================ */
.article-layout{display:grid;
  grid-template-columns:minmax(0,720px) 220px;
  gap:64px;align-items:start;max-width:1004px;margin:0 auto}
.article-content{min-width:0;font-family:var(--font-body)}

/* Vertical share rail (left of content) */
.share-rail{position:fixed;left:max(24px,calc(50vw - 600px));
  top:30vh;display:flex;flex-direction:column;gap:4px;z-index:5}
.share-rail button{width:34px;height:34px;border-radius:50%;
  background:var(--surface-strong);backdrop-filter:blur(10px);
  border:1px solid var(--border);color:var(--text-muted);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all var(--motion-fast)}
.share-rail button:hover{color:var(--primary-deep);
  border-color:var(--primary-deep);transform:translateX(2px)}
.share-rail svg{width:14px;height:14px}
@media (max-width:1180px){.share-rail{display:none}}

/* ============================================================
   Body typography — generous vertical rhythm
   ============================================================ */
.article-content > section{margin:0 0 var(--space-2xl) 0;scroll-margin-top:24px}
.article-content > section:last-of-type{margin-bottom:var(--space-xl)}

/* Lead paragraph — flattened to match body size per editorial preference.
   Using `inherit` for font-size + line-height so the lead picks up the same
   cascade values as every other .article-content p (rather than an explicit
   --fs-base that can diverge from inherited rendering). The .lead class is
   still applied by _LeadParagraph.cshtml so the hook can be reintroduced. */
.article-content .lead{
  font-size:inherit;
  line-height:inherit;
  color:var(--text);
  margin:0 0 var(--space-md);
  font-family:var(--font-body);
}
/* Drop cap disabled — first-letter inherits paragraph styling. */
.article-content .lead::first-letter{
  font-family:inherit;
  font-weight:inherit;
  font-size:inherit;
  line-height:inherit;
  float:none;
  padding:0;
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  -webkit-text-fill-color:inherit;
  color:inherit;
}

/* H2 — clean type hierarchy, kicker label only, no brand bar */
.article-content h2{font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-h2);line-height:1.16;letter-spacing:-.02em;
  color:var(--heading);margin:var(--space-xl) 0 var(--space-md);
  position:relative;text-wrap:balance}
.article-content h2::before{content:attr(data-kicker);display:block;
  font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--primary-deep);
  margin-bottom:10px;
  /* Render the "01 · LEGAL FRAMEWORK" chip per mockup: numeric prefix sits on
     a tinted pill so it reads as a section index, not part of the kicker. */
  word-spacing:.04em}
.article-content h2[data-kicker=""]::before,
.article-content h2:not([data-kicker])::before{display:none}
[data-theme="dark"] .article-content h2::before{color:var(--accent)}

/* Hover anchor links on H2/H3 */
.article-content h2 .anchor,
.article-content h3 .anchor{position:absolute;left:-26px;top:50%;
  transform:translateY(-50%);opacity:0;color:var(--text-soft);
  text-decoration:none;font-weight:400;font-size:1.1rem;
  transition:opacity var(--motion-fast)}
.article-content h2:hover .anchor,
.article-content h3:hover .anchor{opacity:.7}

.article-content h3{font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-h3);line-height:1.28;letter-spacing:-.012em;
  color:var(--heading);margin:var(--space-lg) 0 var(--space-sm);position:relative}

.article-content p{margin:0 0 var(--space-md);color:var(--text)}
.article-content p + p{margin-top:0}
.article-content a{color:var(--primary-deep);text-decoration:none;
  border-bottom:1px solid rgba(3,133,255,.30);transition:border-color var(--motion-fast)}
.article-content a:hover{border-bottom-color:var(--primary-deep);
  border-bottom-width:1.5px}
.article-content strong{color:var(--heading);font-weight:700}
.article-content em{font-style:italic}
.article-content ul,.article-content ol{margin:0 0 var(--space-md);padding-left:1.4em}
.article-content li{margin-bottom:8px;line-height:1.62}
.article-content li::marker{color:var(--text-soft)}

/* Inline keyword chips */
.keyword-chip{display:inline-block;padding:1px 7px;border-radius:4px;
  background:var(--surface-soft);color:var(--text);font-family:var(--font-mono);
  font-size:.84em;border:1px solid var(--rule-soft)}

/* ============================================================
   ⚠ PHASE 0 IMAGE GUARDRAIL — Annotated paystub.
   Chips use percentage coordinates (--x, --y) on top of the raster PNG.
   Do NOT replace this with an SVG overlay using preserveAspectRatio="none" —
   the chips will misalign by ~150px on portrait renders.
   ============================================================ */
.annotated-stub{position:relative;display:block;margin:0}
.annotated-stub img{display:block;width:100%;height:auto;border-radius:4px;background:#fff}
.annotated-stub__chips{position:absolute;inset:0;pointer-events:none}
.zchip{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;
  border:3px solid #fff;
  box-shadow:0 4px 10px rgba(3,133,255,0.36),0 1px 3px rgba(12,18,34,0.18);
  font-family:var(--font-mono);font-weight:800;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;
  pointer-events:auto;cursor:help;padding:0;
  transition:transform 140ms ease, box-shadow 140ms ease;z-index:2}
.zchip:hover,.zchip:focus,.zchip.open{transform:translate(-50%,-50%) scale(1.16);
  box-shadow:0 8px 18px rgba(3,133,255,0.5),0 0 0 4px rgba(3,133,255,0.16);
  outline:none;z-index:5}
.zchip__tip{position:absolute;left:38px;top:50%;transform:translateY(-50%);
  background:#0a1220;color:#fff;padding:6px 10px;border-radius:6px;
  font-family:var(--font-ui);font-weight:600;font-size:12px;
  letter-spacing:.01em;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity 140ms ease;z-index:10}
.zchip[data-flip="left"] .zchip__tip{left:auto;right:38px}
.zchip:hover .zchip__tip,.zchip:focus .zchip__tip,.zchip.open .zchip__tip{opacity:1}
.annotated-stub__hint{font-family:var(--font-ui);font-size:var(--fs-xs);
  color:var(--text-soft);text-align:center;margin:10px 0 0;letter-spacing:.02em}
.annotated-stub__hint span{display:inline-flex;align-items:center;gap:5px}
.annotated-stub__hint .dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--primary);border:2px solid #fff;
  box-shadow:0 1px 3px rgba(3,133,255,0.4)}

/* ============================================================
   FIGURES — small annotated paystub snippets (multi-image pattern)
   ============================================================ */
.figure{margin:var(--space-lg) 0;font-family:var(--font-ui)}
.figure-frame{background:var(--surface-strong);border:1px solid var(--rule);
  border-radius:4px;padding:18px;overflow:hidden}
.figure-frame svg{display:block;width:100%;height:auto;max-height:380px}
.figure-caption{font-size:var(--fs-xs);color:var(--text-soft);
  margin-top:10px;letter-spacing:.02em;line-height:1.5;
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.figure-caption strong{color:var(--text);font-weight:600}

/* Figure grid — for the 4-image breakout layout */
.figure-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:var(--space-lg) 0}
.figure-grid .figure{margin:0}
.figure-grid .figure-frame{padding:14px}
.figure-grid .figure-frame svg{max-height:240px}
@media (max-width:720px){.figure-grid{grid-template-columns:1fr}}

/* Pull quote — distinct from CTA */
.pull-quote{margin:var(--space-lg) 0;padding:0 0 0 var(--space-md);
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-pull);
  line-height:1.28;letter-spacing:-.014em;color:var(--heading);
  max-width:32em;border-left:3px solid var(--primary);text-wrap:balance}
.pull-quote cite{display:block;margin-top:14px;font-family:var(--font-ui);
  font-size:var(--fs-xs);font-weight:600;color:var(--text-soft);
  font-style:normal;letter-spacing:.04em;text-transform:uppercase}
.pull-quote cite::before{content:"— "}

/* Callouts — card-style info box (matches mockup's "California's nine-item list").
   Full tinted background, optional bold block-level title above the body, soft border. */
.callout{margin:var(--space-lg) 0;padding:18px 22px;
  font-size:.97rem;line-height:1.62;color:var(--text);
  background:var(--surface-soft);border:1px solid var(--rule);
  border-left:4px solid var(--text-soft);border-radius:6px}
.callout__title{font-family:var(--font-display);font-weight:700;
  font-size:1.02rem;color:var(--heading);margin:0 0 8px;line-height:1.3;
  letter-spacing:-.005em}
.callout__body{margin:0}
.callout__body > p:first-child{margin-top:0}
.callout__body > p:last-child{margin-bottom:0}
.callout-info{border-left-color:var(--primary);
  background:linear-gradient(180deg,rgba(3,133,255,.07),rgba(3,133,255,.035))}
.callout-info .callout__title{color:var(--primary-deep)}
.callout-warn{border-left-color:#F59E0B;
  background:linear-gradient(180deg,rgba(245,158,11,.08),rgba(245,158,11,.035))}
.callout-warn .callout__title{color:#92400E}
.callout-success{border-left-color:#16a34a;
  background:linear-gradient(180deg,rgba(34,197,94,.08),rgba(34,197,94,.035))}
.callout-success .callout__title{color:#15803d}
.callout-editorial{border-left-color:#64748b;background:var(--surface-soft)}
.callout-editorial .callout__title{color:var(--heading)}
.callout strong{color:var(--heading)}
[data-theme="dark"] .callout{background:rgba(255,255,255,.025)}
[data-theme="dark"] .callout-info{background:linear-gradient(180deg,rgba(3,133,255,.14),rgba(3,133,255,.06))}

/* Investopedia-style chip callouts — icon + bold label + body, inline-flow,
   one-line accent treatments writers reach for inside the body copy. */
.callout-important,
.callout-fast-fact,
.callout-why-this-matters,
.callout-watch-out{position:relative;margin:1.25rem 0;
  padding:.9rem 1.1rem .9rem 3.1rem;border-radius:10px;
  line-height:1.55;font-family:var(--font-body)}
.callout-important::before,
.callout-fast-fact::before,
.callout-why-this-matters::before,
.callout-watch-out::before{position:absolute;top:.95rem;left:1rem;
  width:1.4rem;height:1.4rem;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:.78rem;line-height:1}
.callout-important{background:rgba(220,38,38,.06);border-left:3px solid #dc2626;color:#1f2937}
.callout-important::before{content:"!";background:#dc2626;color:#fff}
.callout-fast-fact{background:rgba(3,133,255,.07);border-left:3px solid var(--primary);color:#1f2937}
.callout-fast-fact::before{content:"i";background:var(--primary);color:#fff;font-style:italic}
.callout-why-this-matters{background:rgba(99,102,241,.07);border-left:3px solid #6366f1;color:#1f2937}
.callout-why-this-matters::before{content:"?";background:#6366f1;color:#fff}
.callout-watch-out{background:rgba(234,179,8,.08);border-left:3px solid #ca8a04;color:#1f2937}
.callout-watch-out::before{content:"\25B2";background:#ca8a04;color:#fff;font-size:.68rem}
[data-theme="dark"] .callout-important,
[data-theme="dark"] .callout-fast-fact,
[data-theme="dark"] .callout-why-this-matters,
[data-theme="dark"] .callout-watch-out{color:#e2e8f0}

/* Key Takeaways box — Investopedia pattern: neutral white card, hairline
   border, small dark uppercase label, serif bullets with accent markers. */
.key-takeaways{margin:var(--space-lg) 0;padding:1.2rem 1.4rem 1.3rem;
  background:#fff;border:1px solid #d1d5db;border-radius:6px}
.key-takeaways__label{font-family:var(--font-ui);font-size:.78rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#0f172a;
  margin:0 0 .85rem;padding-bottom:.65rem;border-bottom:1px solid #e5e7eb}
.key-takeaways__list{margin:0;padding-left:1.1rem;font-family:var(--font-body);
  font-size:1.02rem;line-height:1.55;color:var(--text);list-style-type:disc}
.key-takeaways__list li{margin:.55rem 0;padding-left:.25rem}
.key-takeaways__list li::marker{color:var(--primary)}
[data-theme="dark"] .key-takeaways{background:#0f172a;border-color:#1f2a44}
[data-theme="dark"] .key-takeaways__label{color:#f1f5f9;border-bottom-color:#1f2a44}
[data-theme="dark"] .key-takeaways__list li::marker{color:var(--accent)}

/* Tables */
.table-wrap{margin:var(--space-md) 0 var(--space-lg);overflow-x:auto;
  border:1px solid var(--rule);border-radius:4px;font-family:var(--font-ui)}
.article-table{width:100%;border-collapse:collapse;font-size:.94rem}
.article-table thead th{background:var(--surface-soft);
  color:var(--heading);font-weight:700;text-align:left;padding:13px 16px;
  border-bottom:1.5px solid var(--rule);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.06em}
.article-table td{padding:12px 16px;border-bottom:1px solid var(--rule-soft);
  vertical-align:top;line-height:1.55}
.article-table tbody tr:last-child td{border-bottom:0}
.article-table .num{text-align:right;font-variant-numeric:tabular-nums;
  font-family:var(--font-mono);font-size:.88em}
.article-table .total td{font-weight:700;color:var(--heading);
  background:rgba(3,133,255,.04);border-top:1.5px solid var(--primary)}
/* Penalty / fine columns — right-aligned, mono, bold red for emphasis.
   Matches the mockup's "$50 / $100" red penalty cells. */
.article-table th.penalty,
.article-table td.penalty{text-align:right;font-variant-numeric:tabular-nums;
  font-family:var(--font-mono);font-size:.9em;
  color:#b91c1c;font-weight:700}
.article-table th.penalty{color:#7f1d1d}
.article-table td.warn{color:#92400E;font-weight:600}
[data-theme="dark"] .article-table td.penalty{color:#f87171}

/* Worked example */
.worked-example{margin:var(--space-lg) 0;padding:var(--space-md) var(--space-lg);
  background:var(--surface-soft);border-radius:4px;
  border-top:3px solid var(--primary);font-family:var(--font-ui)}
.worked-example__label{display:inline-block;font-size:var(--fs-xs);
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--primary-deep);margin-bottom:10px}
.worked-example__title{font-family:var(--font-display);font-size:1.15rem;
  font-weight:700;color:var(--heading);margin:0 0 var(--space-sm);letter-spacing:-.01em}
.worked-example__steps{list-style:none;padding:0;counter-reset:s}
.worked-example__steps li{counter-increment:s;padding:10px 0 10px 38px;
  border-bottom:1px solid var(--rule-soft);position:relative;font-size:.96rem;
  line-height:1.55}
.worked-example__steps li::before{content:counter(s);position:absolute;
  left:0;top:11px;width:24px;height:24px;border-radius:50%;
  background:transparent;border:1.5px solid var(--primary);color:var(--primary-deep);
  font-family:var(--font-mono);font-weight:700;font-size:.74rem;display:inline-flex;
  align-items:center;justify-content:center}
.worked-example__steps li:last-child{border-bottom:0}

/* Subtle inline product mentions */
.product-mention{background:linear-gradient(0deg,
  rgba(3,133,255,.10) 0%, rgba(3,133,255,.10) 100%) no-repeat left bottom;
  background-size:100% 22%;padding:0 1px;color:inherit;
  border-bottom:1px solid rgba(3,133,255,.32);
  transition:background-size var(--motion-base)}
.product-mention:hover{background-size:100% 80%;
  border-bottom-color:var(--primary-deep)}

/* Editor's note */
.editorial-note{margin:var(--space-xl) 0 var(--space-md);
  padding:var(--space-md) var(--space-lg);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-family:var(--font-ui);background:transparent}
.editorial-note__kicker{display:inline-block;font-size:var(--fs-xs);
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-soft);margin-bottom:10px}
.editorial-note p{font-family:var(--font-body);font-size:1.02rem;
  line-height:1.62;margin:0 0 10px;color:var(--text-muted)}
.editorial-note .guardrail{font-size:.86rem;color:var(--text-soft);
  font-style:italic;display:block;margin-top:8px;padding-top:10px;
  border-top:1px dashed var(--rule-soft)}

/* ============================================================
   FAQ section — real FAQ, not generic disclosure
   ============================================================ */
.article-faq-header{margin-bottom:var(--space-md);font-family:var(--font-ui)}
.article-faq-header__intro{font-family:var(--font-body);font-size:1rem;
  color:var(--text-muted);max-width:58ch;margin:0 0 var(--space-md);line-height:1.6}
.article-faq{font-family:var(--font-ui);border-top:2px solid var(--heading);
  border-bottom:1px solid var(--rule)}
.article-faq-item{border-bottom:1px solid var(--rule)}
.article-faq-item:last-child{border-bottom:0}
.article-faq-item details{padding:var(--space-md) 0}
.article-faq-item summary{cursor:pointer;list-style:none;display:flex;
  justify-content:flex-start;align-items:flex-start;gap:18px;
  font-family:var(--font-display);font-weight:700;color:var(--heading);
  font-size:1.12rem;line-height:1.35;letter-spacing:-.008em}
.article-faq-item summary::-webkit-details-marker{display:none}
.article-faq-item summary::before{content:"Q";flex:none;width:30px;height:30px;
  border-radius:50%;background:var(--primary);color:#fff;
  font-family:var(--font-ui);font-weight:800;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;letter-spacing:0}
.article-faq-item summary::after{content:"+";margin-left:auto;flex:none;width:24px;height:24px;
  color:var(--text-soft);font-weight:300;font-size:1.4rem;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform var(--motion-base);line-height:1}
.article-faq-item details[open] summary::after{content:"−";color:var(--primary-deep)}
.article-faq-item summary span{flex:1;padding-top:4px}
.article-faq-item details p{font-family:var(--font-body);font-size:1.02rem;
  line-height:1.7;color:var(--text-muted);margin:14px 0 0 48px;max-width:62ch}
.article-faq-item details p:first-of-type::before{content:"A.";display:inline-block;
  font-family:var(--font-ui);font-weight:800;font-size:.85em;
  color:var(--primary-deep);margin-right:8px;letter-spacing:.02em}

/* Sources block — minimal */
#sources h2{margin-bottom:var(--space-md)}
.sources-list{list-style:none;padding:0;counter-reset:src;font-family:var(--font-ui)}
.sources-list li{counter-increment:src;position:relative;padding:9px 0 9px 38px;
  font-size:.92rem;color:var(--text-muted);border-bottom:1px solid var(--rule-soft);
  line-height:1.55}
.sources-list li:last-child{border-bottom:0}
.sources-list li::before{content:counter(src);position:absolute;left:0;top:10px;
  width:26px;color:var(--text-soft);font-weight:700;font-size:.78rem;
  font-family:var(--font-mono);border-right:1px solid var(--rule-soft);padding-right:8px}
.sources-list a{color:var(--text);border-bottom:1px solid var(--rule)}
.sources-list a:hover{color:var(--primary-deep);border-bottom-color:var(--primary-deep)}

/* Sources collapsed behind a "Sources · N references" disclosure — keeps
   the references reachable without taking 15+ lines below the fold. */
.post-sources{margin:var(--space-md) 0 var(--space-lg);
  border:1px solid var(--rule);border-radius:12px;
  background:rgba(15,23,42,.015)}
[data-theme="dark"] .post-sources{background:rgba(255,255,255,.03)}
.post-sources[open]{background:rgba(3,133,255,.03)}
.post-sources__summary{list-style:none;cursor:pointer;padding:1rem 1.25rem;
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-ui);font-weight:700;color:var(--text);
  -webkit-tap-highlight-color:transparent}
.post-sources__summary::-webkit-details-marker{display:none}
.post-sources__summary::marker{content:""}
.post-sources__label{font-size:1rem;letter-spacing:.01em}
.post-sources__count{color:var(--text-soft);font-weight:500;font-size:.92rem}
.post-sources__chevron{margin-left:auto;transition:transform var(--motion-fast);
  color:var(--text-soft)}
.post-sources[open] .post-sources__chevron{transform:rotate(180deg)}
.post-sources .sources-list{margin:0;padding:0 1.25rem 1.25rem 2.5rem}

/* ============================================================
   Sidebar — sticky, minimal
   ============================================================ */
/* ─────────────────────────────────────────────────────────────────────────
   CANONICAL SIDEBAR — verbatim from _REDESIGN-MOCKUP.html. Do not edit.
   ───────────────────────────────────────────────────────────────────────── */
/* top:66px clears the 66 px site nav — without this the sidebar's first
   panel slides under the nav as the page scrolls. Matches the editorial-
   shell's zero top padding so the sidebar pins exactly to the nav's
   bottom edge. */
.article-sidebar{position:sticky;top:66px;display:flex;flex-direction:column;
  gap:var(--space-md);font-family:var(--font-ui)}
.article-sidebar-panel h3{margin:0 0 12px;font-size:var(--fs-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);font-weight:700}
.article-toc-list{list-style:none;margin:0;padding:0}
.article-toc-list a{display:block;padding:7px 0 7px 14px;font-size:.86rem;
  line-height:1.4;color:var(--text-muted);text-decoration:none;
  border-left:1.5px solid var(--rule);transition:all var(--motion-fast)}
.article-toc-list a:hover{color:var(--primary-deep);border-left-color:var(--primary-deep)}
.article-toc-list a.active{color:var(--primary-deep);border-left-color:var(--primary);
  font-weight:600;background:linear-gradient(90deg,rgba(3,133,255,.04),transparent)}
.sidebar-stat{padding:var(--space-sm) 0;border-top:1px solid var(--rule);font-size:.85rem}
.sidebar-stat__label{color:var(--text-soft);font-size:var(--fs-xs);
  letter-spacing:.06em;text-transform:uppercase}
.sidebar-stat__value{font-family:var(--font-display);font-weight:700;
  color:var(--heading);font-size:1.3rem;margin-top:2px;line-height:1.1;letter-spacing:-.01em}

/* Sidebar tools panel — persistent utility nav, sits above the TOC.
   .sidebar-tool-pill is a LAYOUT-ONLY override on top of .btn-acc-primary
   or .btn-acc-secondary (the homepage button classes). Color, font,
   radius, shadow all inherit from those — the pill rule only stretches
   the button to fill the sidebar column and right-aligns the arrow. */
.article-sidebar-tools{display:flex;flex-direction:column;gap:10px}
.sidebar-tool-pill{
  display:flex !important;
  width:100%;
  justify-content:space-between !important;
  gap:10px;
  text-align:left;
}
.sidebar-tool-pill__arrow{
  font-weight:500;opacity:.75;
  transition:transform .15s, opacity .15s;
}
.sidebar-tool-pill:hover .sidebar-tool-pill__arrow{transform:translateX(2px);opacity:1}

/* Section-divider CTA — auto-injected between H2 sections by
   BlogBlockRenderer. Renders as a thin top-rule with a "Sponsored by
   MyStubs" eyebrow above the rotated CTA partial (ProductCard /
   ToolStrip / InlineTool). Reads as a publisher message slot rather
   than as an in-flow ad. */
.section-divider-cta{margin:var(--space-xl) 0;padding-top:var(--space-md);
  border-top:1px solid var(--rule);position:relative}
.section-divider-cta::before{content:"Sponsored by MyStubs";
  position:absolute;top:-.6rem;left:0;padding:0 .6rem;
  background:var(--bg, #fbfbfd);font-family:var(--font-ui);font-size:.68rem;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-soft)}
[data-theme="dark"] .section-divider-cta::before{background:var(--bg, #050811)}

/* Related rail */
.related-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;margin-top:var(--space-md);font-family:var(--font-ui)}
.related-card{padding:16px 0;text-decoration:none;color:var(--text);
  border-top:2px solid var(--primary);transition:border-color var(--motion-fast);display:block}
.related-card:hover{border-top-color:var(--primary-deep)}
.related-card__category{font-size:var(--fs-xs);font-weight:700;color:var(--primary-deep);
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:8px}
.related-card__title{font-family:var(--font-display);font-weight:700;
  color:var(--heading);font-size:.98rem;line-height:1.32;margin:0;letter-spacing:-.005em}
.related-card__meta{font-size:.78rem;color:var(--text-soft);margin-top:8px}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width:980px){
  .article-layout{grid-template-columns:1fr;max-width:720px}
  /* Drop the sidebar entirely on tablet + phone — Investopedia pattern.
     TOC is no longer useful when there's no fixed real-estate to anchor it,
     and the tools widget is redundant with the inline section-divider CTAs. */
  .article-sidebar{display:none !important}
  .article-layout{grid-template-columns:1fr !important;gap:0 !important}
}
/* Mobile blog post — Investopedia-style tight rhythm + typography.
   Investopedia's actual stack (extracted from production CSS):
     - Headings + labels: "Cabin" (semibold 600)
     - Body: "Source Sans 3" (Source Sans Pro renamed by Google)
   Single canonical pass — do not append patches below. */
@media (max-width:768px){
  body{font-size:17px;line-height:1.6}

  /* On desktop the .reading-mask is a centered 1100px white panel that
     leaves the outer background showing on either side. On mobile the
     96vw fallback still leaves a thin gutter between the screen edge and
     the white reading area — kill it. Full-bleed white on phones. */
  .reading-mask{width:100vw;opacity:1}

  /* Shell padding tight to the viewport so the column starts close
     to the header bar. */
  .editorial-shell{padding:8px 16px 60px}

  /* Breadcrumb — hidden on mobile per Investopedia pattern. */
  .sf-breadcrumbs{display:none}

  /* Category tags — one fit-content pill per category, side by side,
     blue with asymmetric corners (top-right + bottom-left rounded, the
     other two square). Two tags = primary "Income Verification" + the
     secondary subcategory ("Renting" or "Self Employment"). */
  .article-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px}
  .article-tag{display:inline-block;width:auto;
    padding:5px 12px;
    background:var(--primary, #0385ff);color:#fff;
    font-family:"Cabin",system-ui,sans-serif;font-size:.7rem;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
    border-radius:0 8px 0 8px;line-height:1.4;
    transition:background var(--motion-fast)}
  .article-tag:hover{background:var(--primary-dk, #0270d9);color:#fff}

  /* The old .kicker pattern has been retired — every post now ships
     through .article-tags. Hide any legacy kicker that slips through. */
  .kicker{display:none}

  /* H1 — Cabin semibold, Investopedia rhythm: ~29px, line-height 1.1,
     no negative letter-spacing. */
  h1.article-title{font-family:"Cabin",system-ui,sans-serif;
    font-size:1.8125rem;font-weight:600;line-height:1.1;letter-spacing:0;
    max-width:none;margin:0 0 4px;color:#19191c}

  /* Byline — keep on one line. site.storefront.bundle.css declares
     flex-direction:column on this selector at the same breakpoint, which
     stacks the three spans vertically; force row here. */
  .article-byline{display:flex;flex-direction:row !important;
    flex-wrap:nowrap;white-space:nowrap;
    align-items:baseline;
    overflow:hidden;text-overflow:ellipsis;
    font-family:"Source Sans 3","Source Sans Pro",system-ui,sans-serif;
    font-size:.84rem;margin:0 0 8px;gap:.3rem;color:var(--text-soft)}
  .article-byline > span{display:inline-block;white-space:nowrap}
  .article-byline__sep{flex:0 0 auto}

  /* Dek hides on mobile — title + lead carry the topmatter. */
  .article-dek{display:none}

  /* Topmatter: kill the bottom border + collapse the bottom margin.
     The hero (full-bleed) is the visual break — no extra divider needed. */
  .article-topmatter{margin:0 0 12px;padding:0;border-bottom:0}

  /* Hero — tight to the byline above and to the key-takeaways below. */
  .article-hero{margin-bottom:16px}

  /* Key Takeaways — Investopedia-style: Cabin label, Source Sans 3 bullets,
     16-20px gap to surrounding blocks. */
  .key-takeaways{margin:0 0 20px;padding:16px 18px;border-radius:6px}
  .key-takeaways__label{font-family:"Cabin",system-ui,sans-serif;
    font-size:.78rem;font-weight:700;letter-spacing:.08em;
    margin:0 0 10px;padding-bottom:8px}
  .key-takeaways__list{font-family:"Source Sans 3","Source Sans Pro",system-ui,sans-serif;
    font-size:1rem;line-height:1.5}
  .key-takeaways__list li{margin:.4rem 0}

  /* Body type — Source Sans 3 paragraphs, 18px / 1.5 (Investopedia spec). */
  .article-content{font-family:"Source Sans 3","Source Sans Pro",system-ui,sans-serif;
    font-size:1.125rem;line-height:1.5;color:#19191c}
  .article-content p{margin:0 0 16px;line-height:1.5}
  /* Lead paragraph carries .lead, which has an explicit var(--font-body) rule
     elsewhere (sans-serif). Override it on mobile so the lead matches the
     rest of the body in Source Sans 3. */
  .article-content .lead{font-family:"Source Sans 3","Source Sans Pro",system-ui,sans-serif}
  .article-content h2{font-family:"Cabin",system-ui,sans-serif;
    font-size:1.5rem;font-weight:600;line-height:1.18;letter-spacing:0;
    margin:24px 0 12px;color:#19191c}
  .article-content h2::before{display:none}
  .article-content h3{font-family:"Cabin",system-ui,sans-serif;
    font-size:1.1875rem;font-weight:600;line-height:1.2;letter-spacing:0;
    margin:20px 0 8px;color:#19191c}
  .article-content ul,.article-content ol{margin:0 0 16px}
  .article-content section{margin:0 0 24px}

  .pull-quote{font-family:"Cabin",system-ui,sans-serif;
    font-size:1.3rem;padding-left:14px;margin:20px 0}
  .editorial-meta{font-size:11px;font-family:"Cabin",system-ui,sans-serif}
  .editorial-meta > *{padding:0 8px}
  .figure-grid{grid-template-columns:1fr}

  /* Section-divider CTA tighter on phones too. */
  .section-divider-cta{margin:24px 0;padding-top:16px}
}
/* Comparison table reflow on phones — only for wide tables (4+ columns).
   2-3 column tables render as regular tables; if they overflow they scroll
   horizontally inside .table-wrap. */
@media (max-width:640px){
  /* All tables: tighter padding + smaller font so 2-3 col tables actually
     fit a 360px column. Horizontal scroll inside .table-wrap is the safety
     net for the rare 3-col table that still overflows. */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .article-table{font-size:.88rem}
  .article-table th,
  .article-table td{padding:8px 10px}

  /* Wide tables (4+ columns) — stack each row into a card. */
  .table-wrap[data-cols="4"] .article-table,
  .table-wrap[data-cols="5"] .article-table,
  .table-wrap[data-cols="6"] .article-table,
  .table-wrap[data-cols="7"] .article-table,
  .table-wrap[data-cols="8"] .article-table{
    display:block;border:0;background:transparent;min-width:0;font-size:1rem;
  }
  .table-wrap[data-cols="4"] .article-table thead,
  .table-wrap[data-cols="5"] .article-table thead,
  .table-wrap[data-cols="6"] .article-table thead,
  .table-wrap[data-cols="7"] .article-table thead,
  .table-wrap[data-cols="8"] .article-table thead{display:none}
  .table-wrap[data-cols="4"] .article-table tbody,
  .table-wrap[data-cols="4"] .article-table tr,
  .table-wrap[data-cols="5"] .article-table tbody,
  .table-wrap[data-cols="5"] .article-table tr,
  .table-wrap[data-cols="6"] .article-table tbody,
  .table-wrap[data-cols="6"] .article-table tr,
  .table-wrap[data-cols="7"] .article-table tbody,
  .table-wrap[data-cols="7"] .article-table tr,
  .table-wrap[data-cols="8"] .article-table tbody,
  .table-wrap[data-cols="8"] .article-table tr{display:block;width:100%}
  .table-wrap[data-cols="4"] .article-table tr,
  .table-wrap[data-cols="5"] .article-table tr,
  .table-wrap[data-cols="6"] .article-table tr,
  .table-wrap[data-cols="7"] .article-table tr,
  .table-wrap[data-cols="8"] .article-table tr{
    border:1px solid var(--rule);border-radius:12px;
    padding:.75rem 1rem;margin-bottom:.65rem;background:rgba(15,23,42,.015);
  }
  .table-wrap[data-cols="4"] .article-table td,
  .table-wrap[data-cols="5"] .article-table td,
  .table-wrap[data-cols="6"] .article-table td,
  .table-wrap[data-cols="7"] .article-table td,
  .table-wrap[data-cols="8"] .article-table td{
    display:flex;justify-content:space-between;
    align-items:baseline;gap:1rem;padding:.35rem 0;border:0;text-align:right;
  }
  .table-wrap[data-cols="4"] .article-table td::before,
  .table-wrap[data-cols="5"] .article-table td::before,
  .table-wrap[data-cols="6"] .article-table td::before,
  .table-wrap[data-cols="7"] .article-table td::before,
  .table-wrap[data-cols="8"] .article-table td::before{
    content:attr(data-col);font-family:var(--font-ui);
    font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--text-soft);text-align:left;flex:1;
  }
  .table-wrap[data-cols="4"] .article-table td:first-child,
  .table-wrap[data-cols="5"] .article-table td:first-child,
  .table-wrap[data-cols="6"] .article-table td:first-child,
  .table-wrap[data-cols="7"] .article-table td:first-child,
  .table-wrap[data-cols="8"] .article-table td:first-child{
    font-weight:700;color:var(--text);
    border-bottom:1px dashed var(--rule);padding-bottom:.55rem;margin-bottom:.35rem;
    justify-content:flex-start;text-align:left;
  }
  .table-wrap[data-cols="4"] .article-table td:first-child::before,
  .table-wrap[data-cols="5"] .article-table td:first-child::before,
  .table-wrap[data-cols="6"] .article-table td:first-child::before,
  .table-wrap[data-cols="7"] .article-table td:first-child::before,
  .table-wrap[data-cols="8"] .article-table td:first-child::before{display:none}
}

/* ============================================================
   §5 Reader Experience — Reading Mode + Print stylesheet
   See docs/post-builder/BUILDER-PLAN.md §5
   ============================================================ */

/* ----- Reading Mode (body.reading-mode) ----- */
body.reading-mode .background-stage,
body.reading-mode .theme-toggle,
body.reading-mode .sf-breadcrumbs,
body.reading-mode .share-rail,
body.reading-mode .read-progress,
body.reading-mode .article-sidebar { display:none }

body.reading-mode { background: var(--reading-bg) }

body.reading-mode .article-layout {
  display:block;
  max-width:680px;
  margin:0 auto
}
body.reading-mode .article-content {
  font-size:1.18rem;
  line-height:1.85
}
body.reading-mode .reading-exit {
  position:sticky;top:16px;float:right;z-index:20;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border:1px solid var(--border-strong);
  border-radius:999px;background:var(--surface-strong);
  font-family:var(--font-ui);font-size:var(--fs-xs);
  color:var(--text-muted);cursor:pointer
}
.reading-exit { display:none }
body.reading-mode .reading-exit { display:inline-flex }

/* ----- Print stylesheet ----- */
@media print {
  /* Strip every chrome surface */
  .background-stage,
  .theme-toggle,
  .sf-breadcrumbs,
  .share-rail,
  .read-progress,
  .article-sidebar,
  .reading-exit,
  .related-rail,
  .byline-avatar { display:none !important }

  body {
    background:#fff !important;
    color:#000;
    font-size:11pt;
    line-height:1.5;
    font-family: Source Serif 4, Charter, Iowan Old Style, Georgia, serif
  }
  .editorial-shell { max-width:none;padding:0 0.6in;margin:0 }
  .article-layout { display:block;max-width:none }
  .article-content { font-size:11pt;line-height:1.5 }

  /* Kill the drop cap on print — looks heavy on paper */
  .article-content .lead::first-letter {
    background:none;-webkit-text-fill-color:initial;
    font-family:inherit;font-size:inherit;float:none;padding:0
  }

  /* Expand URLs after inline external links */
  .article-content a[href^="http"]::after {
    content:" (" attr(href) ")";
    font-size:9pt;color:#444;word-break:break-all
  }
  .article-content a[href^="mailto:"]::after,
  .article-content a[href^="#"]::after { content:none }

  /* Page-break behavior */
  h1, h2, h3, h4 { page-break-after: avoid }
  h2 { page-break-before: always }
  h2:first-of-type { page-break-before: auto }
  table, .table-wrap, .figure, .callout, .article-faq-item,
  .worked-example, img, svg { page-break-inside: avoid }
  img, svg { max-width:100% !important;height:auto !important }

  /* Tighter tables for paper */
  .article-table thead th { background:#f3f3f3 !important;color:#000 }
  .article-table td { padding:6px 10px }

  /* Sources stay — vital for printed reference */
  #sources, .sources-list, .editorial-note { color:#000 }
  .sources-list a, .article-content a { color:#000;border:0;text-decoration:underline }
}

/* ============================================================
   §6 Targeted additions on top of the canonical mockup CSS.
   Only what the mockup itself didn't already define:
     • Penalty / warn cell highlight rules for the comparison table
     • Annotated-figure placeholder (for posts that haven't uploaded media)
     • Scroll-spy active state (the mockup uses .active; our JS sets it too)
   ============================================================ */

/* Penalty / fine columns — right-aligned red bold. Matches the mockup's
   "$50 / $100" red penalty cells. The mockup's `.article-table .num` already
   right-aligns + monos; this overrides the colour. */
.article-table th.penalty,
.article-table td.penalty {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: .9em;
  color: #b91c1c;
  font-weight: 700;
}
.article-table th.penalty { color: #7f1d1d; }
.article-table td.warn { color: #92400E; font-weight: 600; }
[data-theme="dark"] .article-table td.penalty { color: #f87171; }

/* Annotated-figure placeholder — renders while the post's media asset is
   still pending upload. The mockup assumes the image is there; this keeps
   the slot visible (with chip legend) instead of collapsing to nothing. */
.annotated-stub--placeholder {
  margin: var(--space-lg) 0;
  padding: 24px;
  background: repeating-linear-gradient(
    45deg, var(--surface-soft), var(--surface-soft) 12px,
    rgba(3,133,255,.03) 12px, rgba(3,133,255,.03) 24px);
  border: 1px dashed var(--rule);
  border-radius: 6px;
  display: flex; flex-direction: column; gap: 12px;
}
.annotated-stub__placeholder {
  display: flex; flex-direction: column; gap: 4px;
}
.annotated-stub__placeholder-label {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft);
}
.annotated-stub__placeholder-detail { color: var(--text); font-size: .96rem; }
.annotated-stub__legend {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: .92rem; color: var(--text);
}
.annotated-stub__legend strong { color: var(--primary-deep); margin-right: 4px; }

/* Scroll-spy: keep `.is-active` as a non-mockup alias so the JS observer
   can use either `.active` (mockup) or `.is-active` and they both light up
   the same way. The base `.article-toc-list a.active` selector lives in
   the canonical mockup block (~line 455). */
.article-toc-list a.is-active {
  color: var(--primary-deep);
  border-left-color: var(--primary);
  font-weight: 600;
  background: linear-gradient(90deg, rgba(3,133,255,.04), transparent);
}

/* ─── End-of-article colophon ───────────────────────────────────────
   Wraps the editorial-meta strip + byline that used to sit above the
   hero. Now appears at the tail of the article body, just before /
   alongside the Continue Reading rail. A 1px top rule signals "this
   is the colophon" without competing with the Sources block divider.
   ──────────────────────────────────────────────────────────────────── */
.article-colophon {
  margin-top: var(--space-xl, 32px);
  padding-top: 22px;
  border-top: 1px solid var(--border-strong, rgba(12, 18, 34, 0.14));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}
.article-colophon .editorial-meta {
  flex: 1 1 auto;
  margin: 0;
}
.article-colophon .byline-strip {
  flex: 0 0 auto;
  margin: 0;
}
@media (max-width: 640px) {
  .article-colophon {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 18px;
  }
}

/* =========================================================
   MyStubs Article CTA Components
   For:
   - .article-tools
   - .article-product-card
   - .article-cta
   - .article-inline-tool
   ========================================================= */

:root {
  --ms-bg: #ffffff;
  --ms-bg-soft: #f8fafc;
  --ms-bg-tint: #eef6ff;

  --ms-text: #0f172a;
  --ms-text-soft: #475569;
  --ms-muted: #64748b;

  --ms-border: #dbeafe;
  --ms-border-strong: #bfdbfe;

  --ms-primary: #2563eb;
  --ms-primary-dark: #1d4ed8;
  --ms-primary-soft: #dbeafe;

  --ms-accent: #06b6d4;
  --ms-success: #10b981;
  --ms-warning: #f59e0b;

  --ms-radius-md: 14px;
  --ms-radius-lg: 22px;
  --ms-radius-xl: 28px;

  --ms-shadow-sm: 0 10px 28px rgba(15, 23, 42, 0.08);
  --ms-shadow-md: 0 18px 48px rgba(37, 99, 235, 0.14);
  --ms-shadow-focus: 0 0 0 4px rgba(37, 99, 235, 0.18);

  --ms-gradient-primary: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
  --ms-gradient-soft: linear-gradient(135deg, #eff6ff 0%, #ffffff 48%, #ecfeff 100%);
}

/* Optional dark mode support */
html[data-theme='dark'] {
  --ms-bg: #0f172a;
  --ms-bg-soft: #111827;
  --ms-bg-tint: #0b2545;

  --ms-text: #f8fafc;
  --ms-text-soft: #cbd5e1;
  --ms-muted: #94a3b8;

  --ms-border: rgba(148, 163, 184, 0.25);
  --ms-border-strong: rgba(96, 165, 250, 0.45);

  --ms-primary: #60a5fa;
  --ms-primary-dark: #3b82f6;
  --ms-primary-soft: rgba(37, 99, 235, 0.16);

  --ms-gradient-soft: linear-gradient(135deg, #0f172a 0%, #111827 52%, #082f49 100%);
}

/* =========================================================
   Top tool strip
   ========================================================= */

/* Tool strip — hidden on post pages because it duplicates the product
   card's destination (both push to /paystubs and /paycheck-tax-
   calculator). The product card is the deliberate primary CTA; the
   "More in this category" grid handles discovery; the inline-tool
   block near the FAQ closes the long-read with a final nudge. Three
   blocks pointing to the same place on one page reads as noise.
   The markup is left intact in BlogBlockRenderer + the v3 files for
   reversibility — only the visual surface is suppressed. */
.article-tools {
  display: none;
}
.article-tools--legacy-show {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin: var(--space-lg, 40px) 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 38%),
    var(--ms-bg-soft);
}

.article-tools::before {
  content: "Related tools";
  flex: 0 0 100%;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ms-muted);
}

.article-tools a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--ms-border-strong);
  background: var(--ms-bg);
  /* Force the sans body font so the pills don't inherit the article's
     Source Serif 4. Was rendering serif-italic in blue, looked like a
     different brand glued onto the page. */
  font-family: var(--font-sans, var(--ms-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif));
  color: var(--ms-text, #0f172a);
  font-size: 0.92rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

/* No pre-selected pill. The strip is a neutral utility row — the
   product card above is the deliberate primary CTA. Both pills read
   identically until the user hovers one. */
.article-tools a:first-of-type {
  border-color: var(--ms-border-strong);
  background: var(--ms-bg);
  color: var(--ms-text, #0f172a);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.article-tools a:hover {
  transform: translateY(-1px);
  border-color: var(--ms-primary);
  color: var(--ms-primary);
  box-shadow: var(--ms-shadow-sm);
}

.article-tools a:focus-visible {
  outline: none;
  box-shadow: var(--ms-shadow-focus);
}

/* =========================================================
   Main product card
   ========================================================= */

.article-product-card {
  position: relative;
  overflow: hidden;
  /* Section-level separation: --space-xl (64px) above and below so the card
     reads as a stand-alone conversion unit between regions of prose,
     matching how H2-led sections are spaced (--space-2xl between sections). */
  margin: var(--space-xl, 64px) 0;
  padding: clamp(1.75rem, 2.4vw, 2.4rem);
  border: 1px solid var(--ms-border-strong);
  border-radius: var(--ms-radius-xl);
  background: var(--ms-gradient-soft);
  color: var(--ms-text);
  box-shadow: var(--ms-shadow-md);
  font-family: var(--font-ui);
}
.article-product-card h2,
.article-product-card h3,
.article-product-card h4,
.article-product-card p,
.article-product-card a,
.article-product-card span,
.article-product-card strong,
.article-product-card em {
  font-family: var(--font-ui);
}

.article-product-card::before {
  content: "";
  position: absolute;
  inset: -40% auto auto -10%;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.18), transparent 66%);
  pointer-events: none;
}

.article-product-card::after {
  content: "";
  position: absolute;
  right: -55px;
  bottom: -55px;
  width: 180px;
  height: 180px;
  border-radius: 40px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(6, 182, 212, 0.16));
  transform: rotate(18deg);
  pointer-events: none;
}

.article-product-card > * {
  position: relative;
  z-index: 1;
}

.article-product-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.9rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--ms-border-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ms-primary-dark);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

html[data-theme='dark'] .article-product-card__eyebrow {
  background: rgba(15, 23, 42, 0.62);
  color: #bfdbfe;
}

.article-product-card__eyebrow::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--ms-success);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14);
}

.article-product-card h3 {
  max-width: 720px;
  margin: 0 0 0.8rem;
  color: var(--ms-text);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.article-product-card p:not(.article-product-card__eyebrow) {
  max-width: 760px;
  margin: 0 0 0.25rem;
  color: var(--ms-text-soft);
  font-size: 1rem;
  line-height: 1.65;
}

/* Product card / inline article CTA — adopt the homepage primary button
   (.btn-acc-primary) so every CTA across the site renders identically.
   Only spacing + the arrow ::after are kept; color, font, shadow,
   border-radius, and font-weight all inherit from .btn-acc-primary. */
.article-product-card__button,
.article-cta {
  margin-top: 1.15rem;
}

.article-product-card__button::after,
.article-cta::after {
  content: "→";
  margin-left: 0.55rem;
  transform: translateX(0);
  transition: transform 160ms ease;
}

.article-product-card__button:hover::after,
.article-cta:hover::after {
  transform: translateX(3px);
}

/* Secondary CTA style if needed */
.article-cta--secondary {
  background: var(--ms-bg);
  color: var(--ms-primary-dark);
  border-color: var(--ms-border-strong);
  box-shadow: var(--ms-shadow-sm);
}

.article-cta--secondary:hover {
  background: var(--ms-primary-soft);
}

/* =========================================================
   Inline tool callout
   ========================================================= */

.article-inline-tool {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  /* Section-level separation: --space-lg (40px) so the callout breathes
     between paragraphs without competing with full-card spacing. */
  margin: var(--space-lg, 40px) 0;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--ms-border);
  border-left: 5px solid var(--ms-primary);
  border-radius: var(--ms-radius-md);
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.08), rgba(6, 182, 212, 0.04)),
    var(--ms-bg);
  color: var(--ms-text-soft);
  font-family: var(--font-ui);
  font-size: 0.96rem;
  line-height: 1.55;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.article-inline-tool strong {
  color: var(--ms-text);
  font-weight: 900;
}

/* Inline-tool link wears .btn-acc-primary now (set in _InlineTool.cshtml)
   so it matches every other CTA on the site. No overrides here beyond a
   small left margin so the button breathes from the body sentence. */
.article-inline-tool a.btn-acc-primary {
  margin-left: 0.35rem;
}

/* =========================================================
   Reader comments — threaded, moderation-gated. Renders below the
   "More in this category" grid; new submissions land pending and
   only appear once an admin approves them.
   ========================================================= */
.article-comments {
  margin-top: var(--space-xl, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--border-strong, rgba(12,18,34,.14));
}
.article-comments__heading {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.article-comments__count {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-soft);
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
}
.article-comments__empty {
  margin: 18px 0 28px;
  color: var(--text-soft);
  font-size: .95rem;
}
.article-comments__banner {
  margin: 14px 0 18px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: .92rem;
  border: 1px solid transparent;
}
.article-comments__banner--ok  { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.article-comments__banner--err { background:#fef2f2; color:#991b1b; border-color:#fecaca; }

.article-comments__list,
.article-comments__replies {
  list-style: none;
  padding: 0;
  margin: 18px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.article-comments__replies {
  margin: 14px 0 0 22px;
  padding-left: 18px;
  border-left: 2px solid var(--border, #e2e8f0);
}
.article-comment {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.article-comment__head { display: flex; align-items: center; gap: 12px; }
.article-comment__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f2937, #374151);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .5px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.article-comment__byline { display: flex; flex-direction: column; gap: 1px; }
.article-comment__name { font-weight: 600; color: var(--text); font-size: .94rem; }
.article-comment__date { font-size: .78rem; color: var(--text-soft); }
.article-comment__body {
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.6;
  font-size: .98rem;
  white-space: pre-wrap;
  margin-left: 48px;
}
.article-comment--reply .article-comment__avatar {
  width: 30px; height: 30px;
  font-size: .72rem;
  background: linear-gradient(135deg, #475569, #64748b);
}
.article-comment--reply .article-comment__body { margin-left: 42px; font-size: .94rem; }

.article-comments__form {
  margin-top: 28px;
  padding: 22px 22px 20px;
  border-radius: 12px;
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
}
.article-comments__form-heading {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.article-comments__form-note {
  font-size: .85rem;
  color: var(--text-soft);
  margin: 0 0 18px;
}
.article-comments__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.article-comments__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
}
.article-comments__field span em {
  font-style: normal;
  font-weight: 500;
  color: var(--text-soft);
  font-size: .78rem;
  margin-left: 4px;
}
.article-comments__field--full { grid-column: 1 / -1; }
.article-comments__field input,
.article-comments__field textarea {
  font-family: inherit;
  font-size: .94rem;
  font-weight: 400;
  padding: 9px 12px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.article-comments__field input:focus,
.article-comments__field textarea:focus {
  outline: none;
  border-color: #0268d4;
  box-shadow: 0 0 0 3px rgba(2, 104, 212, .15);
}
.article-comments__field textarea { resize: vertical; min-height: 120px; }
.article-comments__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .article-comments__row { grid-template-columns: 1fr; }
  .article-comment__body { margin-left: 0; margin-top: 6px; }
  .article-comments__replies { margin-left: 12px; padding-left: 12px; }
}

/* =========================================================
   Simple standalone CTA button
   ========================================================= */

.article-cta--primary {
  background: var(--ms-gradient-primary);
  color: #ffffff;
}

/* Full-width CTA option for mobile-heavy articles */
.article-cta--block {
  width: 100%;
  max-width: 420px;
}

/* =========================================================
   Compact product card variant for self-employed/tax posts
   ========================================================= */

.article-product-card--compact {
  padding: 1.1rem;
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-sm);
}

.article-product-card--compact h3 {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.article-product-card--compact p:not(.article-product-card__eyebrow) {
  font-size: 0.95rem;
}

/* =========================================================
   Desktop: trim the product card so it reads as a distinct
   conversion unit instead of a banner spanning the full
   article column. The mobile rule below keeps it full-width.
   ========================================================= */

@media (min-width: 768px) {
  .article-product-card {
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
  }

  .article-product-card--compact {
    max-width: 580px;
  }
}

/* =========================================================
   Mobile behavior
   ========================================================= */

@media (max-width: 640px) {
  .article-tools {
    gap: 0.55rem;
    padding: 0.75rem;
  }

  .article-tools a {
    width: 100%;
    min-height: 46px;
  }

  .article-product-card {
    margin: 1.5rem 0;
    padding: 1.1rem;
    border-radius: 20px;
  }

  .article-product-card__button,
  .article-cta {
    width: 100%;
    min-height: 50px;
  }

  .article-inline-tool {
    display: block;
    padding: 0.9rem;
  }

  .article-inline-tool a {
    margin-top: 0.45rem;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Template panel (BlogBlockTypes.Template).
   The importer turns triple-backtick markdown fences into one of
   these blocks — sample cover letters, employer-verification stubs,
   any boilerplate the reader is meant to copy. Styled as a parchment
   card with a dashed border + copy-to-clipboard button so it reads
   as a fillable template, not as code.
   ────────────────────────────────────────────────────────────────── */
.post-template {
    margin: 1.5rem 0;
    padding: 1rem 1.15rem 1.15rem;
    border: 1.5px dashed rgba(99, 102, 241, .35);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(254, 252, 232, .9), rgba(254, 249, 195, .55));
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset,
                0 14px 30px -22px rgba(99, 102, 241, .35);
}
html[data-theme='dark'] .post-template {
    border-color: rgba(125, 211, 252, .35);
    background: linear-gradient(180deg, rgba(30, 41, 59, .85), rgba(15, 23, 42, .65));
}
.post-template__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .75rem;
}
.post-template__kicker {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6d28d9;
}
html[data-theme='dark'] .post-template__kicker { color:#a5b4fc; }
.post-template__copy {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    border: 1px solid rgba(99, 102, 241, .35);
    background: rgba(255, 255, 255, .85);
    color: #4338ca;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.post-template__copy:hover {
    background: #fff;
    border-color: rgba(99, 102, 241, .55);
}
.post-template__copy:active { transform: translateY(1px); }
.post-template__copy.is-copied {
    border-color: #16a34a;
    color: #16a34a;
    background: rgba(220, 252, 231, .9);
}
html[data-theme='dark'] .post-template__copy {
    background: rgba(15, 23, 42, .7);
    border-color: rgba(125, 211, 252, .35);
    color: #c7d2fe;
}
.post-template__body {
    margin: 0;
    padding: 1rem 1.1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(99, 102, 241, .18);
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .92rem;
    line-height: 1.55;
    color: #1e1b4b;
    white-space: pre-wrap;     /* honor newlines + wrap long lines */
    word-wrap: break-word;
    overflow-x: auto;
}
html[data-theme='dark'] .post-template__body {
    background: rgba(11, 18, 32, .85);
    border-color: rgba(125, 211, 252, .18);
    color: #e2e8f0;
}
/* Action row holds the Copy and Print buttons side-by-side on the right.
   `flex: 0 0 auto` prevents the row from shrinking when a long kicker label
   (e.g. "Template 1: W-2 Employee in a Competitive Market") would otherwise
   squeeze the buttons to zero width on narrow viewports. */
.post-template__actions {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
}
/* Keep the action buttons + their icons at their intrinsic sizes — never
   shrink below 14×14 for the SVG glyph, even when the row is constrained. */
.post-template__copy,
.post-template__print {
    flex: 0 0 auto;
}
.post-template__copy > svg,
.post-template__print > svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}
/* Print button — mirrors the Copy button visually so the two read as a pair. */
.post-template__print {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    border: 1px solid rgba(99, 102, 241, .35);
    background: rgba(255, 255, 255, .85);
    color: #4338ca;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.post-template__print:hover {
    background: #fff;
    border-color: rgba(99, 102, 241, .55);
}
.post-template__print:active { transform: translateY(1px); }
html[data-theme='dark'] .post-template__print {
    background: rgba(15, 23, 42, .7);
    border-color: rgba(125, 211, 252, .35);
    color: #c7d2fe;
}
@media (max-width: 768px) {
    .post-template { padding: .85rem .85rem 1rem; }
    .post-template__body { padding: .8rem .9rem; font-size: .86rem; }
    .post-template__copy-label,
    .post-template__print-label { display: none; }
    .post-template__copy,
    .post-template__print { padding: .35rem .55rem; }
}

/* The MyStubs logo lives inside every .post-template panel but stays
   hidden on screen — the @media print block below reveals it as a small
   top-right branding mark on the printed sheet. */
.post-template__print-logo {
    display: none;
}

/* ────────────────────────────────────────────────────────────────────────
   Template print mode.

   When the reader clicks the Print button on a template panel, the JS
   handler in BlogPost.cshtml adds `is-printing-template` to <body> and
   `is-printing-target` to the targeted .post-template. The browser then
   opens the print dialog, and these @media print rules collapse the page
   to JUST the targeted template — no nav, no header, no other body
   content, no decorative card chrome. The reader gets a clean A4 / Letter
   sheet of the template body (a letter, a checklist, a worker letter,
   etc.) that they can print and fill in by hand.

   Pattern: hide everything via `visibility: hidden`, then re-show only the
   target template and its descendants. The card chrome (kicker label,
   Copy + Print buttons) hides via display:none so the printed page
   contains only the body text.
   ──────────────────────────────────────────────────────────────────────── */
@media print {
    body.is-printing-template * { visibility: hidden; }
    body.is-printing-template .post-template.is-printing-target,
    body.is-printing-template .post-template.is-printing-target * { visibility: visible; }
    body.is-printing-template .post-template.is-printing-target {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        background: white;
        box-shadow: none;
    }
    body.is-printing-template .post-template.is-printing-target .post-template__head { display: none; }
    body.is-printing-template .post-template.is-printing-target .post-template__body {
        margin: 0;
        padding: 0;
        border: none;
        background: white;
        color: black;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 11pt;
        line-height: 1.55;
        white-space: pre-wrap;
        overflow: visible;
    }
    /* MyStubs branding mark — top-right of every printed sheet. Sits in the
       2cm @page margin via `position: fixed` so it repeats on multi-page
       templates. `print-color-adjust: exact` keeps the logo's colors when
       readers print without "background graphics" enabled in the dialog. */
    body.is-printing-template .post-template.is-printing-target .post-template__print-logo {
        display: block;
        position: fixed;
        top: 0.6cm;
        right: 0.6cm;
        width: 2.2cm;
        height: auto;
        opacity: 0.95;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    @page { margin: 2cm; size: letter; }
}