/* =====================================================================
   assets/product-ui.css · RIVET product UI surfaces (reset Round 1, lane product, 3 Nov 2026)
   One kit for every product moment on the site: K6 dashboard frame, K7 AI + human hand-off,
   K12a "Find your next move", the home goal switch, the seat-driven team preview, the team room frame.
   Spec: .research/reset/rebuild_brief.md (2.2 colour meaning, 2.3 motion, 3 K4-K7, K12) and
   .research/reset/product_ui.md (S13 S15 S16 S19 S21 S24, F1-F8, M1-M5). Partials: partials/sections/ui-*.html.
   Needs, loaded before it: brand-tokens.css (tokens, data-mode), device.css (the black iPhone 18 Pro frame).
   Colour meaning: cyan = the agent works (AI) · gold = the person · Bright = both together ·
   magenta = the human decision (one action) + one insight. Product primary: purple on light, cyan on dark.
   Product UI headings: Plex Sans SemiBold, sentence case, under a Mono eyebrow (BRAND typography).
   ===================================================================== */

.pui{
  --pui-primary:var(--purple,#3B06D4); --pui-on-primary:#fff;
  --pui-ink:#000; --pui-muted:var(--slate,#4A4A68); --pui-faint:#727293;
  --pui-win:#fff; --pui-side:var(--ghost-white,#F8F8FA); --pui-card:#fff; --pui-sunk:var(--ghost-white,#F8F8FA);
  --pui-line:#E8E8EE; --pui-line-2:#D1D1D9;
  --pui-up:var(--green-600,#00864F); --pui-ai:var(--cyan-600,#00828A); --pui-ai-fill:var(--cyan,#4CF3FE);
  --pui-human:var(--gold-600,#956F00); --pui-human-fill:var(--gold,#F5C24B);
  --pui-track:#ECECF2; --pui-ctx:var(--dv-6,#8F8FB1); --pui-series:var(--dv-1,#3B06D4);
  --pui-insight:var(--magenta,#FF00D4);
  --pui-zone-a:var(--dv-1,#3B06D4); --pui-zone-w:#000; --pui-zone-x:var(--green-500,#00A763);
  --pui-shadow:0 1px 2px rgba(0,0,0,.06), 0 18px 48px -18px rgba(20,16,60,.22);
  font-family:var(--font-sans,"IBM Plex Sans",system-ui,sans-serif); color:var(--pui-ink);
  -webkit-font-smoothing:antialiased; text-align:start;
}
.pui[data-mode="dark"]{
  --pui-primary:var(--cyan,#4CF3FE); --pui-on-primary:#000;
  --pui-ink:#fff; --pui-muted:#9A9BBD; --pui-faint:#8F8FB1;
  --pui-win:#000; --pui-side:#0A0A0C; --pui-card:#0A0A0C; --pui-sunk:#12121A;
  --pui-line:#1E1E2A; --pui-line-2:#2A2A38;
  --pui-up:var(--green,#00D982); --pui-ai:var(--cyan,#4CF3FE); --pui-human:var(--gold,#F5C24B);
  --pui-track:#1E1E2A; --pui-ctx:#5E5F7E; --pui-series:#7B87FF;
  --pui-shadow:0 30px 80px -30px rgba(0,0,0,.8);
  --pui-zone-a:#7B87FF; --pui-zone-w:#fff; --pui-zone-x:var(--green,#00D982);
}
.pui *, .pui *::before, .pui *::after{ box-sizing:border-box; }
.pui :where(h1,h2,h3,h4,p,ul,ol,figure,dl,dd){ margin:0; }
.pui :where(ul,ol){ padding:0; list-style:none; }
.pui :where(button){ font:inherit; color:inherit; }
.pui :focus-visible{ outline:3px solid var(--focus-ring,#3B06D4); outline-offset:2px; border-radius:6px; }
.pui[data-mode="dark"] :focus-visible{ outline-color:#7B87FF; }
.pui-num{ font-family:var(--font-mono,"IBM Plex Mono",monospace); font-variant-numeric:tabular-nums; letter-spacing:0; }
.pui-sr{ position:absolute!important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.pui svg.i{ width:1em; height:1em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- type roles inside product UI ---------- */
.pui-eyebrow{ font:500 11px/1.3 var(--font-mono,monospace); letter-spacing:.08em; text-transform:uppercase; color:var(--pui-muted); }
.pui-title{ font:600 22px/1.25 var(--font-sans); letter-spacing:-.01em; color:var(--pui-ink); }
.pui-h3{ font:600 15px/1.35 var(--font-sans); color:var(--pui-ink); }
.pui-meta{ font:500 11px/1.3 var(--font-mono,monospace); letter-spacing:.06em; text-transform:uppercase; color:var(--pui-faint); }
.pui-body{ font:400 14px/1.5 var(--font-sans); color:var(--pui-muted); }

/* ---------- status label: honest product status (D16) ---------- */
.pui-status{ display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 10px; border-radius:999px;
  font:500 11px/1 var(--font-mono,monospace); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  color:var(--pui-muted); background:var(--pui-sunk); box-shadow:inset 0 0 0 1px var(--pui-line); }
.pui-status::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--pui-ai-fill); }
.pui-status--soon::before{ background:var(--pui-human-fill); }

/* =====================================================================
   F1 desktop window + K6 dashboard frame (native RIVET "Operate" UI)
   ===================================================================== */
.pui-win{ position:relative; overflow:hidden; border-radius:12px; background:var(--pui-win);
  box-shadow:0 0 0 1px var(--pui-line-2), var(--pui-shadow); }
.pui[data-mode="dark"] .pui-win{ box-shadow:0 0 0 1px var(--pui-line), var(--pui-shadow); }
.pui-bar{ display:flex; align-items:center; gap:12px; height:48px; padding:0 16px; border-bottom:1px solid var(--pui-line); background:var(--pui-win); }
.pui-bar__mark{ width:20px; height:20px; display:block; }
.pui-bar__crumb{ display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; color:var(--pui-muted); white-space:nowrap; }
.pui-bar__crumb b{ font-weight:600; color:var(--pui-ink); overflow:hidden; text-overflow:ellipsis; }
.pui-bar__crumb i{ font-style:normal; color:var(--pui-line-2); }
.pui-bar__end{ margin-inline-start:auto; display:flex; align-items:center; gap:10px; }
.pui-me{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font:600 11px/1 var(--font-sans);
  background:var(--pui-sunk); color:var(--pui-muted); box-shadow:inset 0 0 0 1px var(--pui-line); }

.pui-app{ display:grid; grid-template-columns:196px minmax(0,1fr); min-height:0; }
.pui-side{ background:var(--pui-side); border-inline-end:1px solid var(--pui-line); padding:14px 10px; display:flex; flex-direction:column; gap:2px; }
.pui-side__h{ padding:12px 10px 6px; }
.pui-nav{ display:flex; align-items:center; gap:10px; height:34px; padding:0 10px; border-radius:8px; font-size:13.5px; color:var(--pui-muted); white-space:nowrap; }
.pui-nav svg{ font-size:16px; }
.pui-nav.is-on{ background:var(--pui-card); color:var(--pui-ink); font-weight:600; box-shadow:0 0 0 1px var(--pui-line), 0 1px 2px rgba(0,0,0,.04); }
.pui[data-mode="dark"] .pui-nav.is-on{ background:#12121A; box-shadow:none; }
.pui-nav .pui-nav__n{ margin-inline-start:auto; font:500 11px/1 var(--font-mono); color:var(--pui-faint); }
.pui-main{ padding:22px 24px 24px; min-width:0; display:flex; flex-direction:column; gap:16px; }
.pui-head{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.pui-head__t{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.pui-head__end{ margin-inline-start:auto; display:flex; gap:8px; align-items:center; }
.pui-seg{ display:inline-flex; padding:3px; border-radius:8px; background:var(--pui-sunk); box-shadow:inset 0 0 0 1px var(--pui-line); }
.pui-seg span{ height:26px; padding:0 10px; display:grid; place-items:center; border-radius:6px; font:500 12px/1 var(--font-sans); color:var(--pui-muted); white-space:nowrap; }
.pui-seg span.is-on{ background:var(--pui-card); color:var(--pui-ink); box-shadow:0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--pui-line); }

/* KPI cards: odd specific numbers, "vs previous period"; one drills open */
.pui-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.pui-kpi{ position:relative; display:flex; flex-direction:column; gap:6px; padding:14px 14px 12px; border-radius:10px; text-align:start;
  background:var(--pui-card); box-shadow:0 0 0 1px var(--pui-line); border:0; min-width:0; }
.pui[data-mode="dark"] .pui-kpi{ box-shadow:none; }
.pui-kpi__l{ font:500 11px/1.3 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--pui-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pui-kpi__v{ font:500 28px/1.1 var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--pui-ink); white-space:nowrap; }
.pui-kpi__v small{ font-size:15px; color:var(--pui-muted); letter-spacing:0; margin-inline-start:6px; }
.pui-kpi__d{ font:400 12px/1.35 var(--font-sans); color:var(--pui-muted); }
.pui-kpi__d b{ font:500 12px/1 var(--font-mono); color:var(--pui-up); margin-inline-end:4px; }
.pui-kpi__d b.is-flat{ color:var(--pui-muted); }
.pui-kpi__spark{ position:absolute; inset-inline-end:14px; top:38px; width:56px; height:22px; }
.pui-kpi__spark path{ fill:none; stroke:var(--pui-ctx); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.pui-kpi__spark circle{ fill:var(--pui-series); }
button.pui-kpi{ cursor:pointer; transition:box-shadow var(--dur-instant,120ms) var(--ease-standard,ease), transform var(--dur-instant,120ms) var(--ease-standard,ease); }
button.pui-kpi:hover{ box-shadow:0 0 0 1px var(--pui-primary); }
button.pui-kpi[aria-expanded="true"]{ box-shadow:0 0 0 2px var(--pui-primary); }
.pui-kpi__open{ display:inline-flex; align-items:center; gap:4px; margin-top:2px; font:600 12px/1 var(--font-sans); color:var(--pui-primary); }
.pui:not([data-mode="dark"]) .pui-kpi__open{ color:var(--purple,#3B06D4); }
.pui-kpi__open svg{ font-size:13px; transition:transform var(--dur-quick,200ms) var(--ease-standard,ease); }
button.pui-kpi[aria-expanded="true"] .pui-kpi__open svg{ transform:rotate(180deg); }

/* drill panel: the KPI opens into its rows (Attio "Open the number") */
.pui-drill{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-base,320ms) var(--ease-standard,ease); }
.pui-drill > div{ overflow:hidden; }
.pui-drill.is-open{ grid-template-rows:1fr; }
.pui-drill__in{ margin-top:2px; border-radius:10px; background:var(--pui-sunk); box-shadow:inset 0 0 0 1px var(--pui-line); padding:6px 14px; }
.pui-drill__h{ display:flex; justify-content:space-between; padding:8px 0 6px; }

/* cards, charts, tables */
.pui-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:12px; }
.pui-card{ border-radius:10px; background:var(--pui-card); box-shadow:0 0 0 1px var(--pui-line); padding:14px 16px 16px; min-width:0; }
.pui[data-mode="dark"] .pui-card{ box-shadow:none; }
.pui-card{ container-type:inline-size; }
@container (max-width:330px){ .pui-row{ grid-template-columns:28px minmax(0,1fr) auto; } .pui-row > :nth-child(3){ display:none; } }
@container (max-width:460px){ .pui-bars, .pui-bars-x{ gap:6px; } }
.pui-card__h{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.pui-card__h .pui-meta{ margin-inline-start:auto; }

.pui-bars{ direction:ltr; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; align-items:end; gap:10px; height:150px;
  padding-top:22px; border-bottom:1px solid var(--pui-line); background:linear-gradient(var(--pui-line) 1px, transparent 1px) 0 22px / 100% 32px; }
.pui-bar-c{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.pui-bar-c i{ display:block; height:var(--h); border-radius:4px 4px 0 0; background:var(--pui-ctx); transform-origin:bottom; }
.pui-bar-c.is-series i{ background:var(--pui-series); }
.pui-bar-c.is-insight i{ background:var(--pui-insight); }
.pui-bar-c > b{ position:absolute; bottom:calc(var(--h) + 6px); inset-inline:-20px; text-align:center; font:600 12px/1 var(--font-mono); color:var(--pui-ink); white-space:nowrap; }
.pui-bars-x{ direction:ltr; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:10px; margin-top:6px; }
.pui-bars-x span{ letter-spacing:0; white-space:pre-line; line-height:1.25; }
.pui-bars-x .sh{ display:none; }
.pui-bars-x span{ text-align:center; font:500 10.5px/1.2 var(--font-mono); letter-spacing:.04em; color:var(--pui-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pui-note{ margin-top:12px; display:flex; gap:8px; align-items:flex-start; font:400 13px/1.45 var(--font-sans); color:var(--pui-muted); }
.pui-note::before{ content:""; flex:none; width:8px; height:8px; margin-top:5px; border-radius:2px; background:var(--pui-insight); }
.pui-note b{ color:var(--pui-ink); font-weight:600; }

.pui-rows{ display:flex; flex-direction:column; }
.pui-row{ display:grid; grid-template-columns:28px minmax(0,1.3fr) minmax(0,1fr) 76px; align-items:center; gap:12px; min-height:46px; padding:6px 0; border-top:1px solid var(--pui-line); font-size:13px; }
.pui-row:first-child{ border-top:0; }
.pui-row__who > .pui-pill{ display:inline-flex; margin-bottom:6px; }
.pui-row__who b{ display:block; font-weight:600; color:var(--pui-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pui-row__who > span:not(.pui-pill){ display:block; color:var(--pui-muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pui-row__end{ text-align:end; font:500 12px/1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--pui-ink); }
.pui-ini{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font:600 10.5px/1 var(--font-mono); letter-spacing:.02em;
  background:var(--pui-sunk); color:var(--pui-muted); box-shadow:inset 0 0 0 1px var(--pui-line); }
.pui-ini--ai{ background:var(--cyan-50,#E4FDFF); color:#003135; box-shadow:none; }
.pui[data-mode="dark"] .pui-ini--ai{ background:#002023; color:var(--cyan); }
.pui-prog{ position:relative; height:6px; border-radius:99px; background:var(--pui-track); overflow:hidden; }
.pui-prog i{ position:absolute; inset-block:0; inset-inline-start:0; width:var(--p); border-radius:inherit; background:var(--pui-series); transform-origin:left; }
[dir="rtl"] .pui-prog i{ transform-origin:right; }
.pui-pill{ display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:6px; font:500 11.5px/1 var(--font-sans); white-space:nowrap;
  background:var(--pui-sunk); color:var(--pui-muted); }
.pui-pill--ok{ background:var(--green-50,#E3FFEC); color:var(--green-700,#00663B); }
.pui-pill--ai{ background:var(--cyan-50,#E4FDFF); color:var(--cyan-800,#004A4F); }
.pui-pill--hu{ background:var(--gold-50,#FFF7E8); color:var(--gold-800,#553F00); }
.pui-pill--late{ background:var(--orange-50,#FFF6F2); color:var(--orange-700,#944000); }
.pui[data-mode="dark"] .pui-pill--ok{ background:#00210F; color:var(--green); }
.pui[data-mode="dark"] .pui-pill--ai{ background:#002023; color:var(--cyan); }
.pui[data-mode="dark"] .pui-pill--hu{ background:#271A00; color:var(--gold); }
.pui[data-mode="dark"] .pui-pill--late{ background:#341200; color:var(--orange); }

.pui-feed{ display:flex; flex-direction:column; gap:12px; }
.pui-feed li{ display:grid; grid-template-columns:28px 1fr; gap:10px; font-size:13px; line-height:1.45; color:var(--pui-muted); }
.pui-feed b{ color:var(--pui-ink); font-weight:600; }
.pui-feed time{ display:block; font:500 11px/1.4 var(--font-mono); letter-spacing:.04em; color:var(--pui-faint); }

/* the seat meter (team admin, seat preview) */
.pui-seats{ display:flex; gap:4px; margin-top:4px; }
.pui-seats i{ flex:1; height:8px; border-radius:2px; background:var(--pui-track); }
.pui-seats i.on{ background:var(--pui-series); }

/* =====================================================================
   Islands and stages
   ===================================================================== */
/* Command-dark island: a bounded dark surface on a light page (DS:35; brief 2.2, D5). Anchor black under the window. */
.pui-island{ position:relative; border-radius:24px; padding:clamp(16px,3.4vw,44px); background:linear-gradient(160deg,#000 0 55%,#4CF3FE 140%); isolation:isolate; }
.pui-island::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(rgba(76,243,254,.05) 1px,transparent 1px) 0 0/32px 32px, linear-gradient(90deg,rgba(76,243,254,.05) 1px,transparent 1px) 0 0/32px 32px;
  -webkit-mask:linear-gradient(160deg,transparent 30%,#000 90%); mask:linear-gradient(160deg,transparent 30%,#000 90%); z-index:-1; }
.pui-island__cap{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; color:#fff; }
.pui-island__cap .pui-eyebrow{ color:#9A9BBD; }

/* F3 pair: the phone overlaps the window's bottom inline-end corner by 80 px */
.pui-pair{ position:relative; padding-inline-end:172px; padding-bottom:176px; }
.pui-pair > .pui-win .pui-main{ padding-inline-end:88px; }
.pui-pair > .iphone{ position:absolute; inset-inline-end:0; bottom:0; z-index:2; --iphone-w:252px; --iphone-fit:.6048; }
.pui-pair--loose{ padding-bottom:120px; }

/* engineering grid substrate behind dashboards (brief 2.1, light) */
.pui-grid-bg{ position:relative; }
.pui-grid-bg::before{ content:""; position:absolute; inset:-24px; z-index:-1; border-radius:28px; pointer-events:none;
  background:linear-gradient(#E8E8EE 1px,transparent 1px) 0 0/32px 32px, linear-gradient(90deg,#E8E8EE 1px,transparent 1px) 0 0/32px 32px;
  -webkit-mask:radial-gradient(closest-side,#000 40%,transparent); mask:radial-gradient(closest-side,#000 40%,transparent); opacity:.8; }

/* =====================================================================
   Phone screens: native RIVET app (Labs), 390 px wide, scaled by device.css .iphone__fit
   ===================================================================== */
.pui-ph{ --pui-primary:var(--purple,#3B06D4); --pui-on-primary:#fff; --pui-ink:#000; --pui-muted:var(--slate,#4A4A68); --pui-faint:#727293; --pui-sunk:var(--ghost-white,#F8F8FA); --pui-line:#E8E8EE; --pui-line-2:#D1D1D9;
  width:390px; height:848px; background:#fff; color:#000; font-family:var(--font-sans); position:relative; overflow:hidden; }
.pui-ph--dark{ background:#000; color:#fff; }
.pui-ph__sb{ height:54px; display:flex; align-items:center; justify-content:space-between; padding:6px 30px 0 40px; font:600 16px/1 var(--font-sans); letter-spacing:-.01em; }
.pui-ph__sb svg{ height:12px; width:auto; }
.pui-ph__sb .r{ display:flex; gap:6px; align-items:center; }
.pui-ph__top{ display:flex; align-items:center; gap:10px; padding:10px 20px 6px; }
.pui-ph__top img{ height:18px; width:auto; }
.pui-ph__top .pui-status{ margin-inline-start:auto; height:22px; font-size:10px; }
.pui-ph__body{ padding:8px 20px 20px; display:flex; flex-direction:column; gap:14px; }
.pui-ph__h{ display:flex; flex-direction:column; gap:6px; }
.pui-ph__h .pui-title{ font-size:24px; line-height:1.2; }
.pui-ph__tabs{ position:absolute; left:0; right:0; bottom:0; height:84px; padding:10px 28px 0; display:flex; justify-content:space-between;
  background:rgba(255,255,255,.92); border-top:1px solid #EEE; font:500 10.5px/1 var(--font-sans); color:#727293; }
.pui-ph--dark .pui-ph__tabs{ background:rgba(10,10,12,.92); border-top-color:#1E1E2A; }
.pui-ph__tabs span{ display:flex; flex-direction:column; align-items:center; gap:5px; width:56px; }
.pui-ph__tabs svg{ font-size:22px; }
.pui-ph__tabs span.is-on{ color:var(--purple,#3B06D4); font-weight:600; }
.pui-ph__home{ position:absolute; left:50%; bottom:8px; width:134px; height:5px; border-radius:99px; background:#000; transform:translateX(-50%); }
.pui-ph--dark .pui-ph__home{ background:#fff; }

.pui-goalchip{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px; border-radius:999px;
  background:var(--ghost-white,#F8F8FA); box-shadow:inset 0 0 0 1px #E8E8EE; font:600 13px/1 var(--font-sans); }
.pui-goalchip i{ width:8px; height:8px; border-radius:50%; background:var(--gold,#F5C24B); }
.pui-ring{ display:flex; align-items:center; gap:16px; padding:16px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px #E8E8EE, 0 6px 20px -12px rgba(0,0,0,.18); }
.pui-ring svg{ width:84px; height:84px; flex:none; transform:rotate(-90deg); }
.pui-ring circle{ fill:none; stroke-width:9; }
.pui-ring .t{ stroke:#ECECF2; }
.pui-ring .v{ stroke:var(--purple,#3B06D4); stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:calc(100 - var(--p)); }
.pui-ring__n{ display:flex; flex-direction:column; gap:4px; }
.pui-ring__n b{ font:500 30px/1 var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.pui-ring__n span{ font-size:13.5px; line-height:1.35; color:#4A4A68; }
.pui-steps{ display:flex; flex-direction:column; border-radius:16px; box-shadow:0 0 0 1px #E8E8EE; overflow:hidden; }
.pui-step{ display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:12px; padding:12px 14px; border-top:1px solid #EEEEF3; font-size:14px; }
.pui-step:first-child{ border-top:0; }
.pui-step__ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:16px; background:#F8F8FA; color:#4A4A68; }
.pui-step__ic.done{ background:var(--green-50,#E3FFEC); color:var(--green-700,#00663B); }
.pui-step__ic.now{ background:var(--purple,#3B06D4); color:#fff; }
.pui-step__ic.ai{ background:var(--cyan-50,#E4FDFF); color:#004A4F; }
.pui-step b{ display:block; font-weight:600; line-height:1.3; }
.pui-step span{ display:block; font-size:12.5px; color:#4A4A68; line-height:1.35; margin-top:2px; }
.pui-step em{ font:500 11px/1 var(--font-mono); font-style:normal; color:#727293; }
.pui-next{ display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:16px; background:var(--ghost-white,#F8F8FA); }
.pui-next__c{ display:flex; gap:12px; align-items:center; }
.pui-next__c .th{ width:64px; height:40px; flex:none; border-radius:8px; background:#000 center/cover; display:grid; place-items:center; color:#fff; font-size:16px; }
.pui-next__c b{ font-size:14px; line-height:1.3; }
.pui-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px; border-radius:var(--radius-button,8px); border:0;
  font:600 15px/1 var(--font-sans); white-space:nowrap; background:var(--pui-primary); color:var(--pui-on-primary); cursor:pointer; }
.pui-btn--ghost{ background:transparent; color:var(--pui-ink); box-shadow:inset 0 0 0 1px var(--pui-line-2); }
.pui-btn--block{ width:100%; }

/* phone alert (M5): a glass notification over the phone screen (V9 glass on notifications) */
.pui-notif{ position:absolute; inset-inline:12px; top:58px; z-index:4; display:grid; grid-template-columns:38px 1fr; gap:10px; padding:12px 14px; border-radius:22px;
  background:rgba(250,250,252,.84); -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.6); color:#000; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .pui-notif{ background:#F8F8FA; } }
.pui-notif .ic{ width:38px; height:38px; border-radius:10px; background:#000; display:grid; place-items:center; }
.pui-notif .ic img{ width:22px; height:22px; }
.pui-notif .h{ display:flex; justify-content:space-between; font:600 13px/1.2 var(--font-sans); }
.pui-notif .h span{ font-weight:400; color:#4A4A68; font-size:12px; }
.pui-notif p{ font-size:13px; line-height:1.35; margin-top:3px; color:#1B1934; }

/* =====================================================================
   K7 · AI + human hand-off (Bright band: cyan on the agent side, gold on the person's side)
   ===================================================================== */
.pui-k7{ position:relative; border-radius:24px; padding:clamp(16px,3.6vw,48px); color:#000;
  background:linear-gradient(100deg, var(--cyan,#4CF3FE) 0%, var(--gold,#F5C24B) 100%); }
[dir="rtl"] .pui-k7{ background:linear-gradient(260deg, var(--cyan,#4CF3FE) 0%, var(--gold,#F5C24B) 100%); }
.pui-k7__stage{ display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,1fr); gap:clamp(20px,3vw,44px); align-items:center; }
.pui-k7__lanes{ display:flex; justify-content:space-between; gap:12px; margin-bottom:18px; }
.pui-lane{ display:inline-flex; align-items:center; gap:8px; font:500 11px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:#000; }
.pui-lane i{ width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 2px #000; }

/* F5 assistant window */
.pui-asst{ border-radius:14px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 30px 60px -30px rgba(0,40,50,.45); overflow:hidden; color:#000; }
.pui-asst__bar{ display:flex; align-items:center; gap:10px; height:44px; padding:0 14px; border-bottom:1px solid #EEEEF3; font-size:13px; color:#4A4A68; }
.pui-asst__bar img{ width:18px; height:18px; }
.pui-asst__bar b{ color:#000; font-weight:600; }
.pui-asst__sample{ margin-inline-start:auto; flex:none; }
.pui-asst__bar > span:not(.pui-asst__sample){ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:480px){ .pui-asst__bar > span:not(.pui-asst__sample){ display:none; } }
.pui-asst__in{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:12px; min-height:372px; }
.pui-ask{ align-self:flex-end; max-width:86%; padding:10px 14px; border-radius:14px 14px 4px 14px; background:#F3F3F7; font-size:14px; line-height:1.45; }
.pui-agent{ display:flex; align-items:center; gap:10px; }
.pui-agent__cov{ width:44px; height:25px; border-radius:5px; background:#000 center/cover; flex:none; }
.pui-agent b{ font-size:14px; }
.pui-pips{ display:inline-flex; gap:2px; margin-inline-start:2px; vertical-align:middle; }
.pui-pips i{ width:6px; height:10px; border-radius:2px; background:#E8E8EE; }
.pui-pips i.on{ background:var(--cyan-500,#00A2AB); }
.pui-agent .pui-meta{ margin-inline-start:auto; }
.pui-run{ position:relative; display:flex; flex-direction:column; gap:8px; padding-inline-start:14px; border-inline-start:2px solid var(--cyan,#4CF3FE); }
.pui-rs{ display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:10px; min-height:34px; font-size:13.5px; line-height:1.35; }
.pui-rs__st{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:12px; background:var(--cyan-50,#E4FDFF); color:#004A4F; }
.pui-rs__st svg{ opacity:0; }
.pui-rs.is-done .pui-rs__st svg{ opacity:1; }
.pui-rs.is-run .pui-rs__st{ background:transparent; box-shadow:inset 0 0 0 2px var(--cyan-300,#1CD8E4); border-top-color:transparent; }
.pui-rs.is-run .pui-rs__st::after{ content:""; width:20px; height:20px; border-radius:50%; border:2px solid transparent; border-top-color:var(--cyan-600,#00828A); animation:puiSpin .8s linear infinite; position:absolute; }
.pui-rs__st{ position:relative; }
.pui-tool{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 9px 0 6px; border-radius:7px; background:#fff; box-shadow:inset 0 0 0 1px #E3E3EA; font:500 12px/1 var(--font-sans); color:#1B1934; white-space:nowrap; }
.pui-tool img{ width:16px; height:16px; object-fit:contain; }
.pui-out{ margin-top:4px; border-radius:12px; padding:14px; background:#F8FEFF; box-shadow:inset 0 0 0 1px #C4F8FC; display:flex; flex-direction:column; gap:8px; }
.pui-out__h{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; }
.pui-out__h .pui-pill{ margin-inline-start:auto; }
.pui-out ul{ display:flex; flex-direction:column; gap:6px; font-size:13px; line-height:1.4; color:#2A2944; }
.pui-out li{ display:grid; grid-template-columns:auto 1fr; gap:8px; }
.pui-out li::before{ content:""; width:5px; height:5px; margin-top:7px; border-radius:50%; background:var(--cyan-600,#00828A); }
.pui-scan{ position:absolute; inset-inline:0; height:2px; top:0; background:linear-gradient(90deg,transparent,var(--cyan,#4CF3FE),transparent); opacity:0; }

/* person side */
.pui-k7__you{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.pui-k7__you > .iphone{ --iphone-w:300px; --iphone-fit:.72; }   /* K4 maximum in K7 (review P1-7) */
.pui-who{ display:flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; border-radius:999px; background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4); box-shadow:inset 0 0 0 1px rgba(255,255,255,.7); max-width:100%; }
.pui-who img{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; }
.pui-who b{ display:block; font-size:14px; }
.pui-who span{ display:block; font-size:12px; color:#2A2944; line-height:1.3; }

/* the draft on the phone: a sheet over the member's goal screen */
.pui-k7__base{ position:absolute; inset:54px 0 0; }
.pui-k7__base .pui-ph__top{ padding-top:10px; }
.pui-sheet{ position:absolute; inset:auto 0 0; z-index:3; background:#fff; border-radius:24px 24px 0 0; padding:10px 0 104px;
  box-shadow:0 -12px 40px -8px rgba(0,0,0,.22); transform:translateY(102%); transition:transform var(--dur-slow,560ms) var(--ease-emphasized,ease); }
.pui-k7[data-step="3"] .pui-sheet, .pui-k7[data-step="4"] .pui-sheet{ transform:none; }
.pui-k7__base::after{ content:""; position:absolute; inset:-54px 0 0; background:rgba(0,0,0,.32); opacity:0; transition:opacity var(--dur-base,320ms) var(--ease-standard,ease); pointer-events:none; }
.pui-k7[data-step="3"] .pui-k7__base::after, .pui-k7[data-step="4"] .pui-k7__base::after{ opacity:1; }
.pui-sheet__grab{ display:block; width:40px; height:5px; margin:0 auto 4px; border-radius:99px; background:#D1D1D9; }
.pui-draft{ padding:4px 20px 0; display:flex; flex-direction:column; gap:12px; }
.pui-draft__to{ font-size:13px; color:#4A4A68; line-height:1.4; padding-bottom:10px; border-bottom:1px solid #EEEEF3; }
.pui-draft__to b{ color:#000; font-weight:600; }
.pui-draft__msg{ font-size:15px; line-height:1.55; color:#111; min-height:118px; }
.pui-edit{ border-radius:3px; transition:background var(--dur-quick,200ms) var(--ease-standard,ease); }
.pui-edit.is-on{ background:var(--gold-100,#FFEDCA); box-shadow:0 0 0 2px var(--gold-100,#FFEDCA); }
.pui-caret{ display:inline-block; width:2px; height:1.1em; margin-inline-start:1px; vertical-align:-2px; background:var(--gold-700,#725400); opacity:0; }
.pui-edit.is-on .pui-caret{ opacity:1; animation:puiBlink 1s steps(1) infinite; }
.pui-draft__src{ display:flex; gap:6px; flex-wrap:wrap; }
.pui-draft__act{ display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:8px; margin-top:6px; }
.pui-draft__act .pui-btn{ height:46px; font-size:15px; padding:0 10px; }
.pui-approve{ background:var(--magenta,#FF00D4); color:#fff; transition:transform var(--dur-instant,120ms) var(--ease-standard,ease); }
[data-pui-approve="primary"] .pui-approve{ background:var(--purple,#3B06D4); }
.pui-approve.is-press{ transform:scale(.96); }
.pui-sent{ display:none; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; background:var(--green-50,#E3FFEC); color:#00331B; font-size:14px; font-weight:600; }
.pui-sent svg{ font-size:18px; color:var(--green-700,#00663B); }
.pui-k7.is-sent .pui-sent{ display:flex; }
.pui-k7.is-sent .pui-draft__act{ display:none; }

/* the scene's own step rail and controls */
.pui-k7__rail{ display:flex; align-items:center; gap:10px; margin-top:22px; flex-wrap:wrap; }
.pui-k7__steps{ display:flex; gap:6px; flex:1; min-width:260px; }
.pui-k7__steps li{ flex:1; display:flex; flex-direction:column; gap:8px; font:500 11px/1.3 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:rgba(0,0,0,.6); }
.pui-k7__steps li::before{ content:""; height:3px; border-radius:2px; background:rgba(0,0,0,.14); }
.pui-k7__steps li.is-on{ color:#000; }
.pui-k7__steps li.is-on::before{ background:#000; }
.pui-ctl{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:44px; height:44px; padding:0 14px; border-radius:999px; border:0; cursor:pointer;
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); font:600 13px/1 var(--font-sans); color:#000; }
.pui-ctl svg{ font-size:16px; }
.pui-ctl:focus-visible{ outline:3px solid #000; outline-offset:2px; }

/* K7 timeline states (the JS walks .pui-k7[data-step]) */
.pui-k7 .pui-rs{ opacity:.35; transition:opacity var(--dur-base,320ms) var(--ease-standard,ease); }
.pui-k7 .pui-rs.is-run, .pui-k7 .pui-rs.is-done{ opacity:1; }
.pui-k7 .pui-out{ opacity:0; transform:translateY(8px); transition:opacity var(--dur-base,320ms) var(--ease-standard,ease), transform var(--dur-base,320ms) var(--ease-standard,ease); }
.pui-k7[data-step="2"] .pui-out, .pui-k7[data-step="3"] .pui-out, .pui-k7[data-step="4"] .pui-out{ opacity:1; transform:none; }
.pui-k7 .pui-notif{ opacity:0; transform:translateY(-16px) scale(.98); transition:opacity var(--dur-base,320ms) var(--ease-emphasized,ease), transform var(--dur-base,320ms) var(--ease-emphasized,ease); }
.pui-k7[data-step="2"] .pui-notif{ opacity:1; transform:none; }
.pui-k7 .pui-notif{ z-index:5; }
/* the person side wakes in gold when the decision is theirs */
.pui-k7 .pui-k7__you .iphone{ transition:transform var(--dur-base,320ms) var(--ease-emphasized,ease); }
.pui-k7[data-step="3"] .pui-k7__you .iphone{ transform:translateY(-6px); }

/* variants by page (the partial carries data-page="{{page}}") */
.pui-k7 [data-v]{ display:none; }
.pui-k7:not([data-page="max"]) [data-v="prospect"], .pui-k7[data-page="max"] [data-v="coach"]{ display:revert; }
.pui-k7:not([data-page="max"]) .pui-k7__base[data-v="prospect"], .pui-k7[data-page="max"] .pui-k7__base[data-v="coach"]{ display:block; }
.pui-k7:not([data-page="max"]) .pui-run[data-v="prospect"], .pui-k7[data-page="max"] .pui-run[data-v="coach"],
.pui-k7:not([data-page="max"]) .pui-out[data-v="prospect"], .pui-k7[data-page="max"] .pui-out[data-v="coach"],
.pui-k7:not([data-page="max"]) .pui-draft__src[data-v="prospect"], .pui-k7[data-page="max"] .pui-draft__src[data-v="coach"],
.pui-k7:not([data-page="max"]) .pui-who[data-v="prospect"], .pui-k7[data-page="max"] .pui-who[data-v="coach"],
.pui-k7:not([data-page="max"]) .pui-agent[data-v="prospect"], .pui-k7[data-page="max"] .pui-agent[data-v="coach"]{ display:flex; }

/* =====================================================================
   K12a · Find your next move
   ===================================================================== */
.pui-pick{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(20px,3vw,40px); align-items:start; }
.pui-pick__q{ display:flex; flex-direction:column; gap:14px; padding:22px; border-radius:var(--radius-card,12px); background:#fff; box-shadow:var(--shadow-card,0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06)); }
.pui-field{ display:flex; flex-direction:column; gap:8px; }
.pui-field label{ font:500 12px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--slate,#4A4A68); }
.pui-sel{ position:relative; }
.pui-sel select{ appearance:none; -webkit-appearance:none; width:100%; height:52px; padding:0 44px 0 16px; border-radius:10px; border:0;
  background:var(--ghost-white,#F8F8FA); box-shadow:inset 0 0 0 1px #D1D1D9; font:500 16px/1.2 var(--font-sans); color:#000; cursor:pointer; }
[dir="rtl"] .pui-sel select{ padding:0 16px 0 44px; }
.pui-sel select:hover{ box-shadow:inset 0 0 0 1px #4A4A68; }
.pui-sel select:focus-visible{ outline:3px solid var(--purple,#3B06D4); outline-offset:2px; }
.pui-sel svg{ position:absolute; inset-inline-end:16px; top:50%; translate:0 -50%; pointer-events:none; font-size:18px; color:#4A4A68; }
.pui-pick__arrow{ display:flex; align-items:center; gap:8px; font:500 12px/1.4 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate,#4A4A68); }
.pui-ans{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; padding:28px; border-radius:var(--radius-card,12px); background:#fff;
  box-shadow:var(--shadow-card,0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06)); align-items:center; }
.pui-ans__t{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.pui-ans__h{ font:600 24px/1.25 var(--font-sans); letter-spacing:-.01em; }
.pui-ans__plan{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px; background:var(--ghost-white,#F8F8FA); }
.pui-ans__plan .w{ display:grid; place-items:center; width:46px; height:46px; border-radius:10px; background:#000; flex:none; }
.pui-ans__plan .w img{ width:22px; height:auto; }
.pui-ans__plan b{ display:block; font-size:15px; }
.pui-ans__plan span{ display:block; font-size:13px; color:#4A4A68; line-height:1.35; }
.pui-ans__go{ display:inline-flex; align-items:center; gap:6px; font:600 15px/1 var(--font-sans); color:var(--purple,#3B06D4); text-decoration:none; }
.pui-ans__go:hover{ text-decoration:underline; text-underline-offset:3px; }
.pui-ans__q{ display:flex; flex-direction:column; gap:10px; padding-top:14px; border-top:1px solid #E8E8EE; }
.pui-ans__q blockquote{ margin:0; font:400 15px/1.55 var(--font-sans); color:#1B1934; }
.pui-ans__by{ display:flex; align-items:center; gap:10px; }
.pui-ans__by img{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; }
.pui-ans__by b{ display:block; font-size:14px; }
.pui-ans__by span{ display:block; font-size:12.5px; color:#4A4A68; line-height:1.3; }
.pui-move{ display:inline-flex; align-self:flex-start; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:6px; background:var(--gold-50,#FFF7E8); color:var(--gold-800,#553F00); font:500 11px/1 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; }
.pui-ans .iphone{ --iphone-w:220px; --iphone-fit:.528; }
.pui-ans [data-row]{ display:none; }
.pui-ans [data-row].is-on{ display:flex; }
.pui-ans .iphone__fit [data-row].is-on{ display:block; }
.pui-ans__t > [data-row].is-on{ animation:puiIn var(--dur-base,320ms) var(--ease-standard,ease); }

/* =====================================================================
   Goal switch (home hero driver) and seat preview
   ===================================================================== */
.pui-goals{ display:flex; flex-direction:column; gap:20px; }
.pui-tabs{ position:relative; display:flex; gap:4px; padding:4px; border-radius:12px; background:var(--ghost-white,#F8F8FA); box-shadow:inset 0 0 0 1px #E8E8EE; overflow-x:auto; scrollbar-width:none; }
.pui-tabs::-webkit-scrollbar{ display:none; }
.pui-tab{ position:relative; flex:1 0 auto; min-height:44px; padding:0 14px; border:0; border-radius:9px; background:transparent; cursor:pointer;
  font:500 14px/1.2 var(--font-sans); color:#4A4A68; white-space:nowrap; overflow:hidden; }
.pui-tab[aria-selected="true"]{ background:#fff; color:#000; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.08), 0 0 0 1px #E8E8EE; }
.pui-tab__p{ position:absolute; inset-inline:10px; bottom:5px; height:2px; border-radius:2px; background:var(--purple,#3B06D4); transform:scaleX(0); transform-origin:left; }
[dir="rtl"] .pui-tab__p{ transform-origin:right; }
.pui-goals.is-auto .pui-tab[aria-selected="true"] .pui-tab__p{ animation:puiProg 8s linear forwards; }
.pui-goals.is-paused .pui-tab[aria-selected="true"] .pui-tab__p{ animation-play-state:paused; }
.pui-goals__bar{ display:flex; gap:10px; align-items:center; }
.pui-goals__bar .pui-tabs{ flex:1; min-width:0; }
.pui-pause{ flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; background:var(--ghost-white,#F8F8FA); box-shadow:inset 0 0 0 1px #E8E8EE; color:#000; }
.pui-pause svg{ font-size:16px; }
.pui-pause .pl{ display:none; }
.pui-goals.is-paused .pui-pause .pa, .pui-goals:not(.is-auto) .pui-pause .pa{ display:none; }
.pui-goals.is-paused .pui-pause .pl, .pui-goals:not(.is-auto) .pui-pause .pl{ display:block; }
.pui-goals__stage{ position:relative; }
.pui-panel[hidden]{ display:none; }
.pui-panel{ animation:puiIn var(--dur-base,320ms) var(--ease-standard,ease); }
.pui-shot{ display:block; width:100%; height:auto; border-radius:12px; box-shadow:0 0 0 1px #D1D1D9, var(--pui-shadow); background:#fff; aspect-ratio:16/10; object-fit:cover; object-position:top left; }
.pui-goals .pui-pair{ padding-inline-end:156px; padding-bottom:0; }
.pui-goals .pui-pair > .pui-win .pui-main, .pui-goals .pui-mini .pui-main{ padding-inline-end:20px; }
.pui-goals .pui-pair > .iphone{ --iphone-w:236px; --iphone-fit:.5664; bottom:-36px; }
.pui-goals__cap{ display:flex; gap:10px; align-items:center; margin-top:44px; font-size:14px; line-height:1.45; color:var(--slate,#4A4A68); }
.pui-goals__cap .pui-status{ flex:none; }

/* mini live surfaces used inside the goal switch (S10 run, S16 team, team admin) */
.pui-mini{ aspect-ratio:16/10; display:flex; flex-direction:column; }
.pui-mini .pui-app{ flex:1; }
.pui-mini .pui-main{ padding:18px 20px; gap:12px; }
.pui-mini .pui-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }

/* seat preview (M4) */
.pui-seat{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:clamp(16px,3vw,36px); align-items:start; }
.pui-seat__ctl{ display:flex; flex-direction:column; gap:18px; padding:22px; border-radius:var(--radius-card,12px); background:#fff; box-shadow:var(--shadow-card,0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06)); }
.pui-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.pui-plans label{ position:relative; display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:10px; cursor:pointer; box-shadow:inset 0 0 0 1px #D1D1D9; min-height:56px; }
.pui-plans input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.pui-plans b{ font-size:15px; }
.pui-plans span{ font:500 11px/1.2 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:#4A4A68; }
.pui-plans label:has(input:checked){ box-shadow:inset 0 0 0 2px var(--purple,#3B06D4); background:var(--purple-50,#F6F8FF); }
.pui-plans label:has(input:focus-visible){ outline:3px solid var(--purple,#3B06D4); outline-offset:2px; }
.pui-step-n{ display:flex; align-items:center; gap:10px; }
.pui-step-n button{ width:44px; height:44px; border-radius:10px; border:0; cursor:pointer; background:var(--ghost-white,#F8F8FA); box-shadow:inset 0 0 0 1px #D1D1D9; font-size:18px; display:grid; place-items:center; }
.pui-step-n button:disabled{ opacity:.4; cursor:default; }
.pui-step-n output{ min-width:64px; text-align:center; font:500 28px/1 var(--font-mono); font-variant-numeric:tabular-nums; }
.pui-seat__hint{ font-size:13.5px; line-height:1.45; color:#4A4A68; min-height:40px; }
.pui-seat__hint b{ color:#000; }
.pui-crew{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px; }
.pui-crew li{ display:flex; align-items:center; gap:8px; padding:8px; border-radius:10px; background:var(--pui-sunk); font-size:12px; line-height:1.25; color:var(--pui-muted); min-width:0; }
.pui-crew li b{ display:block; color:var(--pui-ink); font-weight:600; font-size:12.5px; white-space:nowrap; }
.pui-crew li.is-new{ animation:puiPop var(--dur-base,320ms) var(--ease-emphasized,ease); }
.pui-crew li.is-free{ background:transparent; box-shadow:inset 0 0 0 1px dashed var(--pui-line-2); outline:1px dashed var(--pui-line-2); outline-offset:-1px; }

/* team room frame (S24): the desktop kit render; under 768 px the live phone room instead (P1, phone UI on phones) */
.pui-room{ margin:0; }
.pui-room > picture, .pui-room > picture img{ display:block; width:100%; height:auto; border-radius:12px; }
.pui-room > picture img{ box-shadow:0 0 0 1px #D1D1D9, var(--pui-shadow); }
.pui-room__m{ display:none; }
@media (max-width:767px){ .pui-room picture{ display:none; } .pui-room__m{ display:flex; justify-content:center; } .pui-room__m .iphone{ --iphone-w:240px; --iphone-fit:.576; } }


/* credits (S21): Coming soon, no amounts */
.pui-cred{ max-width:520px; }
.pui-cred .pui-prog{ height:8px; background:repeating-linear-gradient(135deg,var(--pui-track) 0 6px,transparent 6px 12px); box-shadow:inset 0 0 0 1px var(--pui-line); }
.pui-cred .pui-row{ grid-template-columns:28px minmax(0,1.3fr) minmax(0,1fr) 96px; }

/* INFINITE mark locator inside S19: the authored path, zone colours only (brief 2.1, A8) */
.pui-mark{ direction:ltr; display:block; width:100%; height:auto; }
.pui-mark .a{ fill:var(--pui-series); } .pui-mark .w{ fill:var(--pui-ink); } .pui-mark .x{ fill:var(--green-500,#00A763); }
.pui[data-mode="dark"] .pui-mark .x{ fill:var(--green); }
.pui-zones{ direction:ltr; display:flex; justify-content:space-between; margin-top:8px; font:500 10.5px/1.3 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--pui-faint); }

/* =====================================================================
   Motion (UI tier tokens only; reduced motion shows the end state)
   ===================================================================== */
@keyframes puiSpin{ to{ transform:rotate(360deg); } }
@keyframes puiBlink{ 50%{ opacity:0; } }
@keyframes puiProg{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes puiIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes puiPop{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:none; } }
@keyframes puiGrow{ from{ transform:scaleY(0); } }
@keyframes puiFill{ from{ transform:scaleX(0); } }
.pui.is-seen .pui-bar-c i{ animation:puiGrow var(--dur-slow,560ms) var(--ease-standard,ease) both; animation-delay:calc(var(--i,0) * 50ms); }
.pui.is-seen .pui-prog i{ animation:puiFill var(--dur-slow,560ms) var(--ease-standard,ease) both; }
.pui.is-seen .pui-ring .v{ transition:stroke-dashoffset var(--dur-slow,560ms) var(--ease-emphasized,ease); }
.pui-js .pui:not(.is-seen) .pui-ring .v{ stroke-dashoffset:100; }
@media (prefers-reduced-motion:reduce){
  .pui *, .pui *::before, .pui *::after{ animation:none!important; transition:none!important; }
  .pui-js .pui:not(.is-seen) .pui-ring .v{ stroke-dashoffset:calc(100 - var(--p)); }
}

/* =====================================================================
   Responsive: the window reflows (no crop), the phone moves under it
   ===================================================================== */
@media (max-width:1100px){
  .pui-app{ grid-template-columns:56px minmax(0,1fr); }
  .pui-side{ padding:12px 8px; }
  .pui-side .pui-nav{ justify-content:center; padding:0; font-size:0; gap:0; }
  .pui-side .pui-nav svg{ font-size:18px; }
  .pui-side .pui-nav__n, .pui-side__h{ display:none; }
}
@media (max-width:900px){
  .pui-k7__stage, .pui-pick, .pui-seat{ grid-template-columns:minmax(0,1fr); }
  .pui-grid{ grid-template-columns:minmax(0,1fr); }
  .pui-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px){
  .pui-app{ grid-template-columns:minmax(0,1fr); }
  .pui-side{ display:none; }
  .pui-main{ padding:16px 14px; gap:12px; }
  .pui-title{ font-size:19px; }
  .pui-kpi{ padding:12px; }
  .pui-kpi__v{ font-size:23px; }
  .pui-kpi__spark{ display:none; }
  .pui-grid-bg::before{ inset:-24px 0; }
  .pui-kpi__l{ white-space:normal; }
  .pui-bars-x .lg{ display:none; } .pui-bars-x .sh{ display:inline; }
  .pui-hide-m{ display:none!important; }
  .pui-head__end{ margin-inline-start:0; }
  .pui-bar__crumb span, .pui-bar__crumb i{ display:none; }
  .pui-row{ grid-template-columns:28px minmax(0,1fr) 76px; }
  .pui-row > :nth-child(3){ display:none; }
  .pui-cred .pui-row{ grid-template-columns:28px minmax(0,1fr) 88px; }
  .pui-pair{ padding:0; display:flex; flex-direction:column; align-items:center; gap:0; }
  .pui-pair > .pui-win, .pui-pair > .pui-mini, .pui-pair > .pui-shot, .pui-pair > .pui-asst{ align-self:stretch; }
  .pui-pair > .pui-win .pui-main{ padding-inline-end:14px; }
  .pui-pair > .iphone{ position:relative; inset:auto; margin-top:-28px; --iphone-w:216px; --iphone-fit:.5184; }
  .pui-pair > .pui-win .pui-main{ padding-bottom:44px; }
  .pui-goals .pui-pair{ padding:0; }
  .pui-goals .pui-pair > .iphone{ bottom:auto; --iphone-w:200px; --iphone-fit:.48; margin-top:-56px; }
  .pui-goals__cap{ margin-top:14px; }
  .pui-island{ border-radius:20px; }
  .pui-k7{ border-radius:20px; }
  .pui-k7__lanes{ display:none; }
  .pui-asst__in{ min-height:0; padding:14px; }
  .pui-k7__you > .iphone{ --iphone-w:240px; --iphone-fit:.576; }
  .pui-ans{ grid-template-columns:minmax(0,1fr); min-height:0; padding:18px; }
  .pui-ans .iphone{ justify-self:center; --iphone-w:200px; --iphone-fit:.48; margin-inline:auto; }
  .pui-ans__h{ font-size:20px; }
  .pui-tab{ font-size:13.5px; padding:0 12px; }
  .pui-mini{ aspect-ratio:auto; }
}

/* ---------- fix pass (3 Nov 2026, review_design P1-7, P2-10) ----------
   F7 zoom fragment: the one line a phone screen exists to say, lifted out at a readable size (13px+) on glass over
   the phone's inline-start edge, so the screen reads as function, not texture. The phone's own aria-label carries it
   for screen readers, so the fragment is aria-hidden. */
.pui-zoom{ position:absolute; z-index:4; inset-inline-end:calc(var(--zoom-x, 196px)); bottom:var(--zoom-y, 64px); display:grid; gap:2px; max-width:210px;
  padding:10px 14px; border-radius:12px; color:#000; background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 14px 34px -14px rgba(20,16,60,.35), inset 0 0 0 1px rgba(0,0,0,.08); pointer-events:none; }
.pui-zoom b{ font:600 22px/1.1 var(--font-mono,"IBM Plex Mono",monospace); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.pui-zoom span{ font:500 13px/1.35 var(--font-sans,"IBM Plex Sans",sans-serif); color:#2A2944; }
.pui-goals .pui-pair > .pui-zoom{ --zoom-x:196px; --zoom-y:40px; }
@media (max-width:767px){
  .pui-pair > .pui-zoom{ position:relative; inset:auto; justify-self:center; margin:-40px auto 0; max-width:240px; }
  .pui-goals .pui-pair > .pui-zoom{ order:3; margin-top:-36px; }
}
/* P2-10 · nothing plays under reduced motion, so the K7 Pause and Replay go too (the end state shows) */
@media (prefers-reduced-motion:reduce){ .pui-k7 [data-pui-play], .pui-k7 [data-pui-replay], .pui-goals .pui-pause{ display:none !important; } }