/* ─── Fonts ──────────────────────────────────────────────────
   Self-hosted so no request leaves for fonts.googleapis.com or
   fonts.gstatic.com — that removes a third-party origin from the
   critical path and stops visitor IPs being handed to Google.

   One variable file covers the whole 300–700 range the CSS uses.
   Subset to latin + latin-ext + the punctuation and arrow glyphs the
   site actually renders (← → — – · × © …); the arrows in particular
   are NOT in Google's default "latin" subset.

   Note: headings and stat figures declare font-weight: 800, which is above
   Space Grotesk's 700 ceiling, so the browser clamps them to 700. That is
   real 700 rather than the synthetic bold the previous 400-only Google Fonts
   request produced — cleaner strokes, very slightly lighter. Declarations are
   left at 800 so a heavier face can be dropped in later without edits.

   Regenerate: see tools/fonts/README.md
   ────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ─── Design tokens ──────────────────────────────────────────
   Dark theme — very dark green-black bg, lime green accent
   ────────────────────────────────────────────────────────── */
:root {
  /* Palette */
  --bg:           #0b0e0a;
  --bg-soft:      #0f1310;
  --bg-card:      #151a14;
  --bg-input:     #1c221b;
  --bg-dark:      #080a07;
  --text:         #dde5db;
  --text-inv:     #0c0f0a;
  --muted:        #7e8e7c;
  --muted-inv:    #7e8e7c;
  --accent:       #c8f135;
  --accent-hover: #d8f84a;
  --teal:         #c8f135;
  --teal-deep:    #a8d010;
  --lime:         #c8f135;
  --line:         rgba(255, 255, 255, 0.08);
  --line-inv:     rgba(255, 255, 255, 0.08);

  /* Shadows */
  --shadow-sm:   0 1px 4px rgba(0, 0, 0, 0.5);
  --shadow-md:   0 4px 20px rgba(0, 0, 0, 0.55);
  --shadow-lg:   0 12px 48px rgba(0, 0, 0, 0.65);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.5);

  /* Radius */
  --radius-xl: 14px;
  --radius-lg: 10px;
  --radius-md: 8px;
  --radius-sm: 4px;

  /* Spacing */
  --sp-1: 0.44rem;
  --sp-2: 0.67rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2.25rem;
  --sp-6: 3.38rem;
  --sp-7: 5.06rem;

  /* Layout */
  --container: 1280px;

  /* Nav + hover (hardcoded in dark, overridden in light) */
  --bg-nav:   rgba(11, 14, 10, 0.94);
  --bg-hover: #1c231b;
}

/* ─── Light theme overrides ───────────────────────────────── */
[data-theme="light"] {
  --bg:           #f5f7f4;
  --bg-soft:      #ecf0ea;
  --bg-card:      #ffffff;
  --bg-input:     #edf0eb;
  --bg-dark:      #e2e8e0;
  --text:         #131a11;
  --text-inv:     #ffffff;   /* white — readable on dark olive accent bg */
  --muted:        #576355;
  --line:         rgba(0, 0, 0, 0.1);
  --line-inv:     rgba(0, 0, 0, 0.1);
  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.07);
  --shadow-md:    0 4px 20px rgba(0, 0, 0, 0.09);
  --shadow-lg:    0 12px 48px rgba(0, 0, 0, 0.12);
  --shadow-card:  0 2px 12px rgba(0, 0, 0, 0.07);
  --bg-nav:       rgba(245, 247, 244, 0.94);
  --bg-hover:     #e8ece6;
  /* Accent overrides — lime #c8f135 is invisible on light bg */
  --accent:       #4d7a0d;
  --accent-hover: #3d6509;
  --teal:         #4d7a0d;
  --teal-deep:    #3d6509;
  --lime:         #4d7a0d;
}

/* ─── Reset & base ──────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background-color: var(--bg);
}

main[id],
section[id] {
  scroll-margin-top: 80px;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

p {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875em;
  background: rgba(200, 241, 53, 0.1);
  color: var(--lime);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
}

/* ─── Layout ─────────────────────────────────────────────── */
.container {
  width: min(100%, var(--container));
  margin: 0 auto;
  padding: 0 24px;
}

.site-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 400;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: var(--lime);
  color: var(--text-inv);
  font-weight: 700;
  transition: top 150ms ease;
}

.skip-link:focus {
  top: 12px;
}

/* Present in the accessibility tree and to crawlers, absent from the layout.
   Used for section headings that the visual design carries by other means —
   see the plugin grid on /plugins/, whose cards are h3 and need an h2 above
   them so the outline does not jump h1 -> h3. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
}

h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
}

h3 {
  font-size: 1.1rem;
  font-weight: 700;
}

.eyebrow {
  margin: 0 0 var(--sp-3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}

/* ─── Site header ────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 150;
  background: var(--bg-nav);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.nav-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 72px;
  position: relative;
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  text-decoration: none;
}

.brand-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--lime);
  position: relative;
  overflow: hidden;
}

.brand-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  background: var(--text-inv);
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.brand-copy {
  display: flex;
  align-items: center;
  gap: 5px;
}

.brand-name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.975rem;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}

.brand-tag { display: none; }

/* Logo images — swap on theme change */
.brand-logo {
  display: block;
  height: 48px;
  width: auto;
  object-fit: contain;
}

.brand-logo-light { display: block; }
.brand-logo-dark  { display: none; }

[data-theme="light"] .brand-logo-light { display: none; }
[data-theme="light"] .brand-logo-dark  { display: block; }

/* Nav — desktop inline text links */
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.header-nav a {
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 150ms ease;
  white-space: nowrap;
}

.header-nav a:hover,
.header-nav a:focus-visible {
  color: var(--text);
}

.header-nav a.is-current {
  color: var(--text);
}

.header-nav a.is-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.55rem;
  height: 2px;
  border-radius: 999px;
  background: var(--lime);
}

/* Side nav — fixed panel, always outside header in DOM */
.site-nav {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(86vw, 360px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 5rem 1.5rem 2rem;
  gap: var(--sp-4);
  overflow-y: auto;
  background: var(--bg-card);
  border-left: 1px solid var(--line);
  box-shadow: -24px 0 64px rgba(0, 0, 0, 0.55);
  z-index: 130;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 220ms ease, opacity 220ms ease, visibility 220ms ease;
}

body.nav-open .site-nav,
.site-nav.is-open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.side-nav-links {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.2rem;
}

.side-nav-links a {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: 0.925rem;
  line-height: 1.35;
}

.side-nav-links a:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.side-nav-links a.is-current {
  background: rgba(200, 241, 53, 0.08);
  color: var(--lime);
}

.side-nav-links a[href^="#"]:not([href="#contact"]) {
  display: none;
}

.side-nav-panel-actions {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--sp-4);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.side-nav-panel-actions .nav-cta {
  width: 100%;
  height: auto;
  padding: 0.75rem 1.25rem;
  justify-content: center;
}

/* Nav actions (right side) */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
  flex-shrink: 0;
}

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  padding: 0;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--bg-card);
  color: var(--text);
  border-color: rgba(200, 241, 53, 0.4);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.icon-sun  { display: none; }
.icon-moon { display: block; }
[data-theme="light"] .icon-sun  { display: block; }
[data-theme="light"] .icon-moon { display: none; }

/* Demo link */
.nav-demo {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  transition: color 150ms ease;
  white-space: nowrap;
}

.nav-demo:hover { color: var(--text); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  background: var(--lime);
  color: var(--text-inv) !important;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background 150ms ease;
  white-space: nowrap;
  border: none;
}

.nav-cta:hover {
  background: var(--accent-hover);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 180ms ease, border-color 180ms ease;
  position: relative;
  z-index: 140;
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.14);
}

.nav-toggle span {
  display: block;
  width: 17px;
  height: 2px;
  margin: 3px auto;
  background: var(--text);
  border-radius: 999px;
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

html.nav-open,
body.nav-open {
  overflow: hidden;
}

body.nav-open .back-to-top {
  display: none;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
  z-index: 100;
}

.nav-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ─── Buttons ────────────────────────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 48px;
  padding: 0 1.5rem;
  border-radius: var(--radius-md);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.925rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}

.button:hover {
  transform: translateY(-1px);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(200, 241, 53, 0.5);
  outline-offset: 3px;
}

.button-primary {
  background: var(--lime);
  color: var(--text-inv);
}

.button-primary:hover {
  background: var(--accent-hover);
}

.button-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.button-secondary:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

.button-sm {
  height: 38px;
  padding: 0 1rem;
  font-size: 0.85rem;
}

.text-link {
  font-weight: 600;
  color: var(--lime);
  font-size: 0.88rem;
  transition: opacity 150ms ease;
}

.text-link:hover {
  opacity: 0.8;
}

/* ─── Pills / tags ───────────────────────────────────────── */
.pill-row,
.card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.pill-row span,
.card-pills span {
  display: inline-flex;
  padding: 0.25rem 0.7rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.version-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 9999px;
  background: rgba(200, 241, 53, 0.1);
  border: 1px solid rgba(200, 241, 53, 0.22);
  color: var(--lime);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cs-pill {
  display: inline-flex;
  padding: 0.25rem 0.7rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── Sections ───────────────────────────────────────────── */
.content-section {
  padding: var(--sp-7) 0;
}

.content-section.alt {
  background: var(--bg-soft);
}

.section-heading {
  margin-bottom: var(--sp-5);
}

.section-heading.compact {
  margin-bottom: var(--sp-4);
}

.section-heading h2 {
  margin-top: var(--sp-2);
}

/* ─── Hero (plugin detail page) ──────────────────────────── */
/* Only plugins/plugin-page.php uses .hero. Since the hero was reduced to
   identity content (banner, name, pitch, CTAs) the old sp-7/sp-6 padding left it
   as tall as when it carried the full spec sheet — tightened to sp-5 both ends. */
.hero {
  padding: var(--sp-5) 0;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--line);
}

.hero .eyebrow {
  color: var(--lime);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr;
  gap: var(--sp-5);
  align-items: stretch;
}

.hero-copy {
  position: relative;
  overflow: hidden;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.025);
}

.hero-copy::after {
  content: "";
  position: absolute;
  right: -10%;
  bottom: -15%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 241, 53, 0.1), transparent 70%);
  pointer-events: none;
}

.hero-copy h1 {
  max-width: 16ch;
  margin: var(--sp-2) 0 var(--sp-4);
}

.hero-lead {
  color: var(--muted);
  line-height: 1.72;
  font-size: 1rem;
  max-width: 58ch;
  margin-bottom: var(--sp-4);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.requirements-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.requirements-strip div {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
}

.requirements-strip span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.requirements-strip strong {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.92rem;
  color: var(--text);
}

.hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.hero-metrics div {
  min-width: 130px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
}

.hero-metrics dt {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.hero-metrics dd {
  margin: 0;
  font-weight: 700;
  color: var(--text);
  font-size: 0.88rem;
}

/* Hero card (aside) */
/* ── Solo hero (plugin pages) ──
   The hero holds identity only, so hero-copy is the single full-width child
   instead of the left cell of a 2-col grid. Text is capped at a readable measure
   so the lines do not run the full 1280px container; the CTA row is exempt. */
.hero-copy--solo {
  width: 100%;
  padding: var(--sp-5);
}

.hero-copy--solo .eyebrow,
.hero-copy--solo h1,
.hero-copy--solo .hero-lead {
  max-width: 62ch;
}

/* sp-5 was sized for a panel that also held pills, requirements, and metrics
   below the buttons. With only the CTA row left it reads as a gap. */
.hero-copy--solo .hero-actions {
  margin-top: var(--sp-4);
}

/* ── "At a glance" band, directly below the plugin hero ──
   Holds what the hero used to carry: feature pills, requirements, metrics, and
   the signals card. Mirrors the old .hero-grid proportions so the card keeps the
   width it was designed for. */
.plugin-facts {
  padding: var(--sp-5) 0 var(--sp-6);
}

.plugin-facts-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr;
  gap: var(--sp-5);
  align-items: start;
}

/* Three captioned blocks, evenly spaced, with a hairline between them so the
   band reads as one organised panel rather than three loose piles. */
.facts-block + .facts-block {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.facts-label {
  margin: 0 0 var(--sp-3);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Requirements and metrics arrived here with different layout models — a fixed
   4-column grid and a min-width flex row — which made the two blocks sit on
   different rhythms. One auto-fit grid puts every cell on the same track size. */
.plugin-facts .requirements-strip,
.plugin-facts .hero-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-2);
  margin-top: 0;
}

.plugin-facts .hero-metrics div {
  min-width: 0;
}

.hero-card {
  padding: var(--sp-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
}

.plugin-badge {
  display: inline-flex;
  padding: 0.28rem 0.7rem;
  border-radius: 9999px;
  background: var(--lime);
  color: var(--text-inv);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-4);
}

.plugin-preview {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.plugin-icon {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: rgba(200, 241, 53, 0.08);
  border: 1px solid rgba(200, 241, 53, 0.18);
}

.plugin-icon span,
.plugin-icon span::before,
.plugin-icon span::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

.plugin-icon span {
  width: 18px;
  height: 18px;
  border: 2px solid var(--lime);
}

.plugin-icon span::before {
  width: 30px;
  height: 9px;
  border: 2px solid rgba(200, 241, 53, 0.45);
}

.plugin-icon span::after {
  width: 9px;
  height: 30px;
  border: 2px solid rgba(200, 241, 53, 0.45);
}

.plugin-preview-meta {
  color: var(--muted);
  font-size: 0.85rem;
}

.plugin-preview-copy {
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: var(--sp-4);
  font-size: 0.95rem;
}

.signal-list {
  list-style: none;
  padding-left: 0;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.signal-list li {
  padding-left: 1.6rem;
  position: relative;
  font-size: 0.95rem;
  line-height: 1.7;
}

.signal-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--lime);
  font-weight: 700;
}

/* ── Plugin marketing banner (masthead at the top of the plugin hero) ──
   Cropped 500 -> 340 tall, 16% off each edge, so a 1280px-wide banner renders
   282px instead of its native 414px and the hero stays short. The baked-in text
   on all three banners sits within the middle ~52% of the height, so it clears
   this crop — re-check if the artwork changes. aspect-ratio drives the height, so
   the intrinsic width/height attributes on the <img> still reserve the box and
   CLS stays 0. */
.plugin-banner-band {
  margin-bottom: var(--sp-3);
}

.plugin-banner {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1544 / 340;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
}

/* Narrow viewports: a 3:1 strip is already short, so show the full art
   uncropped rather than trimming it further. */
@media (max-width: 700px) {
  .plugin-banner {
    aspect-ratio: auto;
  }
}

/* Plugin name cell in the releases tables (homepage + /releases/). */
.release-plugin-cell {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ── Real plugin icons (assets/plugins/{slug}/icon.png) ──
   The WP.org icons are complete rounded tiles with their own opaque background,
   so the tinted box and border used by the CSS glyph have to come off or the
   tile sits inside a second frame in a clashing colour. The span is the glyph
   itself — no icon file means it stays and this class is never applied. */
.plugin-icon--image {
  background: none;
  border: 0;
  overflow: hidden;
}

.plugin-icon--image picture,
.plugin-icon--image img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.plugin-icon--image img {
  object-fit: cover;
}

.plugin-icon--sm {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
}

.plugin-icon--xs {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
}

/* ── Plugin icon color variants ── */
.plugin-icon.icon-lime {
  background: rgba(200, 241, 53, 0.12);
  border-color: rgba(200, 241, 53, 0.3);
}
.plugin-icon.icon-lime span { border-color: var(--lime); }
.plugin-icon.icon-lime span::before,
.plugin-icon.icon-lime span::after { border-color: rgba(200, 241, 53, 0.5); }

.plugin-icon.icon-teal {
  background: rgba(45, 212, 191, 0.12);
  border-color: rgba(45, 212, 191, 0.3);
}
.plugin-icon.icon-teal span { border-color: #2dd4bf; }
.plugin-icon.icon-teal span::before,
.plugin-icon.icon-teal span::after { border-color: rgba(45, 212, 191, 0.5); }

.plugin-icon.icon-purple {
  background: rgba(129, 140, 248, 0.12);
  border-color: rgba(129, 140, 248, 0.3);
}
.plugin-icon.icon-purple span { border-color: #818cf8; }
.plugin-icon.icon-purple span::before,
.plugin-icon.icon-purple span::after { border-color: rgba(129, 140, 248, 0.5); }

.plugin-icon.icon-orange {
  background: rgba(251, 146, 60, 0.12);
  border-color: rgba(251, 146, 60, 0.3);
}
.plugin-icon.icon-orange span { border-color: #fb923c; }
.plugin-icon.icon-orange span::before,
.plugin-icon.icon-orange span::after { border-color: rgba(251, 146, 60, 0.5); }

.plugin-preview-label {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.plugin-preview-meta {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.plugin-preview-copy {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: var(--sp-4);
  font-size: 0.9rem;
}

.signal-list {
  list-style: none;
  padding-left: 0;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.signal-list li {
  padding-left: 1.4rem;
  position: relative;
  font-size: 0.88rem;
  line-height: 1.6;
}

.signal-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--lime);
  font-weight: 700;
}

/* ─── Lab hero (landing page) ─────────────────────────────── */
.lab-hero {
  position: relative;
  overflow: hidden;
  padding: var(--sp-7) 0 var(--sp-6);
  background: var(--bg-dark);
  border-bottom: 1px solid var(--line);
}

.lab-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(200, 241, 53, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(200, 241, 53, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

.lab-hero .eyebrow {
  color: var(--lime);
}

.lab-hero-inner {
  position: relative;
  z-index: 1;
}

.lab-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-6);
  align-items: center;
}

.lab-hero-inner h1 {
  max-width: none;
  margin: var(--sp-2) 0 var(--sp-4);
}

.lab-hero-inner .hero-lead {
  max-width: 60ch;
}

.lab-hero-inner .pill-row {
  margin-top: var(--sp-4);
}

.lab-hero-inner .hero-actions {
  margin-top: var(--sp-5);
}

/* Lab hero visual (right side) */
.lab-hero-visual {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* WordPress hero scene */
.wp-hero-scene {
  position: relative;
  min-height: 260px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease-out;
  will-change: transform;
}

/* Dot grid background */
.wp-scene-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(200, 241, 53, 0.18) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: 0.5;
}

/* Radial glow */
.wp-scene-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(200, 241, 53, 0.1) 0%, transparent 60%);
  animation: wp-glow-pulse 3s ease-in-out infinite;
  pointer-events: none;
}

/* Sweeping scan line */
.wp-scene-scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(200, 241, 53, 0.4) 30%, rgba(200, 241, 53, 0.8) 50%, rgba(200, 241, 53, 0.4) 70%, transparent 100%);
  animation: wp-scan 5s ease-in-out infinite 0.5s;
  pointer-events: none;
}

/* Orbit ring (static dashed circle) */
.wp-orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 164px;
  height: 164px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(200, 241, 53, 0.18);
  pointer-events: none;
}

/* Orbit arms — each rotates, dot counter-rotates to stay upright */
.wp-orbit-arm {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 164px;
  height: 164px;
  transform: translate(-50%, -50%);
  animation: wp-orbit-spin 16s linear infinite;
}

.wp-orbit-arm--b { animation-delay: -5.33s; }
.wp-orbit-arm--c { animation-delay: -10.67s; }

.wp-orbit-dot {
  position: absolute;
  top: -14px;
  left: calc(50% - 14px);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(200, 241, 53, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: wp-orbit-counter 16s linear infinite;
  transition: background 0.2s, border-color 0.2s;
}

.wp-orbit-arm--b .wp-orbit-dot { animation-delay: -5.33s; }
.wp-orbit-arm--c .wp-orbit-dot { animation-delay: -10.67s; }

.wp-orbit-dot:hover {
  background: rgba(200, 241, 53, 0.15);
  border-color: rgba(200, 241, 53, 0.5);
}

.wp-orbit-dot svg {
  width: 13px;
  height: 13px;
  color: var(--lime);
}

/* Center WP logo */
.wp-scene-center {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wp-logo-halo {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(200, 241, 53, 0.25);
  animation: wp-halo-pulse 2.8s ease-in-out infinite;
}

.wp-logo-mark {
  position: relative;
  width: 84px;
  height: 84px;
  color: var(--lime);
  animation: wp-logo-pulse 2.8s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(200, 241, 53, 0.4));
}

.wp-logo-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Corner chips */
.wp-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 7px;
  border-radius: 999px;
  background: rgba(11, 14, 10, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.71rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  animation: wp-chip-float 3.5s ease-in-out infinite;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  cursor: default;
  backdrop-filter: blur(6px);
  z-index: 4;
}

.wp-chip:hover {
  background: rgba(200, 241, 53, 0.1);
  border-color: rgba(200, 241, 53, 0.35);
  color: var(--text);
}

[data-theme="light"] .wp-chip {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--muted);
}

[data-theme="light"] .wp-chip:hover {
  background: rgba(77, 122, 13, 0.08);
  border-color: rgba(77, 122, 13, 0.28);
  color: var(--text);
}

.wp-chip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 5px rgba(200, 241, 53, 0.8);
  flex-shrink: 0;
  animation: wp-dot-blink 2s ease-in-out infinite;
}

.wp-chip svg {
  width: 12px;
  height: 12px;
  color: var(--lime);
  flex-shrink: 0;
}

.wp-chip--1 { top: 18px; left: 18px; animation-delay: 0s; }
.wp-chip--2 { top: 18px; right: 18px; animation-delay: 1s; }
.wp-chip--3 { bottom: 18px; left: 18px; animation-delay: 1.8s; }
.wp-chip--4 { bottom: 18px; right: 18px; animation-delay: 2.6s; }

.wp-chip--2 .wp-chip-dot { animation-delay: 0.5s; }
.wp-chip--3 .wp-chip-dot { animation-delay: 1s; }
.wp-chip--4 .wp-chip-dot { animation-delay: 1.5s; }

/* Animations */
@keyframes wp-glow-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes wp-scan {
  0% { transform: translateY(0); opacity: 0; }
  6% { opacity: 1; }
  88% { opacity: 0.5; }
  100% { transform: translateY(260px); opacity: 0; }
}

@keyframes wp-orbit-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes wp-orbit-counter {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes wp-halo-pulse {
  0%, 100% { transform: scale(1); opacity: 0.35; }
  50% { transform: scale(1.12); opacity: 0.7; }
}

@keyframes wp-logo-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(200, 241, 53, 0.3)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 22px rgba(200, 241, 53, 0.7)); transform: scale(1.05); }
}

@keyframes wp-chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes wp-dot-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .wp-scene-glow,
  .wp-scene-scan-line,
  .wp-orbit-arm,
  .wp-orbit-dot,
  .wp-logo-halo,
  .wp-logo-mark,
  .wp-chip,
  .wp-chip-dot { animation: none; }
}

@keyframes wp-chip-cycle {
  0%, 18%  { opacity: 1; }
  23%, 100% { opacity: 0; }
}

@media (max-width: 480px) {
  .wp-scene-bg-grid { background-size: 22px 22px; }
  .wp-chip {
    animation: wp-chip-cycle 12s ease-in-out infinite;
    opacity: 0;
  }
  .wp-chip--1 { animation-delay: 0s; }
  .wp-chip--2 { animation-delay: 3s; }
  .wp-chip--3 { animation-delay: 6s; }
  .wp-chip--4 { animation-delay: 9s; }
}

.visual-stat-stack {
  display: grid;
  gap: var(--sp-2);
}

.visual-stat-card {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
}

.visual-stat-card strong,
.visual-stat-card span {
  display: block;
}

.visual-stat-card strong {
  color: var(--text);
  font-size: 0.975rem;
  font-weight: 700;
}

.visual-stat-card span {
  color: var(--muted);
  margin-top: 0.2rem;
  font-size: 0.82rem;
}

/* ─── Stats strip ────────────────────────────────────────── */
.stats-strip {
  padding: var(--sp-5) 0;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}

/* auto-fit rather than a hardcoded track count: $home['stats'] drives the item
   count, and a fixed repeat(4) left a visibly empty cell when it dropped to 3. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stats-grid article {
  padding: var(--sp-4);
  background: var(--bg-card);
}

.stats-grid strong,
.stats-grid span {
  display: block;
}

.stats-grid strong {
  color: var(--lime);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.stats-grid span {
  color: var(--muted);
  margin-top: 0.35rem;
  font-size: 0.855rem;
}

/* ─── Plugins listing hero ───────────────────────────────── */
.plugins-hero {
  padding: var(--sp-6) 0 var(--sp-5);
  background: var(--bg-dark);
  border-bottom: 1px solid var(--line);
}

.plugins-hero .eyebrow {
  color: var(--lime);
}

.plugins-hero h1 {
  margin: var(--sp-2) 0 var(--sp-3);
}

.plugins-hero .hero-lead {
  max-width: 66ch;
  color: var(--muted);
}

/* ─── Plugins hero (two-column: text left, stats right) ───── */
.plugins-hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-6);
  align-items: center;
}

.plugins-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.plugins-hero-stats {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.plugins-hero-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  min-width: 440px;
  text-align: center;
}

.plugins-hero-stats strong {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--lime);
  line-height: 1;
}

.plugins-hero-stats span {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.listing-toolbar {
  margin-top: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.listing-note {
  color: var(--muted);
  max-width: 66ch;
  font-size: 0.88rem;
}

/* ─── Directory controls ─────────────────────────────────── */
.directory-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.directory-control {
  display: grid;
  gap: 0.4rem;
  min-width: min(100%, 220px);
}

.directory-control span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.directory-control select,
.directory-control input {
  min-height: 42px;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
}

.directory-control select:focus,
.directory-control input:focus {
  outline: 1px solid rgba(200, 241, 53, 0.35);
  border-color: rgba(200, 241, 53, 0.28);
}

.directory-control-wide {
  flex: 1 1 280px;
}

.directory-summary {
  margin-bottom: var(--sp-4);
  color: var(--muted);
  font-size: 0.875rem;
}

.directory-extra {
  margin-top: var(--sp-4);
}

/* Filter pills (replaces select dropdown on plugins page) */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--sp-4);
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  text-decoration: none;
  white-space: nowrap;
}

.filter-pill:hover {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.filter-pill.is-active {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--text-inv);
}

/* ─── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--lime);
  opacity: 0.75;
  transition: opacity 150ms ease;
}

.breadcrumb a:hover {
  opacity: 1;
}

/* Was a hardcoded rgba(255,255,255,0.18), which made the separators invisible
   against every light-theme background. --muted is theme-aware. */
.breadcrumb-sep {
  color: var(--muted);
  opacity: 0.55;
}

/* ─── Two-column ─────────────────────────────────────────── */
.two-column {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-6);
  align-items: start;
}

/* ─── Highlight panel ────────────────────────────────────── */
.highlight-panel {
  padding: var(--sp-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--bg-card);
}

.highlight-panel h3 {
  margin-bottom: var(--sp-3);
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
}

.check-list {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.check-list li {
  padding-left: 1.4rem;
  position: relative;
  color: var(--muted);
  line-height: 1.65;
  font-size: 0.9rem;
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--lime);
  font-weight: 700;
}

.resource-list a {
  color: var(--lime);
  font-weight: 600;
}

/* ─── Feature grid ───────────────────────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.feature-grid article {
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-card);
  transition: border-color 200ms ease;
}

.feature-grid article:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

.icon-grid article,
.related-card {
  position: relative;
  padding-top: 4rem;
}

.icon-grid article::before,
.related-card::before {
  content: "";
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: rgba(200, 241, 53, 0.1);
  border: 1px solid rgba(200, 241, 53, 0.2);
}

.icon-grid .icon-wrap {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(200, 241, 53);
  z-index: 1;
}

.icon-grid .icon-wrap svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.feature-grid article strong {
  display: block;
  font-size: 0.975rem;
  font-weight: 700;
  margin-bottom: var(--sp-2);
  color: var(--text);
}

.feature-grid p {
  color: var(--muted);
  line-height: 1.65;
  font-size: 0.88rem;
}

.audience-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ─── Data grid ──────────────────────────────────────────── */
.data-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.data-grid span {
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-card);
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ─── Spec table ─────────────────────────────────────────── */
.spec-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

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

.spec-table th,
.spec-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.spec-table tr:last-child th,
.spec-table tr:last-child td {
  border-bottom: none;
}

.spec-table th {
  width: 36%;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.86rem;
  background: var(--bg-card);
}

.spec-table td {
  font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.015);
  font-size: 0.88rem;
}

/* ─── Pricing / CTA panels ───────────────────────────────── */
.pricing-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
}

.pricing-panel h2 {
  margin-top: var(--sp-2);
}

.pricing-panel p {
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.9rem;
}

.cta-panel {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--bg-card);
}

.cta-panel h2 {
  margin: var(--sp-2) 0 var(--sp-3);
}

.cta-panel p {
  color: var(--muted);
  font-size: 0.9rem;
}

.cta-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ─── Screenshots ────────────────────────────────────────── */
.shot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.shot-card {
  padding: var(--sp-4);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--bg-card);
}

.shot-image-wrap {
  margin-bottom: var(--sp-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

.shot-image {
  width: 100%;
  height: auto;
}

/* Topic hub hero intro — keeps multiple paragraphs in one grid cell */
.topic-intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.topic-intro .hero-lead {
  margin: 0;
}

/* Per-release changelog blocks on /releases/ */
.release-detail-list {
  display: grid;
  gap: var(--sp-4);
}

.release-detail {
  padding: var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.release-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.release-detail-head h3 {
  margin: 0;
}

.release-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* WP.org social proof on plugin cards — only rendered when real figures exist */
.plugin-card-proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  font-size: 0.8125rem;
  color: var(--muted);
}

.plugin-card-rating {
  color: var(--accent);
  font-weight: 600;
}

/* Plugin CTA block in the article sidebar */
.sidebar-plugin-tagline {
  display: block;
  margin-top: var(--sp-1);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}

.shot-card span {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(200, 241, 53, 0.1);
  border: 1px solid rgba(200, 241, 53, 0.2);
  color: var(--lime);
  font-weight: 800;
  font-size: 0.78rem;
}

.shot-card h3 {
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-size: 0.975rem;
}

.shot-card p {
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.86rem;
}

.related-card .text-link {
  display: inline-flex;
  margin-top: var(--sp-3);
}

/* ─── Changelog / Timeline ───────────────────────────────── */
.timeline {
  display: grid;
  gap: var(--sp-4);
}

.timeline-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.timeline-item {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
}

.timeline-item h3 {
  margin-bottom: var(--sp-3);
  font-size: 1.05rem;
}

.timeline-item ul {
  list-style: none;
  padding-left: 0;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  line-height: 1.65;
}

.timeline-item ul li {
  padding-left: 1.2rem;
  position: relative;
  font-size: 0.9rem;
}

.timeline-item ul li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--lime);
  font-weight: 700;
}

/* ─── Steps ──────────────────────────────────────────────── */
.steps {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  counter-reset: step;
  margin-top: 20px;
}

.steps li {
  padding-left: 2.4rem;
  position: relative;
  counter-increment: step;
  line-height: 1.65;
  color: var(--muted);
  font-size: 0.9rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: rgba(200, 241, 53, 0.1);
  border: 1px solid rgba(200, 241, 53, 0.28);
  color: var(--lime);
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── FAQ ────────────────────────────────────────────────── */
.faq-list {
  display: grid;
  gap: var(--sp-2);
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
}

.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.925rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.4;
  transition: color 150ms ease;
}

.faq-trigger::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--lime);
  line-height: 1;
}

.faq-trigger[aria-expanded="true"]::after {
  content: "−";
}

.faq-trigger:hover {
  color: var(--lime);
}

.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 240ms ease;
}

.faq-panel p {
  padding: 0 var(--sp-4) var(--sp-4);
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.88rem;
}

/* ─── Category sections ──────────────────────────────────── */
.lab-category {
  padding: var(--sp-7) 0;
}

.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

.category-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.category-title h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
}

/* ─── Plugin listing cards ───────────────────────────────── */
.plugin-listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-4);
}

.plugin-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--bg-card);
  transition: border-color 200ms ease, transform 200ms ease;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.plugin-card:hover {
  border-color: rgba(200, 241, 53, 0.3);
  transform: translateY(-2px);
}

.plugin-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}

.plugin-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
  min-width: 0;
}

.plugin-card-badge {
  display: inline-flex;
  padding: 0.18rem 0.6rem;
  border-radius: 9999px;
  background: rgba(200, 241, 53, 0.1);
  border: 1px solid rgba(200, 241, 53, 0.2);
  color: var(--lime);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  white-space: nowrap;
}

.plugin-card-info {
  min-width: 0;
}

.plugin-card-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.plugin-card-tagline {
  margin: 0.2rem 0 0;
  color: var(--lime);
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.85;
  line-height: 1.4;
}

.plugin-card-ver {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.plugin-card-desc {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 0.88rem;
  flex: 1;
}

.plugin-card-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}

.plugin-card-summary div {
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
}

.plugin-card-summary dt,
.plugin-card-summary dd {
  margin: 0;
}

.plugin-card-summary dt {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.plugin-card-summary dd {
  margin-top: 0.2rem;
  font-weight: 700;
  color: var(--text);
  font-size: 0.82rem;
}

.plugin-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  margin-top: auto;
}

/* ─── Coming-soon cards ──────────────────────────────────── */
.cs-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
  opacity: 0.3;
  pointer-events: none;
}

.cs-card {
  height: 130px;
  border-radius: var(--radius-xl);
  border: 1.5px dashed var(--line);
  background: var(--bg-card);
}

/* ─── Releases table ─────────────────────────────────────── */
.releases-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

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

.releases-table thead {
  background: var(--bg-card);
}

.releases-table th {
  padding: 0.7rem var(--sp-4);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.releases-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  vertical-align: middle;
  color: var(--muted);
}

.releases-table tr:last-child td {
  border-bottom: none;
}

.releases-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.releases-table .plugin-col {
  color: var(--text);
  font-weight: 600;
}

.releases-table .version-col {
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  color: var(--lime);
}

.releases-table .desc-col {
  max-width: 380px;
  line-height: 1.5;
}

.releases-table .date-col {
  white-space: nowrap;
  font-size: 0.82rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.65rem;
  border-radius: 9999px;
  background: rgba(200, 241, 53, 0.1);
  border: 1px solid rgba(200, 241, 53, 0.25);
  color: var(--lime);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.status-upcoming {
  background: rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.25);
  color: #60a5fa;
}

/* ─── Quickstart section ─────────────────────────────────── */
.quickstart-section {
  background: var(--bg-soft);
}

/* ─── Trust grid ─────────────────────────────────────────── */
.trust-grid {
  background: transparent;
  border: 0;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, 1fr);
}

.trust-grid span {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 0.875rem;
}

/* ─── Contact page ───────────────────────────────────────── */
.contact-hero {
  position: relative;
  overflow: hidden;
  padding: var(--sp-7) 0;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--line);
}

/* Same dual-ellipse glow .lab-hero uses, so the two hero treatments match. */
.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(200, 241, 53, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 88% 100%, rgba(200, 241, 53, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

/* Split hero: breadcrumb + eyebrow + h1 left, description right — the same
   two-column treatment /insights/ and /plugins/ use. 'end' alignment sits the
   description on the h1's baseline rather than floating at the top. */
.contact-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* Same ratio and gap as .two-column below, so the hero's description column
     lines up exactly with the contact-details column in the next section. */
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sp-6);
  align-items: end;
}

.contact-hero-aside {
  padding-bottom: var(--sp-2);
}

/* Right-hand column of the form section. Not sticky: unlike the taller support
   panel this replaced, the four contact cards are roughly the same height as the
   form, so there is no scroll range for sticky to act over. */
.contact-details-col {
  display: flex;
  flex-direction: column;
}

.contact-hero-copy .eyebrow {
  margin-bottom: var(--sp-2);
}

/* No font-size override — the base h1 scale (up to 4rem) applies. The old
   clamp capped at 3rem because this hero used to be a half-width column. */
.contact-hero-copy h1 {
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

/* In its own column now, so it fills that column rather than a fixed measure. */
.contact-hero-aside .hero-lead {
  font-size: 1.05rem;
  max-width: none;
  margin: 0;
}

.text-accent {
  color: var(--lime);
}

.contact-hero-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.contact-info-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease;
}

.contact-info-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: var(--bg-hover);
}

.contact-card-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
}

.contact-card-value {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 500;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.form-field input,
.form-field select,
.form-field textarea {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color 150ms ease;
  outline: none;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--muted);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--lime);
}

.form-field select option {
  background: var(--bg-card);
}

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

.form-field--error input,
.form-field--error select,
.form-field--error textarea {
  border-color: #e05252;
}

.form-field-error {
  font-size: 0.75rem;
  color: #e05252;
  margin-top: 0.25rem;
}

.form-success {
  background: color-mix(in srgb, var(--lime) 12%, transparent);
  border: 1px solid var(--lime);
  border-radius: var(--radius-sm);
  color: var(--fg);
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  margin-top: 20px;
}

.form-error-banner {
  background: color-mix(in srgb, #e05252 10%, transparent);
  border: 1px solid #e05252;
  border-radius: var(--radius-sm);
  color: var(--fg);
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

/* ─── Insights page ───────────────────────────────────────── */
.featured-post {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-5);
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease;
}

.featured-post:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: var(--bg-hover);
}

.featured-post-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.featured-post-body h2 {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.25;
  color: var(--text);
  margin: 0;
}

.featured-post-body p {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
  max-width: 60ch;
}

.featured-post-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  min-width: 160px;
  padding: var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.featured-post-stat strong {
  font-size: 3rem;
  font-weight: 800;
  color: var(--lime);
  line-height: 1;
}

.featured-post-stat span {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
}

.post-tag {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--lime) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--lime) 30%, transparent);
  color: var(--lime);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: max-content;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease;
}

.post-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: var(--bg-hover);
}

.post-card h3 {
  font-size: 0.975rem;
  line-height: 1.4;
  color: var(--text);
  margin: 0;
}

.post-card p {
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

/* ─── Single insight page ────────────────────────────────── */

/* Hero */
.insight-hero {
  padding: var(--sp-6) 0 var(--sp-5);
  background: var(--bg-dark);
  border-bottom: 1px solid var(--line);
}

.insight-hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-6);
  align-items: center;
}

.insight-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}

.insight-hero-text .post-tag {
  margin-bottom: var(--sp-1);
}

.insight-hero-text h1 {
  margin: 0;
}

.insight-hero-text .hero-lead {
  max-width: 66ch;
  color: var(--muted);
  margin: 0;
}

.insight-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-1);
}

.insight-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
}

.insight-meta-item svg {
  opacity: 0.65;
  flex-shrink: 0;
}

.insight-meta-sep {
  color: var(--line);
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.4;
}

.insight-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  min-width: 180px;
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.insight-hero-stat strong {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--lime);
  line-height: 1;
}

.insight-hero-stat span {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
  max-width: 14ch;
}

/* Article layout: prose + sidebar */
.insight-body-section {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-7);
}

.article-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--sp-6);
  align-items: start;
}

/* Prose */
.article-prose {
  min-width: 0;
}

.prose-section {
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-5);
}

.prose-section:last-of-type {
  border-bottom: none;
  margin-bottom: var(--sp-4);
}

.prose-section h2 {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 var(--sp-3);
  scroll-margin-top: 100px;
}

.prose-section p {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.8;
  margin: 0 0 var(--sp-3);
  max-width: 68ch;
}

.prose-section p:last-child {
  margin-bottom: 0;
}

.prose-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.prose-list li {
  display: flex;
  gap: var(--sp-2);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 68ch;
}

.prose-list li::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  margin-top: 0.65em;
  flex-shrink: 0;
}

/* Callout boxes */
.article-callout {
  border-left: 3px solid var(--lime);
  background: var(--bg-card);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0 0;
}

.article-callout--insight {
  border-left-color: var(--teal);
}

.article-callout-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: var(--sp-1);
}

.article-callout--insight .article-callout-label {
  color: var(--teal);
}

.article-callout p {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.65;
  margin: 0;
  max-width: none;
}

/* Code block */
.article-code {
  background: var(--bg-dark);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--sp-4) 0 0;
}

.article-code-label {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--bg-soft);
}

.article-code pre {
  margin: 0;
  padding: var(--sp-4);
  overflow-x: auto;
  font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace;
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--lime);
}

.article-code code {
  font-family: inherit;
  white-space: pre;
}

/* Article footer */
.article-footer {
  padding-top: var(--sp-4);
  display: flex;
  gap: var(--sp-3);
}

/* Sidebar */
.article-sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.article-toc {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}

.article-toc-heading {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--sp-3);
}

.article-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  counter-reset: toc-counter;
}

.article-toc-list li {
  counter-increment: toc-counter;
  border-bottom: 1px solid var(--line);
}

.article-toc-list li:last-child {
  border-bottom: none;
}

.article-toc-list a {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
  text-decoration: none;
  transition: color 150ms ease;
}

.article-toc-list a::before {
  content: counter(toc-counter, decimal-leading-zero);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--lime);
  opacity: 0.7;
  flex-shrink: 0;
}

.article-toc-list a:hover {
  color: var(--text);
}

/* Sidebar related posts */
.sidebar-related {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}

.sidebar-related-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.sidebar-related-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease;
}

/* Icon + price badge on one row above the plugin name in "Tools from the Lab".
   The parent is flex-column, so this needs its own row context. */
.sidebar-plugin-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.sidebar-related-item span:last-child {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text);
  font-weight: 600;
}

.sidebar-related-item:hover {
  border-color: var(--lime);
  background: var(--bg-hover);
}

.post-tag--sm {
  font-size: 0.6rem;
  padding: 0.15rem 0.5rem;
}

/* ─── Page CTA (before footer) ───────────────────────────── */
/* ─── Tell us CTA ────────────────────────────────────────── */
.tell-us-cta {
  position: relative;
  padding: var(--sp-7) 0;
  background: var(--bg-dark);
  border-top: 3px solid var(--accent);
  text-align: center;
  overflow: hidden;
}

.tell-us-cta-glow {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 260px;
  background: radial-gradient(ellipse at 50% 0%, rgba(200, 241, 53, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.tell-us-cta-inner {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
}

.tell-us-cta .eyebrow {
  color: var(--accent);
  letter-spacing: 0.06em;
}

.tell-us-cta h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: var(--sp-2) 0 var(--sp-3);
  line-height: 1.15;
}

.tell-us-cta-lead {
  color: var(--muted);
  margin-bottom: var(--sp-5);
  line-height: 1.75;
  font-size: 1rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.tell-us-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

/* ─── Footer ─────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding: var(--sp-6) 0 0;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--sp-5);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
}

.footer-brand .brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-3);
  text-decoration: none;
}

.footer-brand .brand-logo {
  height: 64px;
  width: auto;
}

.footer-copy {
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.875rem;
  max-width: 300px;
  margin: 0 0 var(--sp-4);
}

.footer-social {
  display: flex;
  gap: var(--sp-2);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--muted);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.footer-social a svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: block;
}

.footer-social a:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.footer-col h4 {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 var(--sp-3);
}

.footer-col ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.footer-col a {
  color: var(--muted);
  font-size: 0.875rem;
  transition: color 150ms ease;
}

.footer-col a:hover {
  color: var(--text);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
}

.footer-bottom p {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0;
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.footer-bottom-links a {
  color: var(--muted);
  font-size: 0.8rem;
  transition: color 150ms ease;
}

.footer-bottom-links a:hover {
  color: var(--text);
}

/* ─── Back to top ────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 140;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 0.85rem;
  border-radius: var(--radius-md);
  background: var(--lime);
  color: var(--text-inv);
  border: 1px solid var(--lime);
  font-size: 0.78rem;
  font-weight: 600;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.back-to-top:hover {
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--muted);
}

/* ─── Directory strip (plugin detail) ───────────────────── */
.directory-strip {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-3) 0;
}

.directory-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.directory-title-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-left: auto;
  }

  .nav-actions {
    display: none;
  }

  .header-nav {
    display: none;
  }

  .two-column,
  .cta-panel {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .pricing-panel {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  /* Stacked, so the column gap becomes vertical space — reduce it to match
     .two-column above instead of keeping the wide side-by-side gap. */
  .hero-grid,
  .lab-hero-grid,
  .plugin-facts-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

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

  .hero-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* .stats-grid is deliberately not overridden here — its auto-fit base rule
     already reflows, and forcing repeat(2) left an empty cell at 3 items. */
  .requirements-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .data-grid {
    grid-template-columns: 1fr;
  }

  .category-header,
  .plugin-card-footer,
  .directory-controls {
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .content-section,
  .lab-category {
    padding: var(--sp-6) 0;
  }

  .hero,
  .lab-hero,
  .plugins-hero,
  .insight-hero {
    padding: var(--sp-6) 0;
  }

  .insight-hero-inner {
    grid-template-columns: 1fr;
  }

  .insight-hero-stat {
    flex-direction: row;
    min-width: 0;
    width: 100%;
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
  }

  .insight-hero-stat strong {
    font-size: 2.4rem;
  }

  .insight-hero-stat span {
    max-width: none;
  }

  .article-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .article-sidebar {
    position: static;
    order: -1;
  }

  .article-toc-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .article-toc-list li {
    border-right: 1px solid var(--line);
    padding-right: var(--sp-2);
  }

  .article-toc-list li:nth-child(even) {
    border-right: none;
    padding-right: 0;
    padding-left: var(--sp-2);
  }

  .sidebar-related-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .plugin-listing-grid {
    grid-template-columns: 1fr;
  }

  .plugin-card-summary {
    grid-template-columns: 1fr;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .releases-table .desc-col {
    display: none;
  }

  .plugins-hero-inner,
  .hero-grid,
  .plugin-facts-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .hero-card {
    position: static;
    top: auto;
    min-height: auto;
  }

  .plugins-hero-stats {
    flex-direction: row;
    gap: var(--sp-2);
  }

  .plugins-hero-stats > div {
    flex: 1;
    min-width: 0;
    padding: var(--sp-2) var(--sp-2);
  }

  .plugins-hero-stats strong {
    font-size: 1.6rem;
  }

  .contact-hero-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  /* Stacked, the h1's bottom margin sits on top of the grid gap and doubles the
     space before the description. The gap alone controls it now. */
  .contact-hero-copy h1 {
    margin-bottom: 0;
  }

  .contact-hero-aside {
    padding-bottom: 0;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .post-grid {
    grid-template-columns: 1fr;
  }

  .featured-post {
    grid-template-columns: 1fr;
  }

  .featured-post-stat {
    display: none;
  }

  .releases-table th,
  .releases-table td {
    padding: var(--sp-2) var(--sp-3);
  }

  .tell-us-cta {
    text-align: left;
  }

  .tell-us-cta-actions {
    justify-content: flex-start;
  }

  .tell-us-cta-lead {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 640px) {
  :root {
    --sp-7: 3.5rem;
    --sp-6: 2.5rem;
  }

  .hero-actions,
  .cta-actions,
  .tell-us-cta-actions {
    flex-direction: column;
  }

  .button {
    width: 100%;
    justify-content: center;
  }

  .nav-toggle {
    width: 38px;
    height: 38px;
  }

  .site-nav {
    width: min(92vw, 320px);
    padding: 5rem 0.75rem 1.5rem;
  }

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

  .shot-grid {
    grid-template-columns: 1fr;
  }

  .spec-table th,
  .spec-table td {
    display: block;
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
  }

  .spec-table th {
    padding-bottom: var(--sp-1);
    border-bottom: none;
  }

  .spec-table td {
    padding-top: 0;
  }

  .stats-grid,
  .requirements-strip {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-2);
  }

  .data-grid {
    grid-template-columns: 1fr;
  }

  .feature-grid.audience-grid {
    grid-template-columns: 1fr;
  }

  .plugin-card-footer .text-link {
    width: 100%;
  }

  .breadcrumb {
    font-size: 0.78rem;
    gap: 0.35rem;
  }
}