.doc-page { max-width: 1440px; margin: 0 auto; padding: var(--space-2xl) var(--space-lg); }
.doc-heading { max-width: 800px; margin-bottom: var(--space-xl); }
.doc-heading h1 { font: 600 clamp(2rem, 4vw, 3.4rem)/1.1 var(--font-family-heading); margin: var(--space-sm) 0; }
.doc-heading p { color: var(--color-text-secondary); }
.doc-eyebrow { color: var(--color-accent-primary) !important; font-size: .75rem; text-transform: uppercase; letter-spacing: .15em; }
.doc-stage { --doc-upscale: 1.5; position: relative; width: fit-content; max-width: 100%; overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-surface); background: var(--color-bg-elevated); line-height: 0; }
.doc-stage > img, .doc-stage > video { display: block; width: 100%; max-width: 100%; height: auto; }
/* Fill the column so UI text stays legible; small captures may grow up to the upscale limit. */
.doc-stage.is-fitted { width: min(100%, calc(var(--doc-natural-width) * var(--doc-upscale) * 1px)); }
.doc-page [hidden], .doc-modal-content [hidden] { display: none !important; }
.doc-modal-content .doc-stage { margin: 0 auto; }
.doc-regions { position: absolute; inset: 0; pointer-events: none; }
.doc-region { position: absolute; box-sizing: border-box; pointer-events: auto; padding: 0; min-height: 0; min-width: 0; border: 1px solid color-mix(in srgb, var(--color-accent-primary) 62%, transparent); border-radius: 5px; background: color-mix(in srgb, var(--color-accent-primary) 4%, transparent); color: var(--color-accent-contrast); cursor: pointer; transition: background .18s, border-color .18s, box-shadow .18s; }
.doc-region-number { position: absolute; left: 2px; top: 2px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; color: var(--color-accent-primary); background: var(--color-bg-surface); border: 1px solid color-mix(in srgb, var(--color-accent-primary) 65%, transparent); font: 600 12px/1 var(--font-family-base); border-radius: 6px; box-shadow: 0 2px 5px color-mix(in srgb, var(--color-bg-page) 45%, transparent); }
.doc-region:hover, .doc-region:focus-visible, .doc-region.is-selected { border-color: var(--color-accent-primary); background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 20%, transparent), inset 0 0 12px color-mix(in srgb, var(--color-accent-primary) 8%, transparent); }
.doc-region:hover .doc-region-number, .doc-region.is-selected .doc-region-number { color: var(--color-accent-contrast); background: var(--color-accent-primary); }
/* Visitor highlights keep the image clear; corner accents and numbered markers frame the control. */
.doc-region-interactive { border-color: color-mix(in srgb, var(--color-accent-primary) 22%, transparent); border-radius: 7px; background: transparent; }
.doc-region-interactive::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: .65; --doc-corner-x: linear-gradient(to right, var(--color-accent-primary) 9px, transparent 9px, transparent calc(100% - 9px), var(--color-accent-primary) 0); --doc-corner-y: linear-gradient(to bottom, var(--color-accent-primary) 9px, transparent 9px, transparent calc(100% - 9px), var(--color-accent-primary) 0); background: var(--doc-corner-x) top / 100% 2px no-repeat, var(--doc-corner-x) bottom / 100% 2px no-repeat, var(--doc-corner-y) left / 2px 100% no-repeat, var(--doc-corner-y) right / 2px 100% no-repeat; transition: opacity .2s; }
.doc-region-interactive .doc-region-number { left: 3px; top: 3px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 50%; border-color: color-mix(in srgb, var(--color-accent-primary) 75%, var(--color-bg-surface)); background: linear-gradient(145deg, var(--color-bg-soft), var(--color-bg-page)); font-size: 12px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-bg-page) 65%, transparent), 0 3px 10px color-mix(in srgb, var(--color-bg-page) 45%, transparent); transition: color .2s, background .2s, box-shadow .2s; }
.doc-region-interactive:is(:hover, :focus-visible, .is-selected, .is-emphasized) { z-index: 1; outline: none; border-color: color-mix(in srgb, var(--color-accent-primary) 60%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent-primary) 10%, transparent), color-mix(in srgb, var(--color-accent-primary) 2%, transparent)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent-primary) 14%, transparent), 0 0 22px color-mix(in srgb, var(--color-accent-primary) 15%, transparent), inset 0 0 18px color-mix(in srgb, var(--color-accent-primary) 7%, transparent); }
.doc-region-interactive:is(:hover, :focus-visible, .is-selected, .is-emphasized)::before { opacity: 1; }
.doc-region-interactive:is(:hover, :focus-visible, .is-selected, .is-emphasized) .doc-region-number { color: var(--color-accent-contrast); border-color: var(--color-accent-primary); background: linear-gradient(145deg, color-mix(in srgb, var(--color-accent-primary) 75%, var(--color-text-primary)), var(--color-accent-primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-bg-page) 70%, transparent), 0 0 0 5px color-mix(in srgb, var(--color-accent-primary) 25%, transparent), 0 3px 14px color-mix(in srgb, var(--color-bg-page) 55%, transparent); }
.doc-page :focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 3px; }
.doc-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-sm); margin: var(--space-md) 0; }
.doc-actions button { min-height: 44px; text-align: left; }
.doc-detail, .doc-empty { padding: var(--space-lg); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); }
.doc-detail { white-space: pre-wrap; line-height: 1.7; border-left: 2px solid var(--color-accent-primary); background: color-mix(in srgb, var(--color-accent-primary) 4%, var(--color-bg-surface)); font-size: 1rem; }
.doc-detail strong { display: block; color: var(--color-text-primary); font-weight: 600; font-size: 1.08rem; }
.doc-detail p { margin: .4rem 0 0; color: var(--color-text-secondary); }
.doc-action { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem .85rem; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-surface); color: var(--color-text-secondary); font: 400 .92rem/1.5 var(--font-family-base); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.doc-action-number { display: grid; place-items: center; flex-shrink: 0; min-width: 24px; height: 24px; padding: 0 5px; border: 1px solid var(--color-border-strong); border-radius: 50%; color: var(--color-text-muted); font-size: .75rem; font-weight: 600; }
.doc-action:hover, .doc-action:focus-visible, .doc-action[aria-pressed="true"] { border-color: color-mix(in srgb, var(--color-accent-primary) 35%, var(--color-border-default)); background: color-mix(in srgb, var(--color-accent-primary) 6%, var(--color-bg-surface)); color: var(--color-text-primary); }
.doc-action:is(:hover, :focus-visible, [aria-pressed="true"]) .doc-action-number { color: var(--color-accent-contrast); background: var(--color-accent-primary); border-color: var(--color-accent-primary); }
.doc-stage.doc-phone { max-width: min(330px, 100%); border: 7px solid var(--color-bg-page); border-top-width: 16px; border-bottom-width: 18px; border-radius: 30px; box-shadow: 0 0 0 1px var(--color-border-strong), 0 0 0 3px var(--color-bg-page), var(--shadow-surface); }
.doc-phone > img, .doc-phone > video { border-radius: 16px; }
.doc-modal-media { width: 100%; max-height: 70vh; object-fit: contain; }
.doc-modal-text { white-space: pre-wrap; font-size: 1.02rem; line-height: 1.7; }
/* Demonstrations need room: the shared dialog widens only while it shows a capture. */
.modal-dialog.doc-modal-wide { width: min(1480px, calc(100% - 2rem)); margin: 3vh auto; }
.doc-modal-content .doc-stage { --doc-upscale: 2; }
.doc-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
.doc-media-item { padding: var(--space-sm); background: var(--color-bg-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); cursor: pointer; text-align: left; font: inherit; }
.doc-media-item img { width: 100%; height: 140px; object-fit: contain; display: block; margin-bottom: var(--space-sm); }
.doc-media-item:hover { border-color: var(--color-accent-primary); }
.doc-media-item { font-size: .9rem; line-height: 1.6; }
.doc-action:focus-visible, .doc-media-item:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .doc-region, .doc-region::before, .doc-region-number, .doc-action { transition: none; } }