.xpro-welcome { box-sizing: border-box; width: min(640px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 32px; border: 1px solid #d8d4cb; border-radius: 22px; background: #f7f4ed; color: #202725; font: 16px/1.6 system-ui, sans-serif; box-shadow: 0 24px 100px #0005; overflow-y: auto; }
.xpro-welcome::backdrop { background: #101a22a6; backdrop-filter: blur(5px); }
.xpro-welcome *, .xpro-welcome *::before { box-sizing: border-box; }
.xpro-welcome h2 { margin: 8px 32px 8px 0; font-size: clamp(23px, 4vw, 30px); line-height: 1.3; letter-spacing: -.03em; color: #202725; }
.xpro-welcome p { margin: 0; }
.xpro-welcome .welcome-eyebrow { font-size: 12px; letter-spacing: .16em; font-weight: 700; color: #39665c; }
.welcome-subtitle { color: #56615a; }
.xpro-welcome button, .welcome-nav-button { font: inherit; cursor: pointer; min-height: 44px; border-radius: 10px; padding: 9px 14px; }
.welcome-close { position: absolute; top: 12px; right: 12px; width: 44px; border: 0; background: transparent; color: #202725; font-size: 26px !important; }
.welcome-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 18px; }
.welcome-options a { padding: 18px; border: 1px solid #b8c6be; border-radius: 14px; text-decoration: none; color: #202725; background: #fffdf7; transition: background .15s; }
.welcome-options a:hover { background: #e6eee5; }
.welcome-options a > span { font-size: 12px; color: #53615b; }
.welcome-options strong { display: block; font-size: 24px; margin: 3px 0 10px; }
.welcome-options b { display: inline-block; font-size: 11px; vertical-align: middle; background: #e6eee5; color: #345d50; border-radius: 4px; padding: 2px 5px; }
.welcome-options p { font-size: 14px; color: #53615b; }
.welcome-audio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid #d8d4cb; padding-top: 18px; }
.welcome-audio > div { width: 100%; }
.welcome-audio p { font-size: 13px; color: #53615b; margin: 3px 0 7px; }
.welcome-audio button { background: #fffdf7; color: #254c3f; border: 1px solid #8caa9d; }
.welcome-audio button:disabled { opacity: .5; cursor: default; }
.welcome-transcript { margin-top: 12px; font-size: 13px; color: #53615b; }
.welcome-transcript summary { cursor: pointer; min-height: 44px; display: list-item; padding-top: 10px; }
.welcome-continue { width: 100%; margin-top: 18px; border: 0; background: #224c3e; color: white; font-weight: 600 !important; }
.welcome-nav-button { background: transparent; color: inherit; border: 1px solid currentColor; font-size: 12px; }
.xpro-welcome :focus-visible, .welcome-nav-button:focus-visible { outline: 3px solid #b2582a; outline-offset: 3px; }
@media(max-width:520px) { .xpro-welcome { padding: 24px 18px; } .welcome-options { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; } .welcome-options a { padding: 12px 14px; } .welcome-options strong { font-size: 21px; margin-bottom: 4px; } .welcome-options p br { display: none; } }
@media(prefers-reduced-motion: reduce) { .welcome-options a { transition: none; } }

.welcome-mobile-button { display: none; }
@media(max-width:1040px) { .welcome-mobile-button { display: block; min-height: 44px; padding: 8px 12px; border: 1px solid #548c84; border-radius: 22px; background: #102324; color: #c4f5e7; font: 600 12px/1.4 system-ui,sans-serif; cursor: pointer; } }