/* Encore marketing site, round 3: the shared system (shell + components), extracted from J · Product stage.
   Every page links this file. Page-specific styles live in their own files (assets/home.css, product.css, pages.css).
   Reference: ../SHELL.md */
/* kit/tokens.css, inlined by the export */
/* Encore brand tokens for the homepage explorations. Link from a direction as ../kit/tokens.css */
@font-face { font-family: "Hedvig Letters Serif"; src: url("/fonts/HedvigLettersSerif-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url("/fonts/PPNeueMontreal-Book.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url("/fonts/PPNeueMontreal-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url("/fonts/PPNeueMontreal-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --serif: "Hedvig Letters Serif", Georgia, serif;
  --sans: "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif;
  --cream: #F6F3EE;  --white: #FFFFFF;
  --plum: #3A1E3C;   --plum-2: #4B3363; --plum-3: #5A3E5C; --ink: #1E1A24;
  --mute: #6E5A70;   /* secondary text on cream; passes contrast */
  --lav-1: #DBD6E9; --lav-2: #C8C2F0; --lav-3: #B3AAEC; --lav-4: #A197E1; --lav-5: #8F83D6; --lav-6: #7D70CB; --lav-7: #6C5CB2; --lav-8: #5B478B;
  --pink: #EDC9D8; --pink-2: #E6B8CD; --peach: #F7D6B8; --peach-2: #FFC9AE; --peach-3: #F7C3A8; --coral: #FF8A5B;
  --sky: #CFE2F6; --sky-2: #B9D3EE; --mint: #D7E7D6; --mint-2: #B8D6BC;
  /* The deck's washes: always vertical, light at the bottom */
  --wash-lavender: linear-gradient(180deg, #B4AAEA 0%, #C8C2F0 35%, #CFE2F6 100%);
  --wash-lavender-sky: linear-gradient(180deg, #B4AAEA 0%, #C8C2F0 40%, #C2D4F2 100%);
  --wash-sky-mint: linear-gradient(180deg, #B9D3EE 0%, #CFE2F6 40%, #D7E7D6 80%, #E6F0E4 100%);
  --wash-pink-peach: linear-gradient(180deg, #E6B8CD 0%, #EDC9D8 40%, #F7D6B8 85%, #FBE6D6 100%);
  --wash-dusk: linear-gradient(180deg, #C3BBEE 0%, #DCC6E6 30%, #EDC9D8 55%, #F7C3A8 80%, #FBDCC8 100%);
  --wash-lavender-pale: linear-gradient(180deg, #B4AAEA 0%, #C8C2F0 40%, #DCE6F8 85%, #EAEFFA 100%);
}


/* ============================== Tokens ============================== */
:root {
  /* The fluid unit: 1vw, but it stops growing at 1600px wide (Josh's monitors, 2026-10-24). */
  --vw: min(1vw, 16px);
  /* The held column: 1200px at 1440, grows with --vw to 1333px at 1600, then holds. */
  --col: max(1200px, calc(var(--vw) * 83.334));
  --gut: 24px;            /* outer gutter each side below the column width */
  --gap: 24px;            /* 12-col grid gap */

  /* Type scale (fluid, capped by --vw) */
  --fs-display: max(42px, calc(var(--vw) * 5.834)); /* 84px at 1440 */
  --fs-h2: max(34px, calc(var(--vw) * 3.612));      /* 52px at 1440 */
  --fs-h3: max(24px, calc(var(--vw) * 2.084));      /* 30px at 1440 */
  --fs-lede: max(17px, calc(var(--vw) * 1.389));    /* 20px at 1440 */
  --fs-body: max(17px, calc(var(--vw) * 1.25));     /* 18px at 1440 */
  --fs-small: 15px;

  /* Section rhythm */
  --sec: max(120px, calc(var(--vw) * 13.889));      /* 200px at 1440 */
  --sec-head: max(40px, calc(var(--vw) * 4.445));   /* 64px at 1440 */

  /* Lines, grounds, motion */
  --hair: rgba(58, 30, 60, .12);
  --hair-strong: rgba(58, 30, 60, .20);
  --hair-cream: rgba(246, 243, 238, .18);
  --mute: #6E5A70;
  --screen: linear-gradient(180deg, #F3F0FA 0%, #FAF9FD 42%, #FFFFFF 100%);
  --wash-peach: linear-gradient(180deg, #F7C3A8 0%, #F7D6B8 45%, #FBE6D6 100%);
  --wash-mint: linear-gradient(180deg, #B8D6BC 0%, #D7E7D6 45%, #EDF4EC 100%);
  --wash-sky: linear-gradient(180deg, #B9D3EE 0%, #CFE2F6 45%, #EAF1FA 100%);
  --wash-peach-deep: linear-gradient(180deg, #F4BB9D 0%, #F6CCAF 42%, #F5D6C0 100%);
  --tile-plum: #3A1E3C; --tile-pink: #EDC9D8; --tile-lav: #A99FE0; --tile-peach: #F7D6B8;
  --ease-out: cubic-bezier(.22, .7, .2, 1);
  --nav-h: 80px;

  /* Grounds (R4, 26 Oct 2026). Josh: the old cream "looks muddy". The page ground is white, like the app itself.
     --cream stays the colour of type and buttons on plum; it is never a page ground any more. */
  --ground: #FFFFFF;
  --plane: #F6F4FA;          /* a quiet lilac-white plane for a band or a card that needs to sit off the ground */
  --plane-2: #EFECF6;        /* one step deeper, for a plane on a plane */
}
@media (max-width: 600px) { :root { --nav-h: 64px; --gut: 16px; } }

/* ============================== Base ============================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--plum);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
/* R6: headings never fall back to the browser's bold; the serif is designed at 400 (Josh, 27 Oct: "font seems way too thick"). Zero specificity, so any explicit weight still wins. */
:where(h1, h2, h3, h4, h5, h6) { font-weight: 400; }
ul, ol { padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--lav-6); outline-offset: 3px; border-radius: 6px; }
.skip {
  position: fixed; top: 0; left: 16px; z-index: 100; padding: 12px 18px; border-radius: 0 0 12px 12px;
  background: var(--plum); color: var(--cream); font-size: 16px; text-decoration: none; transform: translateY(-110%);
}
.skip:focus-visible { transform: none; outline-color: var(--cream); }

/* ============================== Layout ============================== */
/* .wrap holds content to the column; grounds and strips may run edge to edge outside it. */
.wrap { width: min(calc(100% - var(--gut) * 2), var(--col)); margin-inline: auto; }
.wrap--narrow { width: min(calc(100% - var(--gut) * 2), calc(var(--col) * .667)); margin-inline: auto; }
/* 12-col grid inside the column. Place children with .c-<start>-<end> (grid lines 1..13). */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.c-1-13 { grid-column: 1 / 13; } .c-1-7 { grid-column: 1 / 7; } .c-7-13 { grid-column: 7 / 13; }
.c-1-6 { grid-column: 1 / 6; } .c-1-5 { grid-column: 1 / 5; } .c-1-8 { grid-column: 1 / 8; } .c-1-9 { grid-column: 1 / 9; }
.c-2-12 { grid-column: 2 / 12; } .c-3-11 { grid-column: 3 / 11; } .c-4-10 { grid-column: 4 / 10; }
.c-5-13 { grid-column: 5 / 13; } .c-6-13 { grid-column: 6 / 13; } .c-8-13 { grid-column: 8 / 13; } .c-9-13 { grid-column: 9 / 13; }
.c-2-7 { grid-column: 2 / 7; } .c-8-12 { grid-column: 8 / 12; } .c-6-12 { grid-column: 6 / 12; }
.sec { padding-top: var(--sec); }
.sec-head { margin-bottom: var(--sec-head); }
.sec-head .h2 + .body, .sec-head .h2 + .lede { margin-top: 20px; }
.sec-head.center { text-align: center; max-width: calc(var(--col) * .6); margin-inline: auto; }
.sec-head.left { max-width: calc(var(--col) * .54); }

/* ============================== Type ============================== */
.h1 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.022em; text-wrap: balance; }
.h2 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.018em; text-wrap: balance; }
.h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--plum); text-wrap: pretty; }
.body { font-size: var(--fs-body); line-height: 1.6; color: var(--mute); text-wrap: pretty; }
.small { font-size: var(--fs-small); line-height: 1.5; color: var(--mute); }
.on-plum .body, .on-plum .small { color: rgba(246, 243, 238, .82); }
.on-plum .h1, .on-plum .h2, .on-plum .h3, .on-plum .lede { color: var(--cream); }

/* ============================== Buttons and links ============================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--plum); color: var(--cream);
  font: 500 17px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--ease-out), transform .2s var(--ease-out), color .25s;
}
.btn:hover { background: #4E2C51; }
.btn:active { background: #2C1530; transform: translateY(1px); }
.btn--sm { height: 40px; padding: 0 18px; font-size: 15px; }
.btn--lg { height: 60px; padding: 0 34px; font-size: 18px; }
.btn--light { background: var(--cream); color: var(--plum); }
.btn--light:hover { background: #FFFFFF; }
.btn--light:active { background: #EDE6DC; }
.btn--light:focus-visible { outline-color: var(--cream); }
.btn--line { background: transparent; color: var(--plum); box-shadow: inset 0 0 0 1px var(--hair-strong); }
.btn--line:hover { background: rgba(58, 30, 60, .05); }
.qlink {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 6px;
  font: 500 17px/1 var(--sans); color: var(--plum); text-decoration: none; cursor: pointer; background: none; border: 0;
}
.qlink span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 3px; transition: background-size .3s var(--ease-out); }
.qlink:hover span { background-size: 100% 1px; }
.qlink:active { opacity: .8; }
.qlink svg { width: 14px; height: 14px; flex: none; transition: transform .3s var(--ease-out); }
.qlink:hover svg.down { transform: translateY(2px); }
.qlink:hover svg.right { transform: translateX(2px); }
.on-plum .qlink { color: var(--cream); }
.on-plum .qlink:focus-visible { outline-color: var(--cream); }

/* ============================== Nav ============================== */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  background: rgba(255, 255, 255, 0); box-shadow: inset 0 -1px 0 rgba(58, 30, 60, 0);
  transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .36s var(--ease-out);
}
/* Scrolling down slides it away, scrolling up brings it back (site.js). Transform only: no layout shift.
   Never hidden while a dropdown or the phone menu is open. Reduced motion: the swap is instant (rule at the end). */
.nav.is-hidden:not(.dd-open):not(.drawer-open) { transform: translateY(-100%); }
.nav.is-scrolled, .nav.dd-open {
  background: rgba(255, 255, 255, .94); box-shadow: inset 0 -1px 0 var(--hair);
}
.nav.is-scrolled { -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px); }
.nav-in { position: relative; height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.logo { justify-self: start; padding: 6px 0; font-family: var(--serif); font-size: 30px; line-height: 1; letter-spacing: -.01em; text-decoration: none; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-link, .nav-trig, .nav-sign {
  display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border: 0; border-radius: 999px; background: none;
  font-size: 16px; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color .25s var(--ease-out);
}
.nav-link:hover, .nav-trig:hover, .nav-sign:hover, .nav-trig[aria-expanded="true"] { background: rgba(58, 30, 60, .06); }
.nav-link:active, .nav-trig:active, .nav-sign:active { background: rgba(58, 30, 60, .1); }
.nav-trig svg { width: 12px; height: 12px; transition: transform .3s var(--ease-out); }
.nav-trig[aria-expanded="true"] svg { transform: rotate(180deg); }
/* The current page: a quiet underline on the item (or the dropdown holding it). */
.nav-link[aria-current="page"], .nav-item:has([aria-current="page"]) > .nav-trig { box-shadow: inset 0 -2px 0 -0px transparent; }
.nav-link[aria-current="page"] span, .nav-item:has([aria-current="page"]) > .nav-trig span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; }
.nav-end { justify-self: end; display: flex; align-items: center; gap: 8px; }
.nav-menu { display: none; }

/* Dropdown panels: hairline card, no shadow, under the nav. */
.nav-item { position: static; }
.dd {
  position: absolute; top: calc(100% - 8px); left: 50%; z-index: 51;
  width: min(calc(100vw - var(--gut) * 2), 880px); translate: -50% 0;
  background: #FFFFFF; border: 1px solid var(--hair); border-radius: 22px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease-out), transform .26s var(--ease-out), visibility 0s .26s;
}
.dd.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--ease-out), transform .3s var(--ease-out), visibility 0s; }
/* A closed panel (and everything in it, whatever a child sets) never takes the pointer: only an open menu can be
   clicked or hovered (R5 ruling 4). Nothing inside a hidden container may set visibility: visible; use inherit. */
.dd:not(.is-open), .dd:not(.is-open) * { pointer-events: none !important; }
.dd--narrow { width: min(calc(100vw - var(--gut) * 2), 720px); }
.dd-in { display: grid; grid-template-columns: 260px 1fr; }
.dd-lead {
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px; margin: 8px; padding: 22px 22px 20px; border-radius: 16px;
  background: var(--wash-lavender-pale); text-decoration: none; transition: filter .25s var(--ease-out);
}
.dd--uses .dd-lead { background: var(--wash-pink-peach); }
.dd-lead:hover { filter: brightness(1.03); }
.dd-lead .dd-name { font-family: var(--serif); font-size: 26px; line-height: 1.1; letter-spacing: -.01em; font-weight: 400; }
.dd-lead .dd-line { color: var(--plum); }
.dd-lead .dd-go { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.dd-lead .dd-go svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.dd-lead:hover .dd-go svg { transform: translateX(2px); }
.dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 8px 8px 8px 0; align-content: start; }
.dd--uses .dd-grid { grid-template-columns: 1fr; }
/* Two classes, so it outranks .dd-grid a below whatever the order: an icon-free list gets one column. */
.dd-grid.dd-grid--plain a { grid-template-columns: 1fr; }
.dd-grid a {
  display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; align-items: start; padding: 14px 14px; border-radius: 14px;
  text-decoration: none; transition: background-color .2s var(--ease-out);
}
.dd-grid a:hover, .dd-grid a:focus-visible { background: #F4F1F8; }
.dd-grid a[aria-current="page"] { background: #F1EDF7; }
.dd-ico { grid-row: span 2; width: 36px; height: 36px; border-radius: 10px; background: #EEEAF6; display: grid; place-items: center; }
.dd-ico svg { width: 20px; height: 20px; }
.dd-name { display: block; font-size: 16px; font-weight: 500; line-height: 1.3; }
.dd-line { display: block; margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--mute); }
.dd-grid a[aria-current="page"] .dd-name::after { content: " · You’re here"; font-weight: 400; color: var(--mute); font-size: 15px; }

/* Phone drawer with expandable groups */
.drawer { display: none; }

/* ============================== Stages and washes ============================== */
.stage { position: relative; border-radius: 32px; overflow: clip; }
.w-lavender { background: var(--wash-lavender); }
.w-lavsky { background: var(--wash-lavender-sky); }
.w-skymint { background: var(--wash-sky-mint); }
.w-dusk { background: var(--wash-dusk); }
.w-pinkpeach { background: var(--wash-pink-peach); }
.w-lavpale { background: var(--wash-lavender-pale); }
.w-peach { background: var(--wash-peach); }
.w-peachdeep { background: var(--wash-peach-deep); }
.w-mint { background: var(--wash-mint); }
.w-sky { background: var(--wash-sky); }
.w-plum { background: var(--plum); color: var(--cream); }
.w-cream, .w-plane { background: var(--plane); }
/* A crisp 1:1 product screen on a stage: hairline, no shadow. */
.screenbox { background: var(--screen); border: 1px solid var(--hair); border-radius: 24px; }
.panel { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 22px; }
/* Stage shapes */
.stage--bleed { margin-inline: var(--gut); border-radius: 40px; }
.stage--half { margin-left: max(var(--gut), calc((100% - var(--col)) / 2)); border-radius: 32px 0 0 32px; }
.stage--half-l { margin-right: max(var(--gut), calc((100% - var(--col)) / 2)); border-radius: 0 32px 32px 0; }

/* ============================== Segmented toggle ============================== */
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: #F1EEF5; }
.seg button {
  height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font-size: 15px; color: var(--mute); cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.seg button:hover { color: var(--plum); }
.seg button[aria-selected="true"], .seg button[aria-checked="true"] { background: #FFFFFF; color: var(--plum); box-shadow: inset 0 0 0 1px var(--hair); }
.seg--lg button { height: 44px; padding: 0 22px; font-size: 16px; }
.seg--on-plum { background: rgba(246, 243, 238, .1); }
.seg--on-plum button { color: rgba(246, 243, 238, .82); }
.seg--on-plum button:hover { color: var(--cream); }
.seg--on-plum button[aria-selected="true"], .seg--on-plum button[aria-checked="true"] { background: var(--cream); color: var(--plum); box-shadow: none; }
.js [data-seg-panel]:not(.is-on) { display: none; }

/* ============================== Plan card ============================== */
.plan { width: 440px; max-width: 100%; background: #FFFFFF; border: 1px solid var(--hair); border-radius: 22px; padding: 32px; }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.plan-name { font-family: var(--serif); font-size: 26px; line-height: 1; letter-spacing: -.01em; }
.plan .seg button { height: 40px; padding: 0 14px; }
.price { margin-top: 32px; display: flex; align-items: baseline; gap: 12px; }
.amt { font-family: var(--serif); font-size: 84px; line-height: .9; letter-spacing: -.03em; transition: opacity .2s var(--ease-out); }
.per { font-size: 18px; color: var(--mute); transition: opacity .2s var(--ease-out); }
.price.is-swapping .amt, .price.is-swapping .per { opacity: 0; }
.price-note { margin-top: 12px; font-size: 15px; color: var(--mute); min-height: 22px; }
.incl { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hair); display: grid; gap: 10px; }
.incl li { font-size: 16px; line-height: 1.45; display: grid; grid-template-columns: 18px 1fr; gap: 12px; }
.incl svg { width: 18px; height: 18px; margin-top: 2px; }
.plan .btn { margin-top: 26px; width: 100%; }
.plan-terms { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--mute); text-align: center; }

/* ============================== FAQ accordion ============================== */
.faq-card { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 22px; padding: 6px 36px; }
.qa { border-bottom: 1px solid var(--hair); }
.qa:last-child { border-bottom: 0; }
.qa h3 { font-weight: 400; }
.qa button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left;
  padding: 26px 0; border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1.4; font-weight: 500;
}
.qa button:hover .qi { background: rgba(58, 30, 60, .07); }
.qa button:active .qi { background: rgba(58, 30, 60, .12); }
.qi { position: relative; width: 36px; height: 36px; border-radius: 50%; flex: none; transition: background-color .25s var(--ease-out); }
.qi::before, .qi::after { content: ""; position: absolute; left: 11px; right: 11px; top: 17px; height: 2px; background: var(--plum); border-radius: 1px; transition: transform .35s var(--ease-out); }
.qi::after { transform: rotate(90deg); }
.qa.is-open .qi::after { transform: rotate(0deg); }
.qa-a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .42s var(--ease-out); }
.js .qa:not(.is-open) .qa-a { grid-template-rows: 0fr; }
.js .qa:not(.is-open) .qa-a > div { visibility: hidden; transition: visibility 0s .42s; }
.qa-a > div { overflow: hidden; }
.qa-a p { padding: 0 64px 28px 0; font-size: 18px; line-height: 1.6; color: var(--mute); }
.qa-a p + p { margin-top: -12px; }

/* ============================== Page hero + close (shared defaults; pages may vary them) ============================== */
.page-hero { padding-top: max(56px, calc(var(--vw) * 6.667)); }
.page-hero .lede { margin-top: 24px; max-width: 640px; }
.close { text-align: center; }
.close .h1 { max-width: calc(var(--col) * .75); margin-inline: auto; }
.close-acts { margin-top: 40px; display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.close-terms { margin-top: 20px; font-size: 15px; line-height: 1.5; color: var(--mute); text-wrap: balance; }

/* ============================== The glow hero (R4) ============================== */
/* From A · Answer it (round 1), the design Josh asked for back: "It started with the purple at the top, and it
   flowed down to a lighter color." Plum holds behind the headline, then the light comes up through violet,
   lavender, pink and peach into the white ground. Put .hero--glow on the page's first section; it slides up
   under the nav, and the nav turns cream over it until the page scrolls.
   --glow-hold: where the plum starts to lift (site.js sets it to the bottom of .glow-copy; 520px without JS).
   Markup: <section class="hero--glow" data-hero><div class="wrap glow-copy on-plum">h1, lede, acts</div>
           <div class="glow-visual">the app</div></section>
   Short variant (no visual under the copy): add .hero--glow-short. */
.hero--glow {
  --glow-hold: 520px;
  position: relative; margin-top: calc(var(--nav-h) * -1);
  padding-top: calc(var(--nav-h) + max(44px, calc(var(--vw) * 5.556)));
  padding-bottom: max(72px, calc(var(--vw) * 7.5));
  /* KIT2: one ramp that stays smooth at any height. Below the hold, each stop sits at the smaller of its fixed
     distance and its share of the light zone (the early, violet stops) or the larger of the two (the late, pink and
     peach stops), so the stops can never cross. A tall hero keeps the original rhythm; a short one compresses
     evenly instead of snapping from lavender to pink. */
  background: linear-gradient(180deg,
    #3A1E3C 0, #3A1E3C calc(var(--glow-hold) * .5), #452852 var(--glow-hold), #56417F min(calc(var(--glow-hold) + 120px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .14)),
    #7D70CB min(calc(var(--glow-hold) + 300px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .32)), #A197E1 min(calc(var(--glow-hold) + 430px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .45)), #C8C2F0 min(calc(var(--glow-hold) + 560px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .56)),
    #E3CDE6 max(calc(100% - 300px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .68)), #F3D3C6 max(calc(100% - 190px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .8)), #FBE6D9 max(calc(100% - 96px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .9)), var(--ground) 100%);
  background: linear-gradient(in oklab 180deg,
    #3A1E3C 0, #3A1E3C calc(var(--glow-hold) * .5), #452852 var(--glow-hold), #56417F min(calc(var(--glow-hold) + 120px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .14)),
    #7D70CB min(calc(var(--glow-hold) + 300px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .32)), #A197E1 min(calc(var(--glow-hold) + 430px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .45)), #C8C2F0 min(calc(var(--glow-hold) + 560px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .56)),
    #E3CDE6 max(calc(100% - 300px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .68)), #F3D3C6 max(calc(100% - 190px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .8)), #FBE6D9 max(calc(100% - 96px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .9)), var(--ground) 100%);
}
/* Short variant (no visual under the copy): the same ramp, with room under the copy for the light to come up. */
.hero--glow-short { padding-bottom: max(300px, calc(var(--vw) * 24)); }
.glow-copy { text-align: center; }
.glow-copy .h1 { max-width: calc(var(--col) * .86); margin-inline: auto; }
.glow-copy .lede { margin: 24px auto 0; max-width: 620px; color: rgba(246, 243, 238, .9); }
.glow-acts { margin-top: 36px; display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.glow-copy.left { text-align: left; }
.glow-copy.left .h1, .glow-copy.left .lede { margin-inline: 0; }
.glow-copy.left .glow-acts { justify-content: flex-start; }
.glow-visual { margin-top: max(48px, calc(var(--vw) * 5)); }
.hero--glow :focus-visible { outline-color: var(--cream); }
.hero--glow .glow-visual :focus-visible { outline-color: var(--lav-6); }

/* The nav over the glow: cream until the page scrolls (then the white ground comes back). */
body:has(> main > .hero--glow) .nav:not(.is-scrolled):not(.dd-open):not(.drawer-open) { color: var(--cream); }
body:has(> main > .hero--glow) .nav:not(.is-scrolled):not(.dd-open):not(.drawer-open) :is(.nav-link, .nav-trig, .nav-sign):hover { background: rgba(246, 243, 238, .12); }
body:has(> main > .hero--glow) .nav:not(.is-scrolled):not(.dd-open):not(.drawer-open) .nav-end .btn { background: var(--cream); color: var(--plum); }
body:has(> main > .hero--glow) .nav:not(.is-scrolled):not(.dd-open):not(.drawer-open) .nav-end .btn:hover { background: #FFFFFF; }
body:has(> main > .hero--glow) .nav:not(.is-scrolled):not(.dd-open):not(.drawer-open) .nav-menu { background: rgba(246, 243, 238, .14); color: var(--cream); }
body:has(> main > .hero--glow) .nav:not(.is-scrolled):not(.dd-open):not(.drawer-open) :focus-visible { outline-color: var(--cream); }

/* ============================== Stair-step mosaic + footer (the shell's end) ============================== */
/* The stepped divider: cream steps down into plum. Each tile is one person; no type ever sits on it. */
.stairs { --n: 24; margin-top: var(--sec); display: grid; }
.stair {
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--n), min(calc(100% / var(--n)), calc(var(--col) / 20))) minmax(0, 1fr);
  background: var(--plum);
}
.stair::before { content: ""; grid-column: 1 / var(--a); background: var(--ground); }
.stair i { aspect-ratio: 60 / 56; display: block; }
.stair .s-lav { background: var(--tile-lav); }
.stair .s-peach { background: var(--tile-peach); }
.stair .s-pink { background: var(--tile-pink); }
.foot { background: var(--plum); color: var(--cream); padding-top: max(72px, calc(var(--vw) * 8.889)); overflow: clip; }
.foot-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-bottom: 56px; }
.foot-cta { grid-column: 1 / 5; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.foot-cta p { font-family: var(--serif); font-size: 28px; line-height: 1.15; letter-spacing: -.01em; max-width: 300px; margin-bottom: 16px; }
.foot-cta .nav-sign { padding: 0; height: 44px; color: rgba(246, 243, 238, .86); }
.foot-cta .nav-sign:hover { background: none; color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
.foot-cols { grid-column: 6 / 13; display: grid; grid-template-columns: 1.3fr 1.3fr 1fr 1fr; gap: var(--gap); }
.foot-cols h2 { margin: 0 0 14px; font-family: var(--sans); font-size: 15px; font-weight: 500; color: rgba(246, 243, 238, .66); letter-spacing: 0; }
.foot-cols a { display: block; width: fit-content; padding: 5px 0; font-size: 16px; line-height: 1.4; text-decoration: none; color: rgba(246, 243, 238, .9); }
.foot-cols a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
.foot-cols a[aria-current="page"] { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.foot a:focus-visible { outline-color: var(--cream); }
.foot-base { display: flex; justify-content: space-between; gap: 24px; padding-top: 22px; border-top: 1px solid var(--hair-cream); font-size: 15px; color: rgba(246, 243, 238, .7); }
/* The giant wordmark: spans the held column, cropped close at the bottom like V8. */
.foot-mark { container-type: inline-size; margin-top: max(40px, calc(var(--vw) * 5.556)); }
.foot-mark span {
  display: block; font-family: var(--serif); font-weight: 400; font-size: 33.25cqw; line-height: .74; letter-spacing: -.035em;
  color: var(--cream); white-space: nowrap; transform: translateX(-.03em); padding-bottom: max(28px, calc(var(--vw) * 3.4));
}

/* ============================== Phone bottom bar ============================== */
.mbar { display: none; }

/* ============================== Motion hooks ============================== */
/* Hidden for a reveal only once the script has set .motion (before paint) and only without reduced motion. */
.motion [data-in] { opacity: 0; }

/* ============================== Tablet ============================== */
@media (max-width: 1100px) {
  .nav-list .nav-link, .nav-list .nav-trig { padding: 0 10px; }
  .dd-in { grid-template-columns: 220px 1fr; }
  .foot-cta { grid-column: 1 / 13; margin-bottom: 48px; }
  .foot-cols { grid-column: 1 / 13; }
}
@media (max-width: 900px) {
  .nav-in { grid-template-columns: 1fr auto; }
  .nav-main, .nav-end { display: none; }
  .nav-menu {
    display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; margin-right: -6px;
    border: 0; border-radius: 999px; background: rgba(58, 30, 60, .06); font-size: 15px; font-weight: 500; cursor: pointer;
  }
  .nav-menu:active { background: rgba(58, 30, 60, .12); }
  .nav-menu svg { width: 16px; height: 16px; }
  .nav-menu .i-close, .nav-menu[aria-expanded="true"] .i-menu { display: none; }
  .nav-menu[aria-expanded="true"] .i-close { display: block; }
  .drawer {
    display: flex; flex-direction: column; position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain;
    background: var(--ground); box-shadow: inset 0 1px 0 var(--hair); padding: 8px var(--gut) calc(24px + env(safe-area-inset-bottom));
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path .36s var(--ease-out), visibility 0s .36s;
  }
  .drawer.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .36s var(--ease-out), visibility 0s; }
  .drawer:not(.is-open), .drawer:not(.is-open) * { pointer-events: none !important; }
  .nav.drawer-open { background: var(--ground); box-shadow: none; }
  .dg { border-bottom: 1px solid var(--hair); }
  .dg-trig, .drawer a.dl {
    width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border: 0; background: none; cursor: pointer;
    font-family: var(--serif); font-size: 30px; line-height: 1.1; letter-spacing: -.01em; text-decoration: none; text-align: left; color: var(--plum);
  }
  .drawer a.dl { border-bottom: 1px solid var(--hair); }
  .drawer a.dl[aria-current="page"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--plum); }
  .dg-trig svg { width: 18px; height: 18px; transition: transform .36s var(--ease-out); }
  .dg-trig[aria-expanded="true"] svg { transform: rotate(180deg); }
  .dg-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
  .dg-panel > div { overflow: hidden; visibility: hidden; transition: visibility 0s .4s; }
  .dg-panel.is-open { grid-template-rows: 1fr; }
  .dg-panel.is-open > div { visibility: inherit; transition: visibility 0s; }
  .dg-panel ul { padding: 0 0 14px; display: grid; }
  .dg-panel a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 18px; line-height: 1.3; text-decoration: none; }
  .dg-panel a[aria-current="page"] { font-weight: 500; }
  .dg-panel a[aria-current="page"]::after { content: "You’re here"; font-size: 14px; font-weight: 400; color: var(--mute); }
  .drawer-end { margin-top: auto; padding-top: 28px; display: grid; gap: 6px; }
  .drawer-end .dl-sign { display: block; padding: 10px 0; font-size: 17px; text-decoration: none; }
  .drawer-end .btn { width: 100%; }
  .foot-cols { grid-template-columns: 1fr 1fr; row-gap: 36px; }
}

/* ============================== Phone ============================== */
@media (max-width: 600px) {
  :root { --gap: 16px; }
  .logo { font-size: 27px; }
  .sec-head.center, .sec-head.left { max-width: none; }
  .c-1-13, .c-1-7, .c-7-13, .c-1-6, .c-1-5, .c-1-8, .c-1-9, .c-2-12, .c-3-11, .c-4-10, .c-5-13, .c-6-13, .c-8-13, .c-9-13, .c-2-7, .c-8-12, .c-6-12 { grid-column: 1 / 13; }
  .stage { border-radius: 24px; }
  .stage--bleed { margin-inline: 8px; border-radius: 28px; }
  .stage--half { margin-left: var(--gut); border-radius: 24px 0 0 24px; }
  .stage--half-l { margin-right: var(--gut); border-radius: 0 24px 24px 0; }
  .plan { padding: 26px 20px 22px; }
  .plan .seg button { padding: 0 10px; font-size: 14px; }
  .amt { font-size: 76px; }
  .faq-card { padding: 2px 20px; }
  .qa button { font-size: 18px; padding: 22px 0; }
  .qa-a p { padding-right: 8px; font-size: 17px; }

  .stairs { --n: 13; }
  .stair { grid-template-columns: minmax(0, 1fr) repeat(var(--n), calc(100% / var(--n))) minmax(0, 1fr); }
  .stair::before { grid-column: 1 / var(--am); }
  .stair.s-wide { display: none; }
  .foot-top { padding-bottom: 40px; }
  .foot-cta p { font-size: 26px; }
  .foot-cols { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .foot-base { flex-direction: column; gap: 6px; }

  .mbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 48;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96);
    box-shadow: inset 0 1px 0 var(--hair); transform: translateY(100%); visibility: hidden;
    transition: transform .4s var(--ease-out), visibility 0s .4s;
  }
  .mbar.is-on { transform: none; visibility: visible; transition: transform .4s var(--ease-out), visibility 0s; }
  .mbar .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0s !important; animation-duration: 1ms !important; }
}

/* R7 (ruling 35): the coming-soon halftone tile, the brand mosaic's only texture (assets/mosaic-kit.js, page-mosaic.js).
   On white, as marketing.css .cs-t.ht; "cover" keeps its dots round on a tile that is not 1:2. */
.mk-ht { background: #FFFFFF url(img/mosaic-halftone.svg) center / cover no-repeat; }

/* R7 (ruling 40): one max width for every centred product visual in a section (the home demo, text-above features):
   the width of the home "Encore is context's best friend" panel, which Josh called right (1173px from 1600 wide).
   Heroes (they grow on scroll) and visuals beside their text (they fill their stage and bleed, ruling 38) are not
   centred visuals. kit-r6.js marks them .fit--centred. */
:root { --vis-max: calc(var(--col) - 2 * max(28px, var(--vw) * 5)); }
.fit.fit--centred { max-width: var(--vis-max); margin-inline: auto; }

/* Encore marketing site: the Mosaic menu (Josh, R4 Addendum 11). Shell file, loaded on every page after site.css.
   Markup: shell/nav.html (.dd--nm panels, .nm-mlist in the drawer). Behaviour: site.js + assets/nav-menu.js.
   Left: an index of pages in Hedvig, grouped, each with the same small stair-step mark (a 32x32 cut of the brand
   mosaic). Right: the brand mosaic itself, carrying a white card that shows what the page gives the person answering.
   Laws: Hedvig + PP Neue Montreal only, text 14px and up at full or mute colour, one hairline per group, no shadows. */

/* ============================== The panels (901px and up) ============================== */
.dd--nm { width: min(calc(100vw - var(--gut) * 2), 1040px); border-radius: 26px; overflow: hidden; transform: none; }
.dd--nm-uses { width: min(calc(100vw - var(--gut) * 2), 1000px); }
/* With the script, one white surface (.nm-surface) sits behind both panels and changes size and shape between them.
   The panels drop their own border then, so the mosaic meets the surface's corner exactly. */
.nm-surface { display: none; }
.nav.nm-morph .nm-surface { display: block; position: absolute; z-index: 50; left: 0; top: 0; width: 0; height: 0; background: #FFFFFF; border: 1px solid var(--hair); border-radius: 26px; opacity: 0; pointer-events: none; }
.nav.nm-morph .dd--nm { background: transparent; border: 0; transition: opacity .24s var(--ease-out), visibility 0s .24s; }
.nav.nm-morph .dd--nm.is-open { transition: opacity .28s var(--ease-out) .06s, visibility 0s; }

.nm { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 42%, 440px); --nm-name: 184px; }
.nm--uses { grid-template-columns: minmax(0, 1fr) clamp(300px, 36%, 360px); --nm-name: 250px; }

/* ---- The list: a lead, then labelled groups; every row is mark | name | what it is ---- */
.nm-list { padding: 30px 28px 26px 30px; }
.nm-lead { display: block; margin: 0 -2px; padding: 4px 14px 24px; border-radius: 16px; text-decoration: none; }
.nm-lead-name { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.06; letter-spacing: -.018em; }
.nm-arr { width: 16px; height: 16px; flex: none; transition: transform .35s var(--ease-out); }
.nm-lead:hover .nm-arr, .nm-lead:focus-visible .nm-arr, .nm-lead.is-on .nm-arr { transform: translateX(4px); }
.nm-lead .nm-line { display: block; max-width: 34ch; margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--mute); }
.nm-lead[aria-current="page"] .nm-lead-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* Each group carries one hairline, on its label. */
.nm-label { margin: 0 12px; padding: 20px 0 10px; border-top: 1px solid var(--hair); font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: .01em; color: var(--mute); }
.nm-label--sep { margin-top: 14px; }

.nm-items { display: grid; gap: 2px; }
.nm-item {
  display: grid; grid-template-columns: 30px var(--nm-name) minmax(0, 1fr); column-gap: 16px; align-items: baseline;
  padding: 12px 14px 12px 12px; border-radius: 14px; text-decoration: none; transition: background-color .3s var(--ease-out);
}
.nm-item .nm-mark { align-self: start; }
.nm-name { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 30px; letter-spacing: -.012em; }
.nm-line { display: block; font-size: 15px; line-height: 1.45; color: var(--mute); text-wrap: pretty; }
.nm-item:hover, .nm-item:focus-visible, .nm-item.is-on { background: var(--plane); }
.nm-item[aria-current="page"] .nm-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.nm-item[aria-current="page"] .nm-line::before { content: "You’re here · "; color: var(--plum); }

/* ---- The mark: the same two-row stair for every page. It re-steps (rows slide one block, opposite ways) with the row. ---- */
.nm-mark { display: block; width: 30px; height: 30px; flex: none; border-radius: 3px; overflow: hidden; }
.nm-mark svg { display: block; width: 30px; height: 30px; shape-rendering: crispEdges; }
.nm-mark g { transition: transform .6s var(--ease-out); }
.nm-item:hover .nm-ra, .nm-item:focus-visible .nm-ra, .nm-item.is-on .nm-ra, [aria-current="page"] > .nm-mark .nm-ra { transform: translateX(-8px); }
.nm-item:hover .nm-rb, .nm-item:focus-visible .nm-rb, .nm-item.is-on .nm-rb, [aria-current="page"] > .nm-mark .nm-rb { transform: translateX(8px); }

/* ---- The mosaic and its card ---- */
.nm-art { position: relative; overflow: hidden; background: var(--plum); }
.nm-mosaic { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nm-cards { position: absolute; inset: 0; display: grid; place-items: center; padding: 36px; }
/* R5 (ruling 4): the shown card takes visibility: inherit, never visible. A visible child inside a hidden (closed) panel
   is still painted to hit-testing: the invisible card caught the pointer mid-screen and opened Use cases over the page. */
.nm-card {
  grid-area: 1 / 1; display: flex; flex-direction: column; width: 100%; max-width: 284px; padding: 28px 26px 26px;
  background: #FFFFFF; border-radius: 26px; color: var(--plum); font-size: 15px; line-height: 1.45;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s var(--ease-out), transform .5s var(--ease-out), visibility 0s .25s;
}
.nm-card.is-on { opacity: 1; visibility: inherit; transform: none; transition: opacity .35s var(--ease-out) .1s, transform .6s var(--ease-out) .1s, visibility 0s; }

.nm-studio { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 18px; line-height: 1.2; }
.nm-studio i { width: 28px; height: 28px; border-radius: 50%; background: var(--plum); color: #FFFFFF; display: grid; place-items: center; font-style: normal; font-size: 14px; }
.nm-rule { display: block; width: 28px; height: 2px; border-radius: 1px; background: var(--plum); margin: 10px auto 12px; }
.nm-rule--l { margin: 18px 0 16px; }
.nm-k { display: block; font-size: 14px; line-height: 1.35; color: var(--mute); }
.nm-k--t { margin-top: 8px; }
.nm-h { margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: 27px; line-height: 1.08; letter-spacing: -.016em; text-wrap: balance; }
.nm-p { margin-top: 10px; font-size: 15px; color: var(--mute); }
.nm-steps { margin-top: 18px; display: grid; gap: 10px; }
.nm-steps span { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.nm-dot { width: 8px; height: 16px; flex: none; }
.nm-dot--pk { background: #EDC9D8; } .nm-dot--lv { background: #C8C2F0; } .nm-dot--pc { background: #F7CBB0; }
.nm-go { margin-top: 22px; height: 44px; border-radius: 999px; background: var(--plum); color: #FFFFFF; display: grid; place-items: center; font-weight: 500; font-size: 15px; }

.nm-q { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.nm-t { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.nm-pair { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.nm-pair .c { min-width: 80px; padding: 10px 14px; border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--hair-strong); font-family: var(--serif); font-size: 17px; line-height: 1.1; }
.nm-pair .c.on { background: var(--plum); color: #FFFFFF; box-shadow: none; }
.nm-pair .or, .nm-imgs .or { font-size: 14px; color: var(--mute); }
.nm-imgs { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.nm-imgs img { width: 70px; height: 86px; object-fit: cover; border-radius: 10px; }
.nm-imgs .vs { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,.12); font-size: 12px; color: var(--ink, #1D1B22); }
.nm-imgs--lg img { width: 98px; height: 122px; border-radius: 12px; }
.nm-spec { display: block; width: 100%; max-width: 220px; margin-top: 24px; }
.nm-spec .track { position: relative; display: block; height: 5px; border-radius: 3px; background: #EEEBF0; }
.nm-spec .track b { position: absolute; left: 0; top: 0; bottom: 0; width: 64%; border-radius: 3px; background: #8F83D6; }
.nm-spec .track i { position: absolute; left: 64%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--plum); }
.nm-spec .ends { display: flex; justify-content: space-between; margin-top: 12px; font-size: 14px; color: var(--mute); }
.nm-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; margin-top: 14px; }
.nm-board span { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.nm-board img { width: 100%; height: 100%; object-fit: cover; }
.nm-board .rated::after { content: ""; position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--plum, #6C5CB2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7v6H3V7zM5 7l3-5a1.6 1.6 0 0 1 2 1.8L9.5 6H13a1.5 1.5 0 0 1 1.5 1.8l-1 4.5A1.5 1.5 0 0 1 12 13.5H5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.nm-board .rated.down::after { background-color: #E5776A; transform: scaleY(-1); }
.nm-path { margin-top: 18px; display: grid; gap: 12px; }
.nm-path > span { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; font-size: 15px; line-height: 1.3; }
.nm-path b { grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; background: #ECE8F6; display: grid; place-items: center; font-size: 14px; font-weight: 500; }
.nm-path small { font-size: 14px; color: var(--mute); }
.nm-ans { margin-top: 16px; display: grid; gap: 5px; }
.nm-ans small { font-size: 14px; color: var(--mute); }
.nm-ans b { display: flex; align-items: baseline; gap: 8px; font-weight: 500; font-size: 16px; }
.nm-ans em { font-style: normal; font-size: 14px; font-weight: 400; color: var(--mute); }
.nm-tiles { display: flex; gap: 3px; margin-top: 2px; }
.nm-tiles i { width: 14px; height: 22px; background: #EDC9D8; }
.nm-tiles i.p { background: var(--plum); }
.nm-chosen { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.nm-chosen img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; }
.nm-who { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.nm-who span { padding: 7px 12px; border-radius: 999px; background: #F1EDF7; font-size: 14px; }

/* ---- Narrower windows and short screens: the panel must fit without scrolling ---- */
@media (max-width: 1180px) {
  .nm { --nm-name: 176px; }
  .nm--uses { --nm-name: 238px; }
  .nm-list { padding: 24px 20px 20px 22px; }
  .nm-item { column-gap: 14px; }
  .nm-cards { padding: 28px; }
}
@media (max-height: 860px) and (min-width: 901px) {
  .nm-list { padding-top: 22px; padding-bottom: 16px; }
  .nm-lead { padding-bottom: 18px; }
  .nm-lead-name { font-size: 30px; }
  .nm-lead .nm-line { margin-top: 8px; }
  .nm-label { padding: 14px 0 6px; }
  .nm-label--sep { margin-top: 8px; }
  .nm-item { padding-top: 9px; padding-bottom: 9px; }
  .nm-name { font-size: 22px; line-height: 28px; }
}

/* ============================== Phone drawer (900px and under) ============================== */
.nm-band { display: none; }
@media (max-width: 900px) {
  .dg-panel ul.nm-mlist { display: grid; gap: 2px; padding: 0 0 18px; }
  .dg-panel .nm-mlist a { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: start; padding: 10px 0; }
  .nm-mlist .nm-mark { grid-row: span 2; margin-top: 2px; }
  .nm-mlist .nm-name { font-size: 22px; line-height: 1.2; }
  .nm-mlist .nm-line { font-size: 15px; }
  .dg-panel .nm-mlist a[aria-current="page"] { font-weight: 400; }
  .dg-panel .nm-mlist a[aria-current="page"]::after { content: none; }
  .nm-mlist a[aria-current="page"] .nm-line::before { content: "You’re here · "; color: var(--plum); }
  .nm-band { display: block; flex: none; position: relative; height: 96px; margin: 32px calc(var(--gut) * -1) 0; overflow: hidden; background: var(--plum); }
  .drawer-end { padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  /* site.css shortens every transition to 1ms here, but a 1ms visibility transition (on the panel and, inherited, on
     every link inside it) still starts hidden, so a menu opened from the keyboard couldn't take focus in the same tick.
     Inside the menus and the drawer nothing transitions: everything switches outright. */
  .dd, .dd *, .drawer, .drawer * { transition: none !important; }
  .nm-mark g, .nm-arr, .nm-item { transition: none; }
  .nm-card, .nm-card.is-on { transition: none; transform: none; }
  .nav.nm-morph .dd--nm, .nav.nm-morph .dd--nm.is-open { transition: none; }
}

/* ============================== v11: the Use cases menu, by group ==============================
   Seventeen roles in four groups (Weddings and events · Design and building | Teams · Clients and customers), two
   columns under the lead; each row is the stair mark and the role's name (what it gives the person answering is on
   the card beside it, as before). Same panel, same mosaic and card; the panel widens to hold the columns and tightens
   on short screens so it always fits the window (it scrolls inside, never off the page, below 520px tall). */
.dd--nm-uses { width: min(calc(100vw - var(--gut) * 2), 1160px); }
.nm--uses { grid-template-columns: minmax(0, 1fr) clamp(300px, 30%, 350px); }
.nm--uses .nm-lead .nm-line { max-width: 56ch; }
.nm-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.nm-col { min-width: 0; }
.nm-col > .nm-label + .nm-items + .nm-label { margin-top: 10px; }
.nm-items--names { gap: 0; }
.nm--uses .nm-items--names .nm-item { grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 8px 12px; }
.nm--uses .nm-items--names .nm-item .nm-mark { align-self: center; }
.nm-items--names .nm-mark, .nm-items--names .nm-mark svg { width: 26px; height: 26px; }
.nm--uses .nm-items--names .nm-name { font-size: 22px; line-height: 28px; }
.nm-items--names .nm-item[aria-current="page"] .nm-name::after { content: "You’re here"; margin-left: 10px; font-family: var(--sans); font-size: 14px; letter-spacing: 0; color: var(--plum); }
.nm-h--tpl { font-size: 24px; }
.nm--uses .nm-card .nm-path { margin-top: 16px; gap: 10px; }
.nm--uses .nm-card .nm-k--t { margin-top: 14px; }

@media (max-width: 1180px) {
  .nm--uses { grid-template-columns: minmax(0, 1fr) clamp(280px, 31%, 320px); }
  .nm--uses .nm-items--names .nm-name { font-size: 20px; line-height: 26px; }
  .nm--uses .nm-items--names .nm-item { padding-inline: 10px; column-gap: 12px; }
  .nm--uses .nm-cards { padding: 24px; }
  .nm--uses .nm-card { padding: 24px 22px 22px; }
  .nm-h--tpl { font-size: 22px; }
}
@media (max-height: 860px) and (min-width: 901px) {
  .nm--uses .nm-items--names .nm-item { padding-top: 6px; padding-bottom: 6px; }
  .nm--uses .nm-items--names .nm-name { font-size: 20px; line-height: 26px; }
  .nm--uses .nm-label { padding: 12px 0 4px; }
}
@media (max-height: 700px) and (min-width: 901px) {
  .nm--uses .nm-list { padding-top: 16px; padding-bottom: 12px; }
  .nm--uses .nm-lead { padding-bottom: 10px; }
  .nm--uses .nm-lead-name { font-size: 26px; }
  .nm--uses .nm-lead .nm-line { display: none; }
  .nm--uses .nm-items--names .nm-item { padding-top: 3px; padding-bottom: 3px; }
  .nm--uses .nm-items--names .nm-name { font-size: 18px; line-height: 24px; }
  .nm-items--names .nm-mark, .nm-items--names .nm-mark svg { width: 22px; height: 22px; }
  .nm--uses .nm-items--names .nm-item { grid-template-columns: 22px minmax(0, 1fr); }
  .nm--uses .nm-label { padding: 8px 0 2px; }
  .nm-col > .nm-label + .nm-items + .nm-label { margin-top: 6px; }
  .nm--uses .nm-card .nm-path small { display: none; }
}
/* Never taller than the window: the list scrolls inside the panel (the mosaic and card stay put). */
@media (min-width: 901px) {
  .dd--nm-uses .nm--uses .nm-list { max-height: calc(100vh - var(--nav-h) - 4px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}

/* Phone drawer: the lead, then each group under its own label, names only */
.nm-mlabel { display: none; }
@media (max-width: 900px) {
  .nm-mlabel { display: block; margin: 0; padding: 14px 0 4px; border-top: 1px solid var(--hair); font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--mute); }
  .dg-panel ul.nm-mlist--names { padding-bottom: 8px; }
  .dg-panel .nm-mlist--names a { grid-template-columns: 26px minmax(0, 1fr); align-items: center; padding: 7px 0; }
  .nm-mlist--names .nm-mark { grid-row: auto; margin-top: 0; width: 26px; height: 26px; }
  .nm-mlist--names .nm-mark svg { width: 26px; height: 26px; }
  .nm-mlist--names .nm-name { font-size: 20px; line-height: 1.25; }
  .dg-panel .nm-mlist--names a[aria-current="page"] .nm-name::after { content: " · You’re here"; font-family: var(--sans); font-size: 14px; color: var(--plum); }
  .dg-panel ul.nm-mlist--tpl { border-top: 1px solid var(--hair); padding-top: 8px; padding-bottom: 18px; }
}

/* v11.2 page weight: a closed menu's photos are not fetched until the visitor reaches for the menu. Chrome's lazy
   loading ignores visibility, so the hidden panels (opacity 0, visibility hidden, in the first screen) fetched every
   card photo on every page load (about 0.5 MB on a desktop, and on a phone, where the panels never show). The first
   mouse or pen over the bar, or focus inside it, adds .nm-primed (assets/nav-menu.js) and the photos load while the
   pointer travels to a trigger; an open panel always shows them. */
.nav:not(.nm-primed) .dd:not(.is-open) img { display: none; }

/* Encore marketing site, KIT2: the one FAQ design, site-wide (Addendum 6 and 7).
   Josh: "this FAQ section is just beautiful. The spaciousness, the color treatment, the negative space" (home), and
   "Let's have it be a gradient. Let's have that be a consistent thing." Every page's FAQ uses this pattern.
   The look: a sky wash that starts on the column's left edge and runs off the right of the window, the heading on
   the left, the white question card on the right, and a lot of air. The accordion itself (.faq-card, .qa) and its
   behaviour ([data-faq]) stay in site.css / site.js.
   Link it after site.css:  <link rel="stylesheet" href="assets/faq.css">  (subfolder pages: ../assets/faq.css)
   Markup (KIT-APP.md, P7):
   <section class="pat-faq" id="faq">
     <div class="pat-faq-stage">
       <div class="pat-faq-in">
         <div class="pat-faq-head"><h2 class="h2">What people ask before they start.</h2></div>
         <div class="faq-card" data-faq data-open-first> …the .qa rows… </div>
       </div>
     </div>
   </section>
   Optional: a .small line under the heading (a link to more help). Add .pat-faq--l to run the wash off the LEFT. */

.pat-faq { padding-top: var(--sec); }
.pat-faq-stage {
  position: relative; overflow: clip;
  margin-left: max(var(--gut), calc((100% - var(--col)) / 2));
  border-radius: 32px 0 0 32px;
  background: linear-gradient(180deg, #B9D3EE 0%, #CFE2F6 45%, #EAF1FA 100%);
  padding: max(72px, calc(var(--vw) * 7.778)) 0 max(72px, calc(var(--vw) * 7.778)) max(32px, calc(var(--vw) * 5.556));
}
.pat-faq-in {
  width: min(calc(100% - 24px), calc(var(--col) - 80px));
  display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 80px; align-items: start;
}
.pat-faq-head .h2 { max-width: 340px; text-wrap: balance; }
.pat-faq-head .small { margin-top: 18px; max-width: 300px; }
.pat-faq .faq-card { min-width: 0; }

/* Mirror: the wash starts on the column's right edge and runs off the left. */
.pat-faq--l .pat-faq-stage {
  margin-left: 0; margin-right: max(var(--gut), calc((100% - var(--col)) / 2));
  border-radius: 0 32px 32px 0;
  padding: max(72px, calc(var(--vw) * 7.778)) max(32px, calc(var(--vw) * 5.556)) max(72px, calc(var(--vw) * 7.778)) 0;
}
.pat-faq--l .pat-faq-in { margin-left: auto; }

@media (max-width: 1180px) {
  .pat-faq-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pat-faq-head .h2, .pat-faq-head .small { max-width: 560px; }
}
@media (max-width: 600px) {
  .pat-faq-stage { margin-left: var(--gut); border-radius: 24px 0 0 24px; padding: 56px 16px 16px 20px; }
  .pat-faq--l .pat-faq-stage { margin-right: var(--gut); border-radius: 0 24px 24px 0; padding: 56px 20px 16px 16px; }
  .pat-faq-in { width: 100%; gap: 32px; }
}

/* R6b: the head column grows with the type, so a FAQ heading stays at three lines or fewer on big monitors
   (it was four at 1920 and 3440 when the column stayed 340px while the type grew). */
@media (min-width: 1181px) {
  .pat-faq-in { grid-template-columns: max(340px, calc(var(--vw) * 24.4)) minmax(0, 1fr); }
  .pat-faq-head .h2 { max-width: max(340px, calc(var(--vw) * 24.4)); }
}

/* 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("img/kit-mosaic.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; }

/* Encore marketing site, R6 (27 Oct 2026): the visuals show the app as it is today, and they scale to the screen.
   Link after kit-app.css: <link rel="stylesheet" href="assets/kit-r6.css">  (+ assets/kit-r6.js after kit-app.js)
   Josh's rulings 15-27 (kit/JOSH-R5-NOTES.md) are the brief; ground truth is r6/truth/ (Encore 4.123.0, 27 Oct).
   Reference: ../NOTES-R6.md.

   1. Fit      [data-fit]: one scale for the whole mock, proportions kept, never cropping its own UI (ruling 15).
   2. .rv      The page people answer, as 4.123.0 draws it: the Moodboard (click, rate, say why), the Comparison
               pair, the welcome, the choice rows (ruling 16).
   3. .dp      The laptop + phone pair: one composition, shared baseline, phone over the laptop's lower right (23).
   4. .jy      The journey: steps of one process, pinned and scrolled, a clickable thread as the progress (17, 19).
   5. Accent   The studio colour recolours everything it drives, exactly as the app does (22). */

/* ============================== 1 · Fit ==============================
   kit-r6.js wraps every [data-fit] mock in .fit > .fit-in, lays it out at a desktop width and scales the whole
   thing to the room it has (width, and a height budget so it is seen whole). .fit-in is the `ka` container, so the
   app's own responsive rules see the width the mock is laid out at, not the scaled one. Without script nothing is
   wrapped and the mock reflows on its own (the R4c behaviour). On phones (under 601px) the mock is not scaled: it
   shows its phone layout at full width, under its text. */
/* A visual that bleeds off the outer edge is cut there, never scrolls the page sideways (clip keeps sticky pins working). */
main { overflow-x: clip; }
.fit { position: relative; display: block; width: 100%; min-width: 0; justify-self: stretch; align-self: start; }
.fit > .fit-in { position: absolute; top: 0; left: 0; transform-origin: 0 0; container: ka / inline-size; will-change: transform; }
.fit.fit--off > .fit-in { position: relative; width: auto !important; transform: none !important; will-change: auto; }
.fit.fit--off { height: auto !important; }
.fit > .fit-in > .ka-win { width: 100%; }
/* A fitted window keeps its real proportions (it is the app on a screen); the floors from KIT2 still apply. */
.fit .ka-win--bleed-r, .fit .ka-win--bleed-l { aspect-ratio: var(--ka-ar, 16 / 10); }
.fit .ka-win--bleed-r > .ka-body, .fit .ka-win--bleed-l > .ka-body { min-height: var(--ka-h); }

/* ============================== 2 · The page people answer (4.123.0) ==============================
   .rv is the respondent page inside a browser (.ka-browser) or a phone (.dp-phone). Sizes are the app's at 1440
   (r6/truth/*-1440-*). --acc is the studio's colour (default plum); --rv-ground the studio's ground (Gradient). */
@property --acc { syntax: "<color>"; inherits: true; initial-value: #3A1E3C; }
.rv {
  --acc: #3A1E3C; --rv-ink: #3A1E3C; --rv-mute: #6E5A70; --rv-hair: rgba(58, 30, 60, .12); --rv-edge: rgba(58, 30, 60, .2);
  --rv-quiet: #F4F3F4;
  position: relative; overflow: clip; background: #FFFFFF; color: var(--rv-ink); font-family: var(--sans); font-size: 15px; line-height: 1.45;
  text-align: left; transition: --acc .6s var(--ease-out);
}
.rv * { box-sizing: border-box; }
.rv img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rv i { font-style: normal; }
/* The ground: the app's Gradient (clientGroundImage). Plum, Encore's own colour, fades from lavender; any other
   colour gets a 9% glow at the top and a 5% tint that reaches white at 340px. One layer per colour, crossfaded. */
.rv-ground { position: absolute; inset: 0 0 auto 0; height: 460px; pointer-events: none; }
.rv-ground > i { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease-out); background-repeat: no-repeat; }
.rv-ground > i.is-on, .rv-ground > i:only-child { opacity: 1; }
.rv-ground > i[data-acc="#3A1E3C"], .rv-ground > i:not([data-acc]) { background-image: linear-gradient(180deg, #EEEBFB 0px, #F3F1FD 180px, #FFFFFF 380px); }
.rv-ground > i[data-acc="#5B478B"] { background-image: radial-gradient(120% 290px at 50% 0%, color-mix(in oklch, #5B478B 9%, transparent) 0%, transparent 100%), linear-gradient(180deg, color-mix(in oklch, #5B478B 5%, white) 0%, #FFFFFF 340px); }
.rv-ground > i[data-acc="#2E5E4E"] { background-image: radial-gradient(120% 290px at 50% 0%, color-mix(in oklch, #2E5E4E 9%, transparent) 0%, transparent 100%), linear-gradient(180deg, color-mix(in oklch, #2E5E4E 5%, white) 0%, #FFFFFF 340px); }
.rv--white .rv-ground { display: none; }
.rv-prog { position: absolute; left: 0; top: 0; z-index: 4; height: 3px; width: var(--prog, 40%); background: var(--acc); }
.rv-prog::after { content: ""; position: absolute; left: 100%; top: 0; width: 100vw; height: 3px; background: rgba(58, 30, 60, .08); }
.rv-in { position: relative; z-index: 1; }
/* In a window the page takes the screen's height (16:10) and runs on below it, like the page scrolled. */
.ka-win > .rv { flex: 1 1 0; min-height: 0; }
/* The Comparison page is taller than a 16:10 screen: its window shows the whole pair (the page as it scrolls to it). */
.ka-win:has(> .rv-cmp), .ka-win:has(> .rv-welp) { aspect-ratio: auto; }
.ka-win > .rv-cmp, .ka-win > .rv-welp { flex: none; }

/* The top: the studio's name (branding on) left, the step pill in the middle, "Saved to secure session" right. */
.rv-top { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px 32px 0; min-height: 76px; }
.rv-studio { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 22px; letter-spacing: -.01em; white-space: nowrap; }
.rv-studio > i { width: 34px; height: 34px; border-radius: 50%; background: var(--acc); color: #F6F3EE; display: grid; place-items: center; font-size: 18px; }
.rv-pill { justify-self: center; display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 20px; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .14); font-size: 15px; white-space: nowrap; }
.rv-pill > i { width: 4px; height: 4px; border-radius: 50%; background: var(--rv-mute); }
.rv-pill small { font-size: 15px; color: var(--rv-mute); }
.rv-saved { justify-self: end; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--rv-ink); white-space: nowrap; }
.rv-saved::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2BA89E; }
.rv-rule { display: block; width: 48px; height: 2px; border-radius: 1px; background: var(--acc); }

/* ---------- A Slides question (Form in a Flow) ---------- */
.rv-q { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 48px 32px; }
.rv-kick { font-size: 14px; color: var(--rv-mute); }
.rv-q > .rv-rule { margin: 20px auto 22px; }
.rv-qt { font-family: var(--serif); font-size: 38px; line-height: 1.12; letter-spacing: -.02em; max-width: 760px; text-wrap: balance; }
.rv-q .ka-pair { max-width: 820px; }
/* Choice rows (Pick One / Pick Many / Yes-No), 4.123.0: full-width grey rows, hairlines between, a small number,
   a serif label and a radio at the right that fills when picked (truth/form-slides-1440-q14-pick-one-answered). */
.rv-rows { width: 100%; max-width: 576px; margin-top: 30px; text-align: left; border-top: 1px solid rgba(58, 30, 60, .16); }
.rv-rows > span { display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px; align-items: center; gap: 14px; min-height: 76px; padding: 0 22px 0 24px; background: var(--rv-quiet); border-bottom: 1px solid rgba(58, 30, 60, .16); font-family: var(--serif); font-size: 26px; letter-spacing: -.01em; transition: background-color .35s var(--ease-out); }
.rv-rows > span > small { font-family: var(--sans); font-size: 14px; color: var(--rv-mute); }
.rv-rows > span::after { content: ""; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .35); background: #FFFFFF; transition: box-shadow .3s var(--ease-out); }
.rv-rows > span.is-on::after { box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .35), inset 0 0 0 4px #FFFFFF, inset 0 0 0 10px var(--acc); }
.rv-rows--many > span::after { border-radius: 4px; }
.rv-rows--sm > span { min-height: 60px; font-size: 22px; }
.rv-foot { width: 100%; max-width: 920px; margin-top: 40px; padding-top: 16px; border-top: 1px solid rgba(58, 30, 60, .12); display: flex; justify-content: space-between; }
.rv-back { height: 46px; padding: 0 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .14); display: inline-flex; align-items: center; color: var(--rv-mute); }
.rv-cont { height: 46px; padding: 0 24px; border-radius: 999px; background: color-mix(in oklch, var(--acc) 58%, white); color: #FFFFFF; display: inline-flex; align-items: center; font-weight: 500; transition: background-color .35s var(--ease-out); }
.rv-cont.is-on { background: var(--acc); }
.rv-skip { margin-top: 22px; font-size: 14px; color: var(--rv-mute); text-decoration: underline; text-underline-offset: 4px; }
.rv-dots { margin-top: 24px; display: flex; gap: 8px; justify-content: center; }
.rv-dots span { width: 44px; height: 44px; border-radius: 50%; background: #F1EFF2; color: var(--rv-mute); display: grid; place-items: center; font-size: 14px; }
.rv-dots span.is-on { background: #E9E5EC; color: var(--rv-ink); box-shadow: inset 0 0 0 1px var(--rv-edge); }
.rv-dots span.is-done { color: var(--rv-ink); }

/* ---------- The Moodboard, as people answer it ----------
   Click an image: a window opens (the image large on the left, three steps on the right), you rate it 1-10, say
   what draws you in or puts you off, optionally how it feels, and Save. The image then wears a thumbs badge.
   data-st on .rv-mb: board | hover | rate | why | feel | saved (kit-r6.js plays them as a calm loop). */
.rv-mb { min-height: 100%; }
.rv-mb-head { position: relative; z-index: 1; text-align: center; padding: 14px 40px 0; }
.rv-title { font-family: var(--serif); font-size: 56px; line-height: 1.02; letter-spacing: -.025em; }
.rv-sub { margin-top: 16px; font-size: 15px; color: var(--rv-mute); }
.rv-mason { position: relative; z-index: 1; margin: 40px 40px 0; columns: var(--cols, 5); column-gap: 20px; }
.rv-mason figure { position: relative; margin: 0 0 20px; break-inside: avoid; border-radius: 12px; overflow: clip; background: #EEEBF0; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.rv-mason figure img { height: auto; aspect-ratio: var(--ar, 3 / 4); }
.rv-badge { position: absolute; right: 12px; bottom: 12px; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; transition: opacity .35s var(--ease-out), transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.rv-badge.up { background: var(--acc) no-repeat center / 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.2 7.1 7.6 2.2c.9 0 1.6.7 1.6 1.6v2.3h3.4c.9 0 1.5.8 1.3 1.6l-1 4.6c-.1.6-.7 1.1-1.3 1.1H5.2Z' fill='%23fff'/%3E%3Crect x='1.6' y='7.1' width='2.6' height='6.3' rx='.8' fill='%23fff'/%3E%3C/svg%3E"); }
.rv-badge.down { background: #E5776A no-repeat center / 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg transform='rotate(180 8 8)'%3E%3Cpath d='M5.2 7.1 7.6 2.2c.9 0 1.6.7 1.6 1.6v2.3h3.4c.9 0 1.5.8 1.3 1.6l-1 4.6c-.1.6-.7 1.1-1.3 1.1H5.2Z' fill='%23fff'/%3E%3Crect x='1.6' y='7.1' width='2.6' height='6.3' rx='.8' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E"); }
/* Hover: the image lifts a little and a round "+" sits in its middle (truth/flow-1440-06-moodboard-hover). */
.rv-plus { position: absolute; left: 50%; top: 50%; z-index: 1; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(40, 24, 42, .5); opacity: 0; transition: opacity .3s var(--ease-out); }
.rv-plus::before, .rv-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.6px; margin: -.8px 0 0 -8px; background: #FFFFFF; border-radius: 1px; }
.rv-plus::after { transform: rotate(90deg); }
.rv-plus { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9); }
figure.is-hover { transform: scale(1.02); box-shadow: 0 14px 30px rgba(30, 20, 40, .18); }
figure.is-hover .rv-plus { opacity: 1; }
.rv-mb .rv-mason figure:not(.is-rated) .rv-badge { opacity: 0; transform: scale(.4); }
/* The count and the confirm: dark pills floating at the bottom of the page. */
.rv-float { position: absolute; z-index: 3; bottom: 24px; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; border-radius: 999px; background: rgba(58, 30, 60, .84); color: #FFFFFF; font-size: 15px; white-space: nowrap; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.rv-count { right: 24px; }
.rv-count b { font-weight: 400; }
.rv-confirm { left: 50%; translate: -50% 0; }
.rv-confirm::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: #FFFFFF; }
.rv-confirm.is-on::before { background: #FFFFFF no-repeat center / 11px 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='%233A1E3C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.rv-go { position: absolute; z-index: 3; right: 24px; bottom: 76px; height: 46px; padding: 0 26px; border-radius: 999px; background: var(--acc); color: #FFFFFF; display: inline-flex; align-items: center; font-weight: 500; }
/* The board runs on below the window, as the page scrolls: it fades out at the bottom. */
.rv-mb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #FFFFFF 92%); }
.rv-mb { --ka-fades: 1; }

/* The rating window (V5MoodboardReactionDrawer at 1440: 1024 wide, the image left, the steps right). */
.rv-scrim { position: absolute; inset: 0; z-index: 5; background: rgba(36, 22, 38, .46); opacity: 0; visibility: hidden; transition: opacity .45s var(--ease-out), visibility 0s .45s; }
.rv-rate { position: absolute; z-index: 6; left: 50%; top: 50%; width: 1024px; max-width: calc(100% - 64px); height: 548px; max-height: calc(100% - 56px); translate: -50% -46%; border-radius: 28px; background: #FFFFFF; overflow: clip; display: grid; grid-template-columns: 49% minmax(0, 1fr); opacity: 0; visibility: hidden; transition: opacity .45s var(--ease-out), translate .55s var(--ease-out), visibility 0s .45s; }
.rv-rate-pic { position: relative; background: #111014; min-width: 0; }
.rv-rate-pic img { position: absolute; inset: 0; object-fit: cover; }
.rv-rate-side { position: relative; display: flex; flex-direction: column; min-width: 0; }
.rv-rate-h { flex: none; height: 76px; display: flex; align-items: center; gap: 14px; padding: 0 24px; border-bottom: 1px solid var(--rv-hair); font-size: 15px; color: var(--rv-mute); }
.rv-sdots { display: inline-flex; align-items: center; gap: 6px; }
.rv-sdots i { width: 6px; height: 6px; border-radius: 3px; background: #CFC9D2; transition: width .35s var(--ease-out), background-color .35s var(--ease-out); }
.rv-sdots i.is-on { width: 20px; background: var(--acc); }
.rv-x { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rv-hair); display: grid; place-items: center; color: var(--rv-ink); font-size: 18px; line-height: 1; }
.rv-rate-b { position: relative; flex: 1; min-height: 0; }
.rv-step { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 40px; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-out), visibility 0s .4s; }
.rv-step.is-on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease-out) .1s, visibility 0s; }
.rv-step > p { font-size: 16px; color: var(--rv-ink); }
.rv-scale { margin-top: 18px; display: flex; gap: 8px; }
.rv-scale span { flex: 1 1 0; max-width: 42px; height: 44px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rv-edge); display: grid; place-items: center; font-size: 14px; color: var(--rv-ink); transition: background-color .3s var(--ease-out), color .3s var(--ease-out); }
.rv-scale span.is-on { background: var(--acc); color: #FFFFFF; box-shadow: none; }
.rv-word { margin-top: 14px; height: 20px; font-size: 15px; color: var(--rv-mute); }
.rv-chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.rv-chips span { height: 44px; padding: 0 15px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rv-edge); display: inline-flex; align-items: center; font-size: 15px; color: var(--rv-mute); white-space: nowrap; transition: background-color .3s var(--ease-out), color .3s var(--ease-out); }
.rv-chips span.is-on { background: var(--acc); color: #FFFFFF; box-shadow: none; }
.rv-note { margin-top: 22px; font-size: 15px; color: var(--rv-ink); }
.rv-note span { display: block; margin-top: 8px; min-height: 84px; padding: 14px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .3); font-size: 16px; color: var(--rv-ink); }
.rv-rate-f { flex: none; height: 76px; display: flex; align-items: center; gap: 12px; padding: 0 24px; border-top: 1px solid var(--rv-hair); }
.rv-btn { height: 46px; padding: 0 22px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rv-edge); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: var(--rv-ink); white-space: nowrap; }
.rv-btn--wide { flex: 1; }
.rv-btn--fill { flex: 1; background: var(--acc); color: #FFFFFF; box-shadow: none; font-weight: 500; }
/* Footer states: step 1 shows Cancel alone; steps 2 and 3 show Back + Next / Save. */
.rv-rate-f [data-f] { display: none; }
.rv-mb[data-st="rate"] .rv-rate-f [data-f="1"], .rv-mb[data-st="why"] .rv-rate-f [data-f="2"], .rv-mb[data-st="feel"] .rv-rate-f [data-f="3"] { display: inline-flex; }
.rv-mb:is([data-st="rate"], [data-st="why"], [data-st="feel"]) .rv-scrim { opacity: 1; visibility: visible; transition: opacity .45s var(--ease-out), visibility 0s; }
.rv-mb:is([data-st="rate"], [data-st="why"], [data-st="feel"]) .rv-rate { opacity: 1; visibility: visible; translate: -50% -50%; transition: opacity .45s var(--ease-out), translate .55s var(--ease-out), visibility 0s; }
.rv-mb:is([data-st="rate"], [data-st="why"], [data-st="feel"]) .rv-float { opacity: .45; }

/* ---------- The Comparison pair, as people answer it (V5ComparisonFlow) ---------- */
.rv-cmp-head { position: relative; z-index: 1; text-align: center; padding: 10px 40px 0; }
.rv-cmp-head .rv-rule { margin: 0 auto 18px; }
.rv-eyebrow { font-size: 15px; color: var(--rv-mute); }
.rv-cmp-head .rv-title { margin-top: 8px; font-size: 56px; }
.rv-cmp-head .rv-sub { margin-top: 14px; font-size: 16px; }
.rv-cmp-body { position: relative; z-index: 1; padding: 26px 56px 30px; }
.rv-meta { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--rv-mute); }
.rv-meta b { font-weight: 500; }
.rv-help { margin-top: 12px; font-size: 15px; color: var(--rv-ink); opacity: .85; }
.rv-pair { position: relative; margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.rv-dir { position: relative; height: var(--pair-h, 340px); display: grid; place-items: center; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.rv-dir figure { position: relative; margin: 0; width: 100%; height: 100%; }
.rv-dir figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(20, 40, 60, .18)); }
.rv-dl, .rv-choose { position: absolute; display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .1), 0 10px 24px rgba(20, 40, 60, .08); font-size: 14px; font-weight: 500; color: var(--rv-mute); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rv-dl { left: 14px; top: -6px; }
.rv-choose { right: 14px; bottom: -8px; min-height: 40px; font-weight: 400; }
.rv-vs { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .1), 0 12px 24px rgba(20, 40, 60, .08); display: grid; place-items: center; font-size: 14px; font-weight: 500; color: var(--rv-mute); }
/* Chosen (truth/cmp-1440-p01-chosen): the other side fades back; the pick holds. */
.rv-pair[data-pick="a"] .rv-dir:nth-of-type(2), .rv-pair[data-pick="b"] .rv-dir:nth-of-type(1) { opacity: .28; }
.rv-pair[data-pick="a"] .rv-dir:nth-of-type(1), .rv-pair[data-pick="b"] .rv-dir:nth-of-type(2) { transform: translateY(-4px); }

/* ---------- The welcome (V5 Flow welcome, truth/flow-1440-01-welcome) ---------- */
.rv-wel-wrap { position: relative; z-index: 1; display: grid; place-items: center; padding: 56px 40px 60px; }
.rv-wel { width: 560px; max-width: 100%; padding: 40px 40px 40px; border-radius: 24px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--rv-hair), 0 18px 40px rgba(58, 30, 60, .06); text-align: left; }
.rv-wel .rv-rule { margin: 0 0 30px; width: 52px; }
.rv-wel small { display: block; font-size: 14px; color: var(--rv-mute); }
.rv-wel h4, .rv-wel .rv-wt { margin: 10px 0 0; font-family: var(--serif); font-weight: 400; font-size: 48px; line-height: 1.03; letter-spacing: -.02em; }
.rv-wel .rv-from { margin-top: 10px; font-size: 15px; color: var(--rv-mute); }
.rv-wel p.rv-msg { margin-top: 22px; font-size: 17px; line-height: 1.6; color: var(--rv-ink); }
.rv-wel .rv-do { margin-top: 26px; font-size: 14px; color: var(--rv-mute); }
.rv-wel ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.rv-wel li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.rv-wel li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); flex: none; }
.rv-wel .rv-time { margin-top: 24px; font-size: 15px; color: var(--rv-mute); }
.rv-wel .rv-begin { margin-top: 30px; width: 220px; height: 48px; border-radius: 999px; background: var(--acc); color: #FFFFFF; display: grid; place-items: center; font-weight: 500; font-size: 16px; }

/* ---------- Phone and narrow windows: the same pages as the app draws them under 520px ---------- */
@container ka (max-width: 520px) {
  .ka-win:has(> .rv) { aspect-ratio: 9 / 15; }
  .rv-top { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 14px 16px 0; min-height: 0; }
  .rv-top .rv-studio, .rv-top .rv-saved { display: none; }
  .rv-pill { height: 38px; padding: 0 16px; gap: 10px; }
  .rv-mb-head { padding: 18px 20px 0; }
  .rv-mb-head::before { content: ""; display: block; width: 48px; height: 2px; margin: 0 auto 22px; background: var(--acc); }
  .rv-title { font-size: 36px; }
  .rv-sub { margin-top: 12px; }
  .rv-mason { margin: 26px 14px 0; columns: 1; }
  .rv-mason figure { margin-bottom: 14px; }
  .rv-float { bottom: 16px; height: 38px; font-size: 14px; padding: 0 16px; }
  .rv-count { right: 50%; translate: 50% 0; }
  .rv-confirm { display: none; }
  .rv-go { display: none; }
  /* The rating window becomes a sheet: the image on top, the steps under it. */
  .rv-rate { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-width: none; height: auto; max-height: calc(100% - 64px); translate: 0 24px; grid-template-columns: minmax(0, 1fr); grid-template-rows: 220px auto; border-radius: 24px; }
  .rv-mb:is([data-st="rate"], [data-st="why"], [data-st="feel"]) .rv-rate { translate: 0 0; }
  .rv-rate-b { min-height: 230px; }
  .rv-step { padding: 0 20px; }
  .rv-scale { flex-wrap: wrap; gap: 8px; }
  .rv-scale span { flex: 0 0 calc((100% - 32px) / 5); max-width: none; }
  .rv-rate-h { height: 64px; padding: 0 16px; }
  .rv-rate-f { height: 72px; padding: 0 16px; }
  .rv-chips span { height: 40px; padding: 0 13px; font-size: 14px; }
  .rv-cmp-head { padding: 22px 18px 0; }
  .rv-cmp-head .rv-title { font-size: 34px; }
  .rv-cmp-body { padding: 24px 16px 28px; }
  .rv-meta { flex-direction: column; gap: 10px; }
  .rv-pair { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .rv-dir { height: var(--pair-h-sm, 240px); }
  .rv-vs { position: relative; left: auto; top: auto; translate: none; justify-self: center; width: 44px; height: 44px; margin: -22px 0; }
  .rv-wel-wrap { padding: 28px 14px 28px; }
  .rv-wel { padding: 30px 24px 30px; }
  .rv-wel h4, .rv-wel .rv-wt { font-size: 36px; }
  .rv-wel .rv-begin { width: 100%; }
  .rv-q { padding: 28px 18px 24px; }
  .rv-qt { font-size: 28px; }
  .rv-rows { margin-top: 22px; }
  .rv-rows > span { min-height: 62px; font-size: 22px; padding: 0 16px; }
  .rv-dots span:nth-child(n+6) { display: none; }
}
@container ka (min-width: 521px) and (max-width: 900px) {
  .rv-mason { --cols: 3; margin: 30px 24px 0; }
  .rv-title { font-size: 44px; }
  .rv-cmp-head .rv-title { font-size: 46px; }
  .rv-cmp-body { padding: 28px 28px 32px; }
  .rv-pair { gap: 32px; }
  .rv-top .rv-saved { display: none; }
}

/* ============================== 3 · The laptop + phone pair (ruling 23) ==============================
   One composition used everywhere: the laptop is a 1024px desktop browser, the phone a 375px phone, both on one
   baseline; the phone overlaps the laptop's lower right by a third of its own width. The pair is fitted as one
   mock ([data-fit="1260"]), so it is centred and fills its card. Each screen holds the real page at its own width:
   the phone's screen is its own `ka` container, so the app's phone rules apply there. */
.dp { position: relative; width: 1260px; height: 760px; }
.dp-laptop { position: absolute; left: 0; bottom: 0; width: 1024px; height: 712px; display: flex; flex-direction: column; border-radius: 18px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .14); overflow: clip; container: ka / inline-size; }
.dp-laptop > .ka-chrome { flex: none; }
.dp-laptop > .rv { flex: 1; min-height: 0; }
.dp-phone { position: absolute; right: 0; bottom: 0; width: 375px; height: 760px; padding: 12px; border-radius: 54px; background: #1E1A24; box-shadow: 0 30px 60px rgba(30, 20, 40, .22); }
.dp-screen { position: relative; width: 351px; height: 100%; border-radius: 42px; overflow: clip; background: #FFFFFF; container: ka / inline-size; display: flex; flex-direction: column; }
.dp-status { flex: none; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px 0 30px; font-size: 14px; font-weight: 500; color: #1E1A24; }
.dp-status i { width: 96px; height: 28px; border-radius: 14px; background: #1E1A24; }
.dp-status b { font-weight: 500; letter-spacing: .02em; }
.dp-addr { flex: none; margin: 0 12px; height: 32px; border-radius: 10px; background: #F2F0F3; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13.5px; color: #6E5A70; }
.dp-screen > .rv { flex: 1; min-height: 0; }
.dp-screen > .rv::before { content: ""; }
/* Phone pages run on below the screen: the bottom fades like the page scrolls on. */
.dp-screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: 6; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #FFFFFF 90%); }
.dp-screen { --ka-fades: 1; }

/* ============================== 4 · The journey (rulings 17 and 19) ==============================
   Steps of one process, in order, on one thread. Markup is the stacked form (each step: label, line, visual), so
   phones and pages without script read it top to bottom. On a desktop tall enough to hold it, kit-r6.js adds
   .jy--pin: the section pins, scrolling moves from step to step, the thread on the left is the progress (click a
   step to go to it), and the visuals move into the stage on the right, each landing whole and holding before the
   next one comes.
   <section class="jy" data-jy aria-label="…">
     <div class="wrap jy-head">h2, body</div>
     <div class="jy-track"><div class="jy-pin"><div class="wrap jy-grid">
       <ol class="jy-steps">
         <li class="jy-step"><button class="jy-lbl" type="button"><span class="jy-n">1</span><span class="jy-t">You ask</span></button>
           <div class="jy-txt"><h3 class="jy-h">…</h3><p class="jy-p">…</p></div>
           <div class="jy-vis">…a [data-fit] mock…</div></li> …
       </ol>
       <div class="jy-stage" aria-hidden="true"></div>
     </div></div></div>
   </section> */
.jy { position: relative; padding-top: var(--sec); }
.jy-head { margin-bottom: max(40px, calc(var(--vw) * 3.6)); }
.jy-head .h2 { max-width: 860px; }
.jy-head .body { margin-top: 18px; max-width: 640px; }
.jy-head.center { text-align: center; }
.jy-head.center .h2, .jy-head.center .body { margin-inline: auto; }
.jy-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 64px; }
/* The thread: one hairline through the step numbers. */
.jy-steps::before { content: ""; position: absolute; left: 16.25px; top: 20px; bottom: 20px; width: 1.5px; background: var(--hair-strong); }
.jy-step { position: relative; min-width: 0; }
.jy-lbl { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 14px; font: 500 17px/1.3 var(--sans); color: var(--plum); }
.jy-n { position: relative; z-index: 1; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--plum); color: #FFFFFF; font-size: 15px; transition: background-color .4s var(--ease-out), color .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.jy-txt { padding-left: 48px; }
.jy-h { margin-top: 10px; font-family: var(--serif); font-weight: 400; font-size: max(26px, calc(var(--vw) * 2.25)); line-height: 1.12; letter-spacing: -.015em; color: var(--plum); text-wrap: balance; }
.jy-p { margin-top: 10px; font-size: var(--fs-body); line-height: 1.55; color: var(--mute); text-wrap: pretty; max-width: 480px; }
.jy-txt .qlink { margin-top: 12px; }
.jy-vis { min-width: 0; margin-top: 26px; padding-left: 48px; }
.jy-stage { display: none; }

/* Pinned (desktop). */
.jy--pin .jy-track { position: relative; height: calc(var(--n, 3) * var(--jy-step, 92svh) + 8svh); }
.jy--pin .jy-pin { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); }
.jy--pin .jy-grid { height: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: max(40px, calc(var(--vw) * 4.5)); }
.jy--pin.jy--flip .jy-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.jy--pin.jy--flip .jy-steps { order: 2; }
.jy--pin .jy-steps { align-self: center; gap: 0; }
.jy--pin .jy-steps::before { top: 30px; bottom: 30px; }
.jy--pin .jy-steps::after { content: ""; position: absolute; left: 16.25px; top: 30px; width: 1.5px; height: calc(var(--jy-f, 0) * (100% - 60px)); background: var(--plum); }
.jy--pin .jy-step { padding: 13px 0; }
.jy--pin .jy-lbl { cursor: pointer; color: var(--mute); }
.jy--pin .jy-lbl:hover { color: var(--plum); }
.jy--pin .jy-lbl:focus-visible { outline: 2px solid #8F83D6; outline-offset: 6px; border-radius: 6px; }
.jy--pin .jy-n { background: #FFFFFF; color: var(--mute); box-shadow: inset 0 0 0 1.5px var(--hair-strong); }
.jy--pin .jy-step.is-done .jy-n { color: var(--plum); box-shadow: inset 0 0 0 1.5px var(--plum); }
.jy--pin .jy-step.is-on .jy-lbl, .jy--pin .jy-step.is-done .jy-lbl { color: var(--plum); }
.jy--pin .jy-step.is-on .jy-n { background: var(--plum); color: #FFFFFF; box-shadow: none; }
.jy--pin .jy-txt { overflow: clip; max-height: 0; opacity: 0; transition: max-height .55s var(--ease-out), opacity .3s var(--ease-out); }
.jy--pin .jy-step.is-on .jy-txt { max-height: 440px; opacity: 1; transition: max-height .6s var(--ease-out), opacity .5s var(--ease-out) .15s; }
.jy--pin .jy-stage { display: block; position: relative; min-width: 0; margin: max(24px, 4svh) 0; }
.jy--pin.jy--bleed .jy-stage { margin-right: calc((100vw - min(calc(100vw - var(--gut) * 2), var(--col))) / -2); }
.jy--pin.jy--bleed.jy--flip .jy-stage { margin-right: 0; margin-left: calc((100vw - min(calc(100vw - var(--gut) * 2), var(--col))) / -2); }
.jy--pin .jy-stage > .jy-vis { position: absolute; inset: 0; margin: 0; padding: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity .45s var(--ease-out), transform .6s var(--ease-out), visibility 0s .6s; }
.jy--pin .jy-stage > .jy-vis.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .55s var(--ease-out) .1s, transform .7s var(--ease-out) .1s, visibility 0s; }
.jy--pin .jy-stage > .jy-vis > * { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .jy--pin .jy-stage > .jy-vis, .jy--pin .jy-stage > .jy-vis.is-on, .jy--pin .jy-txt, .jy--pin .jy-step.is-on .jy-txt { transition: none; transform: none; }
}
@media (max-width: 600px) {
  .jy-steps { gap: 52px; }
  .jy-txt, .jy-vis { padding-left: 0; }
  .jy-txt { margin-top: 0; }
  .jy-step > .jy-txt { padding-left: 48px; }
  .jy-vis { margin-top: 22px; }
  .jy-steps::before { display: none; }
  .jy-step + .jy-step::before { content: ""; position: absolute; left: 16.25px; top: -52px; height: 52px; width: 1.5px; background: var(--hair-strong); }
}

/* ============================== 5 · Mosaic backdrops that move (ruling 21) ==============================
   page-mosaic.js rebuilds the static brand mosaic (assets/img/kit-mosaic.svg) as rows of tiles and lets the rows
   drift, slowly, in the coming-soon strip's language (MosaicRun). The mock on top never moves. Still under reduced
   motion; paused off screen. */
.mzm { position: absolute; inset: 0; overflow: clip; background: #3A1E3C; display: flex; flex-direction: column; }
.mzm-row { flex: 1 1 0; position: relative; display: flex; will-change: transform; }
.mzm-row > i { flex: none; height: 100%; display: block; }
.mz-side.has-mzm { background-image: none; }
.rv-pairset[hidden] { display: none !important; }

/* ============================== 6 · Studio pieces the R4 kit didn't have (4.123.0) ==============================
   .sd   V5StudioDrawer: the floating panel on the right of a studio (Moodboard settings, Image details).
   .sm   The Send modal ("Send a link", truth/studio-forms-1440-c-send).
   .rd   An opened Results row (V5ResultsRowDetail): Reasons, How it felt, In their words. */
.ka-dim { position: absolute; inset: 0; z-index: 3; background: rgba(58, 30, 60, .2); }
.sd { position: absolute; z-index: 4; top: 14px; right: 14px; bottom: 14px; width: 520px; display: flex; flex-direction: column; border-radius: 18px; background: #FFFFFF; box-shadow: 0 24px 60px rgba(58, 30, 60, .14), inset 0 0 0 1px rgba(58, 30, 60, .08); overflow: clip; text-align: left; }
.sd--wide { width: 820px; }
.sd-scroll { flex: 1; min-height: 0; overflow: clip; display: flex; }
.sd-col { flex: 1; min-width: 0; padding: 30px 30px 0; }
.sd-col--tint { flex: 0 0 360px; padding: 20px 20px 0; background: linear-gradient(180deg, #F3F1FB, #F7F5FC); }
.sd-eyebrow { font-size: 14px; color: var(--ka-mute); }
.sd-title { margin-top: 6px; font-family: var(--serif); font-size: 30px; line-height: 1.08; letter-spacing: -.01em; }
.sd-desc { margin-top: 8px; font-size: 15px; color: var(--ka-mute); }
.sd-x { position: absolute; top: 20px; right: 20px; width: 34px; height: 34px; border-radius: 50%; background: #F2F0F3; display: grid; place-items: center; font-size: 16px; color: var(--ka-plum); }
.sd-sec { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ka-hair); }
.sd-sec > b { display: block; font-size: 16px; font-weight: 500; }
.sd-sec > small { display: block; margin-top: 2px; font-size: 14px; color: var(--ka-mute); }
.sd-lbl { margin-top: 14px; font-size: 14px; color: var(--ka-mute); }
.sd-field { margin-top: 6px; padding: 12px 16px; border-radius: 12px; background: #F2F0F3; font-size: 16px; line-height: 1.45; color: var(--ka-plum); }
.sd-row { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sd-row b { display: block; font-weight: 500; font-size: 15px; } .sd-row small { display: block; font-size: 14px; color: var(--ka-mute); }
.sd-num { width: 72px; height: 44px; border-radius: 12px; background: #F2F0F3; display: grid; place-items: center; font-size: 16px; }
.sd-foot { flex: none; height: 66px; display: flex; align-items: center; gap: 18px; padding: 0 22px; border-top: 1px solid var(--ka-hair); font-size: 15px; }
.sd-foot .st { margin-right: auto; color: var(--ka-mute); display: inline-flex; align-items: center; gap: 8px; }
.sd-foot .st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2BA89E; }
.sd-foot .pri { height: 42px; padding: 0 20px; border-radius: 999px; background: var(--ka-plum); color: #FFFFFF; display: inline-flex; align-items: center; font-weight: 500; }
.sd-foot .pri.is-off { background: #ECE8F6; color: var(--acc); }
/* Image details (truth/studio-05-image-details-1440) */
.sd-prev { position: relative; border-radius: 14px; overflow: clip; aspect-ratio: 4 / 3; background: #EEEBF0; }
.sd-prev img { position: absolute; inset: 0; }
.sd-prev .pb { position: absolute; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 14px; }
.sd-prev .pb.l { left: 10px; } .sd-prev .pb.r { right: 10px; }
.sd-ok { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ka-mute); }
.sd-ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2BA89E; }
.sd-sees { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ka-hair); }
.sd-sees-h { display: flex; align-items: center; justify-content: space-between; }
.sd-sees-h b { font-family: var(--serif); font-weight: 400; font-size: 20px; }
.sd-sees-h span { height: 32px; padding: 0 12px; border-radius: 999px; background: #FFFFFF; display: inline-flex; align-items: center; font-size: 13.5px; }
.sd-sw { margin-top: 12px; display: flex; gap: 6px; }
.sd-sw i { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .1); }
.sd-kv { margin-top: 12px; font-size: 14px; color: var(--ka-mute); }
.sd-kv b { display: block; font-weight: 400; font-size: 15px; color: var(--ka-plum); margin-top: 2px; }
.sd-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.sd-tags span { height: 32px; padding: 0 12px; border-radius: 999px; background: #F2F0F3; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.sd-tags.x span::after { content: "×"; color: var(--ka-mute); }
.sd-tags span.is-on { background: #E9E4F6; }
.sd-tags.dot span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #8F83D6; }
/* The Send modal */
.sm { position: absolute; z-index: 4; left: 50%; top: 50%; translate: -50% -50%; width: 540px; padding: 30px 32px 26px; border-radius: 18px; background: #FFFFFF; box-shadow: 0 30px 70px rgba(58, 30, 60, .18); text-align: left; }
.sm-x { position: absolute; top: 22px; right: 24px; font-size: 18px; color: var(--ka-mute); }
.sm small { display: block; font-size: 14px; color: var(--ka-mute); }
.sm .t { margin-top: 4px; font-family: var(--serif); font-size: 32px; line-height: 1.1; letter-spacing: -.01em; }
.sm .d { margin-top: 10px; font-size: 16px; color: var(--ka-mute); }
.sm-link { margin-top: 22px; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 14px; background: #F2F0F3; }
.sm-link span { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.sm-link b { height: 40px; padding: 0 18px; border-radius: 999px; background: var(--ka-plum); color: #FFFFFF; display: inline-flex; align-items: center; font-weight: 500; font-size: 15px; }
.sm-acts { margin-top: 16px; display: flex; justify-content: flex-end; align-items: center; gap: 22px; font-size: 15px; }
.sm-acts b { height: 42px; padding: 0 20px; border-radius: 999px; background: var(--ka-plum); color: #FFFFFF; display: inline-flex; align-items: center; font-weight: 400; }
.sm-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ka-hair); font-size: 14px; line-height: 1.55; color: var(--ka-mute); }
/* An opened Results row */
.rd { margin-top: 16px; padding: 16px 20px; border-radius: 14px; background: #F7F5FA; }
.rd p { font-size: 15px; line-height: 1.5; color: rgba(58, 30, 60, .86); }
.rd h5 { margin: 14px 0 0; font-size: 14px; font-weight: 400; color: var(--ka-mute); }
.rd ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.rd li { height: 32px; padding: 0 12px; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ka-hair); display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.rd li small { font-size: 14px; color: var(--ka-mute); }
.rd q { display: block; margin-top: 8px; font-family: var(--serif); font-size: 19px; line-height: 1.35; quotes: "\201C" "\201D"; }
.rd .who { margin-top: 6px; display: flex; gap: 12px; font-size: 14px; color: var(--ka-mute); }
.rd .who u { text-decoration: none; color: var(--ka-plum); }

/* ---------- Results: a Moodboard chapter's image rows (from page-moodboard.css, now shared) ---------- */
.mbk-img { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 0 24px; align-items: center; padding: 22px 0 6px; }
.mbk-img > .rd { grid-column: 1 / -1; }
.mbk-img figure { margin: 0; height: 96px; border-radius: 10px; overflow: clip; }
.mbk-img b { display: block; font-size: 17px; font-weight: 500; }
.mbk-img .line { margin-top: 12px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mbk-img .line > span:last-child { font-size: 15px; }
/* A respondent page inside the Flow studio's preview card */
.ka-flow-card > .rv { flex: 1 1 0; min-height: 0; }
.rv--card .rv-top { padding: 12px 20px 0; min-height: 60px; }
.rv--card .rv-title { font-size: 40px; }
.rv--card .rv-mb-head { padding-top: 6px; }
.rv--card .rv-mason { margin: 24px 22px 0; column-gap: 14px; }
.rv--card .rv-mason figure { margin-bottom: 14px; }
.rd-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.rd-2 h5 { margin-top: 0; }
.rd > h5 { margin-top: 14px; }

/* ---------- The agent's reply (rulings 16): Encore's MCP answers in text, so the chat shows words and a link,
   never an Encore card. "Used Encore" is the chat app's own tool row. ---------- */
.kc-list { margin: 0; padding-left: 22px; list-style: disc; display: grid; gap: 6px; font-size: 16px; line-height: 1.55; }
.ka-chat--claude .kc-list { font-family: var(--serif); font-size: 17px; color: #141413; }
.kc-say b, .kc-list b { font-weight: 500; }
.ka-chat--claude .kc-say b, .ka-chat--claude .kc-list b { font-weight: 400; }
.kc-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }
.ka-chat--claude .kc-link { color: #141413; }
.ka-chat--gpt .kc-link { color: #0D0D0D; }
.kc-tool span:empty { display: none; }

/* ---------- The thank-you (V5RuntimeCompletion, truth/flow-1440-17-thankyou-full): the card, the tile strip, then
   "Here's what we heard": the images they rated highest, the words they chose, their own words. ---------- */
.rv-end { position: relative; z-index: 1; width: 560px; max-width: calc(100% - 48px); margin: 0 auto; padding: 56px 0 40px; }
.rv-end .rv-wel { width: 100%; }
.rv-end .rv-wel small { margin-top: 0; }
.rv-end .rv-cta { margin-top: 26px; display: inline-grid; place-items: center; height: 48px; padding: 0 26px; border-radius: 999px; background: var(--acc); color: #FFFFFF; font-weight: 500; font-size: 16px; }
.rv-strip { margin-top: 28px; font-size: 14px; color: var(--rv-mute); }
.rv-strip i { display: inline-block; vertical-align: top; width: 20px; height: 10px; margin: 10px 1px 0 0; background: #CCD8F2; }
.rv-strip i.q { background: #D5E6D6; } .rv-strip i.c { background: #F58A5B; }
.rv-strip i:first-of-type { border-radius: 5px 0 0 5px; } .rv-strip i:last-of-type { border-radius: 0 5px 5px 0; }
.rv-heard { margin-top: 34px; }
.rv-heard .rv-rule { width: 42px; }
.rv-heard > b { display: block; margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.05; letter-spacing: -.02em; }
.rv-heard > p { margin-top: 10px; font-size: 15px; color: var(--rv-mute); }
.rv-heard h6 { margin: 26px 0 0; font-size: 14px; font-weight: 400; color: var(--rv-mute); }
.rv-top4 { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rv-top4 figure { margin: 0; aspect-ratio: 4 / 5; border-radius: 10px; overflow: clip; }
.rv-words { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.rv-words span { height: 40px; padding: 0 16px; border-radius: 999px; background: #EEEAF6; display: inline-flex; align-items: center; font-size: 16px; }
.rv-heard q { display: block; margin-top: 10px; font-family: var(--serif); font-size: 30px; line-height: 1.15; letter-spacing: -.01em; quotes: "\201C" "\201D"; }
@container ka (max-width: 520px) {
  .rv-end { max-width: calc(100% - 24px); padding: 30px 0 30px; }
  .rv-top4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-heard > b { font-size: 32px; }
  .rv-heard q { font-size: 24px; }
}

/* In the laptop + phone pair the phone sits over the laptop's right edge, so the laptop's right-hand meta line (which it would cover) is left out. */
.dp-laptop .rv-meta > span { visibility: hidden; }

/* ---------- 4b · The stepped path (.jy.jy--path): the same steps and thread, never pinned. For a page that already
   has its one pinned section (R4 ruling 9: at most one per page). On a desktop each step is its words on the
   thread, beside its own big visual, which may run off the right edge (.jy--bleed). ---------- */
@media (min-width: 901px) {
  .jy--path .jy-steps { gap: max(96px, calc(var(--vw) * 8.4)); }
  .jy--path .jy-steps::before { top: 0; bottom: 0; }
  .jy--path .jy-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: max(40px, calc(var(--vw) * 4.5)); align-items: start; }
  .jy--path .jy-step > .jy-lbl { grid-column: 1; grid-row: 1; padding-top: max(24px, calc(var(--vw) * 2.4)); }
  .jy--path .jy-step > .jy-txt { grid-column: 1; grid-row: 2; }
  .jy--path .jy-step > .jy-vis { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; padding-left: 0; }
  .jy--path.jy--bleed .jy-step > .jy-vis { margin-right: calc((100vw - min(calc(100vw - var(--gut) * 2), var(--col))) / -2); }
  .jy--path .jy-h { font-size: max(28px, calc(var(--vw) * 2.5)); }
}
/* The Comparison page as the Flow studio previews it, in its card. */
.rv--card.rv-cmp .rv-cmp-head { padding: 4px 22px 0; }
.rv--card.rv-cmp .rv-cmp-head .rv-rule { margin-bottom: 12px; }
.rv--card.rv-cmp .rv-cmp-head .rv-title { font-size: 34px; }
.rv--card.rv-cmp .rv-cmp-head .rv-sub { font-size: 14px; margin-top: 8px; }
.rv--card.rv-cmp .rv-cmp-body { padding: 16px 24px 24px; }
.rv--card.rv-cmp .rv-help { display: none; }
.rv--card.rv-cmp .rv-pair { gap: 34px; margin-top: 16px; }
.rv--card.rv-cmp .rv-vs { width: 40px; height: 40px; }
.rv--card .rv-dl, .rv--card .rv-choose { min-height: 32px; padding: 0 12px; font-size: 13.5px; }
.ka-flow-card > .rv--card.rv-cmp .rv-top { min-height: 56px; padding-top: 10px; }
.ka-flow-card > .rv--card.rv-cmp .rv-cmp-head .rv-title { font-size: 28px; }
.ka-flow-card > .rv--card.rv-cmp .rv-cmp-head .rv-eyebrow { font-size: 13.5px; }
.ka-flow-card > .rv--card.rv-cmp .rv-meta { font-size: 13.5px; }
.ka-flow-card > .rv--card.rv-cmp .rv-meta > span { display: none; }
.ka-flow-card > .rv--card.rv-cmp .rv-dir { height: 150px; }
.ka-flow-card > .rv--card.rv-cmp .rv-top .rv-studio { display: none; }

/* ---------- Choice rows everywhere (Pick One, Pick Many, Yes / No), as 4.123.0 draws them (truth/form-slides-1440-
   q14, q15; form-classic-1440-02-fullpage): full-width grey rows with hairlines between, a small number, a serif
   label, and a radio at the right that fills when picked. No bordered white cards, no check circles. ---------- */
.ka-ballot { gap: 0 !important; border-top: 1px solid rgba(58, 30, 60, .16); }
.ka-ballot span { grid-template-columns: 24px minmax(0, 1fr) 14px !important; min-height: 64px; padding: 0 20px 0 22px !important; border: 0 !important; border-radius: 0 !important; border-bottom: 1px solid rgba(58, 30, 60, .16) !important; background: #F4F3F4 !important; box-shadow: none !important; color: var(--ka-plum) !important; }
.ka-ballot span::after { width: 14px !important; height: 14px !important; border-radius: 50% !important; background: #FFFFFF !important; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .35) !important; background-image: none !important; }
.ka-ballot span.is-on::after, .ka-ballot span[aria-checked="true"]::after { box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .35), inset 0 0 0 4px #FFFFFF, inset 0 0 0 10px var(--ka-plum) !important; }
/* The Comparison studio's "Add images" drawer (Board source, Project library). */
.sd--src { width: 470px; }
.sd-select { display: flex; justify-content: space-between; align-items: center; }
.sd-select::after { content: ""; width: 10px; height: 10px; background: no-repeat center / contain 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"); }
.sd-thumbs { margin-top: 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sd-thumbs i { aspect-ratio: 1; border-radius: 6px; overflow: clip; display: block; }
.sd-lib { margin-top: 8px; display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: #F2F0F3; font-size: 14px; color: var(--ka-mute); }
.sd-lib.is-on { background: #ECE8F6; color: var(--ka-plum); }

/* ---------- Moodboard to Comparison: what one person liked, then the pair they get (moodboard and comparison pages) ---------- */
.mbk-fav { display: grid; grid-template-columns: minmax(0, 3fr) 56px minmax(0, 9fr); align-items: center; gap: 20px; margin-top: var(--sec-head); }
.mbk-fav-liked { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.mbk-fav-liked figure { position: relative; margin: 0; border-radius: 12px; overflow: clip; aspect-ratio: var(--ar); }
.mbk-fav-liked img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mbk-fav-liked .rv-badge { opacity: 1; width: 28px; height: 28px; right: 8px; bottom: 8px; background-size: 13px; }
.mbk-fav-liked p { grid-column: 1 / -1; margin-top: 6px; font-size: 15px; color: var(--mute); }
.mbk-fav-arrow { width: 48px; justify-self: center; }
.mbk-fav-pair { min-width: 0; }
@media (max-width: 900px) {
  .mbk-fav { grid-template-columns: minmax(0, 1fr); }
  .mbk-fav-arrow { transform: rotate(90deg); }
  .mbk-fav-liked { max-width: 420px; }
}

/* Results rows for a pair: the two thumbs with "or" (V5FlowResults). */
.cmp-two { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }
.cmp-two figure { margin: 0; width: 56px; height: 42px; border-radius: 6px; overflow: clip; }
.cmp-two span { font-size: 14px; color: var(--ka-mute); }

/* ===================== R6 use cases ===================== */
/* Founders: Dot Voting rows as the app draws them (truth q18): numbered, hairline-separated, the -/+ stepper. Continue moves to the next question. */
.uc2-col .dv-row { border-radius: 0; box-shadow: none; background: transparent; border-bottom: 1px solid rgba(58, 30, 60, .16); padding: 14px 8px; }
.uc2-col .dv-rows { border-top: 1px solid rgba(58, 30, 60, .16); }
.uc2-col .dv-row + .dv-row { margin-top: 0; }
.uc2-col .dv-row.has { background: rgba(125, 112, 203, .05); }
.dv-name .dv-k { display: inline-block; width: 26px; font-family: var(--sans); font-size: 14px; color: var(--ka-mute); }
.uc2-col .dv-next { flex-direction: column; align-items: center; text-align: center; }
.dv-next .ka-q { outline: none; }
.dv-next .ka-ballot { width: 100%; max-width: 760px; margin-top: 28px; text-align: left; }
.dv-next .ka-sfoot { max-width: 760px; }
.dv-next .ka-back { cursor: pointer; background: #FFFFFF; border: 0; font: inherit; }
.dv-next .ka-back:focus-visible { outline: 2px solid var(--ka-plum); outline-offset: 2px; }

/* Team leads: the Classic page (truth form-classic-1440): white fields with a hairline, the spectrum card with its endpoints and no number, Dot Voting steppers, This / Not That lines. */
.cl-form .fq { border-top: 0; padding-top: 0; margin-top: 36px; }
.cl-field { margin-top: 14px; min-height: 52px; border-radius: 14px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .14); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-size: 17px; color: var(--ka-ink); }
.cl-field svg { width: 14px; height: 14px; }
.cl-text { align-items: flex-start; min-height: 96px; padding: 16px 18px; line-height: 1.5; }
.cl-spec { margin-top: 14px; border-radius: 18px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(58, 30, 60, .06), inset 0 0 0 1px rgba(58, 30, 60, .1); padding: 18px 18px 16px; }
.cl-spec input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, rgba(58, 30, 60, .14), #3A1E3C var(--p, 50%), rgba(58, 30, 60, .14)) !important; }
.cl-ends { margin-top: 12px; display: flex; justify-content: space-between; gap: 16px; }
.cl-ends span { display: grid; gap: 2px; font-family: var(--serif); font-size: 24px; line-height: 1.1; color: var(--ka-ink3, #6E6170); }
.cl-ends span:last-child { text-align: right; }
.cl-ends small { font-family: var(--sans); font-size: 14px; color: var(--ka-mute); }
.cl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cl-bank { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; color: var(--ka-mute); }
.cl-marks { display: inline-flex; gap: 4px; }
.cl-marks i { width: 10px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .3); }
.cl-dv { margin-top: 14px; border-top: 1px solid rgba(58, 30, 60, .16); }
.cl-dv li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 4px; min-height: 60px; padding: 0 8px 0 12px; border-bottom: 1px solid rgba(58, 30, 60, .16); }
.cl-dv small, .cl-tnt small { font-size: 14px; color: var(--ka-mute); }
.cl-dv-n { font-family: var(--serif); font-size: 22px; color: var(--ka-plum); }
.cl-step { display: inline-flex; align-items: center; gap: 10px; }
.cl-step i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .16); font-style: normal; font-size: 16px; color: var(--ka-plum); }
.cl-step i.off { color: rgba(58, 30, 60, .6); }
.cl-step b { min-width: 16px; text-align: center; font-weight: 400; font-size: 15px; }
.cl-tnt { margin-top: 14px; display: grid; gap: 14px; }
.cl-tnt li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: baseline; row-gap: 10px; }
.cl-tnt p { font-family: var(--serif); font-size: 26px; line-height: 1.15; color: var(--ka-plum); }
.cl-tnt u { display: inline-block; min-width: 92px; text-decoration: none; border-bottom: 1px solid rgba(58, 30, 60, .45); text-align: center; }
.cl-chips { grid-column: 2; display: flex; gap: 10px; }
.cl-chips span { height: 40px; padding: 0 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .16); display: inline-grid; place-items: center; font-family: var(--serif); font-size: 19px; color: var(--ka-plum); background: #FFFFFF; }
.cl-chips span.on { background: var(--ka-plum); color: #FFFFFF; box-shadow: none; }
.cl-form .form1-send { border-radius: 999px; }

/* Team leads: By group, as the lanes view draws it (FlowGroups.tsx, lib/brand/lanes.ts): one row per group, one column per step, a plum row for the picked group, "Skips" with a hairline. */
.ln { display: flex; flex-direction: column; background: #FFFFFF; }
.ln-body { padding: 26px 36px 40px; }
.ln-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ln-flow { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: var(--ka-ink); }
.ln-flow b { font-weight: 500; font-size: 17px; }
.ln-flow .ka-ico { width: 20px; height: 20px; }
.ln-tabs { display: inline-flex; padding: 3px; border-radius: 999px; background: #F1EFF3; font-size: 15px; }
.ln-tabs span { padding: 7px 16px; border-radius: 999px; color: var(--ka-ink3, #6E6170); }
.ln-tabs span.on { background: #FFFFFF; color: var(--ka-ink); box-shadow: 0 1px 2px rgba(58, 30, 60, .12); }
.ln-h { margin-top: 22px; font-family: var(--serif); font-size: 52px; line-height: 1.04; letter-spacing: -.02em; color: var(--ka-plum); }
.ln-p { margin-top: 14px; max-width: 600px; font-size: 18px; line-height: 1.5; color: var(--ka-ink); }
.ln-grid { margin-top: 40px; --ln-cols: minmax(150px, 210px) 68px minmax(0, 2fr) minmax(0, 2fr) 68px 72px; }
.ln-cols, .ln-row { display: grid; grid-template-columns: var(--ln-cols); column-gap: 6px; align-items: center; }
.ln-cols { align-items: start; padding-bottom: 16px; border-bottom: 1px solid rgba(58, 30, 60, .14); font-size: 16px; line-height: 1.5; }
.ln-mute { color: var(--ka-ink3, #6E6170); }
.ln-r { text-align: right; }
.ln-step { display: flex; gap: 8px; padding: 0 14px; color: var(--ka-ink); }
.ln-step .ka-ico { width: 18px; height: 18px; margin-top: 3px; flex: none; }
.ln-row { margin-top: 36px; }
.ln-name { display: grid; gap: 2px; }
.ln-name b { font-weight: 400; font-size: 17px; color: var(--ka-ink); }
.ln-row.on .ln-name b { font-weight: 500; }
.ln-name small { font-size: 14px; color: var(--ka-ink3, #6E6170); }
.ln-bk { display: block; height: 44px; border-radius: 999px; background: #F1EFF3; }
.ln-cell { display: flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 12px; background: #F1EFF3; font-size: 14px; color: var(--ka-ink); min-width: 0; white-space: nowrap; overflow: hidden; }
.ln-bk.on, .ln-cell.on { background: var(--ka-plum); color: #F6EFE6; }
.ln-skip { background: transparent; color: var(--ka-ink3, #6E6170); }
.ln-skip i { margin-left: 12px; height: 1px; flex: 1; background: rgba(58, 30, 60, .16); }
.ln-time { text-align: right; font-size: 16px; color: var(--ka-ink3, #6E6170); }
.ln-row.on .ln-time { color: var(--ka-ink); font-weight: 500; }

/* Product teams: the real pair screen with two drawn screens in place of photographs. */
.rv-cmp--ui .rv-dir figure { background: transparent; }
.rv-cmp--ui .rv-dir figure > .ucs { position: absolute; inset: 0; border-radius: 12px; overflow: clip; box-shadow: 0 10px 28px rgba(58, 30, 60, .14), inset 0 0 0 1px var(--ka-hair); }

/* Marketing teams: the try-it pair, choosable. */
.rv-pair[data-try] .rv-dir { cursor: pointer; }
.rv-pair[data-try] .rv-choose { font-family: inherit; border: 0; cursor: pointer; }
.rv-pair[data-try] .rv-choose:focus-visible { outline: 2px solid var(--ka-plum); outline-offset: 2px; }

/* Agents hero: both chats, side by side (no tabs, ruling 17). */
.ag1-both { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: max(24px, calc(var(--vw, 1vw) * 2.4)); align-items: start; }
.ag1-both .ag-panel { display: block !important; min-width: 0; }
@media (max-width: 900px) { .ag1-both { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
/* Team leads: the Classic page is a long page; the window shows its top, cut by the browser's bottom edge, as a real tab would. */
.uc2-form .ka-win > .ka-resp { flex: none; height: 660px; min-height: 0; overflow: clip; }
/* Founders: the rows (beats page-sweep's boxed rows). */
.ka-their .uc2-col .dv-row { border-radius: 0; box-shadow: none; background: transparent; border-bottom: 1px solid rgba(58, 30, 60, .16); padding: 14px 8px; }
.ka-their .uc2-col .dv-row + .dv-row { margin-top: 0; }
.ka-their .uc2-col .dv-row.has { background: rgba(125, 112, 203, .05); }
.rv-cmp--ui .ucs-top b { margin-left: auto; }
.ka-ballot.ucl-b { width: 100%; max-width: 520px; margin: 22px auto 0; }
/* The welcome inside a Flow studio's preview card: the whole card fits (title, what you'll do, time, Begin). */
.rv--card.rv-welp .rv-wel-wrap { padding: 4px 22px 22px; }
.rv--card.rv-welp .rv-wel { width: 500px; padding: 26px 30px 28px; }
.rv--card.rv-welp .rv-wel .rv-rule { margin-bottom: 16px; }
.rv--card.rv-welp .rv-wel .rv-wt { font-size: 34px; }
.rv--card.rv-welp .rv-wel .rv-msg { margin-top: 10px; font-size: 15px; line-height: 1.45; }
.rv--card.rv-welp .rv-wel .rv-do { margin-top: 14px; }
.rv--card.rv-welp .rv-wel ul { margin-top: 6px; }
.rv--card.rv-welp .rv-wel .rv-time { margin-top: 12px; font-size: 14px; }
.rv--card.rv-welp .rv-wel .rv-begin { margin-top: 16px; height: 42px; width: 180px; font-size: 15px; }

/* Ruling 27: text columns wide enough that a headline runs two or three lines at 1280-1920; the visual keeps the larger share. */
@media (min-width: 901px) {
  .pat-feature--split .pat-feature-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: max(40px, calc(var(--vw) * 4)); }
  .pat-feature--split.flip .pat-feature-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pat-feature--split .pat-feature-head { max-width: 580px; }
}
/* By group on a phone: each group is a card of its steps, each cell carrying its step's name. */
@container ka (max-width: 640px) {
  .ln-body { padding: 18px 16px 24px; }
  .ln-head { flex-direction: column; align-items: flex-start; }
  .ln-flow { flex-wrap: wrap; row-gap: 2px; }
  .ln-h { font-size: 38px; }
  .ln-p { font-size: 16px; }
  .ln-grid { margin-top: 24px; }
  .ln-cols { display: none; }
  .ln-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; margin-top: 22px; }
  .ln-row .ln-bk { display: none; }
  .ln-name { grid-column: 1; grid-row: 1; }
  .ln-time { grid-column: 2; grid-row: 1; }
  .ln-cell { grid-column: 1 / -1; height: auto; min-height: 52px; flex-direction: column; align-items: flex-start; justify-content: center; padding: 8px 14px; white-space: normal; }
  .ln-cell::before { content: attr(data-h); font-size: 14px; opacity: .8; }
  .ln-skip { flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
  .ln-skip::before { flex-basis: 100%; }
}

/* ===================== R6 gate fixes (clipcheck at the R6 sizes) ===================== */
/* Phones: a page people answer that isn't a board grows to hold all of itself (the board keeps its 9:15 window). */
@container ka (max-width: 520px) {
  .ka-win:has(> .rv-cmp), .ka-win:has(> .rv-qp), .ka-win:has(> .rv-welp), .ka-win:has(> .rv-endp) { aspect-ratio: auto; }
  .ka-win:has(> .rv-cmp) > .rv, .ka-win:has(> .rv-qp) > .rv, .ka-win:has(> .rv-welp) > .rv, .ka-win:has(> .rv-endp) > .rv { flex: none; }
}
/* Phones: a studio drawer is a full sheet, as the app shows it on a phone; the board behind it steps aside. */
@container ka (max-width: 640px) {
  .ka-body:has(> .sd) > :not(.sd):not(.ka-dim) { display: none; }
  .ka-body:has(> .sd) { height: auto; }
  .sd, .sd--wide { position: relative; inset: auto; width: auto; margin: 10px; }
  .sd-scroll { overflow: visible; flex-direction: column; }
  .sd-col--tint { flex: none; }
  .sd-foot { flex-wrap: wrap; height: auto; padding: 14px 18px; }
}
/* Fitted windows run near 0.67 at 1280x720 and 1440x900: the chrome's smallest words are drawn a size up so they stay readable. */
.fit-in .ka-url { font-size: 15px; }
.fit-in .rv-wel small, .fit-in .rv-eyebrow, .fit-in .sd-eyebrow, .fit-in .sd-sec > small, .fit-in .sd-row small { font-size: 15px; }
@media (max-width: 600px) { .rv--card .rv-float { white-space: normal; height: auto; min-height: 38px; padding: 8px 14px; max-width: calc(100% - 24px); text-align: center; } }
.ln-cell, .ln-name small { font-size: 15px; }
.fit-in .ka-rhead small, .fit-in .ka-row .n, .fit-in .rv-do, .fit-in .sd-lbl { font-size: 15px; }
.fit-in .ka-url { font-size: 16px; }
.uc2-form .ka-win { aspect-ratio: auto !important; height: auto; }
/* A studio drawer's list runs on under a fade, as it scrolls in the app. */
.sd-scroll { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); }
/* Favourites into pairs (moodboard, comparison): the liked images, then the pair below them at full width (ruling 26: no small boxed windows). */
.mbk-fav { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; width: min(100vw - 2 * var(--gut, 24px), 1240px); margin-left: 50%; translate: -50% 0; }
.mbk-fav-liked { width: min(100%, 520px); }
.mbk-fav-liked p { text-align: center; }
.mbk-fav-arrow { transform: rotate(90deg); }
.mbk-fav-pair { width: 100%; }
.fit-in .ka-tag, .fit-in .sd-lib, .fit-in .rv-from { font-size: 15px; }
@container ka (max-width: 640px) {
  .ka-win:has(> .ka-body > .sd) { aspect-ratio: auto !important; height: auto !important; }
  .ka-win > .ka-body:has(> .sd) { flex: none; min-height: 0; height: auto; }
}
/* A pinned stage centres its visual, so any room the visual's proportions leave is shared above and below (ruling 15: no tall empty band). */
.jy--pin .jy-stage > .jy-vis > .fit { align-self: center; }
.fit-in .fd-more, .fit-in .fd-rcpt-h p { font-size: 15px; }
.fit-in .fd-rcpt span, .fit-in .fd-rcpt b { font-size: 15px; }
.fit-in .fm-draft .ka-row .n, .fit-in .ka-row .ka-tag, .fm-draft .fit-in .ka-tag { font-size: 15px; }
.fit-in .fd-rcpt li .n, .fit-in .fd-rcpt li small { font-size: 15px; }

/* ============================== R6b (27 Oct): ruling 29, the real marks ==============================
   The agents wear their official marks in one ink (r6/logos, via r6/build/r6b_logos.py). Encore is the serif E,
   never four squares (the four squares mean Moodboard only). */
.mcpw-m svg { width: 42%; height: 42%; }
.mcpw-e { font-family: var(--serif); font-weight: 400; font-size: max(42px, calc(var(--m) * .46)); line-height: 1; letter-spacing: -.02em; color: var(--cream); transform: translateY(-2%); }
.mcpw--plum .mcpw-t.is-hub .mcpw-e { color: var(--plum); }
@media (max-width: 600px) { .mcpw-t.is-hub .mcpw-e { font-size: 48px; } .mcpw-e { font-size: 42px; } }
.kc-e { flex: none; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: #3A1E3C; color: #F6F3EE; font: 400 13px/1 var(--serif); font-style: normal; }

/* R6b: on a phone a device pair shows its phone, whole (the laptop beside it would be a few pixels wide), scaled to
   the room by the fit (data-fit-phone="375"); a lone phone (.ph1) does the same. */
@media (max-width: 600px) {
  .dp { width: 375px; height: 760px; }
  .dp-laptop { display: none; }
}
/* R6b: while the fit measures a mock (kit-r6.js), nothing in it transitions, so a font size is read at its value. */
.fit-in[data-fit-measuring], .fit-in[data-fit-measuring] * { transition: none !important; }

/* ============================== R6b (27 Oct): choice rows as 4.123.1 draws them ==============================
   The app no longer draws grey rows (runtimeSurface.ts RESPONDENT_PLANES, globals.css .client-option-choice--ballot,
   item 25): each row is its own WHITE row with a very faint neutral edge (rgba(28,28,32,.10)), 16px corners, apart
   from the next by air (10px), a small number, the serif label and a radio ring at the right. Chosen: the studio's
   strong tint (Encore's plum tints in lavender, #ECE8F6), the colour's own edge, the label in the colour and the ring
   filled. The grey rows in the truth shots predate this; every mock that copied them (.rv-rows, .ka-ballot,
   .fg-ballot in page-forms.css) now reads these. */
.rv-rows, .ka-ballot { display: grid; gap: 10px !important; border-top: 0 !important; }
.rv-rows > span, .ka-ballot span {
  background: #FFFFFF !important; border: 1px solid rgba(28, 28, 32, .10) !important; border-radius: 16px !important;
  box-shadow: none !important; transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.rv-rows > span::after, .ka-ballot span::after {
  width: 12px !important; height: 12px !important; border-radius: 50% !important; background: transparent !important; background-image: none !important;
  box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--acc, #3A1E3C) 35%, rgba(28, 28, 32, .12)) !important;
}
.rv-rows > span.is-on, .ka-ballot span.is-on, .ka-ballot span[aria-checked="true"] {
  background: var(--acc-tint, #ECE8F6) !important; border-color: color-mix(in oklch, var(--acc, #3A1E3C) 42%, var(--acc-tint, #ECE8F6)) !important;
  color: color-mix(in oklch, var(--acc, #3A1E3C) 78%, #1E1A24) !important;
}
.rv-rows > span.is-on::after, .ka-ballot span.is-on::after, .ka-ballot span[aria-checked="true"]::after {
  background: var(--acc, #3A1E3C) !important;
  box-shadow: inset 0 0 0 1.5px var(--acc, #3A1E3C), 0 0 0 4px color-mix(in oklch, var(--acc, #3A1E3C) 18%, transparent) !important;
}
.rv-rows--many > span::after { border-radius: 4px !important; }
/* R6b: on the device pair's phone, the first image of a Comparison is short enough that its Choose this sits whole
   above the phone's bottom edge (it was cut mid-chip; the second image runs on under the fade). */
.dp-screen .rv-cmp .rv-dir { height: 196px; }

/* ============================== v11 · Ruling 44: every Comparison pair is laid out as the app lays it out ==============================
   truth/cmp-1440-p01-pair + -chosen: "Direction A/B" sits ABOVE its option (left), "Choose this" UNDER it (right),
   the "vs" chip centred between the two and fully visible, both options whole, side by side (stacked on a phone).
   Before: both pills were absolutely placed on the option's corners, so on any picture that filled its box (a screen,
   a wide photo) the label sat on top of the picture and "Choose this" over its bottom edge. Now each option is three
   rows (label, picture, choose) and nothing is drawn over the picture. The pair keeps its height; the picture takes
   what the two pill rows leave. */
.rv-dir { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); row-gap: 10px; place-items: stretch; }
.rv-dir > figure { grid-row: 2; grid-column: 1; min-height: 0; }
.rv-dir > .rv-dl, .rv-dir > .rv-choose { position: static; grid-column: 1; }
.rv-dir > .rv-dl { grid-row: 1; justify-self: start; margin-left: 12px; }
.rv-dir > .rv-choose { grid-row: 3; justify-self: end; margin-right: 12px; }
.rv-dir figure img { object-position: 50% 50%; }
.rv-pair .rv-vs { top: 50%; }
.rv--card .rv-dir { row-gap: 6px; }
.rv--card .rv-dl, .rv--card .rv-choose { min-height: 28px; }
.ka-flow-card > .rv--card.rv-cmp .rv-dir { height: 200px; }
.dp-screen .rv-cmp .rv-dir { height: 208px; }
/* 601-900px the pair is fitted small and boost() raises its text to the floor, which pushes the phone's first
   Choose this across the screen's bottom edge; the help line steps aside there so the button sits whole (clipcheck 768x1024). */
@media (min-width: 601px) and (max-width: 900px) { .dp-screen .rv-cmp .rv-help, .dp-screen .rv-cmp .rv-pair > .rv-vs { display: none; } }
@container ka (max-width: 520px) {
  /* Stacked: A, then the "vs" chip, then B (the chip was a grid item after both options, so it fell to the bottom). */
  .rv-pair { row-gap: 8px; }
  .rv-dir { height: var(--pair-h-sm, 290px); row-gap: 8px; }
  .rv-pair > .rv-pairset > .rv-dir:first-child, .rv-pair > .rv-dir:first-of-type { grid-row: 1; }
  .rv-pair .rv-vs { top: auto; grid-row: 2; margin: 0; }
  .rv-pair > .rv-pairset > .rv-dir:nth-child(2), .rv-pair > .rv-dir:nth-of-type(2) { grid-row: 3; }
}
/* The phone in the laptop + phone pair shows its first screen: Direction A whole, the fold falling in the gap before
   the "vs" chip (B and the chip are below the fold, as on a real phone; truth/cmp-375-p01-pair). */
.dp-screen .rv-cmp .rv-pair { row-gap: 26px; }

/* Encore marketing site, round 3: page styles for pricing, agents, use cases, about, privacy and terms.
   Builds on assets/site.css (the shared shell). Product UI is built at true size in fixed px; layout uses the
   capped fluid unit (var(--vw)). Hairlines, never shadows. Reference: ../NOTES-PAGES.md */

/* ============================== Shared bits ============================== */
.lede-lg { font-size: max(19px, calc(var(--vw) * 1.53)); line-height: 1.5; color: var(--plum); text-wrap: pretty; }
.mute { color: var(--mute); }
.cite { font-size: 15px; line-height: 1.5; color: var(--mute); }
.cite a { color: inherit; text-underline-offset: 3px; }
.cite a:hover { color: var(--plum); }
.acts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.terms-line { font-size: 15px; line-height: 1.5; color: var(--mute); }
.on-plum .terms-line { color: rgba(246, 243, 238, .8); }
.kicker { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--mute); }
.on-plum .kicker { color: rgba(246, 243, 238, .78); }
.nw { white-space: nowrap; }
.mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; }

/* Sender mark on respondent screens (the studio's or company's initial in a plum circle) */
.nmark { width: 30px; height: 30px; border-radius: 50%; background: var(--plum); color: var(--cream); display: grid; place-items: center; font-family: var(--serif); font-size: 16px; line-height: 1; flex: none; }
.nname { font-family: var(--serif); font-size: 21px; line-height: 1; letter-spacing: -.005em; }
.r-top { display: flex; align-items: center; gap: 10px; }
.r-rule { width: 48px; height: 2px; background: var(--plum); }
.r-eyebrow { margin-top: 16px; font-size: 15px; color: var(--mute); }
.r-title { margin-top: 4px; font-family: var(--serif); font-size: 40px; line-height: 1.06; letter-spacing: -.018em; }
.r-from { margin-top: 8px; font-size: 15px; color: var(--mute); }
.r-para { margin-top: 20px; font-size: 17px; line-height: 1.6; }
.r-do { margin-top: 24px; font-size: 15px; font-weight: 500; color: var(--mute); }
.r-list { margin-top: 10px; display: grid; gap: 8px; font-size: 16px; line-height: 1.4; }
.r-list li { display: flex; align-items: baseline; gap: 12px; }
.r-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lav-6); flex: none; transform: translateY(-3px); }
.r-time { margin-top: 18px; font-size: 16px; color: var(--mute); }
.r-label { margin-top: 26px; font-size: 15px; font-weight: 500; }
.r-field { margin-top: 8px; height: 52px; border-radius: 999px; background: #EFECF4; display: flex; align-items: center; padding: 0 20px; font-size: 16px; color: var(--mute); }
.r-field.is-typed { color: var(--plum); }
.r-field i { width: 1px; height: 20px; background: var(--plum); margin-left: 2px; }
.r-begin { margin-top: 14px; width: fit-content; min-width: 220px; height: 50px; padding: 0 28px; border-radius: 999px; background: var(--plum); color: #FFFFFF; display: grid; place-items: center; font-size: 16px; font-weight: 500; }

/* The welcome screen, at true size (desktop) */
.welcome { width: 640px; max-width: 100%; background: var(--screen); border: 1px solid var(--hair); border-radius: 24px; padding: 32px 48px 44px; }
.welcome .r-top { margin-bottom: 40px; }

/* ============================== Phone screens (respondent, 360 x 720) ============================== */
.phone { position: relative; width: 360px; height: 720px; max-width: 100%; border-radius: 40px; overflow: hidden; background: var(--screen); border: 1px solid var(--hair); }
.pscreen { display: flex; flex-direction: column; height: 100%; padding: 28px 24px 24px; }
.p-chap { margin-top: 26px; display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--mute); }
.p-prog { margin-top: 10px; height: 3px; border-radius: 3px; background: rgba(58, 30, 60, .08); }
.p-prog i { display: block; height: 100%; border-radius: 3px; background: var(--plum); }
.p-q { margin-top: 28px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.14; letter-spacing: -.012em; }
.p-sub { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--mute); }
.p-btn { margin-top: auto; height: 52px; border: 0; border-radius: 999px; background: var(--plum); color: #FFFFFF; display: grid; place-items: center; font: 500 17px/1 var(--sans); cursor: pointer; transition: background-color .25s var(--ease-out), opacity .3s var(--ease-out), transform .2s var(--ease-out); }
.p-btn:hover { background: #4E2C51; }
.p-btn:active { transform: translateY(1px); }
.p-btn[disabled] { background: #ECE8F6; color: var(--plum); cursor: default; }
.p-btn[disabled]:hover { background: #ECE8F6; }

/* Dot voting (founders try-it): a bank of square marks, rows with their own marks, − and + */
.dv-bank { margin-top: 18px; display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--mute); }
.dv-marks { display: inline-flex; gap: 4px; }
.dv-marks i { width: 10px; height: 10px; border-radius: 1px; border: 1px solid rgba(58, 30, 60, .3); background: transparent; transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out); }
.dv-marks i.on { background: var(--lav-6); border-color: var(--lav-6); }
.dv-left { color: var(--lav-7); font-weight: 500; }
.dv-rows { margin-top: 14px; border-top: 1px solid var(--hair); }
.dv-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 12px 4px 12px 8px; border-bottom: 1px solid var(--hair); transition: background-color .2s var(--ease-out); }
.dv-row.has { background: rgba(125, 112, 203, .06); }
.dv-name { font-family: var(--serif); font-size: 21px; line-height: 1.1; letter-spacing: -.01em; }
.dv-got { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; min-height: 10px; }
.dv-got i { width: 10px; height: 10px; border-radius: 1px; background: var(--lav-6); }
.dv-ctl { display: flex; align-items: center; gap: 2px; }
.dv-ctl button { width: 40px; height: 40px; border-radius: 2px; border: 1px solid var(--hair-strong); background: #FFFFFF; font: 400 20px/1 var(--sans); color: var(--plum); cursor: pointer; display: grid; place-items: center; transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out); }
.dv-ctl button:hover:not([disabled]) { border-color: var(--plum); }
.dv-ctl button:active:not([disabled]) { background: #F2EEF7; }
.dv-ctl button[disabled] { opacity: .4; cursor: default; }
.dv-ctl output { min-width: 26px; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; }
.dv-done { margin-top: 18px; }
/* Results view after Done */
.dv-res { display: none; }
.dv.is-done .dv-ask { display: none; }
.dv.is-done .dv-res { display: flex; }
.dv-res .p-q { font-size: 26px; }
.dv-bars { margin-top: 22px; display: grid; gap: 18px; }
.dv-bar p { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; line-height: 1.3; }
.dv-bar p b { font-weight: 500; }
.dv-bar p span { color: var(--mute); font-size: 15px; white-space: nowrap; }
.dv-track { margin-top: 8px; height: 10px; border-radius: 2px; background: rgba(58, 30, 60, .07); overflow: hidden; }
.dv-track i { display: block; height: 100%; width: 0; background: var(--plum); border-radius: 2px; transition: width 1.2s var(--ease-out); }
.dv-you { margin-top: 4px; font-size: 15px; color: var(--lav-7); min-height: 22px; }
.dv-again { margin-top: auto; align-self: center; }

/* ============================== The studio's Flow step bar ============================== */
.fbar { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 22px; padding: 26px 32px 30px; }
.fbar-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fbar-head svg { width: 22px; height: 22px; flex: none; }
.fbar-name { font-size: 17px; font-weight: 500; }
.fbar-meta { font-size: 16px; color: var(--mute); }
.fbar-steps { margin-top: 26px; display: grid; grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr)); column-gap: 28px; }
.fstep { display: grid; grid-template-rows: auto auto auto; row-gap: 10px; min-width: 0; }
.fstep-name { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 1.3; min-height: 42px; }
.fstep-name svg { width: 18px; height: 18px; flex: none; }
.fstep-line { height: 3px; border-radius: 3px; background: #E7E2EE; }
.fstep.is-on .fstep-line { background: var(--plum); }
.fstep.is-end .fstep-name { color: var(--mute); }
.fstep-sub { font-size: 15px; color: var(--mute); line-height: 1.35; }

/* Plain rows listing what a step asks (under the step bar) */
.asks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
.ask-col h3 { font-size: 15px; font-weight: 500; color: var(--mute); padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.ask-col li { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.ask-col li p:first-child { font-size: 17px; line-height: 1.4; }
.ask-col li p + p { margin-top: 4px; font-size: 15px; color: var(--mute); }

/* ============================== What we heard (studio results), true size ============================== */
.wwh { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 24px; overflow: hidden; }
.wwh-bar { min-height: 76px; padding: 0 40px; display: flex; align-items: center; gap: 32px; background: linear-gradient(90deg, #EFEBF8 0%, #F6F1F6 55%, #FAEFEA 100%); border-bottom: 1px solid var(--hair); }
.wwh-title { font-family: var(--serif); font-size: 28px; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.wwh-title span { font-family: var(--sans); font-size: 16px; color: var(--mute); letter-spacing: 0; margin-left: 12px; }
.wwh-tabs { margin-left: auto; display: flex; gap: 8px; align-self: stretch; }
.wtab { position: relative; border: 0; background: none; padding: 0 12px; font-size: 16px; color: var(--mute); cursor: pointer; white-space: nowrap; transition: color .25s var(--ease-out); }
.wtab b { font-weight: 400; margin-right: 8px; }
.wtab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--plum); transform: scaleX(0); transition: transform .3s var(--ease-out); }
.wtab:hover { color: var(--plum); }
.wtab[aria-selected="true"] { color: var(--plum); }
.wtab[aria-selected="true"]::after { transform: none; }
.wtab .t-short { display: none; }
.wwh-sort { margin-left: auto; font-size: 15px; color: var(--mute); }
.js .chap:not(.is-on) { display: none; }
.chap { display: grid; grid-template-columns: 360px 1fr; gap: 72px; padding: 48px 40px 56px; }
.chap-kicker { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.chap-kicker svg { width: 20px; height: 20px; }
.chap-title { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: 48px; line-height: 1.04; letter-spacing: -.02em; }
.chap-p { margin-top: 18px; font-size: 17px; line-height: 1.55; }
.stats { margin-top: 36px; display: flex; gap: 64px; }
.stat b { display: block; font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: 1; }
.stat span { display: block; margin-top: 10px; font-size: 15px; color: var(--mute); }
.quote { margin-top: 40px; font-family: var(--serif); font-size: 24px; line-height: 1.3; letter-spacing: -.005em; }
.quote-by { margin-top: 12px; display: flex; align-items: flex-start; gap: 8px; font-size: 15px; color: var(--mute); line-height: 1.45; }
.quote-by svg { width: 14px; height: 14px; flex: none; margin-top: 4px; }
.rows-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--hair); font-size: 15px; color: var(--mute); }
.row { padding-top: 26px; }
.rq { font-size: 17px; font-weight: 500; line-height: 1.4; }
.st { font-weight: 400; color: var(--mute); margin-left: 8px; font-size: 15px; white-space: nowrap; }
.rt { margin-top: 12px; display: flex; align-items: center; gap: 20px; }
.tiles { display: flex; gap: 4px; flex: none; }
.tl { position: relative; width: 22px; height: 36px; border-radius: 3px; background: var(--tile-pink); flex: none; }
.tl.pl { background: var(--tile-plum); }
.tl.lv { background: var(--tile-lav); }
.tl.pc { background: var(--tile-peach); }
.tl.open { background: transparent; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .38); }
.tiles--dense { gap: 3px; flex-wrap: wrap; flex: 0 1 auto; }
.tiles--dense .tl { width: 9px; height: 30px; border-radius: 2px; }
.rc { font-size: 16px; line-height: 1.4; }
.rc em { display: block; font-style: normal; color: var(--mute); font-size: 15px; }
.rc-text { margin-top: 8px; color: var(--mute); font-size: 16px; }
.kept { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 16px; }
.kept figure { display: grid; gap: 8px; }
.kept .ph { position: relative; aspect-ratio: 315 / 239; border-radius: 10px; overflow: hidden; }
.kept img { width: 100%; height: 100%; object-fit: cover; }
.kept figcaption { font-size: 15px; display: flex; justify-content: space-between; }
.prow-h { display: flex; align-items: center; gap: 10px; }
.prow-h .th { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex: none; }
.prow-h .th img { width: 100%; height: 100%; object-fit: cover; }
.prow-h .por { font-size: 15px; color: var(--mute); }
.prow-h .rq { margin-left: 8px; }

/* ============================== Pricing ============================== */
.pr-hero .h1 { max-width: 15ch; }
.pr-hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.pr-hero-grid .h1 { grid-column: 1 / 9; }
.pr-hero-grid .pr-sub { grid-column: 9 / 13; padding-bottom: 10px; }
.pr-stage { margin-top: max(40px, calc(var(--vw) * 3.889)); padding: 56px; }
.planx { display: grid; grid-template-columns: 420px minmax(0, 1fr); background: #FFFFFF; border: 1px solid var(--hair); border-radius: 22px; overflow: hidden; }
.planx-buy { padding: 36px 40px 34px; display: flex; flex-direction: column; }
.planx-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.planx-name { font-family: var(--serif); font-size: 26px; line-height: 1; letter-spacing: -.01em; }
.planx .seg button { height: 40px; padding: 0 16px; }
.planx .price { margin-top: 36px; }
.planx .btn { margin-top: auto; width: 100%; }
.planx-gap { flex: 1; min-height: 32px; }
.planx-terms { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--mute); }
.planx-incl { padding: 36px 44px 34px; background: #F8F6FB; }
.planx-incl h2 { font-size: 15px; font-weight: 500; color: var(--mute); }
.planx-list { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }
.planx-list li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: 16px; line-height: 1.45; }
.planx-list svg { width: 18px; height: 18px; margin-top: 2px; }
.planx-list b { font-weight: 500; display: block; }
.planx-list span { color: var(--mute); font-size: 15px; }

/* How the 14 days work: three stops on one line */
.days { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
.days::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 1px; background: var(--hair-strong); }
.day { position: relative; padding-right: 32px; }
.day-dot { width: 19px; height: 19px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 1px var(--hair-strong); display: grid; place-items: center; }
.day-dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--plum); }
.day:nth-child(2) .day-dot::after { background: var(--lav-5); }
.day:nth-child(3) .day-dot::after { background: var(--peach-3); }
.day h3 { margin-top: 28px; }
.day p { margin-top: 12px; }

/* Free for the people you ask */
.pr-free { padding: max(64px, calc(var(--vw) * 6.667)) max(28px, calc(var(--vw) * 5.556)); display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 64px; align-items: center; }
.endcard { background: var(--screen); border: 1px solid var(--hair); border-radius: 24px; padding: 40px 44px 40px; color: var(--plum); }
.endcard .thanks { margin-top: 6px; font-family: var(--serif); font-size: 52px; line-height: 1.04; letter-spacing: -.02em; }
.endcard .endp { margin-top: 16px; font-size: 17px; line-height: 1.6; }
.endcard .mini-h { margin-top: 28px; font-family: var(--serif); font-size: 26px; line-height: 1.15; letter-spacing: -.01em; }
.endcard .mini-label { margin-top: 18px; font-size: 15px; color: var(--mute); }
.endcard .thumbs { margin-top: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.endcard .thumbs img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }
.chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 40px; padding: 0 18px; border-radius: 999px; background: #EEEAF6; display: inline-flex; align-items: center; font-size: 16px; }

/* FAQ with a heading column */
.faq2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.faq2-head { grid-column: 1 / 5; position: sticky; top: calc(var(--nav-h) + 40px); }
.faq2-head .body { margin-top: 20px; }
.faq2 .faq-card { grid-column: 6 / 13; }
.faq-mail { color: var(--plum); text-underline-offset: 3px; }

/* ============================== Agents ============================== */
.ag-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.ag-head .h1 { grid-column: 1 / 8; }
.ag-head-r { grid-column: 8 / 13; padding-bottom: 8px; }
.ag-head-r .acts { margin-top: 28px; }
.toggle-row { margin-top: 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toggle-row .kicker { font-weight: 400; }
.ag-stage { margin-top: max(40px, calc(var(--vw) * 3.889)); padding: 64px 0 72px; }
.ag-stage .app { margin-inline: auto; }

/* --- The chat apps, built faithfully in HTML (no logos; a plain text label) --- */
.app { --app-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --app-serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  position: relative; width: 1120px; max-width: calc(100% - 48px); height: var(--app-h, 860px); display: grid; grid-template-columns: 56px minmax(0, 1fr); border-radius: 16px; overflow: hidden; font-family: var(--app-ui); text-align: left; }
.app-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; }
.app-rail .ico { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; }
.app-rail .ico svg { width: 18px; height: 18px; }
.app-rail .who { margin-top: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.app-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.app-top { height: 56px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; gap: 16px; }
.app-title { display: flex; align-items: center; gap: 8px; font-size: 15px; min-width: 0; white-space: nowrap; }
.app-title svg { width: 12px; height: 12px; flex: none; }
.app-share { font-size: 14px; height: 32px; padding: 0 14px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; }
.app-scroll { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.app-col { width: 720px; max-width: calc(100% - 48px); margin: 0 auto; padding: 8px 0 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.app-col > * { min-width: 0; }
.app-compose { flex: none; padding: 0 24px 22px; }
.cmp { width: 720px; max-width: 100%; margin: 0 auto; }
.m-user { justify-self: end; max-width: 78%; padding: 10px 16px; font-size: 16px; line-height: 1.5; }
.m-ai { font-size: 16px; line-height: 1.65; }
.m-ai p + p { margin-top: 10px; }
.m-ai q { quotes: "\201C" "\201D"; }
.tools { display: grid; grid-template-columns: minmax(0, 1fr); }
.trow { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; font-size: 14px; line-height: 1.3; }
.trow .tg { width: 18px; height: 18px; flex: none; display: grid; place-items: center; }
.trow .tg svg { width: 14px; height: 14px; }
.trow .tn { font-weight: 500; }
.trow .td { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .tc { margin-left: auto; width: 12px; height: 12px; flex: none; }
.shot { width: 340px; max-width: 100%; border-radius: 12px; overflow: hidden; }
.shot-in { background: var(--screen); padding: 18px 22px 22px; color: var(--plum); font-family: var(--sans); }
.shot-in .r-top .nmark { width: 24px; height: 24px; font-size: 14px; }
.shot-in .r-top .nname { font-size: 17px; }
.shot-in .r-rule { margin-top: 20px; width: 36px; }
.shot-in .r-eyebrow { margin-top: 10px; font-size: 14px; }
.shot-in .r-title { font-size: 26px; }
.shot-in .r-from { font-size: 14px; margin-top: 4px; }
.shot-in .r-begin { margin-top: 16px; min-width: 0; height: 38px; font-size: 14px; padding: 0 20px; }
.linkchip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; font-size: 15px; line-height: 1.3; max-width: 100%; }
.linkchip svg { width: 16px; height: 16px; flex: none; }
.linkchip b { font-weight: 500; display: block; }
.linkchip span span { display: block; font-size: 14px; }

/* Claude (light): warm off-white, a collapsed sidebar rail, serif replies, grey user bubble, bordered tool group */
.app--claude { background: #FAF9F5; color: #141413; border: 1px solid rgba(20, 20, 19, .12); }
.app--claude .app-rail { background: #F5F4EE; border-right: 1px solid rgba(20, 20, 19, .08); color: #3D3D3A; }
.app--claude .app-rail .who { background: #E9E6DC; color: #3D3D3A; }
.app--claude .app-title { color: #3D3D3A; }
.app--claude .app-title b { font-weight: 500; color: #141413; }
.app--claude .app-share { border: 1px solid rgba(20, 20, 19, .14); color: #141413; background: #FFFFFF; }
.app--claude .m-user { background: #F0EEE6; border-radius: 12px; color: #141413; }
.app--claude .m-ai { font-family: var(--app-serif); font-size: 17px; line-height: 1.65; color: #141413; }
.app--claude .tools { border: 1px solid rgba(20, 20, 19, .12); border-radius: 10px; background: #FFFFFF; overflow: hidden; }
.app--claude .trow + .trow { box-shadow: inset 0 1px 0 rgba(20, 20, 19, .07); }
.app--claude .trow { color: #3D3D3A; font-family: var(--app-ui); }
.app--claude .trow .tn { color: #141413; }
.app--claude .trow .tg { color: #6B6A63; }
.app--claude .trow .td { color: #6B6A63; }
.app--claude .shot { border: 1px solid rgba(20, 20, 19, .12); }
.app--claude .linkchip { border: 1px solid rgba(20, 20, 19, .12); background: #FFFFFF; font-family: var(--app-ui); color: #141413; }
.app--claude .linkchip span span { color: #6B6A63; }
.app--claude .cmp { background: #FFFFFF; border: 1px solid rgba(20, 20, 19, .14); border-radius: 20px; padding: 14px 14px 12px 18px; }
.cmp-ph { font-size: 16px; line-height: 1.5; }
.app--claude .cmp-ph { color: #6B6A63; }
.cmp-row { margin-top: 14px; display: flex; align-items: center; gap: 8px; }
.cmp-row .cb { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; }
.cmp-row .cb svg { width: 16px; height: 16px; }
.app--claude .cmp-row .cb { border: 1px solid rgba(20, 20, 19, .14); color: #3D3D3A; }
.cmp-row .cm { margin-left: auto; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.app--claude .cmp-row .cm { color: #3D3D3A; }
.app--claude .cmp-send { width: 32px; height: 32px; border-radius: 8px; background: #C96442; color: #FFFFFF; display: grid; place-items: center; }
.cmp-send svg { width: 16px; height: 16px; }
.app-label { font-family: var(--app-serif); font-size: 19px; letter-spacing: -.01em; color: #141413; }

/* ChatGPT (light): white, grey sidebar rail, sans replies, pill user bubble, a quiet "used" line, pill composer */
.app--gpt { background: #FFFFFF; color: #0D0D0D; border: 1px solid rgba(0, 0, 0, .12); }
.app--gpt .app-rail { background: #F9F9F9; border-right: 1px solid rgba(0, 0, 0, .06); color: #5D5D5D; }
.app--gpt .app-rail .who { background: #5E8C6A; color: #FFFFFF; }
.app--gpt .app-title { font-size: 18px; color: #0D0D0D; }
.app--gpt .app-title b { font-weight: 600; }
.app--gpt .app-share { color: #0D0D0D; border: 1px solid rgba(0, 0, 0, .12); border-radius: 999px; }
.app--gpt .m-user { background: #F4F4F4; border-radius: 18px; color: #0D0D0D; padding: 10px 18px; }
.app--gpt .m-ai { line-height: 1.75; color: #0D0D0D; }
.app--gpt .tools { gap: 2px; }
.app--gpt .trow { min-height: 28px; padding: 0; color: #5D5D5D; }
.app--gpt .trow .tn { color: #0D0D0D; font-weight: 500; }
.app--gpt .trow .td { color: #5D5D5D; }
.app--gpt .trow.sub { padding-left: 28px; min-height: 24px; }
.app--gpt .tg-app { width: 20px; height: 20px; border-radius: 6px; background: #F0EEF6; color: var(--plum); font-family: var(--serif); font-size: 13px; display: grid; place-items: center; }
.app--gpt .shot { border: 1px solid rgba(0, 0, 0, .1); border-radius: 16px; }
.app--gpt .linkchip { background: #F4F4F4; border-radius: 14px; color: #0D0D0D; }
.app--gpt .linkchip span span { color: #5D5D5D; }
.app--gpt .cmp { background: #FFFFFF; border: 1px solid rgba(0, 0, 0, .12); border-radius: 28px; padding: 10px 10px 10px 16px; display: flex; align-items: center; gap: 10px; }
.app--gpt .cmp-ph { color: #8F8F8F; flex: 1; }
.app--gpt .cmp .cb { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #0D0D0D; flex: none; }
.app--gpt .cmp .cb svg { width: 18px; height: 18px; }
.app--gpt .cmp-send { width: 36px; height: 36px; border-radius: 50%; background: #0D0D0D; color: #FFFFFF; display: grid; place-items: center; flex: none; }
.app--gpt .gpt-model svg { width: 14px; height: 14px; }

/* The ledger: what an agent can do */
.ledger { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.ledger-head { grid-column: 1 / 5; position: sticky; top: calc(var(--nav-h) + 40px); }
.ledger-head .body { margin-top: 20px; }
.ledger-rows { grid-column: 6 / 13; border-bottom: 1px solid var(--hair); }
.lrow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); padding: 30px 0 28px; border-top: 1px solid var(--hair); }
.lrow .h3 { font-size: max(24px, calc(var(--vw) * 1.806)); }
.lrow p { font-size: 17px; line-height: 1.55; }
.lrow .tools-used { margin-top: 8px; font-size: 15px; color: var(--mute); line-height: 1.5; overflow-wrap: anywhere; }

/* It reads: half stage from the left edge, text right */
.ag-read { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--col) * .3); column-gap: max(40px, calc(var(--vw) * 3.889)); align-items: center; padding-right: max(var(--gut), calc((100% - var(--col)) / 2)); }
/* the wash runs off the left edge; the app inside starts on the column's left edge */
.ag-read .stage { margin-right: 0; padding: 64px 56px 64px max(var(--gut), calc((100vw - var(--col)) / 2)); }
.ag-read .app { --app-h: 700px; width: 100%; max-width: 940px; margin: 0; }
.ag-read .app-scroll { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px); mask-image: linear-gradient(180deg, transparent 0, #000 56px); }

/* Connect: plum stage with the address and three steps */
.ag-connect { padding: max(64px, calc(var(--vw) * 6.111)) max(24px, calc(var(--vw) * 5.556)) max(64px, calc(var(--vw) * 5.556)); text-align: center; }
.ag-connect .body { margin: 20px auto 0; max-width: 620px; }
.addr { margin: 40px auto 0; width: min(100%, 640px); display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 24px; border-radius: 999px; background: rgba(246, 243, 238, .1); box-shadow: inset 0 0 0 1px rgba(246, 243, 238, .22); transition: background-color .25s var(--ease-out); }
.addr:focus-within { background: rgba(246, 243, 238, .14); }
.addr input { flex: 1; min-width: 0; height: 44px; border: none; outline: none; box-shadow: none; background: transparent; color: var(--cream); font: 400 18px/1 var(--sans); }
.addr .btn { height: 44px; padding: 0 22px; font-size: 16px; }
.steps3 { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); text-align: left; }
.step3 { padding-top: 22px; border-top: 1px solid var(--hair-cream); }
.step3 .num { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--cream); }
.step3 h3 { margin-top: 18px; font-size: 20px; font-weight: 500; color: var(--cream); line-height: 1.3; }
.step3 p { margin-top: 8px; font-size: 17px; line-height: 1.55; color: rgba(246, 243, 238, .82); }

/* Consent card (Encore's own screen) on a small stage */
.charge { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.charge .stage { grid-column: 1 / 8; padding: 56px; display: grid; place-items: center; }
.charge-copy { grid-column: 9 / 13; }
.consent { width: 520px; max-width: 100%; background: #FFFFFF; border: 1px solid var(--hair); border-radius: 24px; padding: 32px; }
.consent-k { font-size: 15px; color: var(--mute); }
.consent h3 { margin-top: 12px; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.06; letter-spacing: -.02em; }
.consent-p { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--mute); }
.consent-p b { font-weight: 400; color: var(--plum); }
.consent ul { margin-top: 20px; display: grid; gap: 16px; }
.consent li { display: grid; grid-template-columns: 6px 1fr; gap: 12px; }
.consent li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lav-6); margin-top: 9px; }
.consent li b { font-size: 16px; font-weight: 500; display: block; }
.consent li span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--mute); }
.consent-foot { margin-top: 20px; font-size: 15px; line-height: 1.5; color: var(--mute); }
.consent-acts { margin-top: 26px; display: flex; justify-content: flex-end; gap: 10px; }
.consent-acts span { height: 44px; padding: 0 20px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 16px; font-weight: 500; }
.consent-acts .c-no { box-shadow: inset 0 0 0 1px var(--hair-strong); }
.consent-acts .c-yes { background: var(--plum); color: var(--cream); }
.points { margin-top: 28px; display: grid; gap: 18px; }
.points li { padding-top: 18px; border-top: 1px solid var(--hair); }
.points b { display: block; font-size: 18px; font-weight: 500; }
.points span { display: block; margin-top: 4px; font-size: 17px; line-height: 1.55; color: var(--mute); }

/* Narrow FAQ, centred head */
.faq-narrow { width: min(calc(100% - var(--gut) * 2), 880px); margin-inline: auto; }

/* Toast (bottom right) */
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 60; max-width: calc(100% - 48px); padding: 14px 20px; border-radius: 14px; background: #FFFFFF; color: var(--plum); border: 1px solid var(--hair-strong); font-size: 16px; line-height: 1.4; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s var(--ease-out), transform .4s var(--ease-out); }
.toast.is-on { opacity: 1; transform: none; }

/* ============================== Use cases: index ============================== */
.ux-hero .h1 { max-width: 16ch; }
.ux-hero .lede { max-width: 600px; }
.uidx { margin-top: max(56px, calc(var(--vw) * 5.556)); border-bottom: 1px solid var(--hair); }
.uidx a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 56px; column-gap: var(--gap); align-items: center; padding: 36px 0; border-top: 1px solid var(--hair); text-decoration: none; transition: background-color .3s var(--ease-out); }
.uidx a:hover { background: linear-gradient(90deg, rgba(200, 194, 240, 0) 0%, rgba(200, 194, 240, .22) 30%, rgba(237, 201, 216, .22) 70%, rgba(237, 201, 216, 0) 100%); }
.uidx .role { font-family: var(--serif); font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.018em; }
.uidx .sit { font-size: var(--fs-body); line-height: 1.5; }
.uidx .sit em { display: block; margin-top: 8px; font-style: normal; font-family: var(--serif); font-size: 21px; line-height: 1.3; color: var(--mute); }
.uidx .go { justify-self: end; width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair-strong); display: grid; place-items: center; transition: background-color .3s var(--ease-out), color .3s var(--ease-out); }
.uidx .go svg { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.uidx a:hover .go { background: var(--plum); color: var(--cream); box-shadow: none; }
.uidx a:hover .go svg { transform: translateX(2px); }
.uidx a:active .go { background: #2C1530; }
.offset { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.offset .h2 { grid-column: 1 / 9; }
.offset .offset-r { grid-column: 6 / 12; margin-top: 32px; }
.strip-stage { padding: 56px 48px 48px; }
.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.strip figure { display: grid; grid-template-rows: auto auto; gap: 14px; }
.mini { height: 300px; background: var(--screen); border: 1px solid var(--hair); border-radius: 20px; padding: 18px 18px 18px; display: flex; flex-direction: column; overflow: hidden; color: var(--plum); }
.mini .r-top .nmark { width: 22px; height: 22px; font-size: 14px; }
.mini .r-top .nname { font-size: 16px; }
.mini-q { margin-top: 18px; font-family: var(--serif); font-size: 21px; line-height: 1.15; letter-spacing: -.01em; }
.mini-opt { margin-top: 10px; height: 44px; border-radius: 12px; border: 1px solid var(--hair); background: #FFFFFF; display: flex; align-items: center; padding: 0 14px; font-family: var(--serif); font-size: 18px; }
.mini-opt.on { background: var(--plum); border-color: var(--plum); color: #FFFFFF; }
.mini-grid { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mini-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.mini-pair { margin-top: 12px; display: grid; gap: 6px; }
.mini-pair img { width: 100%; height: 78px; object-fit: cover; border-radius: 8px; }
.mini-pair .or { text-align: center; font-size: 14px; color: var(--mute); line-height: 1; }
.mini .r-rule { margin-top: 18px; width: 32px; }
.mini .r-eyebrow { margin-top: 10px; font-size: 14px; }
.mini .r-title { font-size: 24px; }
.mini-btn { margin-top: auto; height: 38px; border-radius: 999px; background: var(--plum); color: #FFFFFF; display: grid; place-items: center; font-size: 14px; font-weight: 500; }
.mini-thumbs { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mini-thumbs img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.strip figcaption a { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; text-decoration: none; padding: 4px 0; }
.strip figcaption a span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .3s var(--ease-out); }
.strip figcaption a:hover span { background-size: 100% 1px; }
.strip figcaption a svg { width: 14px; height: 14px; }
.strip figcaption p { margin-top: 2px; font-size: 15px; color: var(--plum); opacity: .86; }

/* ============================== Use cases: shared page pieces ============================== */
.uc-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.uc-hero-copy .lede { margin-top: 24px; max-width: 520px; }
.uc-hero-copy .acts { margin-top: 36px; }
.uc-who { margin-top: 28px; font-size: 15px; color: var(--mute); }
.stage--phone { height: 840px; display: grid; place-items: center; }
.sec-head .kicker + .h2 { margin-top: 14px; }

/* Founders */
.fo-hero .uc-hero-copy { grid-column: 1 / 8; }
.fo-hero .stage { grid-column: 8 / 13; }
.fo-learn { padding: max(72px, calc(var(--vw) * 7.778)) 0 max(80px, calc(var(--vw) * 8.334)); }
.close--left { text-align: left; }
.close-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; padding-top: 48px; border-top: 1px solid var(--hair); }
.close-row .h1 { grid-column: 1 / 9; max-width: none; margin: 0; }
.close-row .close-side { grid-column: 9 / 13; padding-bottom: 12px; }
.close-row .close-side .terms-line { margin-top: 16px; }

/* Product and marketing: a live pair */
.pm-hero .stage { grid-column: 1 / 7; padding: 44px 36px 36px; }
.pm-hero .uc-hero-copy { grid-column: 7 / 13; padding-left: max(32px, calc(var(--vw) * 3.334)); }
.pairq { font-family: var(--serif); font-size: 30px; line-height: 1.15; letter-spacing: -.012em; text-align: center; color: var(--plum); }
.pairq-sub { margin-top: 8px; text-align: center; font-size: 15px; color: var(--plum); opacity: .86; }
.pairs { margin-top: 24px; display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; }
.pairs .or { text-align: center; font-size: 15px; color: var(--plum); opacity: .86; }
.pic { position: relative; display: block; width: 100%; aspect-ratio: 5 / 4; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 14px; }
.pic img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.pic::after { content: ""; position: absolute; inset: -6px; border-radius: 19px; box-shadow: inset 0 0 0 2px rgba(58, 30, 60, 0); transition: box-shadow .26s var(--ease-out); }
.pic:hover::after { box-shadow: inset 0 0 0 2px rgba(58, 30, 60, .22); }
.pic[aria-pressed="true"]::after { box-shadow: inset 0 0 0 2px var(--plum); }
.pic:active { transform: translateY(1px); }
.pic .tick { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; background: var(--plum); display: grid; place-items: center; opacity: 0; transform: scale(.7); transition: opacity .24s var(--ease-out), transform .3s var(--ease-out); }
.pic .tick svg { width: 14px; height: 14px; }
.pic[aria-pressed="true"] .tick { opacity: 1; transform: none; }
.pic-cap { margin-top: 10px; text-align: center; font-size: 16px; color: var(--plum); }
.pair-res { margin-top: 22px; min-height: 56px; display: grid; grid-template-columns: 1fr 44px 1fr; align-items: start; }
.pair-res > div { text-align: center; }
.pair-res b { display: block; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1; opacity: 0; transition: opacity .5s var(--ease-out); }
.pair-res span { display: block; margin-top: 6px; font-size: 15px; color: var(--plum); opacity: 0; transition: opacity .5s var(--ease-out) .1s; }
.pair-res.is-on b, .pair-res.is-on span { opacity: 1; }
.pair-res .yours { display: block; margin-top: 2px; color: var(--lav-8); font-weight: 500; }
.pair-hint { margin-top: 10px; text-align: center; font-size: 15px; color: var(--plum); opacity: .86; min-height: 24px; }
.pair-again { display: block; margin: 4px auto 0; }
.pair-again[hidden] { display: none; }
.pm-send { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.pm-send-copy { grid-column: 1 / 6; padding-top: 24px; }
.pm-send .stage { grid-column: 7 / 13; padding: 56px 40px; display: grid; place-items: center; }
.steplist { margin-top: 36px; border-top: 1px solid var(--hair); }
.steplist li { display: grid; grid-template-columns: 36px 1fr; column-gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.steplist .si { width: 36px; height: 36px; border-radius: 10px; background: #EEEAF6; display: grid; place-items: center; }
.steplist .si svg { width: 20px; height: 20px; }
.steplist b { display: block; font-size: 17px; font-weight: 500; line-height: 1.35; }
.steplist span { display: block; margin-top: 2px; font-size: 15px; color: var(--mute); line-height: 1.5; }
.mbphone .p-grid { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mbphone .p-grid span { position: relative; aspect-ratio: 315 / 239; border-radius: 12px; overflow: hidden; }
.mbphone .p-grid img { width: 100%; height: 100%; object-fit: cover; }
.heart { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; }
.heart svg { width: 15px; height: 15px; }
.p-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--mute); }
.p-foot .p-btn { margin: 0; width: 120px; height: 46px; font-size: 16px; }

/* Teams: plum plane hero */
.tm-hero { padding-top: 0; }
.tm-plane { background: var(--plum); color: var(--cream); padding: max(64px, calc(var(--vw) * 6.667)) 0 max(72px, calc(var(--vw) * 7.223)); }
.tm-plane .uc-split { align-items: center; }
.tm-plane .uc-hero-copy { grid-column: 1 / 8; }
.tm-plane .welcome { grid-column: 8 / 13; justify-self: end; width: 100%; max-width: 520px; padding: 28px 36px 36px; color: var(--plum); }
.tm-plane .welcome .r-top { margin-bottom: 30px; }
.tm-plane .welcome .r-title { font-size: 34px; }
.tm-plane .uc-who { color: rgba(246, 243, 238, .78); }
.tm-form-stage { margin-top: 0; padding: 72px 48px; display: grid; place-items: center; }
.form1 { width: 760px; max-width: 100%; background: var(--screen); border: 1px solid var(--hair); border-radius: 24px; padding: 32px 48px 44px; }
.form1 .r-top { margin-bottom: 30px; }
.form1-title { font-family: var(--serif); font-size: 38px; line-height: 1.06; letter-spacing: -.018em; }
.form1-sub { margin-top: 8px; font-size: 16px; color: var(--mute); }
.fq { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--hair); }
.fq-l { font-size: 18px; font-weight: 500; line-height: 1.4; }
.fq-h { margin-top: 4px; font-size: 15px; color: var(--mute); }
.fsel { margin-top: 14px; height: 52px; border-radius: 14px; background: #EFECF4; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-size: 16px; }
.fsel svg { width: 14px; height: 14px; }
.frange { margin-top: 22px; }
.frange input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; }
.frange input[type="range"]:focus { outline: none; }
.frange input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--lav-5) 0%, var(--lav-5) var(--p, 50%), #E6E1EE var(--p, 50%), #E6E1EE 100%); }
.frange input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--plum); border: 5px solid #FFFFFF; margin-top: -11px; }
.frange input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: #E6E1EE; }
.frange input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--lav-5); }
.frange input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--plum); border: 5px solid #FFFFFF; }
.frange:focus-within { background: rgba(125, 112, 203, .06); border-radius: 12px; }
.frange-ends { margin-top: 8px; display: flex; justify-content: space-between; font-size: 15px; color: var(--mute); }
.frange-val { margin-top: 12px; font-size: 16px; color: var(--mute); }
.frange-val b { font-weight: 500; color: var(--plum); }
.fdots { margin-top: 14px; display: grid; gap: 0; border-top: 1px solid var(--hair); }
.fdots li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--hair); }
.fdots .dv-name { font-size: 20px; }
.fdots .dv-got { margin-top: 0; justify-content: flex-end; }
.ftnt { margin-top: 14px; display: grid; gap: 10px; }
.ftnt li { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.ftnt span { height: 48px; border-radius: 12px; border: 1px solid var(--hair); background: #FFFFFF; display: grid; place-items: center; font-family: var(--serif); font-size: 19px; }
.ftnt span.on { background: var(--plum); border-color: var(--plum); color: #FFFFFF; }
.ftnt i { font-style: normal; font-size: 15px; color: var(--mute); }
.ftext { margin-top: 14px; min-height: 104px; border-radius: 14px; background: #EFECF4; padding: 14px 18px; font-size: 16px; line-height: 1.5; color: var(--plum); }
.form1-send { margin-top: 32px; height: 52px; width: fit-content; padding: 0 32px; border-radius: 999px; background: var(--plum); color: #FFFFFF; display: grid; place-items: center; font-size: 17px; font-weight: 500; }
.tm-groups { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.tm-groups-copy { grid-column: 1 / 6; }
.tm-groups .panel { grid-column: 7 / 13; padding: 28px 32px 30px; }
.grp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.grp-head b { font-size: 17px; font-weight: 500; }
.grp-head span { font-size: 15px; color: var(--mute); }
.grp-tabs { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.grp-tabs span { height: 38px; padding: 0 16px; border-radius: 999px; background: #F1EEF5; display: inline-flex; align-items: center; font-size: 15px; color: var(--mute); }
.grp-tabs span.on { background: var(--plum); color: var(--cream); }
.grp-list { margin-top: 18px; border-top: 1px solid var(--hair); }
.grp-list li { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 16px; }
.grp-list li span { font-size: 15px; color: var(--mute); white-space: nowrap; }
.grp-list li.off { color: var(--mute); }
.grp-list li.off span { color: var(--mute); }
.tm-learn { padding: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.tm-learn .panel { padding: 26px 28px 28px; }
.tm-learn .pk { font-size: 15px; color: var(--mute); }
.tm-learn .pt { margin-top: 6px; font-size: 17px; font-weight: 500; line-height: 1.4; }
.tm-learn .dv-bars { margin-top: 18px; gap: 14px; }
.tm-learn .quote { margin-top: 16px; font-size: 23px; }
.spread { margin-top: 20px; }
.spread-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; align-items: end; height: 92px; }
.spread-row i { display: block; border-radius: 2px 2px 0 0; background: var(--tile-lav); }
.spread-row i.pl { background: var(--plum); }
.spread-ends { margin-top: 8px; display: flex; justify-content: space-between; font-size: 15px; color: var(--mute); }

/* Studios */
.st-hero .h1 { max-width: 14ch; }
.st-hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.st-hero-grid .h1 { grid-column: 1 / 9; }
.st-hero-grid .st-hero-r { grid-column: 9 / 13; padding-bottom: 10px; }
.st-hero-grid .st-hero-r .acts { margin-top: 28px; }
.st-stage { margin-top: max(48px, calc(var(--vw) * 4.445)); padding: 64px 0 64px 64px; display: grid; grid-template-columns: 640px minmax(0, 1fr); gap: 56px; align-items: start; }
.st-stage .welcome { max-width: min(640px, 100%); }
.st-aside { padding-top: 40px; max-width: 360px; }
.st-aside .r-eyebrow { margin-top: 0; }
.st-aside .phone-mini { margin-top: 16px; }
.st-aside p.small + p.small { margin-top: 8px; }
.st-bar-stage { padding: 64px 56px; }
.st-opts { margin-top: 28px; display: grid; gap: 12px; }
.st-opt { height: 76px; border-radius: 16px; border: 1px solid var(--hair); background: #FFFFFF; display: flex; align-items: center; padding: 0 22px; font-family: var(--serif); font-size: 28px; letter-spacing: -.01em; }
.st-opt.on { background: var(--plum); border-color: var(--plum); color: #FFFFFF; }
.st-heard { padding: max(72px, calc(var(--vw) * 7.778)) 0 max(80px, calc(var(--vw) * 8.889)); background: var(--wash-peach-deep); }
.st-heard .sec-head.split { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gap); align-items: end; }
.st-heard .sec-head.split .body { color: var(--plum); padding-bottom: 6px; }

/* ============================== About ============================== */
.ab-hero { text-align: center; }
.ab-hero .h1 { max-width: 16ch; margin-inline: auto; }
.ab-hero .lede { margin: 28px auto 0; max-width: 620px; }
.prose { width: min(calc(100% - var(--gut) * 2), 680px); margin-inline: auto; }
.prose p { font-size: max(19px, calc(var(--vw) * 1.39)); line-height: 1.65; }
.prose p + p { margin-top: 24px; }
.prose .aside-note { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--hair); }
.people { width: min(calc(100% - var(--gut) * 2), 960px); margin-inline: auto; }
.people-row { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 6px; }
.people-row i { aspect-ratio: 60 / 92; border-radius: 4px; background: var(--tile-pink); }
.people-row i.pl { background: var(--tile-plum); }
.people-row i.lv { background: var(--tile-lav); }
.people-row i.pc { background: var(--tile-peach); }
.people-row i.open { background: transparent; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .38); }
.people-cap { margin-top: 22px; display: flex; justify-content: space-between; gap: 24px; font-size: 16px; color: var(--mute); }
.people-cap b { font-weight: 500; color: var(--plum); }
.beliefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: max(32px, calc(var(--vw) * 5.556)); }
.belief { padding: 36px 0 40px; border-top: 1px solid var(--hair); }
.belief .h3 { max-width: 22ch; }
.ab-beliefs { padding: max(56px, calc(var(--vw) * 6.667)) max(24px, calc(var(--vw) * 5.556)) max(32px, calc(var(--vw) * 3.889)); }
.ab-beliefs .belief { border-top-color: var(--hair-cream); }
.belief p { margin-top: 14px; max-width: 460px; }
.ab-head { max-width: calc(var(--col) * .5); }
.ab-prose { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.ab-prose-main { grid-column: 3 / 9; }
.ab-prose-main p { font-size: max(19px, calc(var(--vw) * 1.39)); line-height: 1.65; }
.ab-prose-main p + p { margin-top: 26px; }
.ab-prose-note { grid-column: 10 / 13; padding-top: 18px; border-top: 1px solid var(--hair); margin-top: 8px; }

/* ============================== Legal ============================== */
.lg-panel { padding: max(48px, calc(var(--vw) * 5)) max(28px, calc(var(--vw) * 4.445)); }
.lg-panel .h1 { margin-top: 14px; font-size: max(42px, calc(var(--vw) * 4.861)); }
.lg-panel .lede { margin-top: 18px; max-width: 640px; }
.lg-updated { margin-top: 18px; font-size: 15px; color: var(--plum); opacity: .86; }
.legal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.toc { grid-column: 1 / 4; position: sticky; top: calc(var(--nav-h) + 32px); }
.toc p { font-size: 15px; font-weight: 500; color: var(--mute); }
.toc nav { margin-top: 12px; display: grid; border-left: 1px solid var(--hair); }
.toc a { display: block; margin-left: -1px; padding: 8px 0 8px 16px; font-size: 16px; line-height: 1.35; color: var(--mute); text-decoration: none; border-left: 2px solid transparent; transition: color .2s var(--ease-out), border-color .25s var(--ease-out); }
.toc a:hover { color: var(--plum); }
.toc a.is-on { color: var(--plum); border-left-color: var(--plum); }
.legal-copy { grid-column: 5 / 12; max-width: 700px; }
.legal-intro { font-size: max(19px, calc(var(--vw) * 1.32)); line-height: 1.6; }
.legal-section { padding-top: 48px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal-section h2 { font-family: var(--serif); font-weight: 400; font-size: max(28px, calc(var(--vw) * 2.223)); line-height: 1.12; letter-spacing: -.012em; }
.legal-section h3 { margin-top: 28px; font-size: 18px; font-weight: 500; }
.legal-section p { margin-top: 14px; font-size: 18px; line-height: 1.7; color: #4E3A50; }
.legal-section h3 + p { margin-top: 8px; }
.legal-section ul { margin-top: 14px; display: grid; gap: 10px; }
.legal-section li { position: relative; padding-left: 22px; font-size: 18px; line-height: 1.6; color: #4E3A50; }
.legal-section li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--lav-6); }
.legal-section code { font-family: inherit; font-size: inherit; padding: 1px 6px; border-radius: 6px; background: #EDE8F3; color: var(--plum); }
.legal-section a { color: var(--plum); text-underline-offset: 3px; }
.legal-providers { margin-top: 18px; display: grid; border-top: 1px solid var(--hair); }
.legal-providers > div { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.legal-providers dt { font-size: 18px; font-weight: 500; line-height: 1.6; }
.legal-providers dd { margin: 0; font-size: 18px; line-height: 1.6; color: #4E3A50; }
.lg-close .h2 { max-width: 18ch; margin-inline: auto; }


/* Grid stages: never let a fixed-width product piece widen its track (it would clip on phones) */
.tm-form-stage, .charge .stage, .pm-send .stage, .stage--phone { grid-template-columns: minmax(0, 1fr); }
.tm-form-stage > *, .charge .stage > *, .pm-send .stage > *, .stage--phone > * { justify-self: center; max-width: 100%; }

/* ============================== Motion hooks (only under .motion) ============================== */
.motion [data-fade] { opacity: 0; }

/* ============================== Tablet ============================== */
@media (max-width: 1240px) {
  .app { --app-h: 820px; }
  .planx { grid-template-columns: 380px minmax(0, 1fr); }
  .chap { grid-template-columns: 300px 1fr; gap: 48px; }
  .st-stage { grid-template-columns: 600px minmax(0, 1fr); }
  .ag-read .app { width: 820px; }
  .strip { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 1100px) {
  /* the chapter tabs take their short names before the long ones run off the window */
  .wtab .t-long { display: none; }
  .wtab .t-short { display: inline; }
  .pr-hero-grid .h1, .pr-hero-grid .pr-sub { grid-column: 1 / 13; }
  .pr-hero-grid .pr-sub { margin-top: 24px; max-width: 560px; }
  .planx { grid-template-columns: 1fr; }
  .pr-free { grid-template-columns: 1fr; }
  .pr-free .endcard { max-width: 560px; }
  .ag-head .h1, .ag-head-r { grid-column: 1 / 13; }
  .ag-head-r { margin-top: 24px; max-width: 620px; }
  .ag-read { grid-template-columns: minmax(0, 1fr); padding-right: 0; row-gap: 48px; }
  .ag-read .stage { padding: 48px 24px 48px var(--gut); }
  .ag-read-copy { padding: 0 var(--gut); max-width: 640px; }
  .ag-read .app { width: 100%; max-width: 820px; }
  .charge .stage, .charge-copy { grid-column: 1 / 13; }
  .charge-copy { margin-top: 48px; max-width: 640px; }
  .fo-hero .uc-hero-copy, .fo-hero .stage { grid-column: 1 / 13; }
  .fo-hero .stage { margin-top: 48px; }
  .pm-hero .stage, .pm-hero .uc-hero-copy { grid-column: 1 / 13; }
  .pm-hero .uc-hero-copy { margin-top: 48px; order: 2; padding-left: 0; }
  .pm-send-copy, .pm-send .stage { grid-column: 1 / 13; }
  .pm-send .stage { margin-top: 48px; }
  .tm-plane .uc-hero-copy, .tm-plane .welcome { grid-column: 1 / 13; justify-self: start; }
  .tm-plane .welcome { margin-top: 48px; }
  .tm-groups-copy, .tm-groups .panel { grid-column: 1 / 13; }
  .tm-groups .panel { margin-top: 40px; }
  .tm-learn { grid-template-columns: 1fr; }
  .st-hero-grid .h1, .st-hero-grid .st-hero-r { grid-column: 1 / 13; }
  .st-hero-grid .st-hero-r { margin-top: 24px; max-width: 560px; }
  .st-stage { grid-template-columns: minmax(0, 1fr); padding: 48px 24px 48px 48px; }
  .st-aside { padding-top: 0; }
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .chap { grid-template-columns: 1fr; gap: 40px; }
  .legal-copy { grid-column: 4 / 13; }
}

/* ============================== Phone ============================== */
@media (max-width: 900px) {
  .faq2-head, .faq2 .faq-card { grid-column: 1 / 13; }
  .faq2-head { position: static; margin-bottom: 40px; }
  .ledger-head, .ledger-rows { grid-column: 1 / 13; }
  .ledger-head { position: static; margin-bottom: 40px; }
  .legal { display: block; }
  .toc { position: static; margin-bottom: 40px; }
  .legal-copy { max-width: none; }
  .uidx a { grid-template-columns: 1fr 48px; row-gap: 12px; }
  .uidx .role { grid-column: 1 / 2; }
  .uidx .sit { grid-column: 1 / 2; grid-row: 2; }
  .uidx .go { grid-column: 2; grid-row: 1 / 3; }
  .offset .h2, .offset .offset-r { grid-column: 1 / 13; }
  .days { grid-template-columns: 1fr; row-gap: 40px; }
  .days::before { display: none; }
  .day:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 19px; bottom: -40px; width: 1px; background: var(--hair-strong); }
  .day { padding: 0 0 0 44px; }
  .day-dot { position: absolute; left: 0; top: 0; }
  .day h3 { margin-top: 0; }
  .beliefs { grid-template-columns: 1fr; }
  .ab-prose-main, .ab-prose-note { grid-column: 1 / 13; }
  .ab-prose-note { margin-top: 36px; }
  .ab-beliefs { padding: 40px 20px 16px; }
  .asks { grid-template-columns: 1fr; row-gap: 32px; }
  .steps3 { grid-template-columns: 1fr; gap: 28px; }
  .close-row .h1, .close-row .close-side { grid-column: 1 / 13; }
  .close-row .close-side { margin-top: 28px; }
  .wwh-bar { flex-wrap: wrap; padding: 18px 24px 0; gap: 12px; min-height: 0; }
  .wwh-tabs { margin-left: 0; width: 100%; height: 48px; }
  .wtab .t-long { display: none; }
  .wtab .t-short { display: inline; }
}
@media (max-width: 600px) {
  .lede-lg { font-size: 19px; }
  .pr-stage { padding: 20px; }
  .planx-buy, .planx-incl { padding: 26px 22px 24px; }
  .planx-top { flex-wrap: wrap; }
  .planx .seg button { padding: 0 12px; font-size: 15px; }
  .planx-list { grid-template-columns: 1fr; }
  .pr-free { padding: 48px 20px; gap: 40px; }
  .endcard { padding: 28px 22px; }
  .endcard .thanks { font-size: 40px; }
  .faq2 .faq-card, .faq-narrow .faq-card { padding: 2px 20px; }

  .ag-stage { padding: 28px 0 32px; }
  .app { max-width: calc(100% - 24px); grid-template-columns: 1fr; --app-h: 720px; border-radius: 14px; }
  .app-rail { display: none; }
  .app-top { padding: 0 14px; }
  .app-col { max-width: calc(100% - 28px); gap: 14px; }
  .app-compose { padding: 0 12px 14px; }
  .m-user { max-width: 88%; }
  .app--claude .m-ai { font-size: 16px; }
  .app .shot { width: 100%; }
  .app-share { display: none; }
  .ag-read .stage { padding: 28px 12px 28px 12px; }
  .ag-read .app { --app-h: 660px; max-width: 100%; }
  .addr { flex-direction: column; align-items: stretch; border-radius: 22px; padding: 10px; }
  .addr input { text-align: center; font-size: 16px; }
  .ag-connect { padding: 56px 20px; }
  .charge .stage { padding: 20px; }
  .consent { padding: 24px 20px; }
  .consent h3 { font-size: 28px; }
  .lrow { grid-template-columns: 1fr; row-gap: 8px; }

  .uidx a { padding: 26px 0; }
  .uidx .sit em { font-size: 19px; }
  .strip-stage { padding: 20px; }
  .strip { grid-template-columns: 1fr 1fr; gap: 12px; row-gap: 24px; }
  .strip figure:last-child { grid-column: 1 / 3; }
  .mini { height: 260px; padding: 14px; }
  .mini-q { font-size: 18px; }
  .mini .r-title { font-size: 19px; }
  .mini-opt { height: 38px; font-size: 16px; }

  .stage--phone { height: auto; padding: 24px 0; }
  .phone { width: 100%; max-width: 340px; height: 680px; }
  .pm-hero .stage { padding: 28px 16px 24px; }
  .pairq { font-size: 24px; }
  .pairs { grid-template-columns: 1fr 28px 1fr; }
  .pair-res { grid-template-columns: 1fr 28px 1fr; }
  .pair-res b { font-size: 28px; }
  .pm-send .stage { padding: 24px 0; }
  .tm-form-stage { padding: 20px 12px; }
  .form1 { padding: 24px 18px 30px; }
  .form1-title { font-size: 30px; }
  .ftnt span { font-size: 17px; }
  .tm-plane .welcome { padding: 24px 20px 28px; }
  .tm-learn { padding: 20px; }
  .tm-groups .panel { padding: 22px 18px; }
  .welcome { padding: 24px 20px 30px; }
  .welcome .r-top { margin-bottom: 28px; }
  .r-title { font-size: 32px; }
  .r-begin { min-width: 0; width: 100%; }
  .st-stage { padding: 20px 12px 20px 16px; }
  .st-stage .phone { display: none; }
  .st-bar-stage { padding: 20px; }
  .fbar { padding: 22px 20px; }
  .fbar-steps { grid-template-columns: 1fr; row-gap: 18px; }
  .fstep { grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 8px; }
  .fstep-name { min-height: 0; }
  .fstep-line { grid-column: 1 / 3; grid-row: 2; }
  .fstep-sub { grid-row: 1; grid-column: 2; }
  .chap { padding: 28px 20px 36px; }
  .chap-title { font-size: 38px; }
  .stats { gap: 48px; }
  .stat b { font-size: 48px; }
  .rt { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tiles { gap: 3px; }
  .tl { width: 17px; height: 30px; }
  .kept { grid-template-columns: 1fr 1fr; }
  .prow-h { flex-wrap: wrap; }
  .prow-h .rq { margin-left: 0; width: 100%; }
  .people-row { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .people-cap { flex-direction: column; gap: 4px; }
  .lg-panel { padding: 36px 20px; }
  .legal-providers > div { grid-template-columns: 1fr; gap: 4px; }
  .toast { right: 16px; left: 16px; bottom: 88px; max-width: none; }
  .wwh-title { white-space: normal; }
  .wwh-title span { display: block; margin: 6px 0 0; }
}

/* Encore marketing site, R4 (lane C): styles shared by the pages this lane rebuilt
   (What people see, How Encore works, Agents, Pricing, About, Use cases). Built on the kit (kit-app.css) and its
   five section patterns; this file only adds the small visuals that sit inside P4 cards, the FAQ split and a few
   page tweaks. Nothing here restyles a kit component's own look. */

/* ---------- FAQ split (heading left, card right), as on Comparison ---------- */
.sw-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap); align-items: start; }
.sw-faq > div:first-child { position: sticky; top: calc(var(--nav-h) + 32px); }
.sw-faq .h2 { max-width: 360px; }
.sw-faq .small { margin-top: 16px; }
@media (max-width: 900px) {
  .sw-faq { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sw-faq > div:first-child { position: static; }
}

/* ---------- Close, split (line left, button right) ---------- */
.sw-close-split .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: end; text-align: left; }
.sw-close-split .h1 { margin: 0; max-width: none; }
.sw-close-split .close-acts { justify-content: flex-start; margin-top: 0; }
@media (max-width: 900px) { .sw-close-split .wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- P4 card visuals: small pieces of real UI (".ka.sw-mini") ---------- */
.sw-mini { width: 100%; display: grid; place-items: center; }
.sw-mini .ka-rule { margin: 0 0 14px; }

/* the studio's name, as at the top of every respondent screen */
.ka.sw-id { display: inline-flex; width: auto; background: #FFFFFF; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ka-hair); padding: 22px 28px; }

/* Begin, in three studio colours */
.sw-colours { grid-template-columns: repeat(3, auto); gap: 12px; justify-content: center; }
.sw-go { height: 48px; padding: 0 22px; border-radius: 999px; background: var(--c); color: #FFFFFF; display: inline-flex; align-items: center; font-size: 16px; font-weight: 500; }

/* the welcome's top lines */
.sw-note { background: #FFFFFF; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--ka-hair); padding: 26px 26px 24px; display: block; width: min(100%, 300px); }
.sw-note small { display: block; font-size: 14px; color: var(--ka-mute); }
.sw-note b { display: block; margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; letter-spacing: -.01em; }
.sw-note span { display: block; margin-top: 10px; font-size: 14px; color: var(--ka-mute); }

/* their name, then Start */
.sw-guest { display: grid; gap: 14px; width: min(100%, 300px); justify-items: start; }
.sw-field { display: block; width: 100%; padding: 12px 18px; border-radius: 14px; background: var(--ka-field); font-size: 17px; }
.sw-field small { display: block; font-size: 14px; color: var(--ka-mute); }
.sw-start { height: 46px; padding: 0 24px; border-radius: 999px; background: var(--ka-plum); color: #FFFFFF; display: inline-flex; align-items: center; font-weight: 500; }

/* a laptop and a phone showing the same question */
.sw-devices { grid-template-columns: auto auto; align-items: end; gap: 18px; justify-content: center; }
.sw-lap { width: 200px; height: 134px; border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ka-edge); padding: 10px; display: block; }
.sw-ph { width: 74px; height: 140px; border-radius: 16px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ka-edge); padding: 8px 6px; display: block; }
.sw-scr { display: grid; align-content: center; justify-items: center; gap: 6px; height: 100%; border-radius: 6px; background: var(--ka-fade-client); }
.sw-scr .ka-rule { width: 22px; margin: 0 0 4px; }
.sw-scr b { display: block; width: 72%; height: 22px; border-radius: 5px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ka-hair); font: 400 13px/22px var(--serif); padding-left: 8px; overflow: hidden; white-space: nowrap; }
.sw-scr b:first-of-type { background: var(--ka-plum); color: #FFFFFF; }
.sw-ph .sw-scr b { width: 86%; font-size: 0; }

/* free for them */
.sw-price { display: grid; justify-items: center; gap: 6px; }
.sw-price b { font-family: var(--serif); font-weight: 400; font-size: 88px; line-height: 1; letter-spacing: -.03em; }
.sw-price small { font-size: 16px; color: var(--ka-mute); }

/* The respondent page in a phone-width window (no address bar), label and all, centred in its half */
.sw-phone { max-width: 440px; margin-inline: auto; }

/* ---------- What people see: the walk holds whole browser windows ---------- */
.pat-walk-panel .ka-their { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pat-walk-panel .ka-browser { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pat-walk-panel .ka-resp { flex: 1; min-height: 0; height: auto; }
.pat-walk-panel .ka-who { margin-bottom: 12px; }
.pat-walk-panel .ka-rscreen .ka-wcard { margin-top: 0; }
@media (max-width: 600px) {
  .pat-walk-panel .ka-who em { display: none; }
}

/* ---------- The mini card (same look as home's P4 minis): a white card with one piece of real UI ---------- */
.swm { width: 100%; max-width: 260px; padding: 18px 18px 16px; background: #FFFFFF; border: 1px solid var(--hair); border-radius: 16px; text-align: left; }
.swm--wide { max-width: 320px; }
.swm-q { font-size: 14px; color: var(--mute); line-height: 1.35; }
.swm-a { margin-top: 4px; margin-bottom: 12px; font-size: 16px; font-weight: 500; }
.swm-a em { font-style: normal; font-weight: 400; font-size: 14px; color: var(--mute); margin-left: 8px; }
.swm-n { margin-top: 10px; font-size: 14px; color: var(--plum); }
.swm .ka-tiles { gap: 3px; }
.swm .ka-tiles--sm i { width: 12px; height: 24px; border-radius: 2px; }
.swm-pair { margin: 12px 0 14px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.swm-pair span { font-size: 14px; color: var(--mute); }
.swm-pair figure { margin: 0; aspect-ratio: 4 / 3; border-radius: 8px; overflow: clip; }
.swm-pair figure.is-on { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--plum); }
.swm .ka-pair { margin: 12px 0 0; grid-template-columns: 1fr auto 1fr; gap: 8px; }
.swm .ka-pair .ka-card { font-size: 18px; min-height: 48px; padding: 10px 12px; }
.swm .ka-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.swm .ka-pair .ka-or { display: block; font-size: 14px; }
.swm .ka-spectrum { margin-top: 26px; }
.swm .ka-spectrum .track i { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.swm .ka-spectrum .ends { margin-top: 12px; font-size: 14px; }
.swm-board { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.swm-board figure { margin: 0; aspect-ratio: 16 / 10; border-radius: 8px; overflow: clip; position: relative; }
.swm-board figure.is-kept::after { content: ""; position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF no-repeat center / 13px 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"); }
/* a Flow's steps, small */
.swm-steps { margin-top: 12px; display: grid; gap: 8px; }
.swm-steps span { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; font-size: 15px; }
.swm-steps span small { font-size: 14px; color: var(--mute); }
.swm-steps .ka-ico { width: 20px; height: 20px; }
/* a tool call, as an agent shows it */
.swm-tools { display: grid; gap: 6px; margin-top: 10px; }
.swm-tool { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--ka-field); font-size: 14px; white-space: nowrap; overflow: hidden; }
.swm-tool b { font-weight: 500; }
.swm-tool span { color: var(--mute); overflow: hidden; text-overflow: ellipsis; }
.swm-tool::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--lav-5); }
/* a quote, pinned */
.swm-quote { font-family: var(--serif); font-size: 21px; line-height: 1.25; letter-spacing: -.01em; }
.swm-quote + .swm-n { color: var(--mute); }
/* a chat bubble (the person asking an agent) */
.swm-ask { background: #EFECF6; display: block; margin-left: auto; max-width: 92%; padding: 10px 14px; border-radius: 14px; background: var(--ka-field); font-size: 14px; line-height: 1.4; }
/* a confirm, as an agent asks before a big step */
.swm-confirm { margin-top: 12px; display: flex; gap: 8px; justify-content: flex-end; }
.swm-confirm span { height: 34px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 14px; box-shadow: inset 0 0 0 1px var(--ka-edge); }
.swm-confirm span.go { background: var(--plum); color: #FFFFFF; box-shadow: none; }

/* ---------- A short chat: the ask, the agent's line, and what it made (.ka-made) ---------- */
.sw-chat { width: min(calc(100% - var(--gut) * 2), 560px); margin-inline: auto; display: grid; gap: 16px; }
.sw-chat .swm-ask { font-size: 16px; padding: 12px 18px; border-radius: 18px; max-width: 86%; }
.sw-chat-ai { font-size: 17px; line-height: 1.5; color: var(--plum); }
.sw-chat .ka-made { width: 100%; }

/* ---------- More mini-card bits (Agents) ---------- */
.swm-shot { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: var(--ka-fade-client); box-shadow: inset 0 0 0 1px var(--ka-hair); display: grid; justify-items: start; }
.swm-shot .ka-studio { font-size: 16px; gap: 8px; }
.swm-shot .ka-studio i { width: 22px; height: 22px; font-size: 13px; }
.swm-shot .ka-rule { width: 28px; margin: 12px 0 8px; }
.swm-shot b { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.15; }
.swm-shot .go { margin-top: 10px; height: 32px; padding: 0 16px; border-radius: 999px; background: var(--ka-plum); color: #FFFFFF; display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; }
.swm-link { margin-top: 12px; display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ka-hair); }
.swm-link b { font-weight: 500; font-size: 15px; }
.swm-link span { font-size: 14px; color: var(--mute); }
.swm-checks { margin-top: 12px; display: grid; gap: 10px; list-style: none; padding: 0; }
.swm-checks li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.swm-checks li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--ka-edge); }
.swm-checks li.on::before { background: var(--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; }
.swm-row { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ka-hair); }
.swm-row b { display: block; font-weight: 500; font-size: 15px; }
.swm-row small { display: block; font-size: 14px; color: var(--mute); }
.swm-row em { font-style: normal; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ---------- Agents ---------- */
.ag2-can .swm { max-width: 330px; }
.ag2-toggle { margin-top: 28px; display: inline-flex; align-items: center; gap: 14px; }
.ag2-toggle > span { font-size: 15px; color: var(--mute); }
.on-plum .ag2-toggle > span { color: rgba(246, 243, 238, .82); }
.ag2-stage .app { margin-inline: auto; max-width: 100%; }
.ag2-read .app { width: 100%; max-width: 100%; height: 640px; }
.sw-made-chat.ka-made { width: min(100%, 460px); }
.app .ka-made { font-family: var(--sans); }
.sw-addr { margin-top: 28px; display: flex; align-items: center; gap: 8px; max-width: 460px; padding: 6px 6px 6px 18px; border-radius: 999px; background: var(--plane); }
.sw-addr input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 16px var(--sans); color: var(--plum); }
.sw-addr .btn { flex: none; }
.ag2-consent { display: grid; grid-template-columns: minmax(0, 520px); justify-content: center; }
.ag2-consent-k { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 18px; }
.ag2-consent-k .ka-studio { font-family: var(--serif); font-size: 26px; }
.ag2-consent-k span + span { font-size: 15px; color: var(--mute); }
@media (max-width: 600px) {
  .ag2-read .app { height: 560px; }
  .sw-addr { padding-left: 14px; }
  .sw-addr input { font-size: 15px; }
}

/* ---------- Pricing ---------- */
.swm-row strong { font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: -.01em; white-space: nowrap; }
.pr2-days { margin-top: 12px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.pr2-days i { aspect-ratio: 1; border-radius: 6px; background: #EEEBF0; }
.pr2-days i.on { background: var(--plum); }
.pr2-days i.on:nth-child(6) { background: var(--lav-5); }
.pr2-hero .planx { text-align: left; }
.pr2-free .mz-copy .h2 { margin-top: 16px; }
.pr2-free .mz-card h4 { font-size: 40px; }

/* ---------- About ---------- */
.ab2-people { margin-top: max(64px, calc(var(--vw) * 6.112)); }
.ab2-cite { margin-top: 24px; }

/* ---------- Use cases ---------- */
/* many people: thinner tiles so a row of 30 to 40 fits */
/* R4b: a row of 30 to 40 stays on one line; the tiles narrow to fit the row instead of wrapping one onto a new line */
.sw-dense .ka-tiles { gap: 3px; flex-wrap: wrap; width: 100%; max-width: 480px; }
.sw-dense .ka-tiles i { flex: 1 1 0; width: auto; min-width: 3px; max-width: 9px; height: 26px; border-radius: 2px; }
/* a try-it inside the respondent page (dot voting, a pair, a one-page form) */
/* KIT2: screens share one grid cell and the window grows, so the try-it screen no longer clips (it cut the question's line box). */
.uc2-try .ka-rscreen { overflow: visible; }
.uc2-col { width: min(100%, 600px); text-align: left; display: flex; flex-direction: column; }
.uc2-col .ka-q { font-size: 34px; text-align: center; margin-inline: auto; }
.uc2-hint { margin-top: 10px; font-size: 15px; color: var(--ka-mute); text-align: center; }
.uc2-col .dv-rows { border-top: 0; }
.uc2-col .dv-row { border-bottom: 0; border-radius: 12px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--ka-hair); background: #FFFFFF; }
.uc2-col .dv-row + .dv-row { margin-top: 8px; }
.uc2-col .dv-ctl button { border-radius: 10px; border-color: var(--ka-hair); }
.uc2-col .dv-bank { justify-content: center; }
.uc2-next { margin-top: 20px; align-self: flex-end; height: 48px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--ka-plum); color: #FFFFFF; font: 500 16px/1 var(--sans); cursor: pointer; transition: opacity .2s var(--ease-out); }
.uc2-next[disabled] { background: #ECE8F6; color: var(--plum); cursor: default; }
.uc2-col .dv-ask { display: flex; flex-direction: column; }
.uc2-col .dv-res { flex-direction: column; }
.uc2-col .dv-res .ka-wcard { margin: 0 auto; }
.uc2-col .chips { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.uc2-col .chips .chip { height: 34px; padding: 0 14px; border-radius: 999px; background: var(--ka-field); display: inline-flex; align-items: center; font-size: 15px; }
.uc2-acts { margin-top: 18px; display: flex; gap: 20px; align-items: center; }
/* the pair try-it */
.uc2-pair .pairs { margin-top: 26px; }
.uc2-pair .pair-hint { text-align: center; }
/* the one-page form, scrolled to the top, fading out at the bottom of the window */
.uc2-form .ka-rscreen { justify-content: flex-start; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 80px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 80px), transparent); }
.uc2-form .form1 { margin: 0 auto; border: 0; background: transparent; padding-top: 0; width: min(100%, 640px); text-align: left; }
.uc2-form .form1 .r-top { display: none; }
@media (max-width: 600px) {
  .uc2-col .ka-q { font-size: 26px; }
  .uc2-col .dv-name { font-size: 18px; }
}

/* a respondent window on the glow: its label sits on the plum, so it turns cream */
.hero--glow .glow-visual .ka-who { color: var(--cream); }
.hero--glow .glow-visual .ka-who em { color: rgba(246, 243, 238, .82); }
.sw-wcard-sm { padding: 28px 30px 26px; }
.sw-wcard-sm h4 { font-size: 32px; }
.sw-wcard-sm p { font-size: 16px; margin-top: 12px; }
.sw-wcard-sm ul { margin-top: 14px; gap: 8px; }
/* use-cases hub: four role cards on the glow */
.uc2-roles { margin-top: 0; }
.uc2-roles .pat-card-t, .uc2-roles .pat-card-go { color: var(--plum); }
.uc2-mini-bars { margin-top: 12px; gap: 10px; }
.uc2-mini-bars .dv-bar p { font-size: 14px; }
.uc2-mini-bars .dv-track { height: 8px; margin-top: 6px; }
/* team leads: the studio's By group view */
.tl2-gbody { padding: 24px 28px 26px; }
.tl2-ghead { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tl2-ghead > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.tl2-ghead b { font-weight: 500; }
.tl2-ghead .lanes { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--ka-field); }
.tl2-ghead .lanes span { height: 32px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 14px; color: var(--ka-mute); }
.tl2-ghead .lanes .is-on { background: #FFFFFF; color: var(--ka-plum); box-shadow: inset 0 0 0 1px var(--ka-hair); }
@media (max-width: 1100px) { .uc2-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .uc2-roles { grid-template-columns: minmax(0, 1fr); } .tl2-gbody { padding: 18px 16px 20px; } }
.uc2-pair .pairs { width: min(100%, 560px); margin-inline: auto; }
.uc2-pair .pair-res { width: min(100%, 560px); margin-inline: auto; }
.uc2-pair .pair-again { align-self: center; }

/* ---------- What people see (R4b): your name and colour, on one real welcome ---------- */
.ts-brand-pick { margin-top: 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.ts-brand-pick > span { font-size: 15px; color: var(--mute); }
.ts-brand-win .ka-rule, .ts-brand-win .ka-rprog, .ts-brand-win .go { background: var(--acc); transition: background-color .45s var(--ease-out); }
.ts-brand-win .ka-wcard { margin-top: 24px; }
.ts-brand-win .ka-rprog { width: 4%; }
/* the real "Before you start" card, small: rule, the Flow's name, the heading, the name field, Start as guest */
.ka.ts-guest { display: block; width: min(100%, 300px); padding: 24px 24px 22px; border-radius: 18px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ka-hair); text-align: left; }
.ts-guest .ka-rule { width: 36px; margin: 0 0 14px; }
.ts-guest > small { display: block; font-size: 14px; color: var(--ka-mute); }
.ts-guest > b { display: block; margin-top: 4px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
.ts-field { display: block; margin-top: 16px; padding: 10px 14px; border-radius: 12px; background: var(--ka-field); font-size: 16px; }
.ts-field small { display: block; font-size: 14px; color: var(--ka-mute); }
.ts-start { margin-top: 14px; height: 42px; padding: 0 20px; border-radius: 999px; background: var(--ka-plum); color: #FFFFFF; display: inline-flex; align-items: center; font-size: 15px; font-weight: 500; }

/* ---------- How Encore works (R4b): three steps, one window, no pin ---------- */
/* The panels stack in one cell, so the stage is as tall as the tallest step and never moves when you switch. */
.ov-tabs { margin-top: 32px; display: flex; justify-content: center; }
.ov-tabs .seg button { display: inline-flex; align-items: center; gap: 10px; }
.ov-tabs .seg .ka-ico { width: 20px; height: 20px; }
.ov-stage { display: grid; }
.ov-stage > .ov-panel { grid-area: 1 / 1; display: flex; flex-direction: column; transition: opacity .45s var(--ease-out), visibility 0s; }
.js .ov-stage > [data-seg-panel]:not(.is-on) { display: flex; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-out), visibility 0s .3s; }
.ov-win { flex: 1; }
.ov-cap { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 20px; text-align: center; }
.ov-cap p { font-size: 18px; color: var(--plum); }
@media (max-width: 600px) {
  .ov-tabs .seg button { padding: 0 14px; font-size: 15px; }
  .ov-tabs .seg .ka-ico { display: none; }
  .ov-cap p { font-size: 16px; }
}
/* The four ways: the Forms card's pair stacks, so both words always fit their cards */
.ov-ways .swm .ka-pair.ov-pair { grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: stretch; }
.ov-ways .swm .ka-pair.ov-pair .ka-card { font-size: 18px; min-height: 44px; padding: 8px 14px; text-align: left; justify-content: flex-start; }
.ov-ways .swm .ka-pair.ov-pair .ka-or { text-align: center; }

/* ---------- Negative space (R4b, Josh addendum 7 ruling 3): more air between cards in a row and between rows ---------- */
.sw-air .pat-grid-list { column-gap: max(32px, calc(var(--vw) * 3.889)); row-gap: max(64px, calc(var(--vw) * 6.112)); }
@media (max-width: 1100px) { .sw-air .pat-grid-list { column-gap: 32px; row-gap: 72px; } }
@media (max-width: 600px) { .sw-air .pat-grid-list { row-gap: 64px; } }

/* KIT2 stacked What we heard window (under 780px): the title block takes its own height and the rows take the rest,
   so the grown window never opens a gap under the title (requested for the kit in SHELL-REQUESTS.md). */
@container ka (max-width: 780px) { .sw-air .ka-heard > .ka-body { grid-template-rows: auto minmax(0, 1fr); } }
/* What people see, the walk on a short screen (a 1024x768 tablet): the welcome and thank-you cards tighten so the
   whole card fits the stage (the P3 stage sets the window's size, so the card must fit it, not the other way round). */
@media (min-width: 601px) and (max-height: 820px) {
  .ts2-walk .ka-wcard { padding: 26px 30px 24px; }
  .ts2-walk .ka-wcard .ka-rule { margin-bottom: 16px; }
  .ts2-walk .ka-wcard h4 { font-size: 32px; }
  .ts2-walk .ka-wcard p { margin-top: 10px; font-size: 16px; }
  .ts2-walk .ka-wcard ul { margin-top: 12px; gap: 6px; }
  .ts2-walk .ka-wcard .go { margin-top: 18px; height: 46px; }
  .ts2-walk .ka-rscreen .ka-q { font-size: 34px; }
}
/* What people see, the walk: on a wide window the welcome and thank-you cards lay out in two columns (words left,
   the list and Begin or the chosen images right), as on Flow, so the whole card fits the pinned stage at 1440x900. */
.ts2-walk .ka-wcard { width: min(100%, 880px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 44px; align-content: start; }
.ts2-walk .ka-wcard > * { grid-column: 1; }
.ts2-walk .ka-wcard > ul { grid-column: 2; grid-row: 1 / 4; align-self: end; margin-top: 0; }
.ts2-walk .ka-wcard > .go { grid-column: 2; grid-row: 4; align-self: start; margin-top: 18px; }
.ts2-walk .ka-wcard > .ka-chosen { grid-column: 2; grid-row: 1 / 5; align-self: center; margin-top: 0; }
@container ka (max-width: 760px) {
  .ts2-walk .ka-wcard { width: min(100%, 560px); grid-template-columns: minmax(0, 1fr); }
  .ts2-walk .ka-wcard > ul, .ts2-walk .ka-wcard > .go, .ts2-walk .ka-wcard > .ka-chosen { grid-column: 1; grid-row: auto; }
  .ts2-walk .ka-wcard > ul { margin-top: 14px; }
  .ts2-walk .ka-wcard > .ka-chosen { margin-top: 16px; }
}
/* The Comparison settings panel at a narrow window (a bleed window at 1440): Automatic | Board | Liked only fits
   the panel instead of running past its right edge (also requested for the kit in SHELL-REQUESTS.md). */
.sw-air .ka-side .ka-seg { display: flex; max-width: 100%; }
.sw-air .ka-side .ka-seg span { flex: 1 1 auto; min-width: 0; padding: 0 8px; }

/* R4c: the founders' What we heard window holds the points the reader just gave (#your-points): it grows to show
   every bar instead of fading them out (the kit's data-ka-full, done in CSS). */
.ka-heard .ka-hright:has(#your-points) { contain: none; -webkit-mask-image: none; mask-image: none; }

/* ---------- R6 (27 Oct) ---------- */
/* Overview: the Moodboard card wears the app's thumbs, not hearts (ruling 16). */
.swm-board .rv-badge { width: 24px; height: 24px; right: 6px; bottom: 6px; background-size: 12px; }
/* Overview: the agent's chat, as it really reads (text and a link), centred and fitted. */
.ov-chat { width: min(calc(100% - var(--gut) * 2), 1120px); margin-inline: auto; }

/* ============================== R6b (27 Oct), ruling 28: agents · customer support follow-ups ============================== */
.ag2-kick { font-size: 17px; color: var(--mute); margin-bottom: 16px; }
.ag2-support .ag2-support-how { margin-top: 18px; }
.ag2-support .pat-feature-vis > .ka-chat-cap { margin-top: 14px; }

/* Role pages (use-cases/<role>.html) and their template pages (templates/<slug>.html). 27 Oct 2026.
   Owner: the roles lane. Loads after site.css, nav-menu.css, faq.css, kit-app.css, kit-r6.css, pages.css and
   page-sweep.css. How to build a role: ../../roles/TEMPLATE-NOTES.md.
   Every mock is the real app (r6/truth, 4.123.x) drawn with the kit (.ka / .rv / .dp / .jy). This file only adds
   the respondent question types the kit didn't have yet, and the page layout pieces:
     1. .ro-tnt    This / Not That, as people answer it (truth form-slides-1440-q17)
     2. .ro-spec   Spectrum, as people answer it (truth form-slides-375-q13)
     3. .ro-stake  Stake Binary, as people answer it (truth form-slides-1440-q22)
     4. .ro-send   "Who it's for" in the Send a link window of a Flow (kit .sm)
     5. Role page layout: .ro-inside (what's in the template), .ro-close (close with a visual)
     6. Template page layout: .tp-* (the full question list as text) */

/* ============================== 1 · This / Not That ============================== */
.ro-sub { margin-top: 12px; font-size: 16px; color: var(--rv-mute); }
.ro-tnt { width: 100%; max-width: 660px; margin-top: 38px; display: grid; gap: 26px; text-align: left; }
.ro-ln { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; }
.ro-ln > small { font-size: 14px; color: var(--rv-mute); }
.ro-ln > p { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.1; letter-spacing: -.02em; color: var(--rv-ink); transition: color .4s var(--ease-out); }
.ro-ln.is-dim > p { color: #8A7A8C; }
.ro-blank { display: inline-block; min-width: 128px; margin-left: 10px; padding: 0 6px; border-bottom: 1.5px solid rgba(58, 30, 60, .4); text-align: center; color: var(--acc); }
.ro-chips { grid-column: 2; margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; }
.ro-chips span { height: 52px; padding: 0 24px; border-radius: 12px; display: inline-flex; align-items: center; font-family: var(--serif); font-size: 23px; color: var(--rv-ink); background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .16); transition: background-color .35s var(--ease-out), color .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.ro-chips span.is-on { background: var(--acc); color: #FFFFFF; box-shadow: none; }
.ro-ln:not(.is-active) .ro-chips { display: none; }

/* ============================== 2 · Spectrum ============================== */
.ro-spec { width: 100%; max-width: 640px; margin-top: 34px; padding: 40px 36px 34px; border-radius: 28px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .1), 0 18px 40px rgba(58, 30, 60, .06); text-align: left; }
.ro-track { position: relative; height: 14px; border-radius: 7px; background: linear-gradient(90deg, rgba(58, 30, 60, .14), color-mix(in oklch, var(--acc) 82%, white) var(--v, 50%), rgba(58, 30, 60, .14)); box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .14); }
.ro-track i { position: absolute; left: var(--v, 50%); top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(58, 30, 60, .12), 0 6px 16px rgba(58, 30, 60, .12); }
.ro-track i::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: color-mix(in oklch, var(--acc) 72%, white); }
.ro-ends { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 28px; }
.ro-ends small { display: block; font-size: 14px; color: var(--rv-mute); }
.ro-ends b { display: block; margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: -.01em; color: #6E5A70; }
.ro-ends > span:last-child { text-align: right; }

/* ============================== 3 · Stake Binary ============================== */
/* Works in the respondent page (.rv) and in the Form studio's Slides preview (.ka-slides). */
.ro-stake { width: 100%; max-width: 760px; margin: 28px auto 0; padding: 30px 32px 32px; border-radius: 22px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .12), 0 16px 36px rgba(58, 30, 60, .05); text-align: center; color: var(--ka-plum, #3A1E3C); }
.ro-stake > b { display: block; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.05; letter-spacing: -.02em; }
.ro-stake > p { margin-top: 12px; font-size: 15px; color: var(--ka-mute, #6E5A70); }
.ro-stake > p.c { margin-top: 10px; color: var(--ka-plum, #3A1E3C); }
.ro-stake > div { margin: 22px auto 0; max-width: 560px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ro-stake > div span { height: 54px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--serif); font-size: 21px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .16); white-space: nowrap; }
.ro-stake > div span small { font-family: var(--sans); font-size: 14px; opacity: .75; }
.ro-stake > div span.is-on { background: var(--ka-plum, #3A1E3C); color: #FFFFFF; box-shadow: none; }

/* Phone and narrow windows: the app's own phone sizes (truth form-slides-375-*). */
@container ka (max-width: 520px) {
  .ro-sub { font-size: 15px; }
  .ro-tnt { margin-top: 26px; gap: 20px; }
  .ro-ln { grid-template-columns: 22px minmax(0, 1fr); }
  .ro-ln > p { font-size: 28px; }
  .ro-blank { min-width: 84px; }
  .ro-chips span { height: 46px; padding: 0 18px; font-size: 19px; }
  .ro-spec { margin-top: 26px; padding: 34px 18px 24px; border-radius: 24px; }
  .ro-ends { margin-top: 34px; grid-template-columns: minmax(0, 1fr); }
  .ro-ends b { font-size: 26px; }
  .ro-ends > span:last-child { text-align: left; }
  .ro-stake { padding: 24px 18px 22px; }
  .ro-stake > b { font-size: 30px; }
  .ro-stake > div { grid-template-columns: minmax(0, 1fr); }
}

/* ============================== 4 · Send a link, for a Flow ============================== */
.ro-send { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 15px; }
.ro-send > span:first-child { color: var(--ka-plum); }

/* ============================== 5 · Role page layout ============================== */
/* The hero's device pair sits under the glow copy like every product hero. */
.ro-hero .glow-visual { margin-top: max(40px, calc(var(--vw) * 3.4)); }
/* What's in the template: the seven questions as plain text a search engine reads, wrapped in a centred row. */
.ro-inside { margin: 26px auto 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; }
.ro-inside li { display: inline-flex; align-items: baseline; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 999px; background: var(--plane); font-size: 16px; line-height: 1.35; color: var(--plum); }
.ro-inside li small { font-size: 14px; color: var(--mute); }
.ro-acts { margin-top: 30px; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
/* The close, with the thank-you your client sees beside it. */
.ro-close .h2 { max-width: 560px; }
.ro-close .close-acts { justify-content: flex-start; }
.ro-close .close-terms { text-wrap: pretty; }
@media (max-width: 900px) { .ro-close .pat-feature-head { text-align: left; } }

/* ============================== 6 · Template page: the questions, as text ============================== */
.tp-hero .glow-visual { margin-top: max(40px, calc(var(--vw) * 3.4)); }
.tp-meta { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tp-meta span { height: 36px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; background: rgba(246, 243, 238, .14); box-shadow: inset 0 0 0 1px rgba(246, 243, 238, .32); color: var(--cream); font-size: 15px; }
.tp-list { padding-top: var(--sec); }
.tp-list-in { max-width: 860px; margin: 0 auto; }
.tp-list-head .body { margin-top: 18px; }
.tp-step { margin-top: max(48px, calc(var(--vw) * 4)); padding-top: 28px; border-top: 1px solid var(--hair-strong); }
.tp-step-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.tp-step-h h3 { font-family: var(--serif); font-weight: 400; font-size: max(28px, calc(var(--vw) * 2.2)); line-height: 1.1; letter-spacing: -.015em; color: var(--plum); }
.tp-step-h p { font-size: 15px; color: var(--mute); }
.tp-say { margin-top: 14px; font-size: var(--fs-body); line-height: 1.55; color: var(--mute); max-width: 680px; }
.tp-say b { font-weight: 500; color: var(--plum); }
.tp-qs { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.tp-q { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 24px 0; border-bottom: 1px solid var(--hair); }
.tp-q:first-child { border-top: 1px solid var(--hair); }
.tp-q > small { padding-top: 6px; font-size: 15px; color: var(--mute); }
.tp-q h4 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.25; letter-spacing: -.01em; color: var(--plum); text-wrap: pretty; }
.tp-type { grid-column: 2; justify-self: start; margin-top: 8px; height: 30px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; background: var(--plane); font-size: 14px; color: var(--plum); }
.tp-opts { grid-column: 2; margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tp-opts li { min-height: 36px; padding: 6px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--hair-strong); font-size: 15px; line-height: 1.35; color: var(--plum); display: inline-flex; align-items: center; }
.tp-why { grid-column: 2; margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--mute); max-width: 620px; }
.tp-board { margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; }
.tp-board figure { margin: 0; }
.tp-board img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; background: var(--plane); }
.tp-board figcaption { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--mute); }
.tp-kv { margin: 18px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 22px; font-size: 16px; line-height: 1.45; }
.tp-kv dt { color: var(--mute); }
.tp-kv dd { margin: 0; color: var(--plum); }
.tp-kv ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.tp-kv ul li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 0; border-radius: 50%; background: var(--plum); }
.tp-use { margin-top: max(48px, calc(var(--vw) * 4)); padding: 32px 0 0; border-top: 1px solid var(--hair-strong); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; }
.tp-use p { font-size: var(--fs-body); color: var(--mute); max-width: 520px; }
.tp-use-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
@media (max-width: 900px) { .tp-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .tp-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .tp-q { grid-template-columns: 30px minmax(0, 1fr); }
  .tp-q h4 { font-size: 21px; }
  .tp-kv { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tp-kv dd { margin-bottom: 10px; }
}

/* In the hero's device pair the phone sits over the laptop's lower right, where the board's "N of M rated" pill
   floats; it is left out there (the kit does the same for the Comparison's meta line). */
.dp-laptop .rv-mb .rv-count { visibility: hidden; }

/* ============================== 7 · Fixes from the independent check (27 Oct) ============================== */
/* The close's thank-you holds all of itself at every height. A fixed 5:4 window cropped the photos at short heights
   (1000x480: the fit scales the window to ~0.34, the text floor boosts every line, and the taller page ran out of the
   window). The window now takes its page's height and the fill fit scales that whole page to the stage, the kit's
   own rule for a thank-you on a phone (kit-r6.css "R6 gate fixes"). Nothing is hidden; nothing can be cropped. */
.ro-close .ka-win:has(> .rv-endp) { aspect-ratio: auto; }
.ro-close .ka-win:has(> .rv-endp) > .rv { flex: none; }
.ro-close .rv-endp .rv-end { padding-bottom: 48px; }
/* On a short screen (under 640px tall) the fit draws the page small and the text floor sets its lines larger, so the
   page is laid out a little wider with calmer gaps, and it still fits the height with everything in it. */
@media (min-width: 901px) and (max-height: 640px) {
  .ro-close .rv-endp .rv-end { width: 680px; padding: 30px 0 32px; }
  .ro-close .rv-endp .rv-strip { margin-top: 18px; }
  .ro-close .rv-endp .rv-heard { margin-top: 22px; }
  .ro-close .rv-endp .rv-heard > b { margin-top: 12px; }
  .ro-close .rv-endp .rv-heard h6 { margin-top: 16px; }
  .ro-close .rv-endp .rv-top4 { max-width: 560px; }
}
@media (min-width: 901px) and (max-height: 520px) {
  .ro-close .rv-endp .rv-end { width: 920px; padding-top: 18px; }
}

/* The Flow studio's live preview on a narrow window (step 1 and the template hero, 780px and under): the kit lets the
   card take its content's height, but a respondent page in it is flex-basis 0, so the card drew empty (every role
   and template page at 375). The page now takes its own height; a Moodboard runs on below and fades, as the window
   shows it on a phone. And the stop the card previews always shows in the row (the kit shows only the first two or
   three, which hid the chosen Moodboard or Comparison stop). */
@container ka (max-width: 780px) {
  .ka-flow-card > .rv { flex: none; }
  .ka-flow-card > .rv-mb { min-height: 0; height: clamp(440px, 96cqw, 620px); }
  .ka-stops:has(> .ka-stop.is-on:nth-child(n+4)) > .ka-stop:nth-child(3) { display: none; }
  .ka-stops > .ka-stop.is-on { display: grid; }
  .ka-stops > .ka-stop.is-on:nth-child(n+3) .bar::after { display: none; }
}
/* the row's column count follows what shows, even where the page sets its own count (style="--stops:3") */
@container ka (max-width: 780px) { .ka-stops { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container ka (max-width: 520px) {
  .ka-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ka-stops:has(> .ka-stop.is-on:nth-child(n+3)) > .ka-stop:nth-child(2) { display: none; }
  .ka-stops > .ka-stop.is-on:nth-child(n+2) .bar::after { display: none; }
}

/* Results on a phone (step 5): the first picture's row is open (its reasons, how it felt, their words) and is taller
   than the list's room in a 560px body, so the kit hid it whole and the list drew empty. The body is made tall
   enough to carry that open row; the rows after it fade on below, as the list does in the app. */
@container ka (max-width: 520px) {
  .ka-win.ka-heard:has(.mbk-img > .rd) > .ka-body { min-height: 720px; }
  .rd li { height: auto; min-height: 32px; padding: 5px 12px; line-height: 1.3; }   /* a two-word reason wraps inside its pill */
}

/* The Send a link window over the Flow (step 2) on a phone: the kit draws it 540px wide, wider than a phone window,
   so every row of it was hidden by the trim and the window read as blank. On a narrow window it is as wide as the
   window allows and sits in the flow over the dimmed card, so the window is as tall as whichever is taller. */
@container ka (max-width: 640px) {
  .ka-flow > .ka-body:has(> .sm) { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ka-flow > .ka-body:has(> .sm) > .ka-flow-card, .ka-flow > .ka-body > .sm { grid-area: 1 / 1; }
  .ka-flow > .ka-body > .sm { position: relative; z-index: 4; left: auto; top: auto; translate: none; width: auto; margin: 10px 0 24px; padding: 24px 20px 20px; }
  .ka-flow > .ka-body > .sm .t { font-size: 26px; }
  .ka-flow > .ka-body > .sm .d { font-size: 15px; }
}

/* ---------- v11: template breadcrumb, related templates, the templates index ---------- */
.tp-crumb { margin-bottom: 22px; }
.tp-crumb ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; font-size: 15px; line-height: 1.4; color: rgba(246, 243, 238, .82); }
.tp-crumb li + li::before { content: "/"; margin-right: 10px; color: rgba(246, 243, 238, .66); }
.tp-crumb a { color: var(--cream); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(246, 243, 238, .6); }
.tp-crumb a:hover { text-decoration-color: var(--cream); }
.tp-related { padding-top: var(--sec); }
.tp-related-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; }
.tp-related-grid { margin-top: max(32px, calc(var(--vw) * 3)); }
.tp-card .swm--wide { max-width: 330px; }
.tp-card .swm-steps span { grid-template-columns: 20px minmax(0, 1fr); row-gap: 0; align-items: start; }
.tp-card .swm-steps span small { grid-column: 2; }
.tp-card .swm-steps .ka-ico { margin-top: 1px; }
.tp-card .pat-card-vis { --vis-h: 330px; padding-inline: 16px; }
.tp-related-grid .tp-card .pat-card-vis, .uc3-roles--3 .tp-card .pat-card-vis { --vis-h: 290px; }
@media (max-width: 1100px) { .tp-card .pat-card-vis { --vis-h: 290px; } }
@media (max-width: 1100px) { .tp-related-grid { --cols: 2 !important; } }
@media (max-width: 600px) { .tp-related-grid { --cols: 1 !important; } .tp-crumb ol { justify-content: flex-start; } }