/* ============================================================
   Marketing Claude — The Operator's Playbook
   Dark editorial design system. Intentionally distinct from
   damllm.ai (light, austere) to mitigate site-network footprint.
   ============================================================ */

:root {
  --bg:        #0E1019;
  --bg-2:     #131623;
  --surface:  #1A1D2A;
  --surface-2:#22263A;
  --line:     #2A2E3D;
  --line-2:   #3A3F52;
  --ink:      #F2EFE7;
  --ink-mid:  #C8C6CF;
  --ink-dim:  #8F8E99;
  --ink-muted:#5C5C66;

  --accent:        #C6F432;  /* electric lime */
  --accent-soft:   #1F2A0E;
  --accent-ink:    #0E1019;  /* text-on-accent */
  --warm:          #FFC857;
  --warm-soft:     #2A2210;
  --code-blue:     #9DB1FF;
  --code-blue-soft:#1B2034;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --font-display: "Onest", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --maxw:        1240px;
  --maxw-prose:  920px;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
                 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  --shadow-pop:  0 30px 80px -20px rgba(198, 244, 50, 0.18);

  --bg: #0E1019;
  --accent: #C6F432;
  --font-display: "Onest", "Onest", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "ss01" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(1100px 600px at 90% -10%, rgba(198, 244, 50, 0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(157, 177, 255, 0.05), transparent 60%);
  background-attachment: fixed;
}

::selection { background: var(--accent); color: var(--accent-ink); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* layout container */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}
.wrap-prose {
  max-width: var(--maxw-prose);
  margin: 0 auto;
  padding: 0 28px;
}
@media (max-width: 600px) {
  .wrap, .wrap-prose { padding: 0 20px; }
}

/* ============================================================
   NAV — minimal dark, lime CTA
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 16, 25, 0.7);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.02em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-mid);
}
.nav-links a {
  position: relative;
  transition: color 120ms ease;
}
.nav-links a:hover { color: var(--accent); }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink) !important;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
  transition: transform 100ms ease, box-shadow 100ms ease;
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-pop);
}
@media (max-width: 760px) {
  .nav-links { gap: 16px; }
  .nav-links a:not(.nav-cta) { display: none; }
}

/* ============================================================
   HERO — big editorial serif claim + prompt-response visual
   ============================================================ */
.hero {
  padding: 88px 0 32px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(198, 244, 50, 0.15);
}

.hero-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 92px);
  letter-spacing: -0.038em;
  line-height: 0.98;
  margin: 22px 0 24px;
  color: var(--ink);
}
.hero-h1 em {
  font-style: normal;
  color: inherit;
}
.hero-sub {
  font-size: clamp(17px, 1.6vw, 19px);
  color: var(--ink-mid);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 0 36px;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 26px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-pop);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-ghost:hover {
  background: var(--surface);
  border-color: var(--ink-dim);
}
/* Arrow span styles removed — CTAs no longer render the "→" affordance
   (product decision: reduce visual noise, lean on button surface alone). */

.trust-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}
.trust-line .avatars {
  display: inline-flex;
}
.trust-line .avatars > span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #555, #222);
  border: 2px solid var(--bg);
  margin-left: -8px;
}
.trust-line .avatars > span:first-child { margin-left: 0; }
.trust-line .avatars > span:nth-child(1) { background: linear-gradient(135deg, var(--accent), #4d6310); }
.trust-line .avatars > span:nth-child(2) { background: linear-gradient(135deg, var(--code-blue), #2d3a7a); }
.trust-line .avatars > span:nth-child(3) { background: linear-gradient(135deg, var(--warm), #8a5e10); }
.trust-line .avatars > span:nth-child(4) { background: linear-gradient(135deg, #f9f7ef, #8d8d8d); }

/* Hero visual — prompt/response mock as a signature element */
.hero-visual {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.hv-tabbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
}
.hv-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.hv-dot.r { background: #ff5f56; }
.hv-dot.y { background: #ffbd2e; }
.hv-dot.g { background: #28c941; }
.hv-url { margin-left: 12px; opacity: 0.7; }

.hv-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hv-msg {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.hv-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
}
.hv-msg.me .hv-avatar { background: var(--code-blue-soft); color: var(--code-blue); }
.hv-msg:not(.me) .hv-avatar { background: var(--accent-soft); color: var(--accent); }
.hv-bubble {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.55;
  max-width: 86%;
}
.hv-msg.me .hv-bubble {
  background: var(--code-blue-soft);
  border-color: var(--code-blue);
  border-opacity: 0.3;
  color: var(--ink);
}
.hv-tool {
  align-self: flex-start;
  margin-left: 46px;
  background: transparent;
  border: 1px dashed var(--line-2);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
}
.hv-tool::before { content: "→ "; color: var(--accent); }

/* ============================================================
   STATS strip
   ============================================================ */
.stats {
  padding: 56px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(198, 244, 50, 0.025), transparent);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 760px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
.stat {
  text-align: left;
  border-left: 1px solid var(--line);
  padding-left: 24px;
}
.stats-grid > .stat:first-child { border-left: none; padding-left: 0; }
@media (max-width: 760px) {
  .stat { border-left: none; padding-left: 0; }
}
.stat .v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 4.2vw, 56px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.stat .v em {
  color: var(--ink-dim);
  font-style: normal;
  font-weight: 500;
}
.stat .l {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  margin-top: 12px;
  line-height: 1.5;
  text-transform: uppercase;
}

/* ============================================================
   Section primitives
   ============================================================ */
.section {
  padding: 96px 0;
}
.section-head {
  max-width: 720px;
  margin-bottom: 56px;
}
.section-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.section-num .slash { color: var(--ink-muted); margin: 0 6px; }
.section-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 56px);
  letter-spacing: -0.032em;
  line-height: 1.04;
  margin: 0 0 18px;
  color: var(--ink);
}
.section-h em { font-style: normal; color: inherit; }
.section-lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-mid);
  margin: 0;
  max-width: 60ch;
}

/* ============================================================
   ANSWER CARD — the "short answer" + TL;DR
   ============================================================ */
.answer-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 48px clamp(28px, 4vw, 56px);
  position: relative;
  overflow: hidden;
}
.answer-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 6px;
  height: 100%;
  background: var(--accent);
}
.answer-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.answer-body {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.4;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 32px;
  max-width: 64ch;
}
.answer-body strong {
  color: var(--ink);
  font-weight: 700;
}
.tldr {
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.tldr-heading {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 16px;
}
.tldr ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.tldr li {
  position: relative;
  padding-left: 28px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-mid);
}
.tldr li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 700;
  font-family: var(--font-mono);
}

/* ============================================================
   PLAYBOOK CARDS — capability map redesigned
   ============================================================ */
.plays {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (max-width: 980px) { .plays { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .plays { grid-template-columns: 1fr; } }

.play {
  background: var(--bg);
  padding: 36px 32px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background 150ms ease;
}
.play:hover {
  background: var(--surface);
}
.play-num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
}
.play-feature {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  align-self: flex-start;
}
.play h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.022em;
  line-height: 1.22;
  color: var(--ink);
  margin: 0;
}
.play-works {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-mid);
  margin: 0;
}
.play-falls {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line-2);
}
.play-falls::before {
  content: "Watch out — ";
  color: var(--warm);
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================================
   FEATURED SPOTLIGHT (Uplifted)
   ============================================================ */
.featured {
  padding: 64px 0;
}
.featured-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(36px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.featured-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 240px at 100% 0%, rgba(198, 244, 50, 0.10), transparent 60%),
    radial-gradient(500px 240px at 0% 100%, rgba(157, 177, 255, 0.06), transparent 60%);
  pointer-events: none;
}
.featured-card > * { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .featured-card { grid-template-columns: 1fr; gap: 36px; }
}
.featured-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.featured-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 14px;
}
.featured-h em { font-style: normal; color: inherit; }
.featured-lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-mid);
  margin: 0 0 20px;
  max-width: 50ch;
}
.featured-lede .name {
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-display);
  font-style: normal;
  font-size: 17px;
}
.featured-body p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-mid);
  margin: 0 0 24px;
}
.featured-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.featured-badges .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-mid);
  padding: 6px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.featured-badges .badge svg { color: var(--accent); }

/* Product visual mock inside featured */
.product-visual {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0;
  overflow: hidden;
}
.pv-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
}
.pv-tab .dots { display: inline-flex; gap: 6px; margin-right: 10px; }
.pv-tab .dots > span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.pv-tab .dots > span:first-child { background: #ff5f56; }
.pv-tab .dots > span:nth-child(2) { background: #ffbd2e; }
.pv-tab .dots > span:nth-child(3) { background: #28c941; }

.pv-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.pv-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pv-thumb {
  width: 56px;
  height: 36px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--code-blue-soft), var(--bg-2));
  position: relative;
  overflow: hidden;
}
.pv-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(198, 244, 50, 0.2) 50%, transparent 60%);
}
.pv-meta { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.pv-meta b { font-family: var(--font-mono); font-weight: 600; color: var(--ink); font-size: 12.5px; }
.pv-meta span { font-size: 11.5px; color: var(--ink-dim); font-family: var(--font-mono); }
.pv-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--code-blue);
  background: var(--code-blue-soft);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.pv-roas {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
}

/* ============================================================
   EVIDENCE — dated tests with screenshots
   ============================================================ */
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px) { .evidence-grid { grid-template-columns: 1fr; } }

.ev-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 200ms ease, border-color 200ms ease;
}
.ev-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-2);
}
.ev-card figure {
  margin: 0;
  aspect-ratio: 16 / 9;
  background: var(--bg-2);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ev-card figure img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.ev-no-shot {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-dim);
  text-align: center;
  padding: 24px;
  background-image: repeating-linear-gradient(45deg,
    transparent, transparent 10px,
    rgba(255, 255, 255, 0.02) 10px, rgba(255, 255, 255, 0.02) 20px);
  width: 100%; height: 100%;
  display: grid; place-items: center;
}
.ev-body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.ev-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: 0;
}
.ev-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.022em;
  line-height: 1.25;
  margin: 0;
  color: var(--ink);
}
.ev-finding {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-mid);
  margin: 0;
}

/* ============================================================
   TOOLS DIRECTORY
   ============================================================ */
.tools-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 980px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tools-grid { grid-template-columns: 1fr; } }

.tool-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: transform 200ms ease, border-color 200ms ease;
}
.tool-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
/* Whole-card clickable surface. The real link stays on the h3 anchor; this
   ::after stretches it over the entire card so a click anywhere navigates,
   while keeping a single semantic link for assistive tech. */
.tool-card-link { cursor: pointer; }
.tool-card-link h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.tool-card-link:hover { border-color: var(--accent); }
.tool-card-link:hover h3 a { color: var(--accent); }
.tool-card-link:focus-within { border-color: var(--accent); }
.tool-pin {
  position: absolute;
  top: -12px;
  right: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 700;
}
.tool-head { display: flex; align-items: center; gap: 14px; }
.tool-logo {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--accent);
  overflow: hidden;
}
/* Brand-logo variant: white tile so colored marks read cleanly on the
   dark surface, with the favicon-grade mark centered inside. */
.tool-logo-img {
  background: #fff;
  border-color: var(--line);
  padding: 7px;
}
.tool-logo-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.tool-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.022em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
.tool-card h3 a:hover { color: var(--accent); }
.tool-domain {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  margin: 2px 0 0;
}
.tool-angle {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-mid);
  margin: 0;
}

/* ============================================================
   COMPARISON TABLE — dark
   ============================================================ */
.cmp-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow-x: auto;
}
table.cmp {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 14.5px;
}
table.cmp th, table.cmp td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
table.cmp thead th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--bg-2);
  border-bottom-color: var(--line-2);
}
table.cmp thead th.u { color: var(--accent); }
table.cmp tbody tr:last-child td { border-bottom: none; }
table.cmp td.u { color: var(--ink); }
table.cmp .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
table.cmp .pill-yes { background: var(--accent-soft); color: var(--accent); }
table.cmp .pill-mid { background: var(--warm-soft); color: var(--warm); }
table.cmp .pill-no { background: #2A1418; color: #FF7B7B; }
table.cmp .pill-strong { background: var(--accent); color: var(--accent-ink); }
.cmp-cell-text { color: var(--ink-mid); font-size: 13.5px; display: inline-block; margin-left: 4px; }
.cmp-cell-text.muted { color: var(--ink-dim); }

.verdict {
  margin-top: 28px;
  padding: 22px 28px;
  border-left: 3px solid var(--accent);
  background: var(--bg-2);
  border-radius: var(--r-sm);
}
.verdict p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
@media (max-width: 760px) { .testimonial-grid { grid-template-columns: 1fr; } }

.testimonial {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 30px 28px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.testimonial .stars {
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--warm);
}
.testimonial blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.testimonial blockquote::before { content: "“"; color: var(--ink-dim); margin-right: 2px; }
.testimonial blockquote::after { content: "”"; color: var(--ink-dim); margin-left: 2px; }
.testimonial cite {
  display: flex;
  align-items: center;
  gap: 12px;
  font-style: normal;
  font-size: 13.5px;
  color: var(--ink-mid);
}
.testimonial .photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.testimonial cite .who { display: flex; flex-direction: column; }
.testimonial cite b { color: var(--ink); font-weight: 600; }
.testimonial cite span { color: var(--ink-dim); font-size: 12.5px; font-family: var(--font-mono); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { display: flex; flex-direction: column; }
.faq-list details {
  border-top: 1px solid var(--line);
  padding: 22px 0;
  cursor: pointer;
}
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.022em;
  line-height: 1.35;
  color: var(--ink);
  position: relative;
  padding-right: 36px;
  transition: color 120ms ease;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 0;
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--accent);
  font-weight: 400;
  line-height: 1;
  transition: transform 150ms ease;
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list details:hover summary { color: var(--accent); }
.faq-answer {
  padding: 14px 36px 4px 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-mid);
}
.faq-answer p { margin: 0 0 12px; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ============================================================
   RELATED + METHODOLOGY
   ============================================================ */
.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (max-width: 760px) { .related-list { grid-template-columns: 1fr; } }
.related-list li {
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.related-list li:nth-child(-n+2) { border-top: none; }
.related-list li:nth-child(2n+1) { border-left: none; }
@media (max-width: 760px) {
  .related-list li { border-left: none; }
  .related-list li:first-child { border-top: none; }
}
.related-list a {
  display: block;
  padding: 24px 28px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.022em;
  line-height: 1.3;
  color: var(--ink);
  transition: background 150ms ease, color 150ms ease;
}
.related-list a:hover { background: var(--surface); color: var(--accent); }
.related-snippet {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  margin: 8px 0 0;
  text-transform: uppercase;
}

.method-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 760px) {
  .method-card { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
}
.author-block { display: flex; flex-direction: column; gap: 14px; }
.photo-placeholder {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}
.author-block .who { display: flex; flex-direction: column; gap: 4px; }
.author-block b { font-family: var(--font-display); font-style: normal; font-size: 17px; color: var(--ink); font-weight: 600; letter-spacing: -0.015em; }
.author-block span { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-dim); }
.author-block a { color: var(--accent); font-family: var(--font-mono); font-size: 13px; margin-top: 4px; border-bottom: 1px dashed var(--accent); padding-bottom: 2px; }

.method-card h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.028em;
  margin: 0 0 14px;
  color: var(--ink);
}
.meta-text p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-mid);
  margin: 0 0 14px;
}
.updated-line {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent);
  margin: 0;
  letter-spacing: 0.02em;
}

/* ============================================================
   UPLIFTED CTA BLOCK — bottom of cluster pages
   ============================================================ */
.uplifted-cta {
  margin: 96px 0 0;
  background: linear-gradient(180deg, var(--bg-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.uplifted-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 240px at 0% 0%, rgba(198, 244, 50, 0.08), transparent 60%);
  pointer-events: none;
}
.uplifted-cta > * { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .uplifted-cta { grid-template-columns: 1fr; gap: 24px; }
}
.uplifted-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.uplifted-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.uplifted-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 14px;
}
.uplifted-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-mid);
  margin: 0;
  max-width: 56ch;
}
.uplifted-body strong { color: var(--ink); font-weight: 600; }
.uplifted-cta-side { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.uplifted-cta-side .btn-primary { width: 100%; justify-content: center; padding: 18px 28px; font-size: 16px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  margin-top: 96px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-dim);
}
.footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer a { color: var(--accent); }
.footer a:hover { text-decoration: underline; }

/* ============================================================
   CLUSTER PAGE specific
   ============================================================ */
.cluster-hero {
  padding: 72px 0 24px;
}
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { color: var(--ink-muted); margin: 0 8px; }
.breadcrumb .current { color: var(--ink-mid); }

.cluster-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 68px);
  letter-spacing: -0.038em;
  line-height: 1.02;
  color: var(--ink);
  margin: 18px 0 0;
  max-width: 20ch;
}

.prose {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--ink-mid);
  max-width: 68ch;
  margin: 56px auto 0;
}
.prose h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 34px);
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
  margin: 56px 0 18px;
  scroll-margin-top: 100px;
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 22px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}
.prose a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 22px; }
.prose li { margin-bottom: 8px; }
.prose code {
  font-family: var(--font-mono);
  font-size: 13.5px;
  background: var(--code-blue-soft);
  color: var(--code-blue);
  padding: 2px 8px;
  border-radius: 4px;
}
.prose pre {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 22px;
  overflow-x: auto;
  color: var(--ink);
  line-height: 1.55;
  margin: 22px 0;
}

.inline-callout {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  padding: 36px 40px;
  margin: 52px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  /* Vertically center the CTA against the body block so the button sits in
     the optical middle of the callout instead of clinging to the top-right
     when the copy wraps to many lines. */
  align-items: center;
}
@media (max-width: 720px) {
  .inline-callout {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    gap: 24px;
  }
}
.ic-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}
.inline-callout p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-mid);
}
/* Inline-callout CTA. We explicitly set justify-content + text-align so
   the label is centered even when the grid cell forces the anchor to
   stretch full-width on narrow viewports. Without this, the lime button
   rendered as an empty rectangle because the inline-flex content sat
   flush left and got visually clipped. Also pin a min-width so the
   button does not collapse to icon-only when text wraps.
   align-self: start so the CTA aligns with the eyebrow at the top of
   the callout (matches .inline-callout's align-items: start). */
.ic-cta {
  /* fit-content sizes the button to label+padding so the text is
     naturally centered (no excess space for the flex algorithm to
     mis-place). min-width keeps a sensible tap target on narrow
     viewports but lets the button shrink to content on desktop. */
  width: fit-content;
  min-width: 160px;
  justify-content: center;
  text-align: center;
  align-self: center;
  color: var(--accent-ink) !important;
  white-space: nowrap;
}
.ic-cta-label {
  /* Wrapping the label in a real span (instead of leaving it as an
     anonymous text node inside .btn's inline-flex container) makes it
     a proper flex item that .ic-cta's justify-content: center can act
     on reliably across browsers. Fixes off-center text on the lime CTA. */
  display: inline-block;
  text-align: center;
  width: 100%;
}
.ic-body { display: flex; flex-direction: column; }
@media (max-width: 720px) {
  .ic-cta { width: 100%; }
}

/* ============================================================
   Backward-compat aliases for legacy cluster page markup
   (so existing cluster pages adopt the new dark theme cleanly)
   ============================================================ */
.cluster-body { padding: 0 0 32px; }
.cluster-body .wrap { max-width: var(--maxw-prose); }

.answer-card .label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.answer-card > p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.4;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
  max-width: 64ch;
}

.muted { color: var(--ink-dim); }

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.032em;
  line-height: 1.08;
  margin: 0 0 36px;
  color: var(--ink);
}

.faq { padding: 64px 0; border-top: 1px solid var(--line); }
.faq .wrap { max-width: var(--maxw-prose); }

.related { padding: 64px 0 0; }
.related .wrap { max-width: var(--maxw-prose); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
  padding: 16px 26px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 120ms ease, border-color 120ms ease;
}
.btn-secondary:hover {
  background: var(--surface);
  border-color: var(--ink-dim);
}

/* ============================================================
   RENDERER MARKUP BRIDGE
   ------------------------------------------------------------
   The renderer emits authority-hub-style markup (.cap-card, .ed-byline-name,
   etc.) and we restyle it here to match the playbook design language.
   Keep this block at the END of the file so it overrides the original
   selectors above where needed.
   ============================================================ */

/* Capability cards → render as plays. Reuse .play styles by aliasing. */
.plays .cap-card,
section#plays .cap-card {
  background: var(--bg);
  padding: 36px 32px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background 150ms ease;
  counter-increment: play-counter;
}
.plays .cap-card:hover,
section#plays .cap-card:hover {
  background: var(--surface);
}
.plays { counter-reset: play-counter; }
.plays .cap-card::before,
section#workflows .cap-card::before {
  content: "Workflow " counter(play-counter, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
}
.plays .cap-card .cap-icon { display: none; }
.plays .cap-card .cap-feature {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  align-self: flex-start;
  background: transparent;
}
.plays .cap-card .cap-feature svg { display: none; }
.plays .cap-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.022em;
  line-height: 1.22;
  color: var(--ink);
  margin: 0;
}
.plays .cap-card .cap-works {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-mid);
  margin: 0;
}
.plays .cap-card .cap-falls {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line-2);
}
.plays .cap-card .cap-falls::before {
  content: "Watch out — ";
  color: var(--warm);
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Section eyebrows for sections the renderer wraps in its own classes
   (testimonials, related, evidence). The playbook design uses numbered
   eyebrows; the renderer-provided sections don't get them by default,
   so we don't fight it — they stay plain. */
.evidence .section-eyebrow,
.testimonials .section-eyebrow,
.related .section-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Editorial byline — used ONLY on cluster pages (long-form articles).
   The pillar template intentionally omits this block to keep the homepage
   operator-led rather than personality-led. Cluster pages still need a byline
   for E-E-A-T signals and reader trust.

   The renderer hardcodes `width="88" height="88"` on the byline photo IMG,
   so we use `!important` to enforce the compact 44px sizing.
*/
/* Byline — minimal-card treatment. The previous version had a bordered
   card with surface bg under every H1; on the cluster pages it sat
   between the H1 and the first body paragraph and visually fought both
   (felt like a sidebar widget jammed under the title). We now strip the
   border, soften the bg (or remove it on dark themes), tighten padding,
   and keep everything on one row so it recedes into supporting meta. */
.ed-byline-section {
  padding: 10px 0 6px;
}
.ed-byline-section .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}
.ed-byline-photo img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.ed-byline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  align-items: baseline;
  flex: 1;
}
.ed-byline-name {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
}
.ed-byline-role {
  margin: 0;
  font-size: 12px;
  color: var(--ink-dim);
}
.ed-byline-link {
  color: var(--accent);
  font-size: 12px;
}
.ed-byline-dates {
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-muted);
  display: flex; gap: 8px;
  white-space: nowrap;
}
/* Reviewers line — kept on the same baseline as everything else so the
   byline never wraps into a second visual row. Truncated with ellipsis
   if it overflows on narrow viewports. */
.ed-byline-reviewers {
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.ed-byline-reviewers a { color: var(--ink-dim); }
@media (max-width: 720px) {
  .ed-byline-section .wrap { flex-wrap: wrap; }
  .ed-byline-reviewers { flex-basis: 100%; white-space: normal; }
}

/* End-of-article author card — also cluster-page only.
   Sized to feel like an editorial sign-off, not a vanity card. */
.ed-author-card-section {
  padding: 36px 0 56px;
}
.ed-author-card-section .wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 24px;
}
.ed-author-card-section img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50%;
}
.ed-author-card-name,
.ed-author-card-eyebrow,
.ed-author-card-role,
.ed-author-card-bio { color: var(--ink); }
.ed-author-card-name { font-size: 16px; margin: 4px 0; }
.ed-author-card-role { font-size: 13px; color: var(--ink-dim); margin: 0 0 8px; }
.ed-author-card-bio { font-size: 14px; color: var(--ink-mid); margin: 0; }
.ed-author-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

/* Reading-progress bar that authority-hub adds — playbook hides it. */
.reading-progress { display: none; }

/* Renderer FAQ uses <details> with .faq-list wrapper — match OLD styling. */
.faq-list details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}

/* Featured "lede" — bridge .lede ↔ .featured-lede in case renderer uses .lede. */
.featured .lede {
  color: var(--ink-mid);
  font-size: 17px;
  margin: 8px 0 18px;
}
.featured .lede .name {
  color: var(--accent);
  font-weight: 600;
}

/* Render guard / theme — playbook uses dark editorial accent, force ink colors
   on common renderer-emitted muted elements so they don't render as light-grey
   on the lime/dark palette. */
.section-eyebrow { color: var(--accent); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.section-title { color: var(--ink); font-family: var(--font-display); }
.section-lede { color: var(--ink-mid); }
.cmp-cell-text.muted { color: var(--ink-dim); }

/* ============================================================
   PILLAR REDESIGN — added components
   ============================================================ */

/* Image-only hero variant — clean illustrated treatment, no fake browser
   chrome. The container drops the frame so the brand asset reads as art,
   not a screenshot mockup. The image is intentionally allowed to bleed
   slightly beyond its column (transparent halo means it doesn't visually
   crash into the headline). */
.hero-visual-image {
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  display: grid;
  place-items: center;
  min-height: 540px;
}
.hero-visual-image img {
  width: 130%;
  height: auto;
  max-width: none;
  margin: -8% -15%;
  filter: drop-shadow(0 40px 120px rgba(198, 244, 50, 0.28));
}
@media (max-width: 980px) {
  .hero-visual-image { min-height: 320px; }
  .hero-visual-image img { width: 100%; margin: 0; }
}

/* Ranked tool/MCP card — adds a big #NN rank to the top-right of each
   card so the roundup reads as a leaderboard. The existing .tool-card
   styling still applies; this just layers the rank on top. */
.tool-card-ranked { position: relative; }
.tool-rank {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
  opacity: 0.8;
}
.tool-card-ranked:first-child .tool-rank {
  color: var(--accent);
  opacity: 1;
}

/* Big-box related (topics) cards — prominent visual tiles to the
   cluster pages. Each card is a full clickable surface with a large
   number, the cluster H1, and a contextual CTA. Replaces the old
   small-link list treatment. */
.related-boxes {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 72px 0 96px;
  margin: 80px 0;
}
.related-boxes .section-eyebrow,
.related-boxes .section-title {
  text-align: center;
}
.related-boxes .section-title {
  font-size: clamp(26px, 3vw, 36px);
  margin: 8px 0 40px;
  font-weight: 700;
}
.related-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
/* Card surface — uses flexbox so the CTA stays pinned to the bottom of
   every card regardless of how many lines the H3 wraps to. Without this
   the CTA "Read the playbook" floats at different vertical positions
   when one card's H3 is 2 lines and another's is 3. */
.related-card {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.related-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-pop);
}
.related-card-link {
  display: flex;
  flex-direction: column;
  padding: 36px 32px 32px;
  height: 100%;
  width: 100%;
  min-height: 280px;
}
.related-card-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 18px;
}
.related-card-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--ink);
}
.related-card-kw {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
  margin: 0 0 28px;
}
.related-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  margin-top: auto;
  align-self: flex-start;
}
@media (max-width: 760px) {
  .related-boxes { padding: 48px 0 64px; margin: 56px 0; }
  .related-grid { grid-template-columns: 1fr; }
  .related-card-link { padding: 28px 24px 24px; }
}

/* Workflow section uses #workflows fragment now; keep visible bg/spacing
   identical to the old #plays section so other styles ride along. */
section#workflows { /* alias — falls through to section.section base rules */ }

/* Bottom-line recap — same .answer-card shell as the cluster direct
   answer, but with a relatable intro sentence above the answer so the
   block reads as a takeaway, not a disconnected definition card. The
   intro stays small + muted so the eye still lands on the answer prose. */
.bottom-line-section { padding-top: 24px; padding-bottom: 24px; }
.bottom-line-card { max-width: var(--maxw-prose); margin: 0 auto; }
.bottom-line-intro {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0 0 16px;
  letter-spacing: 0.01em;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}