.cwv-problem{background:var(--color-white);padding:80px 24px}.cwv-problem-inner{max-width:900px;margin:0 auto;text-align:center}.cwv-problem h2,.cwv-metric-header h2,.cwv-how h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;color:var(--text-primary);letter-spacing:-.01em}.cwv-problem h2{margin-bottom:40px}.cwv-problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;text-align:left;margin-bottom:40px}.cwv-problem-col p{font-size:.95rem;color:var(--text-secondary);line-height:1.7}.cwv-problem-callout{background:var(--color-stone-50);border:1px solid var(--color-stone-200);border-radius:12px;padding:28px 36px;max-width:680px;margin:0 auto}.cwv-problem-callout p{font-size:.95rem;color:var(--text-secondary);line-height:1.65;font-style:italic;text-align:center}@media(max-width:680px){.cwv-problem-grid{grid-template-columns:1fr;gap:24px}}.cwv-metric{background:var(--color-stone-100);padding:80px 24px}.cwv-metric--alt{background:var(--color-white)}.cwv-metric-inner{max-width:900px;margin:0 auto}.cwv-metric-header{text-align:center;margin-bottom:48px}.cwv-metric-badge{display:inline-block;font-family:DM Mono,monospace;font-size:.82rem;font-weight:600;letter-spacing:.08em;padding:6px 16px;border-radius:6px;margin-bottom:16px}.cwv-metric-badge--lcp{background:#22c55e1a;color:#15803d;border:1px solid rgba(34,197,94,.25)}.cwv-metric-badge--inp{background:#3b82f61a;color:#2563eb;border:1px solid rgba(59,130,246,.25)}.cwv-metric-badge--cls{background:#a855f71a;color:#7c3aed;border:1px solid rgba(168,85,247,.25)}.cwv-metric-header h2{margin-bottom:8px}.cwv-metric-target{font-size:.88rem;color:var(--text-muted);font-style:italic}.cwv-metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}.cwv-metric-problem,.cwv-metric-solution{background:var(--color-white);border:1px solid var(--color-stone-200);border-radius:14px;padding:28px}.cwv-metric .cwv-metric-problem{border-left:3px solid var(--color-error-light)}.cwv-metric .cwv-metric-solution{border-left:3px solid var(--color-gold)}.cwv-metric-problem h3,.cwv-metric-solution h3{font-size:.92rem;font-weight:700;color:var(--text-primary);margin-bottom:12px;text-transform:uppercase;letter-spacing:.04em}.cwv-metric-problem p{font-size:.9rem;color:var(--text-secondary);line-height:1.7}.cwv-metric-solution ul{list-style:none;display:flex;flex-direction:column;gap:10px}.cwv-metric-solution li{font-size:.9rem;color:var(--text-secondary);line-height:1.6;padding-left:22px;position:relative}.cwv-metric-solution li:before{content:"✓";position:absolute;left:0;color:var(--color-gold-text);font-weight:700}.cwv-metric-solution code,.cwv-how-card code{font-family:DM Mono,monospace;font-size:.82rem;background:var(--color-stone-100);padding:2px 6px;border-radius:4px}@media(max-width:680px){.cwv-metric-grid{grid-template-columns:1fr;gap:20px}}.cwv-how{background:var(--color-white);padding:80px 24px}.cwv-how-inner{max-width:900px;margin:0 auto}.cwv-how h2{text-align:center;margin-bottom:48px}.cwv-how-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:36px}.cwv-how-card{background:var(--color-stone-25);border:1px solid var(--color-stone-200);border-radius:14px;padding:28px 24px;transition:transform .3s ease,box-shadow .3s ease}.cwv-how-card:hover{transform:translateY(-3px);box-shadow:0 6px 24px #1c19170f}.cwv-how-number{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(135deg,var(--color-gold-wash),var(--color-gold-pale));color:var(--color-gold-dark);font-weight:700;font-size:.92rem;margin-bottom:16px}.cwv-how-card h3{font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:8px;line-height:1.3}.cwv-how-card p{font-size:.88rem;color:var(--text-secondary);line-height:1.65}.cwv-how-note{background:var(--color-stone-50);border:1px solid var(--color-stone-200);border-radius:12px;padding:24px 32px;max-width:680px;margin:0 auto;text-align:center}.cwv-how-note p{font-size:.92rem;color:var(--text-secondary);line-height:1.6;font-style:italic}@media(max-width:640px){.cwv-how-grid{grid-template-columns:1fr}}[data-theme=dark] .cwv-problem{background:var(--color-stone-850)}[data-theme=dark] .cwv-problem-callout,[data-theme=dark] .cwv-how-note{background:var(--color-stone-900);border-color:var(--color-stone-800)}[data-theme=dark] .cwv-metric{background:var(--color-stone-950)}[data-theme=dark] .cwv-metric--alt{background:var(--color-stone-850)}[data-theme=dark] .cwv-metric-badge--lcp{background:#22c55e1f;color:#4ade80;border-color:#22c55e4d}[data-theme=dark] .cwv-metric-badge--inp{background:#3b82f61f;color:#60a5fa;border-color:#3b82f64d}[data-theme=dark] .cwv-metric-badge--cls{background:#a855f71f;color:#c084fc;border-color:#a855f74d}[data-theme=dark] .cwv-metric-problem,[data-theme=dark] .cwv-metric-solution{background:var(--color-stone-900);border-color:var(--color-stone-800)}[data-theme=dark] .cwv-metric .cwv-metric-problem{border-left-color:var(--color-error-light)}[data-theme=dark] .cwv-metric .cwv-metric-solution{border-left-color:var(--color-gold)}[data-theme=dark] .cwv-metric-solution code,[data-theme=dark] .cwv-how-card code{background:var(--color-stone-800)}[data-theme=dark] .cwv-how{background:var(--color-stone-850)}[data-theme=dark] .cwv-how-card{background:var(--color-stone-900);border-color:var(--color-stone-800)}[data-theme=dark] .cwv-how-card:hover{box-shadow:0 6px 24px #0000004d}[data-theme=dark] .cwv-how-number{background:linear-gradient(135deg,#fefce814,#fef3c70d);color:var(--color-gold-light)}@media(prefers-reduced-motion:reduce){.cwv-how-card{transition:none}}