.ratios-hero-section{margin-bottom:2rem}.ratios-hero-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}@media (max-width:1200px){.ratios-hero-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:640px){.ratios-hero-grid{grid-template-columns:repeat(2,1fr)}}.ratios-hero-card{background:var(--card-bg,#ffffff);border:1px solid var(--border-color,#e5e7eb);border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.625rem;transition:all .2s ease;position:relative;overflow:hidden}.ratios-hero-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:#e5e7eb;transition:background .2s ease}.ratios-hero-card:hover{box-shadow:0 8px 25px -5px rgba(0,0,0,.1),0 4px 10px -5px rgba(0,0,0,.04);transform:translateY(-2px)}.ratios-hero-card.green:before{background:linear-gradient(90deg,#10b981,#34d399)}.ratios-hero-card.red:before{background:linear-gradient(90deg,#ef4444,#f87171)}.ratios-hero-card.neutral:before{background:linear-gradient(90deg,#6366f1,#818cf8)}.card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}.card-metric-label{font-size:.75rem;font-weight:600;color:var(--text-secondary,#6b7280);text-transform:uppercase;letter-spacing:.04em;line-height:1.3}.card-value-row{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}.card-value{font-size:1.625rem;font-weight:700;color:var(--text-primary,#111827);line-height:1.1;letter-spacing:-.02em}.card-change{font-size:.7rem;font-weight:600;padding:2px 6px;border-radius:4px;white-space:nowrap}.card-change.up{color:#dc2626;background:rgba(220,38,38,.08)}.card-change.down{color:#16a34a;background:rgba(22,163,74,.08)}.card-avg{font-size:.75rem;color:var(--text-secondary,#6b7280)}.card-avg strong{color:var(--text-primary,#374151);font-weight:600}.percentile-bar-enhanced{margin-top:.25rem}.percentile-track{position:relative;height:6px;background:#f1f5f9;border-radius:3px;overflow:visible}.percentile-fill{position:absolute;left:0;top:0;height:100%;border-radius:3px;transition:width .6s cubic-bezier(.4,0,.2,1)}.percentile-marker{position:absolute;top:50%;transform:translate(-50%,-50%);z-index:2}.percentile-marker-dot{display:block;width:10px;height:10px;background:white;border:2px solid #374151;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2)}.percentile-labels{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.percentile-range-label{font-size:.625rem;color:#9ca3af;font-weight:500}.percentile-value-label{font-size:.6875rem;color:#6b7280;font-weight:600}.sparkline-container{display:flex;align-items:center;gap:4px}.sparkline-container svg{flex-shrink:0}.sparkline-trend{font-size:.625rem;font-weight:700;width:14px;height:14px;display:flex;align-items:center;justify-content:center;border-radius:3px}.sparkline-trend.up{color:#16a34a;background:rgba(22,163,74,.1)}.sparkline-trend.down{color:#dc2626;background:rgba(220,38,38,.1)}.minmax-context{gap:.5rem;font-size:.6875rem;color:#9ca3af}.minmax-context,.minmax-item{display:flex;align-items:center}.minmax-item{gap:3px}.minmax-label{color:#9ca3af}.minmax-value{color:#6b7280;font-weight:500}.minmax-divider{color:#d1d5db}.card-link{font-size:.75rem;color:var(--accent-color,#3b82f6);text-decoration:none;margin-top:auto;padding-top:.25rem;font-weight:500}.card-link:hover{text-decoration:underline}.hero-footnote{font-size:.75rem;color:var(--text-tertiary,#9ca3af);margin-top:1rem;text-align:center;line-height:1.5}@media (max-width:640px){.ratios-hero-card{padding:.875rem;gap:.5rem}.card-value{font-size:1.375rem}.card-metric-label{font-size:.6875rem}.sparkline-container svg{width:48px;height:22px}.minmax-context{display:none}}