/*
 * Service — Speed/Performance (Archetype E: precision, before/after metrics).
 * Loaded only on the dedicated speed service page template.
 */

.mwp-speed-hero { padding-block: var(--sp-12) var(--sp-16); background: linear-gradient(180deg, var(--primary-soft), transparent); }
.mwp-speed-hero__grid { display: grid; gap: var(--sp-12); align-items: center; margin-block-start: var(--sp-6); }
@media (min-width: 900px) { .mwp-speed-hero__grid { grid-template-columns: 1.1fr .9fr; } }
.mwp-speed-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--primary); background: var(--surface); border: 1px solid var(--border);
  padding: 6px 14px; border-radius: var(--radius-pill); font-weight: 700; font-size: var(--fs-sm);
  margin-block-end: var(--sp-4);
}
.mwp-speed-hero__content h1 { margin-block-end: var(--sp-3); }
.mwp-speed-hero__sub { color: var(--text-secondary); font-size: 1.15rem; max-width: 56ch; }
.mwp-speed-hero__cta { margin-block-start: var(--sp-6); }

.mwp-speed-vitals {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
}
.mwp-speed-vitals__head {
  font-size: var(--fs-sm); color: var(--text-secondary); font-weight: 700;
  margin-block-end: var(--sp-5); padding-block-end: var(--sp-3);
  border-block-end: 1px solid var(--border);
}
/* Score rings — the same "Lighthouse-style" donut a real audit report
 * shows, built from a conic-gradient (no SVG needed, crisp at any size). */
.mwp-speed-gauges {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-5);
  padding-block: var(--sp-2) var(--sp-6);
}
.mwp-speed-gauges__arrow { color: var(--text-secondary); flex: none; transform: scaleX(-1); }
.mwp-speed-gauge {
  --pct: 50;
  position: relative; width: 116px; height: 116px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--surface-sunken) 0);
}
.mwp-speed-gauge::before {
  content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface);
}
.mwp-speed-gauge__value {
  position: relative; z-index: 1; font-size: 1.7rem; font-weight: 800; color: var(--text-primary);
  line-height: 1;
}
.mwp-speed-gauge__tag {
  position: absolute; z-index: 1; bottom: -26px; inset-inline: 0; text-align: center;
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-secondary);
}
.mwp-speed-gauge--before { --ring-color: #dc2626; }
.mwp-speed-gauge--after { --ring-color: #16a34a; }

.mwp-speed-vitals__chips {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center;
  padding-block-start: var(--sp-5); border-block-start: 1px solid var(--border);
}
.mwp-speed-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); font-size: var(--fs-sm); color: var(--text-primary);
}
.mwp-speed-chip b { font-family: var(--font-mono); font-weight: 800; }
.mwp-speed-chip s { color: var(--text-secondary); text-decoration-color: #dc2626; }

/* ---------- Signature section: optimisation layers ---------- */
.mwp-speed-layers { display: grid; gap: var(--sp-5); }
.mwp-speed-layer {
  display: grid; grid-template-columns: auto auto 1fr; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
}
.mwp-speed-layer__num { font-weight: 800; color: var(--text-secondary); font-family: var(--font-mono); }
.mwp-speed-layer__icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--primary-soft); color: var(--primary); display: grid; place-items: center;
}
.mwp-speed-layer h3 { font-size: 1.02rem; margin-block-end: 4px; }
.mwp-speed-layer p { color: var(--text-secondary); font-size: var(--fs-sm); }