/* Toolkit Labs — theme.css
   Owned by MOUSE (design arm). Progressive enhancement over the inline styles
   already in index.html. No web fonts, no JS, no external requests. If this
   file fails to load, index.html's own inline styles keep the page fully
   readable. Restyles by targeting existing classes/elements only — changes no
   copy, no numbers, no prices, no Stripe hrefs.

   Direction: warm-bone editorial. The canvas bone (--bg) is sampled to match
   the brand mark's own opaque background (#f7f8f3) so the brandbar mark melts
   into the page. One confident brand accent (deep teal) does the brand work;
   a real hero, section rhythm, and prices rendered as buttons replace the
   README wall-of-text. */

:root{
  --bg:#f7f8f3;          /* canvas — matches the mark's background exactly */
  --surface:#edefe6;     /* code blocks + tables (warm, one step down) */
  --chip:#eceee4;        /* inline code chips */
  --ink:#171917;         /* primary text */
  --ink-soft:#33352f;    /* body prose, a hair lighter than headings */
  --muted:#63665c;       /* small print, footer, table heads */
  --line:#dbdece;        /* hairlines / borders */
  --line-soft:#e6e8dc;   /* lighter dividers */
  --accent:#116b63;      /* brand accent — deep teal */
  --accent-strong:#0c534d;/* hover / active */
  --accent-tint:#e3efec;  /* button ghost hover wash */
  --cta-fg:#f7f8f3;      /* text on solid accent */
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--ink-soft);
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

main{
  max-width:760px;
  margin:0 auto;
  padding:26px 28px 96px;
}

/* ---------- Brand bar ---------- */
.tlbar{
  border-bottom:1px solid var(--line);
  margin:0 0 40px;
  padding:0 0 14px;
}
.tlbar .tlb{
  color:var(--ink);
  font-weight:800;
  letter-spacing:-.005em;
  font-size:1.02rem;
}
.tlbar .tlb img{border-radius:5px}
.tlbar nav a{
  color:var(--muted);
  font-size:.86rem;
  font-weight:550;
  letter-spacing:.005em;
  transition:color .15s ease;
}
.tlbar nav a:hover{color:var(--accent)}

/* ---------- Hero ---------- */
main > h1{
  font-size:clamp(2.5rem,6vw,3.5rem);
  line-height:1.02;
  letter-spacing:-.028em;
  font-weight:800;
  color:var(--ink);
  margin:.5rem 0 0;
}
/* short accent rule under the wordmark */
main > h1::after{
  content:"";
  display:block;
  width:56px;
  height:4px;
  margin:20px 0 0;
  border-radius:3px;
  background:var(--accent);
}
/* the intro lede (the <small> right after h1) */
main > h1 + p{margin:22px 0 8px}
main > h1 + p small{
  display:block;
  color:var(--ink-soft);
  font-size:1.2rem;
  line-height:1.5;
  max-width:60ch;
  letter-spacing:-.003em;
}

/* ---------- Section rhythm ---------- */
h2{
  font-size:clamp(1.4rem,3vw,1.65rem);
  line-height:1.2;
  font-weight:750;
  letter-spacing:-.018em;
  color:var(--ink);
  margin:4rem 0 14px;
  padding:2rem 0 0;
  border-top:1px solid var(--line-soft);
}
/* first section heading sits closer to the hero, still with a divider */
main > h1 + p + h2{margin-top:3rem}

h3{
  font-size:1.12rem;
  line-height:1.3;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:2.4rem 0 8px;
}
/* small crop-mark tick echoing the logo */
h3::before{
  content:"";
  display:inline-block;
  width:12px;
  height:12px;
  margin-right:10px;
  vertical-align:baseline;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:translateY(-1px);
}

/* ---------- Prose ---------- */
p{margin:.85em 0;max-width:66ch}
main > h1 + p{max-width:none}
ul{padding-left:22px;max-width:66ch}
li{margin:.35em 0}
li strong{color:var(--ink)}

a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent);
  transition:color .15s ease,text-decoration-color .15s ease;
}
a:hover{color:var(--accent-strong);text-decoration-color:currentColor}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* ---------- Inline code + code blocks ---------- */
code{
  font-family:var(--mono);
  font-size:.9em;
  background:var(--chip);
  border:1px solid var(--line);
  border-radius:5px;
  padding:1px 5px;
  overflow-wrap:anywhere;   /* let long tokens (e.g. the npub) wrap instead of
                               forcing the whole page wider than the viewport;
                               inert inside <pre> (white-space:pre) */
}
p,li,td{overflow-wrap:break-word}
pre{
  background:var(--surface) !important;
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px 18px !important;
  margin:1.3rem 0;
  overflow-x:auto;
  font-size:.85rem;
  line-height:1.55;
  color:var(--ink);
}
pre code{background:none;border:0;padding:0;font-size:inherit;border-radius:0}

/* ---------- Tables ----------
   display:block + overflow-x:auto lets a wide table scroll inside itself instead
   of stretching <main> past the viewport (which would scroll the whole page
   sideways). Column alignment is preserved by the anonymous table box. */
table{
  display:block;
  overflow-x:auto;
  border-collapse:collapse;
  margin:1.4rem 0;
  font-size:.92rem;
  max-width:100%;
}
table th,table td{
  padding:9px 20px 9px 0 !important;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
table th{
  color:var(--muted);
  font-weight:650;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  border-bottom:1px solid var(--ink);
}
table tr:last-child td{border-bottom:0}
table code{background:none;border:0;padding:0;font-weight:600}

/* ---------- Price / buy buttons ----------
   Turn the existing <p id="buy-links"> anchors into buttons WITHOUT touching
   their words, prices or hrefs. font-size:0 on the row collapses the literal
   " · " separator text node between the two links; each anchor resets to 1rem. */
#buy-links,#buy-links-toolcall300{
  margin:1.6rem 0 .5rem;
  max-width:none;   /* override p{max-width:66ch}: ch resolves to 0 at font-size:0 */
  font-size:0;
  line-height:0;
}
#buy-links a,#buy-links-toolcall300 a{
  display:inline-block;
  font-size:1rem;
  line-height:1.15;
  margin:0 12px 12px 0;
  padding:13px 24px;
  border-radius:9px;
  text-decoration:none;
  font-weight:600;
  letter-spacing:.005em;
  border:1.5px solid var(--accent);
  transition:background .15s ease,color .15s ease,transform .05s ease;
}
#buy-links a strong,#buy-links-toolcall300 a strong{font-weight:600}
/* primary: the €29 single-developer link (solid accent) */
#buy-links a:first-of-type,#buy-links-toolcall300 a:first-of-type{
  background:var(--accent);
  color:var(--cta-fg);
}
#buy-links a:first-of-type:hover,#buy-links-toolcall300 a:first-of-type:hover{
  background:var(--accent-strong);
  border-color:var(--accent-strong);
}
/* secondary: the €99 team link (outline) */
#buy-links a:last-of-type,#buy-links-toolcall300 a:last-of-type{
  background:transparent;
  color:var(--accent);
}
#buy-links a:last-of-type:hover,#buy-links-toolcall300 a:last-of-type:hover{
  background:var(--accent-tint);
}
#buy-links a:active,#buy-links-toolcall300 a:active{transform:translateY(1px)}
#buy-links a:focus-visible,#buy-links-toolcall300 a:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}

/* ---------- Footer ---------- */
footer{
  margin-top:5rem;
  padding-top:22px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.86rem;
  line-height:1.6;
}
footer a{color:var(--muted);text-decoration-color:color-mix(in srgb,var(--muted) 45%,transparent)}
footer a:hover{color:var(--accent)}
footer p{max-width:none;margin:.6em 0 0}

/* ---------- Small screens ---------- */
@media (max-width:640px){
  main{padding:22px 20px 72px}
  main > h1 + p small{font-size:1.08rem}
  table{font-size:.84rem}
  table th,table td{padding:8px 14px 8px 0 !important}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}