/* ==========================================================================
   Block8.ai Ghost theme - screen.css
   INTERNAL DRAFT - pending human review (Block8.ai output policy).

   Sources of truth used for this build:
   - Block8.ai Brand Style Guide (August 2025) values, as codified in the
     block8-frontend DESIGN.md / @block8/theme colour exports.
   - Marketing purple palette as documented in the client-portal theming
     header (brand magenta highlight on the deep purple ramp, plum button
     border and reverse-font navy); values are declared once in Layer 1.
   NOTE: the binding build spec was not available to this build agent (its
   path resolved to "undefined"); the class contract below follows the agreed
   component list and must be reconciled against the spec when available.

   Layer map
   0. Self-hosted fonts (zero external requests)
   1. Design tokens (the ONLY place colour literals may appear)
   2. Reset, base elements, typography, accessibility
   3. Site components (.b8-*)
   4. Koenig editor content (.gh-content, .kg-*)
   5. Utilities
   6. Responsive (1024 / 880 / 720 / 560)
   7. Reduced motion
   ========================================================================== */


/* ==========================================================================
   Layer 0 - Fonts (self-hosted variable fonts, no external requests)
   ========================================================================== */

@font-face {
  font-family: "Roboto";
  src:
    url("../fonts/roboto-var.woff2") format("woff2-variations"),
    url("../fonts/roboto-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src:
    url("../fonts/roboto-var-italic.woff2") format("woff2-variations"),
    url("../fonts/roboto-var-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono";
  src:
    url("../fonts/roboto-mono-var.woff2") format("woff2-variations"),
    url("../fonts/roboto-mono-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   Layer 1 - Design tokens
   All colour literals live here. Components reference var(--b8-*) only.
   ========================================================================== */

:root {
  /* Brand core - Block8.ai Brand Style Guide (August 2025) */
  --b8-magenta: #db2b65;          /* brand primary / highlight */
  --b8-magenta-bright: #ec4178;   /* primary 500 - hover-adjacent, focus ring */
  --b8-magenta-soft: #f99ebe;     /* primary 300 - tints on dark */
  --b8-magenta-strong: #c02156;   /* primary 700 - links on light surfaces */
  --b8-magenta-deep: #9f1d4a;     /* primary 800 */
  --b8-plum: #732269;             /* button border magenta-purple */
  --b8-purple: #421e62;           /* base purple */
  --b8-purple-dark: #320f51;      /* hover purple */
  --b8-purple-deeper: #260a45;    /* button / card background purple */
  --b8-elevated: #2c0e49;         /* elevated card surface (spec) */
  --b8-ink: #1c003b;              /* darkest purple - shell / page background */
  --b8-footer-bg: #0e0021;        /* footer band (spec: .b8-footer on #0E0021) */
  --b8-navy: #1a1f4a;             /* reverse font navy - text on light surfaces */
  --b8-table-row-a: #282561;      /* partner table alternating row A (spec) */
  --b8-table-row-b: #352d6e;      /* partner table alternating row B (spec) */
  --b8-gradient-magenta: linear-gradient(135deg, #db2b65 0%, #732269 100%);

  /* Text on dark surfaces */
  --b8-text: #eaecee;
  --b8-text-muted: #a9b4be;
  --b8-text-soft: #8396a8;
  --b8-white: #ffffff;
  --b8-black: #000000;

  /* Light surface (legal pages) - grey-100 per the brand style guide */
  --b8-light-bg: #ffffff;
  --b8-light-bg-alt: #f5f5f5;
  --b8-light-border: #e5e7eb;
  --b8-light-text: #111827;
  --b8-light-text-muted: #4b5563;

  /* Severity bands (dark-surface values, per @block8/theme SEVERITY_DARK) */
  --b8-sev-critical: #ef4444;
  --b8-sev-high: #fb923c;
  --b8-sev-medium: #facc15;
  --b8-sev-low: #4ade80;
  --b8-sev-info: #60a5fa;
  --b8-sev-none: #a3a3a3;

  /* Derived surfaces and lines (alpha composites of the core palette) */
  --b8-surface-card: rgba(38, 10, 69, 0.55);      /* purple-deeper glass card */
  --b8-surface-raised: rgba(50, 15, 81, 0.75);    /* purple-dark raised panel */
  --b8-surface-code: rgba(28, 0, 59, 0.85);       /* ink code background */
  --b8-border: rgba(219, 43, 101, 0.30);          /* magenta hairline */
  --b8-border-soft: rgba(234, 236, 238, 0.14);    /* neutral hairline */
  --b8-overlay: rgba(28, 0, 59, 0.80);            /* nav / scrim overlay */
  --b8-scrim: rgba(0, 0, 0, 0.40);                /* photo darkening scrim */
  --b8-tint-magenta: rgba(219, 43, 101, 0.12);    /* subtle magenta wash */
  --b8-tint-text: rgba(234, 236, 238, 0.07);      /* subtle neutral wash */

  /* Ghost accent bridge - Ghost injects --ghost-accent-color at runtime */
  --b8-accent: var(--ghost-accent-color, #db2b65);

  /* Radii - the only permitted corner values */
  --b8-radius-sm: 8px;
  --b8-radius-md: 16px;
  --b8-radius-lg: 20px;
  --b8-radius-xl: 30px;
  --b8-radius-pill: 999px;

  /* Shadows - magenta glow only (the design system bans neutral drop-shadows) */
  --b8-glow-sm: 0 0 12px rgba(219, 43, 101, 0.25);
  --b8-glow-md: 0 0 24px rgba(219, 43, 101, 0.35);
  --b8-glow-lg: 0 0 48px rgba(219, 43, 101, 0.45);
  --b8-shadow-glow: var(--b8-glow-md);          /* spec alias */
  --b8-shadow-glow-strong: var(--b8-glow-lg);   /* spec alias */
  --b8-shadow-card: 0 8px 32px -8px rgba(219, 43, 101, 0.45); /* DS card glow recipe */

  /* Motion - expo-out easing and durations per the design system */
  --b8-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --b8-dur-fast: 120ms;
  --b8-dur-med: 220ms;
  --b8-dur-slow: 420ms;

  /* Type */
  --b8-font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  --b8-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo,
    Consolas, monospace;

  /* Layout - container 1200px with 32px gutters per the spec contract */
  --b8-container: 1200px;
  --b8-container-narrow: 760px;
  --b8-content-width: 720px;
  --b8-header-height: 72px;
  --b8-gutter: 32px;

  /* Focus */
  --b8-focus: var(--b8-magenta-bright);
}


/* ==========================================================================
   Layer 2 - Reset, base elements, typography, accessibility
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--b8-font-sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--b8-text);
  background-color: var(--b8-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Lock page scroll while the mobile nav overlay is open */
body.b8-nav-open {
  overflow: hidden;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.6em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em; /* headline tracking per the brand style guide */
  color: var(--b8-white);
}

/* H1 is regular weight per the style guide - the size carries it */
h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 400;
}
h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; }

p {
  margin: 0 0 1.2em;
}

a {
  color: var(--b8-magenta-bright);
  text-decoration: none;
  transition: opacity var(--b8-dur-fast) var(--b8-ease);
}

a:hover {
  opacity: 0.8;
}

strong,
b {
  font-weight: 700;
  color: var(--b8-white);
}

small {
  font-size: 0.85em;
}

hr {
  border: 0;
  border-top: 1px solid var(--b8-border-soft);
  margin: 2.5rem 0;
}

code,
kbd,
samp {
  font-family: var(--b8-font-mono);
  font-size: 0.9em;
}

::selection {
  background: var(--b8-magenta);
  color: var(--b8-white);
}

/* Focus-visible ring - keyboard navigation affordance */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--b8-focus);
  outline-offset: 3px;
  border-radius: var(--b8-radius-sm);
}

/* Screen-reader-only content */
.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;
}

/* Skip link - first focusable element on every page */
.b8-skip-link {
  position: fixed;
  top: -100%;
  left: var(--b8-gutter);
  z-index: 200;
  padding: 0.6rem 1.2rem;
  background: var(--b8-magenta);
  color: var(--b8-white);
  font-weight: 600;
  border-radius: var(--b8-radius-pill);
  transition: top var(--b8-dur-fast) var(--b8-ease);
}

.b8-skip-link:focus-visible {
  top: var(--b8-gutter);
  outline: 2px solid var(--b8-white);
  outline-offset: 3px;
}


/* ==========================================================================
   Layer 3 - Site components
   ========================================================================== */

/* --- Layout scaffolding ------------------------------------------------- */

.b8-container {
  width: 100%;
  max-width: var(--b8-container);
  margin: 0 auto;
  padding-left: var(--b8-gutter);
  padding-right: var(--b8-gutter);
}

.b8-container--narrow {
  max-width: var(--b8-container-narrow);
}

.b8-main {
  display: block;
  min-height: 60vh;
}

.b8-section {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}

.b8-section--tight {
  padding: clamp(2rem, 5vw, 3.5rem) 0;
}

.b8-section__kicker {
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--b8-font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--b8-magenta-bright);
}

.b8-section__title {
  max-width: 22ch;
}

.b8-section__lede {
  max-width: 58ch;
  font-size: 1.15rem;
  color: var(--b8-text-muted);
}

.b8-section--center .b8-section__title,
.b8-section--center .b8-section__lede {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* --- Background image sections ------------------------------------------
   Filenames must match assets/images/backgrounds exactly:
   B8_Back_1.jpg, B8_Back_1F.jpg, B8_Back_1F_2.jpg, B8_Front_Cover.jpg */

.b8-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}

.b8-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--b8-scrim), var(--b8-overlay));
}

.b8-bg--cover {
  background-image: url("../images/backgrounds/B8_Front_Cover.jpg");
}

.b8-bg--one {
  background-image: url("../images/backgrounds/B8_Back_1.jpg");
}

.b8-bg--one-f {
  background-image: url("../images/backgrounds/B8_Back_1F.jpg");
}

.b8-bg--one-f2 {
  background-image: url("../images/backgrounds/B8_Back_1F_2.jpg");
}

/* Decorative particle - pulses via opacity only (no transform drift) */
.b8-bg-particle {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: var(--b8-radius-pill);
  background: radial-gradient(circle, var(--b8-tint-magenta) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: b8-particle-pulse 7s var(--b8-ease) infinite alternate;
}

.b8-bg-particle--sm {
  width: 120px;
  height: 120px;
}

.b8-bg-particle--lg {
  width: 380px;
  height: 380px;
  animation-duration: 11s;
}

.b8-bg-particle:nth-of-type(2n) {
  animation-delay: 2.2s;
}

.b8-bg-particle:nth-of-type(3n) {
  animation-delay: 4.1s;
}

@keyframes b8-particle-pulse {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

/* --- Header and navigation ---------------------------------------------- */

.b8-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--b8-header-height);
  background: var(--b8-overlay);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--b8-border-soft);
}

.b8-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
  max-width: var(--b8-container);
  margin: 0 auto;
  padding: 0 var(--b8-gutter);
}

.b8-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--b8-white);
}

.b8-logo img {
  height: 36px;
  width: auto;
}

.b8-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Live parity: 0.8rem gap + item padding = the live 42px text rhythm */
/* Child combinator on purpose: this must style ONLY the top-level nav row.
   A bare ".b8-nav ul" also matches the nested dropdown <ul>s and its
   display:flex outranks .b8-nav__dropdown's display:none (0,1,1 vs 0,1,0),
   leaving both menus permanently visible. */
.b8-nav > ul {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.b8-nav__link,
.b8-nav a {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--b8-text);
  border-radius: var(--b8-radius-pill);
  transition: opacity var(--b8-dur-fast) var(--b8-ease),
    background-color var(--b8-dur-fast) var(--b8-ease);
}

.b8-nav__link:hover,
.b8-nav a:hover {
  opacity: 0.8;
}

.b8-nav__link[aria-current="page"],
.b8-nav .nav-current a,
.b8-nav__link.is-active {
  color: var(--b8-magenta-bright);
  background: var(--b8-tint-magenta);
}

.b8-header__cta {
  flex-shrink: 0;
}

/* Burger toggle - hidden on desktop, shown at the 880px switch.
   Open state communicates via opacity (no transforms outside :active). */
.b8-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-sm);
  cursor: pointer;
  transition: opacity var(--b8-dur-fast) var(--b8-ease);
}

.b8-burger:hover {
  opacity: 0.8;
}

.b8-burger:active {
  transform: translateY(1px);
}

.b8-burger__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--b8-text);
  border-radius: var(--b8-radius-pill);
  transition: opacity var(--b8-dur-fast) var(--b8-ease),
    background-color var(--b8-dur-fast) var(--b8-ease);
}

.b8-burger[aria-expanded="true"] .b8-burger__bar:nth-child(1),
.b8-burger[aria-expanded="true"] .b8-burger__bar:nth-child(3) {
  opacity: 0.35;
}

.b8-burger[aria-expanded="true"] .b8-burger__bar:nth-child(2) {
  background: var(--b8-magenta-bright);
}

/* --- Buttons -------------------------------------------------------------
   Hover is opacity 0.8; transform is reserved for the :active press. */

.b8-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.6rem;
  font-family: var(--b8-font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--b8-text);
  background: transparent;
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-pill);
  cursor: pointer;
  transition: opacity var(--b8-dur-fast) var(--b8-ease);
}

.b8-btn:hover {
  opacity: 0.8;
}

.b8-btn:active {
  /* Press feedback is translate-only per the design system (no scale/spring) */
  transform: translateY(1px);
}

.b8-btn--primary {
  color: var(--b8-white);
  background: var(--b8-magenta);
  border-color: var(--b8-magenta);
  box-shadow: var(--b8-glow-sm);
}

.b8-btn--ghost {
  color: var(--b8-magenta-bright);
  background: var(--b8-purple-deeper);
  border-color: var(--b8-plum);
}

.b8-btn--light {
  color: var(--b8-navy);
  background: var(--b8-white);
  border-color: var(--b8-white);
}

.b8-btn--lg {
  padding: 1rem 2.2rem;
  font-size: 1.1rem;
}

.b8-btn--sm {
  padding: 0.45rem 1.1rem;
  font-size: 0.9rem;
}

.b8-btn[disabled],
.b8-btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* --- Hero ----------------------------------------------------------------- */

.b8-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(88vh, 820px);
  padding: clamp(4rem, 10vw, 8rem) 0;
  overflow: hidden;
}

.b8-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--b8-container);
  margin: 0 auto;
  padding: 0 var(--b8-gutter);
}

.b8-hero__kicker {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--b8-font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--b8-magenta-bright);
}

.b8-hero__title {
  max-width: 18ch;
  margin-bottom: 1.2rem;
  /* Spec contract: clamp 40-72px, weight 400 */
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 400;
}

.b8-hero__tagline {
  max-width: 52ch;
  margin-bottom: 2.2rem;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--b8-text-muted);
}

.b8-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* --- Trust strip ----------------------------------------------------------
   Certification and accreditation band (e.g. ISO 27001:2022, CREST). */

.b8-trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2.5rem;
  padding: 1.4rem var(--b8-gutter);
  border-top: 1px solid var(--b8-border-soft);
  border-bottom: 1px solid var(--b8-border-soft);
  background: var(--b8-tint-text);
}

.b8-trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--b8-font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--b8-text-muted);
  white-space: nowrap;
}

.b8-trust-strip__item img,
.b8-trust-strip__logo {
  height: 34px;
  width: auto;
  opacity: 0.85;
}

.b8-trust-strip__item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--b8-radius-pill);
  background: var(--b8-magenta);
  flex-shrink: 0;
}

/* --- Severity pills --------------------------------------------------------
   Matches the report-portal idiom: 15% tinted background, full-value text. */

.b8-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.85rem;
  font-family: var(--b8-font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--b8-text-muted);
  background: var(--b8-tint-text);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-pill);
  white-space: nowrap;
}

.b8-pill--critical {
  color: var(--b8-sev-critical);
  background: color-mix(in srgb, var(--b8-sev-critical) 15%, transparent);
  border-color: color-mix(in srgb, var(--b8-sev-critical) 40%, transparent);
}

.b8-pill--high {
  color: var(--b8-sev-high);
  background: color-mix(in srgb, var(--b8-sev-high) 15%, transparent);
  border-color: color-mix(in srgb, var(--b8-sev-high) 40%, transparent);
}

.b8-pill--medium {
  color: var(--b8-sev-medium);
  background: color-mix(in srgb, var(--b8-sev-medium) 15%, transparent);
  border-color: color-mix(in srgb, var(--b8-sev-medium) 40%, transparent);
}

.b8-pill--low {
  color: var(--b8-sev-low);
  background: color-mix(in srgb, var(--b8-sev-low) 15%, transparent);
  border-color: color-mix(in srgb, var(--b8-sev-low) 40%, transparent);
}

.b8-pill--info {
  color: var(--b8-sev-info);
  background: color-mix(in srgb, var(--b8-sev-info) 15%, transparent);
  border-color: color-mix(in srgb, var(--b8-sev-info) 40%, transparent);
}

.b8-pill--none {
  color: var(--b8-sev-none);
  background: color-mix(in srgb, var(--b8-sev-none) 15%, transparent);
  border-color: color-mix(in srgb, var(--b8-sev-none) 40%, transparent);
}

.b8-pill--brand {
  color: var(--b8-magenta-bright);
  background: var(--b8-tint-magenta);
  border-color: var(--b8-border);
}

/* --- Feature cards ---------------------------------------------------------- */

.b8-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.b8-feature-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.8rem;
  background: var(--b8-surface-card);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-lg);
  box-shadow: var(--b8-shadow-card);
}

.b8-feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--b8-tint-magenta);
  border: 1px solid var(--b8-border);
  border-radius: var(--b8-radius-md);
  color: var(--b8-magenta-bright);
}

.b8-feature-card__icon img,
.b8-feature-card__icon svg {
  width: 26px;
  height: 26px;
}

.b8-feature-card__title {
  margin: 0;
  font-size: 1.2rem;
}

.b8-feature-card__copy {
  margin: 0;
  font-size: 0.98rem;
  color: var(--b8-text-muted);
}

.b8-feature-card__link {
  margin-top: auto;
  font-weight: 600;
  color: var(--b8-magenta-bright);
}

a.b8-feature-card {
  color: inherit;
  transition: opacity var(--b8-dur-fast) var(--b8-ease);
}

a.b8-feature-card:hover {
  opacity: 0.8;
}

a.b8-feature-card:active {
  transform: translateY(1px);
}

/* --- Card table --------------------------------------------------------------
   Table rendered as stacked card rows; wrapper provides horizontal scroll. */

.b8-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.b8-card-table {
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 0 10px;
  font-size: 0.98rem;
}

.b8-card-table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 0.6rem;
  font-family: var(--b8-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--b8-text-soft);
}

.b8-card-table th {
  padding: 0.5rem 1.1rem;
  font-family: var(--b8-font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--b8-text-soft);
}

.b8-card-table td {
  padding: 0.95rem 1.1rem;
  background: var(--b8-surface-card);
  border-top: 1px solid var(--b8-border-soft);
  border-bottom: 1px solid var(--b8-border-soft);
  color: var(--b8-text);
  vertical-align: middle;
}

.b8-card-table td:first-child {
  border-left: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-sm) 0 0 var(--b8-radius-sm);
}

.b8-card-table td:last-child {
  border-right: 1px solid var(--b8-border-soft);
  border-radius: 0 var(--b8-radius-sm) var(--b8-radius-sm) 0;
}

/* --- Process steps ------------------------------------------------------------ */

.b8-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: b8-step;
}

.b8-process-step {
  position: relative;
  counter-increment: b8-step;
  padding: 1.6rem;
  background: var(--b8-surface-card);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-md);
}

.b8-process-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  font-family: var(--b8-font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--b8-magenta-bright);
  background: var(--b8-tint-magenta);
  border: 1px solid var(--b8-border);
  border-radius: var(--b8-radius-pill);
  box-shadow: var(--b8-glow-sm);
}

.b8-process-step__num:empty::before {
  content: counter(b8-step, decimal-leading-zero);
}

.b8-process-step__title {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
}

.b8-process-step__copy {
  margin: 0;
  font-size: 0.95rem;
  color: var(--b8-text-muted);
}

/* Connector line between steps (desktop only) */
.b8-process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.9rem;
  left: calc(100% + 1px);
  width: 1.5rem;
  height: 1px;
  background: var(--b8-border);
}

/* --- Forms and inputs ------------------------------------------------------------ */

.b8-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 560px;
}

.b8-form--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
}

.b8-form--inline .b8-input {
  flex: 1 1 260px;
}

.b8-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.b8-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--b8-text);
}

.b8-label__hint {
  font-weight: 400;
  color: var(--b8-text-soft);
}

.b8-input {
  width: 100%;
  padding: 0.75rem 1.1rem;
  font-family: var(--b8-font-sans);
  font-size: 1rem;
  color: var(--b8-text);
  background: var(--b8-purple-deeper);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-sm);
  transition: border-color var(--b8-dur-fast) var(--b8-ease);
  appearance: none;
}

.b8-input::placeholder {
  color: var(--b8-text-soft);
  opacity: 1;
}

.b8-input:hover {
  border-color: var(--b8-border);
}

.b8-input:focus-visible {
  outline: 2px solid var(--b8-focus);
  outline-offset: 2px;
  border-color: var(--b8-magenta);
}

textarea.b8-input {
  min-height: 140px;
  resize: vertical;
}

select.b8-input {
  cursor: pointer;
}

.b8-input[aria-invalid="true"],
.b8-input.is-error {
  border-color: var(--b8-sev-critical);
}

.b8-form-note {
  font-size: 0.85rem;
  color: var(--b8-text-soft);
}

.b8-form-error {
  font-size: 0.9rem;
  color: var(--b8-sev-critical);
}

.b8-form-success {
  font-size: 0.9rem;
  color: var(--b8-sev-low);
}

/* Ghost members form state hooks (data-members-form toggles these classes) */
.b8-form .message-success,
.b8-form .message-error {
  display: none;
}

.b8-form.success .message-success {
  display: block;
}

.b8-form.error .message-error {
  display: block;
}

.b8-form.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* --- Post cards (index, tag, author, related) -------------------------------------- */

.b8-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.b8-post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--b8-surface-card);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-lg);
  box-shadow: var(--b8-shadow-card);
  transition: opacity var(--b8-dur-fast) var(--b8-ease);
}

.b8-post-card:hover {
  opacity: 0.8;
}

.b8-post-card:active {
  transform: translateY(1px);
}

.b8-post-card__image-link {
  display: block;
}

.b8-post-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.b8-post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.7rem;
  padding: 1.5rem;
}

.b8-post-card__tag {
  font-family: var(--b8-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--b8-magenta-bright);
}

.b8-post-card__title {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.3;
}

.b8-post-card__title a {
  color: var(--b8-white);
}

/* Stretched-link pattern: whole card is clickable via the title anchor */
.b8-post-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.b8-post-card__excerpt {
  margin: 0;
  font-size: 0.97rem;
  color: var(--b8-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.b8-post-card__meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: auto;
  padding-top: 0.8rem;
  font-family: var(--b8-font-mono);
  font-size: 0.78rem;
  color: var(--b8-text-soft);
  border-top: 1px solid var(--b8-border-soft);
}

.b8-post-card__avatar {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: var(--b8-radius-pill);
  border: 1px solid var(--b8-border-soft);
}

.b8-post-card__meta-sep::before {
  content: "/";
  color: var(--b8-border);
}

/* Featured / lead card spans the full grid width on desktop */
.b8-post-card--featured {
  grid-column: 1 / -1;
  flex-direction: row;
}

.b8-post-card--featured .b8-post-card__image-link {
  flex: 1 1 55%;
}

.b8-post-card--featured .b8-post-card__image {
  height: 100%;
  aspect-ratio: auto;
  min-height: 320px;
}

.b8-post-card--featured .b8-post-card__body {
  flex: 1 1 45%;
  justify-content: center;
  padding: 2.2rem;
}

.b8-post-card--featured .b8-post-card__title {
  font-size: 1.8rem;
}

/* --- Archive / page headers (tag, author) --------------------------------------------- */

.b8-page-header {
  padding: clamp(3rem, 7vw, 5rem) 0 1rem;
}

.b8-page-header__kicker {
  display: block;
  margin-bottom: 0.8rem;
  font-family: var(--b8-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--b8-magenta-bright);
}

.b8-page-header__title {
  margin-bottom: 0.5rem;
}

.b8-page-header__desc {
  max-width: 58ch;
  color: var(--b8-text-muted);
}

/* --- Article (post.hbs / page.hbs) ---------------------------------------------------- */

.b8-article {
  padding: clamp(3rem, 7vw, 5rem) 0;
}

.b8-article__header {
  max-width: var(--b8-container-narrow);
  margin: 0 auto 2.5rem;
  padding: 0 var(--b8-gutter);
  text-align: center;
}

.b8-article__tag {
  display: inline-block;
  margin-bottom: 1rem;
  font-family: var(--b8-font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--b8-magenta-bright);
}

.b8-article__title {
  margin-bottom: 1rem;
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
}

.b8-article__excerpt {
  max-width: 56ch;
  margin: 0 auto 1.5rem;
  font-size: 1.15rem;
  color: var(--b8-text-muted);
}

.b8-article__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-family: var(--b8-font-mono);
  font-size: 0.82rem;
  color: var(--b8-text-soft);
}

.b8-article__meta a {
  color: var(--b8-text);
}

.b8-article__avatar {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: var(--b8-radius-pill);
  border: 1px solid var(--b8-border-soft);
}

.b8-article__feature-image {
  max-width: var(--b8-container);
  margin: 0 auto 3rem;
  padding: 0 var(--b8-gutter);
}

.b8-article__feature-image img {
  width: 100%;
  border-radius: var(--b8-radius-lg);
  box-shadow: var(--b8-shadow-card);
}

.b8-article__feature-image figcaption {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  text-align: center;
  color: var(--b8-text-soft);
}

.b8-article__footer {
  /* Third child of .b8-article__layout: body column, row 2 — aligned with
     the article body's left edge. No rule here: the end-of-article back link
     must sit directly under the content; the hairline lives on
     .b8-article__footer-meta below it. */
  grid-column: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.b8-article__footer-meta {
  margin-top: 1.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--b8-border-soft);
}

/* Tag list at article foot */
.b8-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.b8-tag {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  font-family: var(--b8-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--b8-text-muted);
  background: var(--b8-tint-text);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-pill);
  transition: opacity var(--b8-dur-fast) var(--b8-ease);
}

.b8-tag:hover {
  opacity: 0.8;
}

/* Author card */
.b8-author-card {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  padding: 1.6rem;
  background: var(--b8-surface-card);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-md);
}

.b8-author-card__avatar {
  width: 64px;
  height: 64px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: var(--b8-radius-pill);
  border: 1px solid var(--b8-border);
}

.b8-author-card__name {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
  /* element-agnostic: snippets use <p> for the name to keep document
     heading order intact, so weight cannot come from h3 defaults */
  font-weight: 700;
}

.b8-author-card__bio {
  margin: 0;
  font-size: 0.95rem;
  color: var(--b8-text-muted);
}

/* Related posts */
.b8-related {
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  border-top: 1px solid var(--b8-border-soft);
}

.b8-related__title {
  font-size: 1.5rem;
}

/* --- Legal pages - light surface ------------------------------------------------------- */

.b8-legal {
  background: var(--b8-light-bg);
  color: var(--b8-light-text);
  padding: clamp(3rem, 7vw, 5rem) 0;
}

.b8-legal h1,
.b8-legal h2,
.b8-legal h3,
.b8-legal h4,
.b8-legal h5,
.b8-legal h6 {
  color: var(--b8-light-text);
}

.b8-legal p,
.b8-legal li {
  color: var(--b8-light-text-muted);
}

.b8-legal strong,
.b8-legal b {
  color: var(--b8-light-text);
}

.b8-legal a {
  color: var(--b8-magenta-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.b8-legal hr {
  border-top-color: var(--b8-light-border);
}

.b8-legal .b8-article__meta,
.b8-legal .b8-page-header__desc {
  color: var(--b8-light-text-muted);
}

.b8-legal code {
  background: var(--b8-light-bg-alt);
  color: var(--b8-light-text);
  border: 1px solid var(--b8-light-border);
}

.b8-legal blockquote {
  border-left-color: var(--b8-magenta-strong);
  color: var(--b8-light-text-muted);
}

.b8-legal table th,
.b8-legal table td {
  border-color: var(--b8-light-border);
  color: var(--b8-light-text-muted);
}

.b8-legal .b8-card-table td {
  background: var(--b8-light-bg-alt);
  border-color: var(--b8-light-border);
  color: var(--b8-light-text);
}

.b8-legal .b8-card-table th,
.b8-legal .b8-card-table caption {
  color: var(--b8-light-text-muted);
}

.b8-legal figcaption {
  color: var(--b8-light-text-muted);
}

/* --- Pagination ------------------------------------------------------------------------ */

.b8-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 3rem 0 1rem;
  font-family: var(--b8-font-mono);
  font-size: 0.9rem;
}

.b8-pagination__link,
.b8-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  color: var(--b8-text);
  background: var(--b8-surface-card);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-pill);
  transition: opacity var(--b8-dur-fast) var(--b8-ease);
}

.b8-pagination__link:hover,
.b8-pagination a:hover {
  opacity: 0.8;
}

.b8-pagination__link:active,
.b8-pagination a:active {
  transform: translateY(1px);
}

.b8-pagination__num,
.b8-pagination .page-number {
  padding: 0.5rem 1rem;
  color: var(--b8-text-soft);
}

.b8-pagination__link.is-current,
.b8-pagination__link[aria-current="page"] {
  color: var(--b8-white);
  background: var(--b8-magenta);
  border-color: var(--b8-magenta);
  box-shadow: var(--b8-glow-sm);
}

.b8-pagination__link.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* --- CTA band ---------------------------------------------------------------------------- */

.b8-cta {
  text-align: center;
}

.b8-cta__title {
  max-width: 24ch;
  margin: 0 auto 1rem;
}

.b8-cta__copy {
  max-width: 52ch;
  margin: 0 auto 2rem;
  color: var(--b8-text-muted);
}

.b8-cta__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* --- Footer -------------------------------------------------------------------------------- */

.b8-footer {
  background: var(--b8-footer-bg);
  border-top: 1px solid var(--b8-border-soft);
  padding: clamp(2.5rem, 6vw, 4rem) 0 2rem;
  font-size: 0.95rem;
}


.b8-footer__brand p {
  max-width: 34ch;
  color: var(--b8-text-muted);
}

.b8-footer__heading {
  margin-bottom: 1rem;
  font-family: var(--b8-font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--b8-text-soft);
}

.b8-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.b8-footer__nav a {
  color: var(--b8-text-muted);
}


.b8-footer__social {
  display: flex;
  gap: 0.8rem;
}

.b8-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--b8-text-muted);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-pill);
  transition: opacity var(--b8-dur-fast) var(--b8-ease);
}

.b8-footer__social a:hover {
  opacity: 0.8;
}

/* --- Error pages (error.hbs / error-404.hbs) -------------------------------------------------- */

.b8-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 70vh;
  padding: 4rem var(--b8-gutter);
  text-align: center;
}

.b8-error__code {
  margin: 0;
  font-family: var(--b8-font-mono);
  font-size: clamp(5rem, 16vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--b8-magenta);
}

.b8-error__title {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.b8-error__message {
  max-width: 46ch;
  margin: 0 0 1.5rem;
  color: var(--b8-text-muted);
}

.b8-error__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}


/* ==========================================================================
   Layer 4 - Koenig editor content (.gh-content, .kg-*)
   Ghost injects its own card layout CSS (card_assets: true); rules here
   restyle look-and-feel only and do not rebuild card mechanics.
   ========================================================================== */

/* Breakout grid - main / wide / full named columns */
.gh-content {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--b8-gutter), 1fr)
    [wide-start] minmax(0, 160px)
    [main-start] min(var(--b8-content-width), calc(100% - (var(--b8-gutter) * 2))) [main-end]
    minmax(0, 160px) [wide-end]
    minmax(var(--b8-gutter), 1fr) [full-end];
}

.gh-content > * {
  grid-column: main-start / main-end;
  margin-top: 0;
  margin-bottom: 0;
}

.gh-content > * + * {
  margin-top: 1.6rem;
}

.gh-content > .kg-width-wide {
  grid-column: wide-start / wide-end;
}

.gh-content > .kg-width-full {
  grid-column: full-start / full-end;
}

.gh-content > h2,
.gh-content > h3 {
  margin-top: 2.6rem;
}

.gh-content a:not(.kg-btn):not(.kg-bookmark-container):not(.b8-btn) {
  color: var(--b8-magenta-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--b8-border);
}

.gh-content ul,
.gh-content ol {
  padding-left: 1.4rem;
}

.gh-content li + li {
  margin-top: 0.5rem;
}

.gh-content li::marker {
  color: var(--b8-magenta-bright);
}

.gh-content blockquote {
  margin: 0;
  padding: 0.4rem 0 0.4rem 1.4rem;
  border-left: 3px solid var(--b8-magenta);
  font-size: 1.15rem;
  color: var(--b8-text-muted);
}

.gh-content blockquote.kg-blockquote-alt {
  border-left: 0;
  padding: 0;
  text-align: center;
  font-size: 1.35rem;
  font-style: italic;
  color: var(--b8-text);
}

/* Code */
.gh-content code {
  padding: 0.15em 0.45em;
  font-size: 0.88em;
  color: var(--b8-magenta-soft);
  background: var(--b8-surface-code);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-sm);
}

.gh-content pre {
  padding: 1.4rem;
  overflow-x: auto;
  background: var(--b8-surface-code);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-md);
  font-size: 0.9rem;
  line-height: 1.6;
}

.gh-content pre code {
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--b8-text);
}

/* Images and figures */
.gh-content img {
  display: block;
  margin: 0 auto;
  border-radius: var(--b8-radius-md);
}

/* Author-card snippets pasted into post/page content (HTML cards): the
   generic centred-image rule above must not reach the card's avatar —
   its auto margins absorb the flex free space and float the avatar
   toward the middle of the card. */
.gh-content .b8-author-card img {
  margin: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--b8-radius-pill);
}

.gh-content .b8-author-card h2,
.gh-content .b8-author-card h3 {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
}

.gh-content > .kg-width-full img,
.gh-content > .kg-width-full .kg-image {
  border-radius: 0;
  width: 100%;
}

.gh-content figure {
  margin-left: 0;
  margin-right: 0;
}

.gh-content figcaption,
.kg-card figcaption {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
  color: var(--b8-text-soft);
}

.gh-content figcaption a {
  color: var(--b8-text-muted);
}

/* Gallery */
.kg-gallery-image img {
  border-radius: var(--b8-radius-sm);
}

/* Tables inside content scroll within their own wrapper */
.gh-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.gh-content table th,
.gh-content table td {
  padding: 0.7rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--b8-border-soft);
}

.gh-content table th {
  font-family: var(--b8-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--b8-text-soft);
}

/* Divider card */
.gh-content .kg-divider-card,
.gh-content hr {
  border: 0;
  border-top: 1px solid var(--b8-border-soft);
}

/* Callout card - brand-tinted variants */
.kg-callout-card {
  border-radius: var(--b8-radius-md);
  border: 1px solid var(--b8-border-soft);
}

.kg-callout-card .kg-callout-text {
  color: var(--b8-text);
}

.kg-callout-card-grey {
  background: color-mix(in srgb, var(--b8-text-muted) 12%, transparent);
}

.kg-callout-card-white {
  background: var(--b8-surface-card);
}

.kg-callout-card-blue {
  background: color-mix(in srgb, var(--b8-sev-info) 14%, transparent);
}

.kg-callout-card-green {
  background: color-mix(in srgb, var(--b8-sev-low) 14%, transparent);
}

.kg-callout-card-yellow {
  background: color-mix(in srgb, var(--b8-sev-medium) 14%, transparent);
}

.kg-callout-card-red {
  background: color-mix(in srgb, var(--b8-sev-critical) 14%, transparent);
}

.kg-callout-card-pink {
  background: var(--b8-tint-magenta);
}

.kg-callout-card-purple {
  background: color-mix(in srgb, var(--b8-purple) 55%, transparent);
}

.kg-callout-card-accent {
  background: var(--b8-accent);
  border-color: var(--b8-accent);
}

.kg-callout-card-accent .kg-callout-text,
.kg-callout-card-accent .kg-callout-text a {
  color: var(--b8-white);
}

/* Toggle card */
.kg-toggle-card {
  background: var(--b8-surface-card);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-md);
}

.kg-toggle-card .kg-toggle-heading-text {
  color: var(--b8-white);
}

.kg-toggle-card .kg-toggle-content {
  color: var(--b8-text-muted);
}

.kg-toggle-card svg path {
  stroke: var(--b8-magenta-bright);
}

/* Button card */
.kg-button-card .kg-btn {
  font-family: var(--b8-font-sans);
  font-weight: 600;
  border-radius: var(--b8-radius-pill);
  transition: opacity var(--b8-dur-fast) var(--b8-ease);
}

.kg-button-card .kg-btn:hover {
  opacity: 0.8;
}

.kg-button-card .kg-btn:active {
  transform: translateY(1px);
}

.kg-button-card .kg-btn-accent {
  background: var(--b8-accent);
  color: var(--b8-white);
  box-shadow: var(--b8-glow-sm);
}

/* Bookmark card */
.kg-bookmark-card .kg-bookmark-container {
  background: var(--b8-surface-card);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-md);
  overflow: hidden;
  color: var(--b8-text);
  transition: opacity var(--b8-dur-fast) var(--b8-ease);
}

.kg-bookmark-card .kg-bookmark-container:hover {
  opacity: 0.8;
}

.kg-bookmark-card .kg-bookmark-title {
  color: var(--b8-white);
}

.kg-bookmark-card .kg-bookmark-description,
.kg-bookmark-card .kg-bookmark-metadata {
  color: var(--b8-text-muted);
}

/* Product / header / signup card surfaces stay on-brand */
.kg-product-card-container,
.kg-header-card,
.kg-signup-card {
  background: var(--b8-surface-card);
  border-radius: var(--b8-radius-md);
}

/* Embeds keep rounded corners */
.kg-embed-card iframe {
  border-radius: var(--b8-radius-md);
}

/* Legal (light) surface remaps for content */
.b8-legal .gh-content a:not(.kg-btn):not(.kg-bookmark-container):not(.b8-btn) {
  color: var(--b8-magenta-strong);
  text-decoration-color: var(--b8-light-border);
}

.b8-legal .gh-content pre,
.b8-legal .gh-content code {
  background: var(--b8-light-bg-alt);
  border-color: var(--b8-light-border);
  color: var(--b8-light-text);
}

.b8-legal .gh-content li::marker {
  color: var(--b8-magenta-strong);
}

.b8-legal .gh-content table th,
.b8-legal .gh-content table td {
  border-bottom-color: var(--b8-light-border);
}

.b8-legal .gh-content figcaption {
  color: var(--b8-light-text-muted);
}


/* ==========================================================================
   Layer 5 - Utilities
   ========================================================================== */

.b8-text-center { text-align: center; }
.b8-muted { color: var(--b8-text-muted); }
.b8-mono { font-family: var(--b8-font-mono); }
.b8-hide { display: none !important; }

.b8-stack-sm > * + * { margin-top: 0.75rem; }
.b8-stack-md > * + * { margin-top: 1.5rem; }
.b8-stack-lg > * + * { margin-top: 3rem; }


/* ==========================================================================
   Layer 6 - Responsive
   Collapse points: 1024 (grids to 2), 880 (header burger switch, process
   stacks), 720 (grids to 1), 560 (type and spacing tighten).
   ========================================================================== */

@media (max-width: 1024px) {
  .b8-feature-grid,
  .b8-post-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .b8-process {
    grid-template-columns: repeat(2, 1fr);
  }

  .b8-process-step:not(:last-child)::after {
    display: none;
  }


  .b8-post-card--featured {
    flex-direction: column;
  }

  .b8-post-card--featured .b8-post-card__image {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}

@media (max-width: 880px) {
  /* Header switches to the burger + .b8-mobile-menu overlay pattern
     (the overlay itself is styled in the contract reconciliation layer;
     the desktop nav and header actions simply hide here). */
  .b8-burger {
    display: inline-flex;
  }

  .b8-header__cta,
  .b8-header__actions > a {
    display: none;
  }

  .b8-nav {
    display: none;
  }

  .b8-hero {
    min-height: 0;
  }

  .b8-trust-strip {
    gap: 0.8rem 1.6rem;
  }

  .b8-article__header {
    text-align: left;
  }

  .b8-article__meta,
  .b8-article__excerpt {
    justify-content: flex-start;
    margin-left: 0;
  }
}

@media (max-width: 720px) {
  .b8-feature-grid,
  .b8-post-grid,
  .b8-process {
    grid-template-columns: 1fr;
  }

  .b8-post-card--featured .b8-post-card__body {
    padding: 1.5rem;
  }

  .b8-author-card {
    flex-direction: column;
  }


  .gh-content {
    grid-template-columns:
      [full-start] var(--b8-gutter)
      [wide-start main-start] minmax(0, 1fr) [main-end wide-end]
      var(--b8-gutter) [full-end];
  }
}

@media (max-width: 560px) {
  :root {
    --b8-gutter: 18px;
    --b8-header-height: 64px;
  }

  body {
    font-size: 1rem;
  }

  .b8-hero__actions .b8-btn,
  .b8-cta__actions .b8-btn,
  .b8-form--inline .b8-btn {
    width: 100%;
  }

  .b8-form--inline {
    flex-direction: column;
  }

  .b8-section {
    padding: 2.75rem 0;
  }

  .b8-pagination {
    gap: 0.4rem;
  }

  .b8-pagination__num,
  .b8-pagination .page-number {
    display: none;
  }

  .b8-error__code {
    font-size: 4.5rem;
  }
}


/* ==========================================================================
   Layer 7 - Reduced motion
   Disables the caret blink, particle pulse and all transitions.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  .b8-bg-particle {
    animation: none;
    opacity: 0.6;
  }
}


/* ==========================================================================
   Layer 8 - Spec contract reconciliation
   The class names below are the THEME_SPEC.md CSS class contract as actually
   used by the templates. They were missing from (or named differently in)
   the layers above; rules here are appended last so they win ties.
   ========================================================================== */

/* --- Eyebrows and the underscore motif ----------------------------------- */

.b8-eyebrow,
.b8-hero__eyebrow {
  display: block;
  margin: 0 0 0.9rem;
  font-family: var(--b8-font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--b8-accent);
}

a.b8-eyebrow {
  display: inline-block;
}

.b8-underscore {
  color: var(--b8-accent);
  font-weight: inherit;
}

/* --- Buttons per the design-system contract ------------------------------ */

.b8-btn {
  padding: 0.85rem 2rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--b8-white);
  background: var(--b8-accent);
  border: 1px solid var(--b8-accent);
  box-shadow: var(--b8-glow-sm);
}

.b8-btn--outline {
  color: var(--b8-white);
  background: transparent;
  border-color: var(--b8-white);
  box-shadow: none;
}

.b8-btn--gradient {
  background: var(--b8-gradient-magenta);
  border-color: transparent;
}

.b8-btn:focus-visible {
  outline: 2px solid var(--b8-focus);
  outline-offset: 2px;
}

/* --- Grid helpers --------------------------------------------------------- */

.b8-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.b8-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.b8-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

/* --- Section background modifiers ----------------------------------------
   Filenames must match assets/images/backgrounds exactly. */

.b8-section--hero {
  padding-top: clamp(5rem, 11vw, 8rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
}

.b8-section--bg,
.b8-section--front,
.b8-section--stats {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}

.b8-section--bg::before,
.b8-section--front::before,
.b8-section--stats::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--b8-scrim), var(--b8-overlay));
}

.b8-section--bg {
  background-image: url("../images/backgrounds/B8_Back_1F.jpg");
}

.b8-section--front {
  background-image: url("../images/backgrounds/B8_Front_Cover.jpg");
  background-position: right center;
}

.b8-section--stats {
  background-image: url("../images/backgrounds/B8_Back_1F_2.jpg");
}

.b8-section--light {
  background: var(--b8-light-bg-alt);
  /* Navy is the brand's text colour on light surfaces */
  color: var(--b8-navy);
}

.b8-section--light h1,
.b8-section--light h2,
.b8-section--light h3,
.b8-section--light h4,
.b8-section--light h5,
.b8-section--light h6,
.b8-legal h1,
.b8-legal h2,
.b8-legal h3,
.b8-legal h4,
.b8-legal h5,
.b8-legal h6 {
  color: var(--b8-navy);
}

/* --- Header layout (templates use .b8-header > .b8-container) ------------- */

/* The blur moves to a pseudo-element: backdrop-filter on .b8-header itself
   would make it the containing block for the position:fixed mobile menu,
   clamping the overlay to the 72px header box. */
.b8-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition: border-color var(--b8-dur-med) var(--b8-ease);
}

.b8-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.b8-header.is-scrolled {
  border-bottom-color: var(--b8-border-soft);
}

.b8-header > .b8-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
}

.b8-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.b8-header__logo img {
  height: 36px;
  width: auto;
}

.b8-nav__item {
  position: relative;
}

.b8-nav__item > button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  font-family: var(--b8-font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: inherit;
  color: var(--b8-text);
  background: transparent;
  border: 0;
  border-radius: var(--b8-radius-pill);
  cursor: pointer;
  transition: opacity var(--b8-dur-fast) var(--b8-ease);
}

.b8-nav__item > button:hover {
  opacity: 0.8;
}

.b8-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 110;
  min-width: 250px;
  display: none;
  margin: 0.25rem 0 0;
  padding: 0.6rem;
  list-style: none;
  background: var(--b8-elevated);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-md);
  box-shadow: var(--b8-glow-sm);
}

.b8-nav__dropdown.is-open {
  display: block;
}

.b8-nav__dropdown li + li {
  margin-top: 0.1rem;
}

.b8-nav .b8-nav__dropdown a {
  display: block;
  width: 100%;
  padding: 0.5rem 0.9rem;
  border-radius: var(--b8-radius-sm);
}

.b8-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.b8-header__actions > a:not(.b8-btn) {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--b8-text);
}

.b8-header__actions .b8-btn {
  padding: 0.55rem 1.4rem;
  font-size: 0.8125rem;
}

/* --- Mobile menu overlay --------------------------------------------------- */

.b8-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  overflow-y: auto;
  padding: calc(var(--b8-header-height) + 0.5rem) var(--b8-gutter) 2.5rem;
  background: var(--b8-overlay);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.b8-mobile-menu.is-open {
  display: block;
}

.b8-mobile-menu ul {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.b8-mobile-menu ul ul {
  margin: 0.4rem 0 1rem;
  padding-left: 1rem;
}

.b8-mobile-menu a {
  display: block;
  padding: 0.45rem 0;
  font-size: 1.15rem;
  color: var(--b8-text);
}

.b8-mobile-menu .b8-eyebrow {
  margin: 1rem 0 0.2rem;
}

.b8-mobile-menu__close {
  position: absolute;
  top: 0.85rem;
  right: var(--b8-gutter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--b8-text);
  background: transparent;
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-sm);
  cursor: pointer;
  transition: opacity var(--b8-dur-fast) var(--b8-ease);
}

.b8-mobile-menu__close:hover {
  opacity: 0.8;
}

.b8-mobile-menu__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* --- Hero ------------------------------------------------------------------ */

/* The section provides the band padding; .b8-hero is a plain content block
   (the earlier flex/min-height treatment assumed a different markup shape). */
.b8-hero {
  display: block;
  min-height: 0;
  padding: 0;
  overflow: visible;
}

.b8-hero__lede {
  max-width: 58ch;
  margin: 0 0 1.6rem;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--b8-text-muted);
}

.b8-hero__actions {
  align-items: center;
  gap: 1.25rem;
}

.b8-hero__actions a:not(.b8-btn) {
  font-weight: 600;
  color: var(--b8-magenta-bright);
}

.b8-hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.b8-hero__visual img {
  width: 100%;
  height: auto;
}

.b8-hero .b8-trust-strip {
  justify-content: flex-start;
  margin-top: 2.5rem;
}

/* Compact centred hero for utility pages */
.b8-page-hero {
  text-align: center;
}

.b8-page-hero h1 {
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
}

.b8-page-hero .b8-hero__lede {
  margin-left: auto;
  margin-right: auto;
}

.b8-page-hero .b8-hero__actions {
  justify-content: center;
}

/* Trust strip is a <ul> in the hero */
.b8-trust-strip {
  margin: 0;
  list-style: none;
}

/* --- Glow image card -------------------------------------------------------- */

.b8-card {
  display: block;
  margin: 0;
  padding: 1rem;
  background: var(--b8-elevated);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-xl);
  box-shadow: var(--b8-shadow-glow);
  overflow: hidden;
}

.b8-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--b8-radius-lg);
}

figure.b8-card {
  margin: 2rem 0 0;
}

/* --- Stats ------------------------------------------------------------------ */

.b8-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
  text-align: center;
}

.b8-stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.b8-stat__value {
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--b8-white);
  font-variant-numeric: tabular-nums;
}

p.b8-stat__value {
  margin: 0 0 0.5rem;
}

.b8-stat__label {
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--b8-text-muted);
}

/* --- Engagement steps --------------------------------------------------------- */

.b8-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0;
  padding: 0;
  list-style: none;
}

.b8-step {
  padding: 1.6rem;
  background: var(--b8-surface-card);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-lg);
}

.b8-step h3 {
  font-size: 1.15rem;
}

.b8-step p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--b8-text-muted);
}

.b8-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  font-family: var(--b8-font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--b8-magenta-bright);
  border: 1px solid var(--b8-accent);
  border-radius: var(--b8-radius-pill);
}

.b8-step--accent {
  background: var(--b8-tint-magenta);
  border-color: var(--b8-border);
  box-shadow: var(--b8-glow-sm);
}

.b8-step--accent .b8-step__num {
  color: var(--b8-white);
  background: var(--b8-accent);
}

/* --- Feature cards (spec name: .b8-card-feature) ------------------------------- */

.b8-card-feature {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.8rem;
  background: var(--b8-elevated);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-xl);
  box-shadow: var(--b8-glow-sm);
}

.b8-card-feature img {
  width: 56px;
  height: 56px;
}

.b8-card-feature h3 {
  margin: 0;
  font-size: 1.35rem;
}

/* --- Icon rows (partner benefits) ------------------------------------------------ */

.b8-icon-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 2.5rem;
  margin-top: 2.5rem;
}

.b8-icon-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 0.35rem 1.25rem;
  align-items: center;
}

.b8-icon-row img {
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
}

.b8-icon-row h3 {
  margin: 0;
  font-size: 1.15rem;
}

.b8-icon-row p {
  grid-column: 2;
  margin: 0;
  color: var(--b8-text-muted);
}

/* --- Comparison table (glass) ------------------------------------------------------ */

.b8-compare {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--b8-surface-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-lg);
  overflow: hidden;
  font-size: 0.98rem;
}

.b8-compare th,
.b8-compare td {
  padding: 0.9rem 1.2rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--b8-border-soft);
}

.b8-compare thead th {
  font-family: var(--b8-font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--b8-text-muted);
}

.b8-compare thead th.is-b8 {
  color: var(--b8-magenta-bright);
}

.b8-compare tbody tr:last-child th,
.b8-compare tbody tr:last-child td {
  border-bottom: 0;
}

.b8-compare__feature {
  font-weight: 700;
  color: var(--b8-white);
}

.b8-compare td.is-b8 {
  background: var(--b8-tint-magenta);
  color: var(--b8-white);
}

/* --- Partner models table ------------------------------------------------------------ */

.b8-partner-table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-lg);
  overflow: hidden;
  font-size: 0.98rem;
}

.b8-partner-table th,
.b8-partner-table td {
  padding: 0.85rem 1.2rem;
  text-align: left;
}

.b8-partner-table thead th {
  background: var(--b8-elevated);
  font-family: var(--b8-font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--b8-text-muted);
}

.b8-partner-table tbody th {
  font-weight: 700;
  color: var(--b8-white);
}

.b8-partner-table tbody tr:nth-child(odd) th,
.b8-partner-table tbody tr:nth-child(odd) td {
  background: var(--b8-table-row-a);
}

.b8-partner-table tbody tr:nth-child(even) th,
.b8-partner-table tbody tr:nth-child(even) td {
  background: var(--b8-table-row-b);
}

/* Plain tables inside a scroll wrapper (e.g. the CVSS scoring table) */
.b8-table-wrap > table:not(.b8-compare):not(.b8-partner-table) {
  width: 100%;
  border-collapse: collapse;
}

.b8-table-wrap > table:not(.b8-compare):not(.b8-partner-table) th,
.b8-table-wrap > table:not(.b8-compare):not(.b8-partner-table) td {
  padding: 0.7rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--b8-border-soft);
}

.b8-table-wrap > table:not(.b8-compare):not(.b8-partner-table) thead th {
  font-family: var(--b8-font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--b8-text-soft);
}

/* --- Pricing card ----------------------------------------------------------------------- */

.b8-pricing-card {
  max-width: 640px;
  margin: 2.5rem auto 2rem;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  background: var(--b8-elevated);
  border: 1px solid var(--b8-border);
  border-radius: var(--b8-radius-xl);
  box-shadow: var(--b8-shadow-glow);
}

.b8-pricing-card h2 {
  font-size: 1.5rem;
}

.b8-price__line,
.b8-price__total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--b8-border-soft);
}

.b8-price__total {
  border-bottom: 0;
  border-top: 2px solid var(--b8-border);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--b8-white);
}

.b8-pricing-card ul {
  margin: 1.2rem 0 1.8rem;
  padding-left: 1.2rem;
}

.b8-pricing-card li + li {
  margin-top: 0.4rem;
}

.b8-pricing-card li::marker {
  color: var(--b8-accent);
}

/* --- Methodology strip and detail ---------------------------------------------------------- */

.b8-method-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.b8-method-strip__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.2rem 0.8rem;
  text-align: center;
  color: var(--b8-text);
  border-radius: var(--b8-radius-md);
}

.b8-method-strip__step img {
  width: 64px;
  height: 64px;
}

/* Dashed connector spanning the grid gap between steps */
.b8-method-strip__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(1.2rem + 16px);
  left: 100%;
  width: 1.25rem;
  border-top: 1px dashed var(--b8-border);
}

.b8-method-strip__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-family: var(--b8-font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--b8-white);
  background: var(--b8-accent);
  border-radius: var(--b8-radius-pill);
}

.b8-method-strip__label {
  font-size: 0.9rem;
  font-weight: 600;
}

.b8-method-detail h2 {
  margin-top: 2.5rem;
}

.b8-method-detail h2:first-child {
  margin-top: 0;
}

/* In-page anchors clear the sticky header */
[id] {
  scroll-margin-top: calc(var(--b8-header-height) + 24px);
}

/* --- Severity pills (spec name: .b8-severity; risk data only) -------------------------------- */

.b8-severity {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.85rem;
  font-family: var(--b8-font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--b8-text-muted);
  background: var(--b8-tint-text);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-pill);
  white-space: nowrap;
}

.b8-severity--critical {
  color: var(--b8-sev-critical);
  background: color-mix(in srgb, var(--b8-sev-critical) 15%, transparent);
  border-color: color-mix(in srgb, var(--b8-sev-critical) 40%, transparent);
}

.b8-severity--high {
  color: var(--b8-sev-high);
  background: color-mix(in srgb, var(--b8-sev-high) 15%, transparent);
  border-color: color-mix(in srgb, var(--b8-sev-high) 40%, transparent);
}

.b8-severity--medium {
  color: var(--b8-sev-medium);
  background: color-mix(in srgb, var(--b8-sev-medium) 15%, transparent);
  border-color: color-mix(in srgb, var(--b8-sev-medium) 40%, transparent);
}

.b8-severity--low {
  color: var(--b8-sev-low);
  background: color-mix(in srgb, var(--b8-sev-low) 15%, transparent);
  border-color: color-mix(in srgb, var(--b8-sev-low) 40%, transparent);
}

.b8-severity--info {
  color: var(--b8-sev-info);
  background: color-mix(in srgb, var(--b8-sev-info) 15%, transparent);
  border-color: color-mix(in srgb, var(--b8-sev-info) 40%, transparent);
}

/* --- Forms (templates use bare inputs inside .b8-field) ---------------------------------------- */

.b8-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 1.5rem;
  max-width: 780px;
  margin-top: 1.5rem;
}

.b8-field--full {
  grid-column: 1 / -1;
}

.b8-field label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--b8-text);
}

.b8-field input:not([type="checkbox"]),
.b8-field select,
.b8-field textarea {
  width: 100%;
  padding: 0.75rem 1.1rem;
  font-family: var(--b8-font-sans);
  font-size: 1rem;
  color: var(--b8-text);
  background: var(--b8-purple-deeper);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-sm);
  transition: border-color var(--b8-dur-fast) var(--b8-ease);
}

.b8-field input::placeholder,
.b8-field textarea::placeholder {
  color: var(--b8-text-soft);
  opacity: 1;
}

.b8-field input:not([type="checkbox"]):focus-visible,
.b8-field select:focus-visible,
.b8-field textarea:focus-visible {
  outline: 2px solid var(--b8-focus);
  outline-offset: 2px;
  border-color: var(--b8-magenta);
}

.b8-field textarea {
  min-height: 140px;
  resize: vertical;
}

.b8-field input[aria-invalid="true"],
.b8-field select[aria-invalid="true"],
.b8-field textarea[aria-invalid="true"] {
  border-color: var(--b8-sev-critical);
}

.b8-field--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.7rem;
}

.b8-field--checkbox input {
  width: auto;
  margin-top: 0.3rem;
  accent-color: var(--b8-accent);
}

.b8-field--checkbox label {
  font-weight: 400;
  color: var(--b8-text-muted);
}

.b8-form__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.9rem;
  color: var(--b8-magenta-soft);
}

.b8-form__note[hidden] {
  display: none;
}

.b8-form__error {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--b8-sev-critical);
}

.b8-form__actions {
  grid-column: 1 / -1;
  display: flex;
  margin-top: 0.5rem;
}

.b8-form--disabled {
  opacity: 0.75;
}

.b8-form--disabled .b8-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- Blog featured-article hero (index.hbs page 1, newest post) --------------------------------- */

.b8-blog-hero {
  /* Sits directly beneath the compact page hero */
  padding-top: 0;
}

.b8-blog-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.5rem;
  align-items: center;
  padding: 2.5rem;
  background: var(--b8-elevated);
  border-radius: var(--b8-radius-xl);
  /* Featured tile — the guide reserves the strong glow for these */
  box-shadow: var(--b8-shadow-glow-strong);
}

.b8-blog-hero__inner--no-image {
  grid-template-columns: minmax(0, 1fr);
}

.b8-blog-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.b8-blog-hero__title a {
  color: var(--b8-text);
}

.b8-blog-hero__snippet {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--b8-text-muted);
}

.b8-blog-hero__meta {
  margin: 0 0 1.75rem;
  font-size: 0.9rem;
  color: var(--b8-text-soft);
}

.b8-blog-hero__visual {
  margin: 0;
  align-self: center;
}

/* Never crop the featured image: it scales to the column width at its
   own aspect ratio (direction 2026-08-26 — resize, don't crop). */
.b8-blog-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--b8-radius-lg);
}

@media (max-width: 880px) {
  .b8-blog-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    padding: 1.75rem;
  }

}

/* --- Post feed (spec name: .b8-post-feed) ------------------------------------------------------- */

.b8-post-feed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  margin-top: 1rem;
}

/* Spec contract: 30px radius, #2C0E49 fill, magenta glow on hover
   (overrides the earlier 20px glass treatment). */
.b8-post-card {
  background: var(--b8-elevated);
  border-radius: var(--b8-radius-xl);
  box-shadow: none;
  transition: box-shadow var(--b8-dur-med) var(--b8-ease);
}

.b8-post-card:hover {
  opacity: 1;
  box-shadow: var(--b8-shadow-glow);
}

.b8-post-card__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.7rem;
  padding: 1.5rem;
}

.b8-pagination__info {
  padding: 0 0.6rem;
  color: var(--b8-text-soft);
}

.b8-pagination .b8-btn--outline {
  background: transparent;
  border-color: var(--b8-white);
  color: var(--b8-white);
}

/* --- Article extras ------------------------------------------------------------------------------ */

.b8-article__header p:not([class]) {
  margin-bottom: 0;
  font-family: var(--b8-font-mono);
  font-size: 0.85rem;
  color: var(--b8-text-soft);
}

.b8-article__feature {
  margin: 0 0 2.5rem;
}

.b8-article__feature img {
  width: 100%;
  height: auto;
  border-radius: var(--b8-radius-lg);
  box-shadow: var(--b8-shadow-card);
}

.b8-article__feature figcaption {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  text-align: center;
  color: var(--b8-text-soft);
}

.b8-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
}

.b8-tags a {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  font-family: var(--b8-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--b8-text-muted);
  background: var(--b8-tint-text);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-pill);
}

.b8-author-card img {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--b8-radius-pill);
  border: 1px solid var(--b8-border);
}

.b8-author-card h3 {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
}

.b8-author-card h3 a {
  color: var(--b8-white);
}

.b8-author-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--b8-text-muted);
}

/* --- Legal TOC (built by main.js inside [data-b8-toc]) ------------------------------------------- */

.b8-toc {
  margin: 0 0 2.5rem;
  padding: 1.4rem 1.6rem;
  background: var(--b8-light-bg-alt);
  border: 1px solid var(--b8-light-border);
  border-radius: var(--b8-radius-md);
}

.b8-toc[hidden] {
  display: none;
}

.b8-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.b8-toc__item + .b8-toc__item {
  margin-top: 0.4rem;
}

/* Indentation is driven by document-relative nesting (main.js), not by
   absolute heading level — see initToc */
.b8-toc__item--nested {
  padding-left: 1.2rem;
}

.b8-toc__link {
  color: var(--b8-magenta-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.b8-legal .b8-underscore {
  color: var(--b8-magenta-strong);
}

/* --- Recognition strip ----------------------------------------------------------------------------- */

.b8-recognition .b8-grid-2 {
  align-items: center;
}

.b8-recognition__title {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.b8-recognition__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.b8-recognition__badge {
  display: inline-flex;
  align-items: center;
}

/* Official partner badge artwork (PNG, dark-surface variants). Heights are
   tuned per mark so the strip reads visually balanced; width follows the
   intrinsic aspect ratio. */
.b8-recognition__img {
  display: block;
  height: 48px;
  width: auto;
}

.b8-recognition__img--crest {
  height: 84px;
}

.b8-recognition__img--aws {
  height: 40px;
}

/* --- CTA banner (partial renders a section; partner page uses a div inside a bg band) --------------- */

.b8-cta-banner {
  text-align: center;
}

.b8-cta-banner h2 {
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
}

.b8-cta-banner p {
  max-width: 52ch;
  margin: 0 auto 1.8rem;
  color: var(--b8-text-muted);
}

.b8-cta-banner__title {
  margin-bottom: 1rem;
}

.b8-cta-banner__sub {
  max-width: 52ch;
  margin: 0 auto 1.8rem;
  color: var(--b8-text-muted);
}

.b8-cta-banner .b8-btn {
  margin-top: 0.5rem;
}

.b8-cta-banner--front {
  position: relative;
  background-image: url("../images/backgrounds/B8_Front_Cover.jpg");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  isolation: isolate;
}

.b8-cta-banner--front::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--b8-scrim), var(--b8-overlay));
}

/* --- Footer (brand | nav | social, then trust strip + legal) ----------------------------------------- */

.b8-footer > .b8-container:first-child {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 2.5rem;
}

.b8-footer__brand img {
  height: 32px;
  width: auto;
  margin-bottom: 1rem;
}

/* Live-site parity: the block8.ai footer lays its links out in a row */
.b8-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}


.b8-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 2rem;
  font-family: var(--b8-font-mono);
  font-size: 0.78rem;
  color: var(--b8-text-soft);
}

.b8-footer__legal p {
  margin: 0;
}

/* --- Contract utilities -------------------------------------------------------------------------------- */

.b8-rule {
  border: 0;
  border-top: 1px solid var(--b8-border);
}

.b8-glow {
  box-shadow: var(--b8-shadow-glow);
}

/* --- Responsive collapses for the contract components --------------------------------------------------- */

@media (max-width: 1024px) {
  .b8-grid-3,
  .b8-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .b8-post-feed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .b8-method-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 2rem;
  }

  .b8-method-strip__step::after {
    display: none;
  }
}

@media (max-width: 880px) {
  .b8-grid-2,
  .b8-grid-3,
  .b8-grid-4 {
    grid-template-columns: 1fr;
  }

  .b8-hero--split {
    grid-template-columns: 1fr;
  }

  .b8-steps,
  .b8-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .b8-icon-rows {
    grid-template-columns: 1fr;
  }

  .b8-recognition__badges {
    justify-content: flex-start;
  }

  .b8-footer > .b8-container:first-child {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .b8-post-feed,
  .b8-steps,
  .b8-form {
    grid-template-columns: 1fr;
  }

  .b8-method-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .b8-stats,
  .b8-method-strip {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   LAYER 9 — LIVE-SITE CHROME PARITY (embedded-theme branch)
   Header and footer visually mirror https://www.block8.ai/ as measured on
   2026-08-06, height re-measured to 106px on 2026-08-08: flat #1C003B header, 50px logo, 11px/700 uppercase nav
   links tracked 0.2em, chevron-less dropdowns on a translucent mid-purple
   panel, compact pill CTA, and a one-row footer (shield + legal line,
   links spread, white circular social buttons).
   ========================================================================== */

:root {
  --b8-header-height: 106px; /* measured live 2026-08-08 */
  --b8-chrome-dropdown: rgba(66, 30, 98, 0.95); /* live folder panel colour */
  --b8-chrome-nav-size: 0.6875rem;              /* 11px, as served by live */
  --b8-chrome-rule: rgba(255, 255, 255, 0.4);   /* live pre-footer hairline */
  --b8-chrome-scrim: rgba(28, 0, 59, 0.55);     /* dims the band's cover art to live levels */
}

/* Header: flat brand ink, no translucency, no blur, no divider */
.b8-header {
  background: var(--b8-ink);
  border-bottom: 0;
}

.b8-header::before {
  content: none;
}

.b8-header.is-scrolled {
  border-bottom-color: transparent;
}

.b8-header__logo img {
  height: 50px;
  width: auto;
}

/* Nav links and dropdown triggers: live eyebrow treatment */
.b8-nav a,
.b8-nav__item > button {
  font-size: var(--b8-chrome-nav-size);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--b8-white);
}

/* Dropdown panel: live style — translucent mid-purple, tight radius,
   no glow, no border */
.b8-nav__dropdown {
  min-width: 220px;
  padding: 0.6rem;
  background: var(--b8-chrome-dropdown);
  border: 0;
  border-radius: var(--b8-radius-sm);
  box-shadow: none;
}

.b8-nav .b8-nav__dropdown a {
  padding: 0.7rem 1rem;
}

/* Header CTA: live compact pill (11px/700, 0.2em tracking) */
.b8-header__actions .b8-btn {
  font-size: var(--b8-chrome-nav-size);
  letter-spacing: 0.2em;
  height: 35px; /* measured live */
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 1.3rem;
  padding-right: 1.3rem;
  line-height: 1;
}

/* Pre-footer frame: every live page ends with a hairline rule and the
   master tagline over the cover glow, then a thick magenta bar */
.b8-prefooter {
  background:
    linear-gradient(var(--b8-chrome-scrim), var(--b8-chrome-scrim)),
    var(--b8-ink) url(../images/backgrounds/B8_Front_Cover_2B.jpg) center / cover no-repeat;
  padding: 0 0 4.5rem;
}

.b8-prefooter__rule {
  border: 0;
  height: 1px;
  margin: 0 0 3.25rem;
  background: var(--b8-chrome-rule);
}

.b8-prefooter__tagline {
  margin: 0;
  max-width: 13.8em; /* fits "AI-Powered Penetration Testing", wrapping before
                        "for Everyone_" exactly as the live site breaks */
  font-size: clamp(1.6rem, 2.6vw, 2.125rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--b8-white);
}

.b8-footer-bar {
  height: 5px;
  background: var(--b8-magenta);
}

/* Footer: live one-row layout on the same ink as the page.
   :first-child matches Layer 8's grid rule so this flex layout actually
   wins the cascade (both (0,3,0), this one later in the file). */
.b8-footer {
  background: var(--b8-ink);
  border-top: 0;
  padding: 4rem 0;
}

.b8-footer > .b8-container,
.b8-footer > .b8-container:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem 2.5rem;
  margin-bottom: 0;
}

.b8-footer__brand {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}

.b8-footer__brand img {
  height: 50px;
  width: auto;
  margin: 0; /* Layer 8 gave the brand img a 1rem bottom margin */
}

.b8-footer__nav {
  flex: 1;
  min-width: 260px;
}

.b8-footer__nav ul {
  justify-content: space-evenly;
  flex-wrap: nowrap; /* live keeps all five links on one line at desktop */
}

.b8-footer__nav li {
  white-space: nowrap;
}

.b8-footer__nav a {
  color: var(--b8-white);
  font-size: 0.875rem;
}

.b8-footer__legal {
  font-family: var(--b8-font-sans);
  font-size: 0.875rem;
  color: var(--b8-white);
}

.b8-footer__legal p {
  margin: 0;
  /* Layer 8's .b8-footer__brand p sets muted text and a 34ch cap —
     the live legal line is plain white on one line */
  color: var(--b8-white);
  max-width: none;
}

/* Social: live white circular buttons with dark glyphs */
.b8-footer__social a {
  background: var(--b8-white);
  color: var(--b8-ink);
  border: 0;
}

@media (max-width: 880px) {
  :root {
    --b8-header-height: 76px;
  }

  .b8-header__logo img {
    height: 40px;
  }
}

/* Restores the small-phone height that Layer 9's unconditional
   --b8-header-height override would otherwise permanently defeat */
@media (max-width: 560px) {
  :root {
    --b8-header-height: 64px;
  }

  .b8-header__logo img {
    height: 34px;
  }

  .b8-footer > .b8-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .b8-footer__nav ul {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   LAYER 10 — POST SIDEBAR (table of contents + relocated author card)
   post.hbs renders the article body in a two-column grid: reading-width
   body on the left, a sticky 300px sidebar on the right. main.js builds
   the ToC from the article's h2 headings and moves any .b8-author-card
   snippets out of the body into the sidebar slot. When both slots end up
   empty the layout collapses to a single centred column.
   ========================================================================== */

.b8-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 3rem;
  align-items: start;
  max-width: calc(var(--b8-container-narrow) + 300px + 3rem);
  margin: 0 auto;
}

.b8-article__layout--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--b8-container-narrow);
}

.b8-post-sidebar {
  position: sticky;
  top: calc(var(--b8-header-height) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

/* Dark panel variant of the ToC (the base .b8-toc is the light legal box) */
.b8-post-sidebar .b8-toc {
  margin: 0;
  padding: 1.4rem 1.6rem;
  background: var(--b8-elevated);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-lg);
}

.b8-post-sidebar .b8-toc .b8-eyebrow {
  margin: 0 0 0.8rem;
}

.b8-post-sidebar .b8-toc__item + .b8-toc__item {
  margin-top: 0.55rem;
}

.b8-post-sidebar .b8-toc__link {
  display: block;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--b8-text-muted);
  text-decoration: none;
}

.b8-post-sidebar .b8-toc__link:hover {
  opacity: 0.8;
  color: var(--b8-text);
}

.b8-post-sidebar__author {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.b8-post-sidebar__author[hidden] {
  display: none;
}

/* The relocated card stacks vertically in the narrow column */
.b8-post-sidebar .b8-author-card {
  flex-direction: column;
  padding: 1.4rem;
}

@media (max-width: 1023px) {
  .b8-article__layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--b8-container-narrow);
  }

  /* Stack the sidebar above the article: ToC first, then author byline */
  .b8-post-sidebar {
    position: static;
    order: -1;
  }

  .b8-post-sidebar .b8-author-card {
    flex-direction: row;
  }
}

/* --- Blog filter column (index.hbs + tag.hbs) -----------------------------
   Left-hand Categories/Tags panels; the feed narrows to two card columns
   beside them. Filtering uses Ghost's tag archives, so the same layout
   renders on /blog/ and /tag/{slug}/ with the active filter highlighted. */

.b8-blog-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.b8-blog-layout .b8-post-feed {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.b8-blog-filters {
  position: sticky;
  top: calc(var(--b8-header-height) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.b8-filters__group {
  padding: 1.4rem 1.6rem;
  background: var(--b8-elevated);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-lg);
}

.b8-filters__group .b8-eyebrow {
  margin: 0 0 0.8rem;
}

.b8-filters__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.b8-filters__item + .b8-filters__item {
  margin-top: 0.55rem;
}

.b8-filters__item a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--b8-text-muted);
}

.b8-filters__item a:hover {
  opacity: 0.8;
  color: var(--b8-text);
}

.b8-filters__item.is-active a {
  color: var(--b8-magenta-bright);
  font-weight: 700;
}

.b8-filters__count {
  font-size: 0.8rem;
  color: var(--b8-text-soft);
  font-variant-numeric: tabular-nums;
}

.b8-filters__item--empty {
  font-size: 0.9rem;
  color: var(--b8-text-soft);
}

@media (max-width: 1023px) {
  .b8-blog-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .b8-blog-filters {
    position: static;
  }
}

@media (max-width: 720px) {
  .b8-blog-layout .b8-post-feed {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- In-post snippet components (docs/content/post-snippets.html) ---------
   FAQ accordion and the "What to do next" mini-CTA cards, pasted into post
   bodies as HTML cards. Native details/summary — no JS required. */

.b8-faq__item {
  background: var(--b8-elevated);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-lg);
  overflow: hidden;
}

.b8-faq__item + .b8-faq__item {
  margin-top: 0.8rem;
}

.b8-faq__item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  font-weight: 700;
  color: var(--b8-text);
  cursor: pointer;
  list-style: none;
}

.b8-faq__item summary::-webkit-details-marker {
  display: none;
}

.b8-faq__item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1;
  color: var(--b8-magenta);
}

.b8-faq__item[open] summary::after {
  content: "\2212";
}

.b8-faq__answer {
  padding: 0 1.4rem 1.2rem;
}

.b8-faq__answer p {
  margin: 0 0 0.8rem;
  color: var(--b8-text-muted);
}

.b8-faq__answer p:last-child {
  margin-bottom: 0;
}

.b8-next__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.2rem;
}

/* A single mini card spans the full content width */
.b8-next__grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.b8-next__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.6rem;
  background: var(--b8-elevated);
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-lg);
}

.b8-next__card p {
  margin: 0;
  color: var(--b8-text);
}

.b8-next__card .b8-btn {
  margin-top: auto;
}

@media (max-width: 720px) {
  .b8-next__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   LAYER 11 — FLAT BLOG RESTYLE (live-site look)
   Per direction 2026-08-08: blog surfaces drop the card idiom for the live
   site's open, flat compositions. Feed entries become full-width rows
   separated by the design system's thin magenta dividers; the featured
   post and the side panels (filters, post ToC) lose their elevated boxes.
   The author card, FAQ items and next-step mini cards keep their panels
   (functional affordances), as does the post page's "Keep reading" pair.
   ========================================================================== */

:root {
  --b8-divider: rgba(219, 43, 101, 0.35); /* DS: thin 1px magenta divider */
}

/* Featured post: open split, no panel, hairline underneath */
.b8-blog-hero__inner {
  padding: 0 0 3rem;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--b8-divider);
}

/* Feed: open list rows instead of the card grid */
.b8-blog-layout .b8-post-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
}

.b8-blog-layout .b8-post-card {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  padding: 2.25rem 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--b8-divider);
}

.b8-blog-layout .b8-post-card:hover {
  opacity: 1;
  box-shadow: none;
}

.b8-blog-layout .b8-post-card:first-child {
  padding-top: 0.5rem;
}

.b8-blog-layout .b8-post-card:last-child {
  border-bottom: 0;
}

.b8-blog-layout .b8-post-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--b8-radius-lg);
}

.b8-blog-layout .b8-post-card__content {
  padding: 0;
}

/* Side panels: borderless flat groups with hairline separation */
.b8-filters__group,
.b8-post-sidebar .b8-toc {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.b8-filters__group + .b8-filters__group {
  border-top: 1px solid var(--b8-divider);
  padding-top: 1.5rem;
}

@media (max-width: 720px) {
  .b8-blog-layout .b8-post-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
}

/* --- PR #2 review fixes ---------------------------------------------------
   (1) collapseEmptyPostSidebar sets hidden on the aside, but the flex
   display rule would otherwise defeat the attribute. (2) The author-card
   name must win against the generic .b8-author-card p bio styling now
   that snippets use <p> names to preserve document heading order.
   (3) The two-column article grid only engages when the sidebar actually
   has visible content, so no-JS visitors (and empty sidebars on browsers
   without :has support) get a centred single column by default. */

.b8-post-sidebar[hidden] {
  display: none;
}

.b8-author-card .b8-author-card__name {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--b8-text);
}

/* Single column is the base state; JS adds --single explicitly as the
   fallback for engines without :has() */
.b8-article__layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--b8-container-narrow);
}

@media (min-width: 1024px) {
  .b8-article__layout:has(> .b8-post-sidebar > :not([hidden])) {
    grid-template-columns: minmax(0, 1fr) 300px;
    max-width: calc(var(--b8-container-narrow) + 300px + 3rem);
  }

  .b8-article__layout--single,
  .b8-article__layout--single:has(> .b8-post-sidebar > :not([hidden])) {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--b8-container-narrow);
  }
}

/* Post header as a full-bleed background band (live partner-page style):
   the base .b8-article__header caps itself at reading width with no
   vertical padding — when it carries .b8-section--bg the band must span
   the viewport and give the image room, while the inner narrow container
   keeps the text at reading width. */
.b8-article__header.b8-section--bg {
  max-width: none;
  margin: 0 0 2.5rem;
  padding: 4.5rem var(--b8-gutter);
}

/* ==========================================================================
   LAYER 12 — TRANSPARENT FULL-WIDTH HEADER
   Per direction 2026-08-08: the header is transparent so the page
   background (hero bands) shows through it, matching the live site; it
   gains the solid ink fill once scrolled (.is-scrolled, set by main.js)
   so nav stays readable over article text. Header content spans the full
   viewport width with the logo at the top-left corner. The header is
   fixed (overlaying the page) and the first section of each page pads
   down to clear it, so its band extends beneath the header.
   ========================================================================== */

.b8-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  transition: background-color var(--b8-dur-base) var(--b8-ease);
}

.b8-header.is-scrolled {
  background: var(--b8-ink);
}

/* Pages that open on a light surface keep the solid header for contrast */
body:has(.b8-section--light) .b8-header {
  background: var(--b8-ink);
}

/* Full-bleed header row: logo top-left with the menu items aligned left
   beside it; the Client Portal button alone on the right */
.b8-header > .b8-container {
  max-width: none;
  padding: 0 3.5rem; /* live: 56px edge offset */
  justify-content: flex-start;
  gap: 1.75rem; /* live: 42px logo-to-first-item text gap incl. item padding */
}

.b8-header__actions {
  margin-left: auto;
}

/* First section of every page clears the fixed header; bands with
   background imagery therefore run up behind the transparent header */
main > .b8-section:first-child,
main > .b8-article > .b8-section:first-child {
  padding-top: calc(var(--b8-header-height) + 3rem);
}

@media (max-width: 880px) {
  .b8-header > .b8-container {
    padding: 0 1.25rem;
  }
}

/* Animated caret motif. Per direction 2026-08-10 the motif animates
   EVERYWHERE it appears: .b8-caret (empty-span form used in snippets)
   and .b8-underscore (the literal _ used across the templates) share
   the same blink. This deliberately diverges from the live site, whose
   underscores are static. */
.b8-caret {
  display: inline-block;
  width: 0.5em;
  height: 0.08em;
  margin-left: 0.12em;
  vertical-align: baseline;
  background: var(--b8-magenta);
  animation: b8-caret-blink 1.1s steps(1, end) infinite;
}

@keyframes b8-caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* The literal underscore spans blink with the same rhythm */
.b8-underscore {
  animation: b8-caret-blink 1.1s steps(1, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .b8-caret,
  .b8-underscore {
    animation: none;
    opacity: 1;
  }
}

/* ==========================================================================
   LAYER 13 — ARTICLE IMAGES: third-width, text-wrapped
   Per direction 2026-08-10: images inside post bodies render at one third
   of the content width with the text wrapping around them (floated right
   so the reading edge stays stable). .gh-content must leave grid layout
   for this — floats are ignored on grid items; the named-column breakouts
   are inert in the sidebar layout anyway (the column already constrains
   wide/full cards). Author-explicit wide/full image cards keep full
   column width. Mobile returns images to full width.
   ========================================================================== */

.gh-content {
  display: block;
}

/* Contain floats so they cannot spill into the tags/footer below */
.gh-content::after {
  content: "";
  display: block;
  clear: both;
}

.gh-content figure.kg-image-card:not(.kg-width-wide):not(.kg-width-full),
.gh-content > img:not(.kg-image) {
  float: right;
  clear: right;
  width: 33.333%;
  margin: 0.4rem 0 1.2rem 2rem;
}

.gh-content figure.kg-image-card:not(.kg-width-wide):not(.kg-width-full) img {
  width: 100%;
  margin: 0;
  border-radius: var(--b8-radius-md);
}

/* New sections start below any floated image */
.gh-content h2,
.gh-content h3 {
  clear: both;
}

@media (max-width: 720px) {
  .gh-content figure.kg-image-card:not(.kg-width-wide):not(.kg-width-full),
  .gh-content > img:not(.kg-image) {
    float: none;
    clear: none;
    width: 100%;
    margin: 0;
  }
}

/* ==========================================================================
   LAYER 14 — BLOG IMAGE BORDERS
   Per direction 2026-08-10: blog-page imagery gets the design system's
   subtle 1px hairline border. (The wrapped one-third article feature image
   trialled here was reverted on 2026-08-26 — the feature image stays
   full-width above the article layout.)
   ========================================================================== */

.b8-blog-layout .b8-post-card__image,
.b8-blog-hero__visual img {
  border: 1px solid var(--b8-border-soft);
}

/* ==========================================================================
   LAYER 15 — POST HERO + BACK LINK
   Per direction 2026-08-27: the post header becomes the same 7/5
   two-column hero as the blog index when the post has a feature image
   (copy left, image right, sized like the blog hero and resized — never
   cropped), instead of a full-width image between title and body. Every
   post carries a "Back to blog" link above the eyebrow. Posts without a
   feature image keep the centred reading-width header.
   ========================================================================== */

.b8-back {
  display: flex; /* block-level so the eyebrow starts on its own line */
  width: max-content;
  align-items: center;
  gap: 0.45em;
  margin: 0 0 1.4rem;
  font-family: var(--b8-font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--b8-text-muted);
  transition: color var(--b8-dur-fast) var(--b8-ease);
}

.b8-back:hover,
.b8-back:focus-visible {
  color: var(--b8-white);
}

.b8-back__arrow {
  display: inline-block;
  transition: transform var(--b8-dur-fast) var(--b8-ease);
}

.b8-back:hover .b8-back__arrow {
  transform: translateX(-0.2em);
}

/* End-of-article copy of the back link: first thing in the article footer,
   directly under the content, ahead of the rule and the tags */
.b8-back--end {
  margin: 0;
}

.b8-article__header--with-image .b8-article__hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); /* same split as .b8-blog-hero__inner */
  gap: 2.5rem;
  align-items: center;
  text-align: left;
}

.b8-article__header--with-image h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
}

.b8-article__header--with-image .b8-hero__lede {
  margin-left: 0;
  margin-right: 0;
}

.b8-article__header .b8-article__feature {
  margin: 0;
}

.b8-article__header .b8-article__feature img {
  width: 100%;
  height: auto; /* resize, never crop */
  border: 1px solid var(--b8-border-soft);
  border-radius: var(--b8-radius-lg);
  box-shadow: none;
}

.b8-article__header .b8-article__feature figcaption {
  text-align: left;
}

@media (max-width: 880px) {
  .b8-article__header--with-image .b8-article__hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .b8-back__arrow {
    transition: none;
  }

  .b8-back:hover .b8-back__arrow {
    transform: none;
  }
}

/* ==========================================================================
   LAYER 16 — FOOTER PARITY (live block8.ai re-measured 2026-08-27)
   The live footer is three equal columns: brand (shield, legal line
   centred on the shield, then a magenta OFFICES label with a bulleted
   list of office links), six links in a 3 x 2 grid with ~98px column
   pitch and 30px row gap starting 36px into the middle column, and the
   social buttons right-aligned in the last column. Everything top-aligns
   on the first row. Measured at 1400px: link columns x=553/651/749,
   rows y=111/161; offices label 18px under the legal line, list indented
   40px with 26px row pitch.
   ========================================================================== */

.b8-footer > .b8-container,
.b8-footer > .b8-container:first-child {
  align-items: flex-start;
}

.b8-footer__brand,
.b8-footer__nav,
.b8-footer__social {
  flex: 1 1 0;
  min-width: 0;
}

.b8-footer__brand {
  align-items: flex-start;
  gap: 1.45rem;
}

.b8-footer__brand-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.b8-footer__legal p {
  display: flex;
  align-items: center;
  min-height: 50px; /* the legal line centres on the 50px shield; the offices hang below */
}

/* .b8-footer__brand p (0,1,1) sets muted text — needs the compound selector */
.b8-footer__brand .b8-footer__offices-label {
  margin: 0 0 1.15rem;
  font-family: var(--b8-font-sans);
  font-size: 0.875rem;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--b8-magenta);
}

.b8-footer__offices-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0 0 0 2.5rem;
  list-style: disc;
  font-size: 0.875rem;
  line-height: 20px; /* live: 20px rows at ~26px pitch */
}

.b8-footer__offices-list li::marker {
  color: var(--b8-white);
}

.b8-footer__offices-list a {
  color: var(--b8-white);
}

.b8-footer__nav {
  padding-left: 2.25rem; /* live: links start 36px into the middle column */
}

.b8-footer__nav ul {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 1.875rem 1.5rem;
  justify-content: start;
  align-items: start;
  padding-top: 15px; /* first link row centres on the shield's midline, like the legal line */
}

.b8-footer__nav li {
  line-height: 20px; /* live: 20px rows, 50px pitch with the 30px row gap */
}

/* Live's fixed ~98px column pitch once the middle third has room for it */
@media (min-width: 1200px) {
  .b8-footer__nav ul {
    grid-template-columns: repeat(3, minmax(98px, auto));
    column-gap: 0;
  }
}

.b8-footer__nav a {
  line-height: 20px;
}

.b8-footer__social {
  justify-content: flex-end;
  padding-top: 5px; /* 40px buttons centre on the shield's midline */
}

@media (max-width: 880px) {
  .b8-footer__nav {
    padding-left: 0;
  }
}

@media (max-width: 560px) {
  .b8-footer__brand,
  .b8-footer__nav,
  .b8-footer__social {
    flex: 0 0 auto;
    width: 100%;
  }

  .b8-footer__social {
    justify-content: flex-start;
    padding-top: 0;
  }

  .b8-footer__nav ul {
    padding-top: 0;
  }
}

/* ==========================================================================
   LAYER 17 — VIEWPORT-SCALED CHROME PARITY (live measured at 1400 AND 1920,
   2026-08-27). Layers 9/12/16 matched the live site at 1400px with fixed
   pixel values; the live chrome actually scales with the viewport, so at
   wider screens ours drifted (header 106 vs 127px, edges 56 vs 77px, nav
   gaps 42 vs 58px, footer padding 64 vs 140px). Measured live rules:
   - Header: 2vw vertical padding around the 50px logo (106px @1400, 127px
     @1920); 4vw edge offset (56/77); 3vw between nav item texts and from
     the logo to the first item (42/58); CTA right edge at 4vw; CTA fill is
     the brand magenta #DB2B65 regardless of any CMS accent setting.
   - Pre-footer: 1200px zero-gutter container centred (4vw gutters when the
     viewport is narrower); hairline rule 57px above the tagline; tagline
     29.9px / line-height 1 / -0.02em in a 400px block; 73/75/78px below
     it to the magenta bar @1400/1600/1920.
   - Footer: same 1200px container with the live grid's inner offsets
     (36px left / 20px right up to 1499px; 24 / 9 from 1500px); section
     padding 95/106/122px top (bar-inclusive) and 139/153/169px bottom
     @1400/1600/1920, linear in vw; the ROWS never move relative to the
     shield (legal line centred on it, links level with the legal line,
     36px socials with a 10px gap centred on it); text tracked -0.012em.
     Measure live only after scrollIntoView + a long settle — the shield
     lazy-loads and a half-loaded read once suggested the rows rescale.
   ========================================================================== */

@media (min-width: 881px) {
  :root {
    --b8-header-height: calc(50px + 4vw); /* 106px @1400, 127px @1920 */
  }

  .b8-header > .b8-container {
    padding: 0 4vw;
    gap: max(0.5rem, calc(3vw - 0.9rem)); /* 3vw logo-to-text, less the item's own 0.9rem padding */
  }

  .b8-nav > ul {
    gap: max(0px, calc(3vw - 1.8rem)); /* 3vw text-to-text, less two item paddings */
  }
}

/* Header CTA: the live button is the brand magenta; --b8-accent follows the
   Ghost Admin accent colour and must not recolour the chrome */
.b8-header__actions .b8-btn {
  background: var(--b8-magenta);
  border-color: var(--b8-magenta);
}

/* Shared 1200px chrome container: zero gutter at >= 1264px, 4vw below */
.b8-prefooter > .b8-container,
.b8-footer > .b8-container,
.b8-footer > .b8-container:first-child {
  max-width: calc(1200px + 8vw);
  padding-left: 4vw;
  padding-right: 4vw;
}

.b8-footer > .b8-container,
.b8-footer > .b8-container:first-child {
  padding-left: calc(4vw + 36px);  /* live grid inner offset, measured 36/20 @1400 */
  padding-right: calc(4vw + 20px);
}

@media (min-width: 1500px) {
  .b8-footer > .b8-container,
  .b8-footer > .b8-container:first-child {
    padding-left: calc(4vw + 24px); /* live steps to 24/9 @1600 and @1920 */
    padding-right: calc(4vw + 9px);
  }
}

.b8-footer {
  /* live: 95/106/122px @1400/1600/1920 from the bar's top edge (bar-inclusive), so 5px less here */
  padding-top: clamp(64px, 5.19vw + 17.3px, 200px);
  /* live: 139/153/169px below the last office line */
  padding-bottom: clamp(64px, 5.77vw + 58.2px, 220px);
  letter-spacing: -0.012em; /* live body tracking (-0.1688px @14px) */
}

.b8-footer__social {
  gap: 10px;
  padding-top: 8px; /* 36px buttons centre on the shield's midline (live: constant at every width) */
}

.b8-footer__social a {
  width: 36px;
  height: 36px;
}

.b8-footer__social svg {
  width: 18px;
  height: 18px;
}

.b8-prefooter {
  padding-bottom: calc(0.96vw + 59.5px); /* live: 73/75/78px tagline-to-bar @1400/1600/1920 */
}

.b8-prefooter__rule {
  margin-bottom: 3.5625rem; /* 57px rule-to-tagline (constant live) */
}

.b8-prefooter__tagline {
  max-width: min(400px, 100%);
  font-size: 1.86875rem; /* 29.9px measured live */
  line-height: 1;
  letter-spacing: -0.02em;
}

@media (max-width: 880px) {
  .b8-footer > .b8-container,
  .b8-footer > .b8-container:first-child {
    padding-left: var(--b8-gutter);
    padding-right: var(--b8-gutter);
  }
}

@media (max-width: 560px) {
  .b8-footer__social {
    padding-top: 0;
  }
}