*, *::before, *::after { box-sizing: border-box; }
    body { background: #FFFFFF; color: #264653; font-family: 'Outfit', sans-serif; margin: 0; line-height: 1.6; padding-top: 80px; }
    @media (min-width: 768px) { body { padding-top: 92px; } }

    /* Single centred reading column — no article-page sidebar. Premium
       publications (Stratechery, Atlantic, NYT, Lenny's, Substack) all
       ship articles as one focused column; the widgets that lived in a
       sidebar are pushed to end-of-post (Related → Course-finder →
       More-in-category → Newsletter) where they convert better against a
       reader who finished the article. 720px width hits the editorial
       sweet-spot for line length on Outfit at 18px body. */
    .blog-layout { max-width: 720px; margin: 0 auto; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 32px) clamp(48px, 6vw, 72px); }
    .article-wrap { min-width: 0; }
    .article-cover { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 20px; margin: 4px 0 36px; box-shadow: 6px 6px 0 rgba(38,70,83,0.18); }
    /* Hero meta-row above the title: small, all-caps, dignified. Pill carries
       the category accent; the rest is muted so the headline owns the page. */
    .article-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 22px; font-size: 11px; color: rgba(38,70,83,0.55); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
    .article-meta-row .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 100px; background: rgba(40,114,113,0.10); color: #287271; border: 1.5px solid rgba(40,114,113,0.30); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
    .article-meta-row .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(38,70,83,0.30); display: inline-block; }

    /* Hero typographic scale. Bigger, tighter, with more air below. The
       cover sits below the title (when present) so the hero typography is
       always the first thing read. */
    h1.article-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(34px, 6.5vw, 56px); line-height: 1.05; letter-spacing: -0.03em; color: #264653; margin: 0 0 20px; }
    p.article-dek { font-size: clamp(18px, 2.4vw, 22px); line-height: 1.5; color: rgba(38,70,83,0.76); margin: 0 0 32px; font-weight: 500; max-width: 60ch; }

    .article-disclosure { font-size: 12px; color: rgba(38,70,83,0.50); font-style: italic; margin: 0 0 28px; line-height: 1.55; }
    .article-disclosure::before { content: ""; display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 8a4 4 0 0 1 4-4h12l-4-4m4 4-4 4' stroke='%2364757a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }

    /* Byline row, sits right under the dek. Cleaner than burying author + read
       time in the pill row above the title. */
    .article-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 28px; padding: 16px 0 18px; border-top: 1px solid rgba(38,70,83,0.10); border-bottom: 1px solid rgba(38,70,83,0.10); font-size: 13px; color: rgba(38,70,83,0.72); font-weight: 500; }
    .article-byline .by-author { font-weight: 700; color: #264653; }
    .article-byline .by-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(38,70,83,0.30); display: inline-block; }

    /* Cover-image placeholder. Brand gradient, category accent, post title
       overlaid. Same aspect ratio as future real covers so the slot doesn't
       shift when a real image lands. No external file, no dependency. */
    .article-cover-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(28px, 6vw, 60px) clamp(20px, 4vw, 48px); color: #F4F4F2; overflow: hidden; position: relative; }
    .article-cover-placeholder::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(244,244,242,0.05) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; }
    .article-cover-placeholder .placeholder-mark { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244,244,242,0.62); margin-bottom: 18px; position: relative; }
    .article-cover-placeholder .placeholder-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(22px, 4.5vw, 38px); line-height: 1.15; letter-spacing: -0.02em; color: #F4F4F2; max-width: 88%; text-shadow: 2px 2px 0 rgba(38,70,83,0.30); position: relative; }

    /* Top-of-post lead-magnet slot. Sits between dek and body, distributes
       the CTAs (lead-magnet here, course/newsletter at the end) instead of
       stacking both at the bottom. Stub copy while the Free Guide is being
       written; flip to a real Brevo opt-in form once /free-guide/ ships and
       switchable-blog-subscribers is added to form-allowlist.json. */
    .post-lead-magnet { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 18px 22px; margin: 0 0 32px; background: #FAF3DC; border: 1.5px solid rgba(233,196,106,0.55); border-radius: 14px; }
    @media (max-width: 600px) { .post-lead-magnet { grid-template-columns: 1fr; gap: 12px; text-align: center; padding: 18px 18px 20px; } }
    .post-lead-magnet .lm-icon { width: 42px; height: 42px; border-radius: 10px; background: #E9C46A; display: flex; align-items: center; justify-content: center; color: #264653; font-weight: 800; font-size: 18px; flex-shrink: 0; }
    @media (max-width: 600px) { .post-lead-magnet .lm-icon { margin: 0 auto; } }
    .post-lead-magnet .lm-text { min-width: 0; }
    .post-lead-magnet .lm-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #92651c; margin: 0 0 3px; }
    .post-lead-magnet .lm-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 15.5px; color: #264653; margin: 0 0 2px; line-height: 1.25; }
    .post-lead-magnet .lm-sub { font-size: 13px; color: rgba(38,70,83,0.72); margin: 0; line-height: 1.45; }
    .post-lead-magnet .lm-cta { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 100px; background: #287271; color: #F4F4F2; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 12.5px; text-decoration: none; letter-spacing: 0.02em; white-space: nowrap; flex-shrink: 0; }
    .post-lead-magnet .lm-cta:hover { background: #246564; }
    .post-lead-magnet .lm-cta::after { content: '→'; font-size: 14px; }

    /* Reading-progress bar. Fixed under the nav, fills from left as the
       reader scrolls through the article body. Cheap to add, real lift on
       completion + share rate. JS updates the width on scroll; CSS handles
       the visual. */
    /* Reading-progress bar — pinned to the very top of the viewport above
       the nav (z-index 60 vs the nav's 50). 4px tall in a single coral
       brand tone reads as a clean magazine-style scroll indicator rather
       than the previous detached strip floating below the nav. */
    .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: transparent; z-index: 60; pointer-events: none; }
    .reading-progress-fill { height: 100%; width: 0%; background: #E76F51; transition: width 0.06s linear; box-shadow: 0 0 0 1px rgba(231,111,81,0.20); }

    /* In-post table of contents. Lives between the lead-magnet and the
       article body. Skim aid + Google sometimes surfaces TOC links as
       sub-results in SERPs. Two-level (H2 only) by design; three levels
       turns the TOC into noise. */
    .post-toc { background: rgba(244,244,242,0.65); border: 1.5px solid rgba(38,70,83,0.08); border-left: 4px solid #287271; border-radius: 10px; padding: 16px 20px 18px; margin: 0 0 32px; }
    .post-toc-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(38,70,83,0.55); margin: 0 0 10px; }
    .post-toc ol { list-style: decimal; padding-left: 22px; margin: 0; counter-reset: tocitem; }
    .post-toc li { margin: 5px 0; font-size: 14px; line-height: 1.45; }
    .post-toc a { color: #287271; text-decoration: none; font-weight: 600; border-bottom: 1px solid transparent; transition: border-color 0.12s; }
    .post-toc a:hover { border-bottom-color: #287271; }

    /* Share buttons. Two surfaces: under the meta-row at the top, and at
       the end of the article body. Server-rendered share URLs so the buttons
       work without JS for everything except Copy link. No third-party
       tracker scripts. */
    .post-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; padding: 8px 0 12px; border-top: 1px solid rgba(38,70,83,0.08); border-bottom: 1px solid rgba(38,70,83,0.08); }
    .post-share-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(38,70,83,0.45); margin-right: 4px; }
    .post-share-btn { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 100px; background: rgba(40,114,113,0.08); color: #287271; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 11.5px; text-decoration: none; border: 1.5px solid rgba(40,114,113,0.18); cursor: pointer; transition: background 0.12s, border-color 0.12s; letter-spacing: 0.01em; }
    .post-share-btn:hover { background: rgba(40,114,113,0.14); border-color: rgba(40,114,113,0.32); }
    .post-share-btn.is-copied { background: #287271; color: #F4F4F2; border-color: #287271; }
    .post-share-end { margin: 36px 0 0; }

    /* About-Switchable trust card. Sits between article body and related-
       posts. First-time-visitor lands on a blog post not knowing who we
       are. One small block (logo, short paragraph, link) builds enough trust
       for the course-finder CTA to land. */
    .post-about { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 8px 0 0; padding: 24px 26px; background: #FAF3DC; border: 1.5px solid rgba(233,196,106,0.45); border-radius: 16px; }
    .post-about-logo { display: inline-block; height: 28px; }
    .post-about-logo img { height: 28px; width: auto; display: block; }
    .post-about-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #92651c; margin: 0; }
    .post-about p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(38,70,83,0.82); }
    .post-about p strong { color: #264653; font-weight: 700; }
    .post-about a { color: #287271; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(40,114,113,0.35); text-underline-offset: 3px; }

    /* ── SIDEBAR ─────────────────────────────────────────────────────────
       Right-column widgets. Whole sidebar sticks once article scrolls past
       (align-self:start + position:sticky on the aside element). Individual
       widgets stack inside. On mobile (<980px) sidebar drops to a single
       column below the article and loses the sticky behaviour. */
    /* Sidebar scrolls naturally with the page. No sticky — the previous
       sticky-top trick froze the sidebar at the top of the viewport, which
       on long posts meant the sidebar widgets stayed pinned and unreachable
       until you'd scrolled past the entire article. Natural flow lets every
       widget surface as the reader works down the page. */
    .post-sidebar { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
    /* Compact search widget — pagefind UI hosted inside the sidebar card. */
    .sidebar-widget-search .pagefind-ui { --pagefind-ui-primary: #287271; --pagefind-ui-text: #264653; --pagefind-ui-background: #FFFFFF; --pagefind-ui-border: rgba(38,70,83,0.20); --pagefind-ui-tag: rgba(40,114,113,0.10); --pagefind-ui-border-width: 1.5px; --pagefind-ui-border-radius: 100px; --pagefind-ui-font: 'Outfit', sans-serif; }
    .sidebar-widget-search .pagefind-ui__search-input { background: #FFFFFF; padding: 10px 14px; font-size: 13px; font-weight: 500; width: 100%; }
    .sidebar-widget-search .pagefind-ui__search-input::placeholder { color: rgba(38,70,83,0.50); }
    .sidebar-widget-search .pagefind-ui__drawer { margin-top: 12px; background: transparent; padding: 0; box-shadow: none; max-height: 50vh; overflow-y: auto; }
    .sidebar-widget-search .pagefind-ui__result { padding: 10px 0; border-bottom: 1px solid rgba(38,70,83,0.06); }
    .sidebar-widget-search .pagefind-ui__result:last-child { border-bottom: none; }
    .sidebar-widget-search .pagefind-ui__result-title { font-size: 13px; font-weight: 700; line-height: 1.3; margin: 0 0 4px; }
    .sidebar-widget-search .pagefind-ui__result-title a { color: #264653; }
    .sidebar-widget-search .pagefind-ui__result-title a:hover { color: #287271; }
    .sidebar-widget-search .pagefind-ui__result-excerpt { color: rgba(38,70,83,0.72); font-size: 12px; line-height: 1.5; }
    .sidebar-widget-search .pagefind-ui__result mark { background: rgba(233,196,106,0.40); color: #264653; padding: 0 2px; border-radius: 2px; }
    .sidebar-widget-search .pagefind-ui__message { font-size: 12px; color: rgba(38,70,83,0.55); padding: 6px 0 0; }

    .sidebar-widget { background: #FFFFFF; border: 1.5px solid rgba(38,70,83,0.12); border-radius: 14px; padding: 20px 22px; box-shadow: 4px 4px 0 rgba(38,70,83,0.12); }
    .sidebar-widget h3 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 15px; margin: 0 0 12px; color: #264653; letter-spacing: -0.01em; }
    .sidebar-widget-newsletter { background: #FAF3DC; border-color: rgba(233,196,106,0.55); }
    .sw-cta { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 100px; background: #287271; color: #F4F4F2; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 12.5px; text-decoration: none; letter-spacing: 0.02em; }
    .sw-cta::after { content: '→'; font-size: 13px; }
    .sw-cta:hover { background: #246564; }
    .sw-cta-secondary { background: rgba(40,114,113,0.10); color: #287271; border: 1.5px solid rgba(40,114,113,0.25); }
    .sw-cta-secondary:hover { background: rgba(40,114,113,0.18); }

    .sidebar-widget-readnext .sw-rn { list-style: none; padding: 0; margin: 0; counter-reset: rn; }
    .sidebar-widget-readnext .sw-rn li { padding: 10px 0; border-bottom: 1px solid rgba(38,70,83,0.06); counter-increment: rn; }
    .sidebar-widget-readnext .sw-rn li:last-child { border-bottom: none; padding-bottom: 0; }
    .sidebar-widget-readnext .sw-rn a { display: block; color: #264653; text-decoration: none; }
    .sidebar-widget-readnext .sw-rn-cat { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; }
    .sidebar-widget-readnext .sw-rn-title { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #264653; }
    .sidebar-widget-readnext .sw-rn a:hover .sw-rn-title { color: #287271; }

    .sidebar-widget-newsletter p { font-size: 13px; color: rgba(38,70,83,0.74); margin: 0 0 14px; line-height: 1.5; }

    .sidebar-widget-categories .sw-cats { list-style: none; padding: 0; margin: 0; }
    .sidebar-widget-categories .sw-cats li { padding: 0; margin: 0 0 6px; }
    .sidebar-widget-categories .sw-cats a { display: block; padding: 8px 12px; border-radius: 8px; background: #F4F4F2; border-left: 3px solid; font-size: 13.5px; font-weight: 600; color: #264653; text-decoration: none; transition: background 0.12s; }
    .sidebar-widget-categories .sw-cats a { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; background: #F4F4F2; border-left: 3px solid; font-size: 13.5px; font-weight: 600; color: #264653; text-decoration: none; transition: background 0.12s; }
    .sidebar-widget-categories .sw-cats a:hover { background: rgba(40,114,113,0.08); }
    .sw-cat-count { font-size: 11px; font-weight: 700; color: rgba(38,70,83,0.45); }

    /* Tag cloud (sidebar widget). */
    .sidebar-widget-tags .sw-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
    .sw-tag { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 100px; background: rgba(40,114,113,0.08); color: #287271; font-size: 11.5px; font-weight: 700; text-decoration: none; border: 1.5px solid rgba(40,114,113,0.18); transition: background 0.12s; }
    .sw-tag:hover { background: rgba(40,114,113,0.16); }
    .sw-tag-count { font-size: 10px; font-weight: 700; color: rgba(40,114,113,0.55); }

    /* Newsletter widget (in-sidebar form, posts to switchable-blog-subscribers). */
    .sidebar-widget-newsletter p { font-size: 13px; color: rgba(38,70,83,0.74); margin: 0 0 12px; line-height: 1.5; }
    .sidebar-widget-newsletter .sw-news-email { width: 100%; padding: 10px 14px; border-radius: 100px; border: 1.5px solid rgba(38,70,83,0.20); font-family: 'Outfit', sans-serif; font-size: 13px; background: #FFFFFF; color: #264653; margin: 0 0 10px; }
    .sidebar-widget-newsletter .sw-news-consent { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; color: rgba(38,70,83,0.72); line-height: 1.5; margin-bottom: 6px; }
    .sidebar-widget-newsletter .sw-news-consent input { flex-shrink: 0; margin-top: 2px; accent-color: #287271; }
    .sidebar-widget-newsletter .sw-news-consent a { color: #287271; text-decoration: underline; }
    .sidebar-widget-newsletter button.sw-cta { width: 100%; justify-content: center; margin-top: 6px; }

    /* FAQ block (via {{faq}} shortcode). Each Q is a <details>/<summary>
       chevron so the page is scan-friendly, and the FAQPage JSON-LD lets
       Google + AEO crawlers surface expanded SERP results. */
    .post-faq { margin: 36px 0; padding: 8px 0; border-top: 1.5px solid rgba(38,70,83,0.10); border-bottom: 1.5px solid rgba(38,70,83,0.10); }
    .post-faq-item { padding: 14px 0; border-bottom: 1px solid rgba(38,70,83,0.06); }
    .post-faq-item:last-of-type { border-bottom: none; padding-bottom: 4px; }
    .post-faq-q { cursor: pointer; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.4; color: #264653; list-style: none; padding-right: 28px; position: relative; }
    .post-faq-q::-webkit-details-marker { display: none; }
    .post-faq-q::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: #287271; line-height: 1; transition: transform 0.15s; }
    .post-faq-item[open] .post-faq-q::after { content: "−"; }
    .post-faq-a { margin-top: 10px; font-size: 16px; line-height: 1.65; color: #2D434D; }
    .post-faq-a p { margin: 0 0 10px; }
    .post-faq-a p:last-child { margin-bottom: 0; }

    /* Pull-quote (via {{pull-quote: text}} shortcode). Editorial treatment:
       no fill, brand-coral rules above and below, oversized opening quote in
       gold. Breaks visual rhythm without competing with the body for colour. */
    .post-pull-quote { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: clamp(24px, 3.8vw, 32px); line-height: 1.25; letter-spacing: -0.02em; color: #264653; margin: 48px auto; padding: 32px 0 28px; max-width: 92%; text-align: center; border-top: 2px solid rgba(231,111,81,0.30); border-bottom: 2px solid rgba(231,111,81,0.30); position: relative; }
    .post-pull-quote::before { content: "\201C"; display: block; font-size: 72px; line-height: 1; color: #E9C46A; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; margin: -8px 0 8px; opacity: 0.85; }

    /* Inline {{recommended-next}} block. Dropped mid-article after a section
       break to surface the natural next read. Cheap mid-scroll engagement. */
    .post-recommended-next { margin: 36px 0; padding: 0; }
    .post-recommended-next .rn-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(38,70,83,0.55); margin: 0 0 10px; }
    .post-recommended-next .rn-card { display: block; padding: 22px 24px; background: #FFFFFF; border: 1.5px solid rgba(38,70,83,0.10); border-radius: 14px; text-decoration: none; color: inherit; box-shadow: 4px 4px 0 rgba(38,70,83,0.10); transition: transform 0.14s, box-shadow 0.14s; }
    .post-recommended-next .rn-card:hover { transform: translateY(-2px); box-shadow: 6px 6px 0 rgba(38,70,83,0.18); }
    .post-recommended-next .rn-cat { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 6px; display: block; }
    .post-recommended-next h3 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 19px; line-height: 1.25; margin: 0 0 8px; color: #264653; letter-spacing: -0.015em; }
    .post-recommended-next p { font-size: 14px; color: rgba(38,70,83,0.74); margin: 0 0 10px; line-height: 1.5; }
    .post-recommended-next .rn-cta { font-size: 12.5px; font-weight: 800; color: #E76F51; letter-spacing: 0.02em; }

    /* Tag pills under the article meta-row. */
    .post-tags-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; }
    .post-tag-pill { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 100px; background: rgba(40,114,113,0.08); color: #287271; font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700; text-decoration: none; border: 1.5px solid rgba(40,114,113,0.18); letter-spacing: 0.01em; }
    .post-tag-pill:hover { background: rgba(40,114,113,0.16); }

    /* ── BOTTOM OF POST ────────────────────────────────────────────────
       Full-width sections under the article + sidebar. Same maximum width
       as the blog-layout grid so it visually aligns with the columns above.
       Order is: lead-magnet → related (via tags) → course-finder →
       more-in-category. Single source per widget in the build script. */
    .post-bottom { max-width: 1040px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) clamp(20px, 4vw, 32px) clamp(72px, 9vw, 110px); display: flex; flex-direction: column; gap: clamp(40px, 6vw, 64px); }

    .post-lead-magnet-full { background: #FAF3DC; border: 1.5px solid rgba(233,196,106,0.55); border-radius: 18px; padding: clamp(28px, 4vw, 44px); text-align: center; }
    .post-lead-magnet-full .lm-full-mark { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #92651c; margin: 0 0 12px; }
    .post-lead-magnet-full h2 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(24px, 4vw, 32px); margin: 0 0 12px; color: #264653; letter-spacing: -0.015em; }
    .post-lead-magnet-full p { font-size: 15px; color: rgba(38,70,83,0.78); margin: 0 auto 22px; max-width: 580px; line-height: 1.55; }
    .post-lead-magnet-full form { max-width: 460px; margin: 0 auto; }
    .post-lead-magnet-full .sw-news-email { width: 100%; padding: 12px 16px; border-radius: 100px; border: 1.5px solid rgba(38,70,83,0.18); font-family: 'Outfit', sans-serif; font-size: 14px; background: #FFFFFF; color: #264653; margin: 0 0 10px; }
    .post-lead-magnet-full .sw-news-consent { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: rgba(38,70,83,0.72); line-height: 1.5; margin-bottom: 6px; text-align: left; }
    .post-lead-magnet-full .sw-news-consent input { flex-shrink: 0; margin-top: 2px; accent-color: #287271; }
    .post-lead-magnet-full .sw-news-consent a { color: #287271; text-decoration: underline; }
    .post-lead-magnet-full button.sw-cta { width: 100%; justify-content: center; margin-top: 8px; padding: 12px 22px; }

    .post-coursefinder-full { background: linear-gradient(135deg, #287271 0%, #2A9D8F 100%); color: #F4F4F2; border-radius: 18px; padding: clamp(28px, 4vw, 44px); text-align: center; }
    .post-coursefinder-full h2 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(22px, 3.6vw, 30px); margin: 0 0 12px; color: #F4F4F2; letter-spacing: -0.015em; }
    .post-coursefinder-full p { font-size: 15px; color: rgba(244,244,242,0.86); margin: 0 auto 22px; max-width: 540px; line-height: 1.55; }
    .sw-cta-large { background: #E9C46A; color: #264653; padding: 12px 26px; font-size: 14px; box-shadow: 0 4px 14px rgba(38,70,83,0.18); }
    .sw-cta-large:hover { background: #f0cd7d; transform: translateY(-1px); }

    .post-bottom-section h2.post-bottom-heading { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(22px, 3.4vw, 28px); margin: 0 0 6px; color: #264653; letter-spacing: -0.015em; }
    .post-bottom-section p.post-bottom-sub { font-size: 14px; color: rgba(38,70,83,0.62); margin: 0 0 22px; }
    .post-bottom-section .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
    .post-bottom-section .post-card { background: #FFFFFF; border-radius: 16px; border: 1.5px solid rgba(38,70,83,0.08); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform 0.14s, box-shadow 0.14s; box-shadow: 4px 4px 0 rgba(38,70,83,0.08); }
    .post-bottom-section .post-card:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 rgba(38,70,83,0.16); }
    .post-bottom-section .post-card .cover { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: rgba(38,70,83,0.06); display: block; }
    .post-bottom-section .post-card .body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }
    .post-bottom-section .post-card .pill { display: inline-block; align-self: flex-start; padding: 4px 10px; border-radius: 100px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; }
    .post-bottom-section .post-card h2 { font-weight: 800; font-size: 17px; line-height: 1.25; letter-spacing: -0.015em; margin: 0 0 8px; color: #264653; }
    .post-bottom-section .post-card .dek { font-size: 13.5px; color: rgba(38,70,83,0.72); line-height: 1.5; margin: 0 0 14px; flex: 1; }
    .post-bottom-section .post-card .meta { font-size: 12px; color: rgba(38,70,83,0.55); font-weight: 600; }

    /* Drop cap on the article's first paragraph. Scoped to prose paragraphs
       only — `:has()` excludes paragraphs whose only child is a shortcode-
       rendered block (course card, course-finder banner, recommended-next,
       pull quote, image) which would otherwise render a giant coral letter
       on top of a UI card. */
    article.article-body > p:first-of-type:not(:has(.post-course-card, .post-course-finder, .post-recommended-next, .post-pull-quote, img, aside))::first-letter { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(58px, 9vw, 82px); float: left; line-height: 0.85; padding: 10px 14px 0 0; color: #E76F51; letter-spacing: -0.04em; }

    /* H2/H3 type scale tuned for the longer-form, more editorial feel. H2
       sits with generous top margin so each section reads as a clean break.
       H3 carries an underline rule for a magazine-style subsection cue. */
    article.article-body h2 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(26px, 4vw, 36px); margin: 56px 0 18px; line-height: 1.15; letter-spacing: -0.025em; color: #264653; }
    article.article-body h2:first-child { margin-top: 0; }
    article.article-body h3 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: clamp(19px, 2.7vw, 23px); margin: 36px 0 12px; line-height: 1.3; letter-spacing: -0.01em; color: #287271; padding-bottom: 8px; border-bottom: 1px solid rgba(40,114,113,0.18); }
    article.article-body h4 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 17px; margin: 28px 0 10px; line-height: 1.35; color: #264653; }
    /* Body copy — bigger, looser, more readable. The font is Outfit per
       brand; the premium feel comes from scale + line-height + paragraph
       rhythm, not a serif. */
    article.article-body p { font-size: 18px; line-height: 1.75; margin: 0 0 22px; color: #2D434D; }
    article.article-body p:last-child { margin-bottom: 0; }
    article.article-body a { color: #287271; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(40,114,113,0.35); text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: text-decoration-color 0.12s; }
    article.article-body a:hover { text-decoration-color: #287271; }
    article.article-body ul, article.article-body ol { margin: 0 0 24px; padding-left: 26px; }
    article.article-body li { margin-bottom: 10px; font-size: 18px; line-height: 1.7; color: #2D434D; padding-left: 4px; }
    article.article-body li::marker { color: #E76F51; font-weight: 700; }
    article.article-body strong { font-weight: 700; color: #264653; }
    article.article-body em { font-style: italic; color: #264653; }
    article.article-body blockquote { margin: 32px 0; padding: 20px 26px 20px 28px; border-left: 4px solid #E9C46A; background: rgba(233,196,106,0.08); border-radius: 4px; font-style: italic; color: #264653; font-size: 18px; line-height: 1.65; }
    article.article-body blockquote p { font-size: 18px; line-height: 1.65; margin: 0 0 10px; color: #264653; }
    article.article-body blockquote p:last-child { margin-bottom: 0; }
    article.article-body img { max-width: 100%; height: auto; border-radius: 14px; margin: 32px 0; box-shadow: 4px 4px 0 rgba(38,70,83,0.10); }
    /* Decorative section rule. Three brand dots, centered, more refined than
       a flat line. Scoped so author-written rules render as soft dividers. */
    article.article-body hr { border: none; height: 24px; margin: 40px 0; background: none; text-align: center; position: relative; }
    article.article-body hr::before { content: "\2022   \2022   \2022"; font-size: 14px; letter-spacing: 0.4em; color: rgba(40,114,113,0.40); line-height: 24px; }

    /* Shortcode-rendered course card */
    .post-course-card { display: block; margin: 28px 0; padding: 22px; background: #FFFFFF; border-radius: 16px; border: 1.5px solid rgba(38,70,83,0.08); box-shadow: 4px 4px 0 rgba(38,70,83,0.10); text-decoration: none; color: inherit; transition: transform 0.12s, box-shadow 0.12s; }
    .post-course-card:hover { transform: translateY(-2px); box-shadow: 6px 6px 0 rgba(38,70,83,0.16); }
    .post-course-card .eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #287271; margin-bottom: 8px; }
    .post-course-card .ccc-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 21px; color: #264653; margin: 0 0 6px; line-height: 1.2; }
    .post-course-card .ccc-meta { font-size: 13.5px; color: rgba(38,70,83,0.72); margin: 0 0 10px; }
    .post-course-card .ccc-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #E76F51; letter-spacing: 0.04em; }
    .post-course-card .ccc-cta::after { content: '→'; font-size: 16px; }

    /* Shortcode-rendered course-finder CTA */
    .post-course-finder { background: linear-gradient(135deg, #287271, #2A9D8F); color: #F4F4F2; padding: 28px 24px; border-radius: 18px; text-align: center; margin: 36px 0; }
    .post-course-finder h3 { color: #F4F4F2; font-weight: 800; font-size: 22px; margin: 0 0 8px; letter-spacing: -0.01em; }
    .post-course-finder p { color: rgba(244,244,242,0.88); font-size: 15px; margin: 0 0 18px; line-height: 1.5; }
    .post-course-finder a.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 100px; background: #E9C46A; color: #264653; font-weight: 800; font-size: 14px; text-decoration: none; box-shadow: 0 4px 14px rgba(38,70,83,0.18); transition: transform 0.12s; }
    .post-course-finder a.btn:hover { transform: translateY(-1px); }

    /* Shortcode-rendered newsletter signup */
    .post-newsletter { background: #FAF3DC; border: 2px solid rgba(233,196,106,0.50); border-radius: 16px; padding: 22px 24px; margin: 32px 0; }
    .post-newsletter h3 { font-weight: 800; font-size: 19px; margin: 0 0 6px; color: #264653; }
    .post-newsletter p { font-size: 14.5px; color: rgba(38,70,83,0.78); margin: 0 0 14px; line-height: 1.5; }
    .post-newsletter form { display: flex; gap: 10px; flex-wrap: wrap; }
    .post-newsletter input[type="email"] { flex: 1 1 220px; padding: 11px 14px; border-radius: 100px; border: 1.5px solid rgba(38,70,83,0.18); font-family: 'Outfit', sans-serif; font-size: 14px; background: #FFFFFF; }
    .post-newsletter button { padding: 11px 22px; border-radius: 100px; background: #287271; color: #F4F4F2; border: none; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 13.5px; cursor: pointer; letter-spacing: 0.02em; }
    .post-newsletter button:hover { background: #246564; }

    /* Related posts list */
    .post-related { margin: 40px 0; padding: 22px 24px; background: #FFFFFF; border-radius: 14px; border: 1.5px solid rgba(38,70,83,0.06); }
    .post-related h3 { font-weight: 800; font-size: 17px; margin: 0 0 14px; color: #264653; }
    .post-related ul { list-style: none; padding: 0; margin: 0; }
    .post-related li { padding: 8px 0; border-bottom: 1px solid rgba(38,70,83,0.06); }
    .post-related li:last-child { border-bottom: none; }
    .post-related a { color: #287271; font-weight: 600; text-decoration: none; font-size: 14.5px; }
    .post-related a:hover { text-decoration: underline; }