/* Keep real phone captures at a readable, fixed size. */
.gb-stage{display:flex;flex-direction:column;align-items:center;gap:24px;min-height:0}
.gb-phone-scroll{width:100%;overflow-x:auto;padding:6px 3px 18px;scrollbar-width:thin;scrollbar-color:#a7b5c8 transparent;outline-offset:4px}
.gb-phone-row{display:flex;align-items:flex-start;gap:24px;width:max-content;min-width:100%;justify-content:center}
.gb-phone{width:300px;flex:0 0 300px;overflow:hidden;border-radius:36px;box-shadow:0 0 0 3px #243447,0 8px 20px #21374b12;background:#f8f1e8}
.gb-phone img{display:block;width:300px;height:auto;border-radius:33px}
.gd-preview-dialog:has(.gb-phone-scroll){width:min(1100px,calc(100vw - 32px));max-width:1100px}
.gb-ios{width:300px;flex:0 0 300px;box-sizing:border-box;padding:22px 14px;background:#f2f2f7;border:1px solid #d9dde2;border-radius:28px;color:#21374b}
.gb-ios-back{font-size:15px!important;color:#1e3d9a;margin:0 0 28px!important}
.gb-ios h3{font:600 22px/1.2 'General Sans',sans-serif;letter-spacing:-.4px;margin:0 0 22px}
.gb-ios-rows{border-radius:12px;background:#fff;overflow:hidden;padding:0 12px}
.gb-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid rgba(33,55,75,.14);font:400 16px/1.4 'General Sans',sans-serif}
.gb-row:last-child{border-bottom:0}
.gb-ios .gb-row{font-size:14px;gap:10px;padding:16px 0}
.gb-ios-note,.gb-illustrative{font-size:13px!important;line-height:1.5!important;color:#607083;margin:16px 2px 0!important}
.gb-check{font-size:20px;color:#1e3d9a}
.gb-toggle{display:block;width:42px;height:26px;border-radius:20px;background:#d4d6db;padding:3px;box-sizing:border-box}
.gb-toggle i{display:block;width:20px;height:20px;border-radius:50%;background:white;box-shadow:0 1px 2px #21374b26}
.gb-example{background:#fffdf8;border:1px solid rgba(33,55,75,.14);border-radius:16px;padding:28px;width:100%;max-width:640px;box-sizing:border-box;color:#21374b}
.gb-example h3{font:600 23px/1.25 'General Sans',sans-serif;letter-spacing:-.45px;margin:0 0 22px}
.gb-example p{font:400 16px/1.5 'General Sans',sans-serif;margin:12px 0;color:#607083}
.gb-example .gb-context{font-size:13px;margin:0 0 20px}
.gb-provider{display:flex;align-items:center;gap:14px}
.gb-brand-icon{display:block;width:32px!important;height:28px!important;object-fit:contain;flex:0 0 32px}
.gb-action{display:inline-block;padding:10px 14px;border-radius:9px;background:#1e3d9a;color:white;font-size:14px;font-weight:600;white-space:nowrap}
.gb-mock-actions{display:flex;align-items:center;justify-content:flex-end;gap:24px;margin-top:30px;font-size:15px}
.gb-example>.gb-provider{margin-bottom:24px}
.gb-example>.gb-provider h3,.gb-example>.gb-provider p{margin:0}
@media(max-width:600px){.gb-stage{padding:20px 14px}.gb-example{padding:20px}.gb-example .gb-row{align-items:flex-start;flex-direction:column;gap:12px}.gb-example h3{font-size:21px}.gb-provider{gap:10px}.gb-example>.gb-provider{flex-wrap:wrap}.gb-phone-row{justify-content:flex-start}.gb-phone-scroll{padding-left:4px;padding-right:4px}.gb-phone-scroll:has(.gb-phone:only-child) .gb-phone-row{justify-content:center}}