.client-portal-intro {
  max-width: 1040px;
  margin: 0 0 26px;
  padding: 28px 30px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f4eef7, #f7faee);
  border-left: 7px solid var(--purple);
}
.client-portal-intro,
.client-rival-list,
.client-work-list,
.client-change-list,
.client-explainer { font-size: 27px; }
.client-portal-intro h2 { margin: 4px 0 10px; font-size: clamp(40px, 3vw, 50px); line-height: 1.22; }
.client-portal-intro p:last-child { margin-bottom: 0; color: var(--muted); }
.client-rival-list,
.client-work-list,
.client-change-list { display: grid; gap: 11px; }
.client-rival-list article { display: grid; grid-template-columns: 48px 1fr; gap: 13px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.client-rival-list article > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--purple); color: #fff; font-weight: 800; }
.client-rival-list strong,
.client-rival-list small { display: block; }
.client-rival-list small { margin-top: 3px; color: var(--muted); }
.client-explainer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.client-explainer article { padding: 20px; border-radius: 14px; background: var(--soft); }
.client-explainer strong,
.client-explainer span { display: block; }
.client-explainer strong { color: var(--purple); font-size: 46px; }
.client-work-list article { display: grid; grid-template-columns: auto 1fr; gap: 13px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.client-work-list article strong,
.client-work-list article small { display: block; }
.client-work-list article p { margin: 5px 0 !important; }
.client-work-list article small,
.client-change-list small { color: var(--muted); }
.client-work-list.completed article { border-left: 6px solid var(--green); }
.client-change-list article { padding: 14px; border-left: 6px solid var(--purple); border-radius: 10px; background: var(--soft); }
.client-change-list strong,
.client-change-list small { display: block; }
@media (max-width: 700px) { .client-explainer { grid-template-columns: 1fr; } .client-portal-intro { padding: 22px; } }