/* Shared by the guest page, desktop designer and downloadable phone preview. */
.mobile-upload-screen-surface {
    --mobile-upload-paper: #fffdf8;
    --mobile-upload-ink: #202b25;
    --mobile-upload-line: #dce2d8;
    --mobile-upload-page-gutter: 20px;
    position: relative;
    width: 100%;
    min-height: 100%;
    background: var(--mobile-upload-paper);
    color: var(--mobile-upload-ink);
    container-type: inline-size;
    font-family: var(--mobile-upload-body-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

.mobile-upload-screen-surface *,
.mobile-upload-screen-surface *::before,
.mobile-upload-screen-surface *::after { box-sizing: border-box; }

.mobile-upload-screen-content {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    color: var(--mobile-upload-ink, #202b25);
    background: var(--mobile-upload-paper, #fffdf8);
}

.mobile-upload-header { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--mobile-upload-page-gutter, 20px); }
.mobile-upload-brand { font-size: 16px; font-weight: 750; letter-spacing: -.6px; }
.mobile-upload-kicker { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-align: right; overflow-wrap: anywhere; }
.mobile-upload-logo { display: block; width: calc(var(--mobile-upload-header-size, 100) * 1%); max-width: 100%; max-height: calc(110px * var(--mobile-upload-header-size, 100) / 100); object-fit: contain; }
.has-mobile-upload-header .mobile-upload-header { flex-wrap: wrap; justify-content: center; padding-left: 0; padding-right: 0; }
.has-mobile-upload-header .mobile-upload-logo { margin: 0 auto; }
.has-mobile-upload-header .mobile-upload-kicker { width: 100%; text-align: center; padding: 0 20px; }

.mobile-upload-cover { position: relative; display: flex; align-items: flex-end; width: 100%; min-height: clamp(220px, calc(var(--mobile-upload-preview-height, 100svh) - 340px), 340px); overflow: hidden; background: var(--mobile-upload-paper, #fffdf8); }
.is-cover-compact .mobile-upload-cover { min-height: clamp(200px, calc(var(--mobile-upload-preview-height, 100svh) - 400px), 270px); }
.has-mobile-upload-background .mobile-upload-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 15%, rgba(16, 30, 23, .2) 45%, rgba(16, 30, 23, .88)); pointer-events: none; }
.mobile-upload-cover-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center var(--mobile-upload-cover-position, 50%); }
.mobile-upload-cover-copy { position: relative; z-index: 1; width: 100%; padding: 32px 24px 25px; color: var(--mobile-upload-ink, #202b25); }
.has-mobile-upload-background .mobile-upload-cover-copy { color: #fffdf8; }
.mobile-upload-event-name { margin: 0 0 11px; color: inherit; font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: 2px; text-transform: uppercase; overflow-wrap: anywhere; }
.mobile-upload-title { margin: 0; font: 400 36px/1.08 var(--mobile-upload-title-font, Georgia, 'Times New Roman', serif); letter-spacing: -.8px; color: inherit; overflow-wrap: anywhere; }
.mobile-upload-card { width: 100%; padding: 21px var(--mobile-upload-page-gutter, 20px) 10px; background: var(--mobile-upload-paper, #fffdf8); color: var(--mobile-upload-ink, #202b25); border: 0; border-radius: 0; box-shadow: none; text-align: center; }
.mobile-upload-copy { margin: 0 auto 17px; max-width: 38ch; font-size: 15px; line-height: 1.45; color: inherit; overflow-wrap: anywhere; white-space: pre-line; }
.mobile-upload-btn,
.mobile-upload-gallery-link { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.35; cursor: pointer; touch-action: manipulation; }
.mobile-upload-btn.is-camera { background: var(--mobile-upload-camera-background, #365344); color: var(--mobile-upload-camera-text, #ffffff); }
.mobile-upload-btn.is-gallery { margin-top: 12px; background: var(--mobile-upload-gallery-background, #365344); color: var(--mobile-upload-gallery-text, #ffffff); }
.mobile-upload-btn.is-voice { margin-top: 10px; border-color: #b5c1b5; background: transparent; color: var(--mobile-upload-ink, #202b25); }
.mobile-upload-gallery-link { min-height: 48px; margin-top: 10px; border-color: #dce2d8; background: var(--mobile-upload-event-gallery-background, #fffdf8); color: var(--mobile-upload-event-gallery-text, #202b25); font-size: 14px; font-weight: 500; }
.mobile-upload-btn:active,
.mobile-upload-gallery-link:active { transform: translateY(1px); }
.mobile-upload-btn:disabled,
.mobile-upload-gallery-link:disabled { opacity: .55; cursor: not-allowed; }
.mobile-upload-btn:focus-visible,
.mobile-upload-gallery-link:focus-visible,
.mobile-upload-link:focus-visible { outline: 3px solid #8da792; outline-offset: 3px; }
.mobile-upload-footer { position: static; width: 100%; margin: 0; padding: 16px 20px 20px; text-align: center; color: #627066; font-size: 10px; font-weight: 500; line-height: 1.3; letter-spacing: 2px; text-transform: uppercase; }
.mobile-upload-footer.is-custom-footer { font-size: 11px; line-height: 1.5; letter-spacing: .02em; text-transform: none; overflow-wrap: anywhere; white-space: pre-line; }
.mobile-upload-event-control { margin: 0; padding: 0 20px 6px; display: flex; justify-content: center; }
.mobile-upload-top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mobile-upload-chip { color: #627066; font-size: 11px; letter-spacing: 1px; }
.mobile-upload-link { min-height: 36px; padding: 8px; border: 0; background: transparent; color: #627066; cursor: pointer; font: inherit; font-size: 11px; }
.mobile-upload-eyebrow { color: #627066; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.gallery-picker-hint { margin: 10px 0 0; color: #627066; font-size: 12px; line-height: 1.5; text-align: left; }
.gallery-picker-hint strong { color: #365344; }

/* Container queries keep a small preview accurate inside a wide desktop window. */
@container (max-width: 350px) {
    .mobile-upload-header { padding-top: 10px; padding-bottom: 10px; }
    .mobile-upload-cover { min-height: 220px; }
    .is-cover-compact .mobile-upload-cover { min-height: 200px; }
    .mobile-upload-cover-copy { padding: 28px 20px 22px; }
    .mobile-upload-title { font-size: 32px; }
    .mobile-upload-card { padding: 17px 16px 6px; }
}