/*
 * Fecund Empire Blog: public stylesheet.
 * Uses the main site's own values: system font stack, deep green #1a3a2f,
 * gold #c9a227, off-white #fafaf8, Tailwind gray scale, 1rem/1.5rem radii and pill buttons.
 * Every rule is scoped to blog pages. This file is never loaded on the main site.
 */
:root {
  --fe-green: #1a3a2f;
  --fe-green-2: #1f4a3a;
  --fe-green-3: #0f2a1f;
  --fe-gold: #c9a227;
  --fe-gold-hover: #dab52f;
  --fe-gold-text: #8a6d12;          /* AA-contrast gold for small text on light backgrounds */
  --fe-bg: #fafaf8;
  --fe-white: #fff;
  --fe-gray-100: #f3f4f6;
  --fe-gray-200: #e5e7eb;
  --fe-gray-300: #d1d5db;
  --fe-gray-400: #9ca3af;
  --fe-gray-500: #6b7280;
  --fe-gray-600: #4b5563;
  --fe-gray-700: #374151;
  --fe-radius: 1rem;
  --fe-radius-lg: 1.5rem;
  --fe-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --fe-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
  --fe-font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --fe-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ---------- base (mirrors Tailwind preflight used by the main site) ---------- */
*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--fe-gray-200); }
html { -webkit-text-size-adjust: 100%; line-height: 1.5; font-family: var(--fe-font); scroll-behavior: smooth; }
body.fe-blog { margin: 0; background: var(--fe-bg); color: var(--fe-gray-700); line-height: inherit; min-height: 100vh; display: flex; flex-direction: column; }
body.fe-blog main { flex: 1 0 auto; outline: none; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: inherit; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; background: transparent; }
:focus-visible { outline: 2px solid var(--fe-gold); outline-offset: 3px; border-radius: 4px; }
.fe-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.fe-skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--fe-gold); color: var(--fe-green); padding: .6rem 1rem; border-radius: 999px; font-weight: 600; transition: top .2s; }
.fe-skip:focus { top: 1rem; }

.fe-container { width: 100%; max-width: 80rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .fe-container { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 768px) { .fe-container { padding-left: 3rem; padding-right: 3rem; } }
.fe-narrow { max-width: 42rem; }
.fe-center { text-align: center; }
.fe-muted { color: var(--fe-gray-500); font-size: .875rem; }

.fe-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.fe-icon--sm { width: 1rem; height: 1rem; }
.fe-icon--lg { width: 1.5rem; height: 1.5rem; }
.fe-icon--xl { width: 2rem; height: 2rem; }
.fe-icon--social { width: 18px; height: 18px; }
.fe-icon--share { width: 1.05rem; height: 1.05rem; }

/* ---------- typography helpers (site pattern: light headings, semibold emphasis) ---------- */
.fe-eyebrow { display: inline-block; color: var(--fe-gold); font-size: .75rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
@media (min-width: 640px) { .fe-eyebrow { font-size: .875rem; letter-spacing: .2em; } }
.fe-eyebrow--dark { color: var(--fe-gold-text); }
.fe-eyebrow--link:hover { color: var(--fe-gold-hover); text-decoration: underline; text-underline-offset: 4px; }
.fe-accent { color: var(--fe-gold); font-weight: 600; }
.fe-strong { font-weight: 600; }
.fe-h2 { font-size: 1.5rem; font-weight: 300; color: var(--fe-green); line-height: 1.2; }
@media (min-width: 640px) { .fe-h2 { font-size: 1.875rem; } }

/* ---------- buttons ---------- */
.fe-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; padding: .75rem 1.5rem; font-weight: 600; font-size: 1rem; line-height: 1.25; transition: background-color .2s, color .2s, transform .2s, border-color .2s; text-align: center; }
.fe-btn--primary { background: var(--fe-gold); color: var(--fe-green); }
.fe-btn--primary:hover { background: var(--fe-gold-hover); transform: scale(1.03); }
.fe-btn--outline-dark { border: 1px solid var(--fe-green); color: var(--fe-green); font-weight: 500; }
.fe-btn--outline-dark:hover { background: var(--fe-green); color: #fff; }
.fe-btn--lg { padding: 1rem 2rem; }
.fe-link-arrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--fe-green); font-weight: 600; transition: color .2s; }
.fe-link-arrow:hover { color: var(--fe-gold-text); }
.fe-link-arrow .fe-icon { transition: transform .2s; }
.fe-link-arrow:hover .fe-icon { transform: translateX(4px); }

/* ---------- header / navigation (same links, sizes and colours as the main site nav) ---------- */
.fe-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; }
.fe-nav { position: relative; padding: 1rem 0; }
@media (min-width: 768px) { .fe-nav { padding: 1.5rem 0; } }
.fe-nav__row { display: flex; align-items: center; justify-content: space-between; }
.fe-nav__logo img { height: 2rem; width: auto; }
@media (min-width: 640px) { .fe-nav__logo img { height: 2.5rem; } }
@media (min-width: 768px) { .fe-nav__logo img { height: 3rem; } }
.fe-nav__links { display: none; align-items: center; gap: 1.5rem; color: rgb(255 255 255 / .8); font-size: .875rem; }
@media (min-width: 640px) { .fe-nav__links { display: flex; } }
@media (min-width: 768px) { .fe-nav__links { gap: 2rem; } }
.fe-nav__links a { transition: color .2s; }
.fe-nav__links a:hover, .fe-nav__links a.is-active { color: var(--fe-gold); }
.fe-nav__toggle { color: #fff; padding: .5rem; margin-right: -.5rem; display: inline-flex; }
@media (min-width: 640px) { .fe-nav__toggle { display: none; } }
.fe-nav__icon-close { display: none; }
.fe-nav__toggle[aria-expanded="true"] .fe-nav__icon-open { display: none; }
.fe-nav__toggle[aria-expanded="true"] .fe-nav__icon-close { display: inline; }
.fe-nav__mobile { position: absolute; top: 100%; left: 0; right: 0; background: var(--fe-green); border-top: 1px solid rgb(255 255 255 / .1); box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25); }
.fe-nav__mobile a { display: block; padding: 1rem 1.5rem; color: rgb(255 255 255 / .9); border-bottom: 1px solid rgb(255 255 255 / .05); font-size: 1rem; transition: color .2s, background-color .2s; }
.fe-nav__mobile a:hover, .fe-nav__mobile a.is-active { color: var(--fe-gold); background: rgb(255 255 255 / .05); }
@media (min-width: 640px) { .fe-nav__mobile { display: none !important; } }

/* ---------- hero (listing) ---------- */
.fe-hero, .fe-article__header { position: relative; overflow: hidden; background: linear-gradient(to bottom right, var(--fe-green), var(--fe-green-2), var(--fe-green-3)); color: #fff; }
.fe-hero { padding: 7rem 0 3.5rem; }
@media (min-width: 768px) { .fe-hero { padding: 9.5rem 0 5rem; } }
.fe-hero__glow { position: absolute; border-radius: 999px; background: rgb(201 162 39 / .12); filter: blur(64px); pointer-events: none; }
.fe-hero__glow--a { width: 18rem; height: 18rem; top: 5rem; left: 2.5rem; }
.fe-hero__glow--b { width: 24rem; height: 24rem; bottom: -6rem; right: 2.5rem; }
.fe-hero__inner { position: relative; z-index: 1; text-align: center; }
.fe-hero__title { margin-top: .75rem; font-weight: 300; color: #fff; font-size: 2.25rem; line-height: 1.1; letter-spacing: -.025em; }
@media (min-width: 640px) { .fe-hero__title { font-size: 3rem; } }
@media (min-width: 1024px) { .fe-hero__title { font-size: 3.75rem; } }
.fe-hero__intro { max-width: 42rem; margin: 1.25rem auto 0; color: rgb(255 255 255 / .7); font-size: 1rem; font-weight: 300; line-height: 1.625; }
@media (min-width: 640px) { .fe-hero__intro { font-size: 1.125rem; } }

/* ---------- search ---------- */
.fe-search { position: relative; display: flex; align-items: center; gap: .5rem; max-width: 36rem; margin: 2rem auto 0; background: #fff; border-radius: 999px; padding: .375rem .375rem .375rem 3rem; box-shadow: var(--fe-shadow-xl); }
.fe-search--light { border: 1px solid var(--fe-gray-200); box-shadow: none; margin-top: 0; }
.fe-search__icon { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--fe-gray-400); display: flex; }
.fe-search__input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .6rem 0; font-size: 1rem; color: var(--fe-green); outline: none; }
.fe-search__input::placeholder { color: var(--fe-gray-400); }
.fe-search:focus-within { box-shadow: 0 0 0 3px rgb(201 162 39 / .55), var(--fe-shadow-xl); }
.fe-search__btn { padding: .65rem 1.25rem; font-size: .9375rem; position: relative; }
.fe-search__btn:hover { transform: none; }
.fe-spinner { display: none; width: 1rem; height: 1rem; border: 2px solid rgb(26 58 47 / .25); border-top-color: var(--fe-green); border-radius: 999px; animation: fe-spin .7s linear infinite; }
.fe-search.is-loading .fe-spinner { display: inline-block; }
.fe-search.is-loading .fe-search__btn-label { opacity: .6; }
@keyframes fe-spin { to { transform: rotate(360deg); } }
@media (max-width: 420px) { .fe-search__btn-label { font-size: .875rem; } .fe-search__btn { padding: .6rem 1rem; } }

/* ---------- category bar ---------- */
.fe-catbar { background: #fff; border-bottom: 1px solid var(--fe-gray-100); position: sticky; top: 0; z-index: 20; }
.fe-catbar__list { display: flex; gap: .5rem; overflow-x: auto; padding: .9rem 0; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.fe-pill { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; padding: .45rem 1rem; border-radius: 999px; background: rgb(26 58 47 / .05); color: var(--fe-green); font-size: .875rem; transition: background-color .2s, color .2s; }
.fe-pill:hover { background: rgb(26 58 47 / .1); }
.fe-pill.is-active { background: var(--fe-green); color: #fff; }
.fe-pill__count { font-size: .75rem; opacity: .6; }

/* ---------- sections ---------- */
.fe-section { padding: 3rem 0; }
@media (min-width: 640px) { .fe-section { padding: 4rem 0; } }
@media (min-width: 768px) { .fe-section { padding: 5rem 0; } }
.fe-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem; }

/* ---------- cards (same language as the main site's service cards) ---------- */
.fe-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .fe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.fe-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--fe-radius-lg); overflow: hidden; border: 1px solid var(--fe-gray-100); transition: box-shadow .5s, border-color .3s, transform .3s; }
.fe-card:hover { box-shadow: var(--fe-shadow-xl); border-color: transparent; }
.fe-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: rgb(26 58 47 / .06); }
.fe-card__media picture, .fe-card__img { width: 100%; height: 100%; }
.fe-card__img { object-fit: cover; transition: transform .7s; }
.fe-card:hover .fe-card__img { transform: scale(1.06); }
.fe-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--fe-green), var(--fe-green-2) 60%, var(--fe-green-3)); }
.fe-card__placeholder img { width: 4rem; height: 4rem; border-radius: .75rem; opacity: .95; }
.fe-card__body { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem; flex: 1; }
@media (min-width: 640px) { .fe-card__body { padding: 1.5rem; } }
.fe-card__eyebrow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.fe-chip { display: inline-flex; align-items: center; padding: .25rem .75rem; border-radius: 999px; background: rgb(26 58 47 / .05); color: var(--fe-green); font-size: .75rem; font-weight: 500; transition: background-color .2s; }
a.fe-chip:hover { background: rgb(201 162 39 / .18); }
.fe-chip--demo { background: #fef3c7; color: #92400e; }
.fe-card__title { font-size: 1.125rem; font-weight: 600; color: var(--fe-green); line-height: 1.35; }
@media (min-width: 640px) { .fe-card__title { font-size: 1.25rem; } }
.fe-card__title a { background-image: linear-gradient(var(--fe-gold), var(--fe-gold)); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s; }
.fe-card__title a:hover { background-size: 100% 2px; }
.fe-card__excerpt { color: var(--fe-gray-600); font-size: .9375rem; line-height: 1.625; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fe-meta { margin-top: auto; padding-top: .25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--fe-gray-500); font-size: .8125rem; }
.fe-dot { width: 4px; height: 4px; border-radius: 999px; background: var(--fe-gray-300); }

/* ---------- featured article ---------- */
.fe-featured { display: grid; grid-template-columns: 1fr; background: #fff; border-radius: var(--fe-radius-lg); overflow: hidden; border: 1px solid var(--fe-gray-100); margin-bottom: 3.5rem; transition: box-shadow .5s; }
.fe-featured:hover { box-shadow: var(--fe-shadow-xl); }
@media (min-width: 1024px) { .fe-featured { grid-template-columns: 1.15fr 1fr; } }
.fe-featured__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: rgb(26 58 47 / .06); }
@media (min-width: 1024px) { .fe-featured__media { aspect-ratio: auto; min-height: 24rem; } }
.fe-featured__media picture, .fe-featured__img { width: 100%; height: 100%; }
.fe-featured__img { object-fit: cover; transition: transform .7s; }
.fe-featured:hover .fe-featured__img { transform: scale(1.04); }
.fe-featured__body { display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: 1.5rem; }
@media (min-width: 640px) { .fe-featured__body { padding: 2.5rem; } }
.fe-featured__title { font-size: 1.625rem; font-weight: 300; color: var(--fe-green); line-height: 1.2; }
@media (min-width: 640px) { .fe-featured__title { font-size: 2.25rem; } }
.fe-featured__title a:hover { color: var(--fe-gold-text); }
.fe-featured__excerpt { color: var(--fe-gray-600); font-size: 1rem; line-height: 1.7; }
@media (min-width: 640px) { .fe-featured__excerpt { font-size: 1.125rem; } }
.fe-featured .fe-meta { margin-top: 0; }
.fe-badge-gold { display: inline-flex; align-items: center; gap: .5rem; background: rgb(201 162 39 / .12); color: var(--fe-gold-text); padding: .3rem .85rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.fe-pulse { width: .5rem; height: .5rem; border-radius: 999px; background: var(--fe-gold); animation: fe-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes fe-pulse { 50% { opacity: .5; } }

/* ---------- pagination ---------- */
.fe-pagination { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 3rem; flex-wrap: wrap; }
.fe-pagination__pages { display: flex; gap: .375rem; flex-wrap: wrap; }
.fe-pagination__pages a, .fe-pagination__pages span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .75rem; border-radius: 999px; font-size: .9375rem; }
.fe-pagination__pages a { background: #fff; border: 1px solid var(--fe-gray-200); color: var(--fe-green); transition: border-color .2s, background-color .2s; }
.fe-pagination__pages a:hover { border-color: var(--fe-gold); }
.fe-pagination__pages .is-current { background: var(--fe-green); color: #fff; font-weight: 600; }
.fe-pagination__gap { color: var(--fe-gray-400); align-self: center; }
.fe-pagination__step { display: inline-flex; align-items: center; gap: .25rem; color: var(--fe-green); font-weight: 500; padding: .5rem .25rem; }
.fe-pagination__step:hover { color: var(--fe-gold-text); }
.fe-pagination__step.is-disabled { color: var(--fe-gray-300); pointer-events: none; }
@media (max-width: 480px) { .fe-pagination { justify-content: center; } .fe-pagination__step { order: 2; } }

/* ---------- empty / topics ---------- */
.fe-empty { text-align: center; max-width: 34rem; margin: 1rem auto; padding: 3rem 1.5rem; background: #fff; border: 1px dashed var(--fe-gray-200); border-radius: var(--fe-radius-lg); }
.fe-empty__icon { width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 1rem; background: rgb(26 58 47 / .05); color: var(--fe-green); display: flex; align-items: center; justify-content: center; }
.fe-empty__title { font-size: 1.5rem; font-weight: 300; color: var(--fe-green); margin-bottom: .5rem; }
.fe-empty p { color: var(--fe-gray-600); margin-bottom: 1.5rem; }
.fe-topics { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--fe-gray-200); }
.fe-topics__title { display: flex; align-items: center; gap: .5rem; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fe-gray-500); font-weight: 500; margin-bottom: 1rem; }
.fe-topics__list, .fe-article__tags ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.fe-tag { display: inline-block; padding: .4rem .9rem; border-radius: 999px; background: #fff; border: 1px solid var(--fe-gray-200); color: var(--fe-green); font-size: .875rem; transition: border-color .2s, color .2s; }
.fe-tag::before { content: "#"; color: var(--fe-gold); margin-right: .15rem; }
.fe-tag:hover { border-color: var(--fe-gold); color: var(--fe-gold-text); }

/* ---------- breadcrumb ---------- */
.fe-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .8125rem; }
.fe-breadcrumb li { display: inline-flex; align-items: center; gap: .35rem; }
.fe-breadcrumb li + li::before { content: "/"; opacity: .45; }
.fe-breadcrumb--light { color: rgb(255 255 255 / .6); justify-content: center; }
.fe-hero .fe-breadcrumb ol { justify-content: center; margin-bottom: 1rem; }
.fe-breadcrumb--light a:hover { color: var(--fe-gold); }
.fe-breadcrumb--light [aria-current] { color: rgb(255 255 255 / .9); }
.fe-breadcrumb__current { display: inline-block; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* ---------- article ---------- */
.fe-article__header { padding: 5.5rem 0 7rem; }
@media (min-width: 768px) { .fe-article__header { padding: 7.5rem 0 9rem; } }
.fe-preview-bar + .fe-article .fe-article__header { padding-top: 3.5rem; }
.fe-article__header--compact { padding-bottom: 4rem !important; }
.fe-article__header-inner { position: relative; z-index: 1; max-width: 56rem; text-align: center; }
.fe-article__header .fe-breadcrumb ol { justify-content: center; margin-bottom: 1.75rem; }
.fe-article__title { margin-top: .9rem; font-size: 2rem; font-weight: 300; line-height: 1.15; letter-spacing: -.02em; color: #fff; overflow-wrap: anywhere; }
@media (min-width: 640px) { .fe-article__title { font-size: 2.5rem; } }
@media (min-width: 1024px) { .fe-article__title { font-size: 3.25rem; } }
.fe-article__dek { margin: 1.25rem auto 0; max-width: 42rem; color: rgb(255 255 255 / .72); font-size: 1.0625rem; font-weight: 300; line-height: 1.65; }
@media (min-width: 640px) { .fe-article__dek { font-size: 1.1875rem; } }
.fe-article__meta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.5rem; color: rgb(255 255 255 / .75); font-size: .875rem; }
.fe-article__meta-item { display: inline-flex; align-items: center; gap: .45rem; }
.fe-article__meta-item .fe-icon { color: var(--fe-gold); }

.fe-article__hero { max-width: 65rem; margin: -5rem auto 0; position: relative; z-index: 2; }
@media (min-width: 768px) { .fe-article__hero { margin-top: -7rem; } }
.fe-article__hero picture, .fe-article__hero-img { width: 100%; }
.fe-article__hero-img { border-radius: var(--fe-radius-lg); box-shadow: var(--fe-shadow-xl); aspect-ratio: 16 / 9; object-fit: cover; background: rgb(26 58 47 / .08); }
.fe-article__hero figcaption { margin-top: .75rem; text-align: center; color: var(--fe-gray-500); font-size: .875rem; }
.fe-article__layout { max-width: 45rem; margin: 2.5rem auto 0; padding-bottom: 4rem; }
.fe-article__layout.no-hero { margin-top: -4rem; position: relative; z-index: 2; background: #fff; border-radius: var(--fe-radius-lg); padding: 1.5rem 1.25rem 3rem; box-shadow: var(--fe-shadow-lg); }
@media (min-width: 640px) { .fe-article__layout.no-hero { padding: 2.5rem 2.5rem 3.5rem; } }
@media (min-width: 768px) { .fe-article__layout.no-hero { margin-top: -6rem; } }
.fe-demo-note { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: .75rem; padding: .75rem 1rem; font-size: .875rem; margin-bottom: 1.5rem; }
.fe-preview-bar { position: sticky; top: 0; z-index: 60; background: #fef3c7; color: #78350f; font-size: .875rem; padding: .6rem 0; border-bottom: 1px solid #fde68a; }
.fe-preview-bar a { text-decoration: underline; margin-left: .5rem; font-weight: 600; }

/* share */
.fe-share { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1rem; padding-bottom: 1.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--fe-gray-200); }
.fe-share__label { font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--fe-gray-500); }
.fe-share__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.fe-share__btn { width: 2.5rem; height: 2.5rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgb(26 58 47 / .06); color: var(--fe-green); transition: background-color .2s, color .2s; }
.fe-share__btn:hover { background: var(--fe-gold); color: var(--fe-green); }
.fe-share__btn.is-copied { background: var(--fe-green); color: #fff; }
.fe-share__status { font-size: .8125rem; color: var(--fe-green); font-weight: 500; }
.fe-article__share-end .fe-share { border-bottom: 0; border-top: 1px solid var(--fe-gray-200); padding: 1.5rem 0 0; margin: 2rem 0 0; }
.fe-article__tags { margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.fe-article__tags-label { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--fe-gray-500); }

/* prev/next + back */
.fe-prevnext { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .fe-prevnext { grid-template-columns: 1fr 1fr; } }
.fe-prevnext__item { display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem; border-radius: var(--fe-radius); background: #fff; border: 1px solid var(--fe-gray-100); transition: border-color .2s, box-shadow .2s; }
.fe-prevnext__item:hover { border-color: var(--fe-gold); box-shadow: var(--fe-shadow-lg); }
.fe-prevnext__item--next { text-align: right; }
.fe-prevnext__item--next .fe-prevnext__dir { justify-content: flex-end; }
.fe-prevnext__dir { display: flex; align-items: center; gap: .35rem; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fe-gold-text); font-weight: 500; }
.fe-prevnext__title { color: var(--fe-green); font-weight: 600; line-height: 1.35; }
.fe-back { display: inline-flex; align-items: center; gap: .5rem; margin-top: 2.5rem; color: var(--fe-green); font-weight: 500; }
.fe-back:hover { color: var(--fe-gold-text); }
.fe-related { background: #fff; padding: 4rem 0; border-top: 1px solid var(--fe-gray-100); }
@media (min-width: 768px) { .fe-related { padding: 5rem 0; } }

/* ---------- article body typography (readability first) ---------- */
.fe-prose { font-size: 1.0625rem; line-height: 1.8; color: var(--fe-gray-700); overflow-wrap: break-word; }
@media (min-width: 640px) { .fe-prose { font-size: 1.125rem; } }
.fe-prose > * + * { margin-top: 1.25em; }
.fe-prose h1, .fe-prose h2, .fe-prose h3, .fe-prose h4 { color: var(--fe-green); line-height: 1.25; scroll-margin-top: 5rem; }
.fe-prose h1 { font-size: 1.875em; font-weight: 300; margin-top: 2em; }
.fe-prose h2 { font-size: 1.5em; font-weight: 600; margin-top: 2.1em; letter-spacing: -.01em; }
.fe-prose h3 { font-size: 1.2em; font-weight: 600; margin-top: 1.8em; }
.fe-prose h4 { font-size: 1.05em; font-weight: 600; margin-top: 1.6em; }
.fe-prose h1 + *, .fe-prose h2 + *, .fe-prose h3 + *, .fe-prose h4 + * { margin-top: .6em; }
.fe-prose > :first-child { margin-top: 0; }
.fe-prose a:not(.fe-btn) { color: var(--fe-green); font-weight: 500; text-decoration: underline; text-decoration-color: var(--fe-gold); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .2s; }
.fe-prose a:not(.fe-btn):hover { color: var(--fe-gold-text); }
.fe-prose strong { color: #1f2937; font-weight: 600; }
.fe-prose ul, .fe-prose ol { padding-left: 1.5em; }
.fe-prose ul { list-style: none; }
.fe-prose ul > li { position: relative; }
.fe-prose ul > li::before { content: ""; position: absolute; left: -1.1em; top: .72em; width: .45em; height: .45em; border-radius: 999px; background: var(--fe-gold); }
.fe-prose ol { list-style: decimal; }
.fe-prose ol > li::marker { color: var(--fe-gold-text); font-weight: 600; }
.fe-prose li + li { margin-top: .5em; }
.fe-prose li > ul, .fe-prose li > ol { margin-top: .5em; }
.fe-prose blockquote { border-left: 4px solid var(--fe-gold); padding: .25em 0 .25em 1.25em; color: var(--fe-green); font-size: 1.15em; font-weight: 300; line-height: 1.6; }
.fe-prose blockquote > * + * { margin-top: .75em; }
.fe-prose blockquote.fe-pullquote { border: 0; text-align: center; font-size: 1.45em; padding: 1.5em .5em; position: relative; border-top: 1px solid var(--fe-gray-200); border-bottom: 1px solid var(--fe-gray-200); }
.fe-prose blockquote.fe-pullquote::before { content: "“"; display: block; color: var(--fe-gold); font-size: 3em; line-height: .6; margin-bottom: .1em; font-weight: 600; }
.fe-prose hr { border-top: 1px solid var(--fe-gray-200); margin: 2.5em 0; }
.fe-prose hr.fe-hr--gold { border-top: 2px solid var(--fe-gold); width: 4rem; margin-left: auto; margin-right: auto; }
.fe-prose code { font-family: var(--fe-mono); font-size: .875em; background: var(--fe-gray-100); padding: .15em .4em; border-radius: .35em; }
.fe-prose pre { font-family: var(--fe-mono); font-size: .875em; background: var(--fe-green-3); color: #e5e7eb; padding: 1em 1.25em; border-radius: var(--fe-radius); overflow-x: auto; line-height: 1.6; }
.fe-prose pre code { background: none; padding: 0; }
.fe-prose mark { background: rgb(201 162 39 / .25); color: inherit; padding: 0 .15em; border-radius: .2em; }
.fe-prose sub, .fe-prose sup { font-size: .75em; line-height: 0; }
/* figures */
.fe-prose figure { margin-top: 2em; margin-bottom: 2em; }
.fe-prose figure picture, .fe-prose figure img { width: 100%; }
.fe-prose figure img { border-radius: var(--fe-radius); }
.fe-prose figcaption { margin-top: .75em; text-align: center; font-size: .85em; color: var(--fe-gray-500); line-height: 1.5; }
.fe-prose p > img, .fe-prose p picture img { border-radius: var(--fe-radius); }
.fe-prose .fe-figure--center { max-width: 80%; margin-left: auto; margin-right: auto; }
@media (min-width: 1100px) { .fe-prose .fe-figure--wide { margin-left: -8rem; margin-right: -8rem; } }
@media (min-width: 768px) {
  .fe-prose .fe-figure--left { float: left; width: 46%; margin: .4em 1.75em 1em 0; }
  .fe-prose .fe-figure--right { float: right; width: 46%; margin: .4em 0 1em 1.75em; }
  .fe-prose h2, .fe-prose h3, .fe-prose .fe-table-wrap, .fe-prose hr, .fe-prose .fe-callout { clear: both; }
}
.fe-prose::after { content: ""; display: table; clear: both; }
/* tables: horizontally scrollable on small screens */
.fe-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--fe-gray-200); border-radius: var(--fe-radius); background: #fff; }
.fe-prose table { width: 100%; border-collapse: collapse; font-size: .9em; line-height: 1.55; min-width: 32rem; }
.fe-prose th { background: rgb(26 58 47 / .05); color: var(--fe-green); font-weight: 600; text-align: left; }
.fe-prose th, .fe-prose td { padding: .75em 1em; border-bottom: 1px solid var(--fe-gray-200); vertical-align: top; }
.fe-prose tbody tr:last-child td { border-bottom: 0; }
.fe-prose tbody tr:nth-child(even) td { background: #fcfcfa; }
.fe-prose caption { caption-side: bottom; padding: .6em; font-size: .85em; color: var(--fe-gray-500); }
/* brand-safe customisation classes available in the editor */
.fe-prose .fe-lead { font-size: 1.2em; color: var(--fe-green); font-weight: 300; line-height: 1.65; }
.fe-prose .fe-small { font-size: .875em; color: var(--fe-gray-500); }
.fe-prose .fe-text-green { color: var(--fe-green); }
.fe-prose .fe-text-gold { color: var(--fe-gold-text); }
.fe-prose .fe-text-muted { color: var(--fe-gray-500); }
.fe-prose .fe-text-lg { font-size: 1.2em; }
.fe-prose .fe-text-sm { font-size: .875em; }
.fe-prose .fe-highlight { background: linear-gradient(transparent 55%, rgb(201 162 39 / .35) 55%); }
.fe-prose .fe-callout { border-radius: var(--fe-radius); padding: 1.1em 1.25em; border: 1px solid; font-size: .95em; }
.fe-prose .fe-callout > * + * { margin-top: .6em; }
.fe-prose .fe-callout--info { background: #f0f7f4; border-color: #cfe3da; color: var(--fe-green); }
.fe-prose .fe-callout--gold { background: #fdf8e8; border-color: #f1e2ad; color: #5c4a0f; }
.fe-prose .fe-callout--green { background: var(--fe-green); border-color: var(--fe-green); color: rgb(255 255 255 / .9); }
.fe-prose .fe-callout--green strong, .fe-prose .fe-callout--green a:not(.fe-btn) { color: #fff; }
.fe-prose .fe-callout--warning { background: #fff7ed; border-color: #fed7aa; color: #7c2d12; }
.fe-prose .fe-btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75em; }
.fe-prose .fe-btn-row[style*="center"] { justify-content: center; }
.fe-prose .fe-btn-row[style*="right"] { justify-content: flex-end; }
.fe-prose a.fe-btn { text-decoration: none; font-size: 1rem; }
.fe-prose a.fe-btn:not(.fe-btn--primary):not(.fe-btn--outline) { background: var(--fe-gold); color: var(--fe-green); }
.fe-prose a.fe-btn--outline { border: 1px solid var(--fe-green); color: var(--fe-green); }
.fe-prose a.fe-btn--outline:hover { background: var(--fe-green); color: #fff; }
.fe-prose .fe-spacer { margin: 0; }
.fe-prose .fe-spacer--sm { height: 1rem; }
.fe-prose .fe-spacer--md { height: 2.5rem; }
.fe-prose .fe-spacer--lg { height: 4.5rem; }

/* ---------- CTA band (same message as the main site's contact section) ---------- */
.fe-cta { background: var(--fe-green); color: #fff; padding: 3.5rem 0; position: relative; overflow: hidden; }
.fe-cta__inner { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
@media (min-width: 768px) { .fe-cta__inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.fe-cta__title { font-size: 1.875rem; font-weight: 300; line-height: 1.2; margin-top: .5rem; }
@media (min-width: 640px) { .fe-cta__title { font-size: 2.25rem; } }
.fe-cta__text { color: rgb(255 255 255 / .7); margin-top: .5rem; max-width: 36rem; }

/* ---------- footer (identical markup/values to the main site footer) ---------- */
.fe-footer { background: var(--fe-green); padding: 2rem 0; }
@media (min-width: 640px) { .fe-footer { padding: 2.5rem 0; } }
@media (min-width: 768px) { .fe-footer { padding: 3rem 0; } }
.fe-footer__row { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; }
@media (min-width: 640px) { .fe-footer__row { gap: 1.5rem; } }
@media (min-width: 768px) { .fe-footer__row { flex-direction: row; } }
.fe-footer__logo { height: 2rem; width: auto; }
@media (min-width: 640px) { .fe-footer__logo { height: 2.5rem; } }
@media (min-width: 768px) { .fe-footer__logo { height: 3rem; } }
.fe-footer__pillars { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; color: rgb(255 255 255 / .6); font-size: .75rem; }
@media (min-width: 640px) { .fe-footer__pillars { gap: .75rem; font-size: .875rem; } }
.fe-footer__pillars > div { display: flex; align-items: center; gap: .5rem; }
.fe-footer__pillars .fe-icon { width: .75rem; height: .75rem; }
@media (min-width: 640px) { .fe-footer__pillars .fe-icon { width: 1rem; height: 1rem; } }
.fe-footer__dot { width: .25rem; height: .25rem; border-radius: 999px; background: rgb(255 255 255 / .4); }
.fe-footer__social { display: flex; align-items: center; gap: .75rem; }
.fe-footer__social a { width: 2.25rem; height: 2.25rem; border-radius: 999px; background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .8); display: flex; align-items: center; justify-content: center; transition: background-color .2s, color .2s; }
.fe-footer__social a:hover { background: var(--fe-gold); color: var(--fe-green); }
.fe-footer__legal { display: flex; flex-direction: column; align-items: center; gap: .25rem; color: rgb(255 255 255 / .4); font-size: .75rem; text-align: center; }
@media (min-width: 640px) { .fe-footer__legal { font-size: .875rem; } }
@media (min-width: 768px) { .fe-footer__legal { align-items: flex-end; text-align: left; } }
.fe-footer__links { display: flex; gap: 1rem; }
.fe-footer__links a { transition: color .2s; }
.fe-footer__links a:hover { color: var(--fe-gold); }

.fe-debug { text-align: left; white-space: pre-wrap; background: #fff; border: 1px solid var(--fe-gray-200); padding: 1rem; border-radius: .75rem; font-size: .8rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .fe-header, .fe-footer, .fe-cta, .fe-share, .fe-related, .fe-prevnext, .fe-catbar, .fe-back { display: none !important; }
  .fe-article__header { background: none; color: #000; padding: 0; }
  .fe-article__title, .fe-article__dek, .fe-article__meta { color: #000; }
  .fe-article__hero { margin-top: 1rem; }
}