/* PREMONITION · /customers, the live scenes (2026-10-11, fourth cut) — Pip at work inside a product. Loaded after customers.css.
   The families, each with its script in js/cu/: Atoll, the first sample product (cua-, atoll.js; the other two are in
   cu-apps.css) · the first picture, where Pip shows, asks, does and the first result lands, in three products (cul-, live.js)
   · any question by voice or by message (cuq-) · the layers Pip adds on a product (cuy-, layers.js) · a long setup carried
   through day one (cur-, route.js) · teach Pip once (cut-, with a fragment of a product screen, cuw-) · a company's colours and
   tone (cum-, yours.js) · a customer's agent onboarded with nothing to click (cuh-, headless.js).
   Pip has no body and no mark (Stan refused four of them, then said: without). It is three things only, all in the
   page's gradient: its NAME on a small tag, its POINTER (an arrow that carries the same tag), and its VOICE (a wave). Every class starts with cu, because site.css owns the short names.
   One rule of looks: few things in each scene, each one large. Depth is real: the pictures stand in a perspective and lean
   to the pointer, so anything a cursor must touch stays on the product's own plane. */

/* ============================================================== Atoll, the sample product (white, deep green ink, lagoon teal) */
.cua { --at: #0f1f1c; --at-2: #52625e; --at-3: #8d9b97; --at-line: #e4eae8; --at-bg: #f5f8f7; --teal: #12b594; --teal-d: #0a8f75; --teal-soft: #e1f7f1;
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: #fff; color: var(--at); font: 400 14px/1.35 var(--body); text-align: left; -webkit-user-select: none; user-select: none; }
.cua svg { width: 18px; height: 18px; flex: none; }
.cua button { appearance: none; border: 0; margin: 0; font: inherit; cursor: pointer; }
.cua-mark { color: #12b594; }
.cua-bar { position: relative; flex: none; height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #f1f4f3; border-bottom: 1px solid var(--at-line); }
.cua-bar > i { width: 10px; height: 10px; border-radius: 50%; background: #d3dad8; }
.cua-url { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 14px 0 9px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--at-line); font: 600 12px/1 var(--body); color: var(--at-2); white-space: nowrap; }
.cua-url .cua-mark { width: 14px; height: 14px; }
.cua-url em { font-style: normal; font-weight: 500; color: var(--at-3); }
.cua-url em::before { content: "· "; }
.cua[data-screen="money"] .cua-url .n, .cua[data-screen="new"] .cua-url .m { display: none; }
.cua-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.cua-rail { flex: none; width: 68px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0 16px; border-right: 1px solid var(--at-line); background: #fff; }
.cua-logo { margin-bottom: 14px; }
.cua-logo .cua-mark { width: 30px; height: 30px; }
.cua-nav { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: var(--at-3); transition: background-color .3s, color .3s; }
.cua-nav svg { width: 21px; height: 21px; }
.cua[data-screen="money"] [data-n="money"], .cua[data-screen="new"] [data-n="invoices"] { background: var(--teal-soft); color: var(--teal-d); }
.cua-rail .fc { margin-top: auto; width: 34px; height: 34px; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--at-line); }
.cua-main { position: relative; flex: 1 1 auto; min-width: 0; background: var(--at-bg); }
.cua-scr { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 24px 30px 24px; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.992); transition: opacity .3s, transform .55s var(--soft), visibility 0s .3s; }
.cua[data-screen="money"] .cua-money, .cua[data-screen="new"] .cua-new { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.cua-top { flex: none; display: flex; align-items: center; gap: 16px; min-height: 58px; margin-bottom: 18px; }
.cua-top > div { margin-right: auto; min-width: 0; }
.cua-top h4 { margin: 0; font: 600 27px/1.1 var(--body); letter-spacing: -.03em; }
.cua-top p { margin: 5px 0 0; font-size: 14px; color: var(--at-3); }
.cua-btn { flex: none; height: 48px; display: inline-flex; align-items: center; gap: 9px; padding: 0 22px 0 18px; border-radius: 15px; background: linear-gradient(180deg, #19c6a3, #0ea88a); color: #fff; box-shadow: 0 12px 24px -12px rgba(10, 143, 117, .8), inset 0 1px 0 rgba(255, 255, 255, .3); font: 600 15.5px/1 var(--body); white-space: nowrap; transition: transform .4s var(--soft), box-shadow .3s, opacity .3s, filter .3s; }
.cua button.cua-btn:hover { box-shadow: 0 16px 28px -12px rgba(10, 143, 117, .9), inset 0 1px 0 rgba(255, 255, 255, .3); }
.cua-btn svg { width: 19px; height: 19px; }
.cua-card { border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--at-line), 0 18px 34px -30px rgba(15, 31, 28, .4); }
.cua-card > small { font: 500 14px/1 var(--body); color: var(--at-3); }
/* money: one number, one line that rises, the list under it; beside them the three things to set up */
.cua-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; }
.cua-in { position: relative; display: flex; flex-direction: column; padding: 24px 26px 18px; overflow: hidden; }
.cua-num { display: grid; margin-top: 10px; font: 600 58px/1 var(--body); letter-spacing: -.045em; }
.cua-num span { grid-area: 1 / 1; transition: opacity .5s, transform .7s var(--soft); }
.cua-num .b { opacity: 0; transform: translateY(14px); color: var(--teal-d); }
.cua.is-sent .cua-num .a { opacity: 0; transform: translateY(-14px); }
.cua.is-sent .cua-num .b { opacity: 1; transform: none; }
.cua .cua-chart { flex: 1 1 auto; min-height: 0; width: calc(100% + 52px); height: auto; margin: 6px -26px 0; overflow: visible; }
.cua-chart .base { fill: none; stroke: #dbe3e0; stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cua-chart .area { fill: url(#cuaFill); }
.cua-chart .line { fill: none; stroke: var(--teal); stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cua-chart .plot { clip-path: inset(-10% 100% -10% 0); }
.cua.is-sent .cua-chart .plot { clip-path: inset(-10% -2% -10% 0); transition: clip-path 1.4s var(--soft) .15s; }
.cua-row { flex: none; display: grid; align-items: center; height: 52px; margin-top: 4px; border-top: 1px solid var(--at-line); font-size: 14.5px; }
.cua-row > span { grid-area: 1 / 1; transition: opacity .4s, transform .6s var(--soft); }
.cua-row .e { color: var(--at-3); }
.cua-row .r { display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(10px); }
.cua-row .r i { font: 500 13px/1 var(--mono); font-style: normal; color: var(--at-3); }
.cua-row .r b { font-weight: 600; }
.cua-row .r em { margin-left: auto; font-style: normal; font-weight: 600; }
.cua-row .r u { height: 26px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-d); font: 600 12.5px/1 var(--body); text-decoration: none; }
.cua.is-sent .cua-row .e { opacity: 0; }
.cua.is-sent .cua-row .r { opacity: 1; transform: none; transition-delay: .5s; }
.cua-setup { display: flex; flex-direction: column; padding: 24px 22px 20px; }
.cua-setup > small { margin-bottom: 12px; }
.cua-setup > span { display: flex; align-items: center; gap: 12px; min-height: 56px; border-top: 1px solid var(--at-line); font-size: 15px; }
.cua-setup > span > i { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #cfd8d5; display: grid; place-items: center; color: transparent; transition: background-color .4s, border-color .4s, color .4s; }
.cua-setup > span > i svg { width: 13px; height: 13px; }
.cua-setup em { flex: 1 1 auto; font-style: normal; font-weight: 500; transition: color .4s; }
.cua-setup u { text-decoration: none; display: grid; font: 600 12.5px/1 var(--body); color: var(--at-3); }
.cua-setup u span { grid-area: 1 / 1; justify-self: end; transition: opacity .4s; }
.cua-setup .ok > i, .cua.is-sent .cua-setup .s2 > i { border-color: var(--teal); background: var(--teal); color: #fff; }
.cua-setup .ok em, .cua.is-sent .cua-setup .s2 em { color: var(--at-3); }
.cua-setup .s2 .a, .cua.is-sent .cua-setup .s3 .b { padding: 6px 10px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-d); }
.cua-setup .b, .cua.is-sent .cua-setup .s2 .a { opacity: 0; }
.cua.is-sent .cua-setup .b { opacity: 1; }
.cua-prog { margin-top: auto; height: 8px; border-radius: 4px; background: #e8eeec; overflow: hidden; }
.cua-prog i { display: block; height: 100%; width: 33.4%; border-radius: 4px; background: var(--teal); transition: width .9s var(--soft) .3s; }
.cua.is-sent .cua-prog i { width: 66.7%; }
/* a new invoice: the client and the items on the left, the sheet of paper on the right */
.cua-edit { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; }
.cua-form { min-width: 0; display: flex; flex-direction: column; }
.cua-form label { margin: 0 0 8px 2px; font: 600 12px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--at-3); }
.cua-field { display: grid; align-items: center; height: 66px; margin-bottom: 18px; padding: 0 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--at-line); transition: box-shadow .35s; }
.cua-field > span { grid-area: 1 / 1; transition: opacity .35s, transform .5s var(--soft); }
.cua-field .q { display: flex; align-items: center; justify-content: space-between; font-size: 15.5px; color: var(--at-3); }
.cua-field .a { display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(8px); }
.cua-cl { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #1f6f5c; color: #fff; font: 600 17px/1 var(--display); font-style: normal; }
.cua-field b { display: block; font: 600 16px/1.2 var(--body); }
.cua-field small { display: block; font-size: 13px; color: var(--at-3); }
.cua.is-asking .cua-field { box-shadow: 0 0 0 2px var(--teal), 0 0 0 7px rgba(18, 181, 148, .16); }
.cua.is-client .cua-field .q { opacity: 0; }
.cua.is-client .cua-field .a { opacity: 1; transform: none; }
.cua-items { position: relative; display: grid; gap: 6px; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--at-line); }
.cua-it { position: relative; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 14px; border-radius: 11px; background: var(--at-bg); font-size: 15px; opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .5s var(--soft); }
.cua-it span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.cua-it b { font-weight: 600; }
.cua-it small { padding: 4px 8px 5px; border-radius: 999px; background: var(--ai-soft); color: var(--ai-ink); font: 600 11px/1 var(--body); }
.cua-add { position: absolute; inset: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 11px; border: 1.5px dashed #cfd8d5; color: var(--at-3); font-size: 15px; transition: opacity .3s; }
.cua.i0 [data-t="it0"], .cua.i1 [data-t="it1"], .cua.i2 [data-t="it2"] { opacity: 1; transform: none; }
.cua.i0 .cua-add { opacity: 0; }
.cua-from { align-self: flex-start; margin-top: 12px; height: 28px; padding: 0 12px 0 9px; font-size: 12.5px; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--soft); }
.cua .cua-from svg { width: 14px; height: 14px; }
.cua.is-sum .cua-from { opacity: 1; transform: none; }
.cua-desk { position: relative; min-width: 0; border-radius: 20px; background: radial-gradient(#d6dfdc 1.2px, transparent 1.3px) 0 0 / 18px 18px, #e9efed; display: grid; place-items: center; overflow: hidden; }
.cua-paper { width: min(390px, 82%); padding: 0 0 16px; border-radius: 10px; background: #fff; box-shadow: 0 30px 50px -28px rgba(15, 31, 28, .5), 0 0 0 1px rgba(15, 31, 28, .05); font-size: 13.5px; transform: rotate(-1.2deg); transition: transform .85s cubic-bezier(.6, 0, .3, 1), opacity .5s .3s; }
.cua-ph { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 20px; border-radius: 10px 10px 0 0; background: #ff6b4a; color: #fff; }
.cua-q { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: #ff6b4a; font: 600 16px/1 var(--display); font-stretch: 116%; }
.cua-ph b { font: 600 17px/1 var(--display); font-stretch: 114%; letter-spacing: -.01em; }
.cua-ph em { margin-left: auto; font: 500 12.5px/1 var(--mono); font-style: normal; opacity: .9; }
.cua-to { display: grid; gap: 4px; padding: 16px 20px 12px; }
.cua-to small { font: 600 10.5px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--at-3); }
.cua-to b, .cua-to span { grid-column: 1; opacity: 0; transition: opacity .4s; }
.cua-to b { grid-row: 2; font: 600 16px/1.2 var(--body); }
.cua-to span { grid-row: 3; color: var(--at-2); }
.cua-to i { grid-column: 1; height: 9px; border-radius: 5px; background: #e9efed; transition: opacity .3s; }
.cua-to i:nth-of-type(1) { grid-row: 2; width: 46%; margin: 5px 0; }
.cua-to i:nth-of-type(2) { grid-row: 3; width: 30%; margin: 4px 0; }
.cua.is-client .cua-to b, .cua.is-client .cua-to span { opacity: 1; }
.cua.is-client .cua-to i { opacity: 0; }
.cua-lines { margin: 0 20px; border-top: 1px solid var(--at-line); }
.cua-lines div { position: relative; display: flex; justify-content: space-between; align-items: center; height: 36px; border-bottom: 1px solid var(--at-line); }
.cua-lines span, .cua-lines b { opacity: 0; transform: translateY(5px); transition: opacity .3s, transform .45s var(--soft); }
.cua-lines b { font-weight: 600; }
.cua-lines i { position: absolute; left: 0; top: 13px; width: 52%; height: 9px; border-radius: 5px; background: #eef2f1; transition: opacity .3s; }
.cua.i0 .cua-lines div:nth-child(1) > :not(i), .cua.i1 .cua-lines div:nth-child(2) > :not(i), .cua.i2 .cua-lines div:nth-child(3) > :not(i) { opacity: 1; transform: none; }
.cua.i0 .cua-lines div:nth-child(1) i, .cua.i1 .cua-lines div:nth-child(2) i, .cua.i2 .cua-lines div:nth-child(3) i { opacity: 0; }
.cua-sum { display: grid; gap: 5px; margin: 12px 20px 0 46%; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .6s var(--soft); }
.cua-sum div { display: flex; justify-content: space-between; color: var(--at-2); }
.cua-sum b { font-weight: 600; color: var(--at); }
.cua-sum .t { margin-top: 4px; padding-top: 8px; border-top: 1.5px solid var(--at); font-size: 15px; color: var(--at); }
.cua-sum .t b { font: 600 22px/1 var(--body); letter-spacing: -.03em; }
.cua.is-sum .cua-sum { opacity: 1; transform: none; }
.cua-foot { margin: 14px 20px 0; font-size: 12px; color: var(--at-3); }
.cua-new .cua-btn { opacity: .45; filter: saturate(.5); }
.cua.is-ready .cua-new .cua-btn { opacity: 1; filter: none; }
.cua-new .cua-btn .p, .cua.is-sending .cua-new .cua-btn .l { display: none; }
.cua.is-sending .cua-new .cua-btn .p { display: inline; }
.cua.is-sending .cua-paper { transform: translate(64%, -96%) rotate(16deg) scale(.16); opacity: 0; }
.cua.tall { font-size: 13.5px; }
.cua.tall .cua-body { flex-direction: column; }
.cua.tall .cua-rail { width: auto; flex-direction: row; gap: 4px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--at-line); }
.cua.tall .cua-logo { margin: 0 auto 0 0; }
.cua.tall .cua-logo .cua-mark { width: 26px; height: 26px; }
.cua.tall .cua-nav { width: 38px; height: 38px; border-radius: 11px; }
.cua.tall .cua-rail .fc { margin: 0 0 0 6px; width: 30px; height: 30px; }
.cua.tall .cua-scr { padding: 16px 16px 30px; }
.cua.tall .cua-top { min-height: 48px; margin-bottom: 12px; gap: 10px; }
.cua.tall .cua-top h4 { font-size: 20px; }
.cua.tall .cua-top p { font-size: 12.5px; margin-top: 3px; }
.cua.tall .cua-btn { height: 42px; padding: 0 15px 0 12px; border-radius: 13px; font-size: 14px; }
.cua.tall .cua-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.25fr) auto; gap: 12px; }
.cua.tall .cua-in { padding: 16px 18px 8px; }
.cua.tall .cua-num { font-size: 44px; margin-top: 6px; }
.cua.tall .cua-chart { width: calc(100% + 36px); margin: 4px -18px 0; }
.cua.tall .cua-row { height: 44px; font-size: 13.5px; }
.cua.tall .cua-setup { padding: 14px 16px 10px; }
.cua.tall .cua-setup > small { margin-bottom: 6px; }
.cua.tall .cua-setup > span { min-height: 40px; font-size: 14px; }
.cua.tall .cua-prog { display: none; }
.cua.tall .cua-edit { grid-template-columns: minmax(0, 1fr); }
.cua.tall .cua-form { display: none; }
.cua.tall .cua-paper { width: 86%; }
/* ============================================================== the first picture: Pip at work inside three products */
.cu-field .cul-orb { position: absolute; z-index: 0; border-radius: 50%; filter: blur(64px); opacity: .75; pointer-events: none; animation: cul-drift 19s ease-in-out infinite alternate; }
.cul-orb.o1 { left: 2%; top: 34%; width: min(34vw, 520px); height: min(34vw, 520px); background: #ffb3d1; }
.cul-orb.o2 { right: 0; top: 2%; width: min(30vw, 460px); height: min(30vw, 460px); background: #a8dcff; animation-delay: -7s; }
.cul-orb.o3 { left: 40%; bottom: -16%; width: min(32vw, 480px); height: min(32vw, 480px); background: #ffd9a8; animation-delay: -12s; }
@keyframes cul-drift { from { transform: translate3d(-4%, -5%, 0) scale(1); } to { transform: translate3d(6%, 7%, 0) scale(1.16); } }
/* over the picture: the three products Pip is shown in; the one playing fills as it goes */
.cul-tabs { position: relative; z-index: 2; width: fit-content; max-width: 100%; margin: 0 auto clamp(12px, 1.4vw, 20px); display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(22, 20, 29, .06), 0 14px 30px -20px rgba(58, 36, 130, .5); }
.cul-tabs > b { flex: none; padding: 7px 10px; border-radius: 999px; background: var(--ai-soft); color: var(--ai-ink); font: 600 11px/1 var(--display); font-stretch: 112%; letter-spacing: .06em; text-transform: uppercase; }
.cul-tabs > span { padding: 0 8px 0 6px; font: 500 13.5px/1 var(--body); color: var(--ink-2); white-space: nowrap; }
.cul-tabs button { position: relative; appearance: none; height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 15px 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 600 14px/1 var(--display); font-stretch: 108%; white-space: nowrap; cursor: pointer; overflow: hidden; transition: background-color .3s, color .3s, box-shadow .3s; }
.cul-tabs button i { display: grid; }
.cul-tabs button svg { width: 19px; height: 19px; }
.cul-tabs .cun-mark { color: #4d5bea; }
.cul-tabs button em { font: 500 13px/1 var(--body); font-style: normal; color: var(--ink-3); }
.cul-tabs button:hover { background: rgba(255, 255, 255, .7); }
.cul-tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(22, 20, 29, .07), 0 8px 18px -10px rgba(58, 36, 130, .55); }
.cul-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; background: linear-gradient(90deg, #7a5cff, #ff5fb0); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: 0; }
.cul-tabs button.on::after { opacity: 1; }
.cu-field:not(:has(.cul-on)) .cul-tabs { display: none; }
.cul { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; perspective: 1900px; perspective-origin: 50% 42%; }
.cul-tilt { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.cul-sc { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform-style: preserve-3d; }
.cul-sc > * { position: absolute; }
.cul-glow { left: 90px; top: 646px; width: 940px; height: 110px; border-radius: 50%; background: rgba(58, 36, 130, .5); filter: blur(46px); transform: translateZ(-70px); }
.cul-win { left: 44px; top: 124px; width: 1032px; height: 572px; border-radius: 20px; overflow: hidden; background: #fff; visibility: hidden; will-change: transform, opacity; box-shadow: 0 0 0 1px rgba(22, 20, 29, .07), 0 60px 110px -50px rgba(40, 24, 110, .55), 0 26px 50px -30px rgba(40, 24, 110, .35); }
/* Pip reads the screen: a band of points sweeps the product (js/cu/live.js moves the mask) */
.cul-scan { left: 44px; top: 160px; width: 1032px; height: 536px; border-radius: 0 0 20px 20px; opacity: 0; pointer-events: none; transform: translateZ(1.5px);
  background: radial-gradient(circle, rgba(122, 92, 255, .9) 1.5px, transparent 2.1px) 0 0 / 18px 18px;
  -webkit-mask: linear-gradient(105deg, transparent 41%, #000 47.5%, #000 49.5%, transparent 54%) 0 0 / 320% 100% no-repeat; mask: linear-gradient(105deg, transparent 41%, #000 47.5%, #000 49.5%, transparent 54%) 0 0 / 320% 100% no-repeat; }
.cul[data-app="noma"] .cul-scan { background-image: radial-gradient(circle, rgba(150, 224, 255, .95) 1.5px, transparent 2.1px); }
/* Pip's words, over the product's corner; its name rides on them, and its pointer leaves from that name */
.cul-who { position: absolute; left: 16px; top: -14px; height: 28px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 4px 14px 14px 14px; background: linear-gradient(100deg, #7a5cff, #ff5fb0); color: #fff; box-shadow: 0 8px 16px -8px rgba(122, 92, 255, .8); font: 600 13px/1 var(--body); }
.cul-say { left: 46px; top: 30px; max-width: 420px; padding: 20px 20px 15px; border-radius: 6px 22px 22px 22px; background: #fff; box-shadow: 0 0 0 1px rgba(22, 20, 29, .06), 0 24px 46px -22px rgba(58, 36, 130, .6); font: 500 16px/1.4 var(--body); color: var(--ink); text-align: left; pointer-events: none; opacity: 0; }
.cul-say .tx { display: grid; gap: 10px; justify-items: start; }
.cul-say p { margin: 0; padding-right: 26px; text-wrap: pretty; }
.cul-say p b { color: var(--ai-ink); font-weight: 600; }
.cul-say .dots { display: none; }
.cul-say.typing .dots { display: inline-flex; gap: 4px; padding: 7px 2px; }
.cul-say.typing .tx > :not(.dots) { display: none; }
.cul-say .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ai-2); animation: cul-dot 1s ease-in-out infinite; }
.cul-say .dots i:nth-child(2) { animation-delay: .15s; }
.cul-say .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cul-dot { 0%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
/* Pip says its words out loud too: three small bars at the corner of the bubble move while it does */
.cul-ear { position: absolute; right: 13px; top: 15px; display: flex; align-items: center; gap: 2.5px; height: 16px; }
.cul-ear i { width: 3px; height: 30%; border-radius: 2px; background: var(--ai-3); transition: background-color .3s; }
.cul-say.speaking .cul-ear i { background: var(--ai); animation: cul-bar .7s ease-in-out infinite; }
.cul-say.speaking .cul-ear i:nth-child(2) { animation-delay: -.25s; }
.cul-say.speaking .cul-ear i:nth-child(3) { animation-delay: -.5s; }
.cul-say.typing .cul-ear { display: none; }
@keyframes cul-bar { 0%, 100% { height: 30%; } 50% { height: 100%; } }
/* what Pip offers: answers to choose between, and the next step */
.cul-ch { display: flex; flex-wrap: wrap; gap: 8px; pointer-events: auto; }
.cul-ch button { appearance: none; height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ai-soft); color: var(--ai-ink); box-shadow: inset 0 0 0 1.5px rgba(122, 92, 255, .35); font: 600 14px/1 var(--body); white-space: nowrap; cursor: pointer; transition: background-color .25s, color .25s, opacity .25s; }
.cul-ch button i { width: 28px; height: 28px; margin-left: -10px; border-radius: 9px; display: grid; place-items: center; color: #fff; font: 600 13px/1 var(--display); font-style: normal; }
.cul-ch button:hover { background: #e6deff; }
.cul-ch button.on { background: var(--ai); color: #fff; box-shadow: none; }
.cul-ch.picked button:not(.on) { opacity: .45; }
.cul-next { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 14px; border-radius: 999px; background: var(--ai-soft); color: var(--ai-ink); box-shadow: inset 0 0 0 1.5px rgba(122, 92, 255, .35); font: 600 13.5px/1 var(--body); white-space: nowrap; }
.cul-next svg { width: 15px; height: 15px; }
/* the way to ask, by voice or in writing: a bar that sits on the product's lower edge */
.cul-dock { left: 350px; top: 666px; width: 420px; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 7px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(22, 20, 29, .08), 0 22px 40px -18px rgba(58, 36, 130, .65); font: 400 15px/1 var(--body); color: var(--ink); pointer-events: none; }
.cul-dock > i { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.cul-dock > i svg { width: 19px; height: 19px; }
.cul-dock .cul-mic { background: var(--ai-soft); color: var(--ai-ink); transition: background-color .3s, color .3s, box-shadow .3s; }
.cul-dock .cul-go { background: var(--ai); color: #fff; }
.cul-dock .cul-kb { width: 30px; color: var(--ink-3); }
.cul-dock .tx { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; transition: color .3s; }
.cul-dock .ph, .cul-dock.sent .tx { color: var(--ink-3); }
.cul-dock.typing .tx::after { content: ""; display: inline-block; width: 2px; height: 1.15em; margin-left: 2px; vertical-align: -.22em; background: var(--ai); animation: cul-caret .9s steps(2, jump-none) infinite; }
@keyframes cul-caret { to { opacity: 0; } }
.cul-dock.typing { box-shadow: 0 0 0 2px var(--ai), 0 22px 40px -18px rgba(58, 36, 130, .65); }
.cul-dock .cul-wave { display: none; flex: none; align-items: center; gap: 3px; height: 24px; }
.cul-dock .cul-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--coral); transform: scaleY(.25); animation: cu-wave 1s ease-in-out infinite; }
.cul-dock .cul-wave i:nth-child(2n) { animation-delay: -.3s; }
.cul-dock .cul-wave i:nth-child(3n) { animation-delay: -.62s; }
.cul-dock.voice .cul-mic { background: var(--coral); color: #fff; box-shadow: 0 0 0 6px rgba(255, 107, 74, .18); }
.cul-dock.voice .cul-wave { display: flex; }
.cul-dock.voice .cul-kb { display: none; }
/* how long since the customer signed up: the clock runs while Pip works, and stops on the first result */
.cul-clock { left: 800px; top: 44px; height: 52px; display: grid; align-items: center; padding: 0 18px 0 9px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px rgba(22, 20, 29, .06), 0 26px 50px -24px rgba(58, 36, 130, .6); font: 500 14.5px/1 var(--body); color: var(--ink-2); white-space: nowrap; pointer-events: none; }
.cul-clock > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; transition: opacity .4s, transform .6s var(--soft); }
.cul-clock i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); color: var(--ink-2); }
.cul-clock i svg { width: 18px; height: 18px; }
.cul-clock b { font: 600 16px/1 var(--mono); color: var(--ink); }
.cul-clock em { font-style: normal; }
.cul-clock .b { opacity: 0; transform: translateY(10px); color: #147a4a; font-weight: 600; }
.cul-clock .b i { background: var(--ok); color: #fff; }
.cul-clock.done .a { opacity: 0; transform: translateY(-10px); }
.cul-clock.done .b { opacity: 1; transform: none; }
/* the pointers: a person's is ink, Pip's has the page's gradient; each carries a name, and Pip's says what it is doing */
.cul-cur { position: absolute; left: 0; top: 0; width: 0; height: 0; color: var(--ink); pointer-events: none; will-change: transform; transform-origin: 0 0; }
.cul-cur svg { position: absolute; left: -5px; top: -3px; width: 27px; height: 27px; filter: drop-shadow(0 4px 6px rgba(22, 20, 29, .3)); }
.cul-cur b { position: absolute; left: 17px; top: 21px; padding: 4px 9px 5px; border-radius: 4px 12px 12px 12px; background: var(--ink); font: 600 11.5px/1 var(--body); color: #fff; white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(22, 20, 29, .5); }
.cul-cur.pip svg { filter: drop-shadow(0 4px 8px rgba(122, 92, 255, .6)); }
.cul-cur.pip b { background: linear-gradient(100deg, #7a5cff, #ff5fb0); }
/* on a dark product a person's pointer turns light, so it still shows */
.cul[data-app="noma"] .cul-cur.you { color: #fff; }
.cul[data-app="noma"] .cul-cur.you svg path { stroke: var(--ink); }
.cul[data-app="noma"] .cul-cur.you b { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(22, 20, 29, .5), 0 6px 14px -6px rgba(0, 0, 0, .6); }
.cul-cur.lea { color: var(--coral); }
.cul-cur.lea b { background: var(--coral); }
.cul-sc > .cul-cur svg { left: -7px; top: -4px; width: 36px; height: 36px; }
.cul-sc > .cul-cur b { left: 24px; top: 29px; padding: 6px 11px 7px; font-size: 13px; }
.cul-cur em { position: absolute; left: 68px; top: 29px; padding: 6px 11px 7px; border-radius: 12px; background: #fff; color: var(--ai-ink); box-shadow: 0 0 0 1px rgba(122, 92, 255, .22), 0 8px 16px -8px rgba(58, 36, 130, .55); font: 600 13px/1 var(--body); font-style: normal; white-space: nowrap; opacity: 0; transform: translateX(-8px) scale(.94); transform-origin: 0 50%; transition: opacity .25s, transform .4s var(--soft); }
.cul-cur.says em { opacity: 1; transform: none; }
.cul-ring { left: 0; top: 0; border-radius: 19px; opacity: 0; pointer-events: none; }
.cul-ring::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cul-ring::after { content: ""; position: absolute; inset: -5px; border-radius: 24px; padding: 9px; background: conic-gradient(from var(--ha), #8766ff, #ff78cc, #ffb370, #5c9eff, #8766ff); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: blur(9px); animation: cu-turn 3.2s linear infinite, cul-breathe 2.4s ease-in-out infinite; }
.cul[data-app="brisa"] .cul-ring { border-radius: 31px; }
.cul[data-app="brisa"] .cul-ring::after { border-radius: 36px; }
.cul[data-app="noma"] .cul-ring { border-radius: 17px; }
@keyframes cul-breathe { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
.cul-tail { left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #7a5cff, #ff5fb0); opacity: 0; pointer-events: none; }
.cul-rip { left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; background: rgba(22, 20, 29, .42); opacity: 0; pointer-events: none; }
.cul-rip.pip { background: radial-gradient(circle, rgba(255, 95, 176, .25) 30%, rgba(122, 92, 255, .7) 72%); }
/* the phone shape (and a tablet upright): the product above, the bar on its edge, Pip and its words under it */
.cul.tall { max-width: 520px; }
.cul.tall .cul-win { left: 8px; top: 8px; width: 424px; height: 590px; border-radius: 18px; }
.cul.tall .cul-scan { left: 8px; top: 44px; width: 424px; height: 554px; border-radius: 0 0 18px 18px; }
.cul.tall .cul-glow { left: 30px; top: 590px; width: 380px; height: 70px; }
.cul.tall .cul-dock { left: 34px; top: 570px; width: 372px; height: 52px; }
.cul.tall .cul-say { left: 16px; top: 654px; max-width: 408px; font-size: 15px; }
.cul.tall .cul-clock { display: none; }
.cul.tall .cul-sc > .cul-cur svg { width: 30px; height: 30px; }
.cul.tall .cul-sc > .cul-cur b { left: 20px; top: 24px; padding: 5px 9px 6px; font-size: 12px; }
.cul.tall .cul-cur em { left: 20px; top: 50px; font-size: 12px; padding: 5px 9px 6px; }
/* under the picture: the four beats every product is played in, and who it is about */
.cul-rail { position: relative; z-index: 2; max-width: 1032px; margin: clamp(10px, 1.4vw, 18px) auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cul-rail button { appearance: none; width: 100%; height: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .46); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink-2); font: 600 13.5px/1.2 var(--display); font-stretch: 108%; text-align: left; cursor: pointer; transition: background-color .3s, color .3s, box-shadow .3s; }
.cul-rail button:hover { background: rgba(255, 255, 255, .72); }
.cul-rail button i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .9); color: var(--ink-3); font: 600 12px/1 var(--body); font-style: normal; transition: background-color .3s, color .3s; }
.cul-rail button.on { background: #fff; color: var(--ink); box-shadow: 0 14px 30px -18px rgba(58, 36, 130, .6); }
.cul-rail button.on i { background: var(--ai); color: #fff; }
.cul-rail button.done i { background: var(--ok); color: #fff; }
.cul-note { position: relative; z-index: 2; margin: 12px auto 0; min-height: 22px; font: 500 13.5px/1.4 var(--body); color: rgba(22, 20, 29, .62); text-align: center; text-wrap: balance; }
.cul:not(.cul-on) ~ .cul-rail, .cul:not(.cul-on) ~ .cul-note { display: none; }
@media (max-width: 760px) {
  .cul-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 584px; }
  .cul-rail button { font-size: 12.5px; padding: 9px 10px 9px 8px; gap: 8px; }
  .cul-orb { opacity: .5; }
  .cul-tabs > span, .cul-tabs button em { display: none; }
  .cul-tabs button { height: 36px; padding: 0 12px 0 9px; font-size: 13.5px; gap: 6px; }
}
/* on the narrowest phones the word "Example" takes its own line over the three products: it always shows */
@media (max-width: 400px) {
  .cul-tabs { flex-wrap: wrap; justify-content: center; row-gap: 0; border-radius: 24px; }
  .cul-tabs > b { flex: 1 1 100%; padding: 6px 0 4px; background: none; text-align: center; }
  .cul-tabs button { padding: 0 10px 0 8px; }
}
@keyframes cu-wave { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .cul-orb, .cul-ring::after, .cul-say .dots i, .cul-say.speaking .cul-ear i, .cul-dock .cul-wave i, .cul-dock.typing .tx::after { animation: none; } }

/* ============================================================== any question, by voice or by message: two cards and three facts */
.cuq-stage { max-width: 1184px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cuq-card { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 26px 28px 30px; border-radius: 28px; text-align: left; font: 400 15.5px/1.5 var(--body); color: var(--ink); }
.cuq-mode { margin: 0 0 4px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--display); font-stretch: 112%; letter-spacing: .07em; text-transform: uppercase; color: var(--ai-ink); }
.cuq-mode svg { width: 17px; height: 17px; }
.cuq-voice { align-items: center; text-align: center; color: #fff; background: radial-gradient(60% 90% at 100% 100%, rgba(255, 107, 74, .32), transparent 70%), radial-gradient(70% 90% at 0% 0%, rgba(122, 92, 255, .6), transparent 70%), var(--navy); }
.cuq-voice .cuq-mode { color: #cabdff; }
/* the voice itself: a wide wave. It is coral while the customer speaks and takes Pip's colours while Pip answers (js/cu/voice.js) */
.cuq-big { width: min(100%, 360px); height: 108px; margin: 6px 0 4px; display: flex; align-items: center; justify-content: center; gap: clamp(3px, .5vw, 6px); }
.cuq-big i { flex: 1 1 0; max-width: 6px; height: 100%; border-radius: 3px; background: linear-gradient(180deg, #b9a2ff, #ff85c7); transform: scaleY(var(--s)); animation: cuq-say 1.15s ease-in-out infinite; transition: background-color .5s; }
.cuq-big i:nth-child(3n) { animation-delay: -.3s; }
.cuq-big i:nth-child(3n + 1) { animation-delay: -.62s; }
.cuq-big i:nth-child(4n) { animation-delay: -.9s; }
.cuq-big i:nth-child(5n) { animation-delay: -.45s; }
.cuq-voice[data-turn="you"] .cuq-big i { background: linear-gradient(180deg, #ffb39f, #ff6b4a); }
@keyframes cuq-say { 0%, 100% { transform: scaleY(calc(var(--s) * .3)); } 50% { transform: scaleY(var(--s)); } }
.cuq-voice .cuq-line { transition: opacity .5s; }
.cuq-voice[data-turn="you"] .cuq-line.pip, .cuq-voice[data-turn="pip"] .cuq-line.you { opacity: .5; }
.cuq-line { margin: 0; max-width: 30ch; text-wrap: balance; }
.cuq-line.you { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 7px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 14.5px; color: rgba(255, 255, 255, .86); }
.cuq-line.pip { font: 500 clamp(20px, 1.9vw, 27px)/1.22 var(--display); font-stretch: 110%; letter-spacing: -.02em; }
.cuq-ctl { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 14px; }
.cuq-take { height: 44px; display: inline-flex; align-items: center; padding: 0 20px; border-radius: 999px; background: #fff; color: var(--navy); font: 600 14.5px/1 var(--display); font-stretch: 108%; }
.cuq-wave { display: inline-flex; align-items: center; gap: 3px; height: 28px; }
.cuq-wave i { flex: none; width: 3px; height: 100%; border-radius: 2px; background: var(--coral); transform: scaleY(.25); animation: cu-wave 1.1s ease-in-out infinite; }
.cuq-wave i:nth-child(3n) { animation-delay: -.25s; }
.cuq-wave i:nth-child(3n + 1) { animation-delay: -.6s; }
.cuq-wave i:nth-child(4n) { animation-delay: -.85s; }
.cuq-wave i:nth-child(5n) { animation-delay: -.4s; }
.cuq-chat { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.cuq-chat .cu-m .cu-b { flex: 0 1 auto; padding: 11px 14px; border-radius: 6px 18px 18px 18px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 10px 24px -18px rgba(58, 36, 130, .5); }
.cuq-tom { align-self: flex-start; margin-left: 40px; display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px 12px 12px; box-shadow: 0 0 0 1.5px rgba(31, 157, 99, .4), 0 10px 24px -18px rgba(20, 90, 60, .5); }
.cuq-tom .fc { width: 36px; height: 36px; }
.cuq-tom b { font-weight: 600; font-size: 13.5px; }
.cuq-tom p { margin: 1px 0 0; }
.cuq-chat .cu-added { margin-left: 46px; }
.cu-facts { max-width: 1184px; margin: clamp(22px, 3.4vh, 38px) auto 0; padding: 0 var(--gutter); list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.cu-facts li { display: grid; gap: 4px; align-content: start; padding-left: 18px; border-left: 2px solid var(--ai-3); font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.cu-facts b { font: 600 17.5px/1.2 var(--display); font-stretch: 110%; letter-spacing: -.015em; color: var(--ink); }
@media (max-width: 900px) {
  .cuq-stage, .cu-facts { grid-template-columns: minmax(0, 1fr); max-width: 584px; }
  .cuq-card { padding: 22px 20px 24px; border-radius: 24px; }
}

/* ============================================================== the layers: the product taken apart, pinned while the page scrolls */
.cuy { position: relative; margin-top: clamp(70px, 11vh, 130px); }
.cuy.live { height: 340vh; }
.cuy-pin { display: grid; gap: clamp(18px, 3vh, 34px); padding: 20px 0; }
.cuy.live .cuy-pin { position: sticky; top: 0; height: 100vh; height: 100svh; grid-template-rows: auto minmax(0, 1fr) auto; padding: calc(var(--nav-h) + clamp(12px, 3vh, 34px)) 0 clamp(14px, 3vh, 30px); overflow: hidden; }
.cuy .d2 { max-width: none; font-size: clamp(27px, 3vw, 48px); }
.cuy .kicker { margin-bottom: 12px; }
.cuy-wrap { width: 100%; max-width: 1320px; min-height: 0; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 56px); align-items: center; }
.cuy-stage { position: relative; width: 100%; max-width: min(800px, 96vh); margin: 0 auto; perspective: 2400px; perspective-origin: 50% 40%; }
.cuy-iso { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.cuy-sc { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform-style: preserve-3d; }
.cuy-l { position: absolute; inset: 0; transition: opacity .45s; will-change: transform, opacity; }
.cuy-l:not(.l1) { pointer-events: none; }
.cuy-l:not(.l1)::before { content: ""; position: absolute; inset: 0; border-radius: 20px; background: rgba(240, 236, 255, .3); box-shadow: inset 0 0 0 1.5px rgba(122, 92, 255, .3); opacity: var(--open, 1); transition: background-color .4s, box-shadow .4s; }
.cuy-l.on:not(.l1)::before { background: rgba(246, 243, 255, .82); box-shadow: inset 0 0 0 3px var(--ai), 0 0 80px -10px rgba(122, 92, 255, .7); }
.cuy-win { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(22, 20, 29, .08), 0 50px 90px -50px rgba(40, 24, 110, .5); transition: box-shadow .4s; }
.cuy-l.on .cuy-win { box-shadow: 0 0 0 3px var(--ai), 0 50px 90px -50px rgba(40, 24, 110, .5); }
.cuy-win .cua, .cuy-win .cua * { transition: none !important; }
.cuy-see { position: absolute; border-radius: 12px; background: rgba(122, 92, 255, .1); box-shadow: 0 0 0 2px var(--ai); }
.cuy-see b { position: absolute; left: -2px; bottom: calc(100% + 4px); padding: 4px 8px; border-radius: 6px; background: var(--ai); color: #fff; font: 600 13.5px/1 var(--mono); white-space: nowrap; }
.cuy-note { position: absolute; width: 320px; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 12px 12px; border-radius: 6px 18px 18px 18px; background: #fff; box-shadow: 0 0 0 1px rgba(22, 20, 29, .06), 0 20px 40px -20px rgba(58, 36, 130, .55); font: 500 17.5px/1.35 var(--body); color: var(--ink); text-align: left; }
.cuy-note .src { font-size: 13.5px; padding: 6px 10px 6px 8px; }
.cuy-note .fc { width: 44px; height: 44px; }
.cuy-note p { margin: 0 0 8px; }
.cuy-way { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cuy-way path { fill: none; stroke: var(--ai); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 14; }
.cuy-way circle { fill: var(--ai); }
.cuy-ring { position: absolute; border-radius: 19px; box-shadow: 0 0 0 3px var(--ai), 0 0 0 9px rgba(122, 92, 255, .22); }
.cuy-say { position: absolute; display: flex; align-items: center; gap: 10px; padding: 9px 20px 9px 9px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(22, 20, 29, .06), 0 20px 40px -20px rgba(58, 36, 130, .6); font: 500 20px/1.3 var(--body); color: var(--ink); white-space: nowrap; }
.cuy-say .cu-who { height: 36px; min-width: 0; padding: 0 14px; border-radius: 999px; font-size: 17px; }
.cuy-say p { margin: 0; }
.cuy-say p b { color: var(--ai-ink); }
.cuy-side { min-width: 0; display: grid; gap: 12px; }
.cuy-side .cu-lab { margin-left: 4px; }
.cuy-legend { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; text-align: left; }
.cuy-legend li { position: relative; display: grid; gap: 4px; padding: 14px 16px 15px 54px; border-radius: 18px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .4s, box-shadow .4s, opacity .4s, transform .6s var(--soft); }
.cuy-legend li::before { position: absolute; left: 14px; top: 13px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px var(--line-2); font: 600 13px/1 var(--display); color: var(--ink-3); transition: background-color .4s, color .4s; }
.cuy-legend li:nth-child(1)::before { content: "1"; } .cuy-legend li:nth-child(2)::before { content: "2"; } .cuy-legend li:nth-child(3)::before { content: "3"; } .cuy-legend li:nth-child(4)::before { content: "4"; }
.cuy-legend b { font: 600 17px/1.2 var(--display); font-stretch: 110%; letter-spacing: -.015em; }
.cuy-legend span { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.cuy.live .cuy-legend li { opacity: .5; }
.cuy.live .cuy-legend li.on, .cuy.live .cuy-legend li.done { opacity: 1; }
.cuy-legend li.on { background: #fff; box-shadow: 0 0 0 1.5px rgba(122, 92, 255, .5), 0 22px 40px -26px rgba(58, 36, 130, .6); transform: translateX(-8px); }
.cuy-legend li.on::before { background: var(--ai); color: #fff; box-shadow: none; }
.cuy-sum { margin: 0 auto; padding: 0 var(--gutter); text-align: center; font: 500 clamp(16px, 1.5vw, 21px)/1.3 var(--display); font-stretch: 108%; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .7s var(--soft); }
.cuy-sum.on, .cuy:not(.live) .cuy-sum { opacity: 1; transform: none; }
/* without the pin (reduced motion, a still picture) the sheets stand apart, and take the room they need */
.cuy:not(.live) .cuy-wrap { padding-top: clamp(30px, 5vw, 70px); padding-bottom: clamp(50px, 9vw, 130px); }
@media (max-width: 900px) {
  .cuy-wrap { grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: center; }
  .cuy-stage { max-width: min(560px, 62vh); }
  .cuy-stage.tall { max-width: min(250px, 34vh); }
  .cuy-side { max-width: 560px; width: 100%; margin: 0 auto; }
  .cuy-side .cu-lab { text-align: center; margin: 0; }
  .cuy.live .cuy-legend { min-height: 104px; align-content: start; }
  .cuy.live .cuy-legend li { display: none; }
  .cuy.live .cuy-legend li.on { display: grid; transform: none; }
  .cuy-legend li { padding: 12px 14px 13px 50px; }
  .cuy-legend b { font-size: 16px; }
  .cuy-legend span { font-size: 14px; }
}

/* ============================================================== a fragment of a product screen, with one button being shown (used by "Show", in Teach Pip once) */
.cuw-frag { position: relative; border-radius: 18px; background: #fff; box-shadow: var(--shadow-card); font: 400 14px/1.35 var(--body); color: #0f1f1c; text-align: left; }
.cuw-fh { display: flex; align-items: center; gap: 8px; height: 68px; padding: 0 14px 0 20px; border-bottom: 1px solid #e4eae8; }
.cuw-fh b { margin-right: auto; font: 600 21px/1 var(--body); letter-spacing: -.025em; }
.cuw-frag .cua-btn, .cur-viz .cua-btn { height: 42px; padding: 0 17px; border-radius: 14px; font-size: 14.5px; }
.cuw-fb { display: grid; gap: 10px; padding: 16px 20px 20px; }
.cuw-fb i { display: block; height: 34px; border-radius: 11px; background: linear-gradient(90deg, #e9efed 0 34px, transparent 34px 46px, #eef2f1 46px 58%, transparent 58% 78%, #eef2f1 78% 100%); }
.cuw-target { position: relative; }
.cuw-target::after { content: ""; position: absolute; inset: -7px; border-radius: 20px; box-shadow: 0 0 0 3px var(--ai), 0 0 0 9px rgba(122, 92, 255, .22); }
.cuw-frag .cul-cur.you, .cuw-frag .cul-cur.lea { left: auto; right: 74px; top: 40px; }
.cu-rv.in .cuw-frag .cul-cur.you, .cu-rv.in .cuw-frag .cul-cur.lea { animation: cuw-go 6s var(--soft) 1s infinite both; }
.cu-rv.in .cuw-target { animation: cuw-press 6s linear 1s infinite both; }
@keyframes cuw-go { 0%, 14% { transform: translate(-170px, 96px); } 44%, 48% { transform: none; } 50% { transform: scale(.84); } 53%, 100% { transform: none; } }
@keyframes cuw-press { 0%, 49% { transform: none; filter: none; } 50.5% { transform: scale(.95); filter: brightness(.92); } 54%, 100% { transform: none; filter: none; } }

/* ============================================================== the long setup: a road of steps into the distance, through day one */
.cur { position: relative; margin-top: clamp(90px, 14vh, 160px); background: linear-gradient(180deg, #fff, #f3efff 14%, #ece5ff 50%, #f3efff 86%, #fff); }
.cur.live { height: 600vh; }
.cur-pin { position: relative; padding: clamp(60px, 9vh, 110px) 0; }
.cur.live .cur-pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
.cur .head { position: relative; z-index: 3; }
.cur.live .head { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + clamp(10px, 2.6vh, 30px)); }
.cur .d2 { max-width: 24ch; font-size: clamp(27px, 3vw, 48px); }
.cur .kicker { margin-bottom: 12px; }
.cur-big { display: none; }
.cur.live .cur-big { display: block; position: absolute; z-index: 0; left: 50%; top: 58%; margin: 0; translate: -50% -50%; white-space: nowrap; pointer-events: none; font: 400 clamp(76px, 25vw, 430px)/.8 var(--display); font-stretch: 125%; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 1.5px rgba(122, 92, 255, .2); }
.cur-big.tick { animation: cur-tick .7s var(--soft); }
@keyframes cur-tick { from { opacity: 0; transform: translateY(5%) scale(.97); } }
.cur-view { position: relative; }
.cur.live .cur-view { position: absolute; z-index: 1; inset: 0; perspective: 1000px; perspective-origin: 50% 58%; }
.cur-world { margin: clamp(26px, 4vh, 44px) auto 0; padding: 0 var(--gutter); max-width: 760px; list-style: none; display: grid; gap: 14px; }
.cur.live .cur-world { position: absolute; left: 50%; top: 58%; width: 0; height: 0; max-width: none; margin: 0; padding: 0; display: block; transform-style: preserve-3d; will-change: transform; }
.cur-st { position: relative; padding: 20px 22px 22px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-card); text-align: left; font: 400 15px/1.45 var(--body); color: var(--ink); }
.cur.live .cur-st { position: absolute; left: 0; top: 0; width: min(410px, 84vw); backface-visibility: hidden; will-change: transform, opacity; }
.cur.live .cur-st::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 70px; margin-left: -1px; background: linear-gradient(rgba(122, 92, 255, .5), rgba(122, 92, 255, 0)); }
.cur-k { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--ai); color: #fff; font: 600 12px/1 var(--display); font-stretch: 110%; letter-spacing: .02em; white-space: nowrap; }
[data-kind="shown"] .cur-k { background: var(--ai-soft); color: var(--ai-ink); }
[data-kind="asked"] .cur-k { background: var(--coral-soft); color: #c2401f; }
[data-kind="person"] .cur-k { background: var(--ok-soft); color: #147a4a; }
[data-kind="alone"] .cur-k { background: var(--ink); }
.cur-n { position: absolute; right: 22px; top: 25px; font: 500 13px/1 var(--mono); color: var(--ink-3); }
.cur-st h3 { margin: 14px 0 6px; font: 500 clamp(22px, 2vw, 28px)/1.1 var(--display); font-stretch: 114%; letter-spacing: -.03em; text-wrap: balance; }
.cur-st p { margin: 0; color: var(--ink-2); text-wrap: pretty; }
.cur-viz { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 13px/1.3 var(--body); }
.cur-viz .fc { width: 32px; height: 32px; }
.cur-viz.faces .fc { margin-left: -14px; box-shadow: 0 0 0 2.5px #fff; }
.cur-viz.faces .fc:first-child { margin-left: 0; }
.cur-viz.faces em { margin-left: -14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); box-shadow: 0 0 0 2.5px #fff; font: 600 11.5px/1 var(--body); font-style: normal; color: var(--ink-2); }
.cur-viz .cu-added { margin-left: 6px; }
.cur-viz.brand .cua-q { background: #ff6b4a; color: #fff; }
.cur-viz.brand i { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2.5px #fff, 0 0 0 3.5px var(--line-2); }
.cur-viz > span.opt { height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 5px; border-radius: 999px; background: var(--bg-3); font-weight: 600; color: var(--ink-2); }
.cur-viz > span.opt .fc { width: 24px; height: 24px; }
.cur-viz > span.opt.on { background: var(--ai); color: #fff; }
.cur-viz > span.line { width: 100%; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 12px; border-radius: 10px; background: var(--bg-2); color: var(--ink-2); }
.cur-viz > span.line b { color: var(--ink); font-weight: 600; }
.cur-viz > span.line i { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; }
.cur-viz > span.line i svg { width: 10px; height: 10px; }
.cur-viz.say { flex-wrap: nowrap; align-items: flex-start; }
.cur-viz.say p { padding: 10px 14px; border-radius: 6px 16px 16px 16px; background: var(--ok-soft); color: #0f5c38; }
.cur-viz .cua-btn { position: relative; margin: 4px 6px 4px 4px; }
.cur-viz .cua-btn::after { content: ""; position: absolute; inset: -6px; border-radius: 19px; box-shadow: 0 0 0 2.5px var(--ai), 0 0 0 7px rgba(122, 92, 255, .2); }
.cur-viz .ptr { margin-left: 2px; display: inline-flex; align-items: center; gap: 2px; color: var(--ai); font: 600 11.5px/1 var(--body); }
.cur-viz .ptr svg { width: 22px; height: 22px; }
.cur-viz .ptr b { padding: 4px 8px 5px; border-radius: 4px 11px 11px 11px; background: linear-gradient(100deg, #7a5cff, #ff5fb0); color: #fff; }
.cur-end { background: radial-gradient(70% 100% at 100% 100%, rgba(255, 107, 74, .34), transparent 70%), radial-gradient(70% 100% at 0% 0%, rgba(122, 92, 255, .5), transparent 70%), var(--navy); color: #fff; box-shadow: 0 50px 90px -50px rgba(19, 35, 63, .8); }
.cur.live .cur-end { width: min(520px, 88vw); padding: 24px 26px 26px; }
.cur.live .cur-end::after { display: none; }
.cur-end .cur-k { background: #fff; color: var(--navy); }
.cur-end .cur-n { color: rgba(255, 255, 255, .6); }
.cur-end h3 { font-size: clamp(25px, 2.4vw, 34px); }
.cur-end p { color: rgba(255, 255, 255, .78); }
.cur-chart { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 10px; height: 120px; margin: 26px 0 16px; padding-bottom: 22px; }
.cur-chart i { position: relative; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(#fff, rgba(255, 255, 255, .72)); font-style: normal; }
.cur-chart i:last-child { background: linear-gradient(#7df0d2, #19c2a0); }
.cur-chart b { position: absolute; left: 0; right: 0; top: calc(100% + 7px); text-align: center; font: 500 11.5px/1 var(--mono); color: rgba(255, 255, 255, .7); }
.cur-chart em { position: absolute; left: 0; right: 0; bottom: calc(100% + 5px); text-align: center; font: 600 12.5px/1 var(--body); font-style: normal; color: #fff; }
.cur-dot { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; background: #cfc4ff; opacity: 0; transition: background-color .4s; }
.cur-dot.on { background: var(--ai); box-shadow: 0 0 24px 4px rgba(122, 92, 255, .45); }
.cur-dot.head { background: #fff; box-shadow: 0 0 0 6px var(--ai), 0 0 0 16px rgba(255, 133, 199, .5), 0 0 60px 20px rgba(122, 92, 255, .6); }
.cur-hud { display: none; }
.cur.live .cur-hud { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(14px, 2.6vh, 30px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding: 0 var(--gutter); font: 500 13.5px/1 var(--body); color: var(--ink-2); }
.cur-day { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 15px 0 6px; border-radius: 999px; background: var(--ink); color: rgba(255, 255, 255, .72); }
.cur-day b { font: 600 14.5px/1 var(--mono); color: #fff; }
.cur-bar { flex: 0 1 220px; height: 4px; border-radius: 2px; background: rgba(122, 92, 255, .2); overflow: hidden; }
.cur-bar i { display: block; height: 100%; background: var(--ai); transform-origin: 0 50%; transform: scaleX(0); }
.cur-tally { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cur-tally span { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--line); white-space: nowrap; transition: background-color .4s, color .4s; }
.cur-tally b { min-width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); font: 600 12.5px/1 var(--body); color: var(--ink-3); transition: background-color .4s, color .4s; }
.cur-tally span.on { background: #fff; color: var(--ink); }
.cur-tally span.on b { background: var(--ai); color: #fff; }
@media (max-width: 760px) {
  .cur-bar { display: none; }
  .cur-tally span { height: 30px; padding: 0 10px 0 4px; font-size: 12px; }
  .cur-tally b { min-width: 22px; height: 22px; font-size: 11.5px; }
  .cur-day { height: 30px; font-size: 12.5px; }
  .cur.live .cur-st { padding: 18px 18px 20px; }
}

/* ============================================================== teach Pip once: tell, show, and Pip knows; under them the steps shown so far */
.cut-steps { max-width: 1184px; margin: 0 auto; padding: 0 var(--gutter); list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cut-card { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 26px; border-radius: 28px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.cut-card:not(:last-child)::after { content: ""; position: absolute; z-index: 2; right: -25px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-2), 0 8px 18px -10px rgba(58, 36, 130, .5);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%237a5cff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/></svg>") center / 16px no-repeat; }
.cut-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ai); color: #fff; font: 600 15px/1 var(--display); }
.cut-card h3 { margin: 16px 0 6px; font: 500 clamp(26px, 2.5vw, 36px)/1.05 var(--display); font-stretch: 114%; letter-spacing: -.03em; }
.cut-card > p { margin: 0; max-width: 28ch; font-size: 16px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.cut-viz { flex: 1 1 auto; margin-top: 24px; min-height: 196px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; font: 400 15px/1.45 var(--body); color: var(--ink); }
.cut-q { margin: 0; display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 14px 12px; border-radius: 6px 20px 20px 20px; background: #fff; box-shadow: var(--shadow-card); font: 600 17px/1.3 var(--display); font-stretch: 108%; letter-spacing: -.01em; }
.cut-q .fc { width: 34px; height: 34px; background: var(--ai-soft); }
.cut-voice { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 20px 0 10px; border-radius: 30px; background: var(--ink); color: #fff; font-size: 13.5px; white-space: nowrap; }
.cut-voice .fc { width: 40px; height: 40px; box-shadow: 0 0 0 2px var(--coral); }
.cut-voice .cuq-wave { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.cut-voice em { font-style: normal; color: rgba(255, 255, 255, .75); }
.cut-rec { position: absolute; left: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 12px/1 var(--body); font-style: normal; }
.cut-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); animation: pulse 1s ease-in-out infinite; }
.cut-show .cuw-fb { padding-bottom: 52px; }
.cut-knows { flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-end; gap: 10px 12px; }
.cut-count { flex: 1 1 0; display: grid; gap: 2px; padding: 16px 18px 18px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-card); }
.cut-count b { font: 500 58px/1 var(--display); font-stretch: 116%; letter-spacing: -.05em; color: var(--ai-ink); }
.cut-count span { font-size: 14.5px; color: var(--ink-2); }
.cut-by { flex: 1 1 100%; margin: 4px 0 0; display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px/1.2 var(--body); color: var(--ink-2); }
.cut-by .fc { width: 26px; height: 26px; }
.cut-reads { flex: 1 1 100%; margin: 0; font-size: 14px; color: var(--ink-3); }
.cut-reads b { color: var(--ink-2); font-weight: 600; }
.cuw-band { max-width: 1184px; margin: clamp(22px, 3.4vh, 38px) auto 0; padding: 0 var(--gutter); display: grid; gap: 12px; }
.cuw-bandh { margin: 0 0 2px; text-align: center; font: 600 11.5px/1 var(--display); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cuw-mq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.cuw-mqt { display: flex; width: max-content; animation: cuw-mq 60s linear infinite; }
.cuw-mq.rev .cuw-mqt { animation-direction: reverse; }
.cuw-mq:hover .cuw-mqt { animation-play-state: paused; }
@keyframes cuw-mq { to { transform: translateX(-50%); } }
.cuw-mqt span { flex: none; margin-right: 10px; display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 8px 0 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font: 600 14.5px/1 var(--display); font-stretch: 106%; color: var(--ink); white-space: nowrap; }
.cuw-mqt svg { width: 18px; height: 18px; color: var(--ai); }
.cuw-mqt em { height: 30px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: var(--bg-3); font: 500 12px/1 var(--mono); font-style: normal; color: var(--ink-2); }
@media (max-width: 900px) {
  .cut-steps { grid-template-columns: minmax(0, 1fr); max-width: 584px; }
  .cut-card:not(:last-child)::after { right: 50%; top: auto; bottom: -25px; margin: 0 -17px 0 0; transform: rotate(90deg); }
  .cut-viz { min-height: 0; }
}

/* ============================================================== in your product: the light takes a company's colours, the words its tone */
.cum-stage { --h1: #12b594; --h2: #6be6c7; --h3: #4dd6eb; --h4: #339efa; max-width: 1184px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; }
.cum-stage[data-look="sun"] { --h1: #ff5c7a; --h2: #ff9966; --h3: #ffd15c; --h4: #ff80b3; }
.cum-stage[data-look="ink"] { --h1: #707aff; --h2: #ad85ff; --h3: #61d1ff; --h4: #859eff; }
.cum-stage[data-look="pip"] { --h1: #8766ff; --h2: #ff78cc; --h3: #ffb370; --h4: #5c9eff; }
.cum-pip { position: relative; min-height: 440px; border-radius: 28px; overflow: hidden; display: grid; place-items: center; color: var(--ink); background: radial-gradient(70% 100% at 0% 100%, #fff1c2, transparent 70%), radial-gradient(70% 100% at 100% 0%, #c9f0ff, transparent 70%), #d4f5ea; }
.cum-pip::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.cum-stage[data-look="sun"] .cum-pip::before { opacity: 1; background: radial-gradient(70% 100% at 0% 100%, #ffd0de, transparent 70%), radial-gradient(70% 100% at 100% 0%, #fff0c4, transparent 70%), #ffe3d6; }
.cum-stage[data-look="ink"] .cum-pip::before { opacity: 1; background: radial-gradient(70% 100% at 0% 100%, rgba(122, 92, 255, .55), transparent 70%), radial-gradient(70% 100% at 100% 0%, rgba(77, 141, 255, .5), transparent 70%), #14183f; }
.cum-stage[data-look="pip"] .cum-pip::before { opacity: 1; background: radial-gradient(70% 100% at 0% 100%, #ffd9e8, transparent 70%), radial-gradient(70% 100% at 100% 0%, #d3e8ff, transparent 70%), #e9e2ff; }
.cum-stage[data-look="ink"] .cum-pip { color: #fff; }
.cum-demo { position: relative; margin-bottom: 70px; }
.cum-target { position: relative; display: inline-flex; align-items: center; height: 78px; padding: 0 40px; border-radius: 24px; background: linear-gradient(135deg, var(--h1), var(--h4)); color: #fff; box-shadow: 0 26px 44px -22px var(--h1), inset 0 1px 0 rgba(255, 255, 255, .35); font: 600 25px/1 var(--display); font-stretch: 110%; letter-spacing: -.01em; white-space: nowrap; transition: box-shadow .6s; }
.cum-target::after { content: ""; position: absolute; inset: -11px; border-radius: 34px; padding: 4px; background: conic-gradient(from var(--ha), var(--h1), var(--h2), var(--h3), var(--h4), var(--h1)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: cu-turn 3.2s linear infinite; }
.cum-target::before { content: ""; position: absolute; inset: -18px; border-radius: 40px; padding: 12px; background: conic-gradient(from var(--ha), var(--h1), var(--h2), var(--h3), var(--h4), var(--h1)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: blur(12px); opacity: .7; animation: cu-turn 3.2s linear infinite; }
.cum-cur { left: 22px; top: calc(100% + 2px); animation: cum-nudge 2.6s var(--soft) infinite; }
.cum-cur svg { left: -9px; top: -5px; width: 50px; height: 50px; filter: drop-shadow(0 6px 10px rgba(22, 20, 29, .28)); }
.cum-lab { position: absolute; left: 34px; top: 40px; display: flex; align-items: center; gap: 7px; }
.cum-lab b, .cum-lab em { position: static; padding: 8px 14px 9px; font-size: 16px; }
.cum-lab b { border-radius: 5px 16px 16px 16px; background: linear-gradient(100deg, var(--h1), var(--h4)); }
.cum-lab em { border-radius: 16px; color: var(--ink); opacity: 1; transform: none; box-shadow: 0 0 0 1px rgba(22, 20, 29, .08), 0 10px 20px -10px rgba(22, 20, 29, .4); }
@keyframes cum-nudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-4px, 4px); } }
.cum-name { position: absolute; left: 26px; right: 26px; bottom: 22px; margin: 0; display: grid; gap: 4px; text-align: left; }
.cum-name b { font: 500 clamp(30px, 3vw, 44px)/1 var(--display); font-stretch: 118%; letter-spacing: -.04em; }
.cum-name span { font-size: 15px; opacity: .7; }
.cum-panel { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 28px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.cum-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cum-opts button { appearance: none; height: 46px; display: inline-flex; align-items: center; gap: 9px; padding: 0 18px 0 8px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font: 600 14.5px/1 var(--display); font-stretch: 108%; color: var(--ink); cursor: pointer; transition: box-shadow .3s, background-color .3s, color .3s; }
.cum-opts[data-k="tone"] button { padding: 0 20px; }
.cum-opts button i { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(22, 20, 29, .1); }
.cum-opts button:hover { box-shadow: inset 0 0 0 1px var(--ai-2), 0 0 0 4px var(--ai-soft); }
.cum-opts button.on { background: var(--ink); color: #fff; box-shadow: none; }
.cum-talk { margin-top: 4px; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-card); font: 400 15.5px/1.5 var(--body); color: var(--ink); }
.cum-say { min-height: 3em; transition: opacity .22s; }
.cum-say.swap { opacity: 0; }
.cum-also { margin: auto 0 0; padding-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
@media (max-width: 900px) {
  .cum-stage { grid-template-columns: minmax(0, 1fr); max-width: 584px; }
  .cum-pip { min-height: 340px; }
  .cum-panel { padding: 22px 20px; }
}

/* ============================================================== their AI agents: onboarded with nothing to click */
.cuh { position: relative; margin-top: clamp(90px, 14vh, 160px); padding: clamp(70px, 11vh, 120px) 0 clamp(76px, 12vh, 130px); background: var(--bg-2); }
.cuh .head { margin-bottom: clamp(30px, 5vh, 54px); }
.cuh .d2 { max-width: 28ch; font-size: clamp(30px, 3.4vw, 54px); }
.cuh-stage { position: relative; width: calc(100% - 2 * var(--gutter)); max-width: 1056px; margin: 0 auto; padding: 212px clamp(18px, 4vw, 56px) 40px; border-radius: 32px; overflow: hidden; color: #fff; text-align: left;
  background: radial-gradient(60% 80% at 100% 100%, rgba(255, 107, 74, .26), transparent 70%), radial-gradient(60% 80% at 0% 0%, rgba(77, 141, 255, .45), transparent 70%), radial-gradient(50% 70% at 100% 0%, rgba(122, 92, 255, .55), transparent 70%), var(--navy); }
.cuh-top { position: absolute; left: 0; right: 0; top: 52px; height: 92px; display: flex; align-items: center; gap: 22px; padding: 0 clamp(18px, 4vw, 56px); }
/* the two agents: a plain tile each (a terminal for the customer's, the pointer for Pip); the one that speaks lights up */
.cuh-agent { position: relative; flex: none; width: 92px; height: 92px; border-radius: 28px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #4d8fff, #2f5fe0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 24px 40px -22px rgba(77, 141, 255, .9); transition: transform .5s var(--soft), box-shadow .4s; }
.cuh-agent[data-who="pip"] { background: linear-gradient(140deg, #7a5cff, #ff5fb0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 24px 40px -22px rgba(255, 95, 176, .9); }
.cuh-agent svg { width: 44px; height: 44px; }
.cuh-agent[data-who="pip"] svg { width: 46px; height: 46px; margin: 4px 0 0 4px; }
.cuh-agent::after { content: ""; position: absolute; inset: -9px; border-radius: 36px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), 0 0 30px 4px rgba(155, 190, 255, .6); opacity: 0; transform: scale(.94); transition: opacity .35s, transform .5s var(--soft); }
.cuh-agent.on { transform: scale(1.06); }
.cuh-agent.on::after { opacity: 1; transform: none; }
.cuh-beads { position: relative; flex: 1 1 auto; height: 90px; }
.cuh-beads i { position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #cfe0ff; box-shadow: 0 0 14px 3px rgba(155, 190, 255, .7); opacity: 0; will-change: transform, opacity; }
.cuh-who { position: absolute; top: 158px; margin: 0; display: grid; gap: 4px; font-size: 13px; color: rgba(255, 255, 255, .66); }
.cuh-who b { font: 600 15px/1 var(--display); font-stretch: 110%; color: #fff; }
.cuh-who.g { left: clamp(18px, 4vw, 56px); }
.cuh-who.p { right: clamp(18px, 4vw, 56px); text-align: right; }
.cuh-ex { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); }
.cuh-log { margin: 0 auto; padding: 0; max-width: 660px; list-style: none; display: flex; flex-direction: column; gap: 10px; font: 400 15.5px/1.45 var(--body); }
.cuh-log li { max-width: 84%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px; border-radius: 18px; }
.cuh-stage.live .cuh-log li { opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .6s var(--soft); }
.cuh-stage.live .cuh-log li.on { opacity: 1; transform: none; }
.cuh-log p { margin: 0; }
.cuh-log [data-from="guest"] { align-self: flex-start; border-bottom-left-radius: 6px; background: rgba(120, 176, 255, .2); box-shadow: inset 0 0 0 1px rgba(155, 208, 255, .35); }
.cuh-log [data-from="pip"] { align-self: flex-end; border-bottom-right-radius: 6px; background: #fff; color: var(--ink); }
.cuh-log .act { align-self: center; max-width: 100%; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); font-size: 14.5px; }
.cuh-log .act code { padding: 6px 10px; border-radius: 999px; background: rgba(155, 208, 255, .22); color: #d6e9ff; font: 600 12.5px/1 var(--mono); }
.cuh-log .act::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5 10 17.5 19 7'/></svg>") center / 12px no-repeat; }
.cuh-log .yes em { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 4px; border-radius: 999px; background: var(--ok-soft); color: #147a4a; font: 600 12.5px/1 var(--body); font-style: normal; }
.cuh-log .yes em .fc { width: 22px; height: 22px; }
.cuh-stage.live .cuh-log .yes em { opacity: 0; transform: scale(.9); transition: opacity .35s, transform .5s var(--soft); }
.cuh-stage.live .cuh-log .yes.ok em { opacity: 1; transform: none; }
@media (max-width: 700px) {
  .cuh-stage { padding-top: 204px; border-radius: 26px; }
  .cuh-top { top: 56px; height: 76px; gap: 14px; }
  .cuh-agent { width: 76px; height: 76px; border-radius: 24px; }
  .cuh-agent svg { width: 36px; height: 36px; }
  .cuh-who { top: 146px; font-size: 12px; }
  .cuh-who b { font-size: 13.5px; }
  .cuh-log li { max-width: 94%; }
}

/* ============================================================== Pip's name, where a face would stand beside its words: the same tag its pointer carries */
.cu-who { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 24px; min-width: 36px; padding: 0 9px; border-radius: 4px 12px 12px 12px; background: linear-gradient(100deg, #7a5cff, #ff5fb0); color: #fff; font: 600 12px/1 var(--body); letter-spacing: 0; white-space: nowrap; }
.cu-m > .cu-who { margin-top: 4px; }
.cut-q > .cu-who { margin-top: 1px; }
.cum-who { background: linear-gradient(100deg, var(--h1), var(--h4)); transition: background-color .5s; }
/* the ring round each place Pip shows: its colours turn */
@property --ha { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes cu-turn { to { --ha: 360deg; } }
.cul-ring::before, .cuy-ring, .cuw-target::after, .cur-viz .cua-btn::after { padding: 3px; background: conic-gradient(from var(--ha), #8766ff, #ff78cc, #ffb370, #5c9eff, #8766ff); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: cu-turn 3.2s linear infinite; }
.cuy-ring, .cuw-target::after, .cur-viz .cua-btn::after { box-shadow: none; }

/* ============================================================== the page's own gestures */
/* the bar names the part of the page on screen (js/cu/main.js) */
.cu-nav .nav-links a { position: relative; }
.cu-nav .nav-links a::after { content: ""; position: absolute; left: 50%; top: calc(100% + 7px); width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--ai); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .5s var(--soft); }
.cu-nav .nav-links a.on { color: var(--ink); }
.cu-nav .nav-links a.on::after { opacity: 1; transform: none; }
/* the page arrives: the line settles from wide to its own width, the words and the field rise after it */
@media (prefers-reduced-motion: no-preference) {
  html:not(.cu-still) .cu-hero .h-copy > * { animation: cu-rise 1s var(--soft) both; }
  html:not(.cu-still) .cu-hero .h-copy > .d1 { animation: cu-rise-h 1.25s var(--soft) both; }
  html:not(.cu-still) .cu-hero .h-copy > .sub { animation-delay: .14s; }
  html:not(.cu-still) .cu-hero .h-copy > .cu-form { animation-delay: .26s; }
}
@keyframes cu-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes cu-rise-h { from { opacity: 0; transform: translateY(18px); font-stretch: 125%; filter: blur(6px); } }
/* a soft light follows the pointer over the field (js/cu/main.js sets --sx and --sy) */
.cu-field::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s; background: radial-gradient(560px circle at var(--sx, 50%) var(--sy, 30%), rgba(255, 255, 255, .5), transparent 62%); }
.cu-field.lit::before { opacity: 1; }
/* a card leans to the pointer (js/cu/main.js sets --rx and --ry) */
@media (hover: hover) { .cut-card, .cuq-card { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--soft), box-shadow .4s; will-change: transform; } }
/* the first screen: a little less air above, so Pip and the product show before any scroll */
.cu-hero { padding-top: calc(var(--nav-h) + clamp(14px, 3vh, 36px)); }
.cu-hero .h-copy .d1 { font-size: clamp(36px, 4.1vw, 66px); }
.cu-hero .h-copy .sub { max-width: 60ch; }
.cu-hero .h-field { margin-top: clamp(16px, 2.4vh, 28px); }
.cu-hero .cu-field { padding-top: clamp(12px, 1.4vw, 20px); }
.cu-hero .cu-cap { margin-bottom: clamp(6px, .8vw, 12px); }
@media (prefers-reduced-motion: reduce) {
  .cu-rv.in .cuw-frag .cul-cur, .cu-rv.in .cuw-target, .cur-big.tick, .cuw-mqt, .cuq-wave i, .cut-rec i, .cuq-big i, .cum-cur, .cum-target::before, .cum-target::after, .cul-ring::before, .cul-ring::after, .cuy-ring, .cuw-target::after, .cur-viz .cua-btn::after { animation: none; }
  .cuw-mq { overflow-x: auto; }
}