/* Humantic AI · /start by role (Website V2). Sections: role (hero + demo moment), products (cream),
   watch (ink), proof (white), use cases (mist), FAQ (white), close (cream). Brand tokens locked Oct 13.
   Heading rules carry body.hai to outrank hai-brand.css h1-h4 defaults. */

.sr { --ink:#110A33; --ink-2:#1E1650; --violet:#341D99; --gold:#FFC61E; --gold-3:#FFE8A5; --lav:#DDD6FF; --mist:#F6F4FF; --cream:#FFF4D2; --slate:#5B6478; --line:#E6E8EF;
  --ease: cubic-bezier(.16,1,.3,1); --disp: "Cabinet Grotesk", 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);
  font-family: Manrope, Arial, sans-serif; color: var(--ink); }
html:has(body.sr-page), body.sr-page { overflow-x: clip; }
body.sr-page { margin: 0; background: #fff; }
.sr *, .sr *::before, .sr *::after { box-sizing: border-box; }
.sr p { text-wrap: pretty; }
.sr [id] { scroll-margin-top: 96px; }
.sr-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip: rect(0 0 0 0); white-space:nowrap; border:0; }
.sr-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.sr a:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 999px; }
body.hai .sr-h2 { margin: 0 0 48px; text-align:center; font: 700 clamp(27px, 3.4vw, 44px)/1.12 var(--disp); letter-spacing:-.035em; color: inherit; text-wrap: balance; }
.sr-sec { padding: 64px 0; }
#get-started { padding-top: 0; }
.sr-sec--out { padding: 64px 0 72px; }
.sr-sec--out .sr-out { margin-top: 32px; }
.sr-sec--cream { background: var(--cream); }
.sr-sec--mist { background: var(--mist); }
.sr-sec--ink { background: var(--ink); color:#fff; }
.sr-cta { display:flex; flex-wrap:wrap; gap: 12px; margin-top: 28px; }
.sr-chip { display:inline-flex; align-items:center; padding: 4px 10px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 700 12px/16px Manrope, Arial, sans-serif; white-space:nowrap; }

/* Role picker: real links, one per role URL; the current one is ink */
.sr-hero { padding: clamp(84px, 7vw, 96px) 0 clamp(32px, 4vw, 48px); }
.sr-pick { display:flex; align-items:center; gap: 12px; margin: 0 0 clamp(20px, 2.4vw, 32px); }
.sr-pick__lab { flex:none; font: 700 16px/1 var(--disp); color: var(--slate); }
.sr-pick ul { list-style:none; margin:0; padding: 4px; display:flex; gap: 4px; overflow-x:auto; scrollbar-width:none; background: var(--mist); border-radius: 999px; }
.sr-pick ul::-webkit-scrollbar { display:none; }
.sr-pill { display:inline-flex; align-items:center; min-height: 44px; padding: 0 18px; border-radius: 999px; font: 700 15px/1 Manrope, Arial, sans-serif; color: var(--ink); text-decoration:none; white-space:nowrap; transition: background-color .2s, color .2s, transform .16s var(--ease); }
@media (hover: hover) { .sr-pill:not(.is-on):hover { background:#fff; } }
.sr-pill:active { transform: scale(.96); }
.sr-pill.is-on { background: var(--ink); color:#fff; box-shadow: var(--sh-sm); }

/* Hero */
.sr-hero__grid { display:grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items:center; }
/* Krish review Oct 19 (K-229): the H1 is six words or fewer and sits in two or three lines, with the sentence and both buttons above the fold at 1280x720 and 1366x768 */
body.hai .sr-copy h1 { margin:0; font: 700 clamp(34px, 4.2vw, 56px)/1.06 var(--disp); letter-spacing:-.035em; color: var(--ink); text-wrap: balance; overflow-wrap:anywhere; }
.sr-lead { margin: 20px 0 0; max-width: 44ch; font-size: 18px; line-height: 1.55; color: var(--ink); }
.sr-define { margin: 16px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--slate); }

/* Hero panel (Oct 20 roles-anim; AK: the panels were "static and text-heavy, long right-hand lines"). Fewer words, more UI: one calm
   card per role built from small real elements (avatars, DISC tiles, intent meters, a fit ring, a stance track, page chips) with
   names and two or three word values. Static and finished on load (Krish K-223, K-227). Markup: views/v2/start/hero-panel.ejs.
   The panel adapts to its own width with container queries. */
.sv { margin: 0; align-self: center; }
.sv-panel { container-type: inline-size; background: #fff; border-radius: 24px; box-shadow: var(--sh-lg), 0 0 0 1px var(--line); overflow: hidden; }
:where(.sv) :where(p, ul, ol, dl, dd) { margin: 0; padding: 0; list-style: none; }
.sv em { font-style: normal; }
.sv-bar { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 28px; background: var(--mist); box-shadow: inset 0 -1px 0 var(--line); font: 800 13px/18px Manrope, Arial, sans-serif; color: var(--ink); }
.sv-bar__ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: #fff; box-shadow: var(--sh-sm); }
.sv-bar__live { width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--gold-3); }
.sv-body { display: grid; gap: 16px; padding: 24px 28px 28px; font-size: 14px; line-height: 20px; color: var(--ink); }
.sv-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font: 700 22px/28px var(--disp); letter-spacing: -.02em; }
.sv-chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 800 12px/16px Manrope, Arial, sans-serif; letter-spacing: .02em; white-space: nowrap; }
.sv-live { display: inline-flex; align-items: center; gap: 6px; font: 800 12px/16px Manrope, Arial, sans-serif; }
.sv-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--gold-3); }
.sv-av { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold-3); color: var(--ink); font: 800 14px/1 Manrope, Arial, sans-serif; font-style: normal; }
.sv-av--sm { width: 36px; height: 36px; font-size: 12px; }
.sv-av--xs { width: 28px; height: 28px; font-size: 12px; margin-left: auto; }
.sv-av--q { background: var(--mist); color: var(--slate); box-shadow: inset 0 0 0 1px var(--line); }
.sv-logo { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--lav); font: 700 20px/1 var(--disp); font-style: normal; }
.sv-disc { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--gold); color: var(--ink); font: 700 16px/1 var(--disp); }
.sv-num { font: 700 18px/1 var(--disp); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.sv-soft { font-size: 13px; line-height: 18px; color: var(--slate); white-space: nowrap; }
.sv-meter { display: inline-flex; gap: 3px; }
.sv-meter i { width: 12px; height: 10px; border-radius: 3px; background: var(--mist); box-shadow: inset 0 0 0 1px rgba(17,10,51,.16); }
.sv-meter i.on { background: var(--gold); box-shadow: none; }
.sv-score { display: inline-flex; align-items: center; gap: 8px; }
.sv-ring { position: relative; flex: none; display: inline-grid; place-items: center; width: var(--sz); height: var(--sz); }
.sv-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sv-ring circle { fill: none; stroke: var(--mist); stroke-width: 3.5; }
.sv-ring circle.v { stroke: var(--gold); stroke-linecap: round; }
.sv-ring b { font: 800 13px/1 Manrope, Arial, sans-serif; font-variant-numeric: tabular-nums; }
/* a row of three or four: avatar or icon, a name with one small line, then values */
.sv-head { display: flex; align-items: center; gap: 12px; }
.sv-head > p { display: grid; min-width: 0; flex: 1; }
.sv-head b, .sv-rows b, .sv-people b, .sv-seat b { font: 700 17px/22px var(--disp); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-head > p > span, .sv-rows p > span, .sv-people p > span, .sv-seat > span { font-size: 13px; line-height: 18px; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-rows { display: grid; }
.sv-rows > li { display: flex; align-items: center; gap: 12px; padding: 12px 0; box-shadow: inset 0 1px 0 var(--line); }
.sv-rows > li:first-child { box-shadow: none; padding-top: 4px; }
.sv-rows > li > p { display: grid; min-width: 0; flex: 1; }
.sv-rows > li.is-dim b { color: var(--slate); }
.sv-pic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--mist); }
.sv-crm { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; border-radius: 999px; background: var(--gold-3); font: 800 12px/16px Manrope, Arial, sans-serif; }
.sv-crm svg, .sv-tick svg { padding: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); color: var(--gold); }
.sv-path { padding: 2px 8px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(17,10,51,.16); font: 700 12px/16px Manrope, Arial, sans-serif; white-space: nowrap; }
.sv-gold { padding: 2px 10px; border-radius: 999px; background: var(--gold); font: 800 12px/16px Manrope, Arial, sans-serif; white-space: nowrap; }
/* AE: two people side by side, each with their DISC and a two word tip */
.sv-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sv-people > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 14px; border-radius: 16px; background: var(--mist); }
.sv-people p { display: grid; min-width: 0; }
.sv-tip { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 700 13px/18px Manrope, Arial, sans-serif; }
.sv-done { display: flex; align-items: center; gap: 8px; padding-top: 16px; box-shadow: inset 0 1px 0 var(--line); font-size: 14px; }
.sv-done b { font-weight: 800; }
.sv-tick { display: inline-grid; }
.sv-tick svg { width: 20px; height: 20px; padding: 3px; }
/* sales leader: the committee on a Skeptic to Crusader track */
.sv-track { display: grid; gap: 12px; padding: 16px 16px 14px; border-radius: 16px; background: var(--mist); }
.sv-track__line { display: grid; grid-template-columns: repeat(4, 1fr); height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; }
.sv-track__line .z0 { background: var(--lav); }
.sv-track__line .z1 { background: #fff; box-shadow: inset 0 0 0 1px rgba(17,10,51,.16); }
.sv-track__line .z2 { background: var(--gold-3); }
.sv-track__line .z3 { background: var(--gold); }
.sv-track ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sv-track li { display: grid; justify-items: center; gap: 6px; text-align: center; }
.sv-track li b { font: 700 15px/20px var(--disp); }
.sv-track li .sv-av { box-shadow: 0 0 0 3px #fff; }
.sv-track li.is-on .sv-av { box-shadow: 0 0 0 3px var(--ink); }
.sv-avw { position: relative; display: inline-grid; }
.sv-track li .sv-disc { position: absolute; right: -8px; bottom: -4px; width: 22px; height: 22px; font-size: 12px; border-radius: 7px; box-shadow: 0 0 0 2px var(--mist); }
.sv-st { padding: 2px 8px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(17,10,51,.16); font: 800 12px/16px Manrope, Arial, sans-serif; white-space: nowrap; }
.sv-track .z0 .sv-st { background: var(--lav); box-shadow: none; }
.sv-track .z2 .sv-st { background: var(--gold-3); box-shadow: none; }
.sv-track .z3 .sv-st { background: var(--gold); box-shadow: none; }
.sv-sig { display: flex; align-items: center; gap: 10px; }
.sv-sig > b { font: 700 16px/20px var(--disp); min-width: 0; }
/* account manager: the seat changing hands */
.sv-hand { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.sv-seat { display: grid; justify-items: center; gap: 4px; padding: 16px 12px; border-radius: 16px; text-align: center; min-width: 0; }
.sv-seat b { max-width: 100%; }
.sv-seat.is-out { box-shadow: inset 0 0 0 1px var(--line); }
.sv-seat.is-out .sv-av { background: var(--mist); color: var(--slate); }
.sv-seat.is-out b { color: var(--slate); }
.sv-seat.is-in { background: var(--mist); }
.sv-seat.is-in .sv-av { box-shadow: 0 0 0 3px var(--gold); }
.sv-arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--gold); }
/* ABM: three kinds of intent as meters */
.sv-kinds { display: grid; gap: 12px; }
.sv-kinds > li { display: grid; grid-template-columns: 76px 64px minmax(0, 1fr) 32px; align-items: center; gap: 12px; }
.sv-kinds > li > b:first-child { font: 700 16px/20px var(--disp); }
.sv-kinds > li > span { font-size: 13px; color: var(--slate); }
.sv-bar2 { display: block; height: 10px; border-radius: 5px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.sv-bar2 s { display: block; width: var(--w); height: 100%; border-radius: 5px; background: var(--gold); }
.sv-kinds > li:nth-child(2) .sv-bar2 s { background: var(--gold-3); box-shadow: inset 0 0 0 1px rgba(17,10,51,.1); }
.sv-kinds > li:nth-child(3) .sv-bar2 s { background: var(--lav); }
/* narrow panels (phones) */
@container (max-width: 440px) {
  .sv-bar { padding-inline: 20px; }
  .sv-body { padding: 20px 20px 24px; gap: 14px; }
  .sv-title { font-size: 20px; }
  .sv-people { grid-template-columns: minmax(0, 1fr); }
  .sv-rows--ev .sv-soft { display: none; }
  .sv-rows .sv-score .sv-meter { display: none; }
  .sv-rows > li { gap: 10px; }
  .sv-rows > li .sv-gold { display: none; }
  .sv-kinds > li { grid-template-columns: 72px minmax(0, 1fr) 28px; }
  .sv-kinds > li > span { display: none; }
  .sv-track li b { font-size: 13px; }
  .sv-hand { gap: 8px; }
  .sv-seat { padding: 12px 8px; }
  .sv-seat b { font-size: 15px; white-space: normal; }
  .sv-sig { flex-wrap: wrap; }
  .sv-sig .sv-av--xs { display: none; }
}

/* Krish review Oct 19 (K-227): no page-wide fade on a role tab change. start.js swaps the next role from its prefetched page in one frame. */

/* Hallmark · component: role app windows · genre: modern-minimal · theme: Humantic brand (locked Oct 13)
 * states: default (finished frame) · playing · paused · off-screen · reduced motion
 */
/* ---------- The role's animation (Oct 20 roles-anim; AK: "the by-role animations need fixing", "elements inside, not solid colours") ----------
   One small recreation of the real Humantic AI app per role (views/v2/start/play-ui.ejs), each a different product moment, on the bar
   AK approved for the product heroes: the app's structure, small real elements in every panel, a storyboard that loops on its own
   (9.6 to 10.8 s) and a pause button.
   AE Agent Pi "how to work" then the Agent Emi follow-up · BDR Vidar visitor then the Agent Emi email, every line tagged by source ·
   GTM MCP calls streaming JSON into a CRM record · sales leader pipeline beside the Agent Miia report and Signals · account manager
   Signals feed with a Streams people move · ABM Iriis ranked accounts with bands, re-ranking · growth Vidar anonymous to named,
   Enrichments, Streams hiring.
   The window mirrors the app (left rail, white cards, pill chips) in website brand colours and type, and sizes itself with container
   queries, so it reads the same in the centre column and beside the GTM and ABM link lists. */
.sr-play .sr-h2 { margin-bottom: 40px; }
.sr-play h3 { margin: 0; }
body.hai .sr-play h3 { font: 700 19px/1.15 var(--disp); letter-spacing: -.02em; color: inherit; text-wrap: balance; }
.sr-play a:focus-visible { border-radius: 6px; }
.sr-out__lab, .ua-lab, .ua-crumb, .ua-do__h, .ua-rank__hd, .ua-crm dt, .ua-chart .ua-lab {
  font: 800 12px/16px Manrope, Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--slate);
}
.sr-lane { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 800 12px/16px Manrope, Arial, sans-serif; letter-spacing: .04em; } /* brand: small chips lavender + ink, never ink chips */

.sr-pair { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 48px; max-width: 1120px; margin: 0 auto; align-items: center; }
.sr-jobs ul { list-style: none; margin: 12px 0 0; padding: 0; }
.sr-jobs li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(17,10,51,.1); }
.sr-jobs li:last-child { border-bottom: 1px solid rgba(17,10,51,.1); }
.sr-jobs li > a:not(.sr-jobs__p), .sr-plays li > a, .sr-jobs p a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sr-jobs__p { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--slate) !important; text-underline-offset: 3px; }
.sr-jobs p { margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: var(--slate); }
.sr-plays__in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; font: 700 17px/1.3 var(--disp); }
.sr-plays__in > span:last-child { text-wrap: balance; }
.sr-plays__in a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 4px; }
.sr-plays ol { list-style: none; margin: 0; padding: 0; }
.sr-plays li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 4px; padding: 14px 0; border-top: 1px solid rgba(17,10,51,.1); }
.sr-plays li > a { grid-column: 2; grid-row: 1; align-self: center; font-size: 14px; white-space: nowrap; }
.sr-hostrow { display: inline-flex; gap: 3px; }
.sr-hostrow img { display: block; width: 18px; height: 18px; border-radius: 4px; object-fit: contain; outline: 1px solid rgba(0,0,0,.08); outline-offset: -1px; }
/* Oct 20 (roles-linkrows): one plain-text line of copy under a role animation, no links */
.sr-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; max-width: 640px; margin: 24px auto 0; text-align: center; font-size: 15px; line-height: 1.55; color: var(--slate); text-wrap: balance; }

/* The app window */
.ua { --io: cubic-bezier(.65, 0, .35, 1); --wr: cubic-bezier(.35, .2, .2, 1); position: relative; container-type: inline-size; max-width: 820px; margin: 0 auto; }
.sr-play .sr-pair .ua { max-width: none; margin: 0; }
.ua :where(p, ul, ol, dl, dd, dt) { margin: 0; padding: 0; list-style: none; }
.ua em { font-style: normal; }
.ua-win { display: grid; grid-template-columns: 60px minmax(0, 1fr); background: #fff; border-radius: 24px; box-shadow: var(--sh-md), 0 0 0 1px var(--line); overflow: hidden; color: var(--ink); font-size: 14px; line-height: 20px; }
.ua-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0 64px; background: var(--mist); box-shadow: inset -1px 0 0 var(--line); }
.ua-rail > svg { margin-bottom: 10px; }
.ua-rail i { display: grid; place-items: center; width: 38px; height: 34px; border-radius: 11px; color: var(--slate); }
.ua-rail i.on { background: #fff; color: var(--ink); box-shadow: var(--sh-sm); }
.ua-main { position: relative; display: grid; align-content: start; gap: 14px; min-width: 0; padding: 20px 24px 24px; transition: opacity .24s var(--ease); }
.ua.is-out .ua-main { opacity: 0; }
.ua-soft { color: var(--slate); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ua-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ua-h > b { font: 700 18px/24px var(--disp); letter-spacing: -.02em; }
.ua-h > .ua-soft { margin-left: auto; }
.ua-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ua-crumb span { color: rgba(91,100,120,.6); }
.ua-crumb b { color: var(--ink); font-weight: 800; }

/* The pause button: bottom of the rail; top right on the code window; bottom right on phones */
.ua-pause { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: #fff; cursor: pointer; transition: transform .16s var(--ease), background-color .2s; }
.ua-pause::after { content: ""; position: absolute; inset: -6px; } /* 44px hit area */
.ua-pause[hidden] { display: none; }
.ua-pause:active { transform: scale(.96); }
.ua-pause:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.ua-pause svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ua-pause .i-play { display: none; fill: currentColor; stroke-width: 1.6; }
.ua-pause[aria-pressed="true"] .i-play { display: block; }
.ua-pause[aria-pressed="true"] .i-pause { display: none; }
.ua--mcp .ua-pause { left: auto; right: 16px; top: 14px; bottom: auto; background: var(--lav); color: var(--ink); }
.ua--mcp .ua-pause:focus-visible { outline-color: var(--gold); }
@media (pointer: coarse), (max-width: 767px) { .ua-pause { width: 44px; height: 44px; } .ua-pause::after { inset: 0; } }

/* shared parts: avatars, logos, chips, DISC, ticks, rings */
.ua-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold-3); color: var(--ink); font: 800 13px/1 Manrope, Arial, sans-serif; font-style: normal; }
.ua-av--lg { width: 48px; height: 48px; font-size: 15px; }
.ua-av--sm { width: 32px; height: 32px; font-size: 12px; }
.ua-av--q { background: #fff; color: var(--slate); box-shadow: inset 0 0 0 1.5px rgba(17,10,51,.18); }
.ua-av--ring { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gold); }
.ua-logo { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--lav); color: var(--ink); font: 700 18px/1 var(--disp); font-style: normal; }
.ua-logo--sm { width: 28px; height: 28px; border-radius: 9px; font-size: 14px; }
.ua-chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 800 12px/16px Manrope, Arial, sans-serif; white-space: nowrap; }
.ua-disc { flex: none; display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 8px; background: var(--gold); color: var(--ink); font: 700 15px/1 var(--disp); }
.ua-disc--sm { min-width: 22px; height: 22px; padding: 0 4px; border-radius: 6px; font-size: 13px; }
.ua-stance, .ua-type, .ua-path { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(17,10,51,.16); font: 700 12px/16px Manrope, Arial, sans-serif; color: var(--ink); white-space: nowrap; }
.ua-stance { background: var(--lav); box-shadow: none; font-weight: 800; }
.ua-type--gold { background: var(--gold-3); box-shadow: none; }
.ua-gold { display: inline-flex; padding: 2px 10px; border-radius: 999px; background: var(--gold); font: 800 12px/16px Manrope, Arial, sans-serif; color: var(--ink); white-space: nowrap; }
.ua-ok { display: inline-flex; align-items: center; gap: 6px; font: 800 13px/18px Manrope, Arial, sans-serif; color: var(--ink); white-space: nowrap; }
.ua-ok svg, .ua-do svg, .ua-tick svg, .ua-sync svg, .ua-ver svg, .ua-dot svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--ink); color: var(--gold); }
.ua-btn { display: inline-grid; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--gold); color: var(--ink); font: 800 12px/16px Manrope, Arial, sans-serif; white-space: nowrap; }
.ua-btn > span, .ua-btn { grid-auto-flow: column; gap: 6px; }
.ua-btn > span { display: inline-flex; align-items: center; gap: 6px; grid-area: 1 / 1; transition: opacity .2s var(--ease), transform .24s var(--ease); }
.ua-row__t { display: grid; min-width: 0; }
.ua-row__t b { font: 700 15px/20px var(--disp); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-row__t > span { display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--slate); font-size: 13px; line-height: 18px; }
.ua-imp { flex: none; display: inline-flex; gap: 3px; }
.ua-imp i { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(17,10,51,.3); }
.ua-imp i.on { background: var(--ink); box-shadow: none; }
.ua-live { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--gold-3); }
.ua-livetag { display: inline-flex; align-items: center; gap: 8px; font: 800 12px/16px Manrope, Arial, sans-serif; color: var(--ink); }
.ua-ring { position: relative; flex: none; display: inline-grid; place-items: center; width: var(--sz); height: var(--sz); }
.ua-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ua-ring circle { fill: none; stroke: var(--mist); stroke-width: 3.5; }
.ua-ring circle.v { stroke: var(--gold); stroke-linecap: round; stroke-dashoffset: var(--off); }
.ua-ring b { font: 800 13px/1 Manrope, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.ua-lab { display: block; }
.ua-subj { display: grid; gap: 2px; }
.ua-subj b { font-size: 15px; line-height: 20px; }
.ua-body { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--mist); font-size: 13.5px; line-height: 20px; }
.ua-to { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ua-to > b { font-weight: 800; }
.ua-to > .ua-chip { margin-left: auto; }

/* AE · Agent Pi's "How to work" card, then the Agent Emi follow-up written in his style */
.ua-ae { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.ua-left { display: grid; gap: 12px; min-width: 0; }
.ua-prof { display: grid; gap: 14px; padding: 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.ua-meet { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--cream); }
.ua-meet > .ua-row__t { flex: 1; }
.ua-cal { flex: none; display: grid; justify-items: center; width: 44px; padding: 4px 0 6px; border-radius: 10px; background: #fff; box-shadow: var(--sh-sm); }
.ua-cal small { font: 800 12px/16px Manrope, Arial, sans-serif; color: var(--slate); text-transform: uppercase; }
.ua-cal b { font: 700 13px/16px var(--disp); font-variant-numeric: tabular-nums; }
.ua-stack { display: inline-flex; padding-left: 8px; }
.ua-av--xs { width: 28px; height: 28px; margin-left: -4px; font-size: 12px; box-shadow: 0 0 0 2px var(--cream); }
.ua-av--xs.is-me { background: var(--gold); }
.ua-crumb__x { display: inline-grid; }
.ua-crumb__x > span { grid-area: 1 / 1; color: var(--ink); transition: opacity .3s var(--ease); }
.ua-crumb__x .cw { opacity: 0; }
.ua--pi[data-scene="a"] .ua-crumb__x .cw { opacity: 1; }
.ua--pi[data-scene="a"] .ua-crumb__x .ce { opacity: 0; }
.ua-who { display: flex; align-items: center; gap: 12px; }
.ua-who > p { display: grid; min-width: 0; }
.ua-who b { font: 700 19px/24px var(--disp); letter-spacing: -.02em; }
.ua-who p span { color: var(--slate); font-size: 13px; line-height: 18px; }
.ua-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ua-seg { display: grid; gap: 8px; }
.ua-seg__bar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; }
.ua-seg__bar i, .ua-seg__k i { background: var(--ink); }
.ua-seg__bar .dI, .ua-seg__k .dI { background: var(--gold); }
.ua-seg__bar .dS, .ua-seg__k .dS { background: var(--lav); }
.ua-seg__bar .dC, .ua-seg__k .dC { background: var(--violet); }
.ua-seg__k { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; line-height: 16px; color: var(--slate); }
.ua-seg__k span { display: inline-flex; align-items: center; gap: 4px; }
.ua-seg__k i { width: 8px; height: 8px; border-radius: 2px; }
.ua-seg__k b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.ua-traits { display: flex; flex-wrap: wrap; gap: 6px; }
.ua-traits em { padding: 4px 10px; border-radius: 999px; background: var(--mist); font: 700 12px/16px Manrope, Arial, sans-serif; }
.ua-side { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: var(--mist); }
.ua-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ua-switch span { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; font: 800 13px/1 Manrope, Arial, sans-serif; color: var(--slate); transition: color .3s var(--ease); }
.ua-switch .e { color: #fff; }
.ua-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--ink); transform: translateX(100%); transition: transform .45s var(--io); }
.ua--pi[data-scene="a"] .ua-ind { transform: none; }
.ua--pi[data-scene="a"] .ua-switch .w { color: #fff; }
.ua--pi[data-scene="a"] .ua-switch .e { color: var(--slate); }
.ua-sw { display: grid; }
.ua-pane { grid-area: 1 / 1; min-width: 0; transition: opacity .3s var(--ease), transform .4s var(--ease), visibility .3s; }
.ua-pane--work { display: grid; gap: 10px; align-content: start; opacity: 0; visibility: hidden; transform: translateX(-12px); }
.ua-pane--mail { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: var(--sh-sm); }
.ua--pi[data-scene="a"] .ua-pane--work { opacity: 1; visibility: visible; transform: none; }
.ua--pi[data-scene="a"] .ua-pane--mail { opacity: 0; visibility: hidden; transform: translateX(12px); }
.ua-do { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #fff; }
.ua-do li { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; }
.ua-do .ua-do__h { justify-content: space-between; font-size: 12px; }
.ua-do--no svg { background: var(--lav); color: var(--ink); }
.ua-pane--mail .ua-body { background: var(--mist); }
.ua-fit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ua-fit .ua-lab { margin-right: 4px; }
.ua-fit em { padding: 2px 10px; border-radius: 999px; background: var(--gold-3); font: 800 12px/16px Manrope, Arial, sans-serif; white-space: nowrap; }
.ua-copy { display: flex; justify-content: flex-end; }
.ua-btn .c2 { opacity: 1; }
.ua-btn .c1 { opacity: 0; transform: translateY(-6px); }
.ua--pi:not([data-scene="c"]) .ua-btn .c1 { opacity: 1; transform: none; }
.ua--pi:not([data-scene="c"]) .ua-btn .c2 { opacity: 0; transform: translateY(6px); }

/* BDR · Vidar names a visitor, then the Agent Emi drawer writes her first email, each line tagged by source */
.ua-bdr { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
.ua-vlist { display: grid; gap: 10px; align-content: start; min-width: 0; }
.ua-vlist ul { display: grid; gap: 8px; }
.ua-vrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s var(--ease), background-color .3s var(--ease); }
.ua-vrow > .ua-row__t { flex: 1 1 120px; }
.ua-vrow:not(.is-hit) .ua-row__t b { color: var(--slate); }
.ua-vrow.is-hit { background: var(--mist); box-shadow: inset 0 0 0 2px var(--gold); }
.ua--emi:is([data-scene="a"], [data-scene="b"]) .ua-vrow.is-hit { box-shadow: none; }
.ua-swap { display: grid; flex: 1 1 100%; min-width: 0; }
.ua-anon, .ua-named { grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; min-width: 0; transition: opacity .3s var(--ease), transform .36s var(--ease); }
.ua-anon { opacity: 0; visibility: hidden; transform: translateY(-6px); }
:is(.ua--emi, .ua--vidar)[data-scene="a"] .ua-anon { opacity: 1; visibility: visible; transform: none; filter: none; }
:is(.ua--emi, .ua--vidar)[data-scene="a"] .ua-named { opacity: 0; transform: translateY(6px); }
.ua-vmeta { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 42px; }
.ua-pages { display: grid; gap: 4px; width: 100%; padding: 8px 10px; border-radius: 12px; background: #fff; }
.ua-pages li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ua-drawer { display: grid; gap: 10px; min-width: 0; padding: 14px 16px 16px; border-radius: 18px; background: #fff; box-shadow: var(--sh-md), 0 0 0 1px var(--line); }
.ua-drawer__h { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; box-shadow: inset 0 -1px 0 var(--line); }
.ua-drawer__h .ua-row__t { flex: 1; }
.ua-spark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--gold); }
.ua-body--tag { gap: 6px; }
.ua-body--tag .ua-lab { margin-bottom: 2px; }
.ua-body--tag p { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.ua-body--tag p > span { display: block; }
.ua-body--tag .ua-chip { min-width: 84px; justify-content: center; background: #fff; box-shadow: inset 0 0 0 1px rgba(17,10,51,.14); }
.ua-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* GTM engineer · MCP calls stream JSON, and each field lands in the CRM record (ink window, no rail) */
.ua-win--code { grid-template-columns: minmax(0, 1fr); background: var(--ink); color: #fff; box-shadow: var(--sh-lg); }
.ua-win--code .ua-main { gap: 12px; padding: 18px 22px 20px; }
.ua-code__h { display: flex; align-items: center; gap: 8px; min-height: 32px; padding-right: 44px; font: 600 13px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--lav); }
.ua-code__n { margin-left: auto; color: rgba(221,214,255,.8); }
.ua-calls { display: grid; font: 500 13px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ua-call { grid-area: 1 / 1; display: grid; gap: 6px; align-content: start; min-width: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s var(--ease), transform .4s var(--ease), visibility .3s; }
.ua--mcp[data-scene="a"] .c1, .ua--mcp[data-scene="b"] .c2, .ua--mcp[data-scene="c"] .c3 { opacity: 1; visibility: visible; transform: none; }
.ua-req { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ua-arrow { color: var(--gold); font-weight: 700; }
.ua-req code { font: inherit; font-weight: 700; color: var(--gold-3); overflow-wrap: anywhere; }
.ua-args { color: var(--lav); overflow-wrap: anywhere; }
.ua-req .ua-chip { margin-left: auto; font-family: Manrope, Arial, sans-serif; }
.ua-res { display: flex; align-items: center; gap: 10px; color: rgba(221,214,255,.8); font-size: 12px; }
.ua-200 { padding: 0 8px; border-radius: 6px; background: rgba(255,198,30,.18); color: var(--gold); font-weight: 700; }
.ua-json { counter-reset: ln; display: grid; padding: 8px 0; border-radius: 12px; background: rgba(255,255,255,.05); }
.ua-json li { counter-increment: ln; display: block; padding: 0 12px 0 40px; position: relative; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ua-json li::before { content: counter(ln); position: absolute; left: 0; width: 28px; text-align: right; color: rgba(221,214,255,.7); }
.ua-json li:not(:first-child):not(:last-child) { padding-left: 56px; }
.ua-json i { font-style: normal; color: var(--lav); }
.ua-json .k { color: var(--lav); }
.ua-json .v { color: var(--gold-3); }
.ua-crm { display: grid; gap: 10px; padding: 12px 14px 14px; border-radius: 16px; background: #fff; color: var(--ink); }
.ua-crm__h { display: flex; align-items: center; gap: 8px; }
.ua-crm__h b { font: 700 15px/20px var(--disp); }
.ua-crm__h > span:not(.ua-sync) { color: var(--slate); font-size: 13px; }
.ua-crm__h > .ua-crm__co { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 800; white-space: nowrap; }
.ua-sync { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font: 800 12px/16px Manrope, Arial, sans-serif; }
.ua-crm dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.ua-crm dl > div { display: grid; grid-template-rows: auto auto; gap: 2px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--mist); }
.ua-ns { grid-area: 2 / 1; font-weight: 600; color: var(--slate); opacity: 0; }
.ua-crm dd { grid-area: 2 / 1; }
.ua-crm dd { justify-self: start; max-width: 100%; margin: 0 -4px; padding: 0 4px; border-radius: 6px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sales leader · the pipeline beside the Agent Miia report: Infographic, Stakeholders, then Signals keep it current */
.ua-sl { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 16px; align-items: start; }
.ua-deals { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: var(--mist); }
.ua-deals .ua-h > b { font-size: 16px; }
.ua-deals ul { display: grid; gap: 6px; }
.ua-deals li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; min-height: 50px; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; }
.ua-deals li .ua-row__t b { font-size: 14px; line-height: 18px; }
.ua-deals li .ua-row__t > span { font-size: 12px; line-height: 16px; }
.ua-deals li.is-sel { background: #fff; box-shadow: var(--sh-sm); }
.ua-new { padding: 1px 8px; border-radius: 999px; background: var(--gold); font: 800 12px/16px Manrope, Arial, sans-serif; }
.ua-dot svg { width: 20px; height: 20px; }
.ua-rep { display: grid; gap: 12px; min-width: 0; }
.ua-rep__h { display: flex; align-items: center; gap: 10px; }
.ua-rep__h > .ua-row__t { flex: 1; }
.ua-rep__h > .ua-row__t b { font-size: 19px; line-height: 24px; }
.ua-upd { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 6px; border-radius: 999px; background: var(--gold-3); font: 800 12px/16px Manrope, Arial, sans-serif; white-space: nowrap; }
.ua-fit2 { display: flex; align-items: center; gap: 8px; padding-left: 12px; box-shadow: inset 1px 0 0 var(--line); font: 700 13px/16px Manrope, Arial, sans-serif; white-space: nowrap; }
.ua-tabs { display: flex; gap: 22px; box-shadow: inset 0 -1px 0 var(--line); }
.ua-tabs span { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 2px 0 10px; font-weight: 700; color: var(--slate); transition: color .3s var(--ease); }
.ua-tabs span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--gold); transform: scaleX(0); transition: transform .32s var(--ease); }
.ua-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: #fff; font: 800 12px/1 Manrope, Arial, sans-serif; }
.ua--miia[data-scene="a"] .t1, .ua--miia[data-scene="b"] .t2, .ua--miia[data-scene="c"] .t3 { color: var(--ink); }
.ua--miia[data-scene="a"] .t1::after, .ua--miia[data-scene="b"] .t2::after, .ua--miia[data-scene="c"] .t3::after { transform: none; }
.ua-panes { display: grid; }
.ua-panes > .ua-pane { opacity: 0; visibility: hidden; transform: translateY(8px); }
.ua--miia[data-scene="a"] .p1, .ua--miia[data-scene="b"] .p2, .ua--miia[data-scene="c"] .p3 { opacity: 1; visibility: visible; transform: none; }
.ua-pane.p1 { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 14px; align-items: end; }
.ua-info { display: grid; gap: 12px; align-self: start; min-width: 0; }
.ua-facts { display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
.ua-notes { display: grid; gap: 6px; }
.ua-notes li { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.ua-notes b { font: 700 14px/20px var(--disp); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-facts span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--mist); font: 700 13px/18px Manrope, Arial, sans-serif; }
.ua-facts svg { color: var(--slate); }
.ua-chart { display: grid; gap: 8px; padding: 10px 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.ua-bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; height: 104px; }
.ua-bars span { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 4px; }
.ua-bars i { position: relative; align-self: end; width: 100%; height: var(--h); min-height: 8px; border-radius: 6px 6px 3px 3px; background: var(--lav); transform-origin: bottom; }
.ua-bars i.on { background: var(--gold); }
.ua-bars span { position: relative; }
.ua-bars b { position: absolute; left: 0; right: 0; bottom: calc((100% - 20px) * var(--hf) + 22px); text-align: center; font: 800 12px/16px Manrope, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.ua-bars small, .ua-wk small { font-size: 12px; line-height: 16px; color: var(--slate); }
.ua-pane.p2 { display: grid; gap: 6px; }
.ua-pane.p2 li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.ua-role { display: inline-flex; padding: 2px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(17,10,51,.16); font: 800 12px/16px Manrope, Arial, sans-serif; white-space: nowrap; }
.ua-role.r0 { background: var(--gold); box-shadow: none; }
.ua-role.r1 { background: var(--lav); box-shadow: none; }
.ua-acts { display: inline-flex; gap: 6px; color: var(--slate); }
.ua-acts svg { padding: 4px; width: 26px; height: 26px; border-radius: 8px; background: var(--mist); }
.ua-pane.p3 { display: grid; gap: 8px; align-content: start; }
.ua-sig { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.ua-sig:first-child { background: var(--mist); box-shadow: none; }
.ua-sig .ua-row__t { flex: 1; }
.ua-sched { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 700 12px/16px Manrope, Arial, sans-serif; color: var(--slate); }
.ua-sched > span { margin-right: 4px; }
.ua-sched em { padding: 2px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.ua-sched em.on { background: var(--gold); box-shadow: none; }

/* Account manager · the Signals feed on one customer: new items land on top and push the older ones down */
.ua-am__h { display: flex; align-items: center; gap: 12px; }
.ua-am__h .ua-row__t { flex: 1; }
.ua-am__h .ua-row__t b { font-size: 19px; line-height: 24px; }
.ua-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ua-pills span:not(.ua-soft) { padding: 4px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font: 700 13px/18px Manrope, Arial, sans-serif; color: var(--slate); }
.ua-pills span.on { background: var(--gold-3); box-shadow: none; color: var(--ink); }
.ua-pills .ua-soft { margin-left: auto; }
.ua-feed { --rh: 64px; position: relative; height: calc(var(--rh) * 3 + 16px); }
.ua-fc { --slot: 0; --lift: 0px; position: absolute; top: 0; left: 0; right: 0; height: var(--rh); display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transform: translateY(calc(var(--slot) * (var(--rh) + 8px) + var(--lift))); transition: transform .55s var(--io), opacity .3s var(--ease); }
.ua-fc > .ua-row__t { flex: 1; }
.ua-fc__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--lav); }
.ua-fc__ic.g { background: var(--gold-3); }
.ua-fc.f-int { --slot: 0; background: var(--mist); box-shadow: none; }
.ua-fc.f-move { --slot: 1; }
.ua-fc.f-news { --slot: 2; }
.ua--feed[data-scene="b"] .f-move, .ua--feed[data-scene="a"] .f-news { --slot: 0; background: var(--mist); box-shadow: none; }
.ua--feed[data-scene="b"] .f-news { --slot: 1; }
.ua--feed:is([data-scene="o"], [data-scene="a"], [data-scene="b"]) .f-int,
.ua--feed:is([data-scene="o"], [data-scene="a"]) .f-move,
.ua--feed[data-scene="o"] .f-news { --slot: 0; --lift: -16px; opacity: 0; transition-duration: 0s; }
.ua-impact { flex: none; display: inline-flex; align-items: center; gap: 8px; font: 700 12px/16px Manrope, Arial, sans-serif; color: var(--slate); }
.ua-spark2 { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.ua-spark2 svg { width: 100px; height: 34px; overflow: visible; }
.ua-spark2 polyline { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.ua-spark2 circle { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.ua-spark2 circle.on { fill: var(--gold); }
.ua-spark2 b { font: 800 13px/1 Manrope, Arial, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ua-seat2 { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ua-seat2 > span:not(.ua-arr) { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ua-seat2 .out .ua-row__t b { color: var(--slate); }
.ua-seat2 .out .ua-av { background: var(--mist); color: var(--slate); }
.ua-arr { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--gold); }
.ua-pi { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: var(--cream); }
.ua-pi > b { flex: 1; min-width: 0; font: 700 15px/20px var(--disp); }

/* ABM marketer · Iriis target accounts: intent fills in, scores count into bands, then the list re-ranks itself */
.ua-rank { display: grid; gap: 4px; }
.ua-rank__hd, .ua-rk { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 66px) 116px; align-items: center; gap: 2px; }
.ua-rank__hd { padding: 0 10px 6px; box-shadow: inset 0 -1px 0 var(--line); }
.ua-rank__hd > span { display: grid; justify-items: center; }
.ua-rank__hd > span:first-child { justify-items: start; }
.ua-rank__hd > span:last-child { justify-items: end; }
.ua-rank__hd b { font-weight: 800; color: var(--ink); text-transform: none; letter-spacing: 0; }
.ua-rank__hd small { font: 600 12px/16px Manrope, Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.ua-rank__rows { --rh: 52px; position: relative; height: calc(var(--n) * var(--rh)); }
.ua-rk { --p: var(--i); position: absolute; top: 0; left: 0; right: 0; height: calc(var(--rh) - 4px); padding: 0 10px; border-radius: 14px; transform: translateY(calc(var(--p) * var(--rh))); transition: transform .65s var(--io), background-color .35s var(--ease); }
.ua--iriis[data-scene="a"] .ua-rk { --p: var(--f); }
.ua-rk.top { background: var(--mist); }
.ua--iriis[data-scene="a"] .ua-rk.top { background: transparent; }
.ua-rk__a { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ua-rk__a .ua-logo { width: 26px; height: 26px; font-size: 13px; }
.ua-rk__a b { font: 700 14.5px/20px var(--disp); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-rk__c { display: grid; place-items: center; }
.ua-kc { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.ua-rk__c:nth-child(3) .ua-kc:not(.ua-kc--off) { background: var(--gold-3); }
.ua-rk__c:nth-child(4) .ua-kc:not(.ua-kc--off) { background: var(--lav); }
.ua-kc--off { width: 22px; height: 22px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(17,10,51,.16); }
.ua-rk__s { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ua-rk__s b { min-width: 2ch; text-align: right; font: 700 17px/1 var(--disp); font-variant-numeric: tabular-nums; }
.ua-band { display: inline-flex; padding: 2px 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 800 12px/16px Manrope, Arial, sans-serif; white-space: nowrap; }
.ua-band--very-strong { background: var(--gold); box-shadow: none; }
.ua-band--strong { background: var(--gold-3); box-shadow: none; }
.ua-band--moderate { background: var(--lav); box-shadow: none; }
.ua-band--untracked { color: var(--slate); }
.ua-toast { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 999px; background: #fff; box-shadow: var(--sh-md), 0 0 0 1px var(--line); }
.ua-toast b { font-weight: 800; }
.ua-tick svg { width: 24px; height: 24px; padding: 5px; }

/* Growth marketer · Vidar: an anonymous visit becomes a person, Enrichments unlock her, Streams shows the account is hiring */
.ua-gm { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 16px; align-items: start; }
.ua-cred { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 2px 10px 2px 8px; border-radius: 999px; background: var(--mist); font: 700 12px/16px Manrope, Arial, sans-serif; color: var(--slate); }
.ua-cred b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.ua-gm .ua-vrow.is-hit { display: grid; gap: 10px; padding: 12px; box-shadow: none; }
.ua-vtop { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ua-vtop .ua-swap { flex: 1; }
.ua-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding-left: 42px; color: var(--slate); }
.ua-trail i { font-style: normal; }
.ua-enr { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: #fff; }
.ua-em, .ua-ph { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 13px/18px Manrope, Arial, sans-serif; }
.ua-em > svg, .ua-ph > svg { flex: none; color: var(--slate); }
.ua-mask { display: grid; min-width: 0; flex: 1; }
.ua-mask > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .3s var(--ease); }
.ua-mask .m1 { opacity: 0; color: var(--slate); }
.ua--vidar:is([data-scene="a"], [data-scene="b"]) .ua-em .m1, .ua--vidar:not([data-scene="d"]) .ua-ph .m1 { opacity: 1; filter: none; }
.ua--vidar:is([data-scene="a"], [data-scene="b"]) .ua-em .m2, .ua--vidar:not([data-scene="d"]) .ua-ph .m2 { opacity: 0; }
.ua-ver { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 2px; border-radius: 999px; background: var(--gold-3); font: 800 12px/16px Manrope, Arial, sans-serif; }
.ua-ver svg { width: 16px; height: 16px; padding: 3px; }
.ua-enr > .ua-chip { justify-self: end; }
.ua-gm .ua-vlist { gap: 8px; }
.ua-vrow--dim { padding: 8px 12px; }
.ua-strm { display: grid; gap: 12px; padding: 14px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.ua-strm__h { display: flex; align-items: center; gap: 10px; }
.ua-strm__h .ua-row__t { flex: 1; }
.ua-wk { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; height: 112px; padding-top: 8px; }
.ua-wk span { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 4px; }
.ua-wk i { align-self: end; width: 100%; height: var(--h); min-height: 8px; border-radius: 6px 6px 3px 3px; background: var(--lav); transform-origin: bottom; }
.ua-wk i.on { background: var(--gold); }
.ua-strm__n { display: grid; gap: 6px; }
.ua-strm__n b { font: 700 20px/24px var(--disp); letter-spacing: -.02em; }
.ua-strm__n span { display: flex; flex-wrap: wrap; gap: 6px; }

/* Narrow windows (tablets, and beside a link list): drop the deals column, keep two columns where they fit */
@container (max-width: 760px) {
  .ua-sl { grid-template-columns: minmax(0, 1fr); }
  .ua-deals { display: none; }
  .ua-pane.p1 { grid-template-columns: minmax(0, 1fr) 170px; }
}
/* Phones: no rail, one column, the pause button bottom right */
@container (max-width: 600px) {
  .ua-win { grid-template-columns: minmax(0, 1fr); }
  .ua-rail { display: none; }
  .ua-main, .ua-win--code .ua-main { padding: 16px 16px 60px; }
  .ua-pause, .ua--mcp .ua-pause { left: auto; top: auto; right: 12px; bottom: 12px; }
  .ua-code__h { padding-right: 0; }
  .ua-ae, .ua-bdr, .ua-gm { grid-template-columns: minmax(0, 1fr); }
  .ua-crumb { display: none; }
  .ua-bdr .ua-vlist > ul > li:not(.is-hit) { display: none; }
  .ua-gm .ua-vrow--dim { display: none; }
  .ua-pane.p1 { grid-template-columns: minmax(0, 1fr); }
  .ua-pane.p2 li { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .ua-acts { display: none; }
  .ua-fit2 > span:not(.ua-ring) { display: none; }
  .ua-upd { display: none; }
  .ua-tabs { gap: 16px; }
  .ua-feed { --rh: 76px; }
  .ua-fc { align-items: center; padding: 0 12px; gap: 10px; }
  .ua-fc > .ua-imp, .ua-fc > .ua-chip { display: none; }
  .ua-seat2 .out .ua-row__t { display: none; }
  .ua-spark2 svg { width: 64px; }
  .ua-pills .ua-soft { display: none; }
  .ua-rank__hd, .ua-rk { grid-template-columns: minmax(0, 1fr) repeat(3, 30px) 44px; gap: 4px; }
  .ua-rank__hd > span:nth-child(n+2):nth-child(-n+4) b { display: none; }
  .ua-rank__hd small { font-size: 12px; }
  .ua-rank__hd > span:nth-child(n+2):nth-child(-n+4) { visibility: hidden; }
  .ua-rk__s .ua-band { display: none; }
  .ua-kc { width: 24px; height: 24px; }
  .ua-kc svg { width: 12px; height: 12px; }
  .ua-kc--off { width: 18px; height: 18px; }
  .ua-rk__a .ua-logo { width: 22px; height: 22px; border-radius: 7px; font-size: 12px; }
  .ua-rk__a b { white-space: normal; font-size: 14px; line-height: 18px; }
  .ua-crm dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ua-req .ua-chip { margin-left: 0; }
  .ua-json li:not(:first-child):not(:last-child) { padding-left: 52px; }
  .ua-body--tag p { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ua-body--tag .ua-chip { justify-self: start; min-width: 0; }
  .ua-wk { height: 84px; }
}
@container (max-width: 400px) {
  .ua-who b { font-size: 17px; }
  .ua-rep__h > .ua-row__t b, .ua-am__h .ua-row__t b { font-size: 17px; }
  .ua-am__h .ua-chip { display: none; }
  .ua-tabs span { font-size: 13px; }
  .ua-tabs { gap: 12px; }
  .ua-facts span { padding: 4px 10px; }
  .ua-pane.p2 li { grid-template-columns: 32px minmax(0, 1fr); }
  .ua-pane.p2 .ua-role { grid-column: 2; justify-self: start; }
  .ua-sig .ua-imp { display: none; }
  .ua-spark2 svg { display: none; }
  .ua-switch span svg { display: none; }
  .ua-crm__h > span:not(.ua-sync):not(.ua-crm__co) { display: none; }
  .ua-vmeta { padding-left: 0; }
  .ua-trail { padding-left: 0; }
  .ua-chart { display: none; }
  .ua-stack .ua-av--xs:nth-child(n+3) { display: none; }
  .ua-code__n { display: none; }
  .ua-seat2 .out, .ua-arr { display: none; }
}

/* One way out under every role section (Oct 19): the platform on one quiet line, then one next step */
.sr-out { display: grid; justify-items: center; gap: 12px; margin-top: 40px; }
.sr-out__all { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 14px; margin: 0; max-width: 960px; font-size: 14px; line-height: 1.6; }
.sr-out__lab { margin-right: 2px; }
.sr-out__all a { color: var(--slate); text-decoration: underline; text-decoration-color: rgba(91,100,120,.35); text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; }
.sr-out__all a.is-mine { color: var(--ink); font-weight: 800; text-decoration-color: var(--gold); }
@media (hover: hover) { .sr-out__all a:hover { color: var(--ink); text-decoration-color: var(--gold); } }
.sr-out__next { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: #fff; box-shadow: var(--sh-sm), inset 0 0 0 1px var(--line); font: 700 16px/1.25 var(--disp); color: var(--ink); text-decoration: none; transition: box-shadow .2s var(--ease), transform .16s var(--ease); }
.sr-out__next span { text-wrap: balance; }
.sr-out__next svg { flex: none; transition: transform .25s var(--ease); }
@media (hover: hover) { .sr-out__next:hover { box-shadow: var(--sh-md), inset 0 0 0 1px rgba(17,10,51,.18); } .sr-out__next:hover svg { transform: translateX(3px); } }
.sr-out__next:active { transform: scale(.96); }

/* Role animation steps (start.js player). The markup is the finished frame; the player arms a window (.is-armed hides every [data-at]
   until its step lands as .is-on), sets data-scene as the storyboard moves, fades the content out (.is-out, 240 ms) at the end of the
   loop and builds it again. Only transform, opacity, clip-path (text writing on), the ring's and the sparkline's stroke offset, and one
   background flash move. Moves are 280 to 650 ms on a strong ease-out (on-screen moves use --io). .is-snap applies a re-arm at once.
   Paused (.is-held) or off-screen (no .is-live): looping CSS animations stop too. Reduced motion or no JS: never armed, finished frame. */
@media (prefers-reduced-motion: no-preference) {
  .sr-anim [data-at] { transition: opacity .28s var(--ease), transform .36s var(--ease), clip-path .6s var(--wr), stroke-dashoffset .7s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease); transition-delay: var(--d, calc(var(--k, 0) * 60ms)); }
  .sr-anim.is-snap, .sr-anim.is-snap *, .sr-anim.is-snap *::after { transition: none !important; animation: none !important; }
  .sr-anim.is-armed [data-at]:not(.is-on) { opacity: 0; transform: translateY(8px); }
  .sr-anim.is-armed [data-fx="fade"]:not(.is-on), .sr-anim.is-armed [data-fx="flash"]:not(.is-on) { transform: none; }
  .sr-anim.is-armed [data-fx="x"]:not(.is-on) { transform: translateX(-10px); }
  .sr-anim.is-armed [data-fx="pop"]:not(.is-on) { transform: scale(.92); }
  .sr-anim.is-armed [data-fx="slide"]:not(.is-on) { transform: translateX(28px); }
  /* text that writes itself on, left to right (real words, never grey bars) */
  .sr-anim.is-armed [data-fx="write"]:not(.is-on) { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }
  .sr-anim.is-armed [data-fx="write"].is-on { clip-path: inset(0 -4px 0 0); }
  /* bars that grow from the floor: hiring by month, Streams by week */
  .sr-anim.is-armed [data-fx="grow"]:not(.is-on) { opacity: 1; transform: scaleY(0); }
  /* the sparkline and the fit ring draw themselves */
  .sr-anim.is-armed [data-fx="line"]:not(.is-on) { opacity: 1; transform: none; stroke-dashoffset: 1; }
  .sr-anim.is-armed [data-fx="ring"]:not(.is-on) { opacity: 1; transform: none; stroke-dashoffset: var(--full); }
  /* a count that ticks in place (the credits) */
  .sr-anim.is-armed [data-fx="none"]:not(.is-on) { opacity: 1; transform: none; }
  /* a CRM field filling: the value lands, then its gold highlight fades */
  .sr-anim.is-armed [data-fx="flash"].is-on { animation: ua-flash 1.4s var(--ease) both; }
  .sr-anim.is-armed .ua-crm dd:not(.is-on) + .ua-ns { opacity: 1; }
  @keyframes ua-flash { from { background-color: var(--gold-3); } to { background-color: transparent; } }
  /* the live dots breathe while the window plays */
  .ua-live { animation: ua-live 2s var(--ease) infinite; }
  @keyframes ua-live { 0%, 100% { box-shadow: 0 0 0 3px var(--gold-3); } 50% { box-shadow: 0 0 0 6px rgba(255,232,165,.35); } }
  .ua:not(.is-live) *, .ua.is-held * { animation-play-state: paused !important; }
}

/* Watch: the role video slot and the results */
.sr-video { max-width: 880px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 24px; overflow:hidden; background: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(221,214,255,.14); }
.sr-video iframe { width:100%; height:100%; border:0; display:block; }
.sr-video__poster { height:100%; display:grid; place-content:center; justify-items:center; gap: 20px; padding: 24px; text-align:center; }
.sr-video__play { width: 72px; height: 72px; border-radius:50%; display:grid; place-items:center; background: var(--gold); color: var(--ink); padding-left: 4px; }
.sr-video__poster p { margin:0; font-size: 15px; color: var(--lav); }
.sr-video__poster b { display:block; margin-bottom: 4px; font: 700 clamp(22px, 1rem + 1vw, 30px)/1.1 var(--disp); color:#fff; }
.sr-nums { display:flex; flex-wrap:wrap; justify-content:center; gap: 16px clamp(32px, 6vw, 96px); margin: 56px 0 0; }
.sr-nums div { display:flex; flex-direction:column-reverse; align-items:center; text-align:center; }
.sr-nums dd { margin:0; font: 700 clamp(48px, 1.6rem + 3vw, 80px)/1 var(--disp); letter-spacing:-.04em; color: var(--gold); }
.sr-nums dt { margin-top: 8px; font-size: 16px; color: var(--mist); }
.sr-nums__note { margin: 24px 0 0; text-align:center; font-size: 17.5px; font-weight: 400; line-height: 1.6; color: var(--lav); }

/* Proof: three voices (shared hx-voices block), then the customer logos */
.sr-sec--logos { padding-top: 0; }
.sr-logos { list-style:none; margin: 0 auto; padding:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap: 24px 40px; }
.sr-logos img { height: 32px; width:auto; display:block; }

@media (max-width: 960px) {
  .sr-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .sr-pair { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 680px; }
}
/* Phones and small tablets: the app window adapts itself (container queries above); the link lists get 44px taps */
@media (max-width: 767px) {
  .sr-play .sr-h2 { margin-bottom: 28px; }
  .sr-plays li { grid-template-columns: minmax(0, 1fr); }
  .sr-plays li > a { grid-column: 1; grid-row: auto; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; }
  .sr-jobs li { gap: 0 16px; }
  .sr-jobs li a { display: inline-flex; align-items: center; min-height: 44px; }
  /* The platform line on phones: label on its own row, then 44px links that wrap evenly */
  .sr-out { margin-top: 32px; gap: 8px; }
  .sr-out__all { gap: 0 4px; }
  .sr-out__lab { flex-basis: 100%; text-align: center; margin: 0 0 2px; }
  .sr-out__all a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; }
  .sr-out__next { font-size: 15px; padding: 10px 18px; text-align: center; }
}
@media (max-width: 640px) {
  .sr-pick { flex-direction:column; align-items:stretch; gap: 8px; }
  .sr-pick ul { mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .sr-cta .hx-btn { width:100%; justify-content:center; }
  .sr-logos { display:grid; grid-template-columns: repeat(3, auto); justify-items:center; gap: 24px; }
  .sr-logos img { height: 26px; }
}
/* Phone containment (Oct 17): the 640px logo grid kept justify-content:center, so its tracks overflowed both edges. */
@media (max-width: 767px) {
  .sr-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sr-logos img { height: auto; width: auto; max-width: 100%; max-height: 26px; }
}

/* ---------- AK Oct 20: "How it helps you as a <role>" outcome cards (same look as /solutions .sl-outs) ---------- */
.sr-sec--out .sr-h2 { margin-bottom: 40px; }
.sr-outs { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
.sr-o { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 24px 20px 20px; border-radius: 24px; background: var(--mist); }
.sr-o p { margin: 0; }
.sr-o__who { font: 800 12px/16px Manrope, Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
body.hai .sr-o h3 { margin: 0; font: 700 21px/1.2 var(--disp); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.sr-o__line { font-size: 15px; line-height: 1.55; color: var(--slate); }
.sr-o__by { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto !important; padding-top: 12px; }
.sr-ochip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 700 13px/1.4 Manrope, Arial, sans-serif; white-space: nowrap; text-decoration: none; }
.sr-ochip--via { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (hover: hover) { a.sr-ochip:not(.sr-ochip--via):hover { background: var(--gold-3); } }
@media (max-width: 1099px) { .sr-outs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { a.sr-ochip { min-height: 44px; padding-top: 0; padding-bottom: 0; } }
@media (max-width: 599px) {
  .sr-sec--out { padding: 48px 0 56px; }
  .sr-sec--out .sr-h2 { margin-bottom: 28px; }
  .sr-outs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sr-o { padding: 20px 18px 18px; }
  body.hai .sr-o h3 { font-size: 20px; }
}

/* ================= Oct 20 wave 2 (Krish O20-064/066, PLAN-OCT20 item 6) =================
   Hero: ONE customer video (partials/hx-hero-video, /v2/shared/hero-video.css) beside the words, in place of the small static panel.
   The role's animation sits right under the proof band (the dark testimonial band is gone) and is BIGGER: the 820 px window is
   scaled with CSS zoom on wide screens, so its text and UI grow and stay sharp; under 1000 px it is fluid as before. */
.sr-hv { min-width: 0; align-self: center; }
@media (min-width: 992px) { .sr-hero__grid:has(.sr-hv) { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); } }
@media (max-width: 991px) { .sr-hv .hhv { max-width: 640px; margin: 0 auto; } }
.sr-sample { max-width: 820px; margin: 12px auto 0; text-align: right; font: 600 12px/1.4 Manrope, Arial, sans-serif; color: var(--slate); }
.sr-play.sr-sec { padding: 56px 0 64px; }
.sr-play .sr-h2 { margin-bottom: 32px; }
@media (min-width: 1000px) { .sr-play .ua { width: 820px; zoom: 1.1; } .sr-play .sr-sample { max-width: 902px; } }
@media (min-width: 1240px) { .sr-play .ua { zoom: 1.24; } .sr-play .sr-sample { max-width: 1017px; } }
@media (max-width: 767px) { .sr-play.sr-sec { padding: 40px 0 48px; } .sr-play .sr-h2 { margin-bottom: 20px; } }
.ua-logo--xs { width: 20px; height: 20px; border-radius: 6px; font-size: 12px; }
.ua-crumb .ua-logo--xs { margin-right: -2px; }
.ua-crm__h .ua-logo--xs { background: var(--ink); color: var(--gold); }
/* real logo files (AK Oct 20 brand decision): square marks on a white tile, wordmarks in place of the name, never recoloured */
.ua-logo.is-img { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ua-logo.is-img img { width: 64%; height: 64%; object-fit: contain; display: block; }
.ua-wm { display: block; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.ua-row__t b .ua-wm, .ua-rk__a b .ua-wm { margin: 3px 0; }
.ua-rep__h .ua-wm, .ua-am__h .ua-wm { margin: 4px 0 2px; }
.ua-crm__co .ua-wm { display: inline-block; vertical-align: middle; }
.ua-deals li > .ua-row__t:first-child { grid-column: 1 / 3; }
.ua-litile { display: block; flex: none; width: 14px; height: 14px; border-radius: 3px; }

/* MOBILE-B (Oct 21): shorter /start pages on phones; the four outcome tiles sit two to a row (one per row only below 360px) */
@media (max-width: 767px) {
  .sr-sec { padding: 36px 0; }
  .sr-sec--out { padding: 32px 0 36px; }
  .sr-sec--out .sr-h2 { margin-bottom: 18px; }
  .sr-sec--out .sr-out { margin-top: 20px; }
  .sr-hero { padding-bottom: 24px; }
}
@media (max-width: 599px) {
  .sr-outs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sr-o { padding: 14px 12px 12px; gap: 6px; border-radius: 20px; }
  body.hai .sr-o h3 { font-size: 17px; }
  .sr-o__line { font-size: 14px; line-height: 1.45; }
  .sr-o__by { padding-top: 6px; }
  a.sr-ochip { padding: 0 10px; font-size: 12.5px; }
}
@media (max-width: 359px) {
  .sr-outs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) { #get-started { padding-top: 28px; } }

/* MOBILE-B (Oct 21): the hero's two CTAs share one row on phones (stack only below 360px) */
@media (min-width: 360px) and (max-width: 767px) {
  .sr-cta { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: 8px; }
  .sr-cta .hx-btn { flex: 1 1 auto; width: auto; min-width: 0; justify-content: center; gap: 8px; white-space: nowrap; }
  .sr-cta .hx-btn-primary { padding-right: 14px; }
  .sr-cta .hx-btn-ghost { padding-left: 14px; padding-right: 14px; }
}

/* ---------- AE page (AK, Oct 26): what other tools will not give you, and where it works ---------- */
body.hai .sr .sr-sub2 { max-width: 640px; margin: -32px auto 32px; text-align: center; font: 400 17px/1.55 Manrope, Arial, sans-serif; color: var(--slate); text-wrap: balance; }
.sr-dif { background: #fff; }
.sr-dif__box { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1180px; overflow: hidden; border: 1px solid var(--lav); border-radius: 24px; background: var(--mist); }
.sr-dif__box li { margin: 0; padding: 24px; border-left: 1px solid var(--lav); }
.sr-dif__box li:first-child { border-left: 0; }
body.hai .sr-dif__box h3 { margin: 0 0 8px; font: 700 19px/1.25 var(--disp); color: var(--ink); }
.sr-dif__box p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--slate); }
.sr-sf { background: #fff; }
.sr-sf__grid { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1180px; }
.sr-sf__g { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 22px; border: 1px solid var(--lav); border-radius: 22px; background: var(--mist); }
body.hai .sr-sf__g h3 { margin: 0; font: 700 20px/1.2 var(--disp); color: var(--ink); }
.sr-sf__g > p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--slate); }
.sr-sf__logos { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: auto; padding-top: 10px; }
.sr-sf__it { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 56px; color: var(--ink); text-decoration: none; }
.sr-sf__it img { display: block; width: 44px; height: 44px; padding: 9px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--lav); object-fit: contain; transition: transform .2s, box-shadow .2s; }
.sr-sf__it small { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--slate); text-align: center; }
.sr-sf__code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink) !important; }
/* the install message on hover or focus */
a.sr-sf__it::after { content: attr(data-tip); position: absolute; left: 50%; top: -30px; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--gold); font: 800 12px/1.3 Manrope, Arial, sans-serif; white-space: nowrap; opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .18s, transform .18s; }
a.sr-sf__it:hover::after, a.sr-sf__it:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
a.sr-sf__it:hover img, a.sr-sf__it:focus-visible img { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--violet), 0 6px 14px rgba(17,10,51,.12); }
a.sr-sf__it:hover small { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a.sr-sf__it:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 12px; }
@media (max-width: 1023px) { .sr-dif__box, .sr-sf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sr-dif__box li:nth-child(3) { border-left: 0; } .sr-dif__box li:nth-child(n+3) { border-top: 1px solid var(--lav); } }
@media (max-width: 599px) { .sr-dif__box, .sr-sf__grid { grid-template-columns: minmax(0, 1fr); } .sr-dif__box li { border-left: 0; } .sr-dif__box li + li { border-top: 1px solid var(--lav); } body.hai .sr .sr-sub2 { margin-top: -28px; } }

/* ---------- Role pages v2 (AK, Oct 26) ---------- */
/* the role's workflow window in the hero (it was its own section under the logos) */
.sr-hv--play { min-width: 0; }
.sr-hv--play .ua { max-width: none; margin: 0; }
@media (min-width: 992px) { .sr-hv--play .ua { width: 760px; zoom: .78; } }
@media (min-width: 1240px) { .sr-hv--play .ua { zoom: .82; } }
/* Oct 27 (START-FIX): the window was a fixed 760px at .78/.82 zoom (593-623px) in a 475-572px column, so it ran 50-118px past its column:
   cut off by the screen edge at 992-1100px and over the page gutter at 1280-1440px. It now fills its column exactly at the same scale
   (its own container queries reflow the panes, as they already do on tablets). */
@media (min-width: 992px) {
  .sr-hv--play { container-type: inline-size; }
  .sr-hv--play .ua { width: calc(100cqw / .78); }
}
@media (min-width: 1240px) { .sr-hv--play .ua { width: calc(100cqw / .82); } }
/* the meeting row in the AE window: in a narrow column the four committee faces squeezed the title to "B..." ("Business review");
   the faces now drop under the title instead */
.ua-meet { flex-wrap: wrap; row-gap: 8px; }
.ua-meet > .ua-row__t { flex: 1 1 96px; min-width: 0; }
@media (max-width: 991px) { .sr-hv--play { max-width: 640px; margin: 0 auto; } }
/* surfaces: as many columns as groups */
.sr-sf__grid { grid-template-columns: repeat(var(--c, 4), minmax(0, 1fr)); }
/* the sales leader band: ink */
.sr-dif--ink { background: var(--ink); color: #fff; }
.sr-dif--ink .sr-dif__box { background: rgba(221,214,255,.06); border-color: rgba(221,214,255,.2); }
.sr-dif--ink .sr-dif__box li { border-color: rgba(221,214,255,.2) !important; }
body.hai .sr-dif--ink .sr-dif__box h3 { color: var(--gold); }
.sr-dif--ink .sr-dif__box p { color: var(--lav); }
/* consolidation: three columns, Humantic AI in gold */
.sr-con { background: #fff; }
.sr-con__cols { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1100px; align-items: stretch; }
.sr-con__c { margin: 0; padding: 24px; border: 1px solid var(--lav); border-radius: 22px; background: var(--mist); }
.sr-con__c.is-us { border: 2px solid var(--gold); background: var(--cream); box-shadow: 0 16px 34px -18px rgba(17,10,51,.3); transform: translateY(-6px); }
body.hai .sr-con__c h3 { margin: 0; font: 700 21px/1.2 var(--disp); color: var(--ink); }
.sr-con__ex { margin: 4px 0 16px; font-size: 14px; color: var(--slate); }
.sr-con__c ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sr-con__c ul li { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.sr-con__c ul li em { display: block; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--violet); }
.sr-con__c ul li.is-n { color: var(--slate); font-weight: 500; }
.sr-con__m { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--ink); }
.is-n .sr-con__m { background: transparent; box-shadow: inset 0 0 0 1px var(--lav); color: var(--slate); }
.sr-con__note { max-width: 760px; margin: 24px auto 0; text-align: center; font-size: 16px; line-height: 1.5; color: var(--ink); }
.sr-con__note a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lav); text-decoration-thickness: 2px; }
/* Sales Excellence Council */
.sr-cnc__people { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 28px; max-width: 980px; }
.sr-cnc__people li { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; width: 132px; text-align: center; }
.sr-cnc__people img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gold); margin-bottom: 6px; }
.sr-cnc__people b { font: 700 15px/1.2 var(--disp); color: var(--ink); }
.sr-cnc__people span { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--violet); }
.sr-cnc__ways { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 28px 0 0; }
.sr-cnc__ways span { padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--lav); font-size: 14px; font-weight: 700; color: var(--ink); }
.sr-cnc__go { margin: 22px 0 0; text-align: center; }
@media (max-width: 1023px) { .sr-sf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sr-con__cols { grid-template-columns: minmax(0, 1fr); max-width: 560px; } .sr-con__c.is-us { transform: none; } }
@media (max-width: 599px) { .sr-sf__grid { grid-template-columns: minmax(0, 1fr); } .sr-cnc__people li { width: 110px; } }
.sr-hv--play { width: 100%; } /* the window sizes from its container (container-type), so the column needs a width of its own */

/* ---------- Oct 27 (START-FIX, Amar's to-do): the role picker stays pinned top left ----------
   Amar: "Make the role a picker, defaulted to AE" and "Keep picker fixed in top left side, as people will want to see what's for others
   and how it differs." Amar's own picker row (.sr-pick, same pills) moved out of the hero into .sr-pickbar, the first child of #role-view,
   so it is sticky for the whole role view (hero to the last role section; the FAQ after it scrolls on normally). At rest it looks exactly
   like before, above the H1. Pinned (.is-stuck, start.js) it drops the label and floats as a white pill row with a shadow, under the
   floating nav, or 12px from the top once the nav steps away (.sr-navoff). --sr-nav = the nav pill's real bottom edge (start.js). */
.sr { --sr-nav: 64px; }
@media (min-width: 1100px) { .sr { --sr-nav: 80px; } }
.sr-pickbar { position: sticky; top: calc(var(--sr-nav) + 8px); z-index: 40; pointer-events: none; transition: top .35s cubic-bezier(.2, .7, .2, 1); }
.sr-pickbar .sr-pick { pointer-events: auto; width: max-content; max-width: 100%; }
/* the shared hero standard (shell.css: first content 150 / 128 / 104px from the top) now applies to the picker, the hero's first item */
.sr #role-view { padding-top: 150px; }
@media (max-width: 991px) { .sr #role-view { padding-top: 128px; } }
@media (max-width: 767px) { .sr #role-view { padding-top: 104px; } }
html body .sr-pickbar + header.sr-hero { padding-top: 0 !important; }
.sr-pickbar .sr-pick ul { transition: background-color .2s cubic-bezier(.23, 1, .32, 1), box-shadow .2s cubic-bezier(.23, 1, .32, 1); }
.sr-pickbar.is-stuck .sr-pick__lab { display: none; }
.sr-pickbar.is-stuck .sr-pick ul { background: #fff; box-shadow: 0 0 0 1px var(--lav), var(--sh-md); }
.sr-navoff .sr-pickbar { top: 12px; }
/* a link or the keyboard never parks a heading under the pinned picker */
.sr #role-view [id], .sr #role-view :is(a, button, input, [tabindex]) { scroll-margin-top: calc(var(--sr-nav) + 72px); }   /* WCAG 2.4.11: a tabbed-to control never hides under it */
@media (max-width: 640px) {
  /* phones: the label sits on its own line at rest (Amar's layout); pinned, it hides in place (no layout shift under the bar) and the
     scrolling pill row moves up into its spot */
  .sr-pickbar .sr-pick { width: auto; }
  .sr-pickbar.is-stuck .sr-pick__lab { display: block; visibility: hidden; }
  .sr-pickbar.is-stuck .sr-pick ul { transform: translateY(-24px); }
}
@media (prefers-reduced-motion: reduce) { .sr-pickbar, .sr-pickbar .sr-pick ul { transition: none; } }
/* Oct 27 (START-FIX): the smallest phones (320px, a window about 288px wide) cut text mid-word: "Gene..." (Generate email), "Sales Ops
   Directo", "+1 (479) 555-014" and the email ran under their badges. In a window this narrow the rows wrap instead: the badge or chip
   drops under its text, and meta lines wrap. */
@container (max-width: 320px) {
  .ua-drawer__h { flex-wrap: wrap; row-gap: 6px; }
  .ua-drawer__h .ua-row__t { flex: 1 1 160px; }
  .ua-row__t b, .ua-row__t > span { white-space: normal; overflow-wrap: anywhere; }
  .ua-em, .ua-ph { flex-wrap: wrap; row-gap: 4px; }
  .ua-mask { flex: 1 1 0; min-width: 150px; }
  .ua-mask > span { white-space: normal; overflow-wrap: anywhere; }
  .ua-em .ua-ver, .ua-ph .ua-ver { margin-left: 22px; }
}
/* AK Oct 28: a role's use cases (Pre-sales). Placeholder cards: the use-case visual drops into .sr-uc2__ph when it is made. */
.sr-uc2__grid { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1100px; }
.sr-uc2__c { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 22px; border-radius: 24px; background: #fff; border: 1px solid var(--lav); }
.sr-uc2__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--cream); color: var(--ink); }
.sr-uc2__ic svg { width: 22px; height: 22px; }
body.hai .sr-uc2__c h3 { margin: 0; font: 700 22px/1.2 var(--disp); color: var(--ink); }
.sr-uc2__ph { display: block; min-height: 180px; border-radius: 16px; border: 1.5px dashed var(--lav); background: repeating-linear-gradient(135deg, var(--mist) 0 12px, #fff 12px 24px); }
@media (max-width: 899px) { .sr-uc2__grid { grid-template-columns: minmax(0, 1fr); } .sr-uc2__ph { min-height: 120px; } }

/* ---------- Oct 28 rework: role picker in the hero + slim pinned control (AK: the rail "is just stuck there") ----------
   Amar's to-do: "Make the role a picker, defaulted to AE" and "Keep picker fixed in top left side". AK Oct 28: the vertical rail ate
   a column on every section and ended mid-page beside the Council/FAQ. Now:
   - the full role list is part of the HERO, top left (ui-reference style: light panel, name + team, the current role white);
   - every section below uses the full page width again (one container, aligned edges);
   - once the list has scrolled away, .sr-pin (fixed, top left under the nav) shows "Role: AEs" and opens the same list as a small
     popover anchored to it; it never covers the hero and hides before the FAQ / closing section / footer (start.js).
   1200px and up: list = hero column 1. 768-1199px: a 4 x 2 grid above the copy. Under 768px: a select-style button opens it. */
.sr #role-view { display: block; }
html body #role-view > header.sr-hero { padding-top: 0 !important; }
.sr-rl { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n c" "t c"; align-items: center; column-gap: 8px;
  min-height: 44px; padding: 5px 10px 5px 14px; border-radius: 14px; color: var(--ink); text-decoration: none;
  transition: background-color .18s var(--ease), box-shadow .18s var(--ease), transform .16s var(--ease); }
.sr-rl__n { grid-area: n; font: 700 14px/18px Manrope, Arial, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-rl__t { grid-area: t; font: 600 12px/16px Manrope, Arial, sans-serif; color: var(--slate); white-space: nowrap; }
.sr-rl__on { grid-area: c; color: var(--ink); }
.sr-rl.is-on { background: #fff; box-shadow: var(--sh-sm), inset 0 0 0 1px var(--line); }
@media (hover: hover) and (pointer: fine) { .sr-rl:not(.is-on):hover { background: rgba(255,255,255,.8); } }
.sr-rl:active { transform: scale(.98); }
.sr .sr-rl:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 14px; }
.sr-chev { flex: none; transition: transform .2s var(--ease); }
[aria-expanded="true"] > .sr-chev { transform: rotate(180deg); }

/* the hero list */
.sr-roles { position: relative; min-width: 0; }
.sr-roles__lab { margin: 0 0 8px 14px; font: 700 13px/18px Manrope, Arial, sans-serif; color: var(--slate); }
.sr-roles__list { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; border-radius: 22px; background: var(--mist); box-shadow: inset 0 0 0 1px rgba(221,214,255,.75); }
.sr-roles__btn { display: none; }
@media (min-width: 1200px) {
  .sr-hero__grid.sr-hero__grid--roles { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.08fr); gap: 40px; align-items: center; }
  .sr-hero__grid--roles .sr-roles { align-self: start; }
  body.hai .sr-hero__grid--roles .sr-copy h1 { font-size: clamp(40px, 3.5vw, 50px); }
  .sr-hero__grid--roles .sr-lead { font-size: 17px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .sr-hero__grid.sr-hero__grid--roles { row-gap: 32px; }
  .sr-hero__grid--roles .sr-roles { grid-column: 1 / -1; }
  .sr-roles__lab { margin-left: 4px; }
  .sr-roles__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
}
/* phones: one select-style button; the list opens under it as a popover (nothing moves) */
@media (max-width: 767px) {
  .sr-hero__grid--roles .sr-roles { margin-bottom: 4px; }
  .sr-roles__lab { display: none; }
  .sr-roles__btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; margin: 0; padding: 0 14px 0 18px; border: 0; border-radius: 999px;
    background: var(--mist); box-shadow: inset 0 0 0 1px var(--lav); color: var(--ink); font: 700 15px/1 Manrope, Arial, sans-serif; cursor: pointer; text-align: left; }
  .sr-roles__k { color: var(--slate); font-weight: 600; white-space: nowrap; }
  .sr-roles__btn b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sr-roles__ks { display: none; }
  .sr-roles__btn b { font-weight: 800; }
  .sr-roles__btn .sr-chev { margin-left: auto; }
  .sr-roles__btn:active { transform: scale(.99); }
  .sr-roles__btn:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
  .sr-roles__list { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
    padding: 6px; border-radius: 22px; background: #fff; box-shadow: var(--sh-lg), 0 0 0 1px var(--lav); }
  .sr-roles:not(.is-open) .sr-roles__list { display: none; }
  .sr-roles .sr-rl.is-on { background: var(--mist); box-shadow: none; }
}
@media (max-width: 359px) { .sr-roles__list { grid-template-columns: minmax(0, 1fr); } }

/* the slim pinned control: fixed top left under the nav (start.js sets --sr-nav and --sr-left from the real nav pill) */
.sr { --sr-left: 16px; }
.sr-pin { position: fixed; z-index: 45; top: calc(var(--sr-nav) + 8px); left: var(--sr-left); opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s, top .3s var(--ease); }
.sr-pin.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s, top .3s var(--ease); }
.sr-navoff .sr-pin { top: 12px; }
.sr-pin__btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; margin: 0; padding: 0 12px 0 16px; border: 0; border-radius: 999px; background: #fff;
  box-shadow: var(--sh-md), 0 0 0 1px var(--lav); color: var(--ink); font: 700 14px/1 Manrope, Arial, sans-serif; cursor: pointer; white-space: nowrap; transition: transform .16s var(--ease), box-shadow .18s var(--ease); }
.sr-pin__btn::after { content: ""; position: absolute; inset: -4px 0; } /* 48px tall hit area */
.sr-pin__btn { position: relative; }
.sr-pin__k { color: var(--slate); font-weight: 600; }
.sr-pin__btn b { font-weight: 800; }
@media (hover: hover) and (pointer: fine) { .sr-pin__btn:hover { box-shadow: var(--sh-md), 0 0 0 1px var(--violet); } }
.sr-pin__btn:active { transform: scale(.97); }
.sr-pin__btn:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.sr-pin__list { list-style: none; position: absolute; left: 0; top: calc(100% + 8px); width: 248px; max-height: calc(100vh - var(--sr-nav) - 72px); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px; display: grid; gap: 2px; border-radius: 20px; background: #fff; box-shadow: var(--sh-lg), 0 0 0 1px var(--lav);
  transform-origin: top left; opacity: 0; transform: scale(.96) translateY(-4px); transition: opacity .12s var(--ease), transform .12s var(--ease); }
.sr-pin.is-open .sr-pin__list { opacity: 1; transform: none; transition: opacity .18s var(--ease), transform .2s var(--ease); }
.sr-pin__list[hidden] { display: none; }
.sr-pin .sr-rl.is-on { background: var(--mist); box-shadow: none; }
/* deep links and keyboard focus never park under the nav + pinned control */
.sr #role-view [id], .sr #role-view :is(a, button, input, [tabindex]), .sr #faqs { scroll-margin-top: calc(var(--sr-nav) + 64px); }
@media (prefers-reduced-motion: reduce) { .sr-pin, .sr-pin.is-shown, .sr-pin__list, .sr-pin.is-open .sr-pin__list { transition: none; transform: none; } .sr-rl, .sr-chev { transition: none; } }
/* phones: once the nav steps away, the corner CTA pair (shell) sits top right; the pin parks just under it instead of beside it */
@media (max-width: 767px) { body:has(.hx-pair.is-on) .sr-navoff .sr-pin { top: 60px; } }

/* ---------- Oct 28 rework: one rhythm for the whole role page (AK: "UI broken ... does not feel smooth") ----------
   Every section after the testimonial band: the same vertical padding (64px; 40px on phones), one container (sr-wrap edges), and
   white and mist alternating so two white bands never meet (skills turns mist with white cards, the Council turns white, the GTM
   consolidation after "where you work" turns mist). The closing section gets its top padding back (its heading sat on the FAQ edge). */
.sr #role-view > :is(.sr-sec, .hsk, .pjr, .pgr) { padding-top: 64px; padding-bottom: 64px; }
.sr #role-view > .hsk { background: var(--mist); }
.sr #role-view > .hsk .hsk__c { background: #fff; }
.sr #role-view > .sr-cnc { background: #fff; }
.sr #role-view > #surfaces + #consolidation { background: var(--mist); }
.sr #role-view > #surfaces + #consolidation .sr-con__c:not(.is-us) { background: #fff; }
.sr #get-started { padding-top: 64px; }
@media (max-width: 767px) {
  .sr #role-view > :is(.sr-sec, .hsk, .pjr, .pgr) { padding-top: 40px; padding-bottom: 40px; }
  .sr #get-started { padding-top: 40px; }
}

/* small phones: "Role" instead of "Humantic AI for", so "Account Managers" stays on one line */
@media (max-width: 379px) { .sr-roles__kl { display: none; } .sr-roles__ks { display: inline; } }
/* the Council faces: 5 on one row from tablets up, 3 + 2 on phones (never a lone face on its own row) */
.sr .sr-cnc__people { gap: 18px 16px; }
.sr .sr-cnc__people li { width: 120px; }
@media (max-width: 599px) { .sr .sr-cnc__people { gap: 16px 8px; } .sr .sr-cnc__people li { width: calc((100% - 16px) / 3); } .sr .sr-cnc__people b { font-size: 14px; } }
/* ABM and Growth: "what you get" (white) is followed by "where you work": that one turns mist with white cards */
.sr #role-view > #why-humantic + #surfaces { background: var(--mist); }
.sr #role-view > #why-humantic + #surfaces .sr-sf__g { background: #fff; }
.sr-pin__btn, .sr-roles__btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (forced-colors: active) { .sr-pin__btn, .sr-roles__btn, .sr-pin__list, .sr-roles__list { border: 1px solid CanvasText; } }
/* tablets: the selected role reads from its white tile; no tick, so "Account Managers" never gets cut */
@media (min-width: 768px) and (max-width: 1199px) { .sr-roles .sr-rl__on { display: none; } }
/* "Where you work" with three groups (GTM, Pre-sales): three across from 600px, never 2 + a lone card; phones: four logos fit one row */
@media (min-width: 600px) and (max-width: 1023px) { .sr .sr-sf__grid[style*="--c:3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sr .sr-sf__grid[style*="--c:3"] .sr-sf__g { padding: 18px; } }
@media (max-width: 379px) { .sr .sr-sf__logos { gap: 10px 6px; } .sr .sr-sf__it { min-width: 52px; } }
/* four groups: two across until the page container is full width (1200px), so no card wraps a lone logo onto its own row */
@media (max-width: 1199px) { .sr .sr-sf__grid[style*="--c:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .sr .sr-sf__grid[style*="--c:4"], .sr .sr-sf__grid[style*="--c:3"] { grid-template-columns: minmax(0, 1fr); } }

/* Oct 28 review (R2-2, R2-15; backup 04-build/backups/oct28-review-fixes): the slim role control is smaller (36px pill, 44px touch area)
   and keeps one rule: it shows from the moment the hero list scrolls away until the FAQ, stepping out only briefly while a heading
   line or a button is under it (start.js covers()). */
.sr-pin__btn { height: 36px; gap: 4px; padding: 0 10px 0 14px; font-size: 13px; }
.sr-pin__btn::after { inset: -4px 0; }
.sr-navoff .sr-pin { left: max(16px, env(safe-area-inset-left, 0px)); }   /* once the nav steps away the pin sits in the corner band, mirroring the Sign up / Book a demo pair on the right */
/* AK Nov 1: "All-In-Ones Are Shallow. Point Tools Are Sprawl." on /start/sales-leader. Humantic AI in the middle, ink and gold, raised. */
.sr-shl__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); gap: 16px; align-items: stretch; max-width: 1180px; margin: 0 auto; }
.sr-shl__c { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 24px; background: #fff; border: 1px solid var(--lav); }
.sr-shl__c.is-us { background: var(--ink); border: 2px solid var(--gold); box-shadow: 0 24px 48px -20px rgba(17, 10, 51, .5); transform: translateY(-10px); color: #fff; }
.sr-shl__tag { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.is-us .sr-shl__tag { color: var(--gold); }
body.hai .sr-shl__c h3 { margin: 0; font: 700 22px/1.2 var(--disp); color: var(--ink); text-wrap: balance; }
body.hai .sr-shl__c.is-us h3 { color: #fff; font-size: 25px; }
.sr-shl__names { margin: 0; font-size: 14px; font-weight: 700; color: var(--violet); }
.sr-shl__body { margin: 0; font-size: 15px; line-height: 1.55; color: var(--slate); }
.is-us .sr-shl__body { color: var(--lav); }
.sr-shl__trade { margin: auto 0 0; padding: 12px 14px; border-radius: 14px; background: var(--mist); border: 1px solid var(--lav); font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--slate); }
.sr-shl__trade b { color: var(--ink); }
.is-us .sr-shl__trade { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.sr-shl__ret { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 28px; max-width: 1180px; margin: 24px auto 0; padding: 18px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--lav); }
.sr-shl__rh { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); }
.sr-shl__ret ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sr-shl__ret li { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 3px solid var(--gold); }
.sr-shl__ret b { font-size: 15px; color: var(--ink); }
.sr-shl__ret span { font-size: 13px; color: var(--slate); text-decoration: line-through; text-decoration-color: rgba(91, 100, 120, .5); }
@media (max-width: 1023px) { .sr-shl__grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; } .sr-shl__c.is-us { transform: none; order: -1; } .sr-shl__ret { grid-template-columns: minmax(0, 1fr); max-width: 640px; } .sr-shl__ret ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .sr-shl__c { padding: 20px; } }

/* Nov 1 (A21) UI pass, same words: not a 3-card trio any more. The two alternatives are quiet columns on the section (no card, a hairline
   each side), Humantic AI is the one raised ink card between them. Small-caps tags -> sentence-case labels; tool names ink bold (violet is
   for sparing use); the trade-offs read as a closing line under a hairline (no info boxes; Humantic AI's in gold text, not a gold box);
   the "retired" items drop the one-side gold borders and lead with a small struck mark instead. */
.sr-shl__c { background: transparent; border: 0; border-radius: 0; padding: 26px 20px; }
.sr-shl__c.is-us { border-radius: 24px; padding: 28px 26px; }
.sr-shl__tag { font-size: 13px; letter-spacing: 0; text-transform: none; }
.sr-shl__names { color: var(--ink); }
.is-us .sr-shl__names { color: #fff; }
.sr-shl__trade { padding: 14px 0 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 1px 0 var(--lav); }
.is-us .sr-shl__trade { background: none; color: var(--gold); box-shadow: inset 0 1px 0 rgba(255, 198, 30, .45); }
.is-us .sr-shl__trade b { color: var(--gold); }
.sr-shl__rh { font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.sr-shl__ret li { position: relative; padding-left: 26px; border-left: 0; }
.sr-shl__ret li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23110A33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; }
@media (min-width: 1024px) { .sr-shl__c:not(.is-us):first-child { box-shadow: inset -1px 0 0 var(--lav); } .sr-shl__c:not(.is-us):last-child { box-shadow: inset 1px 0 0 var(--lav); } }
@media (max-width: 1023px) { .sr-shl__c:not(.is-us) { padding: 22px 4px; box-shadow: inset 0 1px 0 var(--lav); } }

/* Nov 2 (AK shot 11): the Council block's ways and button were flush under the names (the global p reset zeroed their margins).
   Names, then the ways as one calm row 40px below, then the button 32px below that: three clear tiers. */
body.hai .sr .sr-cnc__people { row-gap: 24px; }
body.hai .sr .sr-cnc__ways { gap: 8px 10px; margin: 40px auto 0; max-width: 720px; }
body.hai .sr .sr-cnc__ways span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; background: #fff; border: 0; box-shadow: inset 0 0 0 1px #DDD6FF; font: 700 14px/1.2 Manrope, Arial, sans-serif; color: #110A33; }
body.hai .sr .sr-cnc__go { margin: 32px 0 0; }
@media (max-width: 599px) { body.hai .sr .sr-cnc__ways { margin-top: 32px; } body.hai .sr .sr-cnc__ways span { min-height: 32px; padding: 0 12px; font-size: 13px; } body.hai .sr .sr-cnc__go { margin-top: 24px; } }

/* Nov 2 (AK, Agent D), A21 only: "All-In-Ones Are Shallow" sat on mist straight into "Every Role On Your Team" (also mist), one
   band split by a hairline. It is now cream, so it reads as its own section (white above, mist below). Phones: the four retired
   line items were a 2 x 2 grid of 150px cells (names and struck tools wrapping to 2-3 lines); under 520px they are one list,
   name and struck tools on one line each. */
body.hai .sr-shl { background: var(--cream, #FFF4D2); }
@media (max-width: 519px) {
  .sr-shl__ret ul { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sr-shl__ret li { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
}

/* Nov 2 final review (backup: 04-build/backups/nov02-final/review2): 4 SEP/CRM logos wrapped 3+1 (lone Salesforce) in the
   4-column "Right Where You Work" row on /start/bdr; 2+2 there instead. */
/* (the 2+2 SEP/CRM logo grid that sat here is replaced by the one-row logo dock at the end of this file, Nov 2 late) */
/* 320px: the 4 Council engagement chips wrapped 2+1+1; stack them as one centred list under 360px. */
@media (max-width: 359px) { body.hai .sr .sr-cnc__ways { flex-direction: column; align-items: center; } }

/* Nov 2 late (AK, qa/nov02-final/ak-nov02-late/1-solutions-surfaces-cards-alignment.png; the solutions-ak agent, same block as
   public/v2/solutions/sales-v2.css): the "Right Where You Work" cards. Logo rows never lined up (Web app's one logo floated left, SEPs
   and CRMs sat 2x2), the app.humantic.ai label was a different (mono) style, and the cards had uneven empty space. Now every card is
   the same shape: centred title and line, then ONE logo dock pinned to the card's bottom edge, the same height in every card, one row,
   logos centred, every label in the same style. Backup: 04-build/backups/nov02-final/solutions-ak/start.css.bak. */
.sr .sr-sf__g { gap: 8px; padding: 24px 20px 0; text-align: center; }
.sr .sr-sf__g > p { margin: 0 0 20px; text-wrap: pretty; }
.sr .sr-sf__logos { display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-start; gap: 10px; margin: auto -20px 0; padding: 16px 8px 18px; border-top: 1px solid var(--lav); border-radius: 0 0 21px 21px; background: #fff; }
.sr #role-view > #why-humantic + #surfaces .sr-sf__logos { background: var(--mist); }
.sr .sr-sf__it { flex: 0 0 auto; min-width: 52px; gap: 6px; }
.sr .sr-sf__it img { width: 44px; height: 44px; }
.sr .sr-sf__it small, .sr .sr-sf__it .sr-sf__code { font: 600 12px/1.2 Manrope, Arial, sans-serif; color: var(--slate) !important; white-space: nowrap; }
@media (min-width: 600px) and (max-width: 1023px) { .sr .sr-sf__grid[style*="--c:3"] .sr-sf__g { padding: 20px 16px 0; } .sr .sr-sf__grid[style*="--c:3"] .sr-sf__logos { margin-inline: -16px; padding-inline: 4px; gap: 6px; } }
@media (max-width: 599px) { .sr .sr-sf__g { padding: 20px 20px 0; } .sr .sr-sf__g > p { margin-bottom: 16px; } }

/* AK Nov 5 (Amar): the role control never moves. Same spot (top left, under the nav pill, aligned to its left edge) whether the
   nav is showing or has slid away; start.js only measures the nav while it is showing. */
.sr-pin, .sr-navoff .sr-pin, .sr-pin.is-shown { top: calc(var(--sr-nav, 90px) + 8px); left: var(--sr-left, 16px); }
.sr-pin { transition: opacity .18s var(--ease), visibility 0s linear .18s; transform: none; }
.sr-pin.is-shown { transition: opacity .2s var(--ease), visibility 0s; }
@media (max-width: 767px) { body:has(.hx-pair.is-on) .sr-navoff .sr-pin { top: calc(var(--sr-nav, 50px) + 8px); } }

/* AK Nov 5 (Amar: "none of the sections are taking full frame"): on desktop every role page section fills one screen, content
   centred, the same rule as the product pages (pm-clean.css). The logo strip under the hero is the one exception. */
@media (min-width: 900px) and (min-height: 600px) {
  html body main.sr section:not(#proof):not(.hxp):not(section section) { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; box-sizing: border-box; }
  html body main.sr section:not(#proof):not(.hxp):not(section section) > * { width: 100%; box-sizing: border-box; }   /* keep each band's own width (auto margins would shrink it in the grid) */
}

/* AK Nov 5 (Amar: should the two sides be in a tile?): yes. The side columns are white tiles with a lavender edge, the same
   corner and padding as the "retired" strip under them, so the row reads as three cards plus one strip; Humantic AI stays the
   one raised ink card in the middle. */
.sr-shl .sr-shl__c:not(.is-us) { background: #fff; border: 1px solid var(--lav); border-radius: 24px; padding: 26px 24px; box-shadow: none !important; }
@media (max-width: 1023px) { .sr-shl .sr-shl__c:not(.is-us) { padding: 22px 20px; } }
@media (min-width: 900px) and (max-height: 820px) { html body main.sr #consolidation { padding-top: 40px; padding-bottom: 40px; } main.sr #consolidation .sr-sub2 { margin-bottom: 24px; } main.sr #consolidation .sr-shl__ret { margin-top: 16px; } main.sr #consolidation .sr-con__note { margin-top: 14px; } }
@media (min-width: 900px) and (max-height: 820px) { html body main.sr section#consolidation { padding-top: 32px !important; padding-bottom: 32px !important; } html body main.sr #consolidation .sr-shl__c { padding-top: 20px !important; padding-bottom: 20px !important; } html body main.sr #consolidation .sr-shl__ret { padding-top: 14px; padding-bottom: 14px; } }

/* AK Nov 5: Sales Leaders, "Every Role On Your Team, Covered": a role picker over the use cases (the same use-case box as each role page) */
.uct__pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: max-content; max-width: 100%; margin: 0 auto 24px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--lav); }
.uct__b { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 700 15px/1 Manrope, Arial, sans-serif; cursor: pointer; }
.uct__b[aria-selected="true"] { background: var(--gold); font-weight: 800; }
@media (hover: hover) and (pointer: fine) { .uct__b:not([aria-selected="true"]):hover { background: var(--mist); } }
.uct__b:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.uct__p[hidden] { display: none; }
.uct .uc--in { background: transparent; }
@media (max-width: 599px) { .uct__pick { border-radius: 22px; } .uct__b { padding: 0 14px; font-size: 14px; } }

/* AK Nov 5 (round 2, Amar): the role control sits in the extreme top-left corner (16px in, 12px down), the mirror of the corner
   Start free trial / Book a demo pair; it shows while that pair shows (start.js). Above everything else. */
.sr-pin, .sr-navoff .sr-pin, .sr-pin.is-shown, body:has(.hx-pair.is-on) .sr-navoff .sr-pin { top: 12px !important; left: max(16px, env(safe-area-inset-left, 0px)) !important; z-index: 1001; }

/* AK Nov 5 (round 2, Amar: "the font sizes in the hero are not right", "not covering full frame"): every role hero copies the home
   hero (views/hp2-hero-rep.ejs): 1200px frame with 24px sides, words 560px wide, H1 clamp(40px, 5.2vw, 72px)/1.04 at 700, the line
   clamp(18px, 1.6vw, 22px)/1.45 at 600; on desktop the hero and the logo strip under it fill the first screen exactly. */
body.hai #role-view .sr-hero .sr-copy h1 { font: 700 clamp(40px, 5.2vw, 72px)/1.04 var(--disp); letter-spacing: -.02em; max-width: 560px; }
#role-view .sr-hero .sr-lead { max-width: 560px; font: 600 clamp(18px, 1.6vw, 22px)/1.45 Manrope, Arial, sans-serif; color: var(--ink); }
@media (min-width: 992px) {
  html body #role-view > header.sr-hero { box-sizing: border-box; min-height: calc(100svh - 104px); display: grid; align-content: center; padding: 100px 0 32px !important; }
  #role-view .sr-hero > .sr-wrap { width: 100%; box-sizing: border-box; padding: 0 24px; }
  #role-view .sr-hero .sr-hero__grid, #role-view .sr-hero .sr-hero__grid:has(.sr-hv) { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 56px; }
}

/* AK Nov 5 (round 2): the "Every Role On Your Team, Covered" role picker uses the site's toggle pattern (the People Research
   sample's Profile / Committee switch, pi-sample.css .pis-seg): a soft pill track, the chosen role in ink with white text */
.uct__pick { display: flex; width: max-content; max-width: 100%; gap: 4px; margin: 0 auto 24px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: none; }
.uct__b { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font: 700 14px/1 Manrope, Arial, sans-serif; color: var(--slate); cursor: pointer; transition: background-color 160ms, color 160ms; }
.uct__b[aria-selected="true"] { background: var(--ink); color: #fff; font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .uct__b:not([aria-selected="true"]):hover { background: var(--mist); color: var(--ink); } }
@media (max-width: 599px) { .uct__pick { flex-wrap: wrap; justify-content: center; border-radius: 22px; } .uct__b { padding: 0 12px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .uct__b { transition: none; } }

/* AK Nov 5 (round 2, Amar: Calendar and email "is overflowing"): the logos in a surface card share its width equally, so four fit */
.sr .sr-sf__logos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); justify-items: center; gap: 6px; }
.sr .sr-sf__it { min-width: 0; max-width: 100%; }
.sr .sr-sf__it small { overflow-wrap: anywhere; }
@media (min-width: 992px) { html body.hai main.sr #role-view { padding-top: 0; } }   /* the old picker-bar gap; the hero's own 100px clears the nav */

/* Nov 6: footnote under the clickable surface logos (same as /solutions) */
.sr-sf__note { max-width: 1180px; margin: 16px auto 0; font: 500 13px/1.45 Manrope, "Manrope Fallback", Arial, sans-serif; color: #5B6478; text-align: left; }

/* Nov 7 (AK): Nowhere Else section in the product-page colours: cream panel, lavender cards. Colours only.
   Same values as the "...You Can't Get Anywhere Else" block in product-pages/pm-clean.css (Nov 6). The ink "for-leaders" variant is left alone.
   Backup: 04-build/backups/nov07-dif-colours/ */
.sr-dif:not(.sr-dif--ink) .sr-wrap { box-sizing: border-box; width: min(1180px, calc(100% - 32px)); max-width: 1180px; margin: 0 auto; padding: 48px 40px 56px; border: 1px solid #FFE8A5; border-radius: 24px; background: #FFF4D2; }
@media (max-width: 899px) { .sr-dif:not(.sr-dif--ink) .sr-wrap { padding: 32px 20px 36px; } }
@media (max-width: 479px) { .sr-dif:not(.sr-dif--ink) .sr-wrap { padding: 28px 12px 28px; } }
.sr-dif:not(.sr-dif--ink) .sr-dif__box { max-width: none; border: 1px solid #DDD6FF; background: #DDD6FF; }
.sr-dif:not(.sr-dif--ink) .sr-dif__box li { background: #DDD6FF; border-left: 2px solid #FFF4D2; }
.sr-dif:not(.sr-dif--ink) .sr-dif__box li:first-child { border-left: 0; }
.sr-dif:not(.sr-dif--ink) .sr-dif__box p { color: rgba(17,10,51,.82); }
@media (max-width: 1023px) { .sr-dif:not(.sr-dif--ink) .sr-dif__box li:nth-child(3) { border-left: 0; } .sr-dif:not(.sr-dif--ink) .sr-dif__box li:nth-child(n+3) { border-top: 2px solid #FFF4D2; } }
@media (max-width: 599px) { .sr-dif:not(.sr-dif--ink) .sr-dif__box li { border-left: 0; } .sr-dif:not(.sr-dif--ink) .sr-dif__box li + li { border-top: 2px solid #FFF4D2; } }