:root {
  --ai-surface: #e8e8e8;
  --ai-positive: #dce3ff;
  --ai-controlled: #455ce9;
  --ai-external: #777;
}

.ai-page .problems-hero h1 { max-width: 12ch; }
.ai-page .problems-hero-grid { align-items: center; }
.ai-page .problems-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.ai-page .problems-hero-actions .problems-cta { margin-top: 1.5rem; }
.ai-page .ai-secondary-link { margin-top: 1.5rem; text-underline-offset: .25em; }
.ai-page .ai-limitation { max-width: 36rem; margin: 1.5rem 0 0; color: var(--problems-muted); font-size: .9rem; }

.ai-ledger {
  margin: 0;
  border-top: 1px solid var(--problems-line);
  font-size: .9rem;
}
.ai-ledger > div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--problems-line); }
.ai-ledger dt { color: var(--problems-muted); }
.ai-ledger dd { margin: 0; }

.ai-fit-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 4rem; }
.ai-fit-intro { max-width: 28rem; }
.ai-fit-intro h2 { margin: 0; font-size: calc(clamp(3.25em, 5vw, 4.5em) * .75); font-weight: 450; line-height: 1.065; }
.ai-fit-intro p:last-child { color: var(--problems-muted); }
.ai-problems { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--problems-line); }
.ai-problems li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--problems-line); }
.ai-problems span { color: var(--problems-accent); font-size: .8rem; }
.ai-problems h3 { margin: 0 0 .5rem; font-size: 1.4rem; font-weight: 450; }
.ai-problems p { margin: 0; color: var(--problems-muted); }

.ai-signal-section { background: var(--problems-ink); color: #fff; }
.ai-signal-section .problems-section-head p,
.ai-signal-section .problems-kicker { color: rgba(255,255,255,.6); }
.ai-signal-chain { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.24); }
.ai-signal-chain::before { position: absolute; top: 2.35rem; left: 1rem; right: 1rem; height: 2px; background: var(--ai-controlled); content: ""; }
.ai-signal-chain li { position: relative; min-height: 18rem; padding: 1.7rem 2rem 2rem 0; }
.ai-signal-chain li + li { padding-left: 2rem; border-left: 1px solid rgba(255,255,255,.16); }
.ai-signal-marker { position: relative; z-index: 1; display: grid; width: 1.35rem; height: 1.35rem; border: .3rem solid var(--problems-ink); border-radius: 50%; background: var(--ai-controlled); }
.ai-signal-chain h3 { margin: 3rem 0 .75rem; font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 400; }
.ai-signal-chain p { margin: 0; color: rgba(255,255,255,.65); }
.ai-external-note { display: grid; grid-template-columns: .7fr 1.3fr; gap: 4rem; margin-top: 1.5rem; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,.24); }
.ai-external-note strong { color: #fff; font-weight: 450; }
.ai-external-note p { margin: 0; color: rgba(255,255,255,.65); }

.ai-deliverables { counter-reset: deliverable; border-top: 1px solid var(--problems-line); }
.ai-deliverable { counter-increment: deliverable; display: grid; grid-template-columns: 4rem .72fr 1.28fr; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--problems-line); }
.ai-deliverable::before { content: "0" counter(deliverable); color: var(--problems-accent); font-size: .8rem; }
.ai-deliverable h3 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight: 400; }
.ai-deliverable p { max-width: 38rem; margin: 0; color: var(--problems-muted); }
.ai-engagement { max-width: 55rem; margin: 2rem 0 0 auto; padding: 1.5rem; border-left: .25rem solid var(--problems-accent); background: var(--ai-positive); }

.ai-method { background: var(--ai-surface); }
.ai-method-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; }
.ai-method-copy h2 { margin: 0 0 1.5rem; font-size: calc(clamp(3.25em, 5vw, 4.5em) * .75); font-weight: 450; line-height: 1.065; }
.ai-method-copy p { color: var(--problems-muted); }
.ai-protocol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--problems-line); }
.ai-protocol li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--problems-line); }
.ai-protocol strong { font-weight: 450; }
.ai-protocol span { color: var(--problems-muted); }
.ai-platforms { margin: 1.5rem 0 0; color: var(--problems-muted); font-size: .9rem; }

.ai-boundaries { background: var(--problems-ink); color: #fff; }
.ai-boundaries .problems-kicker { color: rgba(255,255,255,.55); }
.ai-boundary-list { display: grid; grid-template-columns: repeat(2, 1fr); margin: 3rem 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.2); }
.ai-boundary-list li { padding: 1.5rem 2rem 1.5rem 0; border-bottom: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.72); }
.ai-boundary-list li:nth-child(even) { padding-left: 2rem; border-left: 1px solid rgba(255,255,255,.2); }

.ai-faq { max-width: 70rem; margin-left: auto; }
.ai-faq details { border-top: 1px solid var(--problems-line); }
.ai-faq details:last-child { border-bottom: 1px solid var(--problems-line); }
.ai-faq summary { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1.5rem 0; font-size: clamp(1.15rem, 2vw, 1.55rem); cursor: pointer; }
.ai-faq summary::after { content: "+"; color: var(--problems-accent); }
.ai-faq details[open] summary::after { content: "−"; }
.ai-faq p { max-width: 50rem; margin: 0; padding: 0 0 1.5rem; color: var(--problems-muted); }

@media (max-width: 900px) {
  .ai-fit-grid, .ai-method-grid, .ai-external-note { grid-template-columns: 1fr; gap: 2rem; }
  .ai-signal-chain { grid-template-columns: repeat(2, 1fr); }
  .ai-signal-chain::before { display: none; }
  .ai-signal-chain li:nth-child(3) { border-left: 0; }
  .ai-signal-marker { border-color: var(--problems-ink); }
  .ai-deliverable { grid-template-columns: 3rem 1fr; }
  .ai-deliverable p { grid-column: 2; }
}

@media (max-width: 560px) {
  .ai-ledger > div { grid-template-columns: 1fr; gap: .15rem; }
  .ai-signal-chain, .ai-boundary-list { grid-template-columns: 1fr; }
  .ai-signal-chain li, .ai-signal-chain li + li { min-height: 0; padding: 1.5rem 0; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .ai-signal-chain h3 { margin-top: 1.5rem; }
  .ai-boundary-list li:nth-child(even) { padding-left: 0; border-left: 0; }
  .ai-deliverable { grid-template-columns: 2rem 1fr; gap: .75rem; }
}