/* ============================================================
 * Blog — index + single article
 * Mobile-first. Readability-optimized typography for articles.
 * Single-column centered layout (no left-side TOC).
 * ============================================================ */

/* ===== INDEX HERO ===== */
.bi-hero {
    position: relative;
    padding: calc(var(--header-h, 70px) + 44px) 0 48px;
    overflow: hidden;
    background:
        radial-gradient(60% 50% at 80% 0%, rgba(235,63,67,0.12) 0%, transparent 60%),
        radial-gradient(45% 50% at 0% 100%, rgba(124,92,255,0.10) 0%, transparent 65%),
        linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-soft) 100%);
}
@media (min-width: 768px) { .bi-hero { padding: calc(var(--header-h, 70px) + 60px) 0 64px; } }
@media (min-width: 992px) { .bi-hero { padding: calc(var(--header-h, 70px) + 80px) 0 90px; } }
.bi-hero::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(235,63,67,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(235,63,67,0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 60% 60% at 50% 30%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 30%, #000 30%, transparent 80%);
    pointer-events: none;
}
.bi-hero-shell {
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 0 var(--shell-pad);
    position: relative; z-index: 2;
    text-align: center;
}
.bi-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 16px;
    background: rgba(235,63,67,0.10);
    color: var(--c-primary);
    border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    margin-bottom: 22px;
}
.bi-eyebrow .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-primary);
    box-shadow: 0 0 0 0 rgba(235,63,67,0.55);
    animation: liveDot 1.6s ease-in-out infinite;
}
@keyframes liveDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(235,63,67,0.55); }
    50%      { box-shadow: 0 0 0 8px rgba(235,63,67,0); }
}
.bi-hero h1 {
    font-size: clamp(2rem, 1.4rem + 3.4vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    max-width: 860px;
    margin: 0 auto 16px;
}
.bi-hero p {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
    color: var(--c-ink-soft);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.65;
}

/* ===== INDEX SECTION ===== */
.bi-section { padding: 48px 0; }
@media (min-width: 768px) { .bi-section { padding: 72px 0; } }
@media (min-width: 992px) { .bi-section { padding: 96px 0; } }
.bi-shell { max-width: var(--shell-max); margin: 0 auto; padding: 0 var(--shell-pad); }

/* ===== INDEX CARD GRID ===== */
.bi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}
@media (min-width: 600px) { .bi-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 992px) { .bi-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

/* Featured card spans 2 cols at tablet+ */
@media (min-width: 992px) {
    .bi-grid > .bi-card.is-feature { grid-column: span 2; }
}

.bi-card {
    --accent: var(--c-primary);
    --accent-soft: rgba(235,63,67,0.10);
    position: relative;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
    transition: transform 360ms var(--ease-out), box-shadow 360ms var(--ease), border-color 360ms var(--ease);
}
.bi-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}
.bi-card[data-accent="amber"]  { --accent: var(--c-amber);  --accent-soft: rgba(246,169,62,0.14); }
.bi-card[data-accent="violet"] { --accent: var(--c-violet); --accent-soft: rgba(124,92,255,0.14); }
.bi-card[data-accent="sky"]    { --accent: var(--c-sky);    --accent-soft: rgba(43,184,255,0.14); }
.bi-card[data-accent="rose"]   { --accent: var(--c-rose);   --accent-soft: rgba(242,94,156,0.14); }
.bi-card[data-accent="mint"]   { --accent: var(--c-mint);   --accent-soft: rgba(40,200,166,0.14); }
.bi-card[data-accent="indigo"] { --accent: #5b67ff;         --accent-soft: rgba(91,103,255,0.14); }

.bi-card-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 50%, #1a1a2e) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    overflow: hidden;
}
.bi-card-thumb::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(50% 60% at 30% 30%, rgba(255,255,255,0.22) 0%, transparent 60%),
        radial-gradient(50% 60% at 80% 80%, rgba(0,0,0,0.22) 0%, transparent 60%);
}
.bi-card-thumb::after {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.45;
}
.bi-card-thumb-icon {
    position: relative; z-index: 1;
    font-size: clamp(2.8rem, 2rem + 2vw, 4.2rem);
    opacity: 0.85;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.18));
    transition: transform 360ms var(--ease-out);
}
.bi-card:hover .bi-card-thumb-icon { transform: scale(1.06) rotate(-3deg); }
.bi-card-tag {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 2;
    padding: 5px 12px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(6px);
    color: var(--accent);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}
.bi-card.is-feature .bi-card-thumb { aspect-ratio: 16 / 9; }
@media (min-width: 992px) {
    .bi-card.is-feature .bi-card-thumb { aspect-ratio: 21 / 9; }
    .bi-card.is-feature .bi-card-thumb-icon { font-size: 5.4rem; }
}

.bi-card-body {
    padding: 22px 22px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media (min-width: 600px) { .bi-card-body { padding: 26px 26px 28px; } }
.bi-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12.5px;
    color: var(--c-ink-soft);
    font-weight: 500;
}
.bi-card-meta i { color: var(--c-primary); margin-right: 5px; }
.bi-card-body h3 {
    font-size: 1.18rem;
    line-height: 1.3;
    letter-spacing: -0.015em;
    margin: 0;
}
@media (min-width: 600px) { .bi-card-body h3 { font-size: 1.25rem; } }
.bi-card.is-feature .bi-card-body h3 { font-size: 1.35rem; }
@media (min-width: 768px) { .bi-card.is-feature .bi-card-body h3 { font-size: 1.55rem; } }
.bi-card-body p {
    color: var(--c-ink-soft);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
    flex: 1;
}
.bi-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--c-line);
}
.bi-author {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12.5px; color: var(--c-ink-soft);
}
.bi-author .av {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, #ff7a5e) 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 700; font-family: var(--font-display);
    flex-shrink: 0;
}
.bi-card-arrow {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--accent);
    font-weight: 700;
    font-size: 13px;
    transition: gap 200ms var(--ease);
}
.bi-card:hover .bi-card-arrow { gap: 10px; }

/* ===== NEWSLETTER BAND (index) ===== */
.bi-newsletter {
    margin-top: 56px;
    padding: 40px 28px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--c-ink) 0%, #2a1f3d 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    text-align: center;
}
@media (min-width: 768px) { .bi-newsletter { padding: 56px 40px; } }
.bi-newsletter::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(60% 80% at 100% 0%, rgba(235,63,67,0.30) 0%, transparent 70%);
    pointer-events: none;
}
.bi-newsletter > * { position: relative; z-index: 1; }
.bi-newsletter h3 { color: #fff; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -0.02em; margin-bottom: 10px; }
.bi-newsletter p { color: rgba(255,255,255,0.82); font-size: 15px; margin-bottom: 24px; max-width: 540px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.bi-newsletter form {
    display: flex;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}
.bi-newsletter input {
    flex: 1;
    min-width: 220px;
    padding: 14px 18px;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,0.10);
    color: #fff;
    font-size: 14.5px;
    font-family: var(--font-body);
}
.bi-newsletter input::placeholder { color: rgba(255,255,255,0.55); }
.bi-newsletter input:focus { outline: none; background: rgba(255,255,255,0.18); box-shadow: 0 0 0 3px rgba(255,255,255,0.20); }
.bi-newsletter button {
    padding: 13px 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--c-primary) 0%, #ff7a5e 100%);
    color: #fff;
    font-weight: 700;
    font-family: var(--font-display);
    font-size: 14.5px;
    border: none;
    cursor: pointer;
    transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
    box-shadow: 0 12px 28px rgba(235,63,67,0.30);
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 8px;
}
.bi-newsletter button:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(235,63,67,0.38); }


/* ============================================================
 * SINGLE ARTICLE — readability-tuned, single-column, centered
 * Overrides .article-* base styles from editorial.css
 * ============================================================ */

/* Article hero (header band) */
.bp-header {
    padding: calc(var(--header-h, 70px) + 36px) 0 28px;
    background: var(--c-bg-soft);
    text-align: center;
}
@media (min-width: 768px) { .bp-header { padding: calc(var(--header-h, 70px) + 56px) 0 36px; } }
.bp-header-shell {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 var(--shell-pad);
}
.bp-tag {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 18px;
    background: var(--bp-tag-bg, rgba(235,63,67,0.14));
    color: var(--bp-tag-c, var(--c-primary));
}
.bp-tag[data-accent="amber"]  { --bp-tag-bg: rgba(246,169,62,0.14); --bp-tag-c: var(--c-amber); }
.bp-tag[data-accent="violet"] { --bp-tag-bg: rgba(124,92,255,0.14); --bp-tag-c: var(--c-violet); }
.bp-tag[data-accent="sky"]    { --bp-tag-bg: rgba(43,184,255,0.14); --bp-tag-c: var(--c-sky); }
.bp-tag[data-accent="rose"]   { --bp-tag-bg: rgba(242,94,156,0.14); --bp-tag-c: var(--c-rose); }
.bp-tag[data-accent="mint"]   { --bp-tag-bg: rgba(40,200,166,0.14); --bp-tag-c: var(--c-mint); }
.bp-tag[data-accent="indigo"] { --bp-tag-bg: rgba(91,103,255,0.14); --bp-tag-c: #5b67ff; }

.bp-header h1 {
    font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin-bottom: 18px;
    color: var(--c-ink);
}
.bp-lede {
    font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
    color: var(--c-ink-soft);
    line-height: 1.65;
    margin: 0 auto 24px;
    max-width: 680px;
}
.bp-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 13px;
    color: var(--c-ink-soft);
}
.bp-author {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 14px 6px 6px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 999px;
}
.bp-author .av {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-primary) 0%, #ff7a5e 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
}
.bp-author strong { color: var(--c-ink); font-weight: 700; }
.bp-meta i { color: var(--c-primary); margin-right: 6px; }
.bp-meta .dot { color: var(--c-muted); opacity: 0.6; }

/* Banner / centered visual */
.bp-banner {
    max-width: 980px;
    margin: 28px auto 0;
    padding: 0 var(--shell-pad);
}
.bp-banner-inner {
    aspect-ratio: 16 / 7;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--bp-banner-c, var(--c-primary)) 0%, color-mix(in srgb, var(--bp-banner-c, var(--c-primary)) 40%, #1a1a2e) 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 30px 80px rgba(26,26,46,0.14);
}
.bp-banner-inner::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(50% 60% at 30% 30%, rgba(255,255,255,0.18) 0%, transparent 60%),
        radial-gradient(40% 50% at 80% 80%, rgba(0,0,0,0.30) 0%, transparent 60%);
}
.bp-banner-inner::after {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
}
.bp-banner-inner i {
    position: relative; z-index: 1;
    font-size: clamp(3rem, 2rem + 3vw, 5.4rem);
    opacity: 0.78;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.25));
}
.bp-banner[data-accent="amber"]  .bp-banner-inner { --bp-banner-c: var(--c-amber); }
.bp-banner[data-accent="violet"] .bp-banner-inner { --bp-banner-c: var(--c-violet); }
.bp-banner[data-accent="sky"]    .bp-banner-inner { --bp-banner-c: var(--c-sky); }
.bp-banner[data-accent="rose"]   .bp-banner-inner { --bp-banner-c: var(--c-rose); }
.bp-banner[data-accent="mint"]   .bp-banner-inner { --bp-banner-c: var(--c-mint); }
.bp-banner[data-accent="indigo"] .bp-banner-inner { --bp-banner-c: #5b67ff; }

/* Reading-progress bar (top) */
.read-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--c-primary) 0%, #ff7a5e 100%);
    z-index: 100;
    transition: width 80ms linear;
}

/* ==========================================================
   The article body — readability tuned
   ========================================================== */
.bp-section { padding: 36px 0 64px; }
@media (min-width: 768px) { .bp-section { padding: 56px 0 96px; } }
.bp-shell {
    max-width: 760px;            /* optimal ~65–75 chars/line at 18px */
    margin: 0 auto;
    padding: 0 var(--shell-pad);
}

.bp-body {
    font-size: 18px;
    line-height: 1.78;
    color: var(--c-ink);
    letter-spacing: 0.005em;
    word-spacing: 0.02em;
    text-align: left;            /* readability rule: never justify long-form */
    hyphens: manual;
}
@media (min-width: 768px) { .bp-body { font-size: 19px; line-height: 1.8; } }

.bp-body > * + * { margin-top: 1.4em; }

.bp-body > p:first-child::first-letter {
    /* Subtle drop cap on the first paragraph for editorial feel */
    font-family: var(--font-display);
    font-size: 3.4em;
    font-weight: 700;
    float: left;
    line-height: 0.88;
    padding: 6px 12px 0 0;
    color: var(--c-primary);
    letter-spacing: -0.02em;
}

.bp-body p {
    color: var(--c-ink);
    margin: 0;
}
.bp-body p + p { margin-top: 1.3em; }

.bp-body strong { color: var(--c-ink); font-weight: 700; }
.bp-body em { color: var(--c-ink); font-style: italic; }

/* Headings inside article */
.bp-body h2 {
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.9rem);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-top: 2.4em;
    margin-bottom: 0.4em;
    color: var(--c-ink);
    scroll-margin-top: 100px;
}
.bp-body h3 {
    font-size: clamp(1.18rem, 1rem + 0.6vw, 1.4rem);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-top: 1.8em;
    margin-bottom: 0.3em;
    color: var(--c-ink);
    scroll-margin-top: 100px;
}
.bp-body h2 + p,
.bp-body h3 + p { margin-top: 0.6em; }

/* Links: high-contrast, accessible, easy to spot */
.bp-body a {
    color: var(--c-primary);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    font-weight: 500;
    transition: color 200ms var(--ease), background 200ms var(--ease);
    border-radius: 2px;
}
.bp-body a:hover { color: var(--c-primary-dark); background: var(--c-primary-50); }

/* Lists: comfortable spacing, primary-color bullets/numbers */
.bp-body ul, .bp-body ol {
    padding-left: 1.4em;
    margin: 1.2em 0;
    display: flex;
    flex-direction: column;
    gap: 0.55em;
}
.bp-body ul { list-style: none; padding-left: 0; }
.bp-body ul li {
    position: relative;
    padding-left: 1.5em;
}
.bp-body ul li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.65em;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c-primary);
}
.bp-body ol { list-style: decimal; }
.bp-body ol li::marker { color: var(--c-primary); font-weight: 700; }
.bp-body li { line-height: 1.7; }
.bp-body li + li { margin-top: 0.1em; }

/* Pull quote — centered */
.bp-quote {
    margin: 2.2em -8px;
    padding: 30px 30px 30px 36px;
    border-left: 4px solid var(--c-primary);
    background: linear-gradient(135deg, rgba(235,63,67,0.06) 0%, transparent 100%);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-family: var(--font-display);
    font-size: clamp(1.18rem, 0.95rem + 0.6vw, 1.45rem);
    font-weight: 600;
    line-height: 1.5;
    color: var(--c-ink);
    letter-spacing: -0.005em;
    position: relative;
}
.bp-quote::before {
    content: "\201C";
    font-family: Georgia, serif;
    font-size: 4.2rem;
    position: absolute;
    top: -16px;
    left: 10px;
    color: var(--c-primary);
    opacity: 0.16;
    line-height: 1;
}

/* Callout */
.bp-callout {
    margin: 2.2em 0;
    padding: 22px 24px;
    background: var(--c-bg-soft);
    border: 1px solid var(--c-line);
    border-left: 4px solid var(--c-primary);
    border-radius: var(--radius);
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 16px;
    align-items: flex-start;
}
.bp-callout .icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--c-primary) 0%, #ff7a5e 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.bp-callout strong {
    display: block;
    color: var(--c-ink);
    margin-bottom: 4px;
    font-size: 15px;
    line-height: 1.4;
}
.bp-callout p {
    color: var(--c-ink-soft);
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}

/* Inline visuals (chart cards, image figures) — centered, full-width within column */
.bp-visual {
    margin: 2.2em 0;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    text-align: center;
}
.bp-visual h4 {
    font-size: 1rem;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
    text-align: center;
}
.bp-visual .caption {
    font-size: 13px;
    color: var(--c-ink-soft);
    margin: 0 0 18px;
    text-align: center;
}

/* Centered images inside article (figures, plain imgs) */
.bp-body figure {
    margin: 2.2em auto;
    text-align: center;
}
.bp-body figure img,
.bp-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.bp-body figcaption {
    margin-top: 12px;
    font-size: 13.5px;
    color: var(--c-ink-soft);
    text-align: center;
    line-height: 1.5;
}

/* Inline newsletter card */
.bp-newsletter {
    margin: 3em 0 1em;
    padding: 32px 26px;
    background: linear-gradient(135deg, var(--c-ink) 0%, #2a1f3d 100%);
    color: #fff;
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
    text-align: center;
}
.bp-newsletter::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(60% 80% at 100% 0%, rgba(235,63,67,0.30) 0%, transparent 70%);
}
.bp-newsletter > * { position: relative; z-index: 1; }
.bp-newsletter h3 { color: #fff; font-size: 1.35rem; letter-spacing: -0.015em; margin: 0 0 10px; }
.bp-newsletter p { color: rgba(255,255,255,0.82); font-size: 14.5px; line-height: 1.55; margin: 0 0 20px; }
.bp-newsletter form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 460px;
    margin: 0 auto;
}
.bp-newsletter input {
    flex: 1;
    min-width: 200px;
    padding: 13px 18px;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,0.10);
    color: #fff;
    font-size: 14.5px;
    font-family: var(--font-body);
}
.bp-newsletter input::placeholder { color: rgba(255,255,255,0.50); }
.bp-newsletter input:focus { outline: none; background: rgba(255,255,255,0.18); box-shadow: 0 0 0 3px rgba(255,255,255,0.20); }
.bp-newsletter button {
    padding: 13px 24px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--c-primary) 0%, #ff7a5e 100%);
    color: #fff;
    font-weight: 700;
    font-family: var(--font-display);
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: transform 200ms var(--ease);
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 8px;
}
.bp-newsletter button:hover { transform: translateY(-2px); }

/* Related strip (uses bi-grid + bi-card pattern, but with a header) */
.bp-related {
    margin-top: 24px;
    padding: 48px 0 0;
    border-top: 1px solid var(--c-line);
}
.bp-related-shell {
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 0 var(--shell-pad);
}
.bp-related-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.bp-related-head h3 { font-size: 1.4rem; letter-spacing: -0.01em; margin: 0; }
.bp-related-head a {
    font-size: 14px; color: var(--c-primary); font-weight: 600; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    transition: gap 200ms var(--ease);
}
.bp-related-head a:hover { gap: 10px; }