/* Contained product previews, hairline frames, generous rhythm. Keeps the white canvas, brand fonts and uniform step sequence. */
body.gd-chrome-page { background:#fff; --cream:#fff; --cream-deep:#f0f4fb; }
.gd-chrome { max-width:1120px; --chrome-blue:#1e3d9a; --preview-ground:#edf2fa; }
.gd-chrome .gd-hero { padding:36px 0 32px; margin-bottom:40px; }
.gd-chrome .gd-breadcrumb { margin-bottom:24px; }
.gd-chrome .gd-title-row { display:block; }
.gd-chrome h1 { font-size:46px; line-height:1.14; max-width:none; text-wrap:initial; }
.gd-chrome .gd-meta { display:block; padding:0; margin-top:16px; font-size:13px; }
.gd-chrome .gd-meta span { color:var(--navy-soft); font-weight:400; }
.gd-chrome .gd-lede { font-size:17px; margin-top:14px; max-width:none; color:var(--navy); }
.gd-chrome .gd-layout { grid-template-columns:200px minmax(0,1fr); gap:56px; }
.gd-chrome .gd-rail { top:100px; }
.gd-chrome .gd-rail nav { gap:0; }
.gd-chrome .gd-rail nav p { margin:0 0 18px; font-weight:500; }
.gd-chrome .gd-rail nav a { align-items:center; min-height:46px; margin:0; padding:10px 12px; border-left:1px solid var(--gd-rule); border-radius:0; font-size:13px; gap:10px; }
.gd-chrome .gd-rail nav a span { flex:0 0 18px; font-size:12px; }
.gd-chrome .gd-rail nav a[aria-current="location"] { color:var(--chrome-blue); background:#f0f5ff; box-shadow:inset 2px 0 var(--chrome-blue); border-left-color:var(--chrome-blue); }
.gd-chrome .gd-all { margin:24px 0 0; padding-top:20px; }
.gd-chrome .gd-sequence { display:block; }
.gd-chrome .gd-step { display:block; position:relative; padding:0 0 48px; border:0; border-radius:0; background:none; scroll-margin-top:100px; }
.gd-chrome .gd-step + .gd-step { padding-top:40px; border-top:1px solid var(--gd-rule); }
.gd-chrome .gd-instruction, .gd-chrome .gd-wide .gd-instruction { display:block; position:relative; padding-left:48px; margin:0; max-width:none; }
.gd-chrome .gd-number { position:absolute; top:0; left:0; display:grid; place-items:center; width:32px; height:32px; margin:0; background:var(--chrome-blue); color:white; border-radius:9px; font-size:13px; font-weight:500; }
.gd-chrome .gd-instruction h2 { font-family:'General Sans',sans-serif; font-weight:500; font-size:26px; line-height:1.25; letter-spacing:-.025em; margin:0 0 14px; text-wrap:pretty; }
.gd-chrome .gd-instruction p { max-width:620px; font-size:16px; line-height:1.65; color:var(--navy); }
.gd-chrome .gd-instruction .k { font-weight:500; }
.gd-chrome .gd-media { width:calc(100% - 48px); max-width:none; margin:24px 0 0 48px; padding:0; border:1px solid #dfe5ef; border-radius:14px; background:white; overflow:hidden; }
.gd-chrome .gd-preview-label { display:flex; align-items:center; gap:9px; height:44px; padding:0 20px; border-bottom:1px solid #dfe5ef; font-size:12px; color:var(--navy-soft); }
.gd-chrome .gd-preview-label svg { width:16px; height:16px; flex-shrink:0; }
.gd-chrome .gd-store-stage, .gd-chrome .gd-pin-stage, .gd-chrome .gd-panel-stage { display:flex; align-items:center; justify-content:center; min-height:360px; padding:28px; background:var(--preview-ground); }
.gd-chrome .gd-store-example { width:100%; max-width:580px; background:white; border:1px solid var(--gd-rule); border-radius:10px; overflow:hidden; }
.gd-chrome .gd-store-example-top { padding:13px 20px; border-bottom:1px solid var(--gd-rule); color:var(--navy-soft); font-size:12px; }
.gd-chrome .gd-store-example-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:28px 22px; }
.gd-chrome .gd-store-brand { display:flex; align-items:center; gap:12px; font-size:23px; font-weight:600; color:var(--navy); }
.gd-chrome .gd-store-brand img { width:32px; height:32px; }
.gd-chrome .gd-store-action { flex-shrink:0; padding:11px 18px; border-radius:24px; background:#0b57d0; color:#fff; font-size:13px; line-height:1.3; font-weight:500; }
.gd-chrome .gd-pin-window { width:100%; max-width:440px; aspect-ratio:620 / 304; border:1px solid var(--gd-rule); border-radius:10px; }
.gd-chrome .gd-pin-window img { width:245.1613%; height:auto; left:-126.129%; top:-3.9474%; }
.gd-chrome .gd-panel-window { width:100%; max-width:286px; aspect-ratio:720 / 700; border:1px solid var(--gd-rule); border-radius:10px; overflow:hidden; }
.gd-chrome .gd-panel-window img { display:block; width:100%; height:auto; }
.gd-chrome #step-4 .gd-panel-window, .gd-chrome .gd-panel-window[data-preferences] { aspect-ratio:720 / 760; }
.gd-chrome .gd-media figcaption { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; margin:0; border-top:1px solid #dfe5ef; background:white; text-align:left; font-size:12px; line-height:1.5; }
.gd-chrome .gd-expand { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; background:none; border:0; padding:5px 0; color:var(--chrome-blue); font:inherit; cursor:pointer; }
.gd-chrome .gd-expand svg { width:14px; height:14px; }
.gd-chrome .gd-expand:focus-visible, .gd-preview-close:focus-visible { outline:2px solid #1e3d9a; outline-offset:4px; }
.gd-chrome .gd-note { display:block; margin:0 0 32px 48px; padding:0 0 0 18px; border:0; border-left:2px solid var(--navy); background:none; border-radius:0; }
.gd-chrome .gd-note h2 { font-family:'General Sans',sans-serif; font-size:15px; font-weight:500; margin-bottom:8px; letter-spacing:0; }
.gd-chrome .gd-note p { font-size:14px; color:var(--navy); }
.gd-chrome .gd-related { margin:0 0 0 48px; padding:24px 0 0; gap:24px; }
.gd-chrome .gd-related h2 { font-family:'General Sans',sans-serif; font-size:19px; font-weight:500; }
.gd-chrome .gd-related a { border:0; border-radius:0; padding:0; gap:8px; background:none; font-size:13px; text-decoration:underline; text-underline-offset:4px; }
.gd-chrome .gd-related .gd-review-link { color:var(--navy-soft); font-size:12px; }
.gd-preview-dialog { width:min(840px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); margin:auto; padding:0; border:1px solid #dfe5ef; border-radius:16px; color:var(--navy); background:#fff; }
.gd-preview-dialog::backdrop { background:rgba(19,31,49,.48); }
.gd-preview-dialog-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px; border-bottom:1px solid #dfe5ef; }
.gd-preview-dialog-bar h2 { margin:0; font:500 16px 'General Sans',sans-serif; letter-spacing:0; }
.gd-preview-close { display:grid; place-items:center; width:36px; height:36px; border:1px solid #dfe5ef; border-radius:50%; background:white; font-size:24px; line-height:1; color:var(--navy); cursor:pointer; }
.gd-preview-dialog .gd-preview-content { padding:0; margin:0; max-width:none; }
.gd-preview-dialog .gd-panel-window { max-width:400px; }
.gd-preview-dialog .gd-pin-window { max-width:620px; }
.gd-preview-dialog .gd-panel-stage, .gd-preview-dialog .gd-pin-stage, .gd-preview-dialog .gd-store-stage { min-height:400px; padding:32px; }
@media(hover:hover) and (pointer:fine) {
 .gd-chrome .gd-rail nav a:hover { background:#f0f4fb; }
 .gd-chrome .gd-expand:hover { text-decoration:underline; text-underline-offset:4px; }
 .gd-chrome .gd-related a:hover { color:var(--chrome-blue); }
 .gd-preview-close:hover { background:#edf2fa; }
}
@media(max-width:1050px) and (min-width:901px) { .gd-chrome .gd-layout { grid-template-columns:180px minmax(0,1fr); gap:32px; } }
@media(max-width:900px) {
 .gd-chrome .gd-layout { display:block; }
 .gd-chrome .gd-rail { margin-bottom:32px; }
 .gd-chrome .gd-rail nav { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .gd-chrome .gd-rail nav p { margin-bottom:12px; }
}
@media(max-width:600px) {
 .gd-chrome { padding:0 20px 48px; }
 .gd-chrome .gd-hero { padding:24px 0; margin-bottom:24px; }
 .gd-chrome h1 { font-size:36px; }
 .gd-chrome .gd-lede { font-size:16px; }
 .gd-chrome .gd-rail nav { grid-template-columns:1fr 1fr; }
 .gd-chrome .gd-rail nav a { padding:10px; }
 .gd-chrome .gd-instruction, .gd-chrome .gd-wide .gd-instruction { padding-left:42px; }
 .gd-chrome .gd-number { width:29px; height:29px; border-radius:8px; }
 .gd-chrome .gd-instruction h2 { font-size:23px; }
 .gd-chrome .gd-step { padding-bottom:32px; }
 .gd-chrome .gd-step + .gd-step { padding-top:32px; }
 .gd-chrome .gd-media { width:100%; margin-left:0; border-radius:12px; }
 .gd-chrome .gd-store-stage, .gd-chrome .gd-pin-stage, .gd-chrome .gd-panel-stage { min-height:330px; padding:22px 16px; }
 .gd-chrome .gd-panel-window { max-width:260px; }
 .gd-chrome .gd-preview-label { padding:0 14px; }
 .gd-chrome .gd-store-example-top { padding:10px 12px; }
 .gd-chrome .gd-store-example-row { padding:24px 12px; gap:10px; }
 .gd-chrome .gd-store-brand { gap:8px; font-size:18px; }
 .gd-chrome .gd-store-brand img { width:24px; height:24px; }
 .gd-chrome .gd-store-action { padding:10px 12px; font-size:11px; }
 .gd-chrome .gd-media figcaption { padding:10px 14px; font-size:11px; gap:8px; }
 .gd-chrome .gd-note, .gd-chrome .gd-related { margin-left:0; }
 .gd-preview-dialog-bar { padding:12px 16px; }
 .gd-preview-dialog .gd-panel-stage, .gd-preview-dialog .gd-pin-stage, .gd-preview-dialog .gd-store-stage { padding:20px 12px; min-height:330px; }
}
@media print { .gd-chrome .gd-expand { display:none; } .gd-chrome .gd-layout { display:block; } }

/* Documentation additions keep the Chrome guide geometry. */
.gd-chrome .gd-instruction p + p { margin-top:12px; }
.gd-chrome .gd-note, .doc-before { margin:0 0 32px 48px; padding:22px 24px; border:1px solid #dfe5ef; border-radius:12px; background:#f7f9fd; }
.gd-chrome .gd-note h2, .doc-before h2, .doc-troubleshooting h2 { font:500 18px/1.4 'General Sans',sans-serif; letter-spacing:-.015em; margin:0 0 10px; }
.doc-before p, .gd-chrome .gd-note p, .doc-troubleshooting li { font-size:15px; line-height:1.65; color:var(--navy); }
.doc-before p + p { margin-top:10px; }
.doc-troubleshooting { margin:0 0 40px 48px; }
.doc-troubleshooting ul { padding-left:20px; }
.doc-troubleshooting li { margin:10px 0; padding-left:4px; }
.doc-verdict { display:inline-flex; align-items:center; padding:4px 9px; border-radius:6px; font-size:12px; font-weight:500; background:#edf2fa; color:#344d76; white-space:nowrap; }
.sp-body > .doc-verdict { margin-bottom:16px; }
.doc-low { color:#366b46; background:#edf5ee; }
.doc-medium { color:#80591c; background:#faf1de; }
.doc-high { color:#a6442d; background:#fbece7; }
.doc-flow-number, .doc-value { flex:none; font-variant-numeric:tabular-nums; color:var(--navy-soft); font-size:13px; }
.doc-report { border:1px solid #e3e7ed; padding:20px; border-radius:5px; box-shadow:0 3px 8px #21374b08; }
.doc-report h3 { margin-top:14px; }
.doc-ios { max-width:440px; }
.doc-ios .sp-bar { background:#f6f7f9; }
.doc-ios .sp-row > svg { width:20px; height:20px; color:#3f68b8; }
.doc-toolbar { display:flex; align-items:center; gap:16px; }
.doc-toolbar > .sp-input { flex:1; color:var(--navy-soft); background:#f7f9fd; }
.doc-toolbar-mark { display:flex; align-items:center; gap:6px; font-size:12px; }
.doc-toolbar-mark img { width:22px; height:22px; }
.doc-code { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font:400 13px/1.65 'General Sans',sans-serif; tab-size:2; }
.doc-code-title { margin:20px 0 8px; font-size:13px; font-weight:500; }
.doc-code-title:first-child { margin-top:0; }
.doc-source { margin:14px 0 0; color:var(--navy-soft); font-size:12px; line-height:1.6; }
.doc-source a { text-decoration:underline; text-underline-offset:3px; }
.gd-chrome .gd-rail { max-height:calc(100dvh - 120px); overflow-y:auto; }
@media(max-width:900px) { .gd-chrome .gd-rail { max-height:none; overflow:visible; } }
@media(max-width:600px) {
 .gd-chrome .gd-note, .doc-before { margin-left:0; padding:20px; }
 .doc-troubleshooting { margin-left:0; }
 .doc-toolbar { gap:8px; }
 .doc-toolbar-mark { flex-direction:column; }
 .sp-row { gap:10px; }
}

.doc-step-fixes { padding-left:20px; margin:0; }
.doc-step-fixes li { font-size:16px; line-height:1.65; margin:8px 0; }
.sp-inline-fields:has(> .sp-field:only-child) { grid-template-columns:1fr; }
.doc-code code { font:inherit; color:inherit; white-space:inherit; }

/* Documentation never waits for scroll to reveal its content. */
body[data-page="documentation"] .rv,
body[data-page="documentation"] main .reveal,
body[data-page="documentation"] main img {
 opacity:1 !important; visibility:visible !important;
 animation:none !important; transition:none !important;
}
body[data-page="documentation"] .rv,
body[data-page="documentation"] main .reveal { transform:none !important; }

/* Phones: everything below applies under 760px only, except the two paragraph and list-intro fixes directly under this comment. */
.gd-chrome .gd-note p + p { margin-top:12px; }
.doc-troubleshooting > p { margin:0 0 12px; font-size:15px; line-height:1.65; color:var(--navy); }
@media(max-width:760px) {
 /* Hero: no one-word last lines. */
 .gd-chrome h1 { text-wrap:balance; }
 .gd-chrome .gd-lede { text-wrap:pretty; }
 .gd-chrome .gd-breadcrumb { display:block; line-height:1.6; }
 .gd-chrome .gd-breadcrumb > * + * { margin-left:8px; }

 /* In this guide: one column, full-height rule, tappable rows. */
 .gd-chrome .gd-rail nav { grid-template-columns:1fr; gap:0; }
 .gd-chrome .gd-rail nav a { min-height:44px; padding:10px 12px; font-size:15px; line-height:1.4; }
 .gd-chrome .gd-rail nav a span { flex-basis:22px; font-size:13px; }

 /* Other guides: full-width rows. */
 .gd-chrome .gd-related { display:block; padding-top:24px; }
 .gd-chrome .gd-related h2 { margin-bottom:8px; }
 .gd-chrome .gd-related a { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; padding:12px 0; border-bottom:1px solid var(--gd-rule); font-size:15px; line-height:1.4; text-decoration:none; color:var(--navy); }
 .gd-chrome .gd-related a::after { content:'↗'; flex:none; color:#1e3d9a; }
 .gd-chrome .gd-media figcaption { font-size:13px; }

 /* Code: keep its shape, scroll sideways, use the full column. */
 .gd-chrome .doc-code, .gd-chrome .doc-code-sheet .doc-code,
 .gd-chrome .r2-code-group pre, .gd-chrome .r2-responses pre, .gd-chrome .r2-short-sample { white-space:pre; overflow-wrap:normal; overflow-x:auto; }
 .gd-chrome .doc-shot-stage:has(> .doc-code-sheet) { padding:12px; }
 .gd-chrome .doc-code-sheet { padding:16px; }
 .gd-chrome .gd-instruction > .r2-code-group, .gd-chrome .gd-instruction > .r2-responses { margin-left:-48px; }
 .gd-chrome .r2-tablist { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
 .gd-chrome .r2-tablist::-webkit-scrollbar { display:none; }
 .gd-chrome .r2-tablist button { flex:none; white-space:nowrap; }

 /* A three-column table becomes one block per row: verdict, ID, then reason. */
 .gd-chrome .r2-table { min-width:0; }
 .gd-chrome .r2-table, .gd-chrome .r2-table tbody { display:block; }
 .gd-chrome .r2-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .gd-chrome .r2-table tr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; padding:14px 2px; border-bottom:1px solid var(--gd-rule); }
 .gd-chrome .r2-table td { padding:0; border:0; }
 .gd-chrome .r2-table td:nth-child(1) { grid-area:1 / 1; font-weight:500; }
 .gd-chrome .r2-table td:nth-child(2) { grid-area:2 / 1 / 3 / 3; }
 .gd-chrome .r2-table td:nth-child(3) { grid-area:1 / 2; color:#536779; font-variant-numeric:tabular-nums; }

 /* Carousels: the next card peeks in, so it reads as scrollable. */
 .gd-sequence .gb-phone-scroll:has(> .gb-phone-row > :nth-child(2)),
 .gd-sequence .review-channel-scroll { container-type:inline-size; scroll-snap-type:x mandatory; scroll-padding-inline:4px; }
 .gd-sequence .gb-phone-row:has(> :nth-child(2)) { gap:12px; justify-content:flex-start; }
 .gd-sequence .gb-phone-row:has(> :nth-child(2)) > * { width:min(300px, calc(100cqw - 28px)); flex:0 0 min(300px, calc(100cqw - 28px)); scroll-snap-align:start; }
 .gd-sequence .gb-phone-row:has(> :nth-child(2)) .gb-phone img { width:100%; }
 .gd-sequence .review-channel-row { gap:12px; }
 .gd-sequence .review-channel { width:min(290px, calc(100cqw - 32px)); flex:none; scroll-snap-align:start; }

 /* Extension panel captures: stop where the content stops. */
 .gd-sequence img[src$="/ext-real-alert-levels.png"] { --crop:760 / 1124; }
 .gd-sequence img[src$="/ext-real-permissions-privacy.png"] { --crop:760 / 564; }
 .gd-sequence img[src$="/ext-real-captured-data.png"] { --crop:760 / 600; }
 .gd-sequence img[src$="/ext-real-auto-checks.png"] { --crop:760 / 952; }
 .gd-sequence img:is([src$="/panel-idle.png"],[src$="/panel-safe.png"],[src$="/panel-trusted.png"],[src$="/panel-offline.png"]) { --crop:760 / 1090; }
 .gd-sequence img[src$="/panel-checking.png"] { --crop:760 / 1178; }
 /* The site list runs on: end on a row line and fade the last row. */
 .gd-sequence img[src$="/ext-real-monitored-sources.png"] { --crop:760 / 1021; -webkit-mask-image:linear-gradient(#000 calc(100% - 56px), transparent); mask-image:linear-gradient(#000 calc(100% - 56px), transparent); }
 .gd-sequence .doc-shot-stage > .doc-panel-shot:not(.doc-crop) > img,
 .gd-sequence .doc-channel > img[src$="/ext-real-monitored-sources.png"] { aspect-ratio:var(--crop, auto); height:auto; object-fit:cover; object-position:top; }

 /* Desktop captures: a close-up of the part the step talks about.
    --x is the left edge and --t/--b the top and bottom, in percent of the
    capture; --z is the zoom; --ar is height over width. View larger still
    opens the whole capture. */
 .gd-sequence .doc-page-shot img:is([src$="/org-alerts-full.png"],[src$="/org-review-full.png"],[src$="/org-settings-full.png"],[src$="/org-home-full.png"],[src$="/org-people-full.png"],[src$="/org-usage-full.png"],[src$="/me-plan.png"],[src$="/webapp-focus-settings.png"],[src$="/gmail-invoice.jpg"],[src$="/gmail-inbox.jpg"],[src$="/email-alert.png"]) {
  --ar:.625; --x:0; --t:0; --b:100; --z:1;
  width:calc(var(--z) * 100%); max-width:none; height:auto;
  margin:calc(var(--t) * var(--z) * var(--ar) * -1%) 0 calc((100 - var(--b)) * var(--z) * var(--ar) * -1%) calc(var(--x) * var(--z) * -1%);
 }
 .gd-sequence .doc-page-shot img[src$="/org-alerts-full.png"] { --x:19; --z:2.8; --b:47; }
 .gd-sequence .doc-page-shot img[src$="/org-review-full.png"] { --x:19; --z:2.6; --b:31; }
 .gd-sequence .doc-page-shot img[src$="/org-settings-full.png"] { --x:19; --z:2.4; --b:53; }
 .gd-sequence .doc-page-shot img[src$="/org-home-full.png"] { --x:19; --z:2.6; --b:50; }
 .gd-sequence .doc-page-shot img[src$="/org-people-full.png"] { --x:19.5; --z:2.2; --b:74; }
 .gd-sequence .doc-page-shot img[src$="/org-usage-full.png"] { --ar:.6847; --x:19; --z:2.3; --b:40; }
 .gd-sequence .doc-page-shot img[src$="/me-plan.png"] { --x:19; --z:2; --b:57; }
 .gd-sequence .doc-page-shot img[src$="/webapp-focus-settings.png"] { --ar:.4737; --x:21; --z:1.3; --b:68; }
 .gd-sequence .doc-page-shot img[src$="/gmail-invoice.jpg"] { --ar:.7077; --x:26; --z:1.4; --t:16; --b:88; }
 .gd-sequence .doc-page-shot img[src$="/gmail-inbox.jpg"] { --ar:.7077; --x:26; --z:1.35; --t:14; --b:80; }
 .gd-sequence .doc-page-shot img[src$="/email-alert.png"] { --ar:1.3926; --x:5.5; --z:1.12; --t:6; --b:92; }
}
@media(max-width:600px) {
 .gd-chrome .gd-instruction > .r2-code-group, .gd-chrome .gd-instruction > .r2-responses { margin-left:-42px; }
}