.bb-roles{--bb-r-desc:#78726c;--bb-r-desc-lead:#2d2b28;--bb-r-btn:#efede9;--bb-r-btn-text:#252421;--bb-r-platforms:#7a7268;--bb-r-phone-line:#d9d6cf;--bb-r-phone:#f5f5f1;--bb-r-phone-shadow:0 28px 70px rgba(40,37,30,0.08);--bb-r-chrome:#fafaf8;--bb-r-chrome-line:#e6e3dd;--bb-r-head-line:#e4e2dc;--bb-r-stage:#ebece6;--bb-r-stage-text:#6b6b61;--bb-r-bubble-text:#59554f;--bb-r-user:#292a25;--bb-r-output-line:#e0e1d9;--bb-r-output-shadow:0 8px 24px rgba(42,43,36,0.035);--bb-r-top-line:#eceee7;--bb-r-top-text:#747869;--bb-r-row-line:#eef0e9;--bb-r-row-text:#70786a;--bb-r-row-tick:#607e55;--bb-r-dot:#dedfd8;--bb-r-dot-on:#282824;--bb-r-bottom-line:#dfdfd8;--bb-r-bottom-text:#76776c;padding:100px 0 90px;font-size:16px;line-height:normal}.ds-library[data-theme=dark] .bb-roles{--bb-r-desc:var(--ds-muted);--bb-r-desc-lead:var(--ds-ink);--bb-r-btn:var(--ds-inverse);--bb-r-btn-text:var(--ds-on-inverse);--bb-r-platforms:var(--ds-muted);--bb-r-phone-line:var(--ds-line);--bb-r-phone:var(--ds-soft);--bb-r-phone-shadow:none;--bb-r-chrome:var(--ds-surface);--bb-r-chrome-line:var(--ds-line);--bb-r-head-line:var(--ds-line);--bb-r-stage:var(--ds-surface);--bb-r-stage-text:var(--ds-muted);--bb-r-bubble-text:var(--ds-muted);--bb-r-user:var(--ds-inverse);--bb-r-output-line:var(--ds-line);--bb-r-output-shadow:none;--bb-r-top-line:var(--ds-line);--bb-r-top-text:var(--ds-muted);--bb-r-row-line:var(--ds-line);--bb-r-row-text:var(--ds-muted);--bb-r-row-tick:var(--ds-positive);--bb-r-dot:var(--ds-line);--bb-r-dot-on:var(--ds-inverse);--bb-r-bottom-line:var(--ds-line);--bb-r-bottom-text:var(--ds-muted)}.bb-roles .wrap{width:min(1260px,calc(100% - 64px));margin:auto}.bb-home .bb-roles :is(h2,strong){max-width:none;text-wrap:wrap;overflow-wrap:normal}.bb-roles .role-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:72px;align-items:center;max-width:1260px;margin:auto}.bb-home .bb-roles h2{margin:0;color:var(--ds-heading-ink);font-size:clamp(48px,5vw,68px);font-weight:850;line-height:1.12;letter-spacing:-.05em}.bb-roles .role-tabs{margin:30px 0}.bb-roles .role-bit{display:block;width:24px;height:24px;object-fit:contain;filter:url(#bb-grain)}.bb-roles .role-desc{min-height:104px;color:var(--bb-r-desc);font-size:16px;line-height:1.75}.bb-roles .role-desc strong{color:var(--bb-r-desc-lead)}.bb-roles :is(.role-desc,.phone-chat){display:grid}.bb-roles :is(.role-desc,.phone-chat)>*{grid-area:1/1}.bb-roles :is(.role-desc,.phone-chat)>[aria-hidden]{visibility:hidden}.bb-roles .role-actions{margin-top:24px}.bb-home .bb-roles .btn{padding:12px 19px;border:0;border-radius:999px;background:var(--bb-r-btn);color:var(--bb-r-btn-text);font-size:16px;font-weight:700;line-height:normal}.bb-roles .platforms{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:22px;color:var(--bb-r-platforms);font-size:13px}.bb-roles .platforms>span{display:inline-flex;align-items:center;gap:6px}.bb-roles .phone{position:relative;overflow:hidden;width:100%;max-width:680px;margin:auto;padding:0;border:1px solid var(--bb-r-phone-line);border-radius:24px;background:var(--bb-r-phone);box-shadow:var(--bb-r-phone-shadow)}.bb-roles .phone:before{content:"";display:block;height:27px;border-bottom:1px solid var(--bb-r-chrome-line);background:var(--bb-r-chrome)}.bb-roles .phone-head{display:flex;align-items:center;gap:11px;height:64px;padding:0 22px;border-bottom:1px solid var(--bb-r-head-line);background:var(--ds-surface)}.bb-roles .phone-head img{display:block;width:32px;height:32px;object-fit:contain;filter:url(#bb-grain)}.bb-roles .phone-head strong{flex:1;font-size:14px}.bb-roles .phone-screen{display:flex;flex-direction:column;gap:16px;min-height:420px;padding:30px 30px 18px}.bb-roles .phone-stage{align-self:center;padding:6px 11px;border-radius:999px;background:var(--bb-r-stage);color:var(--bb-r-stage-text);font-size:8px;letter-spacing:.06em;text-transform:uppercase}.bb-roles .phone-turn{display:flex;flex-direction:column;gap:16px}.bb-roles .pbubble{max-width:72%;padding:15px 17px;border-radius:17px 17px 17px 5px;background:var(--ds-surface);color:var(--bb-r-bubble-text);font-size:13px;line-height:1.6}.bb-roles .pbubble.user{align-self:flex-end;max-width:68%;border-radius:17px 17px 5px 17px;background:var(--bb-r-user);color:var(--ds-on-inverse)}.bb-roles .phone-output{overflow:hidden;width:100%;border:1px solid var(--bb-r-output-line);border-radius:15px;background:var(--ds-surface);box-shadow:var(--bb-r-output-shadow)}.bb-roles .phone-output .top{display:flex;justify-content:space-between;padding:11px 15px;border-bottom:1px solid var(--bb-r-top-line);color:var(--bb-r-top-text);font-size:9px}.bb-roles .phone-output .body{padding:16px 16px 13px}.bb-roles .phone-output .body strong{font-size:14px}.bb-roles .result{display:flex;gap:8px;padding:9px 0;border-top:1px solid var(--bb-r-row-line);color:var(--bb-r-row-text);font-size:11px}.bb-roles .result:before{content:"✓";color:var(--bb-r-row-tick)}.bb-roles .phone-output .action{padding:0 15px 15px}.bb-roles .phone-output .action span{display:inline-block;padding:10px 15px;border-radius:999px;background:var(--bb-r-user);color:var(--ds-on-inverse);font-size:10px;font-weight:700}.bb-roles .phone-progress{display:flex;justify-content:center;gap:6px}.bb-roles .phone-progress i{width:29px;height:4px;border-radius:999px;background:var(--bb-r-dot)}.bb-roles .phone-progress i.on{background:var(--bb-r-dot-on)}.bb-roles .phone-bottom{display:flex;justify-content:space-between;margin:0 22px 22px;padding:13px 16px;border:1px solid var(--bb-r-bottom-line);border-radius:999px;background:var(--ds-surface);color:var(--bb-r-bottom-text);font-size:10px}@media (max-width:900px){.bb-roles .wrap{width:calc(100% - 36px)}.bb-roles .role-layout{grid-template-columns:1fr;gap:36px}.bb-roles .role-copy{text-align:center}.bb-roles .role-tabs{--ds-segment-justify:center}.bb-roles .platforms{justify-content:center}.bb-roles .role-bit{display:none}.bb-roles .phone{width:min(680px,100%)}}@media (max-width:560px){.bb-roles{padding:64px 0}.bb-roles .phone{border-radius:20px}.bb-roles .phone:before{height:22px}.bb-roles .phone-head{height:58px;padding:0 16px}.bb-roles .phone-screen{min-height:430px;padding:24px 16px 14px}.bb-roles .pbubble,.bb-roles .pbubble.user{max-width:92%;font-size:12px}.bb-roles .phone-bottom{margin:0 14px 14px}}.bb-roles .bb-pause{position:absolute;z-index:1;top:12px;right:12px}.bb-roles .bb-pause:not(:focus-within){width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media (prefers-reduced-motion:reduce){.bb-roles .bb-pause{display:none}}