.loading-overlay{position:fixed;inset:0;background:var(--color-bg);display:flex;align-items:center;justify-content:center;z-index:1000;transition:opacity .3s ease-out}.loading-overlay.hidden{opacity:0;pointer-events:none}.loading-content{text-align:center}.loading-spinner{width:48px;height:48px;border:4px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto var(--space-lg)}@keyframes spin{to{transform:rotate(360deg)}}.error-state{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center}.error-state h1{margin-bottom:var(--space-md)}.error-state p{color:var(--color-text-muted);margin-bottom:var(--space-xl)}.preview-hero{padding:var(--space-3xl) 0 var(--space-xl);text-align:center;background:linear-gradient(180deg,var(--color-bg-alt) 0%,var(--color-bg) 100%)}.scan-badge{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:#dcfce7;color:var(--color-success-dark);border-radius:50px;font-size:.875rem;font-weight:500;margin-bottom:var(--space-xl)}.preview-hero h1{font-size:clamp(1.75rem,4vw,2.75rem);margin-bottom:var(--space-md)}.domain-highlight{color:var(--color-primary);background:linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.preview-hero__subtitle{font-size:1.125rem;color:var(--color-text-muted);max-width:500px;margin:0 auto var(--space-xl)}.hero-stat{text-align:center;margin-bottom:var(--space-xl)}.hero-stat__value{font-size:clamp(3rem,10vw,4.5rem);font-weight:800;line-height:1;color:var(--color-success);margin-bottom:var(--space-xs)}.hero-stat__label{font-size:1.25rem;font-weight:600;color:var(--color-text);text-transform:lowercase}.hero-stat__note{font-size:.875rem;color:var(--color-text-muted);margin:var(--space-sm) 0 0}.race-section{padding:var(--space-2xl) 0 var(--space-4xl);background:var(--color-bg)}.race-subtitle{margin-bottom:var(--space-2xl)}.race-container{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-lg);max-width:900px;margin:0 auto;align-items:start}.race-track{display:flex;flex-direction:column;gap:var(--space-md)}.race-label{display:flex;align-items:center;justify-content:space-between}.race-label__badge{padding:var(--space-xs) var(--space-sm);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius)}.race-label__badge--before{background:#fee2e2;color:var(--color-danger)}.race-label__badge--after{background:#dcfce7;color:var(--color-success-dark)}.race-label__size{font-family:var(--font-mono);font-size:.875rem;color:var(--color-text-muted)}.race-image-container{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-bg-alt);border:2px solid var(--color-border)}.race-track--before .race-image-container{border-color:var(--color-danger)}.race-track--after .race-image-container{border-color:var(--color-success)}.race-image{position:absolute;inset:0;background-size:cover;background-position:center}#race-image-before,#race-image-after{clip-path:inset(0 0 100% 0);z-index:2}.race-scanline{position:absolute;top:0;left:0;right:0;height:0%;background:linear-gradient(to bottom,transparent 0%,transparent 85%,rgba(239,68,68,.6) 95%,rgba(239,68,68,.8) 100%);pointer-events:none;z-index:3}.race-scanline--fast{background:linear-gradient(to bottom,transparent 0%,transparent 85%,rgba(34,197,94,.6) 95%,rgba(34,197,94,.8) 100%)}.race-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--color-bg-alt);color:var(--color-text-muted);transition:opacity .3s;z-index:1}.race-placeholder.hidden{opacity:0;pointer-events:none}.race-complete-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:64px;height:64px;border-radius:50%;background:var(--color-success);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s;z-index:10;box-shadow:0 4px 20px #22c55e66}.race-complete-badge.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.race-timer{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-bg-alt);border-radius:var(--radius);font-size:.875rem}.race-timer__icon{display:flex;color:var(--color-text-muted)}.race-timer__icon--success{color:var(--color-success)}.race-timer__value{font-family:var(--font-mono);font-weight:700;min-width:3.5rem}.race-track--before .race-timer__value{color:var(--color-danger)}.race-track--after .race-timer__value{color:var(--color-success)}.race-timer__status{color:var(--color-text-muted);font-size:.8125rem}.race-timer__status.complete{color:var(--color-success);font-weight:600}.race-timer__status.loading{color:var(--color-danger)}.race-divider{display:flex;align-items:center;justify-content:center;padding-top:60px}.race-divider__text{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--color-text);color:#fff;font-weight:800;font-size:.75rem}.race-controls{display:flex;justify-content:center;margin-top:var(--space-xl)}.race-replay-btn{opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}.race-replay-btn.visible{opacity:1;transform:translateY(0)}.race-footnote{margin-top:var(--space-lg);font-size:.8125rem}.comparison-subtitle{margin-bottom:var(--space-2xl)}.comparisons{display:flex;flex-direction:column;gap:var(--space-2xl);max-width:800px;margin:0 auto}.comparison-card{background:#fff;border-radius:var(--radius-lg);padding:var(--space-lg);border:1px solid var(--color-border)}.comparison-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--color-border)}.comparison-filename{font-family:var(--font-mono);font-size:.875rem;font-weight:500;word-break:break-all}.comparison-dimensions{font-size:.75rem;color:var(--color-text-muted)}.comparison-slider{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;cursor:ew-resize;user-select:none}.comparison-image{position:absolute;inset:0;background-size:cover;background-position:center}.comparison-image--before{clip-path:inset(0 50% 0 0)}.comparison-image--after{clip-path:inset(0 0 0 50%)}.file-size-overlay{position:absolute;bottom:var(--space-md);padding:var(--space-xs) var(--space-sm);font-size:.875rem;font-weight:700;font-family:var(--font-mono);border-radius:var(--radius);backdrop-filter:blur(4px)}.file-size-overlay--before{left:var(--space-md);background:#ef4444e6;color:#fff}.file-size-overlay--after{right:var(--space-md);background:#22c55ee6;color:#fff}.comparison-label{position:absolute;top:var(--space-md);padding:var(--space-xs) var(--space-sm);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius)}.comparison-label--before{left:var(--space-md);background:#ef4444e6;color:#fff}.comparison-label--after{right:var(--space-md);background:#22c55ee6;color:#fff}.comparison-handle{position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}.comparison-handle__line{flex:1;width:3px;background:#fff;box-shadow:0 0 8px #0000004d}.comparison-handle__grip{width:40px;height:40px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0003;color:var(--color-text-muted);pointer-events:auto}.comparison-stats{display:flex;align-items:center;justify-content:center;gap:var(--space-lg);margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid var(--color-border);flex-wrap:wrap}.comparison-stat{text-align:center}.comparison-stat__label{display:block;font-size:.75rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-xs)}.comparison-stat__value{font-size:1.25rem;font-weight:700}.comparison-arrow{color:var(--color-text-muted)}.comparison-savings{margin-left:var(--space-md)}.remaining-note{margin-top:var(--space-2xl);font-size:.875rem}.cta-section{padding:var(--space-4xl) 0;background:var(--color-bg-alt)}.cta-card{max-width:540px;margin:0 auto;text-align:center;background:#fff;border-radius:var(--radius-lg);padding:var(--space-2xl) var(--space-xl);border:2px solid var(--color-border);box-shadow:0 4px 24px #0000000f}.cta-card h2{margin-bottom:var(--space-lg);font-size:1.5rem;line-height:1.3}.cta-card h2 span{color:var(--color-primary)}.cta-desc{color:var(--color-text-muted);font-size:.9375rem;margin-bottom:var(--space-lg)}.cta-pricing{display:flex;align-items:baseline;justify-content:center;gap:2px;margin-bottom:var(--space-xs)}.cta-price{font-size:3rem;font-weight:800;line-height:1;color:var(--color-text)}.cta-period{font-size:1rem;color:var(--color-text-muted)}.cta-trial-note{font-size:.875rem;color:var(--color-text-muted);margin-bottom:var(--space-xl)}.cta-buttons{margin-bottom:var(--space-xl)}.cta-buttons .btn{width:100%}.cta-features{list-style:none;padding:0;margin:0;text-align:left}.cta-features li{display:flex;align-items:center;gap:var(--space-sm);font-size:.875rem;color:var(--color-text-muted);padding:var(--space-xs) 0}.cta-features svg{flex-shrink:0;color:var(--color-success)}@media(max-width:768px){.race-section{padding:var(--space-md) 0 var(--space-2xl)}.race-section h2{font-size:1.125rem;margin-bottom:var(--space-xs)}.race-subtitle{font-size:.8125rem;margin-bottom:var(--space-md)}.race-container{display:flex;flex-direction:row;gap:var(--space-sm);max-width:100%}.race-track{flex:1;min-width:0;gap:var(--space-sm)}.race-divider{display:none}.race-label{flex-direction:column;align-items:flex-start;gap:2px}.race-label__badge{font-size:.6rem;padding:2px 6px}.race-label__size{font-size:.7rem}.race-image-container{border-radius:var(--radius)}.race-timer{padding:4px 6px;font-size:.7rem;gap:4px}.race-timer__icon,.race-timer__status{display:none}.race-timer__value{min-width:auto}.race-complete-badge{width:36px;height:36px}.race-complete-badge svg{width:18px;height:18px}.race-controls{margin-top:var(--space-lg)}.race-replay-btn{font-size:.8rem;padding:var(--space-sm) var(--space-md)}.race-replay-btn svg{width:14px;height:14px}.race-footnote{margin-top:var(--space-md);font-size:.75rem}}@media(max-width:600px){.stats-grid{grid-template-columns:1fr}.comparison-stats{flex-direction:column;gap:var(--space-md)}.comparison-arrow{transform:rotate(90deg)}.comparison-savings{margin-left:0}.cta-card{padding:var(--space-xl) var(--space-lg)}}