/* documentation captures */
.doc-shot-stage { display:flex; flex-direction:column; align-items:center; gap:24px; padding:28px; background:var(--preview-ground,#edf2fa); }
.doc-panel-shot { width:380px; max-width:100%; flex:none; border:1px solid var(--gd-rule); border-radius:10px; overflow:hidden; background:#fff; }
.doc-panel-shot img, .doc-page-shot img, .doc-email-shot img { display:block; width:100%; height:auto; }
.doc-page-shot { width:100%; border:1px solid var(--gd-rule); border-radius:7px; overflow:hidden; background:#fff; }
.doc-email-shot { width:640px; max-width:100%; }
.doc-three-panels { display:flex; width:100%; align-items:flex-start; gap:12px; }
.doc-three-panels .doc-panel-shot { width:calc((100% - 24px)/3); min-width:0; }
.doc-crop { position:relative; }
.doc-crop img { position:absolute; left:0; max-width:none; }
.crop-ask { aspect-ratio:380 / 178; }
.crop-ask img { top:-84.27%; }
.crop-welcome { aspect-ratio:380 / 350; }
.crop-welcome img { top:-121.43%; }
.doc-browser-bar { padding:8px 14px; border-bottom:1px solid var(--gd-rule); background:#f8f9fb; color:var(--navy-soft); font-size:11px; text-align:center; }
.doc-pending-stage { min-height:160px; justify-content:center; background:#f7f9fd; }
.doc-pending-stage p { font:400 14px/1.5 'General Sans',sans-serif; color:var(--navy-soft); }
.doc-release-note { font:400 13px/1.5 'General Sans',sans-serif; margin-top:14px; color:var(--navy-soft); }
.doc-mock-stage { min-height:280px; }
.doc-mock { width:100%; max-width:480px; padding:24px; background:var(--card,#fffdf8); border:1px solid var(--gd-rule); border-radius:12px; }
.doc-mock h3 { font:500 21px/1.35 'General Sans',sans-serif; margin:0 0 18px; color:var(--navy); }
.doc-mock p { font-size:14px; margin:0 0 20px; }
.mock-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0; font:400 15px/1.4 'General Sans',sans-serif; }
.mock-row + .mock-row { border-top:1px solid var(--gd-rule); }
.mock-row small { display:block; font-size:13px; line-height:1.5; color:var(--navy-soft); margin-top:6px; }
.mock-row strong { font-weight:500; }
.mock-action { display:inline-flex; align-items:center; justify-content:center; padding:11px 16px; border-radius:8px; background:var(--brand-blue,#1e3d9a); color:#fff; font-size:14px; white-space:nowrap; }
.mock-action.secondary { background:transparent; color:var(--navy); border:1px solid var(--gd-rule); }
.mock-actions { display:flex; gap:12px; justify-content:center; }
.mock-brand { display:flex; align-items:center; gap:12px; }
.mock-brand img { width:30px; height:30px; }
.mock-gmail { display:block; width:40px; height:40px; margin-bottom:20px; }
.mock-pin { width:24px; height:24px; color:#1e3d9a; }
.mock-check { color:#1e3d9a; font-size:22px; }
.mock-toggle { display:block; width:42px; height:25px; padding:3px; border-radius:20px; background:#cbd0d5; }
.mock-toggle i { display:block; width:19px; height:19px; border-radius:50%; background:white; box-shadow:0 1px 2px #21374b20; }
.doc-code-sheet { width:100%; padding:24px; background:#fffdf8; border:1px solid var(--gd-rule); border-radius:10px; }
.doc-code-sheet h3 { font:500 14px/1.4 'General Sans',sans-serif; margin:0 0 14px; }
.doc-code-sheet pre + h3 { margin-top:28px; }
.doc-code-sheet .doc-code { font-size:14px; overflow-wrap:anywhere; white-space:pre-wrap; }
.gd-preview-dialog { width:min(1504px,calc(100vw - 32px)); }
.gd-preview-dialog[data-size="compact"] { width:min(700px,calc(100vw - 32px)); }
.gd-preview-dialog[data-size="code"] { width:min(1100px,calc(100vw - 32px)); }
.gd-preview-dialog .doc-shot-stage { padding:24px; }
.gd-preview-dialog .doc-three-panels { max-width:1164px; justify-content:center; }
.gd-preview-dialog .doc-three-panels .doc-panel-shot { width:380px; max-width:calc((100% - 24px)/3); }
.gd-preview-dialog .doc-page-shot { max-width:1440px; }
.gd-preview-dialog .doc-code-sheet { max-width:1000px; }
.gd-expand, .gd-preview-close { transition:transform 150ms cubic-bezier(.23,1,.32,1); }
.gd-expand:active, .gd-preview-close:active { transform:scale(.97); }
.doc-hub-group { margin-bottom:28px; }
.doc-hub-group .gd-group-intro { padding-bottom:28px; }
.doc-hub-links { min-width:0; }
.doc-hub-link { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 28px; font-size:17px; line-height:1.45; }
.doc-hub-link + .doc-hub-link { border-top:1px solid var(--gd-rule); }
.doc-hub-group .doc-product-row { display:block; padding:24px 28px; }
.doc-hub-group .doc-row-links { margin-top:6px; flex-wrap:wrap; gap:6px 20px; }
.doc-hub-group .doc-product-row h3 { font-size:18px; }
.gd-hero .gd-breadcrumb { flex-wrap:wrap; }
.gd-hero h1 { max-width:920px; }
@media(hover:hover) and (pointer:fine) { .doc-hub-link:hover { background:#f7f9fd; } }
@media(max-width:600px) {
 .doc-shot-stage { padding:14px; gap:14px; }
 .doc-three-panels { gap:6px; }
 .doc-three-panels .doc-panel-shot { width:calc((100% - 12px)/3); border-radius:4px; }
 .doc-panel-shot { border-radius:8px; }
 .doc-mock { padding:20px; }
 .mock-row { gap:12px; flex-wrap:wrap; }
 .doc-code-sheet { padding:18px; }
 .doc-code-sheet .doc-code { font-size:13px; }
 .doc-hub-link, .doc-hub-group .doc-product-row { padding:20px; }
 .doc-hub-group .gd-group-intro { min-height:0; padding:22px 20px; }
 .doc-hub-group .gd-group-intro h2 { margin:0; }
 .gd-preview-dialog .doc-shot-stage { padding:12px; }
 .crop-ask img { top:-84.27%; }
 .crop-welcome img { top:-121.43%; }
}
@media(prefers-reduced-motion:reduce) { .gd-expand, .gd-preview-close { transition:none; } }