/* /pi "Sample Pi profile" + "Sample buying committee map" (views/partials/pi-sample.ejs, Oct 26).
   Two glimpse cards, each expanding a full product view inline, then the "more than LLMs" line.
   Brand tokens only: gold #FFC61E, gold 300 #FFE8A5, violet #341D99, ink #110A33, lavender #DDD6FF, mist #F6F4FF,
   cream #FFF4D2, slate #5B6478, white. Cabinet Grotesk (headings) + Manrope. 4px scale, 24px outer corners, pill buttons,
   fixed shadows. Inside the product window the app's own small section labels are kept (they are product UI, not page eyebrows).
   DISC colours (no green/red on the site): D violet, I gold, S lavender, C slate. Stances: Crusader gold 300, Friendly cream,
   Neutral mist, Skeptic lavender, always with the word. "Coming soon" = a quiet outline tag + a dashed box edge.
   Motion: card lift on hover (pointer devices), the full view fades up 8px, the committee faces settle in once. Transform and
   opacity only; prefers-reduced-motion drops all of it. */
.pis { --ink: #110A33; --violet: #341D99; --gold: #FFC61E; --gold3: #FFE8A5; --lav: #DDD6FF; --mist: #F6F4FF; --cream: #FFF4D2; --slate: #5B6478;
  --fh: Cabinetgrotesk, "Cabinet Grotesk", "Cabinet Fallback", Manrope, Arial, sans-serif; --fb: Manrope, "Manrope Fallback", Arial, sans-serif;
  --sh-sm: 0 2px 8px rgba(17,10,51,.08); --sh-md: 0 12px 32px -12px rgba(17,10,51,.22); --sh-lg: 0 32px 64px -24px rgba(17,10,51,.35);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --band: var(--mist); --card: #fff; --win: var(--mist);
  box-sizing: border-box; padding: 64px 24px 72px; background: var(--band); color: var(--ink); font-family: var(--fb); }
.pis--white { --band: #fff; --card: var(--mist); --win: var(--mist); }
.pis *, .pis *::before, .pis *::after { box-sizing: border-box; }
.pis :where(p, ul, ol, li, dl, dd, dt, h3, h4, figure) { margin: 0; padding: 0; }
.pis :where(ul, ol) { list-style: none; }
.pis :where(em, i) { font-style: normal; }
.pis :where(button) { font: inherit; color: inherit; }
.pis-in { position: relative; max-width: 1120px; margin: 0 auto; }
.pis-head { margin-bottom: 32px; }
.pis-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pis-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pis :focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* ---------- glimpse cards ---------- */
.pis-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pis-card { position: relative; display: flex; flex-direction: column; padding: 8px; border: 1px solid var(--lav); border-radius: 24px; background: var(--card); box-shadow: var(--sh-sm); transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); }
.pis-glimpse { position: relative; height: 268px; overflow: hidden; border-radius: 16px; background: var(--mist); padding: 20px 20px 0;
  -webkit-mask-image: linear-gradient(#000 74%, transparent); mask-image: linear-gradient(#000 74%, transparent); }
.pis--white .pis-glimpse { background: #fff; }
.pis-gwin { height: 100%; padding: 16px; border: 1px solid var(--lav); border-bottom: 0; border-radius: 16px 16px 0 0; background: #fff; box-shadow: var(--sh-sm); transition: transform 320ms var(--ease); }
.pis--white .pis-gwin { background: var(--mist); }
.pis-cfoot { display: grid; gap: 8px; padding: 20px 16px 12px; }
.pis-ch { font: 700 22px/1.2 var(--fh); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.pis-cl { font-size: 16px; line-height: 1.55; color: var(--slate); text-wrap: pretty; }
.pis-open { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; padding: 0 20px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; font: 700 16px/1 var(--fh); cursor: pointer; transition: background-color 160ms, color 160ms, transform 160ms var(--ease); }
.pis-open::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.pis-open .pis-chev { transition: transform 240ms var(--ease); }
.pis-open[aria-expanded="true"] { background: var(--ink); color: #fff; }
.pis-open[aria-expanded="true"] .pis-chev { transform: rotate(180deg); }
.pis-open:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .pis-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
  .pis-card:hover .pis-gwin { transform: translateY(-4px); }
  .pis-open:hover { background: var(--ink); color: #fff; }
}

/* profile glimpse */
.pis-ghead { display: flex; align-items: center; gap: 12px; }
.pis-photo { display: block; flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--lav); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--lav); }
.pis-photo--xs { width: 28px; height: 28px; box-shadow: 0 0 0 2px #fff; }
.pis-photo--lg { width: 88px; height: 88px; }
.pis-gwho { display: grid; gap: 4px; min-width: 0; }
.pis-gwho b { font: 700 22px/1.15 var(--fh); letter-spacing: -.01em; }
.pis-gwho span { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--slate); min-width: 0; text-wrap: pretty; } /* Oct 26 PM (W16): wraps instead of clipping a longer title ("Vice President, Revenue Operations" at 320) */
.pis-co { display: inline-block; height: 15px; width: auto; vertical-align: middle; }
.pis-co--sf { height: 16px; margin: 0 4px 0 2px; }
.pis-gtags { margin-top: 12px; }
.pis-gfact { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 14px; line-height: 1.45; font-weight: 600; }
.pis-gshows { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pis-gshows li, .pis-shows li { padding: 4px 10px; border: 1px solid var(--lav); border-radius: 8px; font: 700 13px/1.3 var(--fh); color: var(--violet); }
.pis-gdo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; font-size: 13px; line-height: 1.4; color: var(--ink); }
.pis-gdo p { display: flex; gap: 6px; align-items: flex-start; }

/* committee glimpse */
.pis-gread { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--slate); }
.pis-gread b { color: var(--ink); }
.pis-i--spark { width: 20px; height: 20px; padding: 2px; border-radius: 6px; background: var(--gold3); stroke-width: 1.8; color: var(--ink); }
.pis-gq { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; height: 176px; margin-top: 12px; }
.pis-gq-cell { position: relative; border-radius: 8px; background: var(--mist); }
.pis--white .pis-gq-cell { background: #fff; }
.pis-gq-cell.is-hot { box-shadow: inset 0 0 0 1.5px var(--gold); }
.pis-gq-cell em { position: absolute; font: 700 12px/1 var(--fb); color: var(--slate); }
.pis-gq-cell--tl em { left: 8px; top: 8px; } .pis-gq-cell--tr em { right: 8px; top: 8px; } .pis-gq-cell--bl em { left: 8px; bottom: 8px; } .pis-gq-cell--br em { right: 8px; bottom: 8px; }
.pis-gq-p { position: absolute; transform: translate(-50%, -50%); }
.pis-gq-p .pis-av { width: 32px; height: 32px; box-shadow: 0 0 0 2px #fff, var(--sh-sm); }


/* ---------- the full view (inline panel) ---------- */
.pis-panel { margin-top: 24px; scroll-margin-top: 96px; }
.pis-panel[hidden] { display: none; }
.pis-panel.is-anim { opacity: 0; transform: translateY(8px); }
.pis-panel.is-in { opacity: 1; transform: none; transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
.pis-ptop { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.pis-ptop h3 { font: 700 24px/1.2 var(--fh); letter-spacing: -.01em; text-wrap: balance; }
.pis-ptop h3:focus { outline: none; }
.pis-ptop h3:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; border-radius: 4px; }
.pis-close { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--lav); border-radius: 999px; background: #fff; font: 700 15px/1 var(--fb); cursor: pointer; transition: background-color 160ms, transform 160ms var(--ease); }
.pis-close:hover { background: var(--mist); }
.pis-close:active { transform: scale(.96); }
.pis-win { padding: 16px; border: 1px solid var(--lav); border-radius: 24px; background: var(--win); box-shadow: var(--sh-md); }
.pis--white .pis-win { background: var(--mist); }
.pis--mist .pis-win { background: #fff; }
.pis--mist .pis-box { background: var(--mist); border-color: transparent; }
.pis--mist .pis-box--soon { border-color: var(--lav); }
.pis-appbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 4px 16px; font-size: 13px; font-weight: 600; color: var(--slate); }
.pis-appbar b { color: var(--ink); }
.pis-mark { width: 20px; height: 20px; margin-right: 4px; }
.pis-box { padding: 20px; border: 1px solid var(--lav); border-radius: 16px; background: #fff; }
.pis-box--soon { border-style: dashed; }
.pis-soon { display: inline-block; margin-left: 6px; padding: 2px 8px; border: 1px solid var(--lav); border-radius: 999px; background: #fff; font: 700 12px/1.4 var(--fb); letter-spacing: 0; text-transform: none; color: var(--slate); vertical-align: 2px; white-space: nowrap; }
.pis-lab { font: 800 12px/1.4 var(--fb); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.pis-h { margin-top: 4px; font: 700 20px/1.25 var(--fh); letter-spacing: -.005em; color: var(--ink); }
.pis-h--sm { margin-top: 0; font-size: 18px; }
.pis-h--ic { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 0; font-size: 18px; }
.pis-h--ic > .pis-i { width: 30px; height: 30px; padding: 6px; border-radius: 8px; background: var(--mist); color: var(--violet); }
.pis--mist .pis-h--ic > .pis-i { background: #fff; }
.pis-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 28px/1.15 var(--fh); letter-spacing: -.015em; }
.pis-name--sm { font-size: 20px; }
.pis-body { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--slate); text-wrap: pretty; }
.pis-sm { font-size: 14px; line-height: 1.5; color: var(--slate); }
.pis-sm b { color: var(--ink); }
.pis-foot { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--slate); }
.pis-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 800 13px/1.3 var(--fb); color: var(--ink); white-space: nowrap; }
.pis-chip .pis-i { width: 15px; height: 15px; }
.pis-chip--gold { background: var(--gold); }
.pis-chip--lav { background: var(--lav); }
.pis-chip--disc { background: #fff; box-shadow: inset 0 0 0 1px var(--lav); font-family: var(--fh); }
.pis-chip--out { background: #fff; box-shadow: inset 0 0 0 1px var(--lav); color: var(--slate); }
.pis-st--crusader { background: var(--gold3); } .pis-st--friendly { background: var(--cream); } .pis-st--neutral { background: #fff; box-shadow: inset 0 0 0 1px var(--lav); } .pis-st--skeptic { background: var(--lav); }
.pis-av { display: block; flex: none; width: 52px; height: 52px; border-radius: 50%; }
.pis-av--md { width: 56px; height: 56px; }
.pis-av--sm { width: 32px; height: 32px; }
.pis-av--xs { width: 22px; height: 22px; }
.pis-cite { margin-left: 2px; font: 800 11px/1 var(--fb); color: var(--violet); }
.pis-ast { margin-left: 1px; font-weight: 800; color: var(--violet); }

/* tuned-to-you strip */
.pis-tuned { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.pis-tuned-who { display: flex; align-items: center; gap: 8px; flex: none; }
.pis-pair { display: grid; justify-items: center; gap: 4px; }
.pis-pair em { font: 700 13px/1 var(--fh); color: var(--slate); }
.pis-pair-vs { font-weight: 800; color: var(--slate); }
.pis-pair .pis-photo--xs { width: 32px; height: 32px; }
.pis-tuned-line { margin: 4px 0 2px; font: 700 20px/1.3 var(--fh); letter-spacing: -.005em; text-wrap: balance; }

/* profile grid */
.pis-pgrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pis-main, .pis-rail { display: grid; gap: 16px; min-width: 0; }
.pis-hero-top { display: flex; align-items: center; gap: 16px; }
.pis-hero-who { display: grid; gap: 6px; min-width: 0; }
.pis-role { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; }
.pis-role .pis-co { height: 18px; }
.pis-loc { display: flex; align-items: center; gap: 4px; }
.pis-loc .pis-i { width: 15px; height: 15px; }
.pis-fact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: 16px; line-height: 1.45; font-weight: 700; }
.pis-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; border: 1px solid var(--lav); border-radius: 12px; overflow: hidden; background: #fff; }
.pis-stats > div { padding: 12px; border-left: 1px solid var(--lav); }
.pis-stats > div:first-child { border-left: 0; }
.pis-stats dt { font: 800 12px/1.4 var(--fb); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.pis-stats dd { margin-top: 4px; font-size: 14px; font-weight: 700; line-height: 1.35; }
.pis-disc { display: grid; gap: 6px; }
.pis-disc .pis-sm { font-size: 12px; font-weight: 700; white-space: pre; }
.pis-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; gap: 2px; }
.pis-bar i { display: block; flex-basis: 0; }
.pis-bar-d, .pis-dot--d { background: var(--violet); } .pis-bar-i, .pis-dot--i { background: var(--gold); } .pis-bar-s, .pis-dot--s { background: var(--lav); } .pis-bar-c, .pis-dot--c { background: var(--slate); }
.pis-shows { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pis-shows li { padding: 6px 12px; font-size: 15px; background: #fff; }
.pis-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
/* Oct 26 PM (W16): the media list sits in a half-width box, so one card per row */
.pis-topics--one { grid-template-columns: minmax(0, 1fr); }
.pis-topics li { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--lav); border-radius: 12px; background: #fff; font-size: 14px; line-height: 1.45; color: var(--slate); }
.pis-topics b { font-size: 15px; color: var(--ink); }
.pis-soon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pis-list { display: grid; gap: 8px; margin-top: 12px; font-size: 15px; line-height: 1.45; }
.pis-list li { position: relative; padding-left: 14px; }
.pis-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.pis-list--src li { display: grid; gap: 2px; }
.pis-list--src em { font: 800 12px/1.4 var(--fb); letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.pis-people { display: grid; gap: 12px; margin-top: 12px; }
.pis-people li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--slate); }
.pis-people li > span { display: grid; flex: 1; min-width: 0; }
.pis-people b { color: var(--ink); font-size: 15px; }
.pis-dc { flex: none; padding: 2px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--lav); font: 700 13px/1.4 var(--fh); color: var(--ink); }
.pis-career { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; }
.pis-tl { display: grid; gap: 12px; margin: 12px 0; padding-left: 16px; border-left: 2px solid var(--lav); }
.pis-tl li { position: relative; display: grid; gap: 2px; font-size: 15px; line-height: 1.4; }
.pis-tl li::before { content: ""; position: absolute; left: -22px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px #fff; }
.pis-srcs { padding: 16px; border: 1px dashed var(--lav); border-radius: 12px; }
.pis-src { display: grid; gap: 8px; margin-top: 12px; font-size: 14px; line-height: 1.4; color: var(--slate); }
.pis-src li { display: flex; gap: 8px; align-items: baseline; }
.pis-src .pis-cite { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--lav); color: var(--ink); }
.pis-dlab { margin-top: 12px; font: 800 12px/1.4 var(--fb); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.pis-dos { display: grid; gap: 8px; margin-top: 8px; font-size: 15px; line-height: 1.45; }
.pis-dos li, .pis-gdo p { display: flex; align-items: flex-start; gap: 8px; }
.pis-i--do, .pis-i--no { width: 20px; height: 20px; margin-top: 1px; padding: 4px; border-radius: 50%; stroke-width: 2.6; color: var(--ink); }
.pis-i--do { background: var(--gold); }
.pis-i--no { background: var(--lav); }
.pis-gdo .pis-i--do, .pis-gdo .pis-i--no { width: 18px; height: 18px; }
.pis-dl { display: grid; gap: 10px; margin-top: 12px; font-size: 15px; line-height: 1.45; }
.pis-dl dt { font-weight: 800; color: var(--ink); }
.pis-dl dd { color: var(--slate); }
.pis-dl--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pis-visits { display: grid; gap: 8px; margin-top: 12px; font-size: 14px; }
.pis-visits li { display: grid; grid-template-columns: minmax(0, 8.5em) 1fr 2ch; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.pis-visits i { display: block; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--violet) var(--w), var(--lav) var(--w)); }
.pis-visits b { text-align: right; font-variant-numeric: tabular-nums; }
.pis-note { margin: 12px 0 8px; padding: 12px; border-radius: 12px; background: var(--mist); font-size: 15px; line-height: 1.45; font-weight: 600; }
.pis--mist .pis-note { background: #fff; }
.pis-seg { display: inline-flex; gap: 4px; margin-top: 8px; padding: 4px; border-radius: 999px; background: var(--mist); }
.pis--mist .pis-seg { background: #fff; }
.pis-seg button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font: 700 14px/1 var(--fb); color: var(--slate); cursor: pointer; transition: background-color 160ms, color 160ms; }
.pis-seg button[aria-checked="true"] { background: var(--ink); color: #fff; }

/* ---------- committee ---------- */
.pis-btitle { display: flex; align-items: center; gap: 12px; margin: 0 4px 16px; }
.pis-blogo { width: 48px; height: 48px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--lav); }
.pis-btitle .pis-sm { display: flex; align-items: center; flex-wrap: wrap; }
.pis-read { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; margin-bottom: 16px; padding-bottom: 0; overflow: hidden; }
.pis-read-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--gold3); }
.pis-read-h { margin-top: 4px; font: 700 20px/1.3 var(--fh); letter-spacing: -.005em; text-wrap: balance; }
.pis-read .pis-body { margin-top: 6px; }
.pis-rstats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 8px -20px 0; border-top: 1px solid var(--lav); }
.pis-rstats > div { padding: 12px 20px; border-left: 1px solid var(--lav); }
.pis-rstats > div:first-child { border-left: 0; }
.pis-rstats dt { font-size: 15px; font-weight: 800; }
.pis-rstats dd { font-size: 13px; color: var(--slate); }
.pis-qrow { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pis-qhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pis-reset { flex: none; min-height: 36px; padding: 0 14px; border: 1px solid var(--lav); border-radius: 999px; background: #fff; font: 700 14px/1 var(--fb); cursor: pointer; }
.pis-reset[hidden] { display: none; }
.pis-q { display: grid; grid-template-columns: 20px minmax(0, 1fr) 20px; grid-template-rows: auto auto auto; gap: 6px; margin-top: 12px; }
.pis-qax { font: 800 12px/1.2 var(--fb); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); text-align: center; align-self: center; }
.pis-qax--t { grid-column: 2; grid-row: 1; } .pis-qax--b { grid-column: 2; grid-row: 3; }
.pis-qax--l { grid-column: 1; grid-row: 2; writing-mode: vertical-rl; transform: rotate(180deg); justify-self: center; }
.pis-qax--r { grid-column: 3; grid-row: 2; writing-mode: vertical-rl; justify-self: center; }
.pis-qplot { grid-column: 2; grid-row: 2; position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; aspect-ratio: 4 / 3.1; min-height: 340px; touch-action: none; }
.pis-qcell { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--mist); }
.pis--mist .pis-qcell { background: #fff; }
.pis-qcell.is-hot { box-shadow: inset 0 0 0 1.5px var(--gold); }
.pis-qcell p { font-size: 14px; color: var(--slate); }
.pis-qcell b { font: 700 16px/1.2 var(--fh); color: var(--ink); }
.pis-qline { max-width: 15em; font-size: 12px; line-height: 1.35; color: var(--slate); }
.pis-qcell--tr, .pis-qcell--br { align-items: flex-end; text-align: right; }
.pis-qcell--bl, .pis-qcell--br { justify-content: flex-end; }
.pis-ring { position: absolute; width: 58px; height: 58px; border: 1.5px dashed var(--slate); border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity 200ms; }
.pis-ring.is-moved { opacity: .7; }
.pis-p { position: absolute; z-index: 1; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: none; transform: translate(-50%, -50%); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.pis-p:active { cursor: grabbing; }
.pis-p .pis-av { width: 52px; height: 52px; box-shadow: 0 0 0 3px #fff, var(--sh-sm); transition: box-shadow 160ms, scale 160ms var(--ease); }
.pis-p.is-on { z-index: 2; }
.pis-p.is-on .pis-av { box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px #fff, var(--sh-md); scale: 1.06; }
.pis-p.is-drag { z-index: 3; }
.pis-p.is-drag .pis-av { scale: 1.1; box-shadow: 0 0 0 3px var(--gold), var(--sh-lg); }
.pis-pn { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: #fff; box-shadow: var(--sh-sm); font: 700 12px/1.4 var(--fb); color: var(--ink); white-space: nowrap; pointer-events: none; }
.pis-pd { position: absolute; right: -8px; top: -6px; display: grid; place-items: center; min-width: 26px; height: 20px; padding: 0 4px; border-radius: 999px; box-shadow: 0 0 0 2px #fff; font: 700 12px/1 var(--fh); pointer-events: none; }
.pis-pd--d { background: var(--violet); color: #fff; } .pis-pd--i { background: var(--gold); color: var(--ink); } .pis-pd--s { background: var(--lav); color: var(--ink); } .pis-pd--c { background: var(--slate); color: #fff; }
.pis-drag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--slate); }
.pis-drag > span:not(.pis-soon) { flex: 1 1 240px; }
.pis-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--slate); }
.pis-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.pis-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.pis-dot--s { box-shadow: inset 0 0 0 1px rgba(52,29,153,.35); }
.pis-how { position: sticky; top: 96px; }
.pis-howp[hidden] { display: none; }
.pis-howtop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pis-hownav { display: inline-flex; gap: 6px; }
.pis-hownav button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--lav); border-radius: 10px; background: #fff; cursor: pointer; }
.pis-hownav button:hover { background: var(--mist); }
.pis-howwho { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.pis-howtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pis-stline { margin-top: 8px; }
.pis-howbar { display: grid; gap: 6px; margin-top: 12px; }
.pis-howbar .pis-sm { font-size: 12px; font-weight: 700; white-space: pre-wrap; }
.pis-traits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pis-traits span { padding: 3px 10px; border-radius: 8px; background: var(--mist); font-size: 13px; font-weight: 700; color: var(--ink); }
.pis--mist .pis-traits span { background: #fff; }
.pis-best { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--lav); font-size: 14px; line-height: 1.4; color: var(--slate); }
.pis-best b { color: var(--ink); }
.pis-grow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.pis-scroll { position: relative; margin-top: 12px; overflow-x: auto; overscroll-behavior-x: contain; border-radius: 12px; }
.pis-grid, .pis-match { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 13px; }
.pis-grid { min-width: 440px; table-layout: fixed; }
.pis-grid th, .pis-match th { font-weight: 800; color: var(--slate); text-align: left; vertical-align: middle; }
.pis-grid thead th { padding: 4px 6px; font: 700 14px/1 var(--fh); color: var(--ink); }
.pis-grid thead th:first-child { font: 700 12px/1.3 var(--fb); color: var(--slate); }
.pis-grid tbody th { width: 92px; padding: 4px 2px; font-size: 13px; color: var(--ink); white-space: nowrap; }
.pis-grid .pis-dot { margin-right: 6px; vertical-align: 0; }
.pis-grid td { height: 64px; padding: 6px; border-radius: 8px; background: var(--mist); vertical-align: top; }
.pis--mist .pis-grid td { background: #fff; }
.pis-grid td.is-on { box-shadow: inset 0 0 0 1.5px var(--gold); }
.pis-gname { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--slate); }
.pis-gp { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px 2px 0; font-weight: 700; color: var(--ink); white-space: nowrap; }
.pis-gp .pis-av { width: 20px; height: 20px; }
.pis-match { min-width: 420px; }
.pis-match thead th { padding: 4px; text-align: center; font-size: 13px; color: var(--ink); }
.pis-match thead th .pis-av { margin: 0 auto 4px; }
.pis-match thead th span { display: block; }
.pis-match thead small { display: block; font-size: 12px; font-weight: 600; color: var(--slate); }
.pis-match tbody th { display: flex; align-items: center; gap: 6px; padding: 4px 2px; font-size: 13px; color: var(--ink); white-space: nowrap; }
.pis-match td { height: 36px; border-radius: 8px; background: var(--mist); text-align: center; }
.pis--mist .pis-match td { background: #fff; }
.pis-match td.is-best { background: var(--gold3); box-shadow: inset 0 0 0 1.5px var(--gold); }
.pis-meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; vertical-align: middle; }
.pis-meter i { display: block; width: 5px; border-radius: 2px; background: var(--lav); }
.pis-meter i:nth-child(1) { height: 6px; } .pis-meter i:nth-child(2) { height: 10px; } .pis-meter i:nth-child(3) { height: 14px; }
.pis-meter--1 i:nth-child(1), .pis-meter--2 i:nth-child(-n+2), .pis-meter--3 i { background: var(--ink); }
.pis-best-key { display: inline-block; width: 16px; height: 12px; border-radius: 4px; background: var(--gold3); box-shadow: inset 0 0 0 1.5px var(--gold); }

/* CTA pair at the end of each full view (same pills as the site's hx-btn) */
.pis-ctas { padding: 24px 0 4px; text-align: center; }
.pis-ctas-line { margin-bottom: 16px; font: 700 clamp(20px, 2vw, 24px)/1.25 var(--fh); letter-spacing: -.01em; text-wrap: balance; }
.pis-ctas-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pis-btn { display: inline-flex; align-items: center; gap: 11px; min-height: 50px; border-radius: 999px; font: 700 16px/1 var(--fh); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 150ms, color 150ms, transform 160ms var(--ease); }
.pis-btn--gold, .pis-btn--gold:visited { padding: 7px 26px 7px 7px; background: var(--gold); color: var(--ink); }
.pis-btn--gold:hover { background: var(--gold3); color: var(--ink); transform: translateY(-1px); }
.pis-btn-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; transition: transform 200ms var(--ease); }
.pis-btn-ic .pis-i { width: 16px; height: 16px; stroke-width: 2.4; }
.pis-btn--gold:hover .pis-btn-ic { transform: translateX(3px); }
.pis-btn--line, .pis-btn--line:visited { padding: 0 24px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }
.pis-btn--line:hover { background: var(--ink); color: #fff; }
.pis-btn:active { transform: scale(.96); }

/* Oct 27 (Amar's /pi to-do): one small section link under each glimpse card, next to the Open button. The Open button's ::after stretches over the card, so the link sits above it. */
.pis-crow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: 8px; }
.pis-crow .pis-open { margin-top: 0; }
.pis-cta { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 800; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color 160ms; }
.pis-cta:hover { text-decoration-color: var(--ink); }
.pis-cta svg { transition: transform 200ms var(--ease); }
.pis-cta:hover svg { transform: translateX(3px); }
.pis-cta:active { transform: scale(.98); }

.pis-i--a { width: 16px; height: 16px; }

/* settle-in for the committee faces, once, when the map opens */
.pis-panel.is-in .pis-p { animation: pis-in 360ms var(--ease) both; animation-delay: calc(var(--d) * 45ms + 120ms); }
@keyframes pis-in { from { opacity: 0; scale: .85; } }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .pis-pgrid { grid-template-columns: minmax(0, 1fr); }
  .pis-qrow { grid-template-columns: minmax(0, 1fr); }
  .pis-how { position: static; }
  .pis-grow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 859px) {
  .pis-cards { grid-template-columns: minmax(0, 1fr); }
  .pis-glimpse { height: 244px; }
}
@media (max-width: 767px) {
  .pis { padding: 44px 16px 48px; }
  .pis-head { margin-bottom: 24px; }
  .pis-win { padding: 12px; border-radius: 20px; }
  .pis-box { padding: 16px; }
  .pis-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pis-stats > div:nth-child(3) { border-left: 0; }
  .pis-stats > div:nth-child(n+3) { border-top: 1px solid var(--lav); }
  .pis-rstats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 8px -16px 0; }
  .pis-rstats > div { padding: 12px 16px; }
  .pis-rstats > div:nth-child(3) { border-left: 0; }
  .pis-rstats > div:nth-child(n+3) { border-top: 1px solid var(--lav); }
  .pis-soon-grid, .pis-career, .pis-topics { grid-template-columns: minmax(0, 1fr); }
  .pis-name { font-size: 24px; }
  .pis-tuned { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pis-ptop h3 { font-size: 20px; }
}
@media (max-width: 559px) {
  .pis-glimpse { padding: 12px 12px 0; }
  .pis-gwin { padding: 12px; }
  .pis-gdo { grid-template-columns: minmax(0, 1fr); }
  .pis-cfoot { padding: 16px 8px 8px; }
  .pis-open { justify-self: stretch; justify-content: center; }
  .pis-hero-top { align-items: flex-start; }
  .pis-photo--lg { width: 64px; height: 64px; }
  .pis-dl--2 { grid-template-columns: minmax(0, 1fr); }
  .pis-q { grid-template-columns: 16px minmax(0, 1fr) 16px; gap: 4px; }
  .pis-qplot { aspect-ratio: auto; min-height: 0; height: 380px; }
  .pis-qline { display: none; }
  .pis-qcell { padding: 8px; }
  .pis-qcell b { font-size: 14px; }
  .pis-qax { font-size: 11px; letter-spacing: .04em; }
  .pis-p, .pis-p .pis-av { width: 40px; height: 40px; }
  .pis-ring { width: 46px; height: 46px; }
  .pis-pn { display: none; }
  .pis-pd { min-width: 22px; height: 18px; font-size: 11px; right: -8px; }
  .pis-ctas-row { flex-direction: column; align-items: stretch; }
  .pis-btn { justify-content: center; }
  .pis-btn--gold { padding: 7px 16px 7px 7px; }
  .pis-ptop { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .pis-card, .pis-gwin, .pis-open, .pis-open .pis-chev, .pis-btn, .pis-btn-ic, .pis-close, .pis-p .pis-av, .pis-ring, .pis-seg button { transition: none; }
  .pis-card:hover, .pis-card:hover .pis-gwin, .pis-btn:hover, .pis-btn:active, .pis-open:active { transform: none; }
  .pis-panel.is-anim, .pis-panel.is-in { opacity: 1; transform: none; transition: none; }
  .pis-panel.is-in .pis-p { animation: none; }
}
@media (max-width: 559px) {
  .pis-read { grid-template-columns: minmax(0, 1fr); }
  .pis-read-ic { display: none; }
  .pis-read-h { font-size: 18px; }
}
/* One column (below 1024px): the call guidance moves up to sit right under the overview, the roadmap previews follow the
   live guidance. display: contents lets both columns' sections share one ordered list. */
@media (max-width: 1023px) {
  .pis-main, .pis-rail { display: contents; }
  .pis-o1 { order: 1; } .pis-o2 { order: 2; } .pis-o3 { order: 3; } .pis-o4 { order: 4; } .pis-o5 { order: 5; } .pis-o6 { order: 6; }
  .pis-o7 { order: 7; } .pis-o8 { order: 8; } .pis-o9 { order: 9; } .pis-o10 { order: 10; } .pis-o11 { order: 11; } .pis-o12 { order: 12; }
}

/* =====================================================================================================================
   Oct 28 (F6, AK): profile view mirrors the real public profile; the roadmap grouped once ("Coming Soon To People Research Agent");
   the "more than an LLM" part set out as three rows with its own heading. Rollback: 04-build/backups/oct28-opus-f6/.
   ===================================================================================================================== */
/* section sub-headings (h3) inside the one section: centred, smaller than the h2 */
.pis-subh { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 0 auto 16px; max-width: 760px; text-align: center; font: 700 clamp(22px, 2.2vw, 26px)/1.2 var(--fh); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.pis-subh .pis-soon { margin: 0; vertical-align: 0; }

/* public-profile top bar (logo, Shared profile, Sales insights / PDF / share) */
.pis-appbar--pub { justify-content: flex-start; gap: 12px; margin: 0 4px 16px; }
.pis-logo { display: block; width: auto; height: 22px; }
.pis-shared { padding: 3px 10px; border-radius: 999px; background: var(--lav); font: 800 12px/1.4 var(--fb); color: var(--ink); }
.pis-appbar-r { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.pis-view { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; font-size: 13px; font-weight: 700; color: var(--slate); }
.pis-view i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1px rgba(17,10,51,.25); }
.pis-tool { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--lav); color: var(--ink); }
.pis-tool .pis-i { width: 16px; height: 16px; }

/* header card */
.pis-photo-wrap { position: relative; flex: none; }
.pis-libadge { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--ink); box-shadow: 0 0 0 2px #fff; color: #fff; }
.pis-li { width: 12px; height: 12px; fill: currentColor; }
.pis-hero > .pis-body:first-of-type { margin-top: 16px; }
.pis-hero > .pis-body + .pis-body { margin-top: 8px; }
.pis-stats dd { overflow-wrap: anywhere; }

/* topics: predicted marker as the product shows it, a small tag before the line */
.pis-pred { display: inline-block; margin-right: 2px; padding: 0 6px; border-radius: 6px; background: var(--lav); font: 800 11px/1.6 var(--fb); color: var(--ink); vertical-align: 1px; }
.pis-topics li > span { display: block; }

/* two boxes side by side (Career + In the press, Education + Social presence) */
.pis-pair2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pis-pair2 .pis-tl { margin-bottom: 0; }
.pis-empty { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 14px; border: 1px dashed var(--lav); border-radius: 12px; font-size: 14px; line-height: 1.45; color: var(--slate); }
.pis-empty b { display: block; color: var(--ink); }
.pis-empty .pis-i { margin-top: 1px; color: var(--violet); }
.pis-social { display: grid; place-items: center; width: 40px; height: 40px; margin-top: 12px; border-radius: 10px; background: var(--ink); color: #fff; }
.pis-social .pis-li { width: 18px; height: 18px; }

/* public DISC profile: ring + the two leading styles */
.pis-pub { font: 600 15px/1 var(--fb); color: var(--slate); }
.pis-discp { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 16px; }
.pis-discring { display: block; width: 120px; height: 120px; }
.pis-disct { display: grid; gap: 12px; }
.pis-disct > div + div { padding-top: 12px; border-top: 1px solid var(--lav); }
.pis-disct dt { font: 700 18px/1.3 var(--fh); color: var(--ink); }
.pis-disct dd { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--slate); }

/* call guidance: Do and Do not boxes first (as the product shows them), then the other lines */
.pis-dodont { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
/* outlined, not filled (AK rule: no cream / gold-300 info boxes); the tick and cross carry the meaning */
.pis-dobox { display: grid; gap: 6px; align-content: start; padding: 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--lav); font-size: 14px; line-height: 1.45; color: var(--ink); }
.pis--white .pis-dobox { background: var(--mist); }
.pis-dobox b { display: inline-flex; align-items: center; gap: 6px; font: 800 12px/1.4 var(--fb); letter-spacing: .08em; text-transform: uppercase; }
.pis-dobox .pis-i--do, .pis-dobox .pis-i--no { width: 18px; height: 18px; margin: 0; }
.pis-more { display: grid; gap: 8px; margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--slate); }
.pis-dl--inline > div { display: block; }
.pis-dl--inline dt, .pis-dl--inline dd { display: inline; }
.pis-dl--inline dt::after { content: ": "; }
.pis-dl--inline { gap: 8px; font-size: 14px; }

/* "Coming soon" lines inside the profile and committee views (AK's second look, Oct 28: no separate roadmap panel) */
.pis-soonline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 16px 4px 0; padding-top: 12px; border-top: 1px dashed var(--lav); font-size: 14px; line-height: 1.5; color: var(--slate); text-wrap: pretty; }
.pis-soonline > span:last-child { flex: 1 1 260px; }
.pis-soonline .pis-soon { margin: 0; }
.pis-soonline--top { margin: -4px 4px 16px; padding: 0; border: 0; }
.pis-new { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--gold); font: 800 12px/1.5 var(--fb); color: var(--ink); white-space: nowrap; vertical-align: 1px; }

/* Pi Signals on this committee: the app feed's look, compact */
.pis-sig { margin-top: 16px; }
.pis-sighead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.pis-sighead .pis-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pis-sigfresh { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.pis-sigfresh .pis-i { width: 15px; height: 15px; }
.pis-sigtypes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pis-sigtypes > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--lav); background: #fff; font: 700 13px/1.3 var(--fb); color: var(--ink); white-space: nowrap; }
.pis-sigtypes > span.is-on { background: var(--ink); box-shadow: none; color: #fff; }
.pis-sigtypes em { font-weight: 600; opacity: .72; font-variant-numeric: tabular-nums; }
.pis-sigdot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.pis-sigdot--role { background: var(--violet); } .pis-sigdot--job { background: var(--slate); } .pis-sigdot--post { background: var(--gold); } .pis-sigdot--rival { background: var(--ink); }
.pis-sigl { display: grid; gap: 8px; margin-top: 12px; }
.pis-sigl > li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; border-radius: 12px; background: var(--mist); }
.pis--mist .pis-sigl > li { background: #fff; }
.pis--white .pis-box .pis-sigl > li { background: var(--mist); }
.pis-sigav { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--lav); font: 700 16px/1 var(--fh); color: var(--ink); }
.pis-sigm { display: grid; gap: 2px; min-width: 0; }
.pis-sigwho { font-size: 13px; color: var(--slate); }
.pis-sigwho b { color: var(--ink); font-weight: 800; }
.pis-sigh { font: 700 16px/1.3 var(--fh); color: var(--ink); text-wrap: balance; }
.pis-sigs { font-size: 14px; line-height: 1.45; color: var(--slate); text-wrap: pretty; }
.pis-sigt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pis-sigtag { display: inline-flex; overflow: hidden; border-radius: 6px; font: 800 11px/1 var(--fb); }
.pis-sigtag b { padding: 5px 7px; background: var(--ink); color: #fff; letter-spacing: .06em; text-transform: uppercase; }
.pis-sigtag span { padding: 5px 8px; background: var(--lav); color: var(--ink); }
.pis-sigty { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--lav); font: 700 11px/1.1 var(--fb); color: var(--ink); }
.pis-sigmeta { display: grid; justify-items: end; align-content: start; gap: 6px; font-size: 12px; font-weight: 600; color: var(--slate); white-space: nowrap; }
.pis-sigimp { display: inline-flex; gap: 3px; margin-bottom: 2px; }
.pis-sigimp i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--lav); }
.pis-sigimp i.on { background: var(--gold); box-shadow: inset 0 0 0 1px rgba(17,10,51,.25); }
.pis-sigli { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--violet); }
.pis-sigli .pis-li { width: 12px; height: 12px; }
.pis-sigdate { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.pis-sigdate .pis-i { width: 13px; height: 13px; }
@media (max-width: 559px) {
  .pis-sigl > li { grid-template-columns: 32px minmax(0, 1fr); padding: 12px; }
  .pis-sigav { width: 32px; height: 32px; }
  .pis-sigmeta { grid-column: 2; display: flex; flex-wrap: wrap; justify-items: start; gap: 4px 12px; margin-top: 4px; }
  .pis-sigimp { margin: 0; align-self: center; }
}

/* what an LLM gives vs what People Research Agent gives */
.pis-llm { margin-top: 32px; }
.pis-vs { border: 1px solid var(--lav); border-radius: 24px; background: var(--card); overflow: hidden; }
.pis-vs-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.25fr); }
.pis-vs-row + .pis-vs-row { border-top: 1px solid var(--lav); }
.pis-vs-row > span { padding: 12px 20px; }
.pis-vs-row--head > span { padding-top: 10px; padding-bottom: 10px; font: 700 16px/1.3 var(--fh); color: var(--ink); }
.pis-vs-lab { font: 700 16px/1.35 var(--fh); color: var(--ink); }
.pis-vs-c { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--slate); }
.pis-vs-c--pi { background: var(--band); color: var(--ink); font-weight: 600; }
.pis-vs-row--head .pis-vs-c--pi { gap: 8px; align-items: center; }
.pis-vs-c .pis-mark { width: 18px; height: 18px; margin: 0; }
.pis-vs-who { display: none; }
.pis-vs-h { margin: 0; font: 700 18px/1.25 var(--fh); letter-spacing: -.01em; color: var(--ink); }
.pis-vs-c .pis-i--do, .pis-vs-c .pis-i--no { width: 20px; height: 20px; }
.pis-llm-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 32px; margin-top: 12px; }
.pis-llm-report a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 800; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color 160ms; }
.pis-llm-report a:hover { text-decoration-color: var(--ink); }
.pis-llm-askw { display: grid; gap: 6px; justify-items: end; }
.pis-llm-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.pis-llm-asklab { font-weight: 700; color: var(--slate); }
.pis-llm-teaser { font-size: 14px; line-height: 1.5; color: var(--slate); text-align: right; text-wrap: pretty; }
.pis-ask { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; font: 700 15px/1 var(--fh); color: var(--ink); text-decoration: none; transition: background-color 160ms, color 160ms, transform 160ms var(--ease); }
.pis-ask img { display: block; width: 16px; height: 16px; flex: none; }
.pis-ask:hover { background: var(--ink); color: #fff; }
.pis-ask:hover img[src$="chatgpt.svg"] { filter: brightness(0) invert(1); }
.pis-ask:active { transform: scale(.96); }
.pis-llm :focus-visible, .pis-cta:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
.pis-ask:focus-visible { border-radius: 999px; }

@media (max-width: 1023px) {
  .pis-pair2 { display: contents; }
  .pis-pair2.pis-o8 > .pis-box { order: 8; } .pis-pair2.pis-o9 > .pis-box { order: 9; }
}
@media (max-width: 859px) {
  .pis-llm-foot { flex-direction: column; }
  .pis-llm-askw { justify-items: start; }
  .pis-llm-ask { justify-content: flex-start; }
  .pis-llm-asklab { flex-basis: 100%; }
  .pis-llm-teaser { text-align: left; }
}
@media (max-width: 767px) {
  .pis-vs-row { grid-template-columns: minmax(0, 1fr); }
  .pis-vs-row--head > .pis-vs-c { display: none; }
  .pis-vs-row--head > .pis-vs-lab { padding-bottom: 10px; }
  .pis-vs-row > span { padding: 4px 16px; }
  .pis-vs-row > .pis-vs-lab { padding-top: 12px; }
  .pis-vs-row > .pis-vs-c--pi { padding-bottom: 12px; background: transparent; }
  .pis-vs-c { font-size: 14px; }
  .pis-vs-who { display: inline; font-weight: 800; color: var(--ink); }
  .pis-llm { margin-top: 32px; }
  .pis-discp { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
  .pis-discring { width: 88px; height: 88px; }
}
@media (max-width: 559px) {
  .pis-ask { flex: 1 1 auto; justify-content: center; }
  .pis-llm-ask { width: 100%; }
  .pis-llm-asklab { flex-basis: 100%; }
  .pis-crow { gap: 0 24px; }
  .pis-crow .pis-open { justify-self: stretch; }
  .pis-dodont { grid-template-columns: minmax(0, 1fr); }
  .pis-discp { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .pis-view { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pis-cta, .pis-cta svg, .pis-ask, .pis-llm-report a { transition: none; } .pis-cta:hover svg, .pis-cta:active, .pis-ask:active { transform: none; } }

/* AK Nov 4: two columns (words + free try box left, the samples right with a toggle); "Click to expand" is a light hint, not a button */
.pis-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px 56px; align-items: center; max-width: 1152px; margin: 0 auto; }
.pis-words .pis-head { margin: 0; text-align: left; }
.pis-words .pis-head h2 { margin: 0; }
.pis-try { margin-top: 24px; }
.pis-tabs { display: inline-flex; gap: 4px; margin: 0 0 14px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--lav); }
.pis-tabs button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 700 14px/1 Manrope, Arial, sans-serif; cursor: pointer; }
.pis-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.pis-tabs button:focus-visible { outline: 2px solid #FFC61E; outline-offset: 2px; }
.pis-show .pis-cards { grid-template-columns: minmax(0, 1fr); }
.pis-cards[data-show="profile"] .pis-card--bcm, .pis-cards[data-show="bcm"] .pis-card--profile { display: none; }
.pis-show .pis-open { border: 0; min-height: 32px; padding: 0 12px; background: var(--mist, #F6F4FF); color: #341D99; font-size: 13px; }
@media (hover: hover) and (pointer: fine) { .pis-show .pis-open:hover { background: #341D99; color: #fff; } }
@media (max-width: 899px) { .pis-split { grid-template-columns: minmax(0, 1fr); } .pis-words .pis-head { text-align: center; } }
.pis-try { padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px #DDD6FF, 0 12px 32px -16px rgba(17,10,51,.25); text-align: left; }

.pis-head--full { max-width: 1152px; margin: 0 auto clamp(28px, 3vw, 40px) !important; text-align: center; }
.pis-head--full h2 { max-width: none !important; }

/* r3 (Amar, Nov 5): each sample card shows a walk-through tour of the real screen; Click to expand opens the whole screen with numbered stops */
.pis-tour { position: relative; z-index: 1; padding: 12px 12px 4px; border-radius: 16px; background: var(--mist); } /* above the card-wide Click to expand target, so the tour steps and pause work */
.pis--white .pis-tour { background: #fff; }
.pis-still { padding: 16px; border: 1px solid var(--lav); border-radius: 20px; background: #fff; }