/* /websites-for/<slug>/ — industry pages. Demo cards (same look as the /demos/ hub cards) and a simple FAQ. */
.ind-note { margin: -.4rem 0 1.4rem; color: var(--muted); max-width: 46rem; }
.ind-demos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 2.2vw, 28px); }
.ind-demo { display: grid; gap: .5rem; height: 100%; padding: 12px 12px 20px; border-radius: calc(var(--radius) + 6px); background: var(--card, #fff); color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 0 var(--line), 0 24px 50px -34px rgba(0, 0, 0, .35); transition: transform .3s, box-shadow .3s; }
.ind-demo:hover { transform: translateY(-5px); box-shadow: 0 1px 0 var(--line), 0 34px 60px -30px rgba(0, 0, 0, .4); }
.ind-demo img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius); display: block; margin-bottom: .4rem; }
.ind-demo > :not(img) { padding-inline: 8px; }
.ind-demo h3 { font-size: 1.3rem; margin: 0; }
.ind-demo p { margin: 0; color: var(--muted); }
.ind-demo__go { margin-top: .3rem; font-weight: 600; color: var(--green-deep); }
.ind-demo:hover .ind-demo__go { text-decoration: underline; }
.ind-proof { max-width: 46rem; margin: 0 0 1.6rem; font-size: 1.08rem; line-height: 1.6; }
.ind-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem 4rem; align-items: start; }
.ind-faq h2 { margin-top: 12px; }
.ind-areas { color: var(--muted); max-width: 26rem; }
.ind-qs details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.ind-qs details:first-child { border-top: 1px solid var(--line); }
.ind-qs summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; font-weight: 700; font-size: 1.08rem; }
.ind-qs summary::-webkit-details-marker { display: none; }
.ind-qs summary::after { content: "+"; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--green-deep); color: #fff; font-weight: 700; transition: rotate .25s; }
.ind-qs details[open] summary::after { rotate: 45deg; }
.ind-qs details p { margin: .7rem 0 0; color: var(--muted); max-width: 40rem; }
@media (max-width: 860px) { .ind-faq { grid-template-columns: 1fr; } }