/* Blog post and case study layout (bp-*). Loaded only on blog posts, after tailwind.css.
   Markup is produced by scripts/blog-layout.py. Colors come from the site's theme variables. */

.bp { background: linear-gradient(hsl(var(--card)), hsl(var(--card))) top / 100% 240px no-repeat, hsl(var(--warm)); }
.bp-wrap { max-width: 1240px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .bp-wrap { padding: 0 2rem; } }

/* reading progress */
.bp-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none; }
.bp-progress span { display: block; height: 100%; width: 0; background: hsl(var(--primary)); transition: width .1s linear; }

/* hero */
.bp-hero { background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border)); padding: 1.75rem 0 2.25rem; }
.bp-hero-grid { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 1024px) { .bp-hero { padding: 3rem 0 3.5rem; } .bp-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 3.5rem; } }
.bp-back { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; color: hsl(var(--muted-foreground)); margin-bottom: 1.25rem; }
.bp-back:hover { color: hsl(var(--foreground)); }
.bp-back svg { width: 1rem; height: 1rem; }
.bp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; font-size: .8125rem; color: hsl(var(--muted-foreground)); margin-bottom: 1rem; }
.bp-pill { display: inline-flex; align-items: center; padding: .25rem .75rem; border-radius: 999px; font-weight: 600; font-size: .75rem; background: hsl(var(--accent)); color: hsl(var(--primary)); }
.bp-pill-case { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.bp-meta-sep { width: 4px; height: 4px; border-radius: 50%; background: hsl(var(--muted-foreground) / .4); }
@media (max-width: 639px) { .bp-meta-sep { display: none; } }
.bp-hero h1 { font-family: var(--font-display); font-weight: 700; color: hsl(var(--foreground)); font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 1rem; }
.bp-dek { font-size: 1.0625rem; line-height: 1.7; color: hsl(var(--muted-foreground)); margin: 0 0 1.25rem; max-width: 38rem; }
@media (min-width: 1024px) { .bp-dek { font-size: 1.1875rem; } }
.bp-byline { display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: hsl(var(--muted-foreground)); line-height: 1.45; }
.bp-byline strong { color: hsl(var(--foreground)); font-weight: 600; }
.bp-byline-mark { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: hsl(var(--accent)); display: grid; place-items: center; color: hsl(var(--primary)); }
.bp-byline-mark svg { width: 1.25rem; height: 1.25rem; }
.bp-hero-media { margin: 0; border-radius: 1.25rem; overflow: hidden; background: hsl(var(--muted)); aspect-ratio: 3 / 2; box-shadow: 0 24px 48px -28px hsl(var(--foreground) / .35); }
.bp-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* two-column body */
.bp-layout { display: grid; gap: 2rem; padding-top: 1.5rem; padding-bottom: 3rem; }
@media (min-width: 1024px) { .bp-layout { grid-template-columns: 236px minmax(0, 1fr); gap: 3rem; padding-top: 2.5rem; padding-bottom: 4.5rem; } }
@media (min-width: 1280px) { .bp-layout { grid-template-columns: 256px minmax(0, 800px); justify-content: center; gap: 4.5rem; } }
.bp-article { min-width: 0; }

/* table of contents */
.bp-toc { display: none; }
@media (min-width: 1024px) { .bp-toc { display: block; } .bp-toc-inner { position: sticky; top: 112px; max-height: calc(100vh - 128px); overflow-y: auto; padding-bottom: 1rem; } }
.bp-toc-label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin: 0 0 .75rem; }
.bp-toc ol, .bp-toc-mobile ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.bp-toc li a { display: flex; gap: .6rem; padding: .45rem .75rem; border-left: 2px solid hsl(var(--border)); font-size: .875rem; line-height: 1.4; color: hsl(var(--muted-foreground)); transition: color .15s, border-color .15s, background .15s; }
.bp-toc li a:hover { color: hsl(var(--foreground)); }
.bp-toc li a.is-active { color: hsl(var(--primary)); border-left-color: hsl(var(--primary)); background: hsl(var(--card)); font-weight: 600; }
.bp-toc-n { font-variant-numeric: tabular-nums; opacity: .6; flex: none; }
.bp-toc-card { margin-top: 1.5rem; padding: 1.25rem; border-radius: 1rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }
.bp-toc-card p { margin: 0 0 .75rem; font-size: .875rem; line-height: 1.5; color: hsl(var(--muted-foreground)); }
.bp-toc-card p strong { display: block; font-family: var(--font-display); font-size: 1.0625rem; color: hsl(var(--foreground)); margin-bottom: .25rem; }
.bp-btn { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; padding: .7rem 1rem; border-radius: .6rem; font-weight: 600; font-size: .875rem; text-align: center; transition: opacity .15s, background .15s; }
.bp-btn + .bp-btn { margin-top: .5rem; }
.bp-btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.bp-btn-primary:hover { opacity: .9; }
.bp-btn-ghost { border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); background: hsl(var(--card)); }
.bp-btn-ghost:hover { background: hsl(var(--muted)); }

.bp-toc-mobile { margin-bottom: 1.25rem; border-radius: 1rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }
@media (min-width: 1024px) { .bp-toc-mobile { display: none; } }
.bp-toc-mobile summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; font-weight: 600; color: hsl(var(--foreground)); }
.bp-toc-mobile summary::-webkit-details-marker { display: none; }
.bp-toc-mobile summary::after { content: ""; width: .6rem; height: .6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-right: .25rem; }
.bp-toc-mobile[open] summary::after { transform: rotate(-135deg); }
.bp-toc-mobile ol { padding: 0 .75rem .9rem; }
.bp-toc-mobile li a { display: flex; gap: .6rem; padding: .5rem .5rem; font-size: .9375rem; color: hsl(var(--muted-foreground)); border-top: 1px solid hsl(var(--border)); }

/* sections as cards */
.bp-sec { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 1.25rem; padding: 1.5rem 1.25rem; margin-bottom: 1.25rem; scroll-margin-top: 100px; }
@media (min-width: 640px) { .bp-sec { padding: 2.25rem 2.5rem; margin-bottom: 1.5rem; } }
.bp-sec-head { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.25rem; }
.bp-num { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-top: .2rem; border-radius: .7rem; background: hsl(var(--accent)); color: hsl(var(--primary)); font-weight: 700; font-size: .875rem; font-variant-numeric: tabular-nums; }
.bp-sec-head h2 { font-family: var(--font-display); font-weight: 700; color: hsl(var(--foreground)); font-size: clamp(1.45rem, 1.15rem + 1vw, 1.9rem); line-height: 1.2; margin: 0; }

/* body text inside a section */
.bp-body.prose { font-size: 1.0625rem; line-height: 1.8; }
.bp-body.prose > :first-child { margin-top: 0 !important; }
.bp-body.prose > :last-child { margin-bottom: 0 !important; }
.bp-body.prose p { margin-top: 0; margin-bottom: 1.1rem; }
.bp-body.prose h3 { font-family: var(--font-display); font-size: 1.3rem !important; margin: 2rem 0 .75rem !important; padding-left: .85rem; border-left: 3px solid hsl(var(--primary)); line-height: 1.3; }
.bp-body.prose h4, .bp-body.prose h5 { font-family: var(--font-display); font-size: 1.125rem; margin: 1.75rem 0 .5rem; color: hsl(var(--foreground)); }
.bp-body.prose img { border-radius: .9rem; margin: 1.5rem 0; width: 100%; }
.bp-body.prose figure { margin: 1.75rem 0; }
.bp-body.prose figure img { margin: 0; }
.bp-body.prose figcaption { text-align: left !important; font-size: .875rem; line-height: 1.55; margin-top: .6rem; padding-left: .75rem; border-left: 2px solid hsl(var(--border)); }
.bp-body.prose blockquote { border: 0; margin: 1.5rem 0; padding: 1.25rem 1.5rem; border-radius: .9rem; background: hsl(var(--accent)); color: hsl(var(--foreground)); font-style: italic; }
.bp-body.prose a { font-weight: 600; text-decoration: underline; text-decoration-color: hsl(var(--primary) / .35); text-underline-offset: 3px; }

/* intro */
.bp-intro .bp-body.prose > p:first-child { font-size: 1.1875rem; line-height: 1.7; color: hsl(var(--foreground)); }

/* key takeaways / summary */
.bp-summary { background: linear-gradient(180deg, hsl(var(--accent)) 0%, hsl(var(--card)) 100%); border-color: hsl(var(--primary) / .25); }
.bp-summary .bp-num { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.bp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem 2rem; }
@media (min-width: 768px) { .bp-checks { grid-template-columns: 1fr 1fr; } }
.bp-checks li { position: relative; padding-left: 2rem; font-size: .975rem; line-height: 1.65; color: hsl(var(--muted-foreground)); }
.bp-checks li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: hsl(var(--primary)); }
.bp-checks li::after { content: ""; position: absolute; left: .45rem; top: .45rem; width: .4rem; height: .7rem; border-right: 2px solid hsl(var(--primary-foreground)); border-bottom: 2px solid hsl(var(--primary-foreground)); transform: rotate(45deg); }
.bp-checks strong { color: hsl(var(--foreground)); }
.bp-checks a { color: hsl(var(--primary)); font-weight: 600; text-decoration: underline; }

/* bold-lead lists as cards */
.bp-cards { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .875rem; }
@media (min-width: 640px) { .bp-cards { grid-template-columns: 1fr 1fr; } }
.bp-cards li { margin: 0; padding: 1.1rem 1.2rem; border-radius: .9rem; background: hsl(var(--warm)); border: 1px solid hsl(var(--border)); font-size: .95rem; line-height: 1.65; color: hsl(var(--muted-foreground)); }
.bp-cards li > strong:first-child { display: block; font-size: 1rem; line-height: 1.4; color: hsl(var(--foreground)); margin-bottom: .35rem; }
.bp-cards a { color: hsl(var(--primary)); font-weight: 600; text-decoration: underline; }
.bp-cards-1 { grid-template-columns: 1fr !important; }

/* bold-lead ordered lists as steps */
.bp-steps { list-style: none; margin: 1.5rem 0; padding: 0; counter-reset: bpstep; display: grid; gap: .75rem; }
.bp-steps li { counter-increment: bpstep; position: relative; margin: 0; padding: 1rem 1.2rem 1rem 3.75rem; border-radius: .9rem; background: hsl(var(--warm)); border: 1px solid hsl(var(--border)); font-size: .975rem; line-height: 1.65; color: hsl(var(--muted-foreground)); }
.bp-steps li::before { content: counter(bpstep); position: absolute; left: 1.1rem; top: 1rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 700; font-size: .85rem; }
.bp-steps strong { color: hsl(var(--foreground)); }
.bp-steps a { color: hsl(var(--primary)); font-weight: 600; text-decoration: underline; }

/* tables */
.bp-table { margin: 1.5rem 0; border: 1px solid hsl(var(--border)); border-radius: .9rem; overflow-x: auto; background: hsl(var(--card)); }
.bp-table table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 0 !important; }
.bp-table thead th { background: hsl(var(--muted)); color: hsl(var(--foreground)); font-weight: 600; text-align: left; padding: .8rem 1rem !important; border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; }
.bp-table td { padding: .8rem 1rem !important; vertical-align: top; color: hsl(var(--muted-foreground)); line-height: 1.55; border-bottom: 1px solid hsl(var(--border)); }
.bp-table tbody tr:last-child td { border-bottom: 0; }
.bp-table tbody tr:nth-child(even) td { background: hsl(var(--warm) / .6); }
.bp-table td strong { color: hsl(var(--foreground)); }
.bp-receipt tbody tr:last-child td { background: hsl(var(--accent)) !important; color: hsl(var(--foreground)); font-weight: 600; border-top: 2px solid hsl(var(--primary) / .35); }

/* "at a glance" tables as fact tiles */
.bp-facts { list-style: none; margin: 1.25rem 0 1.5rem; padding: 0; display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
.bp-facts li { margin: 0; padding: .9rem 1rem; border-radius: .9rem; background: hsl(var(--warm)); border: 1px solid hsl(var(--border)); }
.bp-facts .bp-fact-k { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: .3rem; }
.bp-facts .bp-fact-v { display: block; font-size: .925rem; line-height: 1.45; color: hsl(var(--foreground)); font-weight: 500; }
.bp-facts .bp-fact-wide { grid-column: 1 / -1; }
.bp-facts .bp-fact-total { background: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.bp-facts .bp-fact-total .bp-fact-k { color: hsl(var(--primary-foreground)); }
.bp-facts .bp-fact-total .bp-fact-v { color: hsl(var(--primary-foreground)); font-size: 1.5rem; font-family: var(--font-display); font-weight: 700; }

/* existing boxed callouts inside posts */
.bp-body [data-box] { border-radius: 1rem !important; background: hsl(var(--accent)) !important; border: 1px solid hsl(var(--primary) / .2) !important; box-shadow: none !important; }

/* FAQ accordion */
.bp-faq { display: grid; gap: .65rem; }
.bp-faq details { border: 1px solid hsl(var(--border)); border-radius: .9rem; background: hsl(var(--warm)); transition: background .15s; }
.bp-faq details[open] { background: hsl(var(--card)); box-shadow: 0 8px 24px -18px hsl(var(--foreground) / .3); }
.bp-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.2rem; font-weight: 600; font-size: 1rem; line-height: 1.45; color: hsl(var(--foreground)); }
.bp-faq summary::-webkit-details-marker { display: none; }
.bp-faq summary h3 { font: inherit; margin: 0; color: inherit; }
.bp-faq summary::after { content: "+"; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: hsl(var(--accent)); color: hsl(var(--primary)); font-size: 1.15rem; font-weight: 500; transition: transform .2s; }
.bp-faq details[open] summary::after { transform: rotate(45deg); }
.bp-faq .bp-faq-a { padding: 0 1.2rem 1.1rem; font-size: .975rem; line-height: 1.75; color: hsl(var(--muted-foreground)); }
.bp-faq .bp-faq-a p { margin: 0 0 .75rem; }
.bp-faq .bp-faq-a > :last-child { margin-bottom: 0; }
.bp-faq .bp-faq-a a { color: hsl(var(--primary)); font-weight: 600; text-decoration: underline; }
.bp-faq .bp-faq-a ul, .bp-faq .bp-faq-a ol { margin: .5rem 0 .75rem; padding-left: 1.25rem; list-style: disc; }

/* inline call to action between sections */
.bp-cta { margin: 0 0 1.5rem; border-radius: 1.25rem; padding: 1.75rem 1.5rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 640px) { .bp-cta { padding: 2rem 2.5rem; } }
.bp-cta-title { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.25; margin: 0 0 .4rem; }
.bp-cta-text { margin: 0; font-size: .95rem; line-height: 1.6; opacity: .88; }
.bp-cta-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.bp-cta-actions a { display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1.2rem; border-radius: .6rem; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.bp-cta-a1 { background: hsl(var(--primary-foreground)); color: hsl(var(--primary)); }
.bp-cta-a2 { border: 1px solid hsl(var(--primary-foreground) / .45); color: hsl(var(--primary-foreground)); }
.bp-cta-a1:hover, .bp-cta-a2:hover { opacity: .9; }

@media print { .bp-toc, .bp-toc-mobile, .bp-cta, .bp-progress { display: none !important; } .bp-sec { border: 0; padding: 0; } }

/* short sub-headed paragraphs as a grid of mini-cards */
.bp-subgrid { display: grid; gap: .875rem; margin: 1.25rem 0; }
@media (min-width: 768px) { .bp-subgrid { grid-template-columns: 1fr 1fr; } }
.bp-sub { padding: 1.15rem 1.25rem; border-radius: .9rem; background: hsl(var(--warm)); border: 1px solid hsl(var(--border)); }
.bp-sub h3, .bp-sub h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.3; color: hsl(var(--foreground)); margin: 0 0 .5rem; }
.bp-sub p { margin: 0 0 .6rem; font-size: .95rem; line-height: 1.7; color: hsl(var(--muted-foreground)); }
.bp-sub p:last-child { margin-bottom: 0; }
.bp-sub a { color: hsl(var(--primary)); font-weight: 600; text-decoration: underline; }
.bp-sub strong { color: hsl(var(--foreground)); }

/* photos sit beside the text on wide screens */
.bp-body.prose::after { content: ""; display: block; clear: both; }
@media (min-width: 1024px) {
  .bp-body.prose > figure:has(+ p), .bp-body.prose > img:has(+ p) { float: right; width: 46%; margin: .35rem 0 1.25rem 1.75rem !important; }
  .bp-body.prose > figure:nth-of-type(even):has(+ p), .bp-body.prose > img:nth-of-type(even):has(+ p) { float: left; margin: .35rem 1.75rem 1.25rem 0 !important; }
  .bp-body.prose > figure:not(:has(+ p)), .bp-body.prose > img:not(:has(+ p)) { width: 70%; margin-left: auto !important; margin-right: auto !important; }
  .bp-body.prose > h3, .bp-body.prose > h4, .bp-body.prose > .bp-table, .bp-body.prose > .bp-cards, .bp-body.prose > .bp-steps,
  .bp-body.prose > .bp-facts, .bp-body.prose > .bp-subgrid, .bp-body.prose > [data-box], .bp-body.prose > ol, .bp-body.prose > ul { clear: both; }
}