/* Sonya LeadPars article — cream, lime, sharp ink. Loaded after blog.css */
.blog-article { background: var(--paper); }
.mark {
  color: var(--coral);
  font-weight: 800;
  box-shadow: inset 0 -6px 0 rgba(255, 91, 73, .22);
}
.toc {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  max-width: 820px; margin: 0 auto; padding: 22px 18px 0;
}
.toc a {
  border: 1px solid var(--ink); background: #fff;
  padding: 8px 12px; font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.toc a:hover { background: var(--lime); }

.pitch-hero { text-align: left; padding: 56px 18px 28px; max-width: 980px; margin: 0 auto; }
.pitch-hero .eyebrow {
  margin: 0 0 14px; font-size: 10px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.pitch-hero h1 {
  font-size: clamp(40px, 8vw, 72px);
  line-height: .9; letter-spacing: -.06em; font-weight: 800;
  margin: 0 0 18px;
}
.pitch-hero .sub {
  font-size: clamp(16px, 2.2vw, 20px); line-height: 1.5;
  color: var(--muted); max-width: 680px; margin: 0; font-weight: 500;
}

.band { padding: 56px 18px; }
.band.cream { background: var(--cream); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.inner { max-width: 980px; margin: 0 auto; }
.inner.wide { max-width: 1080px; }

.blog-article h2 {
  font-size: clamp(28px, 5vw, 46px);
  letter-spacing: -.05em; line-height: .98; font-weight: 800;
  margin: 0 0 14px;
}
.lede {
  font-size: 18px; line-height: 1.5; color: var(--muted);
  max-width: 740px; margin: 0 0 32px; font-weight: 500;
}
.why { font-size: 17px; line-height: 1.55; color: var(--ink); max-width: 740px; margin: 0 0 10px; }
.why.muted { color: var(--muted); margin-bottom: 24px; }

.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.pill {
  background: #fff; border: 1px solid var(--ink);
  padding: 8px 12px; font-size: 12px; font-weight: 700;
}
.pill:nth-child(3n) { background: var(--lime); }
.pill:nth-child(4n) { background: var(--pink); }

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tile {
  background: #fff; border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink); padding: 22px 20px;
}
.tile h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.03em; font-weight: 800; }
.tile p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.num {
  background: #fff; border: 1px solid var(--ink); padding: 22px 14px; text-align: center;
}
.num b {
  display: block; font-size: clamp(32px, 5vw, 48px);
  letter-spacing: -.05em; font-weight: 800;
}
.num.hot { background: var(--lime); }
.num span {
  color: var(--muted); font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}

.steps { display: grid; gap: 10px; }
.step {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start;
  background: #fff; border: 1px solid var(--ink); padding: 16px 18px;
}
.n {
  width: 44px; height: 44px; background: var(--lime); border: 1px solid var(--ink);
  display: grid; place-items: center; font-weight: 800; font-size: 16px;
}
.step:nth-child(3n) .n { background: var(--blue); color: #fff; border-color: var(--blue); }
.step h3 { margin: 2px 0 4px; font-size: 16px; letter-spacing: -.02em; font-weight: 800; }
.step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }

.chapter { padding: 64px 18px; border-top: 1px solid var(--ink); }
.chapter:nth-child(odd) { background: #fff; }
.ch-kicker {
  display: block; color: var(--muted);
  font-weight: 800; font-size: 10px; margin-bottom: 10px;
  letter-spacing: .14em; text-transform: uppercase;
}
.shot-wrap {
  margin: 28px 0 22px; border: 1px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink); background: #fff; overflow: hidden;
}
.shot-wrap img { width: 100%; display: block; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.blurb { background: var(--cream); border: 1px solid var(--ink); padding: 18px; }
.blurb h3 { margin: 0 0 8px; font-size: 16px; font-weight: 800; }
.blurb p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.blog-cta {
  background: var(--ink); color: #fff;
  padding: 72px 18px 64px; border-top: 7px solid var(--lime);
}
.blog-cta .inner { max-width: 860px; }
.blog-cta h2 { color: #fff; margin-bottom: 16px; }
.blog-cta h2 em { color: var(--lime); }
.blog-cta .lede { color: #ffffffb3; margin-bottom: 28px; }
.blog-cta .btns { display: flex; flex-wrap: wrap; gap: 10px; }
.blog-cta .shop-button { color: var(--ink); background: var(--lime); }
.blog-cta .shop-button.ghost { background: transparent; color: #fff; border-color: #fff; }
.pitch-note {
  text-align: center; color: var(--muted); font-size: 11px;
  padding: 18px; margin: 0; border-top: 1px solid var(--ink);
}

.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.on { opacity: 1; transform: none; }
.reveal.delay { transition-delay: .1s; }
.reveal.delay2 { transition-delay: .18s; }

@media (max-width: 760px) {
  .cards, .split, .nums { grid-template-columns: 1fr 1fr; }
  .nums { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cards, .split { grid-template-columns: 1fr; }
}
@media (width >= 760px) {
  .pitch-hero, .band, .chapter, .blog-cta { padding-left: 4vw; padding-right: 4vw; }
  .toc { padding-left: 4vw; padding-right: 4vw; }
}
.prose { max-width: 740px; }
.prose p, .prose li {
  font-size: 16px; line-height: 1.7; color: #3f3c38; margin: 0 0 16px;
}
.prose ul { margin: 0 0 20px; padding-left: 20px; }
.quote {
  border: 1px solid var(--ink); background: var(--lime);
  padding: 22px 24px; margin: 8px 0 28px;
  font-size: 22px; font-weight: 800; letter-spacing: -.04em; line-height: 1.25;
}
.quote small { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: #4d4b40; }

.pipeline {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 28px;
}
.pipe {
  background: #fff; border: 1px solid var(--ink); padding: 16px 14px;
  min-height: 120px;
}
.pipe .k { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.pipe b { display: block; font-size: 18px; letter-spacing: -.04em; }
.pipe:nth-child(1) { background: var(--lime); }
.pipe:nth-child(2) { background: var(--pink); }
.pipe:nth-child(3) { background: var(--blue); color: #fff; }
.pipe:nth-child(3) .k { color: rgba(255,255,255,.7); }
.pipe:nth-child(4) { background: var(--ink); color: var(--lime); }
.pipe:nth-child(4) .k { color: #ffffff8c; }

.model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 28px; }
.model {
  background: #fff; border: 1px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
  padding: 18px 18px 16px; border-top: 8px solid var(--ink);
}
.model.gpt { border-top-color: var(--lime); }
.model.claude { border-top-color: var(--orange); }
.model.gemini { border-top-color: var(--blue); }
.model.grok { border-top-color: var(--ink); }
.model.open { border-top-color: var(--violet); }
.model.img { border-top-color: var(--pink); }
.model .tag { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.model h3 { margin: 6px 0 8px; font-size: 20px; letter-spacing: -.04em; }
.model p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 28px; }
.compare .col { border: 1px solid var(--ink); padding: 20px; }
.compare .col.bad { background: #fff; }
.compare .col.good { background: var(--lime); }
.compare h3 { margin: 0 0 10px; font-size: 16px; }
.compare li { margin: 0 0 8px; font-size: 14px; line-height: 1.45; }

.bars { display: grid; gap: 10px; margin: 8px 0 28px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 48px; gap: 10px; align-items: center; font-size: 12px; font-weight: 800; }
.bar-row .track { height: 16px; background: var(--cream); border: 1px solid var(--ink); }
.bar-row .fill { height: 100%; background: var(--blue); transform-origin: left; animation: grow 1.2s .2s cubic-bezier(.2,.8,.2,1) both; }
.bar-row .fill.lime { background: var(--lime); }
.bar-row .fill.coral { background: var(--coral); }
@keyframes grow { from { transform: scaleX(0); } }

.agent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 28px; }
.agent {
  background: #fff; border: 1px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 18px;
}
.agent .who { font-size: 22px; font-weight: 800; letter-spacing: -.05em; }
.agent .job { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 4px 0 10px; }
.agent p { margin: 0; font-size: 14px; line-height: 1.5; color: #3f3c38; }
.agent.lime { background: var(--lime); }
.agent.blue { background: var(--blue); color: #fff; }
.agent.blue .job, .agent.blue p { color: rgba(255,255,255,.8); }
.agent.ink { background: var(--ink); color: #fff; }
.agent.ink .job { color: var(--lime); }
.agent.ink p { color: #ffffffc4; }

.live-chat {
  background: #fff; border: 1px solid var(--ink); box-shadow: 10px 10px 0 var(--ink);
  padding: 16px; margin: 8px 0 28px; max-width: 520px;
}
.bubble { border: 1px solid var(--ink); padding: 10px 12px; margin: 0 0 8px; font-size: 14px; max-width: 92%; }
.bubble.me { background: var(--cream); }
.bubble.ai { background: var(--lime); margin-left: auto; }
.bubble.typing::after {
  content: " ▍"; animation: blink 1s infinite;
}

.series {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px;
}
.series a {
  border: 1px solid var(--ink); background: #fff; padding: 16px;
  font-size: 13px; font-weight: 800; letter-spacing: -.02em;
}
.series a:hover { background: var(--lime); }
.series small { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }

@media (max-width: 800px) {
  .pipeline, .model-grid, .compare, .agent-grid, .series { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pipeline { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .bar-row .fill, .bubble.typing::after { animation: none; }
}