/* Industry use cases, ported from the phase 2 industry concept (in-uses): up to six touchpoints on a Green Field
   panel, each naming the HubSpot property it fills. Optional per industry (education, FinTech and professional
   services have six; the rest leave it out). Each card spans three rows of the list grid (title, text, property),
   so the property rows line up (DESIGN.md, The Level Row Rule). Logical properties, so Arabic pages mirror. */
.in-uses-head { display: grid; gap: 18px; max-width: 900px; }
.in-uses-field {
  margin-top: clamp(36px, 4.5vw, 64px); padding: clamp(16px, 2.6vw, 36px);
  border-radius: var(--r-xl); background: var(--field-green);
  corner-shape: var(--sq-shape, round);
}
.in-uses-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.in-uses-card {
  position: relative; min-width: 0;
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px;
  padding: 22px 22px 18px; border-radius: calc(26px * var(--sq-scale, 1));
  background: var(--sheet-bg); color: var(--ink);
  box-shadow: var(--shadow-sm);
  corner-shape: var(--sq-shape, round);
}
@supports not (grid-template-rows: subgrid) {
  .in-uses-card { display: flex; flex-direction: column; gap: 10px; }
  .in-uses-lands { margin-top: auto; }
}
.in-uses-card .h3 { font-size: 1.2rem; line-height: 1.25; }
.in-uses-text { font-size: 16px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.in-uses-text .link { display: inline; padding-block: 0; font-size: 15px; white-space: nowrap; }
.in-uses-text .link .i { width: 16px; height: 16px; margin-inline-start: 4px; }
/* The property row fills its shared row from the top, so the rules above it line up across a row of cards even
   when one card's chip wraps to a second line */
.in-uses-lands {
  display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 6px 10px;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.in-uses-lands span { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1.3 var(--text); color: var(--ink-soft); }
.in-uses-lands img { flex: none; width: 14px; height: 14px; }
@media (max-width: 1023px) {
  .in-uses-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .in-uses-list { grid-template-columns: minmax(0, 1fr); }
  .in-uses-card { padding: 20px 18px 16px; }
}