/* ============================================================================
   Southern AI Systems — industry vertical pages (Graphite)
   Loaded AFTER sais-ds.css by the 15 /<industry>/ pages. Everything here
   consumes sais-ds tokens; no raw hex, no new hues. One shared sheet replaces
   the fifteen drifted ~700-line inline blocks the legacy pages carried.
   (Migration 2026-08-23, design-audit F1/F9.)
   ========================================================================= */

/* ── EN/ES runtime toggle ───────────────────────────────────────────────────
   Industry pages translate in place via /i18n.js (buttons #lang-en/#lang-es),
   unlike the /es/ tree the rest of the site links. Mirror the .sais-lang look
   for <button> children; aria-pressed carries the active state. */
.sais-lang button {
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--size-micro);
  font-weight: var(--weight-bold); letter-spacing: var(--track-mono);
  padding: .32rem .6rem; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-3);
  transition: var(--transition-ui);
}
.sais-lang button:hover { color: var(--text-1) }
.sais-lang button:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset) }
.sais-lang button[aria-pressed="true"] { background: var(--ink-0); color: var(--text-on-ink-1) }

/* ── Illustrative agent-flow panel ──────────────────────────────────────────
   Replaces the legacy "Agent Dashboard v2" glow card. Same honesty rules:
   sample flow, no invented client metrics. */
.indpanel { max-width: 720px }
.indpanel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-4);
}
.indpanel__title {
  font-family: var(--font-mono); font-size: var(--size-label);
  font-weight: var(--weight-bold); letter-spacing: var(--track-mono-wide);
  text-transform: uppercase; color: var(--text-1); margin: 0;
}
.indpanel__rows { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius-sm); overflow: hidden }
.indpanel__row { display: flex; gap: var(--space-4); align-items: baseline; background: var(--paper-1); padding: var(--space-4) var(--space-5) }
.indpanel__num {
  font-family: var(--font-mono); font-size: var(--size-micro);
  font-weight: var(--weight-bold); letter-spacing: var(--track-mono);
  color: var(--text-3); flex: none;
}
.indpanel__what { font-size: var(--size-sm); color: var(--text-1); font-weight: var(--weight-semibold) }
.indpanel__meta { display: block; font-family: var(--font-mono); font-size: var(--size-micro); letter-spacing: .03em; color: var(--text-3); margin-top: .25rem }
.indpanel__foot { margin-top: var(--space-4) }

/* ── Feature checklist inside cards ───────────────────────────────────────── */
.indlist { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem }
.indlist li { position: relative; padding-left: 1.1rem; font-size: var(--size-sm); line-height: var(--leading-body); color: var(--text-2) }
.indlist li::before { content: ""; position: absolute; left: 0; top: .58em; width: 7px; height: 1px; background: var(--accent) }

/* ── Two-up card row (features + proof standard) ──────────────────────────── */
.indduo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) }
@media (max-width: 860px) { .indduo { grid-template-columns: 1fr } }

/* ── Cross-industry pill nav ("wrong industry?") ──────────────────────────── */
.indpills { display: flex; flex-wrap: wrap; gap: .6rem }
.indpills a {
  display: inline-flex; align-items: center;
  border: 1px solid var(--rule); border-radius: var(--radius-pill);
  padding: .45rem .85rem; background: var(--paper-1); color: var(--text-2);
  font-family: var(--font-mono); font-size: var(--size-micro);
  letter-spacing: .04em; line-height: 1.3; white-space: nowrap;
  transition: var(--transition-ui);
}
.indpills a:hover { color: var(--text-1); border-color: var(--rule-strong); background: var(--paper-2) }
.indpills a:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset) }

/* ── Sticky mobile CTA bar ──────────────────────────────────────────────────
   Conversion glue carried over from the legacy pages; ids are load-bearing
   (tracking + page script). Mobile only. */
#sai-sticky-cta {
  position: fixed; inset: auto 0 0 0; z-index: 90; display: none;
  background: var(--paper-1); border-top: 1px solid var(--rule);
  padding: .7rem var(--space-4) calc(.7rem + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .3s var(--ease-out, ease-out);
}
#sai-sticky-cta.visible { transform: translateY(0) }
#sai-sticky-cta-row { display: flex; gap: .6rem; max-width: 480px; margin: 0 auto }
#sai-sticky-cta-row a { flex: 1 }
@media (max-width: 768px) {
  #sai-sticky-cta { display: block }
  body { padding-bottom: 72px }
}
@media (prefers-reduced-motion: reduce) {
  #sai-sticky-cta { transition: none }
}