/* AK Nov 5: the corner role / team control (.sr-pin) and the role picker section (.uct), shared with the Teams pages (views/v2/solutions.ejs).
   Copied from public/v2/start/start.css (where the role pages keep their own copy); the role pages do not load this file. */
.sr-pin, .uct { --ink: #110A33; --violet: #341D99; --lav: #DDD6FF; --mist: #F6F4FF; --slate: #5B6478; --line: rgba(17,10,51,.1); --ease: cubic-bezier(.2,.7,.2,1); --sh-sm: 0 2px 8px rgba(17,10,51,.08); --sh-md: 0 10px 28px -12px rgba(17,10,51,.3); }
.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); }
.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; }
@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; } }
.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; } }
.sr-pin__btn { height: 36px; gap: 4px; padding: 0 10px 0 14px; font-size: 13px; }
.sr-pin__btn::after { inset: -4px 0; }
/* 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: 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; }
/* 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; } }