/* mlivechat page CSS on top of the tasteskill kit (public/assets, direction A). Only what a reference calls page CSS:
   the self-hosted faces, the client's own UI inside the frames, the captures, the hero's content-sized panel
   (owner fix, 2026-11-13) and the phone menu at display size (owner rule). */

@font-face { font-family: "Gabarito"; src: url("/fonts/gabarito-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-wght-normal.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/fonts/dm-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* the client's logo file, never redrawn */
.nav__logo img { display: block; height: 44px; width: auto; }

/* ---- mlivechat's own UI inside the frames: the agent's messages in the brand navy, as in the real inbox; the sneak
   peek is the visitor's unsent line, outlined; the AI draft sits above the composer ---- */
.ui.mlc .ui-msg--me { background: #0f3f8e; color: #ffffff; box-shadow: none; }
.ui.mlc .ui-msg--bot .ui-msg__col > .mlc-said { padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--u-fill-2); color: var(--u-ink); }
.ui.mlc .mlc-peek .ui-chat__answer { display: block; padding: 7px 12px; border-radius: 14px 14px 14px 4px; border: 1.5px dashed color-mix(in oklab, var(--u-ink) 35%, transparent); font-style: italic; color: var(--u-ink); }
.ui.mlc .mlc-peek .ui-chat__src { font-weight: 400; }
.ui.mlc .mlc-who { display: grid; line-height: 1.2; }
.ui.mlc .mlc-who small { font-size: 12px; color: var(--u-muted); }
.ui.mlc .ui-chat__send { background: var(--u-accent); }
.ui.mlc .ui-chat__body { min-height: 0; }
.ui.mlc .mlc-draft { margin: 0 12px 8px; padding: 10px 12px; border-radius: 10px; background: var(--u-fill); box-shadow: inset 0 0 0 1px var(--u-line-2); display: grid; gap: 6px; font-size: 13px; line-height: 20px; }
.ui.mlc .mlc-draft__label { font-size: 12px; color: var(--u-muted); display: flex; justify-content: space-between; align-items: center; }
.ui.mlc .mlc-draft .ui-msg__col { color: var(--u-ink); gap: 6px; }

/* ---- The split hero (owner fix, 2026-11-13): the blue panel is as tall as what it holds (the live chat, then the AI
   draft card under it with the normal gap), the words are centred against it, and the pair is centred in the first
   screen. The hero still owns the screen: its box is the kit's 100svh. ---- */
.hero--split .hero__grid { align-items: center; }
.hero--split .hero__text { align-self: center; }
.hero--split .hero__media { height: auto; align-self: center; }
.hero__stack { position: relative; z-index: 1; display: grid; gap: var(--s-4); padding: var(--s-5); justify-items: stretch; }
.hero__stack > .ui-chat { width: 100%; }
.hero__stack > .ly-float { position: static; inset: auto; width: 100%; max-width: none; }
.hero__stack .ui-msg { max-width: 88%; }
.hero__stack .ui-chat__body { gap: 10px; }
.hero__stack > .shot { justify-self: center; }
.hero__stack > .shot .frag { width: auto; }
.hero__stack > .shot .frag img { width: auto; max-width: 100%; max-height: min(600px, 100svh - 300px); }
/* stacked (tablet, phone): the words first, then the panel takes what the screen leaves; what it holds starts at its
   top and is cut by the panel's foot under a fade (the panel itself ends whole, inside the hero) */
@media (max-width: 1023px) {
  .hero--split .hero__media { flex: 1 1 0; min-height: 0; height: auto; align-self: stretch; container-type: size; }
  .hero--split .hero__text { align-self: stretch; }
  .hero__stack { position: absolute; inset: 0; align-content: start; overflow: hidden;
    mask-image: linear-gradient(#000 calc(100% - 40px), transparent); }
  .hero:not(.hero--tall) .hero__stack > .shot .frag img { max-height: calc(100cqh - 2 * var(--s-5)); }
}
@media (max-width: 639px) {
  .hero__stack { padding: var(--s-4); gap: var(--s-3); }
  .hero__stack > .shot .frag img { max-height: calc(100cqh - 2 * var(--s-4)); }
  .hero__stack > .ly-float, .hero--split .ui-chat__online, .hero__stack .mlc-early { display: none; }
}
@media (max-width: 639px) and (max-height: 700px) { .hero__kicker { display: none; } }

/* ---- Real product captures (public/frag): whole, never cut, on the frame's ground ---- */
.frag { display: block; width: min(100%, var(--fw)); }
.frag img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px rgb(14 26 43 / .10), 0 12px 32px -12px rgb(14 26 43 / .18); background: #fff; }
.shot { display: grid; place-items: center; width: 100%; }
.shot > .frag { max-height: 100%; }
.frame.frame--shot { padding: clamp(24px, 4vw, 48px); }
.frame--shot .frag + .frag { margin-top: var(--s-4); }

/* ---- Lists inside sections: a 1px rule closing each row, inside the content edges ---- */
.points { list-style: none; margin-bottom: 0; margin-inline: 0; padding: 0; display: grid; }
.points > li { display: grid; gap: var(--s-1); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.points > li:first-child { padding-top: 0; }
.points h3 { font: 500 var(--t-card)/1.35 var(--font-text); letter-spacing: 0; }
.points p { max-width: 54ch; }
.linkrows { list-style: none; margin-bottom: 0; margin-inline: 0; padding: 0; display: grid; }
.linkrows a { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-1) var(--s-4); align-items: center; min-height: 64px; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.linkrows a > b { font-weight: 500; font-size: var(--t-card); }
.linkrows a > span:not(.plat__mark) { grid-column: 2; color: var(--muted); font-size: var(--t-small); }
.linkrows a > b, .linkrows a > span:not(.plat__mark) { grid-column: 2; }
.linkrows a > svg:first-child, .linkrows a > .plat__mark { grid-row: span 2; color: var(--ink); }
.linkrows a > .m-arrow, .linkrows a > svg:last-child:not(:first-child) { grid-column: 3; grid-row: 1 / span 2; }
.linkrows a:hover > b { text-decoration: underline; text-underline-offset: 4px; }
.plat__mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.statement__cols { margin-top: var(--s-8); }
.note { color: var(--muted); font-size: var(--t-small); max-width: 62ch; }

/* ---- The pricing cards ---- */
.plan { display: grid; align-content: start; gap: var(--s-4); }
.plan__price { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.plan__price b { font: var(--display-weight) var(--t-h2)/1 var(--font-display); letter-spacing: var(--display-tracking); }
.plan__price span { color: var(--muted); font-size: var(--t-small); }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.plan li { display: flex; gap: var(--s-2); align-items: flex-start; }
.plan li svg { flex: none; margin-top: 3px; color: var(--action); }
.plan__flag { display: inline-flex; margin-left: var(--s-2); font: 500 var(--t-label)/1 var(--font-text); color: var(--action); vertical-align: middle; }

/* ---- Install code ---- */
.code { margin: 0; padding: var(--s-5); border-radius: var(--r-md); background: #0e1a2b; color: #e8edf5; font: 14px/1.6 var(--font-mono); overflow-x: auto; white-space: pre; max-width: 100%; }
.code mark { background: #1857f6; color: #fff; border-radius: 4px; padding: 0 4px; }
.guide { display: grid; gap: var(--s-3); align-content: start; }
.guide h3 { display: flex; align-items: center; gap: var(--s-3); font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: 0; }
.guide ol { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-2); }
.guide code { font: 14px var(--font-mono); }

/* ---- Contact form (src/contact.ts runs it; topics are our own chips, never a native radio look) ---- */
.cform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.cform > :is(.field--full, .cform__end, .status, fieldset) { grid-column: 1 / -1; }
.cform .err { color: color-mix(in oklab, #d92d20 80%, var(--ink)); font-size: var(--t-small); font-weight: 400; }
.cform :is(input, textarea)[aria-invalid="true"] { border: 2px solid color-mix(in oklab, #d92d20 72%, var(--ink)); }
.cform fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.cform legend { padding: 0; margin-bottom: var(--s-2); font-size: var(--t-small); font-weight: 500; }
.topics { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.topics label { position: relative; }
.topics input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.topics span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-btn); border: 1px solid var(--line-strong); font-size: var(--t-body); font-weight: 400; }
.topics input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.topics input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; }
.cform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.cform .hint, .opt { color: var(--muted); font-weight: 400; }
.status:empty { display: none; }
.status[data-kind="err"] { color: color-mix(in oklab, #d92d20 80%, var(--ink)); }
@media (max-width: 639px) { .cform { grid-template-columns: minmax(0, 1fr); } }

/* ---- Legal documents (docs/legal, drafts) ---- */
.legal { max-width: 72ch; }
.legal h2 { font-size: var(--t-h3); margin: var(--s-8) 0 var(--s-4); }
.legal h3 { font: 500 var(--t-card)/1.35 var(--font-text); letter-spacing: 0; margin: var(--s-6) 0 var(--s-3); }
.legal p, .legal li { line-height: 1.7; }
.legal :is(p, ul, ol, table) { margin: 0 0 var(--s-4); }
.legal table { display: block; overflow-x: auto; border-collapse: collapse; font-size: var(--t-small); }
.legal :is(th, td) { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }
.ph { padding: 0 6px; border-radius: 4px; background: var(--surface); font: 13px var(--font-mono); }
.legal-side { display: grid; gap: var(--s-2); align-content: start; }
.legal-side a[aria-current="page"] { font-weight: 500; }
.draft-note { padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--surface); }

/* ---- The phone menu: a designed full-height sheet with the links at display size (owner rule) ---- */
@media (max-width: 1023px) {
  .nav.is-open .nav__link { font-family: var(--font-display); font-size: 28px; letter-spacing: var(--display-tracking); height: 64px; }
  .nav.is-open .nav__menu a { font-size: var(--t-lead); }
}
/* the narrowest phones keep one hero action, so the panel under it still shows the chat */
@media (max-width: 359px) { .hero--split .btn-row > .btn--secondary { display: none; } }
@media (max-width: 639px) and (max-height: 600px) { .hero--split .hero__media { display: none; } }

/* ---- Home (from direction A's page CSS): the app frame, the feature cards' panels, the set-up steps ---- */
#inbox .app__pane--open > .ui-panel { min-height: 100%; }
#inbox .app { min-height: 0; }
#features .panel { --p-h: 336px; }
#features .ui-chat__body { min-height: 0; }
@media (min-width: 1024px) and (max-width: 1279px) { #features .panel { --p-h: 300px; } }
@media (max-width: 639px) {
  #features .panel { --p-h: 160px; }
  main > section#setup[data-moment]:not(.is-live), main > section#steps[data-moment]:not(.is-live) { height: auto; min-height: calc(2 * 100lvh); }
  :is(#setup, #steps) .mo-pc__visual.mo-pc__visual--lit { aspect-ratio: 1; }
  #pricing .faq__item:nth-child(n+3), .footer__lede { display: none; }
  #features .ui-chat__day { display: none; }
  #features .stage { --fade-h: 40px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  main > section#setup[data-moment]:not(.is-live), main > section#steps[data-moment]:not(.is-live) { height: auto; min-height: 100svh; }
  #pricing .faq__item:nth-child(n+4) { display: none; }
}
#setup .mo-pc__visual--lit > .ui { width: min(100%, 420px); }
#platforms .frame--split { aspect-ratio: 5 / 4; }
@media (max-width: 639px) { #platforms .frame--split { aspect-ratio: 1; } }
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app .ui-win__side { display: none; }
  .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
}
#pricing .ui-check.is-done .ui-check__label, .hero .ui-check.is-done .ui-check__label { text-decoration: none; color: var(--u-ink); }

/* ---- Rows that close a section: the marquee of real words, the figures ---- */
.row-marquee { margin-top: var(--s-8); }
.figures { margin-top: var(--s-2); }
.figures > div { grid-column: span 3; }
.wide-visual { margin-top: var(--s-7); }
.wide-visual > .frame { min-height: 0; }
.frame--shot .frag { width: auto; }
.frame--shot .frag img { width: auto; max-width: 100%; max-height: 520px; }
.frame--wide .frag img { max-height: 440px; }
.points--tight > li { padding: var(--s-2) 0; }
.row-marquee { overflow: clip; }
.hero--statement h1 { max-width: min(100%, 30ch); }
@media (max-width: 639px) { .frame--shot .frag img { max-height: 420px; } }
@media (max-width: 639px) {
  .frame--split.frame--shot { --ratio: 64%; }
  .plan ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-3); }
  .plan li { font-size: var(--t-small); }
}
#code .code { padding: var(--s-6); font-size: 15px; line-height: 1.7; }
#code .plats { margin-top: var(--s-8); }
#code .plats a { min-height: 72px; }
@media (max-width: 639px) { #code .plats > li { grid-column: span 6; } #code .plats a { grid-template-columns: auto 1fr; } #code .plats .m-arrow { display: none; } }
.guides { row-gap: var(--s-7); }
@media (max-width: 639px) {
  .frame--shot .frag img { max-height: 360px; }
  .plan > p:nth-of-type(1) { display: none; }
}
@media (max-width: 639px) { .guides { row-gap: var(--s-5); } }
.plan__flag { margin: 0 0 calc(-1 * var(--s-3)); } .plans-head { margin-bottom: var(--s-7); align-items: end; } .plans-head .ui-checks { max-width: 420px; margin-left: auto; }
.questions-head { margin-bottom: var(--s-7); } .questions-head .ui-checks { max-width: 440px; }
#agents .mo-wh__text { font-size: var(--t-h3); line-height: 1.3; }
@media (max-width: 1023px) { .nav.is-open .nav__links { padding-top: var(--s-5); } }
.guide ol { padding-left: 0; list-style-position: inside; }
.frame--code { padding: 0; border: 0; background: none; display: block; }
@media (max-width: 639px) { .code { white-space: pre-wrap; word-break: break-word; } }
.install-code mark { background: none; color: inherit; font-weight: 500; } .install-code { max-width: 100%; }
.install-code .ui-code__pre, .install-code .ui-code__ln { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 639px) { #questions .faq > .faq__item { padding: 20px 0; } }
@media (max-width: 639px) { #write textarea { min-height: 220px; } #write .points > li { padding: var(--s-5) 0; } }
/* a capture hero: the panel is exactly as tall as the words beside it, and the capture fits inside it whole */
@media (min-width: 1024px) {
  .hero:not(.hero--tall) .hero-text.hero__grid:has(.shot) { grid-template-rows: auto; align-content: center; }
  .hero--split:not(.hero--tall) .hero__media:has(> .hero__stack > .shot) { align-self: stretch; container-type: size; }
  .hero:not(.hero--tall) .hero__stack:has(> .shot) { position: absolute; inset: 0; align-content: center; }
  .hero:not(.hero--tall) .hero__stack > .shot .frag img { max-height: calc(100cqh - 2 * var(--s-5)); }
}
.crumb { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: baseline; margin-bottom: var(--s-4); }
.legal li + li { margin-top: var(--s-2); }
.frame--wide .frag img { max-height: min(440px, 100svh - 420px); }
.mo-pc__visual:has(> .frag) { display: grid; place-items: center; padding: var(--s-4); }
.mo-pc__visual > .frag { width: auto; height: 100%; min-height: 0; }
.mo-pc__visual > .frag img { width: auto; height: 100%; max-width: 100%; object-fit: contain; box-shadow: none; }

/* ---- API docs (/docs/, generated by src/docs.ts from docs/api): the sidebar of pages and sections on the left,
   the reference on the right; each method's text beside its code from 1280 px. Rules and space, no cards. ---- */
main > section.docs { height: auto; min-height: 100svh; }
.docs__wrap { display: grid; grid-template-columns: 216px minmax(0, 1fr); column-gap: var(--s-8); align-items: start; }
main > section.docs > .wrap.docs__wrap { display: grid; height: auto; }
.docs__main { min-width: 0; }
.docs__head { padding-bottom: var(--s-7); border-bottom: 1px solid var(--line); }
.docs__head h1 { font-size: var(--t-h2); margin-top: var(--s-3); }
.docs__head .t-lead { margin-top: var(--s-4); max-width: 60ch; color: var(--muted); }
.docs__crumb { display: flex; gap: var(--s-3); align-items: baseline; color: var(--muted); }
.docs__crumb span, .docs-side__ver { font: 12px/1 var(--font-mono); padding: 4px 6px; border-radius: 4px; background: var(--surface); color: var(--ink); }
.docs__sec { padding-top: var(--s-8); scroll-margin-top: calc(var(--nav) + var(--s-4)); }
.docs__sec > h2 { font-size: var(--t-h3); margin-bottom: var(--s-5); }
.docs__sec + .docs__sec { margin-top: var(--s-6); border-top: 1px solid var(--line); }
.docs :is(h3, h4)[id], .op { scroll-margin-top: calc(var(--nav) + var(--s-4)); }

/* sidebar */
.docs-side { position: sticky; top: calc(var(--nav) + var(--s-5)); max-height: calc(100svh - var(--nav) - 2 * var(--s-5)); overflow-y: auto; overscroll-behavior: contain; padding: 2px 6px 2px 6px; margin-left: -6px; }
.docs-side__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); }
.docs-side__close, .docs__menu { display: none; }
.docs-side ul { list-style: none; margin: 0; padding: 0; }
.docs-side__pages > li + li { margin-top: 2px; }
.docs-side a { display: block; padding: 6px 0; color: var(--muted); text-decoration: none; font-size: var(--t-small); line-height: 1.35; }
.docs-side a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.docs-side__page { font-weight: 500; color: var(--ink) !important; }
.docs-side__page[aria-current="page"] { box-shadow: inset 2px 0 0 var(--ink); padding-left: var(--s-3); }
.docs-side__in { margin: var(--s-1) 0 var(--s-3) !important; padding-left: var(--s-3) !important; border-left: 1px solid var(--line); }
.docs-side__in a { padding: 4px 0; font-size: 13px; }
.docs-side__group a { color: var(--ink); font-weight: 500; padding-top: var(--s-3); }

/* prose and tables */
.prose { max-width: 72ch; }
.prose :is(p, ul, ol) { margin: 0 0 var(--s-4); line-height: 1.7; }
.prose li + li { margin-top: var(--s-2); }
.prose .t-h4, .prose h3 { font: 500 var(--t-card)/1.35 var(--font-text); letter-spacing: 0; margin: var(--s-6) 0 var(--s-3); }
.docs :not(pre) > code { font: 0.88em/1.4 var(--font-mono); padding: 1px 7px; -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 4px; background: var(--surface); overflow-wrap: anywhere; }
.tbl { max-width: 100%; overflow-x: auto; margin: 0 0 var(--s-5); }
.tbl table { border-collapse: collapse; font-size: var(--t-small); line-height: 1.5; min-width: 100%; }
.tbl :is(th, td) { padding: var(--s-2) var(--s-4) var(--s-2) 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl th { font-weight: 500; color: var(--muted); border-bottom-color: var(--line-strong); white-space: nowrap; }
.tbl td:first-child code { white-space: nowrap; overflow-wrap: normal; }
.fields { table-layout: fixed; width: 100%; }
.fields thead th:first-child { width: 42%; }
.fields tbody th { font-weight: 400; color: var(--ink); white-space: normal; border-bottom-color: var(--line); }
.fields tbody th > * { display: block; }
.fields tbody th code { width: fit-content; max-width: 100%; white-space: normal !important; overflow-wrap: anywhere !important; }
.fields__meta { margin-top: var(--s-1); color: var(--muted); }
.fields__req { color: var(--muted); }
.fields__req.is-req { color: var(--ink); font-weight: 500; }
.docs__main a:not([class]) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.docs__main a:not([class]):hover { text-decoration-thickness: 2px; }

/* one method */
.op { display: grid; gap: var(--s-5) var(--s-7); padding: var(--s-7) 0; border-top: 1px solid var(--line); }
.docs__sec > h2 + .op { border-top: 0; padding-top: 0; }
.op__text, .op__code { min-width: 0; }
.op h3 { font: 500 var(--t-h3)/1.25 var(--font-display); letter-spacing: var(--display-tracking); margin: 0; }
.op__anchor { color: inherit; text-decoration: none; }
.op__anchor:hover { text-decoration: underline; text-underline-offset: 4px; }
.op__route { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.op__route code { font: 14px/1.4 var(--font-mono) !important; background: none !important; padding: 0 !important; overflow-wrap: anywhere; }
.verb { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 4px; border: 1px solid var(--ink); font: 500 12px/1 var(--font-mono); letter-spacing: 0.04em; }
.op__sum { margin-top: var(--s-4); font-size: var(--t-lead); line-height: 1.5; max-width: 60ch; }
.op__who { margin-top: var(--s-3); color: var(--muted); font-size: var(--t-small); }
.op__who .t-label { color: var(--ink); margin-right: var(--s-2); }
.op__desc { margin-top: var(--s-4); max-width: 68ch; }
.op__desc :is(p, ul) { margin: 0 0 var(--s-3); line-height: 1.7; }
.op__desc li + li { margin-top: var(--s-2); }
.op h4 { font: 500 var(--t-body)/1.4 var(--font-text); margin: var(--s-6) 0 var(--s-3); }
.op__codes { list-style: none; margin: 0; padding: 0; font-size: var(--t-small); line-height: 1.5; }
.op__codes li { padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.op__codes li > code:first-child { font-weight: 500; margin-right: var(--s-1); }
.op__code { display: grid; gap: var(--s-4); align-content: start; }
.op__empty { color: var(--muted); }
@media (min-width: 1280px) {
  .op { grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); }
  .op__code { position: sticky; top: calc(var(--nav) + var(--s-5)); }
}

/* code panels: the install code's navy, a copy button in the head */
.cb { border-radius: var(--r-md); background: #0e1a2b; color: #e8edf5; overflow: hidden; margin: 0 0 var(--s-4); max-width: 100%; }
.op__code .cb { margin: 0; }
.cb__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 6px 6px 6px var(--s-4); border-bottom: 1px solid #24324a; font: 500 12px/1 var(--font-text); color: #b7c2d3; }
.cb__copy { min-height: 32px; padding: 0 var(--s-3); border: 1px solid #3a4a66; border-radius: 6px; background: transparent; color: #e8edf5; font: 500 12px/1 var(--font-text); cursor: pointer; }
.cb__copy:hover { background: #1c2738; }
.cb__copy:focus-visible, .cb__pre:focus-visible { outline: 2px solid #8fb0ff; outline-offset: 2px; }
.cb__pre { margin: 0; padding: var(--s-4); overflow: auto; max-height: 560px; font: 13px/1.6 var(--font-mono); white-space: pre; tab-size: 2; }
.cb__pre code { font: inherit; background: none; padding: 0; color: inherit; }
.cb .tk { color: #9cc2ff; }
.cb .ts { color: #b9e4c4; }

/* phones and tablets: the sidebar is a full-height sheet behind a "Docs menu" bar */
@media (max-width: 1023px) {
  .docs__wrap { grid-template-columns: minmax(0, 1fr); }
  .docs__menu { position: sticky; top: var(--nav); z-index: 20; display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 48px; margin-bottom: var(--s-5);
    padding: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 500 var(--t-small)/1 var(--font-text); cursor: pointer; }
  .docs__menu-here { margin-left: auto; color: var(--muted); font-weight: 400; }
  .docs-side { display: none; }
  .docs-side.is-open { display: block; position: fixed; inset: var(--nav) 0 0 0; z-index: 60; max-height: none; margin: 0; padding: var(--s-4) var(--gut) var(--s-8); background: var(--bg); }
  .docs-side.is-open .docs-side__head { position: sticky; top: calc(-1 * var(--s-4)); margin: calc(-1 * var(--s-4)) 0 var(--s-4); padding: var(--s-4) 0; background: var(--bg); border-bottom: 1px solid var(--line); }
  .docs-side__close { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: auto; border: 0; background: none; color: var(--ink); cursor: pointer; }
  .docs-side.is-open .docs-side__page { font: var(--display-weight) 28px/1.2 var(--font-display); letter-spacing: var(--display-tracking); padding: 10px 0; }
  .docs-side.is-open .docs-side__page[aria-current="page"] { padding-left: var(--s-4); box-shadow: inset 3px 0 0 var(--ink); }
  .docs-side.is-open .docs-side__in a { font-size: var(--t-body); padding: 8px 0; }
  .docs-side.is-open .docs-side__group a { padding-top: var(--s-4); }
  .docs__head { padding-bottom: var(--s-6); }
}
@media (max-width: 639px) {
  .docs__head h1 { font-size: var(--t-h2); }
  .op__sum { font-size: var(--t-body); }
  .cb__pre { font-size: 12px; }
}
/* Chromium leaves a wrapped code span's cloned end padding out of the line width: room for it inside the paragraph */
.docs__main :is(.prose, .op__desc) :is(p, li) { padding-right: 8px; }
.docs__main .tbl table:not(.fields) td code { overflow-wrap: normal !important; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose ul, .op__desc ul { list-style: disc; padding-left: 1.2em; }
/* phones: a guide's wide table keeps readable columns and scrolls sideways in its own box */
@media (max-width: 639px) { .prose .tbl table { min-width: 640px; } }

/* ---- Owner fix (2026-11-13, home at 1920/80%): the statement, the feature tiles, the platforms band and pricing are as tall as
   what they hold (the section's --padt/--padb kept), not a screen each; from 640 px (phones keep their screens) ---- */
@media (min-width: 640px) {
  main > section:is(#visitors, #features, #platforms, #pricing) { height: auto; min-height: 0; }
  main > section#features > .wrap { display: flex; flex-direction: column; row-gap: var(--s-6); }
  /* each tile's fragment sits whole in the middle of its panel; the row's two panels share the taller one's height */
  #features .panel { min-height: 0; display: flex; }
  #features .stage { position: relative; inset: auto; flex: 1 1 auto; display: grid; place-items: center; padding: var(--s-7) var(--s-6); -webkit-mask: none; mask: none; }
  #features .stage > .fit { position: relative; inset: auto; width: 100%; }
  /* the new-chat alert hangs under the settings window instead of slicing its last row */
  #features .stage:has(> .at-over) { padding-bottom: 104px; }
}
/* the agents card: a real UI piece at the column's width, its words at the page's small and body sizes, the names
   never struck through (they are the team, not done tasks) */
.ui-checks.mlc-team { width: 100%; padding-bottom: var(--s-2); }
.mlc-team .ui-checks__head { height: auto; min-height: 56px; flex-wrap: wrap; column-gap: var(--s-3); padding: var(--s-3) var(--s-5); }
.mlc-team :is(.ui-title, .ui-meta) { font-size: var(--t-small); }
.mlc-team .ui-title { font-weight: 500; }
.mlc-team .ui-check { height: 48px; padding: 0 var(--s-5); font-size: var(--t-body); line-height: 24px; }
.mlc-team .ui-check__box { width: 20px; height: 20px; }
.mlc-team .ui-check .ui-check__label { color: var(--u-ink); }
.mlc-team .ui-check__label::after { display: none; }