/* "Built for industries" section on /index-test-temp, ported from the
   stensul.com (WordPress) homepage. Kept out of the shared stensul-site
   stylesheets so those stay identical to stensul-site. Loaded after ui-kit.css,
   which supplies the --kit-* tokens and the .eyebrow/.section-heading/
   .section-body type (DM Mono 13 eyebrow, H2 56/36, body 18).

   Web System treatment, as on "Where enterprise AI stops" and the platform
   diagram: one flat white frame with a hairline and square corner marks
   (.st-corners, from sonia-sandbox.css), hairline dividers between the four
   industries, DM Mono for the proof labels, and a faded dot grid behind the
   frame. No gradient: the next section already carries the corner glows. */

.industries-section {
  position: relative;
  isolation: isolate;
  background: var(--kit-white);
  border-top: 1px solid var(--kit-ivory-medium);
}

.industries-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 96px 80px;
}

/* Wider than the default 760 so the heading sets on two lines at 56px. */
.industries-intro {
  max-width: 900px;
  margin-bottom: 48px;
}

/* Four cards, spaced apart (Rurik, 2026-10-12: smaller, more spacious and
   modern, and clearly clickable). The whole card is the link: .ind-link's
   ::after stretches over the card. On hover the card lifts, its edge turns
   teal, the icon tile tints and the arrow nudges. */
.ind-frame {
  position: relative;
  border: 0;
  background: none;
}

/* Dot grid behind the cards, faded out at the edges. */
.ind-frame::before {
  content: "";
  position: absolute;
  inset: -64px -80px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(32, 31, 29, .10) 1px, transparent 1.4px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 100%);
}

.ind-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ind-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 24px 24px;
  background: var(--kit-white);
  border: 1px solid rgba(32, 31, 29, .12);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(32, 31, 29, .04);
  transition: translate .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.ind-card:hover,
.ind-card:has(.ind-link:focus-visible) {
  translate: 0 -4px;
  border-color: rgba(10, 120, 145, .45);
  box-shadow: 0 2px 4px rgba(13, 40, 40, .04), 0 16px 32px -12px rgba(13, 40, 40, .18);
}

/* The icon sits on the card, no tile (Sonia, 2026-10-13). */
.ind-icon {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
}

/* H3 tag, H4 look: the cards are a list, not section headings. */
.ind-title {
  margin: 0 0 8px;
  font-family: 'Synapse', sans-serif;
  font-size: var(--type-h4);
  font-weight: 500;
  line-height: var(--type-h4-lh);
  letter-spacing: var(--type-h4-ls);
  color: var(--kit-text-strong);
}

.ind-desc {
  margin: 0 0 20px;
  font-size: var(--type-small);
  line-height: var(--type-body-lh);
  color: var(--kit-text-medium);
}

/* Proof point as a mono label with a status dot, like the web system chips. */
.ind-proof {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 20px;
  font-family: 'DM Mono', 'SF Mono', monospace;
  font-synthesis-weight: none;
  font-size: var(--type-label-s);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kit-text-strong);
}

.ind-proof::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kit-teal-medium);
  transform: translateY(-1px);
}

/* The link sits at the bottom of each card so the four line up. */
.ind-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-family: 'Synapse', sans-serif;
  font-size: var(--type-small);
  font-weight: 500;
  line-height: 1.5;
  color: var(--kit-teal-shade);
  text-decoration: none;
}

/* Stretch the link over the whole card. */
.ind-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.ind-card:hover .ind-link { color: var(--kit-teal-dark); }

.ind-link:focus-visible { outline: none; }
.ind-card:has(.ind-link:focus-visible) { outline: 2px solid var(--kit-teal-shade); outline-offset: 3px; }

.ind-arrow {
  width: 14px;
  height: 12px;
  flex: none;
  transition: transform .25s ease;
}

.ind-card:hover .ind-arrow,
.ind-link:focus-visible .ind-arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .ind-card, .ind-arrow { transition: none; }
  .ind-card:hover, .ind-card:has(.ind-link:focus-visible) { translate: none; }
}

@media (max-width: 1100px) {
  .industries-inner { padding: 80px 40px; }
  .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .ind-frame::before { inset: -48px -40px; }
}

@media (max-width: 760px) {
  .industries-inner { padding: 64px 16px; }
  .industries-intro { margin-bottom: 32px; }
  .ind-grid { grid-template-columns: 1fr; gap: 16px; }
  .ind-card { padding: 20px; }
  .ind-icon { margin-bottom: 16px; }
  .ind-title br { display: none; }
  .ind-frame::before { inset: -32px -16px; }
}