/* Article/prose chrome — loaded by the long-form content pages (docs, benchmark, guides) on top
   of site.css. Not loaded by the homepage, which has its own section layout. */
body.doc { font-size: 17px; line-height: 1.7; }
/* One reading measure for EVERY long-form page (docs, benchmark, guides) - narrower than the
   site frame, centered within it, and identical across all three so they never differ in width.
   `.wrap` on the <article> supplies the centering; this just caps the column. */
article { max-width: 760px; margin: 0 auto; padding: 40px 0 20px; }
.crumb { font-size: 13.5px; color: var(--muted); margin: 0 0 1.2em; }
article h1 { font-size: clamp(28px,5vw,42px); line-height: 1.08; letter-spacing: -.035em; font-weight: 760; margin: 0 0 .4em; }
.meta { font-size: 14px; color: var(--muted); margin: .3em 0 1.4em; }
.lead { font-size: 1.16rem; line-height: 1.6; color: var(--muted); margin: .1em 0 1.3em; }
article h2 { font-size: clamp(21px,3vw,27px); letter-spacing: -.02em; margin: 2.4em 0 .7em; padding-top: 1.1em; border-top: 1px solid var(--line); line-height: 1.2; }
article h3 { font-size: 18px; margin: 1.9em 0 .4em; letter-spacing: -.01em; }
article p { margin: 0 0 1em; }
article ul, article ol { margin: 0 0 1.1em; padding-left: 22px; }
article li { margin: 0 0 .4em; }

.tablewrap { overflow-x: auto; margin: 1.5em 0; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; vertical-align: top; padding: 9px 13px; border: 1px solid var(--line); }
thead th { background: var(--soft); font-weight: 650; }
tbody tr:nth-child(even) { background: #f8f7f3; }
td:first-child, th:first-child { color: var(--ink); font-weight: 600; }

.note { background: var(--green-soft); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin: 1.5em 0; font-size: 14.5px; }
.note.warn { background: var(--amber-soft); }
.note b { color: var(--green); }
.note.warn b { color: var(--amber); }
.transparency { border-left: 3px solid var(--muted); padding: 4px 0 4px 16px; color: var(--muted); font-size: 14px; margin: 1.8em 0; }

details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 650; padding: 14px 2px; }
details p { margin: 0 2px 16px; color: var(--muted); }

.cta { background: var(--paper); border: 1px solid var(--green); border-radius: 16px; padding: 22px; margin: 2em 0; }
.cta h3 { margin: 0 0 8px; }
.cta p { margin: 0 0 12px; color: var(--muted); font-size: 15px; }

/* capability / feature list - hairline rows, no boxes (the document idiom) */
.caps { list-style: none; padding: 0; margin: 1.5em 0; }
.caps li { padding: 13px 0; margin: 0; border-top: 1px solid var(--line); }
.caps li:first-child { border-top: 0; }
.caps strong { color: var(--ink); font-weight: 650; }
.caps .d { color: var(--muted); }

/* article / guide index list - a prominent title link + a muted description */
.notes { list-style: none; padding: 0; margin: 1.5em 0; }
.notes li { padding: 1.1em 0; margin: 0; border-top: 1px solid var(--line); }
.notes li:first-child { border-top: 0; }
.notes a { font-size: 1.1rem; font-weight: 650; letter-spacing: -.01em; }
.notes .d { display: block; color: var(--muted); font-size: .95rem; margin-top: .35em; }

/* inline mono label (free / paid) */
.tag { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--green); background: var(--green-soft); border-radius: 5px; padding: 1px 7px; vertical-align: 1px; }
.tag.paid { color: var(--amber); background: var(--amber-soft); }

/* email -> key form */
.getkey { display: flex; gap: 10px; flex-wrap: wrap; margin: 1.3em 0 .4em; max-width: 460px; }
.getkey input { flex: 1 1 220px; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--paper); color: var(--ink); }
.getkey input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
#signup-out { font-size: 14px; color: var(--muted); margin: 6px 0 0; }
#signup-out .key { display: block; margin-top: 8px; padding: 12px 14px; background: var(--ink); color: #eafaf0; border-radius: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; word-break: break-all; }
#signup-out .err { color: #b3261e; }