/* AGENTS.md Pack — editorial zine aesthetic, calm spacing, no emoji */
:root{
  --paper:#f4ead5;
  --paper-2:#ede0c0;
  --ink:#181613;
  --rule:#1816131a;
  --accent:#e63946;     /* riso red */
  --accent-2:#1d4ed8;   /* ink blue */
  --highlight:#fff066;  /* used only for sticker tag, not body text */
  --good:#0d8a4a;
  --bad:#c0392b;
  --mono: ui-monospace,"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  font-size:17px;line-height:1.7;
  color:var(--ink);
  background:
    radial-gradient(circle at 1px 1px, #18161310 1px, transparent 0) 0 0/24px 24px,
    var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:1100px;margin:0 auto;padding:0 1.75rem}
.center{text-align:center}
.mono{font-family:var(--mono)}
.serif{font-family:var(--display)}
.muted{color:#574b35}

p{margin:0 0 1.1em}
b,strong{font-weight:700}

/* topbar */
.topbar{
  border-bottom:2px solid var(--ink);
  background:var(--paper);
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  position:sticky;top:0;z-index:30;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:46px;gap:1.5rem}
.topbar a{color:var(--ink);text-decoration:none}
.topbar .dot{display:inline-block;width:8px;height:8px;background:var(--accent);border-radius:50%;margin-right:.6em;vertical-align:middle;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* hero */
.hero{padding:5rem 0 3.5rem;position:relative}
.hero h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(3rem, 9vw, 6.5rem);
  line-height:1;
  letter-spacing:-0.015em;
  margin:0 0 1.4rem;
}
.hero h1 em{font-style:italic;color:var(--accent-2)}
.hero .kicker{
  font-family:var(--display);
  font-size:clamp(1.4rem, 2.6vw, 2rem);
  line-height:1.35;
  margin:0 0 1.4rem;
  color:var(--ink);
}
.hero .sub{
  font-size:1.2rem;line-height:1.65;
  max-width:48ch;color:#33291a;margin:0 0 2.2rem;
}

/* sticker label */
.sticker{
  display:inline-block;
  background:var(--accent);color:#fff;
  font-family:var(--mono);font-weight:700;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.45em .9em;
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-1.5deg);
  margin-bottom:1.6rem;
}
.sticker.blue{background:var(--accent-2)}
.sticker.yellow{background:var(--highlight);color:var(--ink)}

/* CTAs */
.btn{
  display:inline-block;
  font-family:var(--mono);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  font-size:.95rem;
  padding:1.05rem 1.6rem;
  text-decoration:none;
  border:2px solid var(--ink);
  background:var(--ink);color:var(--paper);
  box-shadow:5px 5px 0 var(--accent);
  transition:transform .08s ease, box-shadow .08s ease;
}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--accent)}
.btn.ghost{background:var(--paper);color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.btn.ghost:hover{box-shadow:3px 3px 0 var(--ink)}
.btn .price{margin-left:.7em;background:var(--ink);color:var(--paper);padding:.05em .45em;border:1px solid var(--paper);font-size:.85em}
.btn.ghost .price,.btn .price{display:inline-block}

.cta-row{margin:1.4rem 0;display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center}
.trust{font-family:var(--mono);font-size:.78rem;color:#574b35;letter-spacing:.02em;line-height:1.7}

/* hero layout */
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:4rem;align-items:start}
@media (max-width:840px){.hero-grid{grid-template-columns:1fr;gap:2.5rem}}

/* code-diff card */
.diff-card{
  background:#1a1815;color:#f4ead5;
  border:2px solid var(--ink);
  box-shadow:8px 8px 0 var(--accent-2);
  padding:1.2rem 1.3rem 1.4rem;
  font-family:var(--mono);
  font-size:.8rem;line-height:1.65;
  position:relative;
  transform:rotate(.4deg);
}
.diff-card .tab{
  position:absolute;top:-14px;left:14px;
  background:var(--paper);color:var(--ink);
  font-size:.7rem;font-weight:700;
  padding:3px 9px;border:2px solid var(--ink);
  text-transform:uppercase;letter-spacing:.08em;
}
.diff-card .lbl{
  display:inline-block;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;margin:.7em 0 .35em;
  border:1px solid currentColor;
}
.diff-card .lbl.bad{color:#ff6c6c}
.diff-card .lbl.good{color:#7ee087}
.diff-card pre{margin:.2em 0 .9em;white-space:pre-wrap;word-break:break-word;line-height:1.65}
.diff-card .red{color:#ff8a8a;background:#ff6c6c1f;display:block;padding:1px 0 1px .6em}
.diff-card .grn{color:#9ce8a8;background:#3eaa5b1f;display:block;padding:1px 0 1px .6em}
.diff-card .com{color:#9b9a8b}
.diff-card .arrow{
  position:absolute;right:-30px;bottom:60px;
  font-family:var(--display);font-style:italic;font-size:1.1rem;color:var(--ink);
  transform:rotate(8deg);
  background:var(--paper);padding:4px 10px;border:2px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
  white-space:nowrap;
}
@media (max-width:840px){.diff-card .arrow{display:none}}

/* shared section heading */
.section-h{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem, 5.5vw, 3.6rem);
  line-height:1.05;letter-spacing:-.01em;
  margin:0 0 1rem;
}
.section-h em{font-style:italic;color:var(--accent-2)}
.lede{font-size:1.05rem;max-width:54ch;color:#33291a;margin:0 0 2.2rem;line-height:1.7}
.lede.big{font-size:1.22rem;max-width:64ch;line-height:1.65;margin:0 0 2.6rem}
.small{font-size:.85rem}

/* explain */
.explain-wrap{padding:4.5rem 0 2rem}
.explain{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:1rem 0 2.5rem}
@media (max-width:760px){.explain{grid-template-columns:1fr}}
.ecard{
  background:var(--paper);
  border:2px solid var(--ink);
  padding:1.6rem 1.5rem 1.7rem;
  box-shadow:5px 5px 0 var(--ink);
  position:relative;
}
.ecard.accent{box-shadow:5px 5px 0 var(--accent);background:#fff7e6}
.ecard h3{font-family:var(--display);font-weight:400;font-size:1.7rem;line-height:1.1;margin:0 0 .5em}
.ecard p{margin:0;font-size:.98rem;line-height:1.65;color:#33291a}
.analogy{
  background:var(--paper);
  border:2px solid var(--ink);
  border-left:6px solid var(--accent-2);
  box-shadow:5px 5px 0 var(--ink);
  padding:1.4rem 1.6rem;
  font-size:1.1rem;line-height:1.65;
  max-width:64ch;
  margin-top:1rem;
}
.analogy p{margin:0}

/* news / 2026 */
.newsbox{padding:4.5rem 0;background:var(--paper-2);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.news-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:3rem;align-items:start}
@media (max-width:840px){.news-grid{grid-template-columns:1fr;gap:2rem}}
.newsbox p{font-size:1.05rem;color:#33291a;line-height:1.7;max-width:56ch;margin:0 0 1.1rem}
.news-card{
  background:#1a1815;color:#f4ead5;
  border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--accent);
  padding:1.4rem 1.5rem 1.5rem;
  font-family:var(--mono);
  font-size:.88rem;line-height:1.7;
  transform:rotate(.5deg);
}
.news-tag{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#9b9a8b;border-bottom:1px dashed #5b5042;padding-bottom:.7em;margin-bottom:.9em}
.news-list{list-style:none;padding:0;margin:0}
.news-list li{padding:.5em 0;border-bottom:1px dashed #3a342a;line-height:1.55}
.news-list li:last-child{border-bottom:0}
.news-list b{color:#fff066;font-weight:700}
.news-list code{font-family:var(--mono);color:#9ce8a8;font-size:.92em}
.news-foot{margin-top:1em;font-size:.82rem;color:#9ce8a8;border-top:1px dashed #5b5042;padding-top:.9em;line-height:1.55}

/* fix grid */
.fixbox{padding:4.5rem 0}
.fix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:.5rem}
@media (max-width:840px){.fix-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.fix-grid{grid-template-columns:1fr}}
.fix{
  background:var(--paper);
  border:2px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  padding:1.4rem 1.5rem 1.5rem;
  font-size:.95rem;line-height:1.65;
}
.fix:nth-child(2n){box-shadow:5px 5px 0 var(--accent)}
.fix:nth-child(3n){box-shadow:5px 5px 0 var(--accent-2)}
.fix .x{
  display:inline-block;
  width:30px;height:30px;line-height:26px;text-align:center;
  background:var(--accent);color:#fff;
  border:2px solid var(--ink);border-radius:50%;
  font-family:var(--mono);font-weight:700;
  margin-bottom:.9em;
  box-shadow:2px 2px 0 var(--ink);
  text-transform:uppercase;
}
.fix b{display:block;font-size:1.05rem;line-height:1.4;margin-bottom:.5em}
.fix p{margin:0;color:#33291a;font-size:.94rem;line-height:1.6}

/* how-it-works steps */
.howbox{padding:4.5rem 0;background:var(--paper-2);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.steps{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.steps li{
  background:var(--paper);
  border:2px solid var(--ink);
  padding:1.6rem 1.5rem 1.7rem;
  box-shadow:5px 5px 0 var(--accent-2);
  position:relative;
}
.steps li:nth-child(2){box-shadow:5px 5px 0 var(--accent)}
.steps li:nth-child(3){box-shadow:5px 5px 0 var(--good)}
.steps .step-n{
  position:absolute;top:-20px;left:-14px;
  background:var(--ink);color:var(--paper);
  font-family:var(--display);font-size:1.6rem;
  width:48px;height:48px;line-height:44px;text-align:center;
  border:2px solid var(--ink);border-radius:50%;
  box-shadow:3px 3px 0 var(--highlight);
}
.steps h3{font-family:var(--display);font-weight:400;font-size:1.6rem;line-height:1.1;margin:0 0 .5em}
.steps p{margin:0;font-size:.98rem;line-height:1.65;color:#33291a}

/* stacks */
.box{padding:4.5rem 0}
.stacks{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media (max-width:760px){.stacks{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.stacks{grid-template-columns:1fr}}
.stack{
  background:var(--paper);
  border:2px solid var(--ink);
  padding:1.4rem 1.5rem 1.5rem;
  position:relative;
  transition:transform .12s ease, box-shadow .12s ease;
}
.stack:nth-child(odd){box-shadow:5px 5px 0 var(--ink);transform:rotate(-.4deg)}
.stack:nth-child(even){box-shadow:5px 5px 0 var(--accent-2);transform:rotate(.3deg)}
.stack:hover{transform:rotate(0) translate(-1px,-1px);box-shadow:7px 7px 0 var(--ink)}
.stack h3{font-family:var(--display);font-weight:400;font-size:1.7rem;line-height:1;margin:0 0 .35em}
.stack p.plain{font-size:.95rem;color:#181613;line-height:1.55;margin:0 0 1em}
.stack .pill{
  display:inline-block;font-family:var(--mono);font-size:.72rem;
  background:var(--ink);color:var(--paper);
  padding:2px 8px;margin:0 .35em .4em 0;
  letter-spacing:.04em;
}
.stack .num{
  position:absolute;top:-14px;right:-12px;
  background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);
  font-family:var(--display);font-size:1.25rem;
  width:42px;height:42px;line-height:38px;text-align:center;
  border-radius:50%;
  box-shadow:2px 2px 0 var(--ink);
  transform:rotate(8deg);
}
.box .small{margin-top:1.5rem;font-style:italic}

/* before / after */
.proof{padding:4.5rem 0;background:var(--paper-2);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
@media (max-width:760px){.proof-grid{grid-template-columns:1fr;gap:2rem}}

.snippet{
  background:#1a1815;color:#f4ead5;
  border:2px solid var(--ink);
  font-family:var(--mono);font-size:.82rem;line-height:1.7;
  padding:1.1rem 1.2rem;
  position:relative;
}
.snippet.left{box-shadow:6px 6px 0 var(--bad);transform:rotate(-.4deg)}
.snippet.right{box-shadow:6px 6px 0 var(--good);transform:rotate(.3deg)}
.snippet .header{
  display:flex;justify-content:space-between;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.1em;color:#9b9a8b;margin-bottom:.8em;
  padding-bottom:.5em;border-bottom:1px dashed #5b5042;
}
.snippet .verdict{
  position:absolute;top:-14px;right:14px;
  font-family:var(--display);font-size:1rem;
  background:var(--paper);color:var(--ink);
  padding:2px 11px;border:2px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
}
.snippet.left .verdict{background:#ffd9d9}
.snippet.right .verdict{background:#d9f7d9}
.snippet pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:var(--mono);line-height:1.7}
.snippet .red{color:#ff8a8a}
.snippet .grn{color:#9ce8a8}
.snippet .com{color:#9b9a8b}
.snippet .key{color:#ffd479}

.sample{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;font-family:var(--mono);font-size:.85rem;line-height:1.6}
.sample a{color:var(--ink);text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--accent-2)}

/* install accordions */
.install-wrap{padding:4.5rem 0}
details.install{
  background:var(--paper);
  border:2px solid var(--ink);
  margin:1rem 0;
  padding:1.1rem 1.4rem;
  box-shadow:4px 4px 0 var(--ink);
}
details.install[open]{box-shadow:6px 6px 0 var(--accent-2)}
details.install summary{font-family:var(--sans);font-size:1.1rem;font-weight:600;padding-right:2rem;line-height:1.5}
details.install ol{margin:1.1rem 0 .4rem;padding-left:1.4em}
details.install ol li{margin:.55em 0;font-size:.98rem;line-height:1.65;color:#33291a}
details.install ul{margin:.5em 0;padding-left:1.4em}
details.install ul li{margin:.4em 0;font-size:.95rem;line-height:1.6}
.install-tip{
  margin-top:2rem;background:var(--paper);
  border:2px solid var(--ink);
  border-left:6px solid var(--accent);
  padding:1.2rem 1.4rem;
  box-shadow:4px 4px 0 var(--ink);
  font-size:1rem;line-height:1.65;
}

/* FAQ */
.faq{padding:4rem 0 5rem}
details{border-bottom:1px solid var(--rule);padding:1.2rem 0}
details summary{cursor:pointer;font-weight:600;font-size:1.08rem;list-style:none;position:relative;padding-right:2.5rem;line-height:1.5}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-family:var(--display);font-size:1.6rem;line-height:1;color:var(--accent);position:absolute;right:0;top:.05em}
details[open] summary::after{content:"–"}
details p{margin:.9em 0 0;color:#33291a;line-height:1.7}

/* bottom CTA */
.bottom-cta{
  text-align:center;padding:5rem 0 6rem;
  background:var(--ink);color:var(--paper);
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  position:relative;overflow:hidden;
}
.bottom-cta::before{
  content:"AGENTS.md  AGENTS.md  AGENTS.md  AGENTS.md  AGENTS.md  AGENTS.md ";
  position:absolute;top:50%;left:-10%;width:120%;
  font-family:var(--display);font-size:7rem;line-height:1;
  color:#f4ead508;white-space:nowrap;pointer-events:none;
  transform:translateY(-50%);
}
.bottom-cta h2{font-family:var(--display);font-size:clamp(2.5rem,7vw,5rem);font-weight:400;margin:0 0 1.5rem;line-height:1.05;position:relative}
.bottom-cta h2 em{font-style:italic;color:#fff066}
.bottom-cta p{position:relative;color:#d8caa9;font-family:var(--mono);font-size:.85rem;letter-spacing:.04em;margin-top:1.8rem}

/* footer */
footer{padding:2rem 0;font-family:var(--mono);font-size:.78rem;color:#574b35;text-align:center;border-top:1px solid var(--rule);letter-spacing:.02em;line-height:1.8}
footer a{color:var(--ink);margin:0 .35em}

/* receipt page */
.receipt{
  max-width:780px;margin:3.5rem auto 4rem;
  background:var(--paper);
  border:2px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);
  padding:2.4rem 2.2rem 2.6rem;
}
.receipt h1{font-family:var(--display);font-weight:400;font-size:2.6rem;line-height:1.1;margin:0 0 .6em}
.receipt h1 em{font-style:italic;color:var(--accent-2)}
.receipt h2{font-family:var(--display);font-weight:400;font-size:1.7rem;line-height:1.15;margin:2.2rem 0 .5em}
.receipt p{line-height:1.7}
.receipt .stamp{
  display:inline-block;
  border:2px solid var(--good);color:var(--good);
  padding:.3em .8em;font-size:.78rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  transform:rotate(-3deg);margin-bottom:1.2rem;font-family:var(--mono);
}
.receipt ol,.receipt ul{padding-left:1.5em;margin:.6em 0 1.2em}
.receipt ol li,.receipt ul li{margin:.5em 0;font-size:.98rem;line-height:1.7}
.receipt .download{margin:1.8rem 0}
.receipt kbd{font-family:var(--mono);font-size:.82em;background:#fff;border:1px solid var(--ink);padding:1px .35em;box-shadow:1px 1px 0 var(--ink)}
.receipt .signoff{margin-top:2.2rem;font-family:var(--mono);font-size:.78rem;color:#574b35;letter-spacing:.02em}

/* simple page (about, privacy) */
.simple-page{max-width:780px;margin:3.5rem auto 4rem;padding:0 1.75rem}
.simple-page h1{font-family:var(--display);font-weight:400;font-size:3rem;line-height:1.05;margin:0 0 .6em}
.simple-page h2{font-family:var(--display);font-weight:400;font-size:1.7rem;line-height:1.15;margin:2rem 0 .4em}
.simple-page p{line-height:1.7}