/* /industries section — builds on landing.css + products.css. Prefix: .ind- */

/* ---------- Breadcrumbs ---------- */
.ind-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--muted);
}
.ind-crumbs a { color: var(--muted); text-decoration: none; transition: color .2s ease; }
.ind-crumbs a:hover { color: var(--indigo); }
.ind-crumbs span[aria-hidden] { color: var(--faint); }
.ind-crumbs span[aria-current] { color: var(--ink); font-weight: 600; }

/* Current nav item */
.nav-links a.is-current { color: var(--ink); font-weight: 700; }

/* ---------- Hero ---------- */
/* Industry headlines are full sentences, not three-word slogans: one size down from the product pages. */
.ind-hero .hero-copy h1 {
  font-size: clamp(2rem, 3.35vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.ind-hero .hero-sub { font-size: 1.05rem; }

/* ---------- Hero chat card ---------- */
.ind-hero .ind-visual { padding-bottom: 64px; }
.ind-chat .msg { font-size: .88rem; }
.ind-chip {
  position: absolute;
  z-index: 2;
  inset-inline-start: 22px;
  bottom: 34px; /* straddles the card's bottom edge over its padding, never over a message */
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: calc(100% - 44px);
  font-size: .82rem;
  font-weight: 600;
  color: #14532d;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  box-shadow: var(--shadow-md);
  padding: 10px 14px;
  animation: ind-float 4.5s ease-in-out infinite;
}
.ind-chip svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--green); }
@keyframes ind-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

/* Messages appear one after another */
.js .ind-m { opacity: 0; translate: 0 8px; animation: ind-msg .45s ease forwards; }
.js .ind-m1 { animation-delay: .5s; }
.js .ind-m2 { animation-delay: 1.4s; }
.js .ind-m3 { animation-delay: 2.5s; }
.js .ind-m4 { animation-delay: 3.5s; }
.js .ind-m5 { animation-delay: 4.5s; }
.js .ind-m6 { animation-delay: 5.5s; }
@keyframes ind-msg { to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .js .ind-m { opacity: 1; translate: none; animation: none; }
  .ind-chip { animation: none; }
}

/* ---------- Index hero + grid ---------- */
.ind-hero-index { padding-bottom: 40px; }
.ind-hero-index-inner { max-width: 820px; text-align: center; }
.ind-hero-index-inner .ind-crumbs { justify-content: center; }
.ind-hero-index-inner .hero-cta { justify-content: center; }
.ind-hero-index-inner h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }

.ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.ind-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.ind-card:hover { transform: translateY(-4px); border-color: #cfd6f4; box-shadow: var(--shadow-md); }
.ind-card-main {
  display: block;
  padding: 26px 24px 18px;
  color: inherit;
  text-decoration: none;
  flex: 1;
}
.ind-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--indigo-soft);
  color: var(--indigo);
  margin-bottom: 18px;
}
.ind-card-icon svg { width: 24px; height: 24px; }
.ind-card h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; color: var(--ink); }
.ind-card p { font-size: .92rem; color: var(--body); }
.ind-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 24px 22px;
}
.ind-card-links a {
  font-size: .8rem;
  font-weight: 600;
  color: var(--indigo-deep);
  background: var(--indigo-soft);
  border-radius: 999px;
  padding: 6px 12px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.ind-card-links a:hover { background: var(--indigo); color: #fff; }
.ind-card-links .ind-card-demo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #14532d;
  background: #ecfdf5;
}
.ind-card-links .ind-card-demo:hover { background: var(--green); color: #fff; }

.ind-notlisted { text-align: center; }
.ind-notlisted h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.ind-notlisted .cta-actions { justify-content: center; margin-top: 26px; }

/* ---------- Hub: pains numbered icons ---------- */
.ind-pain-icon { font-weight: 800; font-size: .95rem; letter-spacing: .04em; background: #fff1f2; color: #be123c; }
.ind-pains { grid-template-columns: repeat(4, 1fr); }

/* ---------- Hub: team list ---------- */
.ind-team {
  list-style: none;
  display: grid;
  gap: 14px;
  max-width: 900px;
  margin-inline: auto;
}
.ind-team-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.ind-team-row:hover { border-color: #cfd6f4; box-shadow: var(--shadow-md); }
.ind-team-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  color: #fff;
}
.ind-team-icon svg { width: 26px; height: 26px; }
.ind-team-copy h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.ind-team-copy p { font-size: .94rem; color: var(--body); }
.ind-team-link {
  display: inline-block;
  margin-top: 10px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--indigo);
  text-decoration: none;
}
.ind-team-link:hover { text-decoration: underline; }
.ind-team-link-soft { color: var(--muted); font-weight: 600; }

/* ---------- Steps without illustrations ---------- */
.ind-steps .step { padding-top: 30px; }

/* ---------- Combo cards ---------- */
.ind-combos { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* 2 or 3 cards, always full width */
.ind-combo { padding-top: 24px; }
.ind-combo-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--indigo-soft);
  color: var(--indigo);
  margin-bottom: 16px;
}
.ind-combo-icon svg { width: 21px; height: 21px; }
.ind-combo-name {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 8px;
}
[dir="rtl"] .ind-combo-name { letter-spacing: 0; }
.ind-combo h3 { font-size: 1.02rem; line-height: 1.4; }

/* ---------- Page: 4-step flow ---------- */
.ind-flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: flow;
}
.ind-flow-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px 26px;
  box-shadow: var(--shadow-sm);
}
.ind-flow-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  margin-bottom: 16px;
}
.ind-flow-step h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.ind-flow-step p { font-size: .92rem; color: var(--body); }
.ind-flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 42px;
  inset-inline-end: -14px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #c7d2fe;
  border-inline-end: 2px solid #c7d2fe;
  transform: rotate(45deg);
}
[dir="rtl"] .ind-flow-step:not(:last-child)::after { transform: rotate(-135deg); }

/* ---------- Other industries ---------- */
.ind-others {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.ind-others a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.ind-others a:hover { border-color: #cfd6f4; box-shadow: var(--shadow-md); color: var(--indigo); }
.ind-others svg { width: 18px; height: 18px; color: var(--indigo); }
.ind-others + .plans-note { text-align: center; margin-top: 22px; }

.ind-plans-line { margin-top: 18px; font-size: .86rem; opacity: .8; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .ind-pains { grid-template-columns: repeat(2, 1fr); }
  .ind-flow { grid-template-columns: repeat(2, 1fr); }
  .ind-flow-step:nth-child(2)::after { display: none; }
}
@media (max-width: 940px) {
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .ind-crumbs { justify-content: center; }
  /* Centre the chip with left+right+auto margins so it keeps its full width (a 50% inset would squeeze it to half the card). */
  .ind-chip { inset-inline: 22px; width: max-content; max-width: calc(100% - 44px); margin-inline: auto; animation: none; white-space: normal; text-align: start; }
}
@media (max-width: 640px) {
  .ind-grid, .ind-pains, .ind-flow { grid-template-columns: 1fr; }
  .ind-flow-step::after { display: none; }
  .ind-team-row { grid-template-columns: 1fr; gap: 12px; }
  .ind-team-icon { width: 46px; height: 46px; }
  .ind-crumbs { font-size: .78rem; }
  .ind-chat .msg { font-size: .85rem; }
}