/* Static guide illustrations. Keep controls inert and captions explicit. */
.gd-chrome .gd-panel-stage,
.gd-chrome .gd-pin-stage,
.gd-chrome .gd-store-stage {
  min-height:0; padding:32px; gap:24px; flex-direction:column;
}
.sp-preview {
  width:100%; max-width:580px; overflow:hidden; text-align:left;
  border:1px solid #dde3eb; border-radius:12px; background:#fff;
  box-shadow:0 2px 6px rgba(30,47,64,.04);
  color:var(--navy); font:400 14px/1.5 'General Sans',sans-serif;
}
.sp-preview *, .sp-preview *::before, .sp-preview *::after { box-sizing:border-box; }
.sp-bar { display:flex; align-items:center; gap:9px; padding:14px 24px; border-bottom:1px solid #edf0f4; color:var(--navy-soft); font-size:13px; font-weight:500; }
.sp-bar img { width:22px; height:22px; }
.sp-body { padding:24px; }
.sp-preview h3 { margin:0 0 8px; font:500 20px/1.3 'General Sans',sans-serif; letter-spacing:-.02em; color:var(--navy); text-wrap:pretty; }
.sp-preview p { margin:0 0 20px; font-size:14px; line-height:1.55; color:var(--navy-soft); text-wrap:pretty; }
.sp-preview p:last-child { margin-bottom:0; }
.sp-preview strong { font-weight:500; }
.sp-field { display:block; margin:0 0 16px; min-width:0; }
.sp-field-label { display:block; margin-bottom:6px; color:var(--navy); font-size:13px; font-weight:500; }
.sp-input { display:flex; align-items:center; min-height:40px; padding:9px 12px; border:1px solid #d9dfe7; border-radius:7px; background:#fff; overflow-wrap:anywhere; font-size:14px; }
.sp-textarea { min-height:96px; align-items:flex-start; }
.sp-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:20px; }
.sp-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:9px 16px; border:1px solid transparent; border-radius:7px; background:#3f68b8; color:white; font-size:14px; font-weight:500; line-height:20px; }
.sp-button-secondary { background:white; border-color:#d9dfe7; color:var(--navy); }
.sp-button-quiet { background:transparent; color:var(--navy-soft); padding-inline:10px; }
.sp-button-wide { width:100%; }
.sp-preview .sp-footnote { margin:16px 0 0; font-size:12px; line-height:1.5; }
.sp-link { color:#3f68b8; }
.sp-row { display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid #edf0f4; }
.sp-row:first-child { padding-top:0; }
.sp-row:last-child { padding-bottom:0; border-bottom:0; }
.sp-row-copy { flex:1; min-width:0; }
.sp-row-copy strong { display:block; font-size:14px; }
.sp-row-copy small { display:block; margin-top:4px; font-size:13px; line-height:1.5; color:var(--navy-soft); }
.sp-switch { position:relative; flex:none; width:32px; height:20px; border-radius:20px; background:#d8dfe8; }
.sp-switch::after { content:''; position:absolute; top:3px; left:3px; width:14px; height:14px; background:#fff; border-radius:50%; box-shadow:0 1px 2px #21374b26; }
.sp-switch-on { background:#3f68b8; }
.sp-switch-on::after { left:15px; }
.sp-status { flex:none; display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:5px; background:#edf5ee; color:#366b46; font-size:12px; font-weight:500; white-space:nowrap; }
.sp-status svg { width:14px; height:14px; }
.sp-status-neutral { background:#f1f4f8; color:var(--navy-soft); }
.sp-provider { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:start; column-gap:12px; row-gap:12px; padding:20px 24px; }
.sp-provider + .sp-provider { border-top:1px solid #edf0f4; }
.sp-provider > img { display:block; width:28px; height:28px; }
.sp-provider-copy strong { font-size:16px; }
.sp-provider-copy p { font-size:14px; margin:4px 0 0; }
.sp-provider > .sp-button, .sp-provider > .sp-status { align-self:center; }
.sp-provider-text { grid-column:2; }
.sp-inline-fields { display:grid; grid-template-columns:minmax(0,1fr) 100px; gap:12px; }
.sp-stepper { display:inline-grid; grid-template-columns:40px 48px 40px; border:1px solid #d9dfe7; border-radius:7px; overflow:hidden; text-align:center; }
.sp-stepper span { padding:9px 0; }
.sp-stepper span:nth-child(2) { border-inline:1px solid #edf0f4; }
.sp-person { padding:16px 0; border-bottom:1px solid #edf0f4; }
.sp-person:first-child { padding-top:0; }
.sp-person:last-child { padding-bottom:0; border-bottom:0; }
.sp-person-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.sp-person-details { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--navy-soft); }
.sp-person-details span { display:inline-flex; align-items:center; gap:5px; }
.sp-person-details svg { width:13px; height:13px; }
.sp-panel, .sp-signin, .sp-pin { max-width:380px; }
.sp-pin .sp-body { position:relative; padding-right:56px; }
.sp-pin h3 { font-size:18px; }
.sp-pin-arrow { position:absolute; right:20px; top:24px; width:24px; height:24px; color:var(--navy); }
.sp-pin .sp-actions { margin-right:-32px; }
.sp-pin p { margin-bottom:0; }
.gd-chrome .gd-store-example-top { padding:14px 24px; font-size:13px; }
.gd-chrome .gd-store-example-row { padding:24px; }
.gd-chrome .gd-store-brand { font-size:20px; font-weight:500; }
.gd-preview-dialog .gd-panel-stage,
.gd-preview-dialog .gd-pin-stage,
.gd-preview-dialog .gd-store-stage { min-height:0; padding:32px; }
.gd-preview-dialog .sp-preview { max-width:660px; }
.gd-preview-dialog .sp-panel, .gd-preview-dialog .sp-signin, .gd-preview-dialog .sp-pin { max-width:420px; }
.gd-chrome .gd-expand, .gd-preview-close { min-height:36px; transition:transform 140ms cubic-bezier(.23,1,.32,1),background-color 140ms cubic-bezier(.23,1,.32,1); }
.gd-chrome .gd-expand:active, .gd-preview-close:active { transform:scale(.97); }
@media(max-width:600px) {
  .gd-chrome .gd-panel-stage, .gd-chrome .gd-pin-stage, .gd-chrome .gd-store-stage { min-height:0; padding:24px 16px; gap:20px; }
  .gd-preview-dialog .gd-panel-stage, .gd-preview-dialog .gd-pin-stage, .gd-preview-dialog .gd-store-stage { min-height:0; padding:20px 12px; }
  .sp-bar { padding:14px 18px; }
  .sp-body { padding:20px 18px; }
  .sp-preview h3 { font-size:18px; }
  .sp-provider { grid-template-columns:28px minmax(0,1fr); padding:20px 18px; }
  .sp-provider > .sp-button, .sp-provider > .sp-status { grid-column:2; justify-self:start; }
  .sp-person-heading { align-items:flex-start; }
  .sp-inline-fields { grid-template-columns:1fr; gap:0; }
  .sp-pin .sp-body { padding-right:48px; }
  .sp-pin-arrow { right:16px; top:20px; width:20px; height:20px; }
  .sp-pin .sp-actions { margin-right:-30px; }
  .gd-chrome .gd-store-example-row { padding:20px 16px; }
  .gd-chrome .gd-store-brand { font-size:18px; }
}
@media(prefers-reduced-motion:reduce) {
  .gd-chrome .gd-expand, .gd-preview-close { transition:none; }
  .gd-chrome .gd-expand:active, .gd-preview-close:active { transform:none; }
}