/* Six stories, one composition: the original numerical language with two editorial cards. */
.golden-six { grid-template-columns:.95fr 1.1fr .95fr;grid-template-rows:150px 190px 240px;gap:16px; }
.golden-six .g4 { min-height:0;padding:25px 27px; }
.golden-six .g4-intro { grid-area:1/1/2/2;justify-content:center;background:#e9eff7;border:0; }
.g4-intro>p { font-size:11px;line-height:1.5;margin:0 0 10px;color:#627c93; }
.g4-intro h3 { font-size:26px;line-height:1.28;font-weight:450;letter-spacing:-.035em;margin:0;color:#263e55; }
.golden-six .g4-natural { grid-area:2/1/4/2; }
.golden-six .g4-natural .gtop { flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:24px; }
.golden-six .g4-natural .gtop>b { font-size:clamp(66px,6.6vw,94px); }
.golden-six .g4-natural .gtop>span { font-size:14px;max-width:none; }
.golden-six .g4-natural .dotfield { grid-template-columns:repeat(20,minmax(0,1fr));gap:5px; }
.golden-six .g4-natural .gcap { font-size:11px; }
.golden-six .g4-recording { grid-area:1/2/3/3;padding:0;border:0;background:#243c52;color:#fff; }
.g4-recording>img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% center;transform:none;transition:transform 900ms var(--ease-quality); }
.g4-recording:hover>img { transform:scale(1.025); }
.g4-recording:after { content:'';position:absolute;inset:0;background:linear-gradient(0deg,#102b41ee,transparent 88%);pointer-events:none; }
.g4-recording .recording-copy { position:absolute;left:27px;right:27px;bottom:27px;z-index:1; }
.g4-recording .recording-copy p { color:#d7e7f2;font-size:11px;margin:0 0 12px; }
.g4-recording .recording-copy h3 { font-size:26px;line-height:1.35;margin:0 0 20px;max-width:none; }
.g4-recording .recording-copy button { min-height:42px;background:#f5f9fc;color:#244258;padding:10px 16px;gap:10px;font-size:12px; }
.g4-recording .recording-copy button>.ui-icon { width:16px;height:16px; }
.golden-six .g4-cost { grid-area:1/3/3/4; }
.golden-six .g4-cost .gtop { gap:12px;margin-bottom:18px; }
.golden-six .g4-cost .gtop>b { font-size:clamp(64px,6.2vw,88px); }
.golden-six .g4-cost .gtop>span { font-size:13px; }
.golden-six .g4-cost .pricepills { margin:8px 0 20px;gap:10px; }
.golden-six .g4-cost .pp { padding:15px 12px;gap:6px; }
.golden-six .g4-cost .pp u { font-size:10px; }
.golden-six .g4-cost .pp b { font-size:22px; }
.golden-six .g4-cost .pp b i { font-size:10px;margin-left:3px; }
.golden-six .g4-cost .gcap { font-size:11px; }
.golden-six .g4-conversion { grid-area:3/2/4/3;display:grid;grid-template-columns:.9fr 1.1fr;grid-template-rows:1fr auto;gap:10px 12px; }
.golden-six .g4-conversion .gtop { grid-area:1/1/2/2;flex-direction:column;align-items:flex-start;gap:10px;margin:0; }
.golden-six .g4-conversion .gtop>b { font-size:80px; }
.golden-six .g4-conversion .gtop>span { font-size:13px;max-width:130px; }
.golden-six .g4-conversion .convbars { grid-area:1/2/3/3;align-self:center;height:145px;gap:13px;margin:0;padding:0; }
.golden-six .g4-conversion .convbars i { max-width:60px;border-radius:9px 9px 3px 3px; }
.golden-six .g4-conversion.in .b1 { height:50px; }.golden-six .g4-conversion.in .b2 { height:100px; }
.golden-six .g4-conversion .convbars u { font-size:10px;white-space:nowrap; }
.golden-six .g4-conversion .gcap { grid-area:2/1/3/2;font-size:10px; }
.golden-six .g4-workload { grid-area:3/3/4/4; }
.golden-six .g4-workload .gtop { gap:12px;margin-bottom:10px; }
.golden-six .g4-workload .gtop>b { font-size:80px; }
.golden-six .g4-workload .gtop>span { font-size:13px;max-width:130px; }
.golden-six .g4-workload .hoursviz { margin:8px 0 16px;gap:12px; }
.golden-six .g4-workload .hrow { grid-template-columns:64px minmax(0,1fr) 42px;gap:8px; }
.golden-six .g4-workload .hrow u { font-size:11px; }.golden-six .g4-workload .hrow em { font-size:12px; }
.golden-six .g4-workload .gcap { font-size:10px; }
/* The employee and business selectors use the same pill, index, border and active blue. */
.agent-navigation { margin-bottom:34px; }
.role-tabs.scene-switch { margin:0;width:auto;flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0;overflow:auto;scrollbar-width:none; }
.scene-switch:is(.role-tabs,.case-tabs) button { position:relative;display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:10px 12px;border-radius:99px;border:1px solid #e1e6ea;background:#fff;color:#213440;font-size:13px;font-weight:400;white-space:nowrap;flex-wrap:nowrap;transition:background-color 250ms,color 250ms,border-color 250ms; }
.scene-switch:is(.role-tabs,.case-tabs) button>i { display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:#14222e;color:#fff;font-size:10px;font-style:normal;margin:0; }
.scene-switch:is(.role-tabs,.case-tabs) button[aria-selected=true] { background:#0072e5;border-color:#0072e5;color:#fff; }
.scene-switch:is(.role-tabs,.case-tabs) button[aria-selected=true]>i { background:#fff;color:#1c638d; }
.scene-switch:is(.role-tabs,.case-tabs) button:hover { background:#f1f6fb;border-color:#c1d6e8; }
.scene-switch:is(.role-tabs,.case-tabs) button[aria-selected=true]:hover { background:#0063c8;border-color:#0063c8; }
.role-tabs.scene-switch .employee-tab-name { display:inline;opacity:1;font-size:13px;margin:0; }
.employee-tab-name em { font-size:11px;opacity:.7;font-style:normal;margin-left:5px; }
.role-tabs.scene-switch button:before { content:none; }
.role-tabs.scene-switch button:after { content:none; }
.role-tabs.scene-switch button[aria-selected=true]:before { content:'';position:absolute;bottom:1px;left:24px;right:24px;height:2px;background:#ffffff40; }
.role-tabs.scene-switch button[aria-selected=true]:after { content:'';position:absolute;bottom:1px;left:24px;right:24px;height:2px;background:#ffffffdf;transform:scaleX(var(--role-progress,0));transform-origin:left; }
.stage-foot { align-items:center;gap:24px; }
.stage-foot>.stage-arrows { display:flex;margin-left:auto;gap:8px; }
.stage-foot>.stage-arrows button { width:44px;height:44px;min-width:44px;min-height:44px; }
.stage-foot>span:nth-child(2) { margin-left:auto; }
@media(max-width:1100px) and (min-width:881px) {
 .golden-six .g4 { padding:22px; }.golden-six .g4-recording { padding:0; }
 .g4-intro h3 { font-size:24px; }.g4-intro>p { font-size:10px; }
 .golden-six .g4-natural .gtop>b { font-size:66px; }.golden-six .g4-natural .gtop>span { font-size:13px; }
 .golden-six .g4-cost .gtop>b { font-size:64px; }.golden-six .g4-cost .pricepills { flex-direction:column;margin-top:0;gap:8px; }.golden-six .g4-cost .pp { padding:10px 12px; }.golden-six .g4-cost .pp b { font-size:22px;line-height:1.2; }.golden-six .g4-cost .gcap { font-size:10px; }
 .golden-six .g4-conversion { grid-template-columns:.8fr 1.2fr;gap:8px; }.golden-six .g4-conversion .gtop>b,.golden-six .g4-workload .gtop>b { font-size:64px; }.golden-six .g4-conversion .gtop>span { font-size:12px; }
 .golden-six .g4-workload .gtop { gap:8px; }.golden-six .g4-workload .gtop>span { font-size:12px;max-width:100px; }
 .g4-recording .recording-copy h3 { font-size:23px; }
}
@media(max-width:880px) {
 .golden-six { grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;gap:16px; }
 .golden-six .g4 { grid-area:auto;padding:26px;min-height:280px; }
 .golden-six .g4-intro { min-height:160px; }.golden-six .g4-recording { padding:0;min-height:300px; }
 .golden-six .g4-natural { grid-column:1;grid-row:2; }.golden-six .g4-conversion { grid-column:2;grid-row:2; }
 .golden-six .g4-cost { grid-column:1;grid-row:3; }.golden-six .g4-workload { grid-column:2;grid-row:3; }
 .golden-six .g4-conversion { display:flex; }.golden-six .g4-conversion .gtop { flex-direction:row; }.golden-six .g4-conversion .convbars { width:100%;height:135px;margin:8px 0 20px; }.golden-six .g4-conversion .convbars i { max-width:85px; }.golden-six .g4-conversion .gcap { margin-top:auto; }
 .golden-six .g4-natural .gtop>b { font-size:70px; }.golden-six .g4-cost .pricepills { flex-direction:column;gap:10px;margin-bottom:20px; }
}
@media(max-width:760px) {
 .golden-six { grid-template-columns:1fr;gap:14px; }
 .golden-six .g4 { grid-area:auto;min-height:0;padding:25px 24px;border-radius:24px; }
 .golden-six .g4-intro { min-height:154px; }.golden-six .g4-recording { min-height:310px;padding:0; }
 .golden-six .g4-natural .gtop>b { font-size:70px; }.golden-six .g4-natural .dotfield { margin:8px 0 25px; }
 .golden-six .g4-conversion .gtop { flex-direction:row;align-items:baseline;gap:16px; }.golden-six .g4-conversion .gtop>b { font-size:80px; }.golden-six .g4-conversion .gtop>span { max-width:155px; }.golden-six .g4-conversion .convbars { height:145px;margin:14px 0 22px; }.golden-six .g4-conversion .convbars i { max-width:100px; }
 .golden-six .g4-workload .gtop { flex-direction:row;align-items:baseline;gap:16px;margin-bottom:18px; }.golden-six .g4-workload .gtop>span { max-width:155px;font-size:13px; }.golden-six .g4-workload .hoursviz { margin:8px 0 22px; }
 .golden-six .g4-cost .gtop { flex-direction:row;align-items:baseline;gap:12px; }.golden-six .g4-cost .gtop>span { max-width:140px; }.golden-six .g4-cost .pricepills { flex-direction:row;margin:8px 0 22px; }
 .g4-recording .recording-copy { left:24px;right:24px;bottom:24px; }.g4-recording .recording-copy h3 { font-size:26px; }
 .role-tabs.scene-switch { display:flex;gap:7px; }
 .role-tabs.scene-switch button { flex:1 0 132px;min-width:132px;min-height:44px;padding:8px 10px;font-size:12px;gap:7px; }
 .role-tabs.scene-switch button>i { width:24px;height:24px;font-size:9px; }
 .role-tabs.scene-switch .employee-tab-name { font-size:12px; }.employee-tab-name em { display:none; }
 .agent-navigation { margin-bottom:23px; }
 .stage-foot { gap:12px; }.stage-foot>span:nth-child(2) { display:none; }
}
@media(max-width:360px) {
 .golden-six .g4 { padding:23px 20px; }.golden-six .g4-recording { padding:0; }
 .golden-six .g4-natural .gtop>b { font-size:62px; }
 .golden-six .g4-cost .gtop { flex-direction:column;align-items:flex-start; }.golden-six .g4-cost .gtop>span { max-width:none; }.golden-six .g4-cost .pricepills { flex-direction:column; }
}
@media(prefers-reduced-motion:reduce) { .g4-recording>img,.scene-switch:is(.role-tabs,.case-tabs) button { transition:none; } }