/* rangooo who: hero-name chip + popover */
.who-chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 4px;border:1px solid var(--line,rgba(0,0,0,.12));border-radius:999px;background:var(--surface,#fff);color:var(--ink,#16202C);font-weight:600;font-size:13px;line-height:1;font-family:inherit;cursor:pointer;max-width:170px;transition:transform .2s,box-shadow .2s,border-color .2s}
.who-chip:hover{box-shadow:0 4px 14px rgba(0,0,0,.12);transform:translateY(-1px)}
.who-chip:focus-visible,.who-in:focus-visible,.who-r:focus-visible,.who-seg button:focus-visible,.who-done:focus-visible{outline:3px solid #E8590C;outline-offset:2px}
.who-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.who-av{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none;background:linear-gradient(135deg,#f59f00,#e8590c 55%,#c2255c);color:#fff;font-weight:700;font-size:14px;line-height:1;font-family:inherit}
.who-av-l{width:64px;height:64px;font-size:30px;box-shadow:0 8px 22px rgba(232,89,12,.35)}
.who-chip.pulse .who-av{animation:whop .5s ease}
@keyframes whop{50%{transform:scale(1.18)}}
.who-pop{position:fixed;z-index:2147483000;padding:18px;border-radius:20px;background:var(--surface,#fff);color:var(--ink,#16202C);border:1px solid var(--line,rgba(0,0,0,.1));box-shadow:0 24px 60px rgba(0,0,0,.28);opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .16s,transform .16s;box-sizing:border-box}
.who-pop[hidden]{display:none}
.who-pop.on{opacity:1;transform:none}
.who-big{display:flex;justify-content:center;margin:2px 0 12px}
.who-lb,.who-h{display:block;font-weight:600;font-size:11px;line-height:1;font-family:inherit;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#667);margin:0 0 8px}
.who-in{width:100%;box-sizing:border-box;height:46px;padding:0 14px;border-radius:12px;border:1.5px solid var(--line,rgba(0,0,0,.15));background:var(--bg,#fff);color:inherit;font-weight:600;font-size:18px;line-height:1;font-family:inherit}
.who-in:focus{border-color:var(--accent,#e8590c);outline:none;box-shadow:0 0 0 3px rgba(232,89,12,.18)}
.who-sec{margin-top:14px}
.who-rl{display:flex;flex-wrap:wrap;gap:6px}
.who-r{border:1px solid var(--line,rgba(0,0,0,.12));background:transparent;color:inherit;border-radius:999px;padding:7px 12px;font-weight:600;font-size:13px;line-height:1;font-family:inherit;cursor:pointer}
.who-r:hover{border-color:var(--accent,#e8590c)}
.who-seg{display:flex;gap:4px;padding:3px;border-radius:12px;background:var(--bg,rgba(0,0,0,.05));border:1px solid var(--line,rgba(0,0,0,.08))}
.who-seg button{flex:1;border:0;border-radius:9px;padding:9px 4px;background:transparent;color:inherit;font-weight:600;font-size:13px;line-height:1;font-family:inherit;cursor:pointer}
.who-seg button[aria-pressed="true"]{background:var(--ink,#16202C);color:var(--surface,#fff)}
.who-done{width:100%;margin-top:16px;height:44px;border:0;border-radius:12px;background:linear-gradient(135deg,#f59f00,#e8590c);color:#fff;font-weight:700;font-size:15px;line-height:1;font-family:inherit;cursor:pointer}
html[data-night="1"] .who-pop{box-shadow:0 24px 60px rgba(0,0,0,.6)}
@media(max-width:520px){.who-chip{padding:0 4px;gap:0;width:36px;justify-content:center}.who-nm{display:none}}
@media(prefers-reduced-motion:reduce){.who-pop,.who-chip{transition:none}.who-chip.pulse .who-av{animation:none}}
@media(max-width:420px){.who-chip{width:30px;height:30px;padding:0;flex:none}.who-chip .who-av{width:26px;height:26px;font-size:13px}}
@media(max-width:380px){header.top .rgs-hb{display:none!important}}
/* night switch inside the popover (the header moon is hidden on phones) */
.who-night{display:none;width:100%;margin-top:14px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:12px;border:1px solid var(--line,rgba(0,0,0,.12));background:transparent;color:inherit;font-weight:600;font-size:14px;line-height:1;font-family:inherit;cursor:pointer}
.who-night i{position:relative;width:38px;height:22px;border-radius:99px;background:var(--line,#ccc);transition:background .2s}
.who-night i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.who-night[aria-pressed="true"] i{background:#e8590c}
.who-night[aria-pressed="true"] i::after{transform:translateX(16px)}
/* calmer phone header and hero */
@media(max-width:520px){
  header.top .rgs-hb,header.top .kn-btn:not(.ott-sb){display:none!important}
  .who-night{display:flex}
}
@media(max-width:860px){
  .fx-stage{height:min(38vh,320px)!important}
  .fx-pin:has(.fx-stage:not([data-s="1"])) .fx-steps{height:150px!important}
}