:root{--color-primary: #142262;--color-mauve: #b04c80;--color-mauve-dark: #8a3a66;--color-cta: #b04c80;--color-background: #FFFFFF;--color-surface: #F8FAFC;--color-surface-hover: #F0F4F8;--color-text: #1E293B;--color-text-secondary: #64748B;--color-border: #E2E8F0;--color-error: #EF4444;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-size-sm: 14px;--font-size-base: 16px;--font-size-lg: 18px;--font-size-xl: 24px;--font-size-2xl: 32px;--max-width: 500px;--border-radius: 16px;--border-radius-sm: 12px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:var(--font-size-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);background-color:var(--color-background);color:var(--color-text);line-height:1.6;min-height:100vh}#app{max-width:var(--max-width);margin:0 auto;padding:var(--spacing-lg);min-height:100vh;display:flex;flex-direction:column}#page-content{flex:1;display:flex;flex-direction:column}.hidden{display:none!important}#loading{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:300px;gap:var(--spacing-md);flex:1}.spinner{width:48px;height:48px;border:4px solid var(--color-surface);border-top-color:var(--color-mauve);border-radius:50%;animation:spin 1s linear infinite}.loading-text{color:var(--color-text-secondary);font-size:var(--font-size-sm)}@keyframes spin{to{transform:rotate(360deg)}}.demo-mode{text-align:center;padding:var(--spacing-xl);background:var(--color-surface);border-radius:var(--border-radius);box-shadow:0 4px 20px rgba(0,0,0,.06)}.demo-title{font-size:var(--font-size-lg);font-weight:600;color:var(--color-mauve);margin-bottom:var(--spacing-xs)}.demo-subtitle{color:var(--color-text-secondary);margin-bottom:var(--spacing-lg)}.demo-instructions{color:var(--color-text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--spacing-md)}.demo-buttons{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap}.demo-buttons .cta-button{width:auto;padding:var(--spacing-sm) var(--spacing-lg)}.view-container{display:flex;flex-direction:column;gap:var(--spacing-lg);flex:1;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.view-header{text-align:center;padding:var(--spacing-xl) var(--spacing-lg);background:var(--color-surface);border-radius:var(--border-radius);box-shadow:0 4px 20px rgba(0,0,0,.06)}.app-logo{max-width:100%;height:auto;max-height:70px;margin-bottom:var(--spacing-md);background:transparent}.app-logo-large{max-height:200px;margin-bottom:var(--spacing-lg)}.headline{font-size:var(--font-size-xl);font-weight:700;color:var(--color-text);margin-bottom:var(--spacing-sm);line-height:1.2}.subtext{font-size:var(--font-size-base);color:var(--color-text-secondary);max-width:400px;margin:0 auto;line-height:1.5}.view-content{display:flex;flex-direction:column;gap:var(--spacing-md);flex:1;justify-content:flex-start}.view-content section{flex:1;display:flex;flex-direction:column}.view-content section .iframe-container{flex:1}.cta-button{display:block;width:100%;padding:var(--spacing-lg) var(--spacing-xl);background:linear-gradient(135deg,var(--color-mauve) 0%,var(--color-mauve-dark) 100%);color:#fff;font-size:var(--font-size-xl);font-weight:700;border:none;border-radius:var(--border-radius-sm);cursor:pointer;text-align:center;transition:all .2s ease;box-shadow:0 6px 20px rgba(176,76,128,.35)}.cta-button:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(176,76,128,.45)}.cta-button:active{transform:translateY(0)}.cta-button.secondary{background:var(--color-surface);border:2px solid var(--color-mauve);color:var(--color-mauve);box-shadow:none;padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-lg)}.cta-button.secondary:hover{background:var(--color-mauve);color:#fff}.back-button{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-base);font-weight:500;border:1px solid var(--color-border);border-radius:var(--border-radius-sm);cursor:pointer;transition:all .2s ease}.back-button:hover{background:var(--color-surface-hover);border-color:var(--color-mauve);color:var(--color-mauve)}.open-browser-button{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-background);color:var(--color-mauve);font-size:var(--font-size-sm);font-weight:500;border:1px solid var(--color-mauve);border-radius:var(--border-radius-sm);cursor:pointer;transition:all .2s ease}.open-browser-button:hover{background:var(--color-mauve);color:#fff}.form-view{display:flex;flex-direction:column;flex:1;height:100%;overflow:hidden;animation:fadeIn .3s ease-out}.form-view-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) 0;flex-shrink:0}.form-view-content{flex:1;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}.iframe-container{background:transparent;overflow:hidden;margin:var(--spacing-sm) 0 var(--spacing-md) 0;display:flex;flex-direction:column}.iframe-container iframe{display:block;width:100%;border:none;background:transparent;vertical-align:bottom;line-height:0}.iframe-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);text-align:center;min-height:150px;gap:var(--spacing-md);background:var(--color-surface);border-radius:var(--border-radius)}.iframe-fallback-large{min-height:300px}.iframe-fallback-icon{font-size:48px;opacity:.6}.iframe-fallback-text{color:var(--color-text-secondary);font-size:var(--font-size-base)}.fallback-button{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);background:linear-gradient(135deg,var(--color-mauve) 0%,var(--color-mauve-dark) 100%);color:#fff;font-size:var(--font-size-base);font-weight:600;border:none;border-radius:var(--border-radius-sm);cursor:pointer;transition:all .2s ease;box-shadow:0 4px 14px rgba(176,76,128,.3)}.fallback-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(176,76,128,.4)}.section-label{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-sm)}.error-message{background:rgba(239,68,68,.1);border:1px solid var(--color-error);border-radius:var(--border-radius-sm);padding:var(--spacing-md);color:var(--color-error);text-align:center;font-size:var(--font-size-sm)}.welcome-container{justify-content:center}.form-view-footer{padding:var(--spacing-md) 0;flex-shrink:0}.email-capture-box{position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--color-surface);border-top:2px solid var(--color-mauve);padding:var(--spacing-md);text-align:center;box-shadow:0 -4px 20px rgba(0,0,0,.1)}.email-capture-box.hidden{display:none}.email-capture-title{font-size:var(--font-size-base);font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-sm)}.email-input-group{display:flex;gap:var(--spacing-xs)}.email-input{flex:1;min-width:0;padding:10px 12px;border:2px solid var(--color-border);border-radius:var(--border-radius-sm);font-size:var(--font-size-sm);color:var(--color-text);background:#fff;transition:border-color .2s ease}.email-input:focus{outline:none;border-color:var(--color-mauve)}.email-input.error{border-color:var(--color-error)}.email-input::placeholder{color:var(--color-text-secondary)}.email-submit-btn{flex-shrink:0;padding:10px 20px;font-size:var(--font-size-sm);font-weight:600;background:linear-gradient(135deg,var(--color-mauve) 0%,var(--color-mauve-dark) 100%);color:#fff;border:none;border-radius:var(--border-radius-sm);cursor:pointer;transition:all .2s ease}.email-submit-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(176,76,128,.3)}.email-error{margin-top:var(--spacing-xs);font-size:var(--font-size-sm);color:var(--color-error)}.email-error.hidden{display:none}.completion-view{display:flex;flex-direction:column;gap:var(--spacing-lg);flex:1;animation:fadeIn .3s ease-out}.completion-header{text-align:center;padding:var(--spacing-lg);background:var(--color-surface);border-radius:var(--border-radius)}.completion-title{font-size:var(--font-size-xl);font-weight:700;color:var(--color-mauve);margin-bottom:var(--spacing-sm)}.completion-subtitle{font-size:var(--font-size-base);color:var(--color-text-secondary)}.completion-content{display:flex;flex-direction:column;gap:var(--spacing-lg);flex:1}.background-preview{background:var(--color-surface);border-radius:var(--border-radius);padding:var(--spacing-md);text-align:center}.background-image{max-width:100%;height:auto;border-radius:var(--border-radius-sm);box-shadow:0 4px 12px rgba(0,0,0,.1)}.completion-status{background:var(--color-surface);border-radius:var(--border-radius);padding:var(--spacing-lg)}.browser-instructions,.zoom-status{text-align:center}.instruction-text{font-size:var(--font-size-base);color:var(--color-text);margin-bottom:var(--spacing-md)}.manual-instructions{text-align:left;margin-top:var(--spacing-lg);padding-left:var(--spacing-lg);color:var(--color-text-secondary);font-size:var(--font-size-sm);line-height:1.8}.manual-instructions li{margin-bottom:var(--spacing-xs)}.status-loading{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.status-loading p{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.status-success,.status-error{text-align:center}.status-message{font-size:var(--font-size-base);font-weight:500;margin-bottom:var(--spacing-md)}.status-message.success{color:#10b981}.status-message.error{color:var(--color-text-secondary)}.completion-footer{padding:var(--spacing-md) 0;flex-shrink:0}@media(min-width:480px){.headline{font-size:var(--font-size-2xl)}.email-capture-box{left:0;right:0;max-width:600px;margin-left:auto;margin-right:auto;border-radius:12px 12px 0 0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}