/* Industries hub page — extends main.css */

/* Checkmark list row */
.chk{display:flex;align-items:flex-start;gap:12px}

/* Checkmark icon box */
.chk-i{width:18px;height:18px;border-radius:5px;
        background:var(--b-lt);border:1px solid var(--b-bd);
        display:flex;align-items:center;justify-content:center;
        flex-shrink:0;margin-top:2px}

/* Industry card icon — larger than .ibox */
.ii{width:56px;height:56px;border-radius:12px;
    background:var(--b-lt);border:1px solid var(--b-bd);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0}

/* 3-column grid */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* Role cards */
.role-card{
  background:var(--w);border-radius:14px;border:1px solid var(--br);
  padding:24px 22px;box-shadow:0 1px 3px rgba(12,91,166,.06);
  transition:border-color .18s,box-shadow .18s;
}
.role-card:hover{border-color:var(--b);box-shadow:0 4px 16px rgba(12,91,166,.11)}
.role-tag{
  display:inline-block;font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--b);background:var(--b-lt);
  padding:3px 10px;border-radius:999px;border:1px solid var(--b-bd);
  margin-bottom:12px;
}

/* FAQ accordion */
.faq-item{border-bottom:1px solid var(--br);padding:22px 24px;background:var(--w)}
.faq-item:last-child{border-bottom:none}
.faq-q{
  font-size:15px;font-weight:600;color:var(--t);cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  list-style:none;
}
.faq-q::-webkit-details-marker{display:none}
details[open] .faq-q{color:var(--b)}
.faq-a{font-size:14px;color:var(--t-m);line-height:1.7;margin-top:10px}

/* Ecosystem flow pill */
.eco-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--w);border:1px solid var(--b-bd);border-radius:10px;
  padding:10px 16px;font-size:13px;font-weight:600;color:var(--t);
  box-shadow:0 1px 3px rgba(12,91,166,.06);
}
.eco-arrow{color:var(--b-bd);font-size:18px;flex-shrink:0}

/* Industry cards as anchor links — full card clickable */
a.card:hover .btn-g{gap:9px}
a.card:focus-visible{outline:2px solid var(--b);outline-offset:3px}

/* Responsive */
@media(max-width:1023px){
  .g3{grid-template-columns:repeat(2,1fr)}
  .g-ind{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:767px){
  .g3{grid-template-columns:1fr 1fr}
  .g2{grid-template-columns:1fr!important;gap:32px!important}
}
@media(max-width:480px){
  .g3{grid-template-columns:1fr}
  .g-ind{grid-template-columns:1fr!important}
}