/* ============================================================
   SINGLE POST — Levievs Blog Redesign
   Adapted from project/styles/blog.css and project/colors_and_type.css.
   Tokens are scoped to .single-post-main so the rest of the theme
   (front page, services pages) keeps its original palette.
   ============================================================ */

.single-post-main {
    /* ---- Levievs blog tokens (Material Design 3, oxblood) ---- */
    --lv-primary:                       #790000;
    --lv-primary-container:              #a50000;
    --lv-primary-fixed:                  #ffdad4;
    --lv-primary-fixed-dim:              #ffb4a8;
    --lv-on-primary:                     #ffffff;
    --lv-on-primary-fixed:               #410000;

    --lv-secondary:                      #545e76;
    --lv-secondary-container:            #d7e2ff;

    --lv-surface:                        #f8f9fa;
    --lv-surface-container:              #edeeef;
    --lv-surface-container-low:          #f3f4f5;
    --lv-surface-container-lowest:       #ffffff;
    --lv-surface-variant:                #e1e3e4;

    --lv-on-surface:                     #191c1d;
    --lv-on-surface-variant:             #5c403b;

    --lv-outline-variant:                #e5beb7;

    --lv-ink:            var(--lv-on-surface);
    --lv-ink-muted:      var(--lv-secondary);
    --lv-ink-faint:      #7a8699;
    --lv-bg:             var(--lv-surface);
    --lv-bg-alt:         var(--lv-surface-container-low);
    --lv-border:         #e4e6ea;
    --lv-border-strong:  #d3d7de;

    --lv-font-headline: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --lv-font-body:     'Manrope', ui-sans-serif, system-ui, sans-serif;
    --lv-font-mono:     ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --lv-fs-11: 0.6875rem;
    --lv-fs-12: 0.75rem;
    --lv-fs-13: 0.8125rem;
    --lv-fs-14: 0.875rem;
    --lv-fs-15: 0.9375rem;
    --lv-fs-16: 1rem;
    --lv-fs-17: 1.0625rem;
    --lv-fs-18: 1.125rem;
    --lv-fs-20: 1.25rem;
    --lv-fs-24: 1.5rem;
    --lv-fs-28: 1.75rem;
    --lv-fs-32: 2rem;
    --lv-fs-48: 3rem;

    --lv-track-display: -0.035em;
    --lv-track-tight:   -0.02em;
    --lv-track-caps:    0.14em;
    --lv-lh-snug:    1.2;
    --lv-lh-body:    1.6;
    --lv-lh-reading: 1.75;

    --lv-radius-xs:   0.125rem;
    --lv-radius-sm:   0.25rem;
    --lv-radius-md:   0.5rem;
    --lv-radius-lg:   0.75rem;
    --lv-radius-pill: 6px; /* was 999px — buttons & pills unified to square 6px */

    --lv-shadow-1: 0 1px 2px rgba(25, 28, 29, 0.06);
    --lv-shadow-2: 0 4px 12px -2px rgba(25, 28, 29, 0.08), 0 2px 4px rgba(25, 28, 29, 0.04);
    --lv-shadow-ember: 0 14px 38px -12px rgba(121, 0, 0, 0.35);

    --lv-ease-out: cubic-bezier(0.22, 0.7, 0.2, 1);
    --lv-dur-fast: 150ms;
    --lv-dur:      240ms;
    --lv-focus-ring: 0 0 0 3px rgba(121, 0, 0, 0.28);

    background: var(--lv-bg);
    font-family: var(--lv-font-body);
    color: var(--lv-ink);
    padding-bottom: 0;
    position: relative;
}

.single-post-main * { box-sizing: border-box; }
.single-post-main a { color: inherit; transition: color var(--lv-dur-fast) var(--lv-ease-out); }

/* Hide the legacy hero / breadcrumbs — we render breadcrumbs inside
   the article-shell now, and the hero image lives inside .article-* blocks. */
.single-post-main .single-post-hero,
.single-post-main .single-post-breadcrumbs,
.single-post-main .single-post-category,
.single-post-main .single-post-meta,
.single-post-main .single-post-featured-image,
.single-post-main .single-post-article-header,
.single-post-main .single-post-back-section { display: none; }

/* Reading-progress bar pinned just under the header. */
.single-post-main .reading-progress {
    position: fixed;
    left: 0; right: 0;
    top: var(--header-height, 76px);
    height: 3px;
    z-index: 25;
    pointer-events: none;
    background: transparent;
}
.single-post-main .reading-progress i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--lv-primary);
    border-radius: 0 999px 999px 0;
    box-shadow: 0 0 8px rgba(121, 0, 0, 0.4);
    transition: width 80ms linear;
}

/* Breadcrumbs */
.single-post-main .pg-crumbs {
    max-width: 1280px;
    margin: 0 auto;
    /* Inline padding (32px) matches .site-header__panel padding-inline so the
       first breadcrumb sits on the same vertical line as the logo above. */
    padding: 22px 32px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--lv-fs-13);
    color: var(--lv-ink-muted);
}
.single-post-main .pg-crumbs a { color: var(--lv-ink-muted); text-decoration: none; }
.single-post-main .pg-crumbs a:hover { color: var(--lv-primary); }
.single-post-main .pg-crumbs .sep { color: var(--lv-ink-faint); opacity: 0.6; }
.single-post-main .pg-crumbs .current { color: var(--lv-ink); font-weight: 500; }

/* ============================================================
   ARTICLE 3-COLUMN LAYOUT
   ============================================================ */
.single-post-main .article-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 300px;
    gap: 56px;
    max-width: 1500px;
    margin: 0 auto;
    /* Inline padding 32px matches .site-header__panel padding-inline so the
       TOC sidebar, article body and right rail all line up with the logo. */
    padding: 24px 32px 56px;
    align-items: start;
}
.single-post-main .pg-crumbs { max-width: 1500px; }

/* ---- TOC sidebar (left) ---- */
.single-post-main .toc {
    position: sticky;
    top: calc(var(--header-height, 76px) + 24px);
    align-self: start;
    font-size: var(--lv-fs-13);
}
.single-post-main .toc__heading {
    font-size: var(--lv-fs-11);
    font-weight: 700;
    letter-spacing: var(--lv-track-caps);
    text-transform: uppercase;
    color: var(--lv-ink-muted);
    margin: 0 0 12px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.single-post-main .toc__heading::before {
    content: '';
    width: 14px; height: 1px;
    background: var(--lv-primary);
}
.single-post-main .toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.single-post-main .toc ul::before {
    content: '';
    position: absolute;
    left: 14px; top: 6px; bottom: 6px;
    width: 2px;
    background: var(--lv-border);
    border-radius: 2px;
}
.single-post-main .toc__item { position: relative; }
.single-post-main .toc__item a {
    display: block;
    padding: 8px 14px 8px 26px;
    color: var(--lv-ink-muted);
    font-size: var(--lv-fs-13);
    line-height: 1.4;
    border-radius: var(--lv-radius-sm);
    text-decoration: none;
    transition: color var(--lv-dur-fast) var(--lv-ease-out),
                background var(--lv-dur-fast) var(--lv-ease-out);
}
.single-post-main .toc__item a:hover {
    color: var(--lv-ink);
    background: var(--lv-surface-container);
}
.single-post-main .toc__item.is-active a {
    color: var(--lv-primary);
    font-weight: 700;
    background: var(--lv-primary-fixed);
}
.single-post-main .toc__item.is-active::before {
    content: '';
    position: absolute;
    left: 13px; top: 10px; bottom: 10px;
    width: 4px;
    background: var(--lv-primary);
    border-radius: 2px;
}
.single-post-main .toc__progress {
    margin-top: 18px;
    padding: 14px;
    border-top: 1px solid var(--lv-border);
    font-size: var(--lv-fs-12);
    color: var(--lv-ink-muted);
}
.single-post-main .toc__progress-row {
    display: flex;
    justify-content: space-between;
}
.single-post-main .toc__progress-pct {
    font-weight: 700;
    color: var(--lv-ink);
}
.single-post-main .toc__progress-bar {
    height: 4px;
    background: var(--lv-surface-container);
    border-radius: 6px;
    margin-top: 8px;
    overflow: hidden;
}
.single-post-main .toc__progress-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--lv-primary);
    border-radius: 6px;
    transition: width 120ms linear;
}

/* Mini hero preview that appears in the TOC sidebar after the user has
   scrolled past the actual hero. Native proportions (no crop). */
.single-post-main .toc__media {
    margin-top: 18px;
    width: 100%;
    border-radius: var(--lv-radius-sm);
    overflow: hidden;
    background: var(--lv-surface-container);
    box-shadow: var(--lv-shadow-1);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s var(--lv-ease-out), transform .35s var(--lv-ease-out);
    pointer-events: none;
}
.single-post-main .toc__media.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.single-post-main .toc__media img,
.single-post-main .toc__media video {
    width: 100%;
    height: auto;
    display: block;
}
.single-post-main .toc__media:empty { display: none; }

/* ---- Right rail (sticky cards) ---- */
.single-post-main .article-rail {
    position: sticky;
    top: calc(var(--header-height, 76px) + 24px);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.single-post-main .rail-card {
    background: var(--lv-surface-container-lowest);
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius-md);
    padding: 20px;
}
.single-post-main .rail-card h5 {
    font-size: var(--lv-fs-12);
    font-weight: 700;
    letter-spacing: var(--lv-track-caps);
    text-transform: uppercase;
    color: var(--lv-ink-muted);
    margin: 0 0 14px;
    font-family: var(--lv-font-body);
}
.single-post-main .rail-share {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.single-post-main .rail-share a,
.single-post-main .rail-share .rail-share__btn {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lv-radius-sm);
    background: var(--lv-surface-container);
    color: var(--lv-ink);
    border: 1px solid var(--lv-border);
    text-decoration: none;
    transition: all var(--lv-dur-fast) var(--lv-ease-out);
    cursor: pointer;
    font: inherit;
    padding: 0;
    position: relative;
}
.single-post-main .rail-share a:hover,
.single-post-main .rail-share .rail-share__btn:hover {
    background: var(--lv-primary);
    color: #fff;
    border-color: var(--lv-primary);
    transform: translateY(-1px);
}
.single-post-main .rail-share .rail-share__btn.is-copied {
    background: var(--lv-primary);
    color: #fff;
    border-color: var(--lv-primary);
}
.single-post-main .rail-share__feedback {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--lv-on-surface);
    color: #fff;
    font-size: var(--lv-fs-12);
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--lv-radius-sm);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .2s var(--lv-ease-out), transform .2s var(--lv-ease-out);
    z-index: 5;
}
.single-post-main .rail-share__feedback.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Newsletter validation message (rail card). */
.single-post-main .rail-newsletter .newsletter-msg {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.4;
    min-height: 1em;
    color: rgba(255, 255, 255, 0.85);
}
.single-post-main .rail-newsletter .newsletter-msg.is-error   { color: #ffb4a8; }
.single-post-main .rail-newsletter .newsletter-msg.is-success { color: #9cffbe; }
.single-post-main .rail-newsletter input[aria-invalid="true"] {
    border-color: #ffb4a8;
}
.single-post-main .rail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.single-post-main .rail-tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--lv-surface-container);
    color: var(--lv-ink);
    border-radius: var(--lv-radius-pill);
    font-size: var(--lv-fs-11);
    font-weight: 600;
    border: 1px solid var(--lv-border);
    text-decoration: none;
}
.single-post-main .rail-tag:hover {
    background: var(--lv-primary-fixed);
    border-color: var(--lv-primary-fixed-dim);
    color: var(--lv-on-primary-fixed);
}
/* "Have a project?" rail card — formerly the newsletter form, now a light
   contact CTA. Light surface with dark ink, brand-red heading. */
.single-post-main .rail-newsletter {
    background: var(--lv-surface-container-lowest);
    border-color: var(--lv-border);
    color: var(--lv-ink);
}
/* Brand-red heading on the light card + extra breathing room before the H4. */
.single-post-main .rail-newsletter .rail-card__heading {
    color: var(--lv-primary);
    margin-bottom: 18px;
}
/* CTA button spacing — `.site-cta-button` provides the red gradient & shape,
   this just gives it breathing room from the copy above. */
.single-post-main .rail-newsletter .rail-newsletter__cta { margin-top: 12px; }
.single-post-main .rail-newsletter h5 { color: var(--lv-ink-muted); }
.single-post-main .rail-newsletter h4 {
    color: var(--lv-ink);
    font-family: var(--lv-font-headline);
    font-size: var(--lv-fs-18);
    margin: 0 0 8px;
    letter-spacing: var(--lv-track-tight);
    font-weight: 700;
    line-height: 1.2;
}
.single-post-main .rail-newsletter p {
    color: var(--lv-ink-muted);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 12px;
}
.single-post-main .rail-newsletter form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.single-post-main .rail-newsletter input {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 10px 12px;
    border-radius: var(--lv-radius-sm);
    font-family: var(--lv-font-body);
    font-size: 13px;
    outline: none;
}
.single-post-main .rail-newsletter input::placeholder { color: rgba(255, 255, 255, 0.5); }
.single-post-main .rail-newsletter input:focus { border-color: var(--lv-primary-fixed-dim); }
.single-post-main .rail-newsletter button {
    background: var(--lv-primary);
    color: #fff;
    border: 0;
    padding: 10px 12px;
    border-radius: var(--lv-radius-sm);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background var(--lv-dur-fast) var(--lv-ease-out);
}
.single-post-main .rail-newsletter button:hover { background: var(--lv-primary-container); }

/* ============================================================
   ARTICLE HEADER
   ============================================================ */
.single-post-main .article-head { margin-bottom: 28px; }
.single-post-main .article-head__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.single-post-main .article-head__cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--lv-primary-fixed);
    color: var(--lv-on-primary-fixed);
    padding: 5px 12px;
    border-radius: var(--lv-radius-pill);
    font-size: var(--lv-fs-11);
    font-weight: 700;
    letter-spacing: var(--lv-track-caps);
    text-transform: uppercase;
    text-decoration: none;
}
.single-post-main .article-head__cat:hover { background: var(--lv-primary-fixed-dim); }
.single-post-main .article-head__meta .meta-item {
    font-size: var(--lv-fs-13);
    color: var(--lv-ink-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.single-post-main .article-head__meta .dot {
    width: 3px; height: 3px;
    background: var(--lv-ink-faint);
    border-radius: 6px;
}
.single-post-main .article-head h1 {
    font-family: var(--lv-font-headline);
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: var(--lv-track-display);
    margin: 0 0 18px;
    color: var(--lv-ink);
}
.single-post-main .article-head__lead {
    font-size: var(--lv-fs-20);
    line-height: 1.55;
    color: var(--lv-ink-muted);
    max-width: 720px;
    margin: 0;
}
.single-post-main .article-head__byline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding: 16px 0;
    border-top: 1px solid var(--lv-border);
    border-bottom: 1px solid var(--lv-border);
}
.single-post-main .article-head__byline .avatar {
    width: 44px; height: 44px;
    border-radius: 6px;
    background: linear-gradient(135deg, #4a3a3a, #1a1a1a);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    overflow: hidden;
}
.single-post-main .article-head__byline .avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.single-post-main .article-head__byline .name {
    font-size: var(--lv-fs-14);
    font-weight: 700;
    color: var(--lv-ink);
}
.single-post-main .article-head__byline .role {
    font-size: var(--lv-fs-12);
    color: var(--lv-ink-muted);
}
.single-post-main .article-head__byline .meta-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: var(--lv-fs-12);
    color: var(--lv-ink-muted);
}
.single-post-main .article-head__byline .meta-right span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.single-post-main .article-head__byline .meta-right svg {
    width: 14px; height: 14px;
    flex-shrink: 0;
    opacity: 0.7;
}

/* Hero media (image or video) — capped at 512px wide and centered. */
.single-post-main .article-hero-img {
    max-width: 512px;
    width: 100%;
    height: auto;
    margin: 0 auto 32px;
    border-radius: var(--lv-radius-md);
    position: relative;
    overflow: hidden;
    box-shadow: var(--lv-shadow-1);
    background: var(--lv-surface-container);
}
.single-post-main .article-hero-img img,
.single-post-main .article-hero-img video {
    width: 100%;
    height: auto;
    display: block;
}
.single-post-main .article-hero-img.has-video video {
    background: #000;
}

/* In-content images / videos / figures honor the same 512px cap and center. */
.single-post-main .article-body img,
.single-post-main .article-body video,
.single-post-main .article-body figure {
    max-width: 512px;
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   KEY TAKEAWAYS
   ============================================================ */
.single-post-main .article-takeaways {
    background: var(--lv-surface-container-low);
    border: 1px solid var(--lv-border);
    border-left: 3px solid var(--lv-primary);
    border-radius: var(--lv-radius-md);
    padding: 24px 28px;
    margin-bottom: 32px;
}
.single-post-main .article-takeaways__head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--lv-fs-11);
    font-weight: 700;
    letter-spacing: var(--lv-track-caps);
    text-transform: uppercase;
    color: var(--lv-primary);
    margin-bottom: 8px;
}
.single-post-main .article-takeaways__head .meta {
    color: var(--lv-ink-muted);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    font-size: var(--lv-fs-12);
}
.single-post-main .article-takeaways h4 {
    font-family: var(--lv-font-headline);
    font-size: var(--lv-fs-18);
    margin: 0 0 12px;
    color: var(--lv-ink);
    font-weight: 700;
}
.single-post-main .article-takeaways ul {
    padding-left: 0;
    margin: 0;
    list-style: none;
}
.single-post-main .article-takeaways li {
    padding: 6px 0 6px 24px;
    position: relative;
    font-size: var(--lv-fs-15);
    line-height: 1.5;
    color: var(--lv-ink);
}
.single-post-main .article-takeaways li::before {
    content: '';
    position: absolute;
    left: 0; top: 14px;
    width: 14px; height: 2px;
    background: var(--lv-primary);
}

/* ============================================================
   ARTICLE BODY (text content)
   ============================================================ */
.single-post-main .article-body {
    font-size: var(--lv-fs-17);
    line-height: var(--lv-lh-reading);
    color: #2a2d31;
}
/* Constrain reading width on text-only blocks; let special blocks span full width. */
.single-post-main .article-body > p,
.single-post-main .article-body > h2,
.single-post-main .article-body > h3,
.single-post-main .article-body > h4,
.single-post-main .article-body > ul,
.single-post-main .article-body > ol,
.single-post-main .article-body > blockquote { max-width: 720px; }
.single-post-main .article-body h2 {
    font-family: var(--lv-font-headline);
    font-size: var(--lv-fs-28);
    margin: 48px 0 18px;
    line-height: 1.2;
    letter-spacing: var(--lv-track-tight);
    scroll-margin-top: calc(var(--header-height, 76px) + 24px);
    color: var(--lv-ink);
    font-weight: 700;
}
.single-post-main .article-body h2:first-child { margin-top: 0; }
.single-post-main .article-body h3 {
    font-family: var(--lv-font-headline);
    font-size: var(--lv-fs-20);
    margin: 32px 0 12px;
    scroll-margin-top: calc(var(--header-height, 76px) + 24px);
    color: var(--lv-ink);
    font-weight: 700;
}
.single-post-main .article-body p {
    margin: 0 0 18px;
    font-size: var(--lv-fs-17);
    line-height: 1.75;
}
.single-post-main .article-body p:last-child { margin-bottom: 0; }
.single-post-main .article-body em { font-style: italic; color: var(--lv-ink); }
.single-post-main .article-body strong { font-weight: 700; color: var(--lv-ink); }
.single-post-main .article-body a {
    color: var(--lv-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.single-post-main .article-body a:hover { color: var(--lv-primary-container); }
.single-post-main .article-body blockquote {
    margin: 28px 0;
    padding: 18px 26px;
    border-left: 3px solid var(--lv-primary);
    background: var(--lv-surface-container-low);
    font-family: var(--lv-font-headline);
    font-size: var(--lv-fs-18);
    line-height: 1.5;
    color: var(--lv-ink);
    border-radius: 0 var(--lv-radius-sm) var(--lv-radius-sm) 0;
    font-weight: 500;
    font-style: normal;
}
.single-post-main .article-body blockquote cite {
    display: block;
    margin-top: 8px;
    font-family: var(--lv-font-body);
    font-style: normal;
    font-size: var(--lv-fs-13);
    color: var(--lv-ink-muted);
    font-weight: 500;
}
.single-post-main .article-body ul,
.single-post-main .article-body ol {
    margin: 18px 0;
    padding-left: 22px;
    list-style: revert;
    font-size: var(--lv-fs-17);
    color: #2a2d31;
}
.single-post-main .article-body li { margin-bottom: 8px; line-height: 1.65; }
.single-post-main .article-body figure { margin: 32px 0; }
.single-post-main .article-body figure img {
    width: 100%;
    height: auto;
    border-radius: var(--lv-radius-md);
    background-size: cover;
    background-position: center;
    box-shadow: var(--lv-shadow-1);
    object-fit: cover;
    display: block;
}
.single-post-main .article-body figcaption {
    margin-top: 10px;
    font-size: var(--lv-fs-13);
    color: var(--lv-ink-muted);
    text-align: center;
    line-height: 1.5;
}
.single-post-main .article-body code {
    background: var(--lv-surface-container);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.92em;
    font-family: var(--lv-font-mono);
}

/* ============================================================
   INLINE MID-ARTICLE CTA
   ============================================================ */
.single-post-main .inline-cta {
    margin: 36px 0;
    padding: 28px 32px;
    background: linear-gradient(135deg, var(--lv-primary-fixed) 0%, #fff5f3 100%);
    border: 1px solid var(--lv-outline-variant);
    border-radius: var(--lv-radius-md);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
}
.single-post-main .inline-cta__eyebrow {
    font-size: var(--lv-fs-11);
    font-weight: 700;
    letter-spacing: var(--lv-track-caps);
    text-transform: uppercase;
    color: var(--lv-primary);
    margin-bottom: 6px;
}
.single-post-main .inline-cta h4 {
    font-family: var(--lv-font-headline);
    font-size: var(--lv-fs-20);
    margin: 0 0 6px;
    color: var(--lv-ink);
    font-weight: 700;
}
.single-post-main .inline-cta p {
    font-size: var(--lv-fs-14);
    color: var(--lv-ink-muted);
    margin: 0;
    line-height: 1.5;
}
/* Higher-specificity to defeat .article-body a underline + primary color. */
.single-post-main .article-body a.inline-cta__btn,
.single-post-main .inline-cta a.inline-cta__btn,
.single-post-main .inline-cta__btn {
    background: var(--lv-primary);
    color: #fff !important;
    padding: 12px 22px;
    border-radius: var(--lv-radius-sm);
    font-weight: 700;
    font-size: var(--lv-fs-14);
    white-space: nowrap;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background var(--lv-dur-fast) var(--lv-ease-out),
                box-shadow var(--lv-dur-fast) var(--lv-ease-out),
                transform var(--lv-dur-fast) var(--lv-ease-out);
}
.single-post-main .article-body a.inline-cta__btn:hover,
.single-post-main .inline-cta a.inline-cta__btn:hover,
.single-post-main .inline-cta__btn:hover {
    background: var(--lv-primary-container);
    box-shadow: var(--lv-shadow-ember);
    transform: translateY(-1px);
    color: #fff !important;
}

/* ============================================================
   STAT ROW
   ============================================================ */
.single-post-main .article-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 32px 0;
}
.single-post-main .article-stat {
    background: var(--lv-surface-container-lowest);
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius-md);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.single-post-main .article-stat__num {
    font-family: var(--lv-font-headline);
    font-size: var(--lv-fs-32);
    font-weight: 700;
    color: var(--lv-primary);
    letter-spacing: var(--lv-track-tight);
    line-height: 1;
}
.single-post-main .article-stat__label {
    font-size: var(--lv-fs-13);
    color: var(--lv-ink-muted);
    line-height: 1.5;
}

/* ============================================================
   CALLOUTS (info / warn / note)
   ============================================================ */
.single-post-main .article-callout {
    margin: 28px 0;
    padding: 20px 24px;
    border-radius: var(--lv-radius-md);
    border: 1px solid var(--lv-border);
    background: var(--lv-surface-container-low);
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 16px;
    align-items: start;
}
.single-post-main .article-callout__icon {
    width: 32px; height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: var(--lv-primary);
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
}
.single-post-main .article-callout__head {
    font-size: var(--lv-fs-13);
    font-weight: 700;
    color: var(--lv-ink);
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}
.single-post-main .article-callout p {
    margin: 0;
    font-size: var(--lv-fs-15);
    color: var(--lv-ink-muted);
    line-height: 1.55;
}
.single-post-main .article-callout--warn {
    background: #fff5f3;
    border-color: var(--lv-outline-variant);
}
.single-post-main .article-callout--warn .article-callout__icon { background: var(--lv-primary-container); }
.single-post-main .article-callout--note {
    background: #f5f8ff;
    border-color: #d7e2ff;
}
.single-post-main .article-callout--note .article-callout__icon { background: var(--lv-secondary); }

/* ============================================================
   PULL QUOTE
   ============================================================ */
.single-post-main .article-pullquote {
    margin: 36px 0;
    padding: 28px 8px 28px 36px;
    border-left: 4px solid var(--lv-primary);
    position: relative;
}
.single-post-main .article-pullquote::before {
    content: '\201C';
    position: absolute;
    left: 16px;
    top: -4px;
    font-family: var(--lv-font-headline);
    font-size: 56px;
    line-height: 1;
    color: var(--lv-primary);
    opacity: 0.2;
    pointer-events: none;
}
.single-post-main .article-pullquote p {
    font-family: var(--lv-font-headline);
    font-size: var(--lv-fs-24);
    line-height: 1.32;
    letter-spacing: var(--lv-track-tight);
    color: var(--lv-ink);
    font-weight: 600;
    margin: 0 0 12px;
}
.single-post-main .article-pullquote cite {
    display: block;
    font-family: var(--lv-font-body);
    font-style: normal;
    font-size: var(--lv-fs-13);
    color: var(--lv-ink-muted);
    font-weight: 500;
}

/* ============================================================
   CHECKLIST
   ============================================================ */
.single-post-main .article-checklist {
    margin: 32px 0;
    padding: 28px 32px;
    background: var(--lv-surface-container-lowest);
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius-md);
    box-shadow: var(--lv-shadow-1);
}
.single-post-main .article-checklist__head {
    font-size: var(--lv-fs-11);
    font-weight: 700;
    letter-spacing: var(--lv-track-caps);
    text-transform: uppercase;
    color: var(--lv-primary);
    margin-bottom: 8px;
}
.single-post-main .article-checklist h4 {
    font-family: var(--lv-font-headline);
    font-size: var(--lv-fs-18);
    margin: 0 0 16px;
    color: var(--lv-ink);
    font-weight: 700;
}
.single-post-main .article-checklist ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.single-post-main .article-checklist li {
    position: relative;
    padding-left: 30px;
    font-size: var(--lv-fs-15);
    line-height: 1.55;
    color: var(--lv-ink);
}
.single-post-main .article-checklist li::before {
    content: '';
    position: absolute;
    left: 0; top: 4px;
    width: 18px; height: 18px;
    background: var(--lv-primary);
    border-radius: var(--lv-radius-xs);
}
.single-post-main .article-checklist li::after {
    content: '';
    position: absolute;
    left: 5px; top: 8px;
    width: 8px; height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

/* ============================================================
   NUMBERED STEPS
   ============================================================ */
/* Override generic .article-body ol { list-style: revert; padding-left: 22px }
   which would otherwise produce a second "1. 2. 3." in front of our pills. */
.single-post-main .article-body ol.article-steps,
.single-post-main .article-steps {
    counter-reset: a-step;
    list-style: none;
    margin: 32px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.single-post-main .article-body ol.article-steps > li::marker { content: ''; }
.single-post-main .article-steps__item {
    counter-increment: a-step;
    background: var(--lv-surface-container-lowest);
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius-md);
    padding: 22px 24px 22px 84px;
    position: relative;
    box-shadow: var(--lv-shadow-1);
}
.single-post-main .article-steps__item::before {
    content: counter(a-step, decimal-leading-zero);
    position: absolute;
    left: 22px; top: 22px;
    width: 44px; height: 44px;
    border-radius: 6px;
    background: var(--lv-primary);
    color: #fff;
    font-family: var(--lv-font-headline);
    font-weight: 700;
    font-size: var(--lv-fs-14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.single-post-main .article-steps__title {
    font-family: var(--lv-font-headline);
    font-size: var(--lv-fs-18);
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--lv-ink);
}
.single-post-main .article-steps__body {
    margin: 0;
    font-size: var(--lv-fs-15);
    line-height: 1.6;
    color: var(--lv-ink-muted);
}

/* ============================================================
   TL;DR
   ============================================================ */
.single-post-main .article-tldr {
    margin: 36px 0;
    padding: 24px 28px;
    background: var(--lv-on-surface);
    color: #f0f1f2;
    border-radius: var(--lv-radius-md);
    display: flex;
    gap: 18px;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}
.single-post-main .article-tldr::after {
    content: '';
    position: absolute;
    right: -40px; top: -40px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(165, 0, 0, 0.4), transparent 70%);
    pointer-events: none;
}
.single-post-main .article-tldr__tag {
    position: relative;
    z-index: 1;
    font-family: var(--lv-font-headline);
    font-weight: 700;
    background: var(--lv-primary);
    color: #fff;
    padding: 4px 12px;
    border-radius: var(--lv-radius-pill);
    font-size: var(--lv-fs-12);
    letter-spacing: var(--lv-track-caps);
    text-transform: uppercase;
    flex-shrink: 0;
}
.single-post-main .article-tldr p {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: var(--lv-fs-16);
    line-height: 1.55;
    color: #f0f1f2;
}
.single-post-main .article-tldr strong { color: #fff; }

/* ============================================================
   FAQ accordion (native details/summary)
   ============================================================ */
.single-post-main .faq {
    margin-top: 32px;
    background: var(--lv-surface-container-lowest);
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius-md);
    padding: 32px 36px;
    scroll-margin-top: calc(var(--header-height, 76px) + 24px);
}
.single-post-main .faq h3 {
    font-family: var(--lv-font-headline);
    font-size: var(--lv-fs-24);
    margin: 0 0 18px;
    color: var(--lv-ink);
    font-weight: 700;
}
.single-post-main .faq__item {
    border-bottom: 1px solid var(--lv-border);
    padding: 0;
}
.single-post-main .faq__item:last-child { border-bottom: 0; }
.single-post-main .faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    font-family: var(--lv-font-headline);
    font-size: var(--lv-fs-16);
    font-weight: 600;
    cursor: pointer;
    gap: 16px;
    list-style: none;
    color: var(--lv-ink);
}
.single-post-main .faq__item summary::-webkit-details-marker { display: none; }
.single-post-main .faq__item summary .plus {
    width: 24px; height: 24px;
    border-radius: 6px;
    background: var(--lv-surface-container);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--lv-primary);
    transition: transform var(--lv-dur-fast) var(--lv-ease-out),
                background var(--lv-dur-fast) var(--lv-ease-out),
                color var(--lv-dur-fast) var(--lv-ease-out);
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
    position: relative;
}
.single-post-main .faq__item summary .plus::before,
.single-post-main .faq__item summary .plus::after {
    content: '';
    position: absolute;
    background: currentColor;
    transition: transform var(--lv-dur-fast) var(--lv-ease-out);
}
.single-post-main .faq__item summary .plus::before {
    width: 10px; height: 2px;
}
.single-post-main .faq__item summary .plus::after {
    width: 2px; height: 10px;
}
.single-post-main .faq__item[open] summary .plus {
    transform: rotate(45deg);
    background: var(--lv-primary);
    color: #fff;
}
.single-post-main .faq__answer {
    padding: 0 0 18px;
    color: var(--lv-ink-muted);
    font-size: var(--lv-fs-15);
    line-height: 1.6;
}
.single-post-main .faq__answer p { margin: 0 0 8px; }
.single-post-main .faq__answer p:last-child { margin-bottom: 0; }

/* ============================================================
   AUTHOR BIO (rich)
   ============================================================ */
.single-post-main .author-bio {
    margin-top: 32px;
    padding: 28px 32px;
    background: var(--lv-surface-container-low);
    border-radius: var(--lv-radius-md);
    border: 1px solid var(--lv-border);
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 24px;
    align-items: start;
}
.single-post-main .author-bio__photo {
    width: 96px; height: 96px;
    border-radius: 6px;
    background: linear-gradient(135deg, #4a3a3a, #1a1a1a);
    background-size: cover;
    background-position: center;
    border: 3px solid #fff;
    box-shadow: var(--lv-shadow-2);
    overflow: hidden;
}
.single-post-main .author-bio__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.single-post-main .author-bio__eyebrow {
    font-size: var(--lv-fs-11);
    font-weight: 700;
    letter-spacing: var(--lv-track-caps);
    text-transform: uppercase;
    color: var(--lv-ink-muted);
    margin-bottom: 4px;
    display: inline-block;
}
.single-post-main .author-bio h4 {
    font-family: var(--lv-font-headline);
    font-size: var(--lv-fs-20);
    margin: 0 0 4px;
    color: var(--lv-ink);
    font-weight: 700;
}
.single-post-main .author-bio__role {
    font-size: var(--lv-fs-13);
    color: var(--lv-ink-muted);
    margin-bottom: 14px;
    display: block;
}
.single-post-main .author-bio__desc {
    font-size: var(--lv-fs-14);
    color: var(--lv-ink-muted);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 0 18px;
}
.single-post-main .author-bio__meta {
    display: flex;
    gap: 28px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.single-post-main .author-bio__meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.single-post-main .author-bio__meta-num {
    font-family: var(--lv-font-headline);
    font-size: var(--lv-fs-18);
    font-weight: 700;
    color: var(--lv-ink);
    line-height: 1;
}
.single-post-main .author-bio__meta-label {
    font-size: var(--lv-fs-12);
    color: var(--lv-ink-muted);
}
.single-post-main .author-bio__actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.single-post-main .author-bio__btn {
    background: transparent;
    color: var(--lv-ink);
    padding: 10px 18px;
    border-radius: var(--lv-radius-pill);
    border: 1px solid var(--lv-border-strong);
    font-size: var(--lv-fs-13);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--lv-dur-fast) var(--lv-ease-out);
    white-space: nowrap;
}
.single-post-main .author-bio__btn:hover {
    background: var(--lv-on-surface);
    color: #fff;
    border-color: var(--lv-on-surface);
}
.single-post-main .author-bio__btn--primary {
    background: var(--lv-primary);
    color: #fff;
    border-color: var(--lv-primary);
}
.single-post-main .author-bio__btn--primary:hover {
    background: var(--lv-primary-container);
    border-color: var(--lv-primary-container);
}
.single-post-main .author-bio__socials {
    display: flex;
    gap: 6px;
    margin-left: 6px;
}
.single-post-main .author-bio__social {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lv-radius-sm);
    background: var(--lv-surface-container-lowest);
    color: var(--lv-ink-muted);
    border: 1px solid var(--lv-border);
    transition: all var(--lv-dur-fast) var(--lv-ease-out);
}
.single-post-main .author-bio__social:hover {
    background: var(--lv-primary);
    color: #fff;
    border-color: var(--lv-primary);
    transform: translateY(-1px);
}

/* ============================================================
   PREV / NEXT
   ============================================================ */
.single-post-main .prev-next {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.single-post-main .prev-next__item {
    background: var(--lv-surface-container-lowest);
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius-md);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all var(--lv-dur) var(--lv-ease-out);
    text-decoration: none;
    color: inherit;
}
.single-post-main .prev-next__item:hover {
    border-color: var(--lv-on-surface);
    transform: translateY(-2px);
    box-shadow: var(--lv-shadow-2);
}
.single-post-main .prev-next__label {
    font-size: var(--lv-fs-11);
    font-weight: 700;
    letter-spacing: var(--lv-track-caps);
    text-transform: uppercase;
    color: var(--lv-ink-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.single-post-main .prev-next__title {
    font-family: var(--lv-font-headline);
    font-size: var(--lv-fs-16);
    font-weight: 700;
    line-height: 1.3;
    color: var(--lv-ink);
}
.single-post-main .prev-next__item--next { text-align: right; }
.single-post-main .prev-next__item--next .prev-next__label { justify-content: flex-end; }

/* ============================================================
   RELATED ARTICLES
   ============================================================ */
.single-post-main .related {
    margin-top: 36px;
    border-top: 1px solid var(--lv-border);
    padding-top: 32px;
}
.single-post-main .related__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 28px;
}
.single-post-main .related h3 {
    font-family: var(--lv-font-headline);
    font-size: var(--lv-fs-32);
    letter-spacing: var(--lv-track-tight);
    margin: 0;
    color: var(--lv-ink);
    font-weight: 700;
}
.single-post-main .related__head-side {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}
.single-post-main .related__head a {
    font-size: var(--lv-fs-13);
    font-weight: 700;
    color: var(--lv-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.single-post-main .related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ---- Related as Swiper carousel ---- */
.single-post-main .related__swiper {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.single-post-main .related__swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
}
.single-post-main .related__swiper .swiper-slide {
    width: 310px;
    flex-shrink: 0;
    height: auto;
    display: flex;
    box-sizing: border-box;
}
.single-post-main .related__swiper .swiper-slide > .blog-card {
    flex: 1 1 auto;
    width: 100%;
}
.single-post-main .related__swiper-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.single-post-main .related__swiper-btn {
    width: 36px; height: 36px;
    border-radius: 6px;
    border: 1px solid var(--lv-border-strong);
    background: var(--lv-surface-container-lowest);
    color: var(--lv-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--lv-dur-fast) var(--lv-ease-out);
    padding: 0;
}
.single-post-main .related__swiper-btn:hover:not(:disabled) {
    background: var(--lv-primary);
    color: #fff;
    border-color: var(--lv-primary);
    transform: translateY(-1px);
}
.single-post-main .related__swiper-btn:disabled,
.single-post-main .related__swiper-btn.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}
.single-post-main .related__swiper-btn svg { width: 16px; height: 16px; }

/* Article card (reused for related) */
.single-post-main .blog-card {
    background: var(--lv-surface-container-lowest);
    border: 1px solid var(--lv-border);
    border-radius: var(--lv-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow var(--lv-dur) var(--lv-ease-out),
                transform var(--lv-dur) var(--lv-ease-out),
                border-color var(--lv-dur) var(--lv-ease-out);
    text-decoration: none;
    color: inherit;
}
.single-post-main .blog-card:hover {
    box-shadow: var(--lv-shadow-2);
    border-color: var(--lv-border-strong);
}
.single-post-main .blog-card__media {
    aspect-ratio: 1;
    background-color: var(--lv-surface-container);
    position: relative;
    overflow: hidden;
}
/* Poster image — sits beneath the optional hover-play video. */
.single-post-main .blog-card__poster {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 0;
    inset: 0;
}
.single-post-main .blog-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.12));
    pointer-events: none;
    z-index: 1;
}
/* Hover-play video overlay on blog cards (related carousel) — sits above poster. */
.single-post-main .blog-card__video {
    position: absolute;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity .3s var(--lv-ease-out);
    z-index: 1;
    pointer-events: none;
    background: transparent;
    display: block;
    inset: 0;
}
.single-post-main .blog-card.has-video:hover .blog-card__video,
.single-post-main .blog-card.has-video.is-playing .blog-card__video {
    opacity: 1;
}
.single-post-main .blog-card__pill {
    position: absolute;
    top: 14px; left: 14px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--lv-ink);
    padding: 5px 11px;
    border-radius: var(--lv-radius-pill);
    font-size: var(--lv-fs-11);
    font-weight: 700;
    letter-spacing: var(--lv-track-caps);
    text-transform: uppercase;
    z-index: 3;
}
.single-post-main .blog-card__pill .dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 6px;
    margin-right: 6px;
    vertical-align: 1px;
    animation: lv-dot-pulse 1.8s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .single-post-main .blog-card__pill .dot { animation: none; }
}
.single-post-main .blog-card__body {
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.single-post-main .blog-card__meta {
    font-size: var(--lv-fs-12);
    color: var(--lv-ink-muted);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}
.single-post-main .blog-card__meta .dot {
    width: 3px; height: 3px;
    background: var(--lv-ink-faint);
    border-radius: 6px;
}
.single-post-main .blog-card h3 {
    font-family: var(--lv-font-headline);
    font-size: var(--lv-fs-20);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: var(--lv-track-tight);
    margin: 0;
    color: var(--lv-ink);
}
.single-post-main .blog-card__excerpt {
    color: var(--lv-ink-muted);
    font-size: var(--lv-fs-14);
    line-height: 1.55;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
.single-post-main .blog-card__foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--lv-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.single-post-main .blog-card__author {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--lv-fs-12);
    flex: 1 1 auto;
    min-width: 0;
}
.single-post-main .blog-card__author .avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #4a3a3a, #1a1a1a);
    overflow: hidden;
    display: block;
    position: relative;
}
.single-post-main .blog-card__author .avatar img,
.single-post-main .blog-card__author .avatar .avatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    border: 0;
    box-shadow: none;
    background: transparent;
}
.single-post-main .blog-card__author .name {
    font-weight: 700;
    color: var(--lv-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.single-post-main .blog-card__read {
    font-size: var(--lv-fs-12);
    font-weight: 700;
    color: var(--lv-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.single-post-main .blog-card__read .arr {
    transition: transform var(--lv-dur-fast) var(--lv-ease-out);
}
.single-post-main .blog-card:hover .blog-card__read .arr {
    transform: translateX(3px);
}

/* Category dot colors (taxonomic). */
.single-post-main .cat-ai-ml,
.single-post-main .cat-ai-ml .dot { color: #1f7a4a; }
.single-post-main .cat-ai-ml .dot { background: #1f7a4a; }
.single-post-main .cat-development,
.single-post-main .cat-development .dot { color: #5b3ad6; }
.single-post-main .cat-development .dot { background: #5b3ad6; }
.single-post-main .cat-cybersecurity,
.single-post-main .cat-cybersecurity .dot { color: #b54708; }
.single-post-main .cat-cybersecurity .dot { background: #b54708; }
.single-post-main .cat-cloud,
.single-post-main .cat-cloud .dot { color: #1f6caa; }
.single-post-main .cat-cloud .dot { background: #1f6caa; }
.single-post-main .cat-web-engineering,
.single-post-main .cat-web-engineering .dot { color: #0d9488; }
.single-post-main .cat-web-engineering .dot { background: #0d9488; }
.single-post-main .cat-strategy,
.single-post-main .cat-strategy .dot { color: var(--lv-primary); }
.single-post-main .cat-strategy .dot { background: var(--lv-primary); }
.single-post-main .cat-blockchain,
.single-post-main .cat-blockchain .dot { color: #c2185b; }
.single-post-main .cat-blockchain .dot { background: #c2185b; }

/* ============================================================
   BIG DARK CTA SECTION (end of article)
   ============================================================ */
.single-post-main .cta-section {
    position: relative;
    background: var(--lv-on-surface);
    color: #fff;
    padding: 56px 48px;
    border-radius: var(--lv-radius-md);
    margin-top: 36px;
    overflow: hidden;
    text-align: center;
}
.single-post-main .cta-section::after {
    content: '';
    position: absolute;
    right: -80px; top: -50px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(165, 0, 0, 0.45), transparent 70%);
    pointer-events: none;
}
.single-post-main .cta-section::before {
    content: '';
    position: absolute;
    left: -100px; bottom: -80px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(255, 180, 168, 0.10), transparent 70%);
    pointer-events: none;
}
.single-post-main .cta-section h3 {
    font-family: var(--lv-font-headline);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: #fff;
    margin: 0 0 14px;
    position: relative;
    z-index: 1;
    letter-spacing: var(--lv-track-tight);
    font-weight: 700;
}
.single-post-main .cta-section p {
    color: #c9ccd0;
    max-width: 560px;
    margin: 0 auto 28px;
    line-height: 1.55;
    position: relative;
    z-index: 1;
    font-size: var(--lv-fs-16);
}
.single-post-main .cta-section__btns {
    display: inline-flex;
    gap: 12px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    justify-content: center;
}
.single-post-main .cta-section__btn-primary {
    background: var(--lv-primary);
    color: #fff;
    padding: 14px 28px;
    border-radius: var(--lv-radius-sm);
    font-weight: 700;
    font-size: var(--lv-fs-14);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: background var(--lv-dur-fast) var(--lv-ease-out),
                box-shadow var(--lv-dur-fast) var(--lv-ease-out),
                transform var(--lv-dur-fast) var(--lv-ease-out);
}
.single-post-main .cta-section__btn-primary:hover {
    background: var(--lv-primary-container);
    box-shadow: var(--lv-shadow-ember);
    transform: translateY(-1px);
    color: #fff;
}
.single-post-main .cta-section__btn-secondary {
    background: transparent;
    color: #fff;
    padding: 14px 28px;
    border-radius: var(--lv-radius-sm);
    font-weight: 600;
    font-size: var(--lv-fs-14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-decoration: none;
    transition: all var(--lv-dur-fast) var(--lv-ease-out);
}
.single-post-main .cta-section__btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: #fff;
    color: #fff;
}

/* ============================================================
   MOBILE STICKY TOC (used on mobile)
   ============================================================ */
.single-post-main .m-toc-sticky {
    display: none;
    position: sticky;
    top: var(--header-height, 76px);
    z-index: 22;
    background: rgba(248, 249, 250, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--lv-border);
    border-top: 1px solid var(--lv-border);
}
.single-post-main .m-toc-sticky__bar {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 10px;
    cursor: pointer;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    font-family: inherit;
}
.single-post-main .m-toc-sticky__icon {
    width: 28px; height: 28px;
    border-radius: var(--lv-radius-sm);
    background: var(--lv-primary-fixed);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lv-primary);
    flex-shrink: 0;
}
.single-post-main .m-toc-sticky__text {
    flex: 1;
    text-align: left;
    min-width: 0;
}
.single-post-main .m-toc-sticky__label {
    font-size: var(--lv-fs-11);
    font-weight: 700;
    letter-spacing: var(--lv-track-caps);
    text-transform: uppercase;
    color: var(--lv-ink-muted);
    display: block;
}
.single-post-main .m-toc-sticky__current {
    font-size: var(--lv-fs-14);
    font-weight: 700;
    line-height: 1.2;
    color: var(--lv-ink);
    display: block;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.single-post-main .m-toc-sticky__chev {
    color: var(--lv-ink-muted);
    transition: transform var(--lv-dur-fast) var(--lv-ease-out);
    flex-shrink: 0;
}

/* Mobile mini hero preview — appears next to chevron after the user has
   scrolled past the actual hero. Native proportions, capped width. */
.single-post-main .m-toc-sticky__media {
    flex-shrink: 0;
    width: 0;
    max-width: 60px;
    margin-right: 0;
    border-radius: 4px;
    overflow: hidden;
    background: var(--lv-surface-container);
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .3s var(--lv-ease-out),
                transform .3s var(--lv-ease-out),
                width .3s var(--lv-ease-out),
                margin-right .3s var(--lv-ease-out);
    pointer-events: none;
    align-self: center;
    line-height: 0;
}
.single-post-main .m-toc-sticky__media.is-visible {
    width: 60px;
    margin-right: 8px;
    opacity: 1;
    transform: translateX(0);
}
.single-post-main .m-toc-sticky__media img,
.single-post-main .m-toc-sticky__media video {
    width: 100%;
    height: auto;
    display: block;
}
.single-post-main .m-toc-sticky__media:empty { display: none; }
.single-post-main .m-toc-sticky.is-open .m-toc-sticky__chev { transform: rotate(180deg); }
.single-post-main .m-toc-sticky__progress {
    height: 2px;
    background: var(--lv-surface-container);
    position: relative;
}
.single-post-main .m-toc-sticky__progress i {
    display: block;
    height: 100%;
    background: var(--lv-primary);
    width: 0;
    transition: width 120ms linear;
}
.single-post-main .m-toc-sticky__list {
    background: var(--lv-surface-container-lowest);
    padding: 0 12px;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--lv-dur) var(--lv-ease-out),
                padding var(--lv-dur) var(--lv-ease-out);
    list-style: none;
    margin: 0;
}
.single-post-main .m-toc-sticky.is-open .m-toc-sticky__list {
    max-height: 60vh;
    padding: 8px 12px 14px;
    overflow-y: auto;
}
.single-post-main .m-toc-sticky__list li { list-style: none; }
.single-post-main .m-toc-sticky__list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: var(--lv-fs-13);
    color: var(--lv-ink-muted);
    border-radius: var(--lv-radius-sm);
    border-left: 2px solid transparent;
    text-decoration: none;
}
.single-post-main .m-toc-sticky__list a.is-active {
    background: var(--lv-primary-fixed);
    color: var(--lv-primary);
    font-weight: 700;
    border-left-color: var(--lv-primary);
}
.single-post-main .m-toc-sticky__num {
    font-family: var(--lv-font-mono);
    font-size: var(--lv-fs-11);
    color: var(--lv-ink-faint);
    min-width: 18px;
}
.single-post-main .m-toc-sticky__list a.is-active .m-toc-sticky__num { color: var(--lv-primary); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet wide (≤1200px): keep the left TOC, drop the right rail under the
   article so the center column gets all the freed-up space. */
@media (max-width: 1200px) {
    .single-post-main .article-shell {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 40px;
        padding: 24px 28px 56px;
    }
    .single-post-main .article-rail {
        position: static;
        grid-column: 1 / -1;        /* full-width row beneath the two columns */
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 16px;
    }
    .single-post-main .rail-card {
        flex: 0 1 auto;
        min-width: 240px;
        height: auto;
        align-self: flex-start;
    }
    .single-post-main .pg-crumbs { padding: 22px 28px 0; max-width: none; }
}

/* Tablet narrow / small laptop (≤900px): drop the left TOC too, fall back to
   the mobile sticky-TOC dropdown. The article body now spans the full width. */
@media (max-width: 900px) {
    .single-post-main .article-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 12px 24px 48px;
    }
    .single-post-main .toc { display: none; }
}

/* From ≤900px (the breakpoint where the desktop TOC drops away) the mobile
   sticky-TOC dropdown takes over. It lives inline under the hero, then
   sticks to the top once the user scrolls past it — pure native sticky,
   no JS reveal needed. */
@media (max-width: 900px) {
    .single-post-main .m-toc-sticky {
        display: block;
        margin: 0 0 24px;
    }
    /* Avoid two stacked progress bars — the sticky-TOC already has one. */
    .single-post-main .reading-progress { display: none; }
}

/* Mobile (≤768px) — tighter spacing on top of the ≤900 layout. */
@media (max-width: 768px) {
    .single-post-main .pg-crumbs { padding: 14px 16px 0; font-size: var(--lv-fs-12); }
    .single-post-main .article-shell { padding: 12px 16px 48px; gap: 24px; }

    /* Sticky-TOC bar on mobile — flush to viewport edges. The icon and text
       hug each other on the left (natural flex-start flow + gap), while the
       chevron is pushed to the right by `margin-left: auto`. `space-between`
       would scatter the three children (icon ↔ textwrap ↔ chev) and leave a
       big void between the icon and the text when "What we do" is short. */
    .single-post-main .m-toc-sticky__bar {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .single-post-main .m-toc-sticky__chev {
        margin-left: auto;
    }

    .single-post-main .article-head h1 { font-size: clamp(1.625rem, 7vw, 2.25rem); }
    .single-post-main .article-head__lead { font-size: var(--lv-fs-16); }
    .single-post-main .article-head__byline {
        flex-wrap: wrap;
        gap: 10px;
    }
    .single-post-main .article-head__byline .meta-right {
        margin-left: 0;
        flex-basis: 100%;
        font-size: var(--lv-fs-11);
    }
    .single-post-main .article-hero-img {
        /* Keep native proportions on mobile too — no fixed aspect-ratio. */
        margin-bottom: 24px;
    }
    .single-post-main .article-takeaways { padding: 18px 20px; margin-bottom: 24px; }
    .single-post-main .article-body { font-size: var(--lv-fs-16); }
    .single-post-main .article-body h2 { font-size: var(--lv-fs-24); margin: 32px 0 14px; }
    .single-post-main .article-body h3 { font-size: var(--lv-fs-18); margin: 24px 0 10px; }
    .single-post-main .article-body p { font-size: var(--lv-fs-16); margin-bottom: 14px; }
    .single-post-main .article-body blockquote {
        margin: 22px 0;
        padding: 14px 18px;
        font-size: var(--lv-fs-15);
    }
    .single-post-main .inline-cta {
        grid-template-columns: 1fr;
        padding: 22px;
    }
    .single-post-main .inline-cta__btn { justify-self: start; }
    .single-post-main .article-stat-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .single-post-main .article-stat__num { font-size: var(--lv-fs-28); }
    .single-post-main .article-callout {
        padding: 16px 18px;
        grid-template-columns: 32px 1fr;
        gap: 12px;
    }
    .single-post-main .article-callout__icon { width: 28px; height: 28px; font-size: 13px; }
    .single-post-main .article-pullquote {
        padding: 16px 8px 16px 22px;
    }
    .single-post-main .article-pullquote p { font-size: var(--lv-fs-18); }
    .single-post-main .article-checklist { padding: 20px 22px; }
    .single-post-main .article-steps__item {
        padding: 18px 18px 18px 70px;
    }
    .single-post-main .article-steps__item::before {
        left: 16px; top: 16px;
        width: 38px; height: 38px;
        font-size: var(--lv-fs-13);
    }
    .single-post-main .article-tldr {
        flex-direction: column;
        gap: 12px;
        padding: 22px 24px;
    }
    .single-post-main .faq { padding: 22px 22px; margin-top: 36px; }
    .single-post-main .faq h3 { font-size: var(--lv-fs-20); }
    .single-post-main .faq__item summary { font-size: var(--lv-fs-15); }
    .single-post-main .author-bio {
        grid-template-columns: 1fr;
        padding: 22px;
        gap: 18px;
        margin-top: 36px;
    }
    .single-post-main .author-bio__photo {
        width: 64px; height: 64px;
    }
    .single-post-main .author-bio__meta {
        gap: 18px;
    }
    /* Mobile: keep prev/next side-by-side (2 buttons → 50/50, same height, same line).
       The 1-button case (only prev OR only next) naturally fills its own column;
       the other column stays empty without breaking layout. */
    .single-post-main .prev-next {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 28px;
        align-items: stretch;
    }
    .single-post-main .prev-next__item {
        padding: 14px 16px;
        gap: 4px;
    }
    .single-post-main .prev-next__title {
        font-size: var(--lv-fs-14);
    }
    .single-post-main .prev-next__label {
        font-size: 10px;
    }
    .single-post-main .related {
        margin-top: 36px;
        padding-top: 24px;
    }
    .single-post-main .related h3 { font-size: var(--lv-fs-24); }
    .single-post-main .related__grid { grid-template-columns: 1fr; }
    .single-post-main .cta-section {
        padding: 36px 22px;
        margin-top: 36px;
    }
    .single-post-main .cta-section h3 { font-size: var(--lv-fs-24); }
    .single-post-main .cta-section p { font-size: var(--lv-fs-14); }
    .single-post-main .article-rail {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    .single-post-main .rail-card {
        flex: 0 0 auto;       /* no grow, no shrink, basis from content */
        min-width: 0;
        width: 100%;
        height: auto;
    }
}

/* Hide rail newsletter card on tablet & mobile (≤1200px).
   Under-content rail duplicates .cta-section and the footer CTA. Share card stays. */
@media (max-width: 1200px) {
    .single-post-main .rail-newsletter {
        display: none;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .single-post-main *,
    .single-post-main *::before,
    .single-post-main *::after {
        transition: none !important;
        animation: none !important;
    }
}