/* The live guide demo (assets/guide-demo.js): a quiet phone frame, tokens only. */
.gd { max-width: 760px; margin: 0 auto; }
.gd-open:focus-visible { outline: 2px solid var(--sage-dk); outline-offset: 2px; }
.gd-phone { width: min(100%, 360px); margin: 0 auto; padding: 10px; border: 1px solid var(--glass-light-edge); border-radius: 40px; background: var(--glass-light-tint); }
.gd-screen { position: relative; width: 100%; aspect-ratio: 390 / 760; border-radius: 30px; overflow: hidden; background: var(--travertine); }
.gd-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.gd-poster[hidden], .gd-open[hidden] { display: none; }
.gd-open { position: absolute; left: 50%; bottom: var(--s3); transform: translateX(-50%); white-space: nowrap; box-shadow: 0 10px 26px var(--ink-15); }
.gd-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--travertine); }
.gd-note { margin: var(--s3) auto 0; max-width: 52ch; text-align: center; font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--ink-70); text-wrap: balance; }
@media print { .gd-phone, .gd-note { display: none; } }