/* 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) and the words are centred against it. On desktop the hero is as tall as
   that pair (owner, 2026-11-14: no screen-filling white above and below it), see the section rhythm below. ---- */
.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 sits in its
   middle when shorter (no bare gradient under it, 412x915), else 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: safe center; 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 ---- */
@media (max-width: 639px) { #write textarea { min-height: 220px; } }
.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; }

/* ---- 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; }
  #features .ui-chat__day { display: none; }
  #features .stage { --fade-h: 40px; }
}
#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 ---- */
.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; }
.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 li { font-size: var(--t-small); }
}
#code .code { padding: var(--s-6); font-size: 15px; line-height: 1.7; }
@media (max-width: 639px) {
  .frame--shot .frag img { max-height: 360px; }
}
.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; }
@media (max-width: 1023px) { .nav.is-open .nav__links { padding-top: var(--s-5); } }
.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; } }
/* 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); }

/* ---- API docs (/docs/, generated by src/docs.ts from docs/api), laid out like LiveChat's developer docs: a docs bar under the site nav (Guides / API reference, the
   version, search), a grey sidebar at the window's left edge (the API picker, groups, one entry per method with its
   verb), then either an article with "On this page" or a method with its code column. ---- */
main > section.docs { height: auto; padding: var(--nav) 0 0; }
html:has(section.docs) { scroll-padding-top: calc(var(--nav) + 48px + var(--s-5)); }
.docs { --side: 300px; --dbar: 48px; --d-ink2: color-mix(in oklab, var(--ink) 82%, var(--bg)); }
/* anchors land under the docs bar by the html scroll padding alone (a scroll-margin on top of it doubled the offset) */

/* the docs header (no marketing nav, as on LiveChat's developer docs): brand and "Docs", the API version, search in
   the middle, sign in and trial on the right; it spans the window so the logo sits over the sidebar */
html:has(.dnav) { --nav: 64px; }
.dnav { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--nav); background: var(--bg); border-bottom: 1px solid var(--line); }
.dnav__in { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-5); height: 100%; padding: 0 var(--s-5); }
.dnav__brand { display: flex; align-items: center; gap: var(--s-3); }
.dnav__logo img { display: block; width: auto; height: 36px; }
.dnav__docs { padding-left: var(--s-3); border-left: 1px solid var(--line-strong); font: 500 16px/24px var(--font-text); color: var(--ink); text-decoration: none; }
.dnav__docs:hover { color: var(--action); }
.dnav__search { justify-self: center; width: min(560px, 100%); height: 40px; }
.dnav__actions { display: flex; align-items: center; gap: var(--s-5); }
.dnav__link { font: 500 15px/20px var(--font-text); color: var(--ink); text-decoration: none; }
.dnav__link:hover { color: var(--action); }
.dnav :focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.dverp { position: relative; }
.dverp__btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); font: 400 13px/20px var(--font-text); color: var(--muted); cursor: pointer; }
.dverp__btn b { font-weight: 600; color: var(--ink); }
.dverp__btn:hover { border-color: var(--ink); }
.dverp__btn .chev { width: 12px; height: 12px; transition: transform 0.15s; }
.dverp__btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dverp__list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 2; width: 260px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); box-shadow: 0 16px 40px -12px rgba(14, 26, 43, 0.22); }
.dverp__item { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 6px; background: color-mix(in oklab, var(--ink) 6%, transparent); font: 400 14px/20px var(--font-text); color: var(--ink); text-decoration: none; }
.dverp__item span { font-size: 12px; color: var(--muted); }
.dverp__note { margin: 6px 10px 4px; font: 400 12px/18px var(--font-text); color: var(--muted); }
.dverp__note a { color: var(--action); }
@media (max-width: 1023px) {
  .dnav__in { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); padding: 0 var(--s-4); }
  .dverp { display: none; }
  .dnav__search { justify-self: end; width: min(320px, 100%); }
}
@media (max-width: 639px) {
  html:has(.dnav) { --nav: 56px; }
  .dnav__in { padding: 0 var(--s-2) 0 var(--s-4); }
  .dnav__logo img { height: 30px; }
  .dnav__docs { font-size: 15px; }
  .dnav__search { width: 44px; height: 44px; padding: 0; justify-content: center; border-color: transparent; }
  .dnav__search .dbar__search-t, .dnav__search kbd, .dnav__link { display: none; }
  .dnav__actions .btn { min-height: 40px; padding-inline: 14px; font-size: 14px; }
  .dnav__actions .btn .m-arrow { display: none; }
}
@media (max-width: 359px) { .dnav__docs { display: none; } }

/* the docs footer: one line */
.dfoot { border-top: 1px solid var(--line); }
.dfoot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); padding: var(--s-5); font: 400 13px/20px var(--font-text); color: var(--muted); }
.dfoot__in p { margin: 0; }
.dfoot__in nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.dfoot__in a { color: var(--muted); text-decoration: none; }
.dfoot__in a:hover { color: var(--ink); text-decoration: underline; }
.dfoot__in a:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
@media (min-width: 1024px) { body:has(.docs__body) .dfoot { margin-left: var(--side, 300px); } }

/* the docs bar */
.dbar { position: sticky; top: var(--nav); z-index: 30; height: var(--dbar); background: var(--bg); border-bottom: 1px solid var(--line); }
.dbar__in { display: flex; align-items: center; gap: var(--s-5); height: 100%; padding: 0 var(--s-5); }
.dbar__tabs { display: flex; align-self: stretch; gap: var(--s-3); margin-left: -6px; }
.dbar__tab { display: flex; align-items: center; padding: 0 6px; font: 500 14px/20px var(--font-text); color: var(--muted); text-decoration: none; box-shadow: inset 0 -2px 0 transparent; }
.dbar__tab:hover { color: var(--ink); }
.dbar__tab[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.dbar__ver { margin-left: auto; font: 400 13px/20px var(--font-text); color: var(--muted); }
.dbar__ver b { font-weight: 500; color: var(--ink); }
.dbar__search { display: flex; align-items: center; gap: var(--s-2); width: 320px; height: 36px; padding: 0 var(--s-2) 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--muted); font: 400 14px/20px var(--font-text); cursor: pointer; text-align: left; }
.dbar__search:hover { border-color: var(--ink); color: var(--ink); }
.dbar__search-t { flex: 1; }
.dbar__search kbd { min-width: 20px; padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: 4px; font: 400 12px/14px var(--font-mono); color: var(--muted); text-align: center; }
.dbar__menu, .dbar__crumb { display: none; }
.dver { display: inline-block; padding: 2px 6px; border-radius: 4px; background: var(--surface); font: 400 12px/16px var(--font-mono); color: var(--ink); vertical-align: 1px; }

/* the sidebar */
.docs__body { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); align-items: start; }
.dside { position: sticky; top: calc(var(--nav) + var(--dbar)); height: calc(100svh - var(--nav) - var(--dbar)); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-5) var(--s-5) var(--s-7); background: var(--surface); border-right: 1px solid var(--line); }
.dside__sheet-head, .dside__tabs { display: none; }
.dside__h { margin: var(--s-6) 0 var(--s-2); padding: 0 var(--s-3); font: 600 14px/20px var(--font-text); color: var(--ink); }
.dpick + .dside__h, .dside > .dside__h:first-of-type { margin-top: var(--s-5); }
.dside__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dside__list a { display: flex; align-items: center; gap: var(--s-2); min-height: 32px; padding: 6px var(--s-3); border-radius: 8px; font: 400 14px/20px var(--font-text); color: var(--d-ink2); text-decoration: none; }
.dside__list a:hover { background: color-mix(in oklab, var(--ink) 5%, transparent); color: var(--ink); }
.dside__list a[aria-current="page"] { background: color-mix(in oklab, var(--ink) 9%, transparent); color: var(--ink); font-weight: 600; }
.dside a:focus-visible, .dpick__btn:focus-visible, .dbar :focus-visible, .dpager__a:focus-visible, .dtoc a:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

/* verbs: one width, so the method names line up */
.verb { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; height: 18px; padding: 0 6px; border-radius: 4px; font: 500 10px/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.verb--get { background: #e2f3e8; color: #0b5d33; }
.verb--post { background: #e5ecff; color: #1440b8; }
.verb--put, .verb--patch { background: #fdefd9; color: #7a4100; }
.verb--delete { background: #fde7e6; color: #a8231a; }

/* the API picker */
.dpick { position: relative; }
.dpick__btn, .dpick__list a { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: 10px var(--s-3); text-align: left; text-decoration: none; color: var(--ink); }
.dpick__btn { min-height: 56px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); cursor: pointer; }
.dpick__btn:hover { border-color: var(--ink); }
.dpick__btn .ic { margin-left: auto; flex: none; transition: transform var(--dur) var(--ease); }
.dpick__btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.dpick__now, .dpick__list a { display: grid; gap: 2px; }
.dpick__label { font: 600 15px/20px var(--font-text); }
.dpick__blurb { font: 400 12px/16px var(--font-text); color: var(--muted); }
.dpick__list { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; list-style: none; margin: 0; padding: 6px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); box-shadow: 0 12px 32px -12px rgba(14, 26, 43, 0.28); }
.dpick__list a { border-radius: 6px; }
.dpick__list a:hover { background: var(--surface); }
.dpick__list a[aria-current] { background: var(--surface); }
.dpick__list a[aria-current] .dpick__label { font-weight: 600; }

/* the page: article + "On this page", or method + code */
.dmain { min-width: 0; padding: var(--s-7) var(--s-8) var(--s-9); }
.dmain--guide { display: grid; grid-template-columns: minmax(0, 768px) 224px; justify-content: center; column-gap: var(--s-9); align-items: start; }
.dart { min-width: 0; }
.dhead, .m__head > .d-eyebrow { margin: 0; }
.d-eyebrow { font: 600 12px/20px var(--font-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.docs h1 { margin-top: var(--s-2); font: 500 36px/44px var(--font-display); letter-spacing: -0.015em; color: var(--ink); }
.d-lead { margin-top: var(--s-3); font: 400 18px/28px var(--font-text); color: var(--muted); max-width: 68ch; }
.dhead { padding-bottom: var(--s-2); }
.dsec { padding-top: var(--s-7); }
.dsec > h2 { margin-bottom: var(--s-3); font: 500 24px/32px var(--font-display); letter-spacing: -0.01em; }
.d-text :is(p, ul, ol) { margin: 0 0 var(--s-4); font: 400 16px/27px var(--font-text); color: var(--d-ink2); }
.d-text { margin-top: var(--s-5); }
.d-text li + li { margin-top: var(--s-2); }
.prose { max-width: 768px; }
.prose :is(p, ul, ol) { margin: 0 0 var(--s-4); font: 400 16px/27px var(--font-text); color: var(--d-ink2); }
.prose li + li { margin-top: var(--s-2); }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose ul, .d-text ul { list-style: disc; padding-left: 1.2em; }
.prose ul.d-links { list-style: none; padding: 0; }
.prose .t-h4, .prose h3 { font: 600 18px/26px var(--font-text); letter-spacing: 0; margin: var(--s-6) 0 var(--s-3); color: var(--ink); }
.docs :not(pre) > code { font: 400 0.875em/1.5 var(--font-mono); padding: 1px 7px; -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 5px; background: var(--surface); color: var(--ink); overflow-wrap: anywhere; }
.dmain a:not([class]) { color: var(--action); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.dmain a:not([class]):hover { text-decoration-thickness: 2px; }
.dmain a:not([class]) > code { color: inherit; }
.dmain .dtoc a { color: var(--muted); text-decoration: none; }
.dmain .dtoc a:hover, .dmain .dtoc a.is-on { color: var(--ink); }
/* Chromium leaves a wrapped code span's cloned end padding out of the line width: room for it inside the paragraph */
.dmain :is(.prose, .d-text) :is(p, li) { padding-right: 8px; }

/* tables: a hairline box with rounded corners; wide ones scroll inside it */
.tbl { max-width: 100%; overflow-x: auto; margin: var(--s-4) 0 var(--s-5); border: 1px solid var(--line-strong); border-radius: 12px; }
.tbl table { width: 100%; border-collapse: collapse; font: 400 14px/24px var(--font-text); color: var(--d-ink2); }
.tbl :is(th, td) { padding: 10px var(--s-4); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl tbody tr:last-child > :is(th, td) { border-bottom: 0; }
.tbl thead th { font-weight: 500; color: var(--muted); white-space: nowrap; }
.tbl td:first-child code { white-space: nowrap; overflow-wrap: normal; }
.tbl table:not(.fields) td code { overflow-wrap: normal; }
.fields { table-layout: fixed; }
.fields thead th:first-child { width: 46%; }
.fields tbody th { font-weight: 400; color: var(--ink); }
.fields tbody th code { max-width: 100%; white-space: normal !important; overflow-wrap: anywhere !important; }
.fields .chip { max-width: 100%; overflow-wrap: anywhere; }
.fields td, .fields td code { overflow-wrap: anywhere !important; }
.fields__meta { overflow-wrap: anywhere; margin-top: var(--s-1); color: var(--muted); font: 400 12px/18px var(--font-mono); }
.fields__req { color: var(--muted); font-size: 12px; }
.fields__req.is-req { color: #a8231a; }
.spec { table-layout: fixed; }
.spec th { width: 34%; font-weight: 500; color: var(--ink); }
.spec td code { white-space: normal !important; overflow-wrap: anywhere !important; }
.spec td > code:only-child { padding: 0; background: none; }

/* one method: text left, code right (sticky) from 1280 px; LiveChat's method layout */
.m { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 520px); grid-template-areas: "head code" "body code"; justify-content: center; column-gap: var(--s-7); align-items: start; }
.m__head { grid-area: head; min-width: 0; }
.m__code { grid-area: code; min-width: 0; position: sticky; top: calc(var(--nav) + var(--dbar) + var(--s-5)); display: grid; gap: var(--s-4); }
.m__body { grid-area: body; min-width: 0; margin-top: var(--s-7); }
.m__body > .m__sec:first-child { padding-top: 0; }
.m__ep { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); padding: 6px 6px 6px var(--s-3); min-height: 52px; border: 1px solid var(--line-strong); border-radius: 12px; }
.m__ep-url { display: flex; align-items: center; gap: var(--s-3); flex: 1; min-width: 0; margin: 0; }
.m__try { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 38px; padding: 0 var(--s-4); border: 0; border-radius: 8px; background: var(--action); color: var(--action-ink, #fff); font: 600 14px/1 var(--font-text); cursor: pointer; }
.m__try:hover { background: color-mix(in oklab, var(--action) 86%, #000); }
.m__try:active { transform: translateY(1px); }
.m__try:focus-visible, .dcopy:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.m__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.dcopy { flex: none; min-height: 32px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--ink); font: 500 13px/1 var(--font-text); cursor: pointer; }
.dcopy:hover { border-color: var(--ink); }
.m__ep code { font: 400 14px/20px var(--font-mono) !important; background: none !important; padding: 0 !important; overflow-wrap: anywhere; }
.m__ep .verb { height: 24px; font-size: 12px; min-width: 48px; }
.m__h { font: 600 18px/26px var(--font-text); color: var(--ink); }
.m__sec { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 0; padding-top: var(--s-7); }
.m__sec > .m__h { padding-bottom: var(--s-3); }
.m__sec > :not(.m__h, .m__type), .m__sec > .m__h:not(:has(+ .m__type)) { grid-column: 1 / -1; }
.m__sec > .m__h, .m__sec > .m__type { border-bottom: 1px solid var(--line-strong); padding-bottom: var(--s-3); align-self: stretch; }
.m__type { padding-left: var(--s-4); font: 400 12px/26px var(--font-mono); color: var(--muted); text-align: right; }
.m__okdesc { margin-top: var(--s-4); font: 400 14px/24px var(--font-text); color: var(--d-ink2); }
.m__okdesc:empty { display: none; }
.flist { list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.flist > li { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.flist__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s-2); }
.docs .flist__name { padding: 0; background: none; font: 600 14px/20px var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
.chip { display: inline-block; min-height: 20px; padding: 1px 8px; border-radius: 5px; background: var(--surface); font: 400 12px/18px var(--font-mono); color: var(--muted); }
.chip a { color: var(--action); text-decoration: underline; text-underline-offset: 2px; }
.chip--req { background: #fde7e6; color: #a8231a; }
.chip--link { color: var(--action); text-decoration: none; margin: 2px 0; }
.chip--link:hover { text-decoration: underline; }
.flist__desc { margin-top: var(--s-2); font: 400 14px/24px var(--font-text); color: var(--d-ink2); }
.flist__desc p { margin: 0; }
.m__codes { list-style: none; margin: var(--s-3) 0 0; padding: 0; font: 400 14px/24px var(--font-text); color: var(--d-ink2); }
.m__codes li { padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.status { display: inline-block; min-width: 36px; font: 600 13px/24px var(--font-mono); color: var(--ink); }
.t-muted { color: var(--muted); }
.m__nobody { padding: var(--s-4); border: 1px solid var(--line-strong); border-radius: 12px; font: 400 14px/20px var(--font-text); color: var(--muted); }
@media (max-width: 1279px) {
  .m { grid-template-columns: minmax(0, 720px); grid-template-areas: "head" "code" "body"; }
  .m__code { position: static; margin-top: var(--s-6); }
  .dmain--guide { grid-template-columns: minmax(0, 768px); }
  .dtoc { display: none; }
}

/* code panels: the install code's navy */
.cp { border-radius: 12px; background: #0e1a2b; color: #e8edf5; overflow: hidden; max-width: 100%; }
.cp--inline { margin: var(--s-4) 0 var(--s-5); }
.cp__head { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 0 6px 0 var(--s-4); border-bottom: 1px solid #24324a; font: 500 12px/16px var(--font-text); color: #b7c2d3; }
.cp__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cp__tabs { display: flex; gap: 2px; margin-left: auto; }
.cp__tab { min-height: 32px; padding: 0 var(--s-3); border: 0; border-radius: 6px; background: transparent; color: #b7c2d3; font: 500 12px/16px var(--font-text); cursor: pointer; }
.cp__tab[aria-selected="true"] { background: #24324a; color: #ffffff; }
.cp__tab--one { display: inline-flex; align-items: center; margin-left: auto; cursor: default; }
.cp__copy { flex: none; 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; }
.cp__copy:hover, .cp__tab:hover { background: #1c2738; color: #ffffff; }
.cp__tab:focus-visible, .cp__copy:focus-visible, .cp__pre:focus-visible { outline: 2px solid #8fb0ff; outline-offset: -2px; }
.cp__pre { margin: 0; padding: var(--s-4); overflow: auto; max-height: 560px; font: 400 13px/1.65 var(--font-mono); white-space: pre; tab-size: 2; }
.m__code .cp__pre { max-height: min(520px, calc((100svh - var(--nav) - var(--dbar) - 200px) / 2)); }
.m__code .cp--req .cp__pre { max-height: min(420px, calc((100svh - var(--nav) - var(--dbar) - 200px) / 2)); }
.cp__pre code { font: inherit; background: none; padding: 0; color: inherit; }
.cp .tk { color: #9cc2ff; }
.cp .ts { color: #b9e4c4; }

/* "On this page" */
.dtoc { position: sticky; top: calc(var(--nav) + var(--dbar) + var(--s-7)); max-height: calc(100svh - var(--nav) - var(--dbar) - 2 * var(--s-7)); overflow-y: auto; }
.dtoc__h { font: 600 13px/20px var(--font-text); color: var(--ink); margin-bottom: var(--s-2); }
.dtoc ul { list-style: none; margin: 0; padding: 0; }
.dtoc a { display: block; padding: 5px 0; font: 400 13px/20px var(--font-text); color: var(--muted); text-decoration: none; }
.dtoc .dtoc__sub a { padding-left: var(--s-3); font-family: var(--font-mono); font-size: 12px; }
.dtoc a:hover { color: var(--ink); }
/* the current section: ink and medium weight, no side stripe (owner, 2026-11-14) */
.dtoc a.is-on { color: var(--ink); font-weight: 500; }

/* webhook events */
.hook { padding-top: var(--s-6); margin-top: var(--s-6); border-top: 1px solid var(--line); }
.hook:first-of-type { margin-top: var(--s-3); border-top: 0; padding-top: 0; }
.hook > h3 code { font: 500 20px/28px var(--font-mono) !important; padding: 2px 8px !important; }
.hook > h4 { margin: var(--s-5) 0 0; font: 600 16px/24px var(--font-text); color: var(--ink); }
.hook > .prose { margin-top: var(--s-3); }

/* previous and next */
.dpager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-8); }
.dpager__a { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line-strong); border-radius: 12px; text-decoration: none; color: var(--ink); }
.dpager__a:hover { border-color: var(--ink); }
.dpager__a--next { grid-column: 2; text-align: right; justify-items: end; }
.dpager__dir { display: inline-flex; align-items: center; gap: 4px; font: 400 13px/20px var(--font-text); color: var(--muted); }
.dpager__t { font: 500 15px/22px var(--font-text); }

/* search */
.dsearch { position: fixed; inset: 0; z-index: 80; display: grid; align-items: start; justify-items: center; padding: 12vh var(--s-4) var(--s-4); background: rgba(14, 26, 43, 0.42); }
.dsearch[hidden] { display: none; }
.dsearch__box { width: min(640px, 100%); max-height: 76vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-radius: 12px; background: var(--bg); box-shadow: 0 24px 64px -16px rgba(14, 26, 43, 0.45); overflow: hidden; }
.dsearch__field { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-3) 0 var(--s-4); border-bottom: 1px solid var(--line); color: var(--muted); }
.dsearch__q { flex: 1; min-width: 0; height: 56px; border: 0; background: none; font: 400 16px/24px var(--font-text); color: var(--ink); outline: none; }
.dsearch__q::placeholder { color: var(--muted); }
.dsearch__field:focus-within { box-shadow: inset 0 -2px 0 var(--action); }
.dsearch__x { flex: none; min-height: 32px; padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg); font: 400 12px/1 var(--font-mono); color: var(--muted); cursor: pointer; }
.dsearch__x:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.dsearch__r { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.dsearch__r:empty { display: none; }
.dsearch__r a { display: grid; gap: 2px; padding: 10px var(--s-3); border-radius: 8px; text-decoration: none; color: var(--ink); }
.dsearch__r [aria-selected="true"] a, .dsearch__r a:hover { background: var(--surface); }
.dsearch__t { font: 500 15px/22px var(--font-text); }
.dsearch__w { font: 400 12px/18px var(--font-text); color: var(--muted); }
.dsearch__none { padding: var(--s-5) var(--s-4); font: 400 14px/20px var(--font-text); color: var(--muted); }

/* phones and tablets: the docs bar carries the menu button, where you are, and search; the sidebar is a full-height sheet */
@media (max-width: 1023px) {
  .docs__body { grid-template-columns: minmax(0, 1fr); }
  .dbar__in { gap: var(--s-2); padding: 0 var(--s-2) 0 calc(var(--gut) - 12px); }
  .dbar__tabs, .dbar__ver { display: none; }
  .dbar__menu { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); cursor: pointer; }
  .dbar__crumb { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font: 400 14px/20px var(--font-text); color: var(--muted); white-space: nowrap; }
  .dbar__crumb span { flex: none; }
  .dbar__crumb b { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
  .dbar__crumb .ic { flex: none; }
  .dbar__search { width: 44px; height: 44px; justify-content: center; padding: 0; border: 0; }
  .dbar__search-t, .dbar__search kbd { display: none; }
  .dside { display: none; }
  .dside.is-open { display: block; position: fixed; inset: var(--nav) 0 0 0; z-index: 60; height: auto; padding: 0 var(--gut) var(--s-8); background: var(--bg); border: 0; }
  .dside.is-open .dside__sheet-head { display: flex; align-items: center; position: sticky; top: 0; z-index: 2; height: 56px; margin: 0 calc(-1 * var(--gut)) var(--s-4); padding: 0 calc(var(--gut) - 12px) 0 var(--gut); background: var(--bg); border-bottom: 1px solid var(--line); }
  .dside__title { font: 600 16px/24px var(--font-text); }
  .dside__close { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: auto; border: 0; background: none; color: var(--ink); cursor: pointer; }
  .dside.is-open .dside__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-bottom: var(--s-4); }
  .dside__tab { display: grid; place-items: center; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; font: 500 15px/20px var(--font-text); color: var(--ink); text-decoration: none; }
  .dside__tab[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
  .dside.is-open .dside__list a { min-height: 44px; font-size: 16px; line-height: 24px; }
  .dside.is-open .dside__h { font-size: 15px; }
  .dmain { padding: var(--s-6) var(--gut) var(--s-8); }
}
@media (max-width: 639px) {
  .docs h1 { font-size: 30px; line-height: 38px; }
  .d-lead { font-size: 17px; line-height: 27px; }
  .dsec > h2 { font-size: 22px; line-height: 30px; }
  .cp__pre { font-size: 12px; }
  .dpager { grid-template-columns: minmax(0, 1fr); }
  .dpager__a--next { grid-column: 1; }
  .prose .tbl table { min-width: 560px; }
  .tbl--spec .spec, .tbl--spec { min-width: 0; }
  .spec th { width: 38%; }
  .dsearch { padding: var(--s-3); }
  .dsearch__box { max-height: calc(100svh - 2 * var(--s-3)); }
}
@media (prefers-reduced-motion: reduce) { .dpick__btn .ic { transition: none; } }

/* ---- The feature tiles from 640 px: each fragment whole in the middle of its panel (sections are content-sized everywhere, below) ---- */
@media (min-width: 640px) {
  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; }

/* ==== Owner decision (2026-11-13, phone review: "huge gaps, messy, inconsistent"): every section is as tall as what it
   holds, at every width, desktop too; the kit's one-/two-screen sections (--h, --hm, .g2, .g2m) are switched off here.
   One rhythm: the same padding above and below every section (96 desktop, 72 tablet, 48 phone), so two sections on one
   ground sit 192 / 144 / 96 apart and a band has the same air inside as outside. Both heroes are content-sized on
   desktop: the words start --hgap under the header and the hero ends --padb under its content (2026-11-14); a stacked
   split hero (tablet, phone) still fills the first screen, its panel taking what the words leave. No scroll moments
   (owner, same day): see the end. ==== */
:root { --padt: 96px; --padb: 96px; }
@media (min-width: 640px) and (max-width: 1023px) { :root { --padt: 72px; --padb: 72px; } }
@media (max-width: 639px) { :root { --padt: 48px; --padb: 48px; } }
html { scroll-padding-top: max(0px, var(--nav) - var(--padt) + var(--s-5)); }
main > :is(section, .section):not(.hero, .section--hero), footer.closing { height: auto; min-height: 0; }
main > :is(section, .section):is(.g2, .g2m) > :is(.wrap, .container), footer.closing:is(.g2, .g2m) > .wrap { display: flex; flex-direction: column; row-gap: var(--s-6); }
main > :is(section, .section) > .wrap > .fill, .group > .fill { flex: none; }
main > .hero--statement { height: auto; min-height: 0; padding-bottom: var(--padb); }
@media (min-width: 1024px) { main > .hero--split { height: auto; min-height: 0; padding-bottom: var(--padb); } }
footer.closing > .wrap { row-gap: var(--s-8); }
@media (max-width: 639px) { footer.closing > .wrap { row-gap: var(--s-7); } }
/* the home inbox: its own height now that the section no longer hands it a screen */
#inbox .app.ui { height: clamp(480px, 62svh, 640px); }
@media (max-width: 639px) { #inbox .app.ui { height: 480px; } }
.legal > :first-child { margin-top: 0; }
.legal > :last-child { margin-bottom: 0; }

/* ---- One button pair: the primary filled, the secondary outlined at the same height, at every width (the kit's
   "arrow" deal made the secondary an underlined text link; on a phone the kit turned it into one too) ---- */
html[data-buttons] .btn--secondary, html[data-buttons] .btn-row > .btn--secondary {
  background: var(--bg); border-color: var(--line-strong); text-decoration: none; padding-inline: var(--s-5); }
html[data-buttons] .btn--secondary:hover { background: color-mix(in oklab, var(--bg) 94%, var(--ink)); border-color: color-mix(in oklab, var(--ink) 35%, transparent); }
html[data-buttons] .btn--secondary::after { content: none; display: none; }
/* ---- One link style: underlined ink. A link standing on its own line ("See the install guides") carries the arrow; a
   link inside a sentence or a row never does (no "Privacy Policy →.") ---- */
:is(p, span, td, h3) > .link, .legal .link { display: inline; font-weight: 500; }
:is(p, span, td, h3) > .link::after, .legal .link::after { content: none; }
@media (max-width: 639px) { :is(p, span, td, h3) > .link { min-height: 0; } }
/* a split (words, then its picture or rows) stacked below 1024 px: the two parts 32 px apart, not the card gap */
@media (max-width: 1023px) { .grid.split { row-gap: var(--s-6); } }

/* ---- One row style (.points, .faq, .linkrows): a title, its lines 8 px under it, 24 px above and below, a 1 px rule ---- */
.points > li { gap: var(--s-2); padding: var(--s-5) 0; }
.points > li:first-child { padding-top: 0; }
.points--tight > li { padding: var(--s-3) 0; }
.faq > :is(.faq__item, details) { padding: var(--s-5) 0; }
.faq > :is(.faq__item, details):first-child { padding-top: 0; }
.points > li > .link { justify-self: start; margin-top: var(--s-1); }

/* ---- Contact: the form's end is the send button, then the privacy line under it ---- */
.cform__end { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.cform__end > p { color: var(--muted); max-width: 46ch; }
@media (max-width: 639px) { .cform__end > .btn { width: 100%; } }

/* ---- Footer below 1024 px: Product down the left, Solutions and Company stacked on the right (10 rows each side), the
   legal links across under them; no column ends over an empty half ---- */
@media (max-width: 1023px) {
  .closing__links > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); row-gap: var(--s-5); }
  .closing__links > .grid > .span-4 { grid-column: 1 / -1; }
  .closing__links .footer__col:nth-of-type(2) { grid-column: 1; grid-row: 2 / span 2; }
  .closing__links .footer__col:nth-of-type(3) { grid-column: 2; grid-row: 2; }
  .closing__links .footer__col:nth-of-type(4) { grid-column: 2; grid-row: 3; }
  .closing__links .footer__col:nth-of-type(5) { grid-column: 1 / -1; grid-row: 4; }
}

/* ---- Install guides: one row per platform (its mark, its name, a chevron), opening to a short numbered list; menu
   paths and buttons in one style (bold ink), code in mono ---- */
.guides { display: grid; border-top: 1px solid var(--line); align-content: start; }
.guide { border-bottom: 1px solid var(--line); }
.guide h3 { margin: 0; font: inherit; }
.guide__head { display: flex; align-items: center; gap: var(--s-4); width: 100%; min-height: 72px; padding: var(--s-3) 0; border: 0; background: none;
  color: var(--ink); font: 500 var(--t-card)/1.3 var(--font-text); text-align: left; cursor: pointer; }
.guide__head > span:not(.plat__mark) { flex: 1; }
.guide__head:hover > span:not(.plat__mark) { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.guide__chev { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur) var(--ease); }
.guide__head[aria-expanded="true"] .guide__chev { transform: rotate(180deg); }
.guide__body { display: grid; gap: var(--s-4); padding: 0 0 var(--s-6) calc(40px + var(--s-4)); }
.guide__note { color: var(--muted); font-size: var(--t-small); }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s-3); max-width: 56ch; }
.steps > li::before { content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface); font: 500 var(--t-small)/1 var(--font-text); color: var(--ink); }
.steps b { font-weight: 600; }
.steps code { font: 0.88em var(--font-mono); padding: 1px 6px; border-radius: 4px; background: var(--surface); }
@media (max-width: 639px) { .guide__body { padding-left: 0; } }
/* a tall hero on a tablet (pricing at 700): its capture fits the panel whole too, never cut at the panel's foot */
@media (min-width: 640px) and (max-width: 1023px) { .hero--tall .hero__stack > .shot .frag img { max-height: calc(100cqh - 2 * var(--s-5)); } }

/* ---- Review round 1 ---- */
/* a section heading in a side column is the page's h2 size, never the display size that breaks words (legal summary, legal index) */
:is(#summary-h, #docs-h) { font-size: var(--t-h2); line-height: 1.1; letter-spacing: var(--display-tracking); }
/* a legal table on a phone keeps readable columns and scrolls sideways in its own box */
@media (max-width: 639px) {
  .legal table { display: block; overflow: visible; }
  .legal table :is(thead) { display: none; }
  .legal table :is(tbody, tr, td) { display: block; }
  .legal table tr { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
  .legal table td { padding: 2px 0; border: 0; }
  .legal table td[data-label]::before { content: attr(data-label) ": "; font-weight: 500; }
}
/* the closing button: the label and its arrow together in the middle, like every other button */
.closing__cta .btn--xl { justify-content: center; gap: var(--s-3); }
/* "Most picked" sits in the card's corner, so the three plans' names and prices start on one line */
.plan { position: relative; }
.plan .plan__flag { position: absolute; top: var(--s-5); right: var(--s-5); margin: 0; }
/* figures under a paragraph get the same air as any other block */
.figures { margin-top: var(--s-5); }
/* ---- Review round 2 ---- */
/* two figures side by side, each caption 8 px under its number */
.figures .stack-1 { gap: var(--s-2); }
/* the install code fills its column */
.install-code { width: 100%; }
/* the plan flag on the title's line */
.plan .plan__flag { top: var(--c-pad, var(--s-5)); right: var(--c-pad, var(--s-5)); line-height: 1.3; font-size: var(--t-small); }
/* footer on a phone: every heading and link on one 44 px row grid across both columns, Legal in two columns */
@media (max-width: 639px) {
  .closing__links > .grid { row-gap: 0; }
  .closing__links > .grid > .span-4 { margin-bottom: var(--s-5); }
  .closing__links .footer__col h3 { display: flex; align-items: center; min-height: 36px; margin: 0 0 var(--s-2); }
  .closing__links .footer__col:nth-of-type(5) { margin-top: var(--s-5); }
  .closing__links .footer__col:nth-of-type(5) ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
}

/* ==== Owner decision (2026-11-13): no scroll moments. LiveChat and conventional SaaS sites (Intercom, Crisp) are the
   reference: content-sized sections, real product screens, one component system, calm motion. What moved is static:
   the hero panel is a still blue gradient (no WebGL), product fragments show their finished picture (main has
   data-ui-still), the step chapters are rows, the word marquees are lists, statements are plain h2s. ==== */
.hero--split .hero__media { background: radial-gradient(90% 70% at 0% 100%, #1857f6 0%, transparent 62%), radial-gradient(80% 70% at 100% 0%, #5d8dfa 0%, transparent 58%), linear-gradient(160deg, #e3ebfd, #c9d8fb); border-radius: var(--r-lg); overflow: clip; }
/* three steps: a rule above each, the words left (top-aligned) and the window on a light panel right; stacked on a phone */
.chapters { display: grid; gap: var(--s-7); }
.chapters__steps { list-style: none; margin: 0; padding: 0; display: grid; }
.chapters__step { display: grid; gap: var(--s-2) var(--gutter); padding: var(--s-6) 0; border-top: 1px solid var(--line); align-items: start; }
.chapters__step:last-child { padding-bottom: 0; }
.chapters__step h3 { font: 500 var(--t-lead)/1.3 var(--font-text); letter-spacing: -0.01em; }
.chapters__step p { max-width: 46ch; }
.chapters__visual { margin: var(--s-4) 0 0; display: grid; place-items: center; padding: clamp(var(--s-4), 3vw, var(--s-6)); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.chapters__visual > .ui { width: min(100%, 420px); }
.chapters__visual > .frag { width: auto; max-width: 100%; }
.chapters__visual > .frag img { width: auto; max-width: 100%; max-height: 420px; }
@media (min-width: 768px) {
  .chapters__step { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(100% / 12 + var(--gutter)); }
  .chapters__step > :is(h3, p) { grid-column: 1; }
  .chapters__step h3 { align-self: end; }
  .chapters__step > .chapters__visual { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .chapters__step:has(> .chapters__visual) { grid-template-rows: auto 1fr; }
}
/* a list of words (what else is included, report names, platforms): two columns on a phone, four on a desktop, hairlines */
.wordlist { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
.wordlist > li { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .wordlist { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ---- Review round 3 ---- */
.figures { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-8); }
.figures > div { grid-column: auto; }
#plans .grid { row-gap: var(--s-5); }
@media (max-width: 639px) {
  .closing__links .footer__col:nth-of-type(4) { margin-top: var(--s-5); }
  .closing__links .footer__col ul { align-items: start; }
}

/* the API docs end on the plain footer (no closing band): a hairline across the content column under the page's own
   foot, then one --padt to the links */
footer.closing--docs { padding-top: var(--s-5); }
footer.closing--docs .closing__links { border-top: 1px solid var(--line); padding-top: var(--padt); }


/* the page ends close under the footer's last line (the chat launcher floats over the corner, as on LiveChat) */
footer.closing { padding-bottom: calc(var(--s-7) + var(--bar)); }

/* the closing band's trial button is the hero's size, under the words (owner, 2026-11-14: the full-width one was too big) */
.closing__cta > .btn { align-self: start; }

/* the docs sidebar scrolls without a standing scrollbar: a thin one shows while the pointer is over it */
.dside { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.dside:hover, .dside:focus-within { scrollbar-color: color-mix(in oklab, var(--ink) 24%, transparent) transparent; }
.dside::-webkit-scrollbar { width: 8px; }
.dside::-webkit-scrollbar-thumb { border-radius: 4px; background: transparent; }
.dside:hover::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--ink) 24%, transparent); }

/* Try it: the method page's playground (docs-try.ts) */
.tryp { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--s-5); background: rgba(14, 26, 43, 0.48); }
.tryp__box { display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(1400px, 100%); height: min(900px, 100%); border-radius: 16px; background: var(--bg); box-shadow: 0 32px 80px -20px rgba(14, 26, 43, 0.45); overflow: hidden; }
.tryp__bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5); border-bottom: 1px solid var(--line); }
.tryp__name { display: flex; align-items: center; gap: var(--s-2); margin: 0; font: 600 16px/24px var(--font-text); color: var(--ink); white-space: nowrap; }
.tryp__name .verb { height: 24px; min-width: 48px; font-size: 12px; }
.tryp__url { min-width: 0; margin: 0; padding: 9px var(--s-3); border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); overflow-x: auto; white-space: nowrap; }
.tryp__url code { font: 400 13px/20px var(--font-mono); background: none; padding: 0; color: var(--ink); }
.tryp__send { gap: 8px; min-height: 40px; }
.tryp__x { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer; }
.tryp__x:hover { background: var(--surface); }
.tryp__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 0; }
.tryp__form { min-height: 0; overflow-y: auto; padding: var(--s-5); border-right: 1px solid var(--line); }
.tryp__out { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--s-4); min-height: 0; padding: var(--s-5); background: var(--surface); overflow-y: auto; }
.tryp :focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.tryg { display: grid; gap: var(--s-4); padding-bottom: var(--s-5); margin-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
.tryg:last-child { border-bottom: 0; margin-bottom: 0; }
.tryg__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.tryg__h { margin: 0; font: 600 14px/20px var(--font-text); color: var(--ink); }
.tryf { display: grid; gap: 6px; }
.trybody-form { display: grid; gap: var(--s-4); }
.tryf__label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 500 13px/20px var(--font-text); color: var(--ink); }
.tryf__label code { font: 500 13px/20px var(--font-mono); background: none; padding: 0; }
.tryf__in, .tryjson { width: 100%; min-height: 40px; padding: 8px var(--s-3); border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); font: 400 14px/22px var(--font-mono); color: var(--ink); }
.tryf__in::placeholder { color: color-mix(in oklab, var(--muted) 80%, var(--bg)); }
.tryf__in:focus, .tryjson:focus { border-color: var(--action); outline: 2px solid color-mix(in oklab, var(--action) 30%, transparent); outline-offset: 0; }
.tryjson { min-height: 220px; resize: vertical; font-size: 13px; line-height: 1.6; tab-size: 2; }
.tryf__tok { display: flex; gap: var(--s-2); }
.tryf__show { flex: none; min-height: 40px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); font: 500 13px/1 var(--font-text); color: var(--ink); cursor: pointer; }
.tryf__hint { margin: 0; font: 400 13px/20px var(--font-text); color: var(--muted); }
.tryf__hint a { color: var(--action); }
.tryf__err { margin: 0; font: 500 13px/20px var(--font-text); color: #a8231a; }
.tryseg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 9px; background: var(--surface); justify-self: start; }
.tryseg__b { min-height: 32px; padding: 0 var(--s-3); border: 0; border-radius: 6px; background: transparent; font: 500 13px/1 var(--font-mono); color: var(--muted); cursor: pointer; }
.tryseg--sm .tryseg__b { min-height: 28px; font-family: var(--font-text); }
.tryseg__b:hover { color: var(--ink); }
.tryseg__b[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 3px rgba(14, 26, 43, 0.14); }
.tryp__code .cp__pre { max-height: 300px; }
.tryres { display: flex; flex-direction: column; align-self: start; min-height: 220px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.tryres__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-4); border-bottom: 1px solid var(--line); }
.tryres__t { font: 600 13px/16px var(--font-text); color: var(--ink); }
.tryres__meta { display: flex; align-items: center; gap: var(--s-3); font: 400 12px/16px var(--font-mono); color: var(--muted); }
.tryres__meta b { padding: 3px 8px; border-radius: 5px; font-weight: 500; }
.tryres__meta.is-ok b { background: #e2f3e8; color: #0b5d33; }
.tryres__meta.is-warn b { background: #fdefd9; color: #7a4100; }
.tryres__meta.is-bad b { background: #fde7e6; color: #a8231a; }
.tryres__empty { margin: auto 0; padding: var(--s-6) var(--s-4); font: 400 14px/22px var(--font-text); color: var(--muted); text-align: center; }
.tryres__body { max-height: none; background: #0e1a2b; color: #e8edf5; white-space: pre-wrap; overflow-wrap: anywhere; }
.tryres__hdr-btn { justify-self: start; margin: var(--s-3) var(--s-4); padding: 0; border: 0; background: none; font: 500 13px/20px var(--font-text); color: var(--action); cursor: pointer; }
.tryres__hdr-btn::before { content: '▸ '; }
.tryres__hdr-btn[aria-expanded="true"]::before { content: '▾ '; }
.tryres__hdrs { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--s-4); margin: 0; padding: 0 var(--s-4) var(--s-4); font: 400 12px/18px var(--font-mono); }
.tryres__hdrs dt { color: var(--muted); }
.tryres__hdrs dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 1023px) {
  .tryp__cols { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .tryp__form { overflow: visible; min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); } /* stacked: each part at its content height */
  .tryp__out { overflow: visible; min-height: auto; }
}
@media (max-width: 639px) {
  .tryp { padding: 0; }
  .tryp__box { width: 100%; height: 100%; border-radius: 0; }
  .tryp__bar { grid-template-columns: minmax(0, 1fr) auto auto; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4); }
  .tryp__url { grid-column: 1 / -1; grid-row: 2; }
  .tryp__name { min-width: 0; }
  .tryp__name span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .tryp__form, .tryp__out { padding: var(--s-4); }
  .m__ep { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .dverp__btn .chev { transition: none; } }