.ff-skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 2000;
  background: var(--ff-dark);
  color: var(--ff-white);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

.ff-skip-link:focus {
  top: 1rem;
}

/* ── NAV + FOOTER rules removed (Phase 22 Plan 03) ─────
   Unprefixed equivalents now live in
   fourfoxes_app/static/css/theme.css
   ──────────────────────────────────────────────────────── */

/* ── BOOTSTRAP BRIDGE removed (Phase 23 Plan 02) ───────
   Marketing page templates now use .wrap + .ff-* grid/component
   classes defined in theme.css; blog/KB templates will be
   converted in a future phase.
   ──────────────────────────────────────────────────────── */

/* Component bridge */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  border-radius: 6px;
  text-decoration: none;
  border: 1.5px solid transparent;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-sm { padding: 6px 14px; font-size: 0.8rem; }
.btn-lg { padding: 12px 22px; font-size: 1rem; }
.btn-primary {
  background: var(--ff-primary);
  border-color: var(--ff-primary);
  color: var(--ff-dark);
}
.btn-primary:hover { background: var(--ff-primary-hover); border-color: var(--ff-primary-hover); color: var(--ff-dark); }
.btn-outline-secondary {
  background: transparent;
  border-color: var(--ff-neutral-300);
  color: var(--ff-dark);
}
.btn-outline-secondary:hover { border-color: var(--ff-primary); color: var(--ff-primary-hover); }
.btn-outline-light {
  background: transparent;
  border-color: rgba(255,255,255,0.3);
  color: var(--ff-white);
}
.btn-outline-light:hover { border-color: var(--ff-white); }
.btn-light {
  background: var(--ff-white);
  border-color: var(--ff-white);
  color: var(--ff-dark);
}
.btn-light:hover { background: var(--ff-neutral-100); border-color: var(--ff-neutral-100); }
.w-100 { width: 100%; }

.alert {
  padding: 1rem 1.25rem;
  border-radius: 8px;
  border: 1px solid transparent;
}
.alert-success {
  background: var(--ff-success-light);
  border-color: var(--ff-success);
  color: var(--ff-success);
}
.alert-warning {
  background: var(--ff-warning-light);
  border-color: var(--ff-warning);
  color: var(--ff-dark);
}
.alert-info {
  background: var(--ff-info-light);
  border-color: var(--ff-info);
  color: var(--ff-info);
}
.alert-danger {
  background: var(--ff-danger-light);
  border-color: var(--ff-danger);
  color: var(--ff-danger);
}

.badge {
  display: inline-block;
  padding: 0.25em 0.5em;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  line-height: 1;
}
.bg-primary  { background: var(--ff-primary); color: var(--ff-white); }
.bg-success  { background: var(--ff-success); color: var(--ff-white); }
.bg-warning  { background: var(--ff-warning); color: var(--ff-dark); }
.bg-light    { background: var(--ff-neutral-100); }

.form-label { display: block; margin-bottom: 0.5rem; font-weight: 600; }
.form-control {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ff-dark);
  background: var(--ff-white);
  border: 1px solid var(--ff-neutral-300);
  border-radius: 6px;
  transition: border-color 0.15s ease;
}
.form-control:focus {
  border-color: var(--ff-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(232, 159, 43, 0.15);
}
.form-control.is-invalid { border-color: var(--ff-danger); }
.invalid-feedback { color: var(--ff-danger); font-size: 0.875rem; margin-top: 0.25rem; }
.form-text { font-size: 0.875rem; color: var(--ff-neutral-500); margin-top: 0.25rem; }
.form-check { display: flex; align-items: center; gap: 0.5rem; }
.form-check-input { width: 1rem; height: 1rem; }

.gy-4 > * { margin-bottom: 1.5rem; }
.border-secondary { border-color: var(--ff-neutral-300); }

@media (min-width: 768px) {
  .d-md-flex { display: flex; }
  .mb-md-0 { margin-bottom: 0; }
}

/* ── PAGE STRUCTURE ──────────────────────────────────── */
.section-pad {
  padding: 5rem 0;
}

/* ── CONTACT SALES ───────────────────────────────────── */
.ff-contact-sales-section {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.ff-contact-sales-wrap {
  max-width: 640px;
}

.ff-contact-sales-title {
  margin: 0 0 0.55rem;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  line-height: 1.15;
}

.ff-contact-sales-intro {
  margin: 0 0 1.5rem;
  color: var(--ff-neutral-500);
  max-width: 58ch;
}

.ff-contact-sales-next {
  margin: 0 0 1.5rem;
  color: var(--ff-neutral-700);
}

.ff-contact-sales-alert {
  margin-bottom: 1rem;
}

.ff-contact-sales-alert:focus-visible {
  outline: 3px solid var(--ff-primary);
  outline-offset: 2px;
}

.ff-contact-sales-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ff-contact-sales-field {
  margin: 0;
}

.ff-contact-sales-field .form-label {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.ff-contact-sales-field .form-control {
  width: 100%;
}

.ff-required {
  color: var(--ff-danger);
  font-weight: 700;
}

.ff-optional {
  color: var(--ff-neutral-500);
  font-size: 0.78rem;
  font-weight: 500;
}

.ff-field-errors {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ff-field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  color: var(--ff-danger);
  font-size: 0.875rem;
  line-height: 1.35;
}

.ff-field-error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  min-width: 1rem;
  margin-top: 0.1rem;
  border-radius: 999px;
  background: var(--ff-danger);
  color: var(--ff-white);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.ff-contact-sales-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.ff-contact-sales-submit[aria-busy="true"] {
  cursor: progress;
  opacity: 0.9;
}

.ff-contact-sales-privacy {
  margin: 0.25rem 0 0;
  color: var(--ff-neutral-500);
  font-size: 0.82rem;
  line-height: 1.5;
}

@media (max-width: 767.98px) {
  .ff-contact-sales-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* .ff-page-shell, .ff-hero, .ff-hero-bg, .ff-kicker,
   .ff-feature-card → .ff-feature, .ff-pricing-card,
   .ff-pricing-badge, .ff-pricing-price, .ff-pricing-features,
   .ff-cta-section, .ff-richtext
   Moved to fourfoxes_app/static/css/theme.css  (Phase 23 Plan 02)  */

.ff-blog-shell {
  padding-top: 2rem;
}

.ff-blog-card,
.ff-blog-lead {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(205, 212, 216, 0.9);
  border-radius: 0.75rem;
  box-shadow: 0 10px 24px rgba(15, 24, 32, 0.045);
}

.ff-blog-subscribe {
  padding: 1.25rem 0 0;
  border-top: 1px solid rgba(205, 212, 216, 0.9);
}

.ff-blog-toolbar,
.ff-blog-state {
  padding: 1.25rem 0;
  border-top: 1px solid rgba(205, 212, 216, 0.8);
  border-bottom: 1px solid rgba(205, 212, 216, 0.8);
}

.ff-blog-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.5rem;
}

.ff-blog-state p {
  margin: 0;
  color: var(--ff-neutral-700);
}

.ff-blog-state-neutral {
  color: var(--ff-neutral-500);
}

.ff-blog-search {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.15rem;
}

.ff-blog-search-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.ff-blog-search-input {
  flex: 1 1 18rem;
  min-height: 44px;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(30, 58, 95, 0.2);
  border-radius: 0.5rem;
  background: var(--ff-white);
  color: var(--ff-neutral-900);
}

.ff-topic-disclosure {
  margin-top: 0.85rem;
}

.ff-topic-disclosure summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ff-secondary);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 700;
}

.ff-topic-disclosure summary:focus-visible {
  outline: 3px solid var(--ff-primary);
  outline-offset: 2px;
}

.ff-topic-disclosure summary::marker,
.ff-topic-disclosure summary::-webkit-details-marker {
  display: none;
}

.ff-topic-disclosure summary::after {
  content: '+';
  margin-left: 0.5rem;
  color: var(--ff-neutral-500);
  font-weight: 700;
}

.ff-topic-disclosure[open] summary::after {
  content: '-';
}

.ff-blog-topic-row {
  margin-top: 0.35rem;
}

.ff-blog-search-input::placeholder {
  color: var(--ff-neutral-500);
}

.ff-blog-search-input:focus-visible {
  outline: 3px solid var(--ff-primary);
  outline-offset: 2px;
}

.ff-filter-label {
  color: var(--ff-neutral-500);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ff-filter-label.is-secondary {
  color: var(--ff-neutral-500);
}

.ff-filter-pill,
.ff-tag-chip,
.ff-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ff-filter-pill {
  padding: 0.55rem 0.95rem;
  min-height: 44px;
  background: var(--ff-white);
  border: 1px solid rgba(30, 58, 95, 0.12);
  color: var(--ff-secondary);
  font-size: 0.95rem;
  font-weight: 600;
}

.ff-filter-pill:hover,
.ff-filter-pill:focus-visible,
.ff-filter-pill.is-active {
  background: var(--ff-secondary);
  border-color: var(--ff-secondary);
  color: var(--ff-white);
  transform: translateY(-1px);
}

.ff-tag-chip,
.ff-category-pill {
  min-height: 44px;
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.ff-tag-chip {
  background: rgba(232, 239, 246, 0.9);
  color: var(--ff-secondary);
}

.ff-tag-chip.is-active,
.ff-tag-chip:hover,
.ff-tag-chip:focus-visible {
  background: rgba(30, 58, 95, 0.12);
  color: var(--ff-secondary);
}

.ff-filter-pill:focus-visible,
.ff-tag-chip:focus-visible,
.ff-category-pill:focus-visible,
.ff-feed-btn:focus-visible,
.ff-inline-link:focus-visible {
  outline: 3px solid var(--ff-primary);
  outline-offset: 2px;
}

.ff-category-pill {
  background: var(--ff-primary-subtle);
  color: var(--ff-primary-hover);
}

.ff-blog-lead {
  overflow: hidden;
}

.ff-blog-lead img,
.ff-article-hero img,
.ff-image-block img {
  object-fit: cover;
}

/* .ff-blog-card .card-img-top removed — Bootstrap class; replaced by .ff-blog-card-image img below */
.ff-blog-card-image img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}

.ff-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ff-secondary);
  font-weight: 700;
  text-decoration: none;
}

.ff-inline-link:hover,
.ff-inline-link:focus-visible {
  color: var(--ff-primary-hover);
}

.ff-blog-subscribe-title {
  margin: 0 0 0.5rem;
  font-family: var(--ff-font-display, "Funnel Display"), sans-serif;
  font-size: 1.2rem;
  line-height: 1.25;
}

.ff-blog-subscribe-body {
  margin: 0;
  color: var(--ff-neutral-700);
}

.ff-blog-feed-buttons {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.ff-blog-meta-label {
  color: var(--ff-neutral-500);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ff-blog-date,
.ff-blog-author {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ff-neutral-700);
  font-weight: 500;
}

.ff-blog-lead-title {
  margin: 0;
  font-family: var(--ff-font-display, "Funnel Display"), sans-serif;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  line-height: 1.2;
}

.ff-blog-lead-title a {
  color: var(--ff-neutral-900);
  text-decoration: none;
}

.ff-blog-lead-title a:hover,
.ff-blog-lead-title a:focus-visible {
  color: var(--ff-secondary);
}

.ff-blog-lead-excerpt {
  margin: 0;
  color: var(--ff-neutral-700);
  font-size: 1.02rem;
  line-height: 1.72;
}

.ff-blog-empty-actions {
  margin-top: 1rem;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

.ff-article-header {
  max-width: 48rem;
}

.ff-article-deck {
  color: var(--ff-neutral-700);
  font-size: 1.2rem;
  line-height: 1.75;
}

.ff-article-hero img,
.ff-image-block img {
  border-radius: 0.75rem;
  box-shadow: 0 24px 54px rgba(15, 24, 32, 0.12);
}

.ff-article-body > * + * {
  margin-top: 2rem;
}

.ff-article-body p,
.ff-article-body li {
  font-size: 1.05rem;
  line-height: 1.9;
}

.ff-article-body h2,
.ff-article-body h3,
.ff-article-body h4 {
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.ff-article-sidebar {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Phase 24: new blog post sidebar — sticky with nav clearance per Phase-22 */
.ff-blog-post-sidebar {
  position: sticky;
  top: 96px;
  align-self: start;
}

.ff-article-block figcaption,
.ff-code-block figcaption {
  margin-top: 0.85rem;
  color: var(--ff-neutral-500);
  font-size: 0.92rem;
}

.ff-quote-block {
  margin: 0;
  padding: 2rem 2.2rem;
  border: 1px solid rgba(232, 159, 43, 0.35);
  border-radius: 0.75rem;
  background: rgba(255, 250, 237, 0.92);
}

.ff-quote-copy {
  font-family: var(--ff-font-display);
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--ff-neutral-900);
}

.ff-quote-block footer {
  margin-top: 1rem;
  color: var(--ff-neutral-500);
  font-size: 0.95rem;
}

.ff-embed-block iframe {
  border: 0;
  border-radius: 0.75rem;
}

.ff-two-col-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 767.98px) {
  .ff-two-col-block {
    grid-template-columns: 1fr;
  }
}

/* ── Feature page layout ──────────────────────────────────────────
   The body sits in the standard 1200px .wrap so feature pages are sized
   the same as the pricing and blog pages. The hero, feature grid, and
   CTA blocks carry their own inner .wrap — flatten it so their content
   lines up with everything else instead of getting a doubled gutter. */
.ff-feature-page .ff-feature-body > * + * {
  margin-top: 3rem;
}

.ff-feature-page .ff-feature-body .wrap {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* The page-title header was removed from feature pages, so the shell's
   default 80px top padding now reads as an empty gap. Trim it, and let a
   leading hero sit flush — the hero carries its own 100px of top padding,
   which is the visual breathing room. Non-hero leads keep the smaller gap. */
.ff-feature-page.ff-page-shell {
  padding-top: 2rem;
}

.ff-feature-page .ff-feature-body > .ff-hero:first-child {
  margin-top: -2rem;
}

.ff-table-block {
  overflow-x: auto;
}

.ff-table-block table {
  width: 100%;
  border-collapse: collapse;
}

.ff-table-block caption {
  margin-bottom: 0.85rem;
  color: var(--ff-neutral-500);
  font-size: 0.92rem;
  caption-side: bottom;
}

.ff-table-block th,
.ff-table-block td {
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(15, 24, 32, 0.12);
  text-align: left;
}

.ff-table-block th {
  background: rgba(255, 250, 237, 0.92);
  color: var(--ff-neutral-900);
}

.ff-code-block {
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--ff-dark);
  box-shadow: 0 20px 48px rgba(8, 15, 25, 0.18);
}

.ff-code-language {
  margin-bottom: 0.75rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ff-codehilite {
  margin: 0;
  padding: 1.15rem 1.25rem;
  overflow-x: auto;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.06);
}

.ff-codehilite pre,
.ff-codehilite code {
  margin: 0;
  color: var(--ff-white);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.92rem;
  line-height: 1.75;
}

.ff-copy-link {
  color: var(--ff-dark);
}

@media (max-width: 767.98px) {
  .section-pad {
    padding: 3.5rem 0;
  }

  .ff-blog-subscribe {
    padding-top: 1rem;
  }

  .ff-blog-toolbar,
  .ff-blog-state {
    padding: 1rem 0;
  }

  .ff-blog-state {
    align-items: flex-start;
  }

  .ff-blog-search-controls {
    align-items: stretch;
  }

  .ff-blog-search-input {
    flex-basis: 100%;
  }

  .ff-article-sidebar {
    position: static;
  }

  .ff-quote-copy {
    font-size: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ff-filter-pill,
  .ff-tag-chip,
  .ff-category-pill,
  .ff-inline-link,
  .ff-feed-btn,
  .ff-blog-card-title a {
    transition: none;
  }

  .ff-filter-pill:hover,
  .ff-filter-pill:focus-visible,
  .ff-filter-pill.is-active {
    transform: none;
  }
}

/* ==========================================================================
   Phase 24 — Blog index components per UI-SPEC §1–5
   ========================================================================== */

.ff-blog-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 48px;
}

@media (max-width: 880px) {
  .ff-blog-hero { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
}

.ff-blog-filter { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.ff-blog-filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.ff-blog-lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width: 880px) { .ff-blog-lead-grid { grid-template-columns: 1fr; } }
.ff-blog-lead-image img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; display: block; }
.ff-blog-lead-body { padding: 40px 44px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 880px) { .ff-blog-lead-body { padding: 32px 28px; } }

.ff-blog-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 32px; }
@media (max-width: 880px) { .ff-blog-card-grid { grid-template-columns: 1fr; gap: 24px; } }

.ff-blog-card { display: flex; flex-direction: column; overflow: hidden; }
.ff-blog-card-body { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ff-blog-card-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.85rem; color: var(--ff-neutral-500); }
.ff-blog-card-title { font-family: var(--ff-font-display, "Funnel Display"), sans-serif; font-size: 1.35rem; font-weight: 600; line-height: 1.25; margin: 0; }
.ff-blog-card-title a { color: var(--ff-neutral-700); text-decoration: none; }
.ff-blog-card-title a:hover, .ff-blog-card-title a:focus { color: var(--ff-secondary); }
.ff-blog-card-excerpt { font-size: 0.95rem; line-height: 1.65; color: var(--ff-neutral-500); margin: 0; flex: 1; }

/* Subtle archive rhythm variation to reduce visual monotony in long grids. */
.ff-blog-card:nth-child(3n+2) .ff-blog-card-image img { aspect-ratio: 4 / 3; }
.ff-blog-card:nth-child(3n+3) .ff-blog-card-image img { aspect-ratio: 16 / 10; }

.ff-blog-empty { padding: 48px 24px; text-align: center; color: var(--ff-neutral-500); }
.ff-blog-empty h2 { font-family: var(--ff-font-display, "Funnel Display"), sans-serif; font-size: 1.25rem; font-weight: 600; margin: 0 0 8px; color: var(--ff-neutral-700); }

/* ==========================================================================
   Phase 24 — Blog post page components per UI-SPEC §6, §8
   ========================================================================== */

.ff-blog-post { max-width: 1100px; margin: 0 auto; }
.ff-blog-post-header { max-width: 760px; margin-bottom: 40px; }
@media (max-width: 768px) { .ff-blog-post-header { margin-bottom: 28px; } }
.ff-blog-post-hero { margin-bottom: 40px; }
.ff-blog-post-hero img { width: 100%; height: auto; border-radius: 8px; display: block; }

.ff-blog-post-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; }
@media (max-width: 980px) { .ff-blog-post-grid { grid-template-columns: 1fr; gap: 32px; } }

.ff-blog-post-body { max-width: 760px; }

@media (max-width: 980px) {
  .ff-blog-post-sidebar { position: static; }
}

.ff-share-panel { padding: 0; }
.ff-share-panel + .ff-share-panel { padding-top: 1.5rem; border-top: 1px solid rgba(205, 212, 216, 0.8); }
.ff-share-panel h3 { font-family: var(--ff-font-display, "Funnel Display"), sans-serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ff-neutral-500); margin: 0 0 12px; }
.ff-share-panel-body { margin: 0; color: var(--ff-neutral-700); font-size: 0.92rem; line-height: 1.55; }
.ff-share-buttons { display: flex; flex-direction: column; gap: 0.55rem; }
.ff-share-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; gap: 8px; padding: 8px 14px; border: 1px solid var(--ff-neutral-300); border-radius: 6px; color: var(--ff-neutral-700); text-decoration: none; font-size: 0.92rem; font-weight: 500; background: var(--ff-white); transition: background-color 0.15s ease, border-color 0.15s ease; }
.ff-share-btn:hover, .ff-share-btn:focus { background: var(--ff-neutral-100); border-color: var(--ff-secondary); }
.ff-feed-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; gap: 8px; padding: 8px 14px; border: 1px solid var(--ff-neutral-300); border-radius: 6px; color: var(--ff-neutral-700); text-decoration: none; font-size: 0.92rem; font-weight: 500; background: var(--ff-white); transition: background-color 0.15s ease, border-color 0.15s ease; }
.ff-feed-btn:hover, .ff-feed-btn:focus { background: var(--ff-neutral-100); border-color: var(--ff-secondary); }
/* Preserve existing .ff-copy-link JS hook per D-10 — no markup change to that button */

.ff-related-posts {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(205, 212, 216, 0.9);
}

.ff-related-posts h2 {
  margin: 0.35rem 0 1.25rem;
  font-family: var(--ff-font-display, "Funnel Display"), sans-serif;
  font-size: 1.35rem;
  line-height: 1.25;
}

.ff-related-post-list {
  display: grid;
  gap: 1.25rem;
}

.ff-related-post {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(205, 212, 216, 0.7);
}

.ff-related-post:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.ff-related-post h3 {
  margin: 0.65rem 0 0.35rem;
  font-family: var(--ff-font-display, "Funnel Display"), sans-serif;
  font-size: 1.08rem;
  line-height: 1.3;
}

.ff-related-post h3 a {
  color: var(--ff-neutral-900);
  text-decoration: none;
}

.ff-related-post h3 a:hover,
.ff-related-post h3 a:focus-visible {
  color: var(--ff-secondary);
}

.ff-related-post p {
  margin: 0;
  color: var(--ff-neutral-700);
  font-size: 0.94rem;
  line-height: 1.65;
}

/* ==========================================================================
   Phase 19 — Knowledge Base Styles (rewritten in Phase 24)
   ========================================================================== */

.ff-kb-shell {
  padding-top: 2rem;
}

/* Breadcrumb — custom <ol> per UI-SPEC §14 (Bootstrap .breadcrumb/.breadcrumb-item removed) */
.ff-kb-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  color: var(--ff-neutral-500);
}

@media (max-width: 640px) {
  .ff-kb-breadcrumb { margin-bottom: 16px; font-size: 0.85rem; }
}

.ff-kb-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ff-kb-breadcrumb li + li::before {
  content: '›';
  color: var(--ff-neutral-500);
}

.ff-kb-breadcrumb a {
  color: var(--ff-neutral-500);
  text-decoration: none;
}

.ff-kb-breadcrumb a:hover,
.ff-kb-breadcrumb a:focus {
  color: var(--ff-secondary);
  text-decoration: underline;
}

.ff-kb-breadcrumb [aria-current="page"] {
  color: var(--ff-neutral-700);
  font-weight: 500;
}

/* Sidebar */
.ff-kb-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (min-width: 981px) {
  .ff-kb-sidebar {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

@media (max-width: 980px) {
  .ff-kb-sidebar {
    border-bottom: 1px solid rgba(205, 212, 216, 0.7);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
  }
}

.ff-kb-sidebar-heading {
  color: var(--ff-neutral-500);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.ff-kb-nav-link {
  display: block;
  padding: 8px 12px;
  border-radius: 0.5rem;
  color: var(--ff-neutral-700);
  font-size: 0.92rem;
  min-height: 36px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ff-kb-nav-link:hover {
  background: var(--ff-neutral-100);
  color: var(--ff-neutral-700);
}

.ff-kb-nav-link.is-current {
  background: var(--ff-neutral-100);
  color: var(--ff-secondary);
  font-weight: 600;
}

/* Article list (section page) */
.ff-kb-article-list .ff-kb-article-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(205, 212, 216, 0.5);
}

.ff-kb-article-list .ff-kb-article-row:last-child {
  border-bottom: none;
}

.ff-kb-article-icon {
  color: var(--ff-neutral-500);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.ff-kb-article-link {
  color: var(--ff-neutral-700);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.ff-kb-article-link:hover {
  color: var(--ff-secondary);
}

/* Section header */
.ff-kb-section-header h1 {
  font-weight: 700;
}

/* KB article body styling now inherited from .ff-richtext per D-01 */

/* Pager */
.ff-kb-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--ff-neutral-300);
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .ff-kb-pager { flex-direction: column; gap: 12px; }
}

.ff-kb-pager-prev,
.ff-kb-pager-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ff-neutral-700);
  text-decoration: none;
  font-weight: 500;
}

.ff-kb-pager-prev:hover, .ff-kb-pager-next:hover {
  color: var(--ff-secondary);
}

.ff-kb-pager-label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ff-neutral-500);
  margin-bottom: 4px;
}

/* Admonition blocks */
.ff-kb-admonition--info { border: 1px solid var(--ff-info); background: var(--ff-info-light); }
.ff-kb-admonition--warning { border: 1px solid var(--ff-warning); background: var(--ff-warning-light); }
.ff-kb-admonition--tip { border: 1px solid var(--ff-success); background: var(--ff-success-light); }
.ff-kb-admonition--danger { border: 1px solid var(--ff-danger); background: var(--ff-danger-light); }

/* Phase 22 — footer social-icon row (per UI-SPEC §Visuals item 8) */
.f-socials {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.f-socials a {
  color: rgba(255, 255, 255, 0.38);
  font-size: 1.1rem;
  text-decoration: none;
  transition: color 0.2s ease;
}
.f-socials a:hover {
  color: var(--ff-primary-light, #F8D48A);
}

/* ==========================================================================
   Phase 24 — KB index components per UI-SPEC §10, §11
   ========================================================================== */

.ff-kb-hero { margin-bottom: 48px; }
@media (max-width: 768px) { .ff-kb-hero { margin-bottom: 32px; } }

.ff-kb-section-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
@media (max-width: 980px) { .ff-kb-section-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ff-kb-section-grid { grid-template-columns: 1fr; } }

.ff-kb-section-card { display: flex; flex-direction: column; gap: 12px; padding: 32px 28px 28px; background: var(--ff-white); border: 1px solid var(--ff-neutral-300); border-radius: 12px; text-decoration: none; color: var(--ff-neutral-700); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.ff-kb-section-card:hover, .ff-kb-section-card:focus { border-color: var(--ff-secondary); box-shadow: 0 8px 24px rgba(15, 24, 32, 0.08); transform: translateY(-2px); }
.ff-kb-section-card-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--ff-secondary); font-size: 1.5rem; }
.ff-kb-section-card h2 { font-family: var(--ff-font-display, "Funnel Display"), sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1.25; margin: 0; }
.ff-kb-section-card p { font-size: 0.95rem; line-height: 1.6; color: var(--ff-neutral-500); margin: 0; }

/* ==========================================================================
   Phase 24 — KB body+sidebar layout (section + article) per UI-SPEC §12 + D-08
   ========================================================================== */

.ff-kb-page-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; }

@media (min-width: 981px) {
  .ff-kb-page-grid.is-section-page { grid-template-columns: minmax(0, 1fr) 240px; }
}

@media (max-width: 980px) {
  .ff-kb-page-grid,
  .ff-kb-page-grid.is-section-page { grid-template-columns: 1fr; gap: 32px; }
}

.ff-kb-nav { display: flex; flex-direction: column; gap: 2px; padding: 0; margin: 0; list-style: none; }

/* ==========================================================================
   Phase 24 — KB empty states per UI-SPEC §17
   ========================================================================== */

.ff-kb-empty,
.ff-kb-section-empty { padding: 48px 24px; text-align: center; color: var(--ff-neutral-500); }
.ff-kb-empty h2,
.ff-kb-section-empty h2 { font-family: var(--ff-font-display, "Funnel Display"), sans-serif; font-size: 1.25rem; font-weight: 600; margin: 0 0 8px; color: var(--ff-neutral-700); }