/* Why it works, ported from the phase 2 use case concept (uc-deep): three cards on the Green Field, title and text on
   shared rows, then the point they add up to, set large. Logical properties, so Arabic mirrors. */
.uc-deep-head { display: grid; gap: 18px; max-width: 860px; }
.uc-deep-field { margin-top: clamp(36px, 4.5vw, 60px); padding: clamp(16px, 2.6vw, 36px); border-radius: var(--r-xl); background: var(--field-green); }
.uc-deep-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.uc-deep-card {
  min-width: 0; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 12px;
  padding: 24px 24px 22px; border-radius: 26px;
  background: var(--sheet-bg); color: var(--ink); box-shadow: var(--shadow-sm);
}
@supports not (grid-template-rows: subgrid) {
  .uc-deep-card { display: flex; flex-direction: column; }
}
.uc-deep-top { display: flex; align-items: center; gap: 12px; }
.uc-deep-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--field-green); color: var(--ink); }
.uc-deep-ic .i { width: 20px; height: 20px; }
.uc-deep-card h3 { font: 800 1.2rem/1.25 var(--text); letter-spacing: -0.01em; text-wrap: balance; }
.uc-deep-card p { font-size: 16px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.uc-deep-point { margin: clamp(22px, 3vw, 34px) auto 4px; max-width: 30em; text-align: center; font: 800 clamp(1.25rem, 1rem + 0.9vw, 1.7rem)/1.3 var(--text); letter-spacing: -0.01em; text-wrap: balance; }
@media (max-width: 1023px) {
  .uc-deep-list { grid-template-columns: minmax(0, 1fr); }
  .uc-deep-card { grid-row: auto; grid-template-rows: none; display: grid; }
}