/* The artifact doors: one document per site, shown as issued and then as typed data.
   Builds on base.css (the family shell). The hero sets the document sheet on paper and the
   typed record on a slate plate; the agent band is api.insure's, so the family reads as one. */

/* ---------- hero: the sheet becomes the typed record ---------- */
.stage { margin: clamp(56px, 7vw, 88px) 0 -120px; }
.dz { position: relative; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); align-items: start; }
.sheet { position: relative; z-index: 1; padding: 26px 28px 24px; border-radius: 8px; background: #fffdf8; color: var(--ink);
  border: 1px solid rgba(var(--ink-rgb), .1);
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), .06), 0 22px 44px -26px rgba(var(--ink-rgb), .32), 0 60px 90px -60px rgba(var(--ink-rgb), .3); }
.sheet-h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); }
.sheet-org { font-size: 15px; font-weight: 590; letter-spacing: -.015em; }
.sheet-kind { font: 500 10px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--t3); text-align: right; }
.sheet-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; margin: 12px 0 14px; }
.sheet-meta > div { padding: 5px 6px; border-radius: 4px; }
.sheet-meta .wide { grid-column: 1 / -1; }
.sheet-meta dt { font: 500 9.5px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--t4); }
.sheet-meta dd { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink); }
.sheet-loss { padding-top: 10px; border-top: 1px dashed var(--line-3); }
.sheet-t { width: 100%; border-collapse: collapse; font: 500 11.5px/1.2 var(--mono); color: var(--t2); font-variant-numeric: tabular-nums; }
.sheet-t th { padding: 7px 6px; text-align: left; font: 500 9.5px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--t4); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.sheet-t td { padding: 9px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sheet-t .r { text-align: right; }
.sheet-t tfoot td { font-weight: 600; color: var(--ink); border-top: 1.5px solid var(--ink); border-bottom: 0; }
.sheet-t .sn { display: none; }
.sheet .open { display: inline-block; padding: 2px 6px; margin: -2px 0; border-radius: 4px; font-weight: 600; color: var(--acc-deep); background: rgba(var(--acc-rgb), .1); }
/* the field being read: a teal wash and a rule at its left edge */
.sheet [data-f], .sheet [data-f] td { transition: background-color .35s var(--ease), box-shadow .35s var(--ease); }
.sheet div[data-f].scan, .sheet span[data-f].scan, .sheet tr.scan td { background: rgba(var(--acc-rgb), .1); }
.sheet div[data-f].scan, .sheet span[data-f].scan { box-shadow: inset 2px 0 0 var(--acc); }
.sheet span[data-f] { border-radius: 4px; margin: -2px -4px; padding: 2px 4px; }
.sheet tr.scan td:first-child { box-shadow: inset 2px 0 0 var(--acc); }

.typed { z-index: 2; margin: 76px 0 0 -20px; padding-bottom: 132px; }
.ty-h { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 22px; border-bottom: 1px solid var(--pline); font: 500 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--p-t4); }
.ty-h span:first-child { color: var(--p-t1); letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.ty-rows { list-style: none; margin: 0; padding: 8px 0; }
.ty-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 78px; align-items: center; gap: 14px; min-height: 42px; padding: 0 22px;
  font: 500 12.5px/1.3 var(--mono); border-bottom: 1px solid var(--pline-2); transition: opacity .4s var(--ease), transform .5s var(--ease-fig), background-color .4s var(--ease), box-shadow .4s var(--ease); }
.ty-k { color: var(--p-t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ty-v { color: var(--p-t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ty-t { justify-self: end; padding: 3px 7px; border-radius: 5px; font-size: 10.5px; color: var(--p-acc); box-shadow: inset 0 0 0 1px rgba(var(--p-acc-rgb), .32); white-space: nowrap; }
.ty-row.now { background: rgba(var(--p-acc-rgb), .07); box-shadow: inset 2px 0 0 var(--p-acc); }
.ty-ok { display: flex; align-items: center; gap: 10px; padding: 16px 22px 0; font: 500 12px/1.4 var(--mono); color: var(--p-acc); transition: opacity .5s var(--ease), transform .5s var(--ease-fig); }
.ty-check { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; background: rgba(var(--p-acc-rgb), .16); box-shadow: inset 0 0 0 1px rgba(var(--p-acc-rgb), .55); }
.ty-check::after { content: ""; position: absolute; left: 5.5px; top: 3.5px; width: 3.5px; height: 6.5px; border-right: 1.5px solid var(--p-acc); border-bottom: 1.5px solid var(--p-acc); transform: rotate(45deg); }
/* the sequence (doors.js): rows arrive in place; with no JS, or reduced motion, everything is shown */
.js:not(.reduce) .ty-row:not(.on) { opacity: 0; transform: translateX(-6px); }
.js:not(.reduce) .ty-ok:not(.on) { opacity: 0; transform: translateY(4px); }
.dz.fade .ty-row, .dz.fade .ty-ok { opacity: 0 !important; transition-duration: .35s; }

@media (max-width: 1100px) { .typed { margin-left: -16px; } .sheet { padding: 22px 22px 20px; } }
@media (max-width: 900px) {
  .stage { margin-bottom: -96px; }
  .dz { grid-template-columns: 1fr; }
  .typed { margin: -36px 18px 0; padding-bottom: 108px; }
  .sheet { padding-bottom: 52px; }
}
/* phones: the two calls to action stack full width (the family's pattern), and the agent band's
   mcp.json wraps, so the URL is never cut off at the plate's edge */
@media (max-width: 640px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; height: 48px; }
  .agents .ag-code.dx-pre { font-size: 12px; line-height: 22px; }
  .agents .ag-code.dx-pre .ln { --hang: min(var(--h, 0ch), 4ch); width: auto; padding-left: calc(16px + var(--hang)); text-indent: calc(var(--hang) * -1); white-space: pre-wrap; overflow-wrap: break-word; }
}
@media (max-width: 640px) {
  .stage { margin-top: 48px; }
  .sheet { padding: 18px 16px 48px; }
  .sheet-h { flex-direction: column; gap: 4px; }
  .sheet-kind { text-align: left; }
  .sheet-meta { grid-template-columns: 1fr; }
  .sheet-t .hn { display: none; }
  .sheet-t .sn { display: inline; }
  .sheet-t { font-size: 11px; }
  .sheet-t th, .sheet-t td { padding-inline: 4px; }
  .typed { margin-inline: 8px; }
  .ty-h, .ty-row, .ty-ok { padding-inline: 14px; }
  .ty-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k t" "v v"; gap: 2px 10px; padding-block: 8px; font-size: 12px; }
  .ty-k { grid-area: k; } .ty-v { grid-area: v; } .ty-t { grid-area: t; }
}

/* ---------- the document: a bento of facts, each with a small visual from the sample ---------- */
.dc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dc { position: relative; display: flex; flex-direction: column; gap: 22px; min-width: 0; min-height: 224px; padding: 24px; border-radius: 18px; border: 1px solid transparent;
  background: linear-gradient(180deg, #fbf8f0, #f3ecdc) padding-box, linear-gradient(180deg, rgba(var(--ink-rgb), .16), rgba(var(--ink-rgb), .08) 40%, rgba(var(--ink-rgb), .05)) border-box;
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), .05), 0 24px 40px -28px rgba(var(--ink-rgb), .25); }
.dc-wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.dc-k { font: 500 11px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--acc-deep); }
/* one measure at every multi-column width, so captions in a row wrap alike */
.dc-cap p { margin-top: 8px; max-width: 33ch; font-size: 15px; line-height: 1.55; color: var(--t2); text-wrap: pretty; }
.dc-cap a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.dc-viz { margin-top: auto; min-width: 0; }
.dc-wide .dc-cap { align-self: start; }
.dc-wide .dc-viz { margin-top: 0; }

/* the visuals: paper-on-paper, mono labels, the one accent */
.vz-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.vz-figs span { display: flex; align-items: flex-start; gap: 6px; min-height: 13px; font: 500 10.5px/1.25 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--t4); }
.vz-figs span i { margin-top: 2px; }
.vz-figs span i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.vz-figs i.a { background: var(--acc-deep); } .vz-figs i.b { background: rgba(var(--acc-rgb), .42); }
.vz-figs i.g { background: repeating-linear-gradient(135deg, rgba(var(--ink-rgb), .3) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .2); }
.vz-figs > div { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.vz-figs b { display: block; margin-top: 6px; font-size: 18px; font-weight: 590; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.vz-doc { padding: 14px 14px 12px; border-radius: 10px; background: #fffdf8; box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 24px -18px rgba(var(--ink-rgb), .35); }
.vz-doc-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1.5px solid var(--ink); }
.vz-doc-h b { font-size: 12.5px; font-weight: 590; letter-spacing: -.01em; color: var(--ink); }
.vz-doc-h span { font: 500 9.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--t4); white-space: nowrap; }
.vz-doc-f { display: block; margin-top: 4px; font: 500 10.5px/1 var(--mono); color: var(--acc-deep); }
.vz-h { display: flex; justify-content: space-between; margin-bottom: 12px; font: 500 10.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--t4); }
.vz-bar { display: flex; flex: 1; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; background: rgba(var(--ink-rgb), .05); }
.seg { display: block; height: 100%; }
.seg.a { background: var(--acc-deep); }
.seg.b { background: rgba(var(--acc-rgb), .42); }
.seg.c { background: rgba(var(--ink-rgb), .14); }
.seg.gap { background: repeating-linear-gradient(135deg, rgba(var(--ink-rgb), .12) 0 3px, transparent 3px 7px); }
.vz-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 56px; align-items: center; gap: 12px; margin-top: 8px; }
.vz-k { font: 500 11px/1 var(--mono); color: var(--t4); }
.vz-v { font: 500 12px/1 var(--mono); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.vz-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vz-node { padding: 7px 10px; border-radius: 7px; font: 500 12px/1.2 var(--mono); color: var(--t2); background: #fffdf8; box-shadow: inset 0 0 0 1px var(--line-3); }
.vz-node.on { color: var(--paper); background: var(--acc-deep); box-shadow: none; }
.vz-arr { position: relative; width: 18px; height: 1px; background: var(--line-3); }
.vz-arr::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid var(--t4); border-right: 1px solid var(--t4); transform: rotate(45deg); }
.vz-sep { font: 500 10px/1 var(--mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--t4); }
.vz-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.vz-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.vz-list b { font-size: 13.5px; font-weight: 590; color: var(--ink); }
.vz-list span { font: 500 11.5px/1.3 var(--mono); color: var(--t4); text-align: right; }
.vz-codes b { font: 600 12.5px/1.3 var(--mono); color: var(--acc-deep); }
.vz-time { padding-bottom: 2px; }
.vz-track { position: relative; display: flex; gap: 2px; height: 10px; border-radius: 5px; background: rgba(var(--ink-rgb), .05); }
.vz-track .seg:first-child { border-radius: 5px 0 0 5px; } .vz-track .seg:last-of-type { border-radius: 0 5px 5px 0; }
.vz-pin { position: absolute; top: -5px; width: 2px; height: 20px; margin-left: -2px; border-radius: 1px; background: var(--ink); }
.vz-ticks { position: relative; height: 14px; margin-top: 12px; font: 500 10.5px/1 var(--mono); color: var(--t4); }
.vz-ticks span { position: absolute; top: 0; white-space: nowrap; }
.vz-ticks span:first-child { left: 0; }
.vz-ticks span[style] { transform: translateX(-50%); }
.vz-ticks span.r { left: auto; right: 0; }
.vz-ticks.vz-top { margin: 0 0 8px; }
.vz-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vz-tile { display: flex; flex-direction: column; min-width: 0; padding: 11px 12px 12px; border-radius: 10px; background: #fffdf8; box-shadow: inset 0 0 0 1px var(--line-2); }
.vz-tile.on { box-shadow: inset 0 0 0 1.5px rgba(var(--acc-rgb), .5); }
.vz-tile em { font: 500 10.5px/1 var(--mono); font-style: normal; color: var(--acc-deep); white-space: nowrap; }
.vz-tile b { margin-top: 8px; font-size: 13.5px; font-weight: 590; color: var(--ink); overflow-wrap: anywhere; }
.vz-tile small { margin-top: 2px; font-size: 11.5px; line-height: 1.35; color: var(--t4); }
.vz-orig { padding: 14px; border-radius: 10px; border: 1px dashed var(--line-3); background: rgba(255, 253, 248, .6); }
.vz-sk { display: block; height: 7px; margin-bottom: 8px; border-radius: 4px; background: rgba(var(--ink-rgb), .09); }
.vz-sk.w1 { width: 72%; } .vz-sk.w2 { width: 46%; } .vz-sk.w3 { width: 86%; }
.vz-orig em { display: block; margin-top: 10px; font: 500 10.5px/1 var(--mono); font-style: normal; color: var(--t4); }

@media (max-width: 1100px) { .dc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .dc-grid { grid-template-columns: 1fr; }
  .dc-wide { grid-column: auto; display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  .dc { min-height: 0; }
  .dc-cap p { max-width: none; }
  .vz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- the schema: the example record, annotated field by field ---------- */
.an { position: relative; margin: 0; border: 1px solid #0c1216; border-radius: 14px; background: var(--plate); overflow: hidden;
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), .12), 0 24px 48px -18px rgba(var(--ink-rgb), .32), 0 72px 120px -60px rgba(var(--ink-rgb), .38); }
.an::before { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; z-index: 1; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); }
.an-h { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; height: 40px; padding: 0 0 0 16px; border-bottom: 1px solid var(--pline); font: 500 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--p-t4); }
.an-h-n { display: grid; grid-template-columns: 76px minmax(0, 1fr) 150px; gap: 12px; padding: 0 20px 0 21px; }
.an-h-n span:last-child { text-align: right; padding-right: 26px; }
.an-h .dx-copy { position: absolute; right: 6px; top: 7px; }
.an-rows { list-style: none; margin: 0; padding: 12px 0 16px; }
.an-row { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: baseline; transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.an-row.has:hover { background: rgba(var(--p-acc-rgb), .06); box-shadow: inset 2px 0 0 var(--p-acc); }
/* a code line wraps with a hanging indent under its value (the blog's rule) */
.an-c { --hang: min(var(--h, 0ch), 28ch); display: block; min-width: 0; padding: 3px 16px 3px calc(16px + var(--hang)); text-indent: calc(var(--hang) * -1);
  font: 400 12.5px/1.8 var(--mono); letter-spacing: 0; color: var(--p-t2); white-space: pre-wrap; overflow-wrap: break-word; }
.an-n { display: grid; grid-template-columns: 76px minmax(0, 1fr) 150px; align-items: baseline; gap: 12px; margin: 0; padding: 4px 20px; min-height: 100%; border-left: 1px solid var(--pline-2); font-size: 13px; line-height: 1.55; color: var(--p-t3); }
.an-t-c { min-width: 0; }
.an-t { display: inline-block; max-width: 100%; padding: 0 6px; white-space: nowrap; border-radius: 4px; font: 500 10.5px/1.7 var(--mono); color: var(--p-acc); box-shadow: inset 0 0 0 1px rgba(var(--p-acc-rgb), .3); }
.an-m { color: var(--p-t2); }
.an-s { font: 500 11px/1.6 var(--mono); color: var(--p-t4); text-align: right; }
/* tablet: the source column gives its room to the meaning (it stays in every machine face) */
@media (max-width: 1100px) {
  .an-h-n, .an-n { grid-template-columns: 70px minmax(0, 1fr); }
  .an-s, .an-h-n span:last-child { display: none; }
  .an-h, .an-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* phones: the record becomes a field list. Each field is its key and value (the value starting its
   own line when it does not fit), then its type and meaning; brace-only lines go, nesting is a rule. */
@media (max-width: 760px) {
  .an-h { grid-template-columns: minmax(0, 1fr) auto; }
  .an-h-n { display: none; }
  .an-rows { padding: 4px 0 8px; }
  .an-row { display: block; padding: 11px 16px 12px; border-top: 1px solid var(--pline-2); }
  .an-row:first-child, .an-brace + .an-row, .an-row.an-fold { border-top: 0; }
  .an-row.has:hover { background: none; box-shadow: none; }
  .an-brace { display: none; }
  .an-nest, .an-fold { margin-left: 16px; padding-left: 14px; border-left: 1px solid var(--pline); }
  .an-c { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .6em; padding: 0; text-indent: 0; font-size: 12.5px; line-height: 1.6; white-space: normal; }
  .an-i { display: none; }
  .an-v { min-width: 0; overflow-wrap: anywhere; }
  .an-open .an-v, .an-cm { display: none; }
  .an-fold .an-c { display: none; }
  .an-n { display: flex; align-items: baseline; gap: 8px; min-height: 0; margin-top: 6px; padding: 0; border-left: 0; font-size: 13px; line-height: 1.5; }
  .an-n.an-empty { display: none; }
  .an-t-c { flex: none; }
  .an-t-c:empty { display: none; }
  .an-fold .an-n { margin-top: 0; color: var(--p-t3); }
  .an-s { display: none; }
}

/* the line under the record, the agent band's pre, and the family's code tokens and copy button (api.insure docs.css) */
.rec-note { margin-top: 14px; font-size: 13.5px; color: var(--t4); }
.rec-note a { font: 500 12.5px/1 var(--mono); color: var(--acc-deep); text-decoration: underline; text-decoration-color: rgba(var(--acc-rgb), .3); text-underline-offset: 3px; }
.rec-note a:hover { text-decoration-color: currentColor; }
.dx-pre { margin: 0; padding: 12px 0; overflow-x: auto; font: 400 12.5px/1.8 var(--mono); letter-spacing: 0; color: var(--p-t2); scrollbar-width: thin; }
.dx-pre .ln { display: block; width: max-content; min-width: 100%; padding: 0 16px; white-space: pre; }
.tk-k { color: var(--p-t2); } .tk-s { color: var(--p-str); } .tk-n { color: var(--p-acc); } .tk-p { color: var(--p-t4); } .tk-c { color: var(--p-acc); font-weight: 600; }
.dx-copy { position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--p-t4); cursor: pointer; transition: color .16s var(--ease), background-color .16s var(--ease); }
.dx-copy::after { content: ""; position: absolute; inset: -5px -6px -9px -8px; }
.dx-copy svg { grid-area: 1 / 1; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity .16s var(--ease), transform .2s var(--ease-fig); }
.dx-copy .i-check { opacity: 0; transform: scale(.6); }
.dx-copy:hover { color: var(--p-t1); background: rgba(245, 243, 237, .06); }
.dx-copy:focus-visible { outline: 2px solid var(--p-acc); outline-offset: -2px; }
.dx-copy.done { color: var(--p-acc); }
.dx-copy.done .i-copy { opacity: 0; transform: scale(.6); }
.dx-copy.done .i-check { opacity: 1; transform: none; }
.no-js .dx-copy { display: none; }

/* ---------- what your agent does ---------- */
.verbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vb { position: relative; display: flex; flex-direction: column; padding: 24px 22px 20px; border-radius: 16px; border: 1px solid transparent;
  background: linear-gradient(180deg, #fbf8f0, #f3ecdc) padding-box, linear-gradient(180deg, rgba(var(--ink-rgb), .16), rgba(var(--ink-rgb), .08) 40%, rgba(var(--ink-rgb), .05)) border-box;
  box-shadow: 0 1px 2px rgba(var(--ink-rgb), .05), 0 24px 40px -28px rgba(var(--ink-rgb), .25); }
.vb-k { align-self: flex-start; display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 8px; font: 600 12px/1 var(--mono); color: var(--paper); background: var(--acc-deep); }
.vb h3 { margin-top: 18px; font-size: 17px; letter-spacing: -.016em; }
.vb p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--t3); }
.vb-c { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font: 500 12px/1.3 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.vb p { margin-bottom: 20px; }
.vb-free, .vb-key { flex: none; padding: 3px 7px; border-radius: 5px; font-size: 10.5px; }
.vb-free { color: var(--acc-deep); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), .3); }
.vb-key { color: var(--t2); box-shadow: inset 0 0 0 1px var(--line-3); }
/* the text keeps one measure at every two-column width, so a pair always wraps alike */
.vb p { max-width: 36ch; }
@media (max-width: 800px) { .verbs { grid-template-columns: 1fr; } }

/* ---------- agents (the page's one dark band) ---------- */
.agents { background: var(--plate); color: var(--p-t1); isolation: isolate; overflow: hidden; }
.agents::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(/img/noise.png) repeat; background-size: 180px; opacity: .05; mix-blend-mode: overlay; pointer-events: none; }
.agents::after { content: ""; position: absolute; left: 50%; bottom: -260px; width: min(1100px, 100%); height: 520px; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--p-acc-rgb), .10), transparent 70%); }
.agents .sh h2 { color: var(--p-t1); }
.agents .sh p { color: var(--p-t3); }
.ag-win { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); border-radius: 14px; overflow: hidden; border: 1px solid var(--pline); background: var(--plate-2);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 60px -30px rgba(0,0,0,.6); position: relative; }
.ag-win::before { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; z-index: 2; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); }
.ag-cfg { border-right: 1px solid var(--pline); min-width: 0; background: var(--plate); }
.ag-h { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 24px; border-bottom: 1px solid var(--pline); font: 500 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--p-t4); }
.ag-h span:last-child:not(:first-child) { text-transform: none; letter-spacing: 0; }
.ag-code { margin: 0; padding: 20px 24px 24px; overflow-x: auto; font: 400 13px/26px var(--mono); color: var(--p-t2); white-space: pre; }
.ag-cfg { display: flex; flex-direction: column; }
.ag-tools { margin-top: auto; padding: 20px 24px 24px; border-top: 1px solid var(--pline-2); }
.ag-tools .mono { color: var(--p-t4); }
.ag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ag-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 7px; font: 500 12px/1 var(--mono); color: var(--p-t2); box-shadow: inset 0 0 0 1px var(--pline); white-space: nowrap; flex: none;
  transition: color .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease); }
.ag-chip.on { color: var(--p-t1); background: rgba(var(--p-acc-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--p-acc-rgb), .5); }
.ag-log { min-width: 0; }
.ag-rows { list-style: none; margin: 0; padding: 10px 0 14px; }
.ag-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; min-height: 46px; padding: 6px 24px; font: 500 12.5px/1.5 var(--mono); color: var(--p-t2);
  transition: opacity .45s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease); }
/* rows arrive one at a time, in place: the plate holds its full height so the page never moves */
.js .ag-row:not(.in) { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js .ag-row { transition: none; } }
.ag-row.on { background: rgba(var(--p-acc-rgb), .07); box-shadow: inset 2px 0 0 var(--p-acc); }
.ag-role { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--p-t4); }
.ag-row[data-k="res"] .ag-role { color: var(--p-acc); }
.ag-row[data-k="event"] .ag-role { color: var(--p-acc); }
.ag-body { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ag-body b { font-weight: 600; color: var(--p-t1); }
.ag-args { color: var(--p-t3); }
.ag-sep { color: var(--p-t5); }
.ag-say { font: 400 14px/1.5 var(--sans); letter-spacing: -.01em; color: var(--p-t1); }
.ag-row[data-k="agent"] .ag-role { color: var(--p-str); }
@media (max-width: 900px) {
  .ag-win { grid-template-columns: 1fr; }
  .ag-cfg { border-right: 0; border-bottom: 1px solid var(--pline); }
}
@media (max-width: 640px) {
  .ag-h, .ag-code { padding-inline: 16px; }
  .ag-row { grid-template-columns: 52px minmax(0, 1fr); padding-inline: 16px; }
  .ag-code { font-size: 12px; }
}

.ag-h .dx-copy { margin-right: -14px; }
.ag-code.dx-pre { padding: 20px 0 24px; font: 400 13px/26px var(--mono); }
.ag-code.dx-pre .ln { padding: 0 24px; }
.ag-row[data-k="res"] .ag-role { color: var(--p-acc); }

/* ---------- request access ---------- */
.access { padding-bottom: calc(var(--sec) + 24px); }
.acc-copy h2 { font-size: clamp(34px, 4vw, 52px); }
.acc-copy > p { margin-top: 20px; font-size: 18px; line-height: 1.5; color: var(--t3); max-width: 26em; text-wrap: pretty; }
.f-done h3 { font-size: 24px; letter-spacing: -.02em; }