.visual-comparison-header{background:linear-gradient(135deg,#9b59b6 0,#713b87 100%);color:#fff;padding:3em 0;position:relative}.visual-comparison-header::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><defs><pattern id="visual" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="2" fill="rgba(255,255,255,0.1)"/><rect x="10" y="10" width="40" height="40" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="120" height="120" fill="url(%23visual)"/></svg>');opacity:.3}.visual-comparison-header .container{position:relative;z-index:2}.visual-comparison-header .header-breadcrumbs{margin-bottom:1.5em}.visual-comparison-header .header-breadcrumbs .breadcrumbs ul{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}.visual-comparison-header .header-breadcrumbs .breadcrumbs ul li{color:#fff}.visual-comparison-header .header-breadcrumbs .breadcrumbs ul li a{color:#fff;opacity:.8}.visual-comparison-header .header-breadcrumbs .breadcrumbs ul li a:hover{opacity:1}.visual-comparison-header .header-content{display:flex;justify-content:space-between;align-items:center;gap:2em}@media (max-width:52em){.visual-comparison-header .header-content{flex-direction:column;text-align:center}}.visual-comparison-header .comparison-info{flex:1}.visual-comparison-header .comparison-info .page-title{font-size:2.5rem;font-weight:700;margin-bottom:1em;color:#fff}@media (max-width:30em){.visual-comparison-header .comparison-info .page-title{font-size:2rem}}.visual-comparison-header .comparison-info .comparison-sites{margin-bottom:1em}.visual-comparison-header .comparison-info .comparison-sites .site-name{font-family:"Roboto Mono","SF Mono",Monaco,monospace;font-size:1.1rem;font-weight:600;background:rgba(255,255,255,.2);padding:.5em 1em;border-radius:8px;border:1px solid rgba(255,255,255,.3)}.visual-comparison-header .comparison-info .comparison-meta{display:flex;gap:2em;font-family:"Roboto Mono","SF Mono",Monaco,monospace;font-size:.9rem;opacity:.9}@media (max-width:30em){.visual-comparison-header .comparison-info .comparison-meta{flex-direction:column;gap:.5em}}.visual-comparison-header .comparison-info .comparison-meta span{background:rgba(255,255,255,.1);padding:.5em 1em;border-radius:6px;border:1px solid rgba(255,255,255,.2)}.visual-comparison-header .overall-score-display{display:flex;flex-direction:column;align-items:center;gap:1em}.visual-comparison-header .overall-score-display .score-circle{width:120px;height:120px;border-radius:50%;border:8px solid rgba(255,255,255,.2);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.visual-comparison-header .overall-score-display .score-circle .score-percentage{font-family:"Roboto Mono","SF Mono",Monaco,monospace;font-size:2rem;font-weight:700;color:#fff;line-height:1}.visual-comparison-header .overall-score-display .score-circle .score-label{font-size:.7rem;opacity:.9;text-transform:uppercase;letter-spacing:.5px;text-align:center}.visual-comparison-header .overall-score-display .score-grade{text-align:center}.visual-comparison-header .overall-score-display .score-grade .grade-letter{font-size:3rem;font-weight:700;display:block;line-height:1}.visual-comparison-header .overall-score-display .score-grade .grade-description{font-size:1rem;opacity:.9;text-transform:uppercase}.metrics-overview{background:#fff}.metrics-overview .metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2em}@media (max-width:52em){.metrics-overview .metrics-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:30em){.metrics-overview .metrics-grid{grid-template-columns:1fr}}.metrics-overview .metric-card{background:#ecf0f1;border-radius:12px;padding:2em;text-align:center;border-left:5px solid;transition:transform .3s ease,box-shadow .3s ease}.metrics-overview .metric-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.1)}.metrics-overview .metric-card.layout{border-left-color:#3498db}.metrics-overview .metric-card.colors{border-left-color:#e74c3c}.metrics-overview .metric-card.typography{border-left-color:#2ecc71}.metrics-overview .metric-card.responsive{border-left-color:#f39c12}.metrics-overview .metric-card.design-system{border-left-color:#9b59b6}.metrics-overview .metric-card.hierarchy{border-left-color:#1abc9c}.metrics-overview .metric-card.spacing{border-left-color:#ff69b4}.metrics-overview .metric-card .metric-icon{font-size:3rem;margin-bottom:1em}.metrics-overview .metric-card .metric-content .metric-score{font-family:"Roboto Mono","SF Mono",Monaco,monospace;font-size:2.5rem;font-weight:700;color:#2c3e50;line-height:1;margin-bottom:.5em}.metrics-overview .metric-card .metric-content .metric-label{font-size:1.1rem;font-weight:600;color:#2d3436;margin-bottom:1em}.metrics-overview .metric-card .metric-content .metric-bar{width:100%;height:8px;background:#ecf0f1;border-radius:4px;overflow:hidden;border:1px solid #ddd}.metrics-overview .metric-card .metric-content .metric-bar .metric-fill{height:100%;border-radius:4px;transition:width 1s ease-out}.metrics-overview .metric-card .metric-content .metric-bar .metric-fill.layout{background:#3498db}.metrics-overview .metric-card .metric-content .metric-bar .metric-fill.colors{background:#e74c3c}.metrics-overview .metric-card .metric-content .metric-bar .metric-fill.typography{background:#2ecc71}.metrics-overview .metric-card .metric-content .metric-bar .metric-fill.responsive{background:#f39c12}.metrics-overview .metric-card .metric-content .metric-bar .metric-fill.design-system{background:#9b59b6}.metrics-overview .metric-card .metric-content .metric-bar .metric-fill.hierarchy{background:#1abc9c}.metrics-overview .metric-card .metric-content .metric-bar .metric-fill.spacing{background:#ff69b4}.insights-section{background:#ecf0f1;padding:4em 0}.insights-section .insights-container{display:grid;gap:1.5em;max-width:800px;margin:0 auto}.insights-section .insight-item{background:#fff;border-radius:12px;padding:2em;box-shadow:0 4px 20px rgba(0,0,0,.1);border-left:5px solid #3498db;transition:transform .3s ease,box-shadow .3s ease}.insights-section .insight-item:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,.15)}.insights-section .insight-item .insight-content .insight-text{font-size:1.1rem;color:#2d3436;line-height:1.6;font-weight:500}.page-comparisons{background:#fff}.page-comparisons .section-subtitle{font-size:1.1rem;color:#95a5a6;text-align:center;max-width:600px;margin-left:auto;margin-right:auto;margin-bottom:3em}.page-comparisons .page-reports-grid{display:grid;gap:1em;max-width:900px;margin:0 auto}@media (max-width:30em){.page-comparisons .page-reports-grid{gap:.75em}}.footer-cta{background:linear-gradient(135deg,#9b59b6 0,#804399 100%);color:#fff;padding:4em 0;text-align:center}.footer-cta .cta-content{max-width:600px;margin:0 auto}.footer-cta .cta-content h2{font-size:2.5rem;margin-bottom:1em;color:#fff}@media (max-width:52em){.footer-cta .cta-content h2{font-size:2rem}}.footer-cta .cta-content p{font-size:1.2rem;margin-bottom:2em;opacity:.9}.footer-cta .cta-buttons{display:flex;gap:1em;justify-content:center}@media (max-width:30em){.footer-cta .cta-buttons{flex-direction:column;align-items:center}}@media (max-width:52em){.metrics-grid{grid-template-columns:repeat(2,1fr)}.visual-comparison-header .page-title{font-size:2rem}.visual-comparison-header .overall-score-display .score-circle{width:100px;height:100px}.visual-comparison-header .overall-score-display .score-circle .score-percentage{font-size:1.5rem}.visual-comparison-header .overall-score-display .grade-letter{font-size:2.5rem}}@media (max-width:30em){.metrics-grid{grid-template-columns:1fr}.insights-container{gap:1em}.insight-item{padding:1.5em}.insight-item .insight-text{font-size:1rem}}.insight-item,.metric-card{animation:slideInUp .6s ease-out both}.insight-item:nth-child(1),.metric-card:nth-child(1){animation-delay:.1s}.insight-item:nth-child(2),.metric-card:nth-child(2){animation-delay:.2s}.insight-item:nth-child(3),.metric-card:nth-child(3){animation-delay:.3s}.insight-item:nth-child(4),.metric-card:nth-child(4){animation-delay:.4s}.insight-item:nth-child(5),.metric-card:nth-child(5){animation-delay:.5s}.insight-item:nth-child(6),.metric-card:nth-child(6){animation-delay:.6s}.insight-item:nth-child(7),.metric-card:nth-child(7){animation-delay:.7s}@keyframes slideInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media print{.visual-comparison-header{background:#ecf0f1!important;color:#1a1a1a!important}.insight-item,.metric-card{break-inside:avoid;box-shadow:none!important;border:1px solid #95a5a6!important}.footer-cta{display:none!important}}