/* PEER ANALYSIS FEATURE PAGE */

/* Hero */
.peer-hero{background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%)}
.peer-hero::before{background:radial-gradient(ellipse,rgba(90,85,163,.12) 0%,transparent 70%)}
.peer-label{color:#ea580c !important}
.accent-teal{color:#f97316}
.peer-cta{background:#ea580c}
.peer-cta:hover{background:#f97316;box-shadow:0 8px 24px rgba(234,88,12,.3)}

/* Screenshot placeholders */
.screenshot-placeholder.teal{border-color:#e2e8f0;background:#f1f5f9;color:#64748b}

/* Feature box borders */
.feature-box.teal-border:hover{border-color:#ea580c;box-shadow:0 8px 24px rgba(234,88,12,.08)}
.teal-icon{background:rgba(234,88,12,.1) !important;color:#ea580c !important}
.teal-bg{background:#ea580c !important;color:#fff !important}

/* Inline screenshots between grid rows */
.inline-screenshot{margin:32px 0 40px;max-width:100%}
.inline-screenshot .screenshot-placeholder{height:300px;border-radius:16px}

/* Steps timeline */
.steps-timeline{max-width:700px;margin:0 auto;position:relative;padding-left:48px}
.steps-timeline::before{content:'';position:absolute;left:19px;top:24px;bottom:24px;width:2px;background:#e2e8f0}
.step-item{display:flex;align-items:flex-start;gap:20px;margin-bottom:36px;position:relative}
.step-item:last-child{margin-bottom:0}
.step-number{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;flex-shrink:0;position:absolute;left:-48px}
.step-content h3{font-size:1.05rem;font-weight:700;color:#0f172a;margin-bottom:8px}
.step-content p{font-size:.9rem;color:#64748b;line-height:1.6;margin-bottom:8px}
.step-content ul{font-size:.85rem;color:#64748b;line-height:1.7;padding-left:20px;margin:0}
.step-content li{margin-bottom:6px}
.step-content strong{color:#0f172a}

/* Health Score Grid */
.health-grid{display:flex;flex-direction:column;gap:16px;max-width:700px;margin:0 auto 32px}
.health-item{display:flex;align-items:flex-start;gap:16px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px 24px}
.health-weight{width:52px;height:52px;border-radius:12px;background:#ea580c;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;flex-shrink:0}
.health-item h4{font-size:.95rem;font-weight:700;color:#0f172a;margin-bottom:4px}
.health-item p{font-size:.85rem;color:#64748b;line-height:1.5;margin:0}

/* Grade Scale */
.grade-scale{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.grade-item{padding:12px 20px;border-radius:10px;font-size:.85rem;font-weight:600;text-align:center;min-width:80px}
.grade-item span{display:block;font-size:1.5rem;font-weight:800;margin-bottom:2px}
.grade-a{background:#dcfce7;color:#166534}
.grade-b{background:#dbeafe;color:#1e40af}
.grade-c{background:#fef9c3;color:#854d0e}
.grade-d{background:#ffedd5;color:#9a3412}
.grade-f{background:#fecaca;color:#991b1b}

/* Data source */
.data-source.teal-source{background:#f0f9ff;border-color:#bae6fd}
.data-source.teal-source h3{color:#0369a1}
.data-source.teal-source p{color:#0c4a6e}
.data-source.teal-source ul{color:#0c4a6e}
.data-source.teal-source strong{color:#0369a1}

/* Mobile */
@media(max-width:768px){
  .steps-timeline{padding-left:40px}
  .step-number{left:-40px;width:32px;height:32px;font-size:.85rem}
  .steps-timeline::before{left:15px}
  .inline-screenshot .screenshot-placeholder{height:200px}
  .grade-scale{gap:8px}
  .grade-item{min-width:60px;padding:8px 12px;font-size:.75rem}
  .grade-item span{font-size:1.1rem}
}