/* Encore marketing site, R4: the real-app mock-up kit and the shared section patterns.
   Link it after site.css on any page that shows the product:  <link rel="stylesheet" href="assets/kit-app.css">
   Every component reproduces a real studio surface from the app at true size (fixed px type, fluid widths),
   checked side by side with ../app-refs/*.png (captured from the app at 1440) and ../kit/img/*-studio.webp.
   No gradient box around them: they sit on the page (or on the glow hero) and take the room.
   Reference: ../KIT-APP.md (markup, variants, how a page uses each one). */

/* ============================== App tokens (from the app's brand.css) ============================== */
.ka {
  --ka-plum: #3A1E3C; --ka-mute: #6E5A70; --ka-ink3: #7D6B7F;
  --ka-hair: rgba(58, 30, 60, .12); --ka-edge: rgba(58, 30, 60, .2);
  --ka-field: #F2F0F3; --ka-field-2: #EEEBF0; --ka-tint: #ECE8F6;
  --ka-ready: #2BA89E;
  --ka-fade-client: linear-gradient(180deg, #EEEBFB 0px, #F3F1FD 180px, #FFFFFF 380px);
  --ka-canvas: linear-gradient(100deg, #ECF2FB 0%, #EFEEFB 55%, #F3EFFC 100%);
  --ka-panel: linear-gradient(155deg, #F2F0FF 0%, #EEF3FB 100%);
  --ka-band: linear-gradient(100deg, #EAF0FB 0%, #F1EDF9 45%, #FDEEE6 100%);
  --ka-h: 640px;                       /* the window's body height; set per use (style="--ka-h: 560px") */
  container: ka / inline-size;
  position: relative; min-width: 0; color: var(--ka-plum); font-family: var(--sans); font-size: 15px; line-height: 1.45; text-align: left;
}
.ka *, .ka *::before, .ka *::after { box-sizing: border-box; }
.ka img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ka .serif { font-family: var(--serif); font-weight: 400; }

/* ============================== The window ============================== */
/* .ka-win: the app as it sits on a desktop screen. White, one hairline, 20px corners, no shadow. */
.ka-win { background: #FFFFFF; border: 1px solid var(--ka-hair); border-radius: 20px; overflow: clip; }
.ka-win--bleed-r { border-right: 0; border-radius: 20px 0 0 20px; }   /* runs off the right edge of the window */
.ka-win--bleed-l { border-left: 0; border-radius: 0 20px 20px 0; }
.ka-body { height: var(--ka-h); overflow: clip; position: relative; }

/* KIT2 · Real screen proportions, and windows that grow instead of cropping (Addendum 4).
   - Every window is at least a desktop screen: --ka-ar (16 / 10 by default) sets its height from its width.
     A window that runs off one edge (.ka-win--bleed-*) shows only part of a wider screen: its body is at least
     50 fluid units tall (about 800px for the whole window at 1440, held from 1600 up), never a strip.
   - --ka-h is now a FLOOR, not a fixed height. The body grows to fit what it holds, so nothing is cut at
     768-1024 or on phones. overflow: clip is not a scroll container, so the window's own minimum is its content.
   - Toggles still never move anything: the Slides and Classic previews, and the respondent screens, share one
     cell; the hidden one keeps its room, so the window is as tall as its tallest state from the start. */
.ka-win { display: flex; flex-direction: column; aspect-ratio: var(--ka-ar, 16 / 10); }
.ka-win--bleed-r, .ka-win--bleed-l { aspect-ratio: auto; }
.ka-win--bleed-r > .ka-body, .ka-win--bleed-l > .ka-body { min-height: max(var(--ka-h), calc(var(--vw) * 50)); }
.ka-win > * { flex: none; }
.ka-win > .ka-body, .ka-win > .ka-resp { flex: 1 0 auto; height: auto; min-height: var(--ka-h); }

/* ---------- The studio bar (V5 studio bar: Encore, crumbs, saved; Agent, Preview, Send, "…") ---------- */
.ka-bar { min-width: 0; overflow: hidden; height: 60px; display: flex; align-items: center; gap: 16px; padding: 0 28px; border-bottom: 1px solid var(--ka-hair); background: #FFFFFF; white-space: nowrap; }
.ka-logo { font-family: var(--serif); font-size: 26px; line-height: 1; letter-spacing: -.01em; padding-right: 16px; border-right: 1px solid var(--ka-hair); }
.ka-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; color: var(--ka-mute); }
.ka-crumbs span { overflow: hidden; text-overflow: ellipsis; }
.ka-crumbs .now { color: var(--ka-plum); }
.ka-crumbs i { width: 8px; height: 8px; flex: none; opacity: .7; background: no-repeat center / 8px 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='m3 1.5 2.5 2.5L3 6.5' fill='none' stroke='%236E5A70' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ka-crumbs .drop { padding-right: 16px; background: no-repeat right center / 10px 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236E5A70' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ka-saved { display: inline-flex; align-items: center; gap: 8px; color: var(--ka-mute); }
.ka-saved::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ka-ready); }
.ka-acts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ka-act { padding: 0 10px; color: var(--ka-plum); }
.ka-act.is-off { color: var(--ka-ink3); }
.ka-send { height: 36px; padding: 0 16px; border-radius: 999px; background: var(--ka-plum); color: #FFFFFF; display: inline-flex; align-items: center; font-weight: 500; }
.ka-send.is-off { background: #ECE8F6; color: var(--ka-plum); }
.ka-more { width: 32px; height: 32px; display: grid; place-items: center; }
.ka-more::before { content: "···"; font-size: 20px; letter-spacing: 1px; line-height: 1; transform: translateY(-3px); }
.ka-round { width: 36px; height: 36px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; font-weight: 500; }
/* The bar sitting inside a washed band (What we heard): transparent, no line. */
.ka-band .ka-bar { background: transparent; border-bottom: 0; }

/* ---------- Shared bits: the instrument marks, pills, the "or" ---------- */
.ka-ico { width: 22px; height: 22px; flex: none; display: inline-block; }
.ka-mark { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.ka-mark svg { width: 24px; height: 24px; }
.ka-mark--sage { background: #DCEFE2; } .ka-mark--sky { background: #DCE8F7; } .ka-mark--lav { background: #E7E3F7; } .ka-mark--peach { background: #FBE6D8; }
.ka-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ka-edge); background: #FFFFFF; white-space: nowrap; }
.ka-pill svg { width: 14px; height: 14px; }
.ka-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--ka-field); color: var(--ka-mute); font-size: 14px; white-space: nowrap; }
.ka-or { color: var(--ka-mute); font-size: 15px; }
.ka-ulink { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ka-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--ka-field); }
.ka-seg span { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 20px; border-radius: 999px; color: var(--ka-mute); white-space: nowrap; transition: background-color .3s var(--ease-out), color .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.ka-seg span.is-on { background: #FFFFFF; color: var(--ka-plum); box-shadow: inset 0 0 0 1px var(--ka-hair); }
.ka-seg--wide span { padding: 0 34px; }


/* Instrument and step marks: <i class="ka-ico" data-ico="form|moodboard|comparison|flow|welcome|ending|heard|person|people"></i> */
.ka-ico, .pat-walk-tab .ka-ico { background: no-repeat center / contain; }
.ka-ico[data-ico="form"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2020%22%3E%3Cpath%20d=%22M3%204.5A2.5%202.5%200%200%201%205.5%202h9A2.5%202.5%200%200%201%2017%204.5v6a2.5%202.5%200%200%201-2.5%202.5H9l-4%203.5V13h.5A2.5%202.5%200%200%201%203%2010.5v-6Z%22%20fill=%22%238F83D6%22/%3E%3Ccircle%20cx=%227%22%20cy=%227.6%22%20r=%221.1%22%20fill=%22%23fff%22/%3E%3Ccircle%20cx=%2210%22%20cy=%227.6%22%20r=%221.1%22%20fill=%22%23fff%22/%3E%3Ccircle%20cx=%2213%22%20cy=%227.6%22%20r=%221.1%22%20fill=%22%23fff%22/%3E%3C/svg%3E"); }
.ka-ico[data-ico="moodboard"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2020%22%3E%3Crect%20x=%222.5%22%20y=%222.5%22%20width=%226.5%22%20height=%226.5%22%20rx=%221%22%20fill=%22%23A197E1%22/%3E%3Crect%20x=%2211%22%20y=%222.5%22%20width=%226.5%22%20height=%226.5%22%20rx=%221%22%20fill=%22%236C5CB2%22/%3E%3Crect%20x=%222.5%22%20y=%2211%22%20width=%226.5%22%20height=%226.5%22%20rx=%221%22%20fill=%22%236C5CB2%22/%3E%3Crect%20x=%2211%22%20y=%2211%22%20width=%226.5%22%20height=%226.5%22%20rx=%221%22%20fill=%22%23A197E1%22/%3E%3C/svg%3E"); }
.ka-ico[data-ico="comparison"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2020%22%3E%3Crect%20x=%223%22%20y=%229%22%20width=%226%22%20height=%228.5%22%20rx=%221%22%20fill=%22%23A197E1%22/%3E%3Crect%20x=%2211%22%20y=%222.5%22%20width=%226%22%20height=%2215%22%20rx=%221%22%20fill=%22%236C5CB2%22/%3E%3C/svg%3E"); }
.ka-ico[data-ico="flow"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2020%22%3E%3Crect%20x=%222.5%22%20y=%2212.5%22%20width=%225%22%20height=%225%22%20rx=%22.8%22%20fill=%22%23B3AAEC%22/%3E%3Crect%20x=%227.5%22%20y=%227.5%22%20width=%225%22%20height=%225%22%20rx=%22.8%22%20fill=%22%238F83D6%22/%3E%3Crect%20x=%2212.5%22%20y=%222.5%22%20width=%225%22%20height=%225%22%20rx=%22.8%22%20fill=%22%233A1E3C%22/%3E%3C/svg%3E"); }
.ka-ico[data-ico="welcome"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2020%22%3E%3Cpath%20d=%22M2.5%209%2010%202.8%2017.5%209v8.2h-5.2v-5H7.7v5H2.5Z%22%20fill=%22%238F83D6%22/%3E%3C/svg%3E"); }
.ka-ico[data-ico="ending"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2020%22%3E%3Cpath%20d=%22m3.5%2010.5%204.2%204.2L16.5%205.5%22%20fill=%22none%22%20stroke=%22%236C5CB2%22%20stroke-width=%222.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.ka-ico[data-ico="heard"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2020%22%3E%3Crect%20x=%222.5%22%20y=%224%22%20width=%223%22%20height=%2212%22%20rx=%22.6%22%20fill=%22%233A1E3C%22/%3E%3Crect%20x=%226.5%22%20y=%224%22%20width=%223%22%20height=%2212%22%20rx=%22.6%22%20fill=%22%233A1E3C%22/%3E%3Crect%20x=%2210.5%22%20y=%224%22%20width=%223%22%20height=%2212%22%20rx=%22.6%22%20fill=%22%233A1E3C%22/%3E%3Crect%20x=%2214.5%22%20y=%224%22%20width=%223%22%20height=%2212%22%20rx=%22.6%22%20fill=%22%23E6B8CD%22/%3E%3C/svg%3E"); }
.ka-ico[data-ico="person"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2020%22%3E%3Ccircle%20cx=%2210%22%20cy=%226%22%20r=%223.5%22%20fill=%22%238F83D6%22/%3E%3Cpath%20d=%22M3%2017.5c0-3.6%203.1-6%207-6s7%202.4%207%206Z%22%20fill=%22%236C5CB2%22/%3E%3C/svg%3E"); }
.ka-ico[data-ico="people"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2020%22%3E%3Ccircle%20cx=%226.5%22%20cy=%226.5%22%20r=%222.8%22%20fill=%22%23A197E1%22/%3E%3Ccircle%20cx=%2213.5%22%20cy=%226.5%22%20r=%222.8%22%20fill=%22%238F83D6%22/%3E%3Cpath%20d=%22M1.5%2016.5c0-3%202.2-5%205-5s5%202%205%205Z%22%20fill=%22%238F83D6%22/%3E%3Cpath%20d=%22M8.5%2016.5c0-3%202.2-5%205-5s5%202%205%205Z%22%20fill=%22%236C5CB2%22/%3E%3C/svg%3E"); }

/* ---------- Answer tiles (What we heard's rule: one tile per person) ---------- */
.ka-tiles { display: inline-flex; gap: 4px; align-items: flex-end; }
.ka-tiles i { width: 22px; height: 34px; border-radius: 3px; background: #EEEBF0; position: relative; flex: none; }
.ka-tiles i.p { background: var(--ka-plum); }
.ka-tiles i.k { background: #EDC9D8; }
.ka-tiles i.u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 3px; border-radius: 2px; background: var(--ka-plum); }
.ka-tiles--sm i { width: 16px; height: 26px; }

/* ============================== 1 · Form studio ============================== */
/* .ka-form: the Sequence rail and the preview, Slides or Classic (data-format on .ka-form).
   The window keeps its height whatever the format shows, so a toggle never moves anything around it. */
.ka-form .ka-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; padding: 28px 28px 0; }
.ka-rail { min-width: 0; overflow: clip; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 60px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 60px), transparent); }
.ka-rhead { display: flex; align-items: center; gap: 12px; padding: 0 0 18px; }
.ka-rhead b { display: block; font-weight: 500; }
.ka-rhead small { display: block; font-size: 14px; color: var(--ka-mute); }
.ka-rhead .ka-pill { margin-left: auto; }
.ka-sec { padding: 14px 12px 8px; }
.ka-sec small { display: block; font-size: 14px; color: var(--ka-mute); }
.ka-sec b { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.2; margin-top: 2px; }
.ka-sec span { display: block; font-size: 14px; color: var(--ka-mute); margin-top: 4px; }
.ka-row { display: grid; grid-template-columns: 10px 28px minmax(0, 1fr); column-gap: 10px; padding: 16px 14px; border-radius: 16px; transition: background-color .35s var(--ease-out); }
.ka-row + .ka-row { margin-top: 12px; }   /* R7 (ruling 37): more air between questions in a list */
.ka-row::before { content: ""; width: 8px; height: 13px; margin-top: 4px; opacity: .55; background: radial-gradient(circle, #9C8F9E 1.1px, transparent 1.4px) 0 0 / 4px 4.4px; }
.ka-row .n { font-size: 14px; letter-spacing: .12em; color: var(--ka-mute); padding-top: 1px; }
.ka-row .t { display: block; line-height: 1.35; }
.ka-row .ka-tag { margin-top: 10px; }
.ka-row.is-on { background: var(--ka-tint); }
.ka-row.is-on .ka-tag { background: #FFFFFF; }

.ka-prev { min-width: 0; border: 1px solid var(--ka-hair); border-radius: 24px 24px 0 0; border-bottom: 0; overflow: clip; display: flex; flex-direction: column; background: #FFFFFF; }
.ka-ptool { flex: none; height: 84px; padding: 0 12px 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--ka-hair); }
.ka-ptool p { color: var(--ka-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ka-fmt { display: inline-flex; padding: 4px; border-radius: 18px; background: var(--ka-field); flex: none; }
.ka-fmt span { display: block; padding: 8px 16px; border-radius: 14px; line-height: 1.3; transition: background-color .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.ka-fmt span small { display: block; font-size: 14px; color: var(--ka-mute); }
.ka-fmt span.is-on { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ka-hair); }
.ka-pbody { position: relative; flex: 1; min-height: 0; background: var(--ka-fade-client); overflow: clip; }
.ka-pbody > * { position: absolute; inset: 0; transition: opacity .45s var(--ease-out), visibility 0s; }
/* KIT2: Slides sits in the flow, so the preview is always as tall as the question needs; Classic lies over it
   (it is a long page that fades out at the bottom, like the app scrolled). The toggle never changes the height. */
.ka-pbody > .ka-slides { position: relative; inset: auto; min-height: 100%; padding-bottom: 32px; }
/* Lists that continue past the window (the Sequence rail, the What we heard rows) fade out at the bottom, so they
   never set the window's height: the window keeps its proportion and the list reads as scrollable. */
.ka-form .ka-rail, .ka-heard .ka-hright { contain: size; }
/* R4c: a row the window's edge would cut is hidden whole (kit-app.js), so a fading list never slices a line. */
.ka-cut { visibility: hidden !important; }
/* A window that must show everything it holds grows to fit instead of fading (an answer the reader just gave). */
.ka-win[data-ka-full] .ka-rail, .ka-win[data-ka-full] .ka-hright { contain: none; -webkit-mask-image: none; mask-image: none; }
.ka-form[data-format="slides"] .ka-classic, .ka-form[data-format="classic"] .ka-slides { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-out), visibility 0s .3s; }

/* Slides: one question per screen (the focused step) */
.ka-slides { display: flex; flex-direction: column; align-items: center; padding: 52px 48px 0; text-align: center; }
.ka-kick { font-size: 14px; color: var(--ka-mute); }
.ka-rule { display: block; width: 48px; height: 2px; background: var(--ka-plum); margin: 18px auto 20px; border-radius: 1px; }
.ka-q { font-family: var(--serif); font-size: 36px; line-height: 1.15; letter-spacing: -.02em; max-width: 680px; text-wrap: balance; }
.ka-qsub { margin-top: 10px; color: var(--ka-mute); }
.ka-pair { width: 100%; max-width: 820px; margin-top: 36px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
.ka-card { min-height: 84px; padding: 14px 20px; border: 1px solid var(--ka-hair); border-radius: 12px; background: #FFFFFF; font-family: var(--serif); font-size: 32px; line-height: 1.1; letter-spacing: -.01em; text-align: left; transition: background-color .35s var(--ease-out), color .35s var(--ease-out), border-color .35s; }
.ka-card.is-on { background: var(--ka-plum); color: #FFFFFF; border-color: var(--ka-plum); }
.ka-ballot { width: 100%; max-width: 680px; margin-top: 28px; display: grid; gap: 10px; text-align: left; }
.ka-ballot span { display: grid; grid-template-columns: 24px 1fr 20px; align-items: center; gap: 14px; min-height: 60px; padding: 0 20px; border: 1px solid var(--ka-hair); border-radius: 12px; background: #FFFFFF; font-family: var(--serif); font-size: 22px; letter-spacing: -.01em; }
.ka-ballot span small { font-family: var(--sans); font-size: 14px; color: var(--ka-mute); }
.ka-ballot span::after { content: ""; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ka-edge); }
.ka-ballot span.is-on { box-shadow: inset 0 0 0 1px var(--ka-plum); }
.ka-ballot span.is-on::after { background: var(--ka-plum) no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); box-shadow: none; }
.ka-spectrum { width: 100%; max-width: 680px; margin-top: 44px; }
.ka-spectrum .track { position: relative; height: 6px; border-radius: 3px; background: var(--ka-field-2); }
.ka-spectrum .track b { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 64%); border-radius: 3px; background: #8F83D6; }
.ka-spectrum .track i { position: absolute; left: var(--v, 64%); top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--ka-plum); }
.ka-spectrum .ends { display: flex; justify-content: space-between; margin-top: 16px; color: var(--ka-mute); }
.ka-sfoot { width: 100%; max-width: 820px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--ka-hair); display: flex; justify-content: space-between; }
.ka-back { height: 44px; padding: 0 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ka-hair); display: inline-flex; align-items: center; color: var(--ka-ink3); }
/* R7 (ruling 38): a primary not yet ready is the app's disabled (runtimeSurface.ts CLIENT_PRIMARY_ACTION_FILL, 4.123.1):
   the studio's light tint (plum tints in lavender, --brand-tint #ECE8F6) with the studio colour as text, never a faded grey-mauve. */
.ka-cont { height: 44px; padding: 0 24px; border-radius: 999px; background: #ECE8F6; color: var(--ka-plum); display: inline-flex; align-items: center; font-weight: 500; transition: background-color .35s var(--ease-out), color .35s var(--ease-out); }
.ka-cont.is-on { background: var(--ka-plum); color: #FFFFFF; }
.ka-skip { margin-top: 22px; font-size: 14px; color: var(--ka-mute); text-decoration: underline; text-underline-offset: 4px; }
.ka-dots { margin-top: 24px; display: flex; gap: 8px; justify-content: center; }
.ka-dots span { width: 40px; height: 40px; border-radius: 50%; background: var(--ka-field); color: var(--ka-mute); display: grid; place-items: center; font-size: 14px; }
.ka-dots span.is-on { background: #E9E5EC; color: var(--ka-plum); box-shadow: inset 0 0 0 1px var(--ka-edge); }

/* Classic: every question on one page */
.ka-classic { padding: 48px 56px 0; overflow: clip; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent); }
.ka-classic-in { max-width: 680px; margin: 0 auto; }
.ka-classic .ka-rule { margin: 0 0 22px; }
.ka-ctitle { font-family: var(--serif); font-size: 48px; line-height: 1.05; letter-spacing: -.02em; }
.ka-cintro { margin-top: 14px; font-size: 18px; line-height: 1.55; color: var(--ka-mute); }
.ka-csec { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--ka-hair); }
.ka-csec > b { display: block; font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: -.01em; }
.ka-csec > small { display: block; margin-top: 4px; font-size: 15px; color: var(--ka-mute); }
.ka-cq { margin-top: 40px; }   /* R7 (ruling 37) */
.ka-cq > p { font-size: 18px; font-weight: 500; line-height: 1.4; }
.ka-cq > p em { font-style: normal; color: #9F2F2A; margin-left: 2px; }
.ka-cq .ka-pair { margin-top: 16px; gap: 20px; }
.ka-cq .ka-card { font-size: 28px; }
.ka-cq .ka-ballot { margin-top: 14px; }
.ka-text { margin-top: 14px; min-height: 120px; padding: 18px 22px; border: 1px solid var(--ka-hair); border-radius: 16px; background: #FFFFFF; color: rgba(110, 90, 112, .8); font-size: 16px; }

/* ============================== 2 · Moodboard ============================== */
/* .ka-board: the board in the studio. The canvas wash, the count line, the masonry and the floating tool pill. */
.ka-board .ka-body { background: var(--ka-canvas); padding: 26px 28px 0; }
/* KIT2: the canvas is a board you could scroll, so it keeps the window's size and fades out at the bottom
   (like the app scrolled) instead of growing a tablet window to twice its width. */
.ka-win.ka-board > .ka-body { flex: 1 1 0; }
.ka-board .ka-body > .ka-mason { position: absolute; top: 70px; left: 28px; right: 28px; }   /* its own height, so the columns balance */
.ka-board .ka-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; z-index: 1; pointer-events: none; background: var(--ka-canvas); -webkit-mask-image: linear-gradient(180deg, transparent, #000 85%); mask-image: linear-gradient(180deg, transparent, #000 85%); }
.ka-board .ka-tools { z-index: 2; }
.ka-board .ka-body { --ka-fades: 1; }   /* tells shell/clipcheck.mjs this clip is a designed fade (the ::after above) */
.ka-meta { display: flex; justify-content: space-between; align-items: baseline; color: var(--ka-mute); margin-bottom: 18px; }
.ka-meta b { font-weight: 400; color: var(--ka-plum); }
.ka-mason { columns: 5 160px; column-gap: 18px; }
.ka-mason figure { margin: 0 0 18px; break-inside: avoid; border-radius: 12px; overflow: clip; position: relative; }
.ka-mason figure img { height: auto; aspect-ratio: var(--ar, 3 / 4); }
.ka-mason figure.is-kept::after, .ka-mason figure.is-passed::after { content: ""; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: #FFFFFF no-repeat center / 16px; }
.ka-mason figure.is-kept::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.6 2.6 8.4A3.2 3.2 0 0 1 8 4.1a3.2 3.2 0 0 1 5.4 4.3Z' fill='%236C5CB2'/%3E%3C/svg%3E"); }
.ka-mason figure.is-passed::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 4.5 7 7m0-7-7 7' stroke='%236E5A70' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ka-mason figure.is-dim img { opacity: .55; }
.ka-tools { position: absolute; left: 50%; bottom: 24px; translate: -50% 0; display: flex; align-items: center; gap: 26px; height: 56px; padding: 0 26px; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ka-hair); font-size: 16px; white-space: nowrap; }
.ka-tools span { display: inline-flex; align-items: center; gap: 10px; }
.ka-tools svg { width: 22px; height: 22px; }

/* ============================== 3 · Comparison ============================== */
/* .ka-cmp: Pool | Pairs | Results, the pool, and the lavender settings panel. data-tab="pool|results". */
.ka-cmp .ka-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; padding: 28px 28px 0; }
.ka-cmp-main { min-width: 0; }
.ka-cmp-top { display: flex; align-items: center; gap: 18px; color: var(--ka-mute); }
.ka-pool { margin-top: 16px; padding: 22px; border: 1px solid var(--ka-hair); border-radius: 20px; background: #FFFFFF; }
.ka-pool-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.ka-pool-h b { display: block; font-size: 16px; font-weight: 500; }
.ka-pool-h small { display: block; font-size: 15px; color: var(--ka-mute); margin-top: 2px; }
.ka-pool-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ka-pool-grid figure { margin: 0; aspect-ratio: 4 / 3; border-radius: 10px; overflow: clip; }
.ka-side { padding: 24px; border-radius: 20px; background: var(--ka-panel); align-self: start; }
.ka-side > b { display: block; font-size: 18px; font-weight: 500; padding-bottom: 18px; border-bottom: 1px solid var(--ka-hair); }
.ka-side section { padding: 18px 0; border-bottom: 1px solid var(--ka-hair); }
.ka-side section:last-child { border-bottom: 0; padding-bottom: 0; }
.ka-side h4 { margin: 0; font-size: 16px; font-weight: 500; }
.ka-side p { margin-top: 4px; font-size: 15px; color: var(--ka-mute); }
.ka-step { margin-top: 14px; height: 40px; border-radius: 999px; background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.ka-step i { width: 32px; height: 32px; border-radius: 50%; background: var(--ka-field); display: grid; place-items: center; font-style: normal; font-size: 16px; }
.ka-side .ka-seg { margin-top: 14px; background: #FFFFFF; }
.ka-side .ka-seg { display: flex; max-width: 100%; }
.ka-side .ka-seg span { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 8px; }
.ka-side .ka-seg span.is-on { background: var(--ka-tint); box-shadow: none; }
.ka-thumbs { margin-top: 14px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.ka-thumbs figure { margin: 0; aspect-ratio: 4 / 3; border-radius: 10px; overflow: clip; }
.ka-cmp[data-tab="pool"] .ka-cmp-res, .ka-cmp[data-tab="results"] .ka-pool { display: none; }
.ka-cmp-res { margin-top: 16px; padding: 6px 22px; border: 1px solid var(--ka-hair); border-radius: 20px; background: #FFFFFF; }
.ka-pr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; padding: 20px 0; }
.ka-pr + .ka-pr { border-top: 1px solid var(--ka-hair); }
.ka-pr .two { display: flex; align-items: center; gap: 8px; }
.ka-pr .two figure { margin: 0; width: 52px; height: 52px; border-radius: 8px; overflow: clip; }
.ka-pr .two span { font-size: 14px; color: var(--ka-mute); }
.ka-pr b { font-weight: 500; font-size: 16px; }
.ka-pr b small { font-weight: 400; font-size: 15px; color: var(--ka-mute); margin-left: 6px; }
.ka-pr .line { margin-top: 10px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ka-pr .line span { font-size: 15px; }

/* ============================== 4 · Flow studio ============================== */
/* .ka-flow: the stops along one lane, then the chosen step and its live preview. */
.ka-flow-head { padding: 22px 28px 0; }
.ka-flow-name { display: flex; align-items: center; gap: 12px; }
.ka-flow-name b { font-weight: 500; font-size: 17px; }
.ka-flow-name span { color: var(--ka-mute); }
.ka-flow-name .lanes { margin-left: auto; display: flex; gap: 26px; font-size: 16px; color: var(--ka-mute); }
.ka-flow-name .lanes .is-on { color: var(--ka-plum); box-shadow: inset 0 -2px 0 var(--ka-plum); padding-bottom: 6px; }
.ka-stops { margin-top: 26px; display: grid; grid-template-columns: repeat(var(--stops, 5), minmax(0, 1fr)); padding-bottom: 22px; border-bottom: 1px solid var(--ka-hair); }
.ka-stop { position: relative; padding-right: 30px; min-width: 0; }
/* R4c: a stop's name wraps instead of being cut ("Which feels more like Tidewell?"); the stops share rows (subgrid),
   so every bar stays on one line whatever its name runs to. The "+" between two stops sits on the bar. */
.ka-stops { grid-template-rows: auto auto auto; }
.ka-stop { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.ka-stop .l { display: flex; align-items: flex-start; align-self: end; gap: 10px; color: var(--ka-mute); line-height: 1.3; font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
.ka-stop .l .ka-ico { margin-top: 0; }
.ka-stop .l .ka-ico { width: 20px; height: 20px; }
.ka-stop .bar { position: relative; display: block; height: 4px; border-radius: 2px; background: #E7E3EC; margin-top: 16px; transition: background-color .4s var(--ease-out); }
.ka-stop .c { display: block; margin-top: 14px; font-size: 14px; line-height: 1.35; color: var(--ka-mute); }
.ka-stop:not(:last-child) .bar::after { content: "+"; position: absolute; left: calc(100% + 3px); top: -10px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ka-hair); display: grid; place-items: center; font-size: 15px; line-height: 1; color: var(--ka-plum); }
.ka-stop.is-on .l { color: var(--ka-plum); font-weight: 500; }
.ka-stop.is-on .bar { background: var(--ka-plum); }
.ka-flow .ka-body { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 40px; padding: 36px 28px 0; background: var(--ka-canvas); }
.ka-flow-step { min-width: 0; }
.ka-flow-step .k { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 16px; }
.ka-flow-step h4 { margin: 18px 0 0; font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: 1.04; letter-spacing: -.02em; }
.ka-flow-step p { margin-top: 18px; font-size: 17px; line-height: 1.5; color: rgba(58, 30, 60, .86); max-width: 420px; }
.ka-nums { margin-top: 36px; display: flex; gap: 64px; }
.ka-nums b { display: block; font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: 1; letter-spacing: -.02em; }
.ka-nums span { display: block; margin-top: 10px; font-size: 16px; color: var(--ka-mute); }
.ka-flow-step .ka-pill { margin-top: 36px; height: 44px; padding: 0 20px; font-size: 16px; }
.ka-flow-card { min-width: 0; min-height: calc(var(--ka-h) - 36px); display: flex; flex-direction: column; border-radius: 24px 24px 0 0; background: #FFFFFF; border: 1px solid var(--ka-hair); border-bottom: 0; overflow: clip; position: relative; }

/* ============================== 5 · What we heard ============================== */
/* .ka-heard: the washed band (bar, title, chapter tabs), then the left stack and the rows of answer tiles. */
.ka-band { background: var(--ka-band); border-bottom: 1px solid var(--ka-hair); }
.ka-htitle { display: flex; align-items: flex-end; gap: 16px; padding: 4px 28px 0; }
.ka-htitle h4 { margin: 0 0 14px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.ka-htitle > span { margin-bottom: 14px; color: var(--ka-mute); font-size: 16px; white-space: nowrap; }
.ka-htitle .back { margin-bottom: 14px; font-size: 16px; white-space: nowrap; }
.ka-tabs { margin-left: auto; display: flex; gap: 26px; white-space: nowrap; overflow: hidden; min-width: 0; }
.ka-tabs span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ka-tabs span.is-on { flex-shrink: 0; }
.ka-tabs span { padding-bottom: 14px; color: var(--ka-mute); font-size: 15px; }
.ka-tabs span i { font-style: normal; margin-right: 6px; }
.ka-tabs span.is-on { color: var(--ka-plum); font-weight: 500; box-shadow: inset 0 -2px 0 var(--ka-plum); }
.ka-tabs .sep { width: 1px; padding: 0; margin-bottom: 14px; background: var(--ka-hair); }
.ka-heard .ka-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; padding: 36px 28px 0; }
.ka-hleft .k { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; }
.ka-hleft h4 { margin: 18px 0 0; font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: 1.04; letter-spacing: -.02em; }
.ka-hleft p { margin-top: 16px; font-size: 17px; line-height: 1.5; color: rgba(58, 30, 60, .86); }
.ka-pin { margin-top: 32px; }
.ka-pin q { display: block; font-family: var(--serif); font-size: 26px; line-height: 1.25; letter-spacing: -.01em; quotes: "\201C" "\201D"; }
.ka-pin small { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 15px; color: var(--ka-mute); }
.ka-pin small::before { content: ""; width: 14px; height: 16px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M7 15s5.5-5.2 5.5-9A5.5 5.5 0 0 0 1.5 6c0 3.8 5.5 9 5.5 9Z' fill='%238F83D6'/%3E%3Ccircle cx='7' cy='6' r='2' fill='%23fff'/%3E%3C/svg%3E"); }
.ka-hright { min-width: 0; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent); }
.ka-lhead { display: flex; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--ka-hair); color: var(--ka-mute); }
.ka-ans { padding: 22px 0 6px; }
.ka-ans > small { display: block; font-size: 15px; color: var(--ka-mute); }
.ka-ans > b { display: block; margin-top: 4px; font-size: 17px; font-weight: 500; }
.ka-ans > b em { font-style: normal; font-weight: 400; font-size: 15px; color: var(--ka-mute); margin-left: 8px; }
.ka-ans .line { margin-top: 12px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ka-ans .line span { font-size: 15px; }
.ka-ans .line figure { margin: 0; width: 64px; height: 48px; border-radius: 8px; overflow: clip; flex: none; }

.ka-person { padding: 20px 0 4px; }
.ka-person b { display: block; font-size: 17px; font-weight: 500; }
.ka-person b small { font-weight: 400; font-size: 15px; color: var(--ka-mute); margin-left: 10px; }
.ka-person .line { margin-top: 10px; display: flex; align-items: center; gap: 14px; }
.ka-person .line i { width: 22px; height: 34px; border-radius: 3px; background: #EEEBF0; flex: none; }
.ka-person .line i.p { background: var(--ka-plum); } .ka-person .line i.k { background: #EDC9D8; }
.ka-person .line span { font-size: 15px; }

/* ============================== 6 · Their side: the respondent page in a desktop browser ============================== */
/* .ka-browser: a plain browser window (no real brand chrome), the link's address, and the page people see.
   Always pair it with .ka-who so it's plain whose screen this is: "What Maya sees". */
.ka-who { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 16px; color: var(--plum); }
.ka-who i { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #EDC9D8; display: grid; place-items: center; font-style: normal; font-size: 14px; font-weight: 500; color: var(--plum); }
.ka-who em { font-style: normal; color: var(--mute); }
.on-plum .ka-who { color: var(--cream); }
.on-plum .ka-who em { color: rgba(246, 243, 238, .8); }
.ka-chrome { height: 46px; display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; padding: 0 16px; background: #F7F6F8; border-bottom: 1px solid var(--ka-hair); }
.ka-chrome .dots { display: flex; gap: 8px; }
.ka-chrome .dots i { width: 11px; height: 11px; border-radius: 50%; background: #E2DDE5; }
.ka-url { justify-self: center; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 18px; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ka-hair); color: var(--ka-mute); font-size: 14px; max-width: 100%; white-space: nowrap; overflow: hidden; }
.ka-url::before { content: ""; width: 10px; height: 12px; flex: none; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Crect x='1' y='5' width='8' height='6.5' rx='1.5' fill='%236E5A70'/%3E%3Cpath d='M3 5V3.6a2 2 0 0 1 4 0V5' fill='none' stroke='%236E5A70' stroke-width='1.2'/%3E%3C/svg%3E"); }
.ka-resp { position: relative; height: var(--ka-h); overflow: clip; background: var(--ka-fade-client); padding: 26px 36px 0; }
/* KIT2: every screen shares one grid cell under the top line, so the page is as tall as its tallest screen and
   switching screens moves nothing. (The old absolute inset is overridden, including inline ones.) */
.ka-resp { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; padding-bottom: 36px; }
.ka-resp > .ka-rprog { grid-area: auto; }
.ka-resp > .ka-rtop { grid-row: 1; grid-column: 1; }
.ka-flow-card > .ka-resp { flex: 1 0 auto; height: auto; min-height: 100%; }
.ka-resp { container: kresp / inline-size; }
@container kresp (max-width: 620px) { .ka-rtop { grid-template-columns: 1fr; } .ka-rtop .ka-chip, .ka-rtop > span:empty { display: none; } }
.ka-rtop { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.ka-studio { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 22px; letter-spacing: -.01em; white-space: nowrap; }
.ka-studio i { width: 32px; height: 32px; border-radius: 50%; background: var(--ka-plum); color: #F6F3EE; display: grid; place-items: center; font-style: normal; font-size: 18px; }
.ka-chip { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 18px; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ka-hair); white-space: nowrap; }
.ka-chip small { font-size: 15px; color: var(--ka-mute); }
.ka-rprog { position: absolute; left: 0; top: 0; height: 3px; width: var(--prog, 30%); background: var(--ka-plum); transition: width .6s var(--ease-out); }
.ka-rscreen { position: relative; inset: auto !important; grid-row: 2; grid-column: 1; margin-top: 34px; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; transition: opacity .45s var(--ease-out), visibility 0s; }
.ka-resp [data-screen]:not(.is-on) { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-out), visibility 0s .3s; }
.ka-rscreen .ka-q { font-size: 44px; max-width: 760px; }
.ka-rhint { margin-top: 12px; color: var(--ka-mute); font-size: 16px; }
.ka-rpair { width: 100%; max-width: 920px; margin-top: 32px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; }
.ka-rpair figure { margin: 0; aspect-ratio: 4 / 3; border-radius: 14px; overflow: clip; position: relative; transition: box-shadow .35s var(--ease-out); }
.ka-rpair figure.is-on { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--ka-plum); }
.ka-rgrid { width: 100%; max-width: 900px; margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ka-rgrid figure { margin: 0; aspect-ratio: 4 / 3; border-radius: 12px; overflow: clip; position: relative; }
.ka-rgrid figure.is-kept::after { content: ""; position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: #FFFFFF no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.6 2.6 8.4A3.2 3.2 0 0 1 8 4.1a3.2 3.2 0 0 1 5.4 4.3Z' fill='%236C5CB2'/%3E%3C/svg%3E"); }
.ka-rnote { margin-top: 22px; color: var(--ka-mute); font-size: 15px; }
/* A reaction on a picture (Moodboard, as on the respondent page): a heart for kept, a cross for passed.
   <figure><img …><i class="ka-mk ka-mk--keep"></i></figure> (or put .is-kept on the figure for the heart alone). */
.ka-mk { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: #FFFFFF no-repeat center / 16px; }
.ka-mk--keep { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.6 2.6 8.4A3.2 3.2 0 0 1 8 4.1a3.2 3.2 0 0 1 5.4 4.3Z' fill='%236C5CB2'/%3E%3C/svg%3E"); }
.ka-mk--pass { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 4.5 7 7m0-7-7 7' stroke='%236E5A70' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* The welcome and the thank-you: a white card on the fade */
.ka-wcard { width: min(100%, 560px); margin-top: 8px; padding: 40px 40px 36px; border-radius: 24px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ka-hair); text-align: left; }
.ka-wcard .ka-rule { margin: 0 0 22px; }
.ka-wcard small { display: block; font-size: 15px; color: var(--ka-mute); }
.ka-wcard h4 { margin: 10px 0 0; font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.05; letter-spacing: -.02em; }
.ka-wcard p { margin-top: 16px; font-size: 17px; line-height: 1.55; color: var(--ka-mute); }
.ka-wcard ul { margin-top: 20px; display: grid; gap: 10px; }
.ka-wcard li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.ka-wcard .go { margin-top: 28px; height: 52px; border-radius: 999px; background: var(--ka-plum); color: #FFFFFF; display: grid; place-items: center; font-weight: 500; font-size: 17px; }
.ka-chosen { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ka-chosen figure { margin: 0; aspect-ratio: 1; border-radius: 10px; overflow: clip; }

/* ============================== 7 · Encore inside the chat (the agents section) ============================== */
/* .ka-made: what an agent made, as it lands in the conversation. Encore's name, the Flow and its steps, the link. */
.ka-made { width: min(100%, 460px); border: 1px solid var(--ka-hair); border-radius: 16px; background: #FFFFFF; overflow: clip; color: var(--ka-plum); text-align: left; }
.ka-made-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--ka-canvas); border-bottom: 1px solid var(--ka-hair); }
.ka-made-top .brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 20px; letter-spacing: -.01em; }
.ka-made-top .brand svg { width: 22px; height: 22px; }
.ka-made-top small { font-size: 14px; color: var(--ka-mute); }
.ka-made-in { padding: 16px 16px 14px; }
.ka-made-in h5 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.1; letter-spacing: -.01em; }
.ka-made-in p { margin-top: 4px; font-size: 14px; color: var(--ka-mute); }
.ka-made-steps { margin-top: 14px; display: grid; gap: 8px; }
.ka-made-steps span { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; font-size: 15px; }
.ka-made-steps span small { font-size: 14px; color: var(--ka-mute); }
.ka-made-steps svg { width: 20px; height: 20px; }
.ka-made-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--ka-hair); }
.ka-made-foot .ka-url { min-width: 0; text-overflow: ellipsis; justify-self: auto; height: 30px; padding: 0 12px; background: var(--ka-field); box-shadow: none; }
.ka-made-foot b { height: 34px; padding: 0 16px; border-radius: 999px; background: var(--ka-plum); color: #FFFFFF; display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; white-space: nowrap; }

/* ============================== Narrow windows: the same app, cropped to what matters ============================== */
@container ka (max-width: 1080px) {
  .ka-dots span:nth-child(n+9) { display: none; }
  .ka-tabs span:not(.is-on), .ka-tabs .sep { display: none; }
  .ka-crumbs > :not(.now) { display: none; }
  .ka-ptool p { display: none; }
  .ka-pin { display: none; }
  .ka-htitle > span:not(.ka-tabs) { display: none; }
  .ka-form .ka-body { grid-template-columns: 260px minmax(0, 1fr); }
  .ka-cmp .ka-body { grid-template-columns: minmax(0, 1fr) 260px; }
  .ka-crumbs .mid { display: none; }
  .ka-heard .ka-body { gap: 40px; }
  .ka-hleft h4, .ka-flow-step h4 { font-size: 44px; }
  .ka-slides { padding: 44px 28px 0; }
  .ka-card { font-size: 26px; padding: 12px 16px; }
  .ka-pair { gap: 14px; }
}
@container ka (max-width: 780px) {
  .ka-bar { padding: 0 18px; gap: 12px; }
  .ka-crumbs > :not(.now):not(.ka-saved) { display: none; }
  .ka-acts .ka-act { display: none; }
  .ka-form .ka-body { grid-template-columns: minmax(0, 1fr); padding: 18px 18px 0; }
  .ka-rail { display: none; }
  .ka-cmp .ka-body { grid-template-columns: minmax(0, 1fr); padding: 18px 18px 0; }
  .ka-side { display: none; }
  .ka-pool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ka-flow .ka-body { grid-template-columns: minmax(0, 1fr); padding: 22px 18px 0; }
  .ka-flow-step { display: none; }
  .ka-flow-card { height: calc(var(--ka-h) - 22px); }
  .ka-flow-head { padding: 18px 18px 0; }
  .ka-flow-name .lanes { display: none; }
  .ka-stops { --stops: 3; overflow: hidden; }
  .ka-stop:nth-child(n+4) { display: none; }
  .ka-stop:nth-child(3) .bar::after { display: none; }
  .ka-heard .ka-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding: 24px 18px 0; gap: 0; }
  .ka-hleft p, .ka-hleft .ka-nums, .ka-hleft .ka-pin { display: none; }
  .ka-hleft h4 { font-size: 36px; margin: 12px 0 24px; }
  .ka-tabs span:not(.is-on), .ka-tabs .sep { display: none; }
  .ka-htitle { padding: 4px 18px 0; }
  .ka-mason { columns: 3 140px; }
  .ka-board .ka-body { padding: 20px 18px 0; }
  .ka-board .ka-body > .ka-mason { top: 60px; left: 18px; right: 18px; }
  .ka-resp { padding: 20px 20px 0; }
  .ka-rscreen { margin-top: 26px; }
  .ka-rscreen .ka-q { font-size: 34px; }
  .ka-rtop .ka-chip { display: none; }
  .ka-rgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container ka (max-width: 520px) {
  .ka-made-foot .ka-url { display: none; }
  .ka-made-foot { justify-content: flex-end; }
  .ka-bar { height: 52px; }
  .ka-logo { font-size: 22px; padding-right: 12px; }
  .ka-crumbs .now { max-width: 120px; }
  .ka-saved { display: none; }
  .ka-ptool { height: auto; padding: 12px; }
  .ka-ptool p { display: none; }
  .ka-fmt { width: 100%; }
  .ka-fmt span { flex: 1; padding: 8px 12px; }
  .ka-slides { padding: 32px 20px 0; }
  .ka-q { font-size: 28px; }
  .ka-pair { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .ka-pair .ka-or { display: none; }
  .ka-card { font-size: 26px; min-height: 64px; }
  .ka-sfoot { margin-top: 24px; }
  .ka-dots span:nth-child(n+5) { display: none; }
  .ka-classic { padding: 28px 20px 0; }
  .ka-ctitle { font-size: 36px; }
  .ka-cq .ka-card { font-size: 24px; }
  .ka-mason { columns: 2 120px; column-gap: 12px; }
  .ka-mason figure { margin-bottom: 12px; }
  .ka-tools { gap: 16px; padding: 0 18px; font-size: 15px; height: 48px; bottom: 16px; }
  .ka-tools span:nth-child(2) { display: none; }
  .ka-pool { padding: 16px; }
  .ka-pool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ka-cmp-top .ka-seg--wide span { padding: 0 16px; }
  .ka-cmp-top > span:last-child { display: none; }
  .ka-pr { grid-template-columns: 1fr; gap: 10px; }
  .ka-stops { --stops: 2; }
  .ka-stop:nth-child(n+3) { display: none; }
  .ka-stop:nth-child(2) .bar::after { display: none; }
  .ka-stop { padding-right: 24px; }
  .ka-stop .l { font-size: 15px; gap: 8px; }
  .ka-stop .l .ka-ico { width: 18px; height: 18px; }
  .ka-flow-name > span { display: none; }
  .ka-hleft h4 { font-size: 32px; }
  .ka-htitle h4 { font-size: 24px; }
  .ka-htitle > span:not(.ka-tabs) { display: none; }
  .ka-tiles { gap: 3px; }
  .ka-tiles i { width: 14px; height: 26px; }   /* KIT2: 16 tiles = 269px, inside a 307px phone window */
  .ka-tabs span.is-on { flex-shrink: 1; }
  .ka-htitle { flex-wrap: wrap; row-gap: 0; }
  .ka-htitle .ka-tabs { margin-left: 0; flex-basis: 100%; }
  .ka-chrome { grid-template-columns: 52px 1fr 20px; padding: 0 12px; }
  .ka-resp { padding: 16px 16px 0; }
  .ka-rscreen { margin-top: 22px; }
  .ka-rscreen .ka-q { font-size: 28px; }
  .ka-studio { font-size: 19px; }
  .ka-rpair { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
  .ka-rpair .ka-or { display: none; }
  .ka-rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ka-wcard { padding: 28px 24px; }
  .ka-wcard h4 { font-size: 34px; }
}


/* ============================== R4c · Addendum 9: asset UI is responsive ==============================
   The windows reflow like the real app does at each width; nothing is a shrunken desktop screenshot (no scale,
   no crop). Studio: columns stack, side panels collapse, the Sequence rail becomes a row of tabs over the preview.
   Respondent page (.ka-resp) on a phone: what /d/[slug] and /m/[token] look like at 390 (app-refs/respondent-
   welcome-390.png and the runtime's own phone rules): a phone address bar, the step chip on top, one column,
   word cards stacked with "or" between them, the Comparison pair stacked, the Moodboard one picture wide, and a
   phone-tall page that fades out at the bottom where it would scroll on. */
@container ka (max-width: 780px) {
  /* The Sequence rail as tabs over the preview (a row that scrolls on; kit-app.js keeps only whole tabs). */
  .ka-form .ka-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); row-gap: 14px; }
  .ka-form .ka-rail { display: flex; gap: 8px; contain: none; overflow: clip; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
  .ka-form .ka-rhead, .ka-form .ka-sec { display: none; }
  .ka-form .ka-row { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ka-hair); }
  .ka-form .ka-row + .ka-row { margin-top: 0; }
  .ka-form .ka-row::before { display: none; }
  .ka-form .ka-row > span:last-child { display: contents; }
  .ka-form .ka-row .t { display: none; }
  .ka-form .ka-row .ka-tag { margin: 0; height: auto; padding: 0; background: none; font-size: 15px; color: var(--ka-plum); }
  .ka-form .ka-row.is-on { background: var(--ka-tint); box-shadow: none; }
  .ka-form .ka-row.is-on .ka-tag { background: none; font-weight: 500; }
  /* Flow: the step's text gives way to its live preview; the window is as tall as the preview needs (no dead half),
     and the question sits in the middle of the card, as the respondent page centres it. */
  .ka-win.ka-flow > .ka-body { min-height: 0; }
  .ka-flow-card { height: auto; min-height: 0; }
  .ka-flow-card .ka-rscreen { justify-content: center; }
}
@container ka (max-width: 520px) {
  .ka-chrome { grid-template-columns: minmax(0, 1fr); height: 44px; padding: 0 10px; }
  .ka-chrome .dots, .ka-chrome > span:empty { display: none; }
  .ka-chrome .ka-url { width: 100%; justify-content: center; height: 30px; }
  .ka-resp { padding: 14px 16px 0; }
  .ka-browser .ka-resp { max-height: 680px; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 64px), transparent); }
  .ka-rtop { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ka-rtop .ka-studio, .ka-rtop > span:empty { display: none; }
  .ka-rtop .ka-chip { display: inline-flex; height: 34px; padding: 0 14px; font-size: 15px; max-width: 100%; }
  .ka-rtop .ka-chip small { font-size: 14px; }
  .ka-rscreen { margin-top: 28px; }
  .ka-rscreen .ka-q { font-size: 28px; }
  /* Scoped to a respondent page (or the Form studio's preview of one), so the small pieces of UI in P4 cards keep
     their own compact layout. */
  :is(.ka-rscreen, .ka-slides) .ka-pair { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  :is(.ka-rscreen, .ka-slides) .ka-pair .ka-or { display: block; text-align: center; font-size: 14px; }
  :is(.ka-rscreen, .ka-slides) .ka-dots { justify-content: flex-start; width: 100%; overflow: clip; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  :is(.ka-rscreen, .ka-slides) .ka-dots span:nth-child(n+5) { display: grid; }
  :is(.ka-rscreen, .ka-slides) .ka-dots span:nth-child(n+7) { display: none; }
  .ka-browser .ka-rscreen > .ka-rgrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ka-browser .ka-rscreen > .ka-rpair { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ka-browser .ka-rscreen > .ka-rpair .ka-or { display: grid; place-items: center; justify-self: center; width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ka-hair); font-size: 14px; }
  .ka-wcard { padding: 28px 22px 26px; }
}
@media (max-width: 600px) { .ka-who em { display: none; } }

/* The window's own height and corners follow the viewport (a container can't restyle itself). */
@media (max-width: 900px) {
  .ka { --ka-h: 560px; }
  .ka-win--bleed-r, .ka-win--bleed-l { border: 1px solid var(--ka-hair); border-radius: 20px; }
}
@media (max-width: 600px) { .ka { --ka-h: 500px; } .ka-win { border-radius: 16px; } }

/* =====================================================================================================
   Section patterns (R4): five shapes every page builds from, so the site reads as one hand.
   The bar: Comparison's page (one idea per section, a short line, one big plain visual, lots of air) and
   Forms' "Or ask them as part of a Flow" (centred line, one wide visual, nothing else). KIT-APP.md says why.
   ===================================================================================================== */

/* ---------- P2 · Feature: headline, one line, one big visual, negative space ---------- */
.pat-feature { padding-top: var(--sec); }
.pat-feature-head { text-align: center; max-width: 760px; margin: 0 auto; }
.pat-feature-head .body, .pat-feature-head .lede { margin-top: 18px; }
.pat-feature-head .qlink { margin-top: 10px; }
.pat-feature-vis { margin-top: max(48px, calc(var(--vw) * 4.445)); }
.pat-feature-vis.wide { width: min(calc(100% - var(--gut) * 2), calc(var(--col) + 160px)); margin-inline: auto; }
/* Split: text in a narrow column, the visual takes the rest and may run off the edge (.ka-win--bleed-r). */
.pat-feature--split .pat-feature-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: max(40px, calc(var(--vw) * 5)); align-items: center; }
.pat-feature--split .pat-feature-head { text-align: left; margin: 0; max-width: 420px; }
.pat-feature--split .pat-feature-vis { margin-top: 0; }
.pat-feature--split.flip .pat-feature-in { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.pat-feature--split.flip .pat-feature-head { order: 2; }
.pat-feature--split .bleed { margin-right: calc((100vw - min(calc(100vw - var(--gut) * 2), var(--col))) / -2); }
.pat-feature--split.flip .bleed { margin-right: 0; margin-left: calc((100vw - min(calc(100vw - var(--gut) * 2), var(--col))) / -2); }

/* ---------- P3 · Walk: the sticky walkthrough (pinned, scrubbed by scroll; kit-app.js drives it) ---------- */
.pat-walk { --steps: 4; position: relative; height: calc(var(--steps) * 92svh + 8svh); margin-top: var(--sec); }
.pat-walk-pin { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; padding: max(16px, calc(var(--vw) * 1.8)) 0 max(20px, calc(var(--vw) * 2)); overflow: clip; }
.pat-walk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.pat-walk-head .h2 { max-width: 640px; }
.pat-walk-head .body { max-width: 400px; }
.pat-walk-tabs { margin-top: max(18px, calc(var(--vw) * 2.2)); display: grid; grid-template-columns: repeat(var(--steps), minmax(0, 1fr)); gap: 16px; }
.pat-walk-tab { display: block; padding: 0 0 12px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--mute); font: 500 17px/1.3 var(--sans); position: relative; transition: color .3s var(--ease-out); }
.pat-walk-tab::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--hair); }
.pat-walk-tab::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--plum); width: calc(var(--f, 0) * 100%); }
.pat-walk-tab .ka-ico { width: 20px; height: 20px; vertical-align: -4px; margin-right: 8px; }
.pat-walk-tab[aria-selected="true"] { color: var(--plum); }
.pat-walk-tab:hover { color: var(--plum); }
.pat-walk-stage { position: relative; flex: 1; min-height: 0; margin-top: max(16px, calc(var(--vw) * 1.8)); }
.pat-walk-panel { position: absolute; inset: 0; display: flex; flex-direction: column; }
.js .pat-walk-panel { opacity: 0; visibility: hidden; }
.js .pat-walk-panel.is-on { opacity: 1; visibility: visible; }
.pat-walk-panel .ka-win { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pat-walk-panel .ka-body { flex: 1; height: auto; min-height: 0; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent); }
.pat-walk-panel .ka { --ka-h: 100%; }
/* KIT2: inside the walk the stage sets the window's size, so the windows keep their pre-KIT2 behaviour there. */
.pat-walk-panel .ka-win { aspect-ratio: auto; }
.pat-walk-panel .ka-win > .ka-body { flex: 1 1 0; min-height: 0; }
.pat-walk-panel .ka-pbody > .ka-slides { position: absolute; inset: 0; min-height: 0; }
.pat-walk-cap { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 16px; }
.pat-walk-cap p { font-size: 18px; color: var(--plum); }
.pat-walk-cap .qlink { padding: 8px 4px; }
/* Short windows (laptops at 768 tall): the head gives the stage its room. */
@media (min-width: 601px) and (max-height: 820px) {
  .pat-walk-head .h2 { font-size: max(32px, calc(var(--vw) * 2.8)); }
  .pat-walk-head .body { display: none; }
  .pat-walk-tabs { margin-top: 14px; }
  .pat-walk-stage { margin-top: 14px; }
}
/* Without script: the steps stack, each with its own label, no pin. */
html:not(.js) .pat-walk { height: auto; }
html:not(.js) .pat-walk-pin { position: static; height: auto; }
html:not(.js) .pat-walk-tabs { display: none; }
html:not(.js) .pat-walk-stage { display: grid; gap: 48px; }
html:not(.js) .pat-walk-panel { position: relative; height: 640px; }

/* ---------- P4 · Grid: each item is a tiny visual, not a list line ---------- */
.pat-grid { padding-top: var(--sec); }
/* KIT2 (Addendum 7, ruling 3): generous air between cards in a row and between rows. */
.pat-grid-list { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); column-gap: max(28px, calc(var(--vw) * 3)); row-gap: max(56px, calc(var(--vw) * 4.8)); margin-top: var(--sec-head); }
.pat-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.pat-card-vis { position: relative; height: var(--vis-h, 240px); border-radius: 22px; display: grid; place-items: center; padding: 24px; overflow: clip; }
:where(.pat-card-vis) { background: var(--plane); }   /* a wash class on the same element (w-lavpale…) wins */
.pat-card-t { margin-top: 20px; font-family: var(--serif); font-size: 24px; line-height: 1.15; letter-spacing: -.01em; }
.pat-card-b { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--mute); }
.pat-card-go { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; }
.pat-card-go svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
a.pat-card:hover .pat-card-go svg { transform: translateX(2px); }
a.pat-card:hover .pat-card-vis { filter: brightness(1.02); }

/* ---------- P1 · Hero lives in site.css (.hero--glow / .page-hero); P5 · Close is .close in site.css ---------- */

@media (max-width: 1100px) {
  .pat-grid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
}
@media (max-width: 900px) {
  .pat-feature--split .pat-feature-in, .pat-feature--split.flip .pat-feature-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pat-feature--split .pat-feature-head { max-width: none; }
  .pat-feature--split.flip .pat-feature-head { order: 0; }
  .pat-feature--split .bleed, .pat-feature--split.flip .bleed { margin-inline: 0; }
  .pat-walk-head .body { display: none; }
}
@media (max-width: 600px) {
  .pat-walk { height: calc(var(--steps) * 88svh + 12svh); }
  .pat-walk-head .h2 { font-size: 32px; }
  .pat-walk-tabs { gap: 8px; }
  .pat-walk-tab { font-size: 15px; }
  .pat-walk-tab .ka-ico { display: none; }
  .pat-walk-cap p { font-size: 16px; }
  .pat-walk-cap .qlink { display: none; }
  .pat-grid-list { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .pat-card-vis { height: var(--vis-h-phone, 220px); }
}
.pat-walk-caps { flex: none; }
.pat-walk-cap[hidden] { display: none; }

/* =====================================================================================================
   KIT2 additions (26 Oct): P6 the brand mosaic split, 3.8 the chat window, 3.9 the MCP wall.
   (P7, the FAQ, lives in assets/faq.css.)
   ===================================================================================================== */

/* ---------- P6 · Brand mosaic split (.mz): Josh's loved section (kit/josh-r4-loved-client-section.png) ----------
   A calm half with a small kicker, a big serif line and one line under it; the other half is the stair-step brand
   mosaic in plum, pink, lavender and peach, with a white card from the respondent page floating on it.
   Source: the brand-system Push 2 pieces; first built by lane C (assets/page-mosaic.css, same class names, so a page
   that links both gets the same result). The mosaic is assets/img/kit-mosaic.svg (no inline SVG needed). */
.mz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(640px, calc(100svh - var(--nav-h)), 900px); }
.mz-copy {
  display: flex; flex-direction: column; justify-content: center; min-width: 0;
  padding: 72px max(40px, calc(var(--vw) * 6)) 96px calc((100vw - min(calc(100vw - var(--gut) * 2), var(--col))) / 2);
}
.mz-kick { font-size: 17px; color: var(--mute); }
.mz-copy .h1, .mz-copy .h2 { margin-top: 16px; text-wrap: balance; }
.mz-copy .h1 { font-size: min(var(--fs-display), 76px); }
.mz-copy .lede { margin-top: 24px; max-width: 520px; }
.mz-copy .body { margin-top: 20px; max-width: 480px; }
.mz-acts { margin-top: 36px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.mz-side { position: relative; overflow: clip; display: grid; place-items: center; padding: 72px 40px; background: var(--plum) url("/site/v11/s/819b7daf146f41d5.svg") center / cover no-repeat; }
.mz-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mz-card { position: relative; z-index: 1; width: min(100%, 420px); background: #FFFFFF; border-radius: 36px; padding: 44px 40px 36px; color: var(--plum); text-align: left; }
.mz-card .ka-studio { font-size: 22px; }
.mz-card .ka-rule { margin: 34px 0 22px; }
.mz-card small { display: block; font-size: 15px; color: var(--ka-mute); }
.mz-card h2, .mz-card h4 { margin: 10px 0 0; font-family: var(--serif); font-weight: 400; font-size: 38px; line-height: 1.08; letter-spacing: -.02em; }
.mz-card p { margin-top: 16px; font-size: 17px; line-height: 1.55; color: var(--ka-mute); }
.mz-card ul { margin-top: 22px; display: grid; gap: 12px; list-style: none; padding: 0; }
.mz-card li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.mz-card .go { margin-top: 30px; height: 52px; border-radius: 999px; background: var(--ka-plum); color: #FFFFFF; display: grid; place-items: center; font-weight: 500; font-size: 17px; }
.mz-card .mz-note { margin-top: 16px; font-size: 15px; text-align: center; }
.mz--flip .mz-copy { order: 2; padding-left: max(40px, calc(var(--vw) * 6)); padding-right: calc((100vw - min(calc(100vw - var(--gut) * 2), var(--col))) / 2); }
.mz--band { margin-top: var(--sec); min-height: 0; }
.mz--band .mz-side { min-height: 720px; }
@media (max-width: 900px) {
  .mz, .mz--band { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mz-copy, .mz--flip .mz-copy { order: 0; padding: 56px var(--gut) 56px; }
  .mz-side, .mz--band .mz-side { min-height: 0; padding: 56px var(--gut); }
}
@media (max-width: 600px) {
  .mz-copy, .mz--flip .mz-copy { padding: 40px var(--gut) 44px; }
  .mz-side, .mz--band .mz-side { padding: 48px 20px; }
  .mz-card { border-radius: 28px; padding: 32px 26px 28px; }
  .mz-card h2, .mz-card h4 { font-size: 32px; }
  .mz-card .ka-rule { margin-top: 26px; }
}

/* ---------- 3.8 · The chat window (.ka-chat): Claude or ChatGPT on a desktop screen (Addenda 5 and 7) ----------
   A desktop app window: the sidebar of recent chats, the conversation, the composer. Sized to its content (no empty
   chat height, no fixed frame), and wide, so it reads as a screen, never an iPad. Keep the thread short: the ask,
   one collapsed tool row, the reply with what Encore made (.ka-made), and the composer.
   Skins: .ka-chat--claude (warm ground, serif replies, orange send) and .ka-chat--gpt (white, pill composer). */
.ka-chat { width: 100%; max-width: 1120px; margin-inline: auto; display: flex; border-radius: 18px; overflow: clip; font-size: 15px; }
.kc-side { flex: 0 0 236px; display: flex; flex-direction: column; gap: 4px; padding: 16px 12px 14px; min-width: 0; }
.kc-name { display: flex; align-items: center; justify-content: space-between; padding: 2px 10px 12px; font-family: var(--serif); font-size: 21px; letter-spacing: -.01em; }
.kc-name svg { width: 18px; height: 18px; opacity: .7; }
.kc-new, .kc-rec { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kc-new svg { width: 18px; height: 18px; flex: none; }
.kc-label { margin: 14px 10px 4px; font-size: 14px; }
.kc-rec { display: block; line-height: 36px; }
.kc-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 10px 0; font-size: 14px; }
.kc-me i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 14px; font-weight: 500; flex: none; }
.kc-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.kc-top { height: 56px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; }
.kc-title { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; font-size: 15px; }
.kc-title svg { width: 12px; height: 12px; flex: none; }
.kc-share { height: 32px; padding: 0 14px; border-radius: 8px; display: inline-flex; align-items: center; font-size: 14px; flex: none; }
.kc-col { width: min(680px, calc(100% - 64px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.kc-thread { padding: 4px 0 4px; }
.kc-col > * { min-width: 0; }
.kc-user { justify-self: end; max-width: 82%; padding: 10px 16px; font-size: 15px; line-height: 1.5; }
.kc-say { font-size: 16px; line-height: 1.6; }
.kc-tool { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; }
.kc-tool .ka-ico { width: 18px; height: 18px; }
.kc-tool b { font-weight: 500; white-space: nowrap; }
.kc-tool span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-tool svg { width: 12px; height: 12px; flex: none; margin-left: auto; }
.kc-chip { display: inline-flex; align-items: center; gap: 10px; justify-self: start; max-width: 100%; padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.kc-chip svg { width: 16px; height: 16px; flex: none; }
.kc-chip b { font-weight: 500; } .kc-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-chat .ka-made, .ka-chat .ka-made { width: min(100%, 460px); }
.kc-compose { flex: none; padding: 18px 0 22px; }
.kc-box { width: min(680px, calc(100% - 64px)); margin: 0 auto; }
.kc-ph { font-size: 15px; }
.kc-row { margin-top: 16px; display: flex; align-items: center; gap: 10px; }
.kc-btn { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.kc-btn svg { width: 16px; height: 16px; }
.kc-conn { margin-left: auto; font-size: 14px; }
.kc-send { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.kc-send svg { width: 16px; height: 16px; }

/* Claude, light */
.ka-chat--claude { background: #FAF9F5; color: #141413; box-shadow: inset 0 0 0 1px rgba(20, 20, 19, .12); }
.ka-chat--claude .kc-side { background: #F5F4EE; border-right: 1px solid rgba(20, 20, 19, .08); color: #3D3D3A; }
.ka-chat--claude .kc-name { color: #141413; }
.ka-chat--claude .kc-label { color: #6B6A63; }
.ka-chat--claude .kc-rec.is-on { background: #E9E6DC; color: #141413; }
.ka-chat--claude .kc-me i { background: #E9E6DC; color: #3D3D3A; }
.ka-chat--claude .kc-title { color: #3D3D3A; } .ka-chat--claude .kc-title b { font-weight: 500; color: #141413; }
.ka-chat--claude .kc-share { box-shadow: inset 0 0 0 1px rgba(20, 20, 19, .14); background: #FFFFFF; color: #141413; }
.ka-chat--claude .kc-user { background: #F0EEE6; border-radius: 12px; color: #141413; }
.ka-chat--claude .kc-say { font-family: var(--serif); font-size: 17px; line-height: 1.6; color: #141413; }
.ka-chat--claude .kc-tool { padding: 10px 14px; border-radius: 10px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(20, 20, 19, .12); color: #6B6A63; }
.ka-chat--claude .kc-tool b { color: #141413; }
.ka-chat--claude .kc-chip { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(20, 20, 19, .12); color: #141413; }
.ka-chat--claude .kc-chip span { color: #6B6A63; }
.ka-chat--claude .kc-box { padding: 14px 14px 12px 18px; border-radius: 20px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(20, 20, 19, .14); }
.ka-chat--claude .kc-ph { color: #6B6A63; }
.ka-chat--claude .kc-btn { box-shadow: inset 0 0 0 1px rgba(20, 20, 19, .14); color: #3D3D3A; }
.ka-chat--claude .kc-conn { color: #3D3D3A; }
.ka-chat--claude .kc-send { background: #C96442; color: #FFFFFF; }

/* ChatGPT, light */
.ka-chat--gpt { background: #FFFFFF; color: #0D0D0D; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.ka-chat--gpt .kc-side { background: #F9F9F9; border-right: 1px solid rgba(0, 0, 0, .06); color: #0D0D0D; }
.ka-chat--gpt .kc-name { font-family: var(--sans); font-size: 18px; font-weight: 500; }
.ka-chat--gpt .kc-label { color: #5D5D5D; }
.ka-chat--gpt .kc-rec.is-on { background: #ECECEC; }
.ka-chat--gpt .kc-me i { background: #5E8C6A; color: #FFFFFF; }
.ka-chat--gpt .kc-title { font-size: 18px; } .ka-chat--gpt .kc-title b { font-weight: 500; }
.ka-chat--gpt .kc-title svg { color: #5D5D5D; }
.ka-chat--gpt .kc-share { border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.ka-chat--gpt .kc-user { background: #F4F4F4; border-radius: 22px; padding: 10px 18px; }
.ka-chat--gpt .kc-say { line-height: 1.7; }
.ka-chat--gpt .kc-tool { color: #5D5D5D; }
.ka-chat--gpt .kc-tool b { color: #5D5D5D; font-weight: 400; }
.ka-chat--gpt .kc-tool svg { margin-left: 0; }
.ka-chat--gpt .kc-chip { background: #F4F4F4; border-radius: 14px; }
.ka-chat--gpt .kc-chip span { color: #5D5D5D; }
.ka-chat--gpt .kc-box { height: 56px; padding: 0 10px 0 16px; border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); display: flex; align-items: center; gap: 10px; }
.ka-chat--gpt .kc-box .kc-ph { flex: 1; color: #6E6E6E; }
.ka-chat--gpt .kc-btn { border-radius: 50%; color: #0D0D0D; }
.ka-chat--gpt .kc-send { border-radius: 50%; background: #0D0D0D; color: #FFFFFF; width: 36px; height: 36px; }

/* The window's caption: plain about what works where (never a tested partnership we haven't tested) */
.ka-chat-cap { margin-top: 16px; text-align: center; font-size: 15px; color: var(--mute); }
.on-plum .ka-chat-cap { color: rgba(246, 243, 238, .82); }

@container ka (max-width: 820px) {
  .kc-side { display: none; }
}
@container ka (max-width: 520px) {
  .kc-col, .kc-box { width: calc(100% - 32px); }
  .kc-top { padding: 0 16px; }
  .kc-user { max-width: 92%; }
  .ka-chat--claude .kc-say { font-size: 16px; }
  .kc-conn { display: none; }
  .kc-tool span { display: none; }   /* R4c: the tool names drop on a phone; "Used Encore" stays (no line runs off the screen) */
  .ka-chat .ka-made-foot .ka-url { display: none; }
}

/* ---------- 3.9 · The MCP wall (.mcpw): the agents Encore works with (Addendum 7, ruling 11) ----------
   Learned from Buffer's homepage wall (one calm row of familiar marks, at rest, that say "this fits what you use"),
   not copied: here Encore is the hub in the middle and one hairline runs through every mark, because they all
   connect the same way, over MCP. Marks are simple monochrome SVG drawn for this site; never fetched or hotlinked.
   Honest labels: only Claude says "Works with Encore" (tested on claude.ai, Desktop and Code). The rest are apps that
   can add a remote MCP server with a sign-in; they say "Speaks MCP". Add .mcpw--plum on a plum ground. */
.mcpw { position: relative; container: mcpw / inline-size; --g: max(14px, calc(var(--vw) * 1.6)); }
.mcpw-row { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--g); list-style: none; margin: 0; padding: 0; --m: min(120px, calc((100cqw - 6 * var(--g)) / 7)); }
.mcpw-row::before { content: ""; position: absolute; left: 4%; right: 4%; top: calc(var(--m) / 2); height: 1px; background: var(--hair-strong); opacity: var(--mcpw-line, 1); }
.mcpw-t { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.mcpw-m { width: var(--m); aspect-ratio: 1; border-radius: 30px; display: grid; place-items: center; background: var(--plane); color: var(--plum); box-shadow: inset 0 0 0 1px var(--hair); }
.mcpw-m svg { width: 44%; height: 44%; }
.mcpw-t b { margin-top: 16px; font-weight: 500; font-size: 17px; line-height: 1.3; }
.mcpw-t small { margin-top: 4px; font-size: 14px; color: var(--mute); line-height: 1.35; }
.mcpw-t.is-hub .mcpw-m { background: var(--plum); box-shadow: none; }
.mcpw-t.is-hub .mcpw-m svg { width: 40%; height: 40%; }
.mcpw-t.is-tested small { color: var(--plum); }
.mcpw-t.is-tested small::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #2BA89E; vertical-align: 1px; }
.mcpw-note { margin: max(36px, calc(var(--vw) * 3.4)) auto 0; max-width: 640px; text-align: center; font-size: 16px; line-height: 1.6; color: var(--mute); }
/* On plum */
.mcpw--plum .mcpw-row::before { background: rgba(246, 243, 238, .22); }
.mcpw--plum .mcpw-m { background: #4A2D4C; color: var(--cream); box-shadow: inset 0 0 0 1px rgba(246, 243, 238, .14); }
.mcpw--plum .mcpw-t.is-hub .mcpw-m { background: var(--cream); }
.mcpw--plum .mcpw-t b { color: var(--cream); }
.mcpw--plum .mcpw-t small, .mcpw--plum .mcpw-note { color: rgba(246, 243, 238, .82); }
.mcpw--plum .mcpw-t.is-tested small { color: var(--cream); }
/* Scrubbed reveal (kit-app.js, only under .motion): the marks rise into the line one after another. */
.motion .mcpw[data-mcpw-scrub] .mcpw-t { will-change: transform, opacity; }
@media (max-width: 760px) {
  .mcpw-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .mcpw-row::before { display: none; }
  .mcpw-t.is-hub { grid-column: 1 / -1; order: -1; }
  .mcpw-t.is-hub .mcpw-m { width: 104px; }
  .mcpw-m { width: 92px; border-radius: 24px; }
  .mcpw-t b { font-size: 16px; margin-top: 12px; }
}

/* R5 ruling 6: <i> is used for bars, dots and swatches in the kit; the browser makes it italic by default and PP Neue Montreal has no italic, so glyphs (the flow-stop "+") were faux-slanted. */
.ka i { font-style: normal; }