/* ============================================================
   Special Applications — "engineering brief".
   Clinical white, precision hairlines, generous whitespace, violet accent.
   Namespaced `.sct-sa-*`. Loaded only by /sectors/specialapps via its extraStyles.

   Contrast note: every figure below is computed (srgb_to_lin / luminance / contrast ratio, the
   same WCAG relative-luminance model Tasks 3-6 used), not estimated, against either flat sRGB hex
   values or actual sampled pixels from the committed `specialapps-lab-bench.jpg`.

   - `--violet` (#6169f0) measures **4.39:1 on pure white** and 4.28:1 on this page's `--sa-paper`
     (#fcfcff) — both BELOW the 4.5:1 minimum for the small bold text (11.5-12.5px) this page uses
     for its eyebrow, badge and numeral labels. (The plan's own file-header template claimed 4.6:1;
     that figure does not hold up under computation — see the outer task's lesson 1, which flags
     this exact token as a recurring hazard.) A darker token, `--sa-violet-ink: #454eed` (same hue
     and saturation as `--violet`, HSL lightness taken from 66.1% to 60%), is used for every violet
     TEXT use instead: 5.88:1 on white and 5.74:1 on `--sa-paper`, comfortably clearing 4.5:1 in
     both places it appears (hero eyebrow on `--sa-paper`, badge on white, matrix numeral on
     `--sa-paper`, process-step numeral on white).
   - `--violet` itself is kept, unmodified, for the three DECORATIVE (non-text) uses that only need
     the 3:1 non-text minimum: the domain-card icon strokes (4.39:1 on their white card — clears
     3:1 with margin), the process-step top border, and the request-list check icons — none of
     which is the sole means of identifying its component; every one sits beside navy/ink-70 text
     that also labels it.
   - Navy `#1a1b60` vs white = 15.33:1, vs `--sa-paper` = 14.97:1. `--ink-70` (rgba(0,0,0,.7),
     composited) vs white = 8.52:1, vs `--sa-paper` = 8.43:1. Both far exceed 4.5:1 everywhere they
     appear (headings, body copy, the unstyled eyebrows that don't carry the violet override).
   - Domains-section backdrop, checked against the actual committed file, worst case. The scrim is
     `linear-gradient(180deg, rgba(252,252,255,.95) 0%, rgba(252,252,255,.99) 100%)` over
     `specialapps-lab-bench.jpg`: because the scrim colour is near-white and the text sitting on it
     is dark (navy/ink-70), the worst case is the image's OWN DARKEST pixel bleeding through the
     gradient's lowest opacity stop (.95) — a darker patch under a lighter scrim pulls the
     composited background down, not up. Scanned every other pixel of the optimised 1600x893 file
     for its true darkest point: `rgb(0,0,0)` at `(480,596)`, L=0. Composited at the worst (.95)
     stop: `rgb(239.4,239.4,242.25)`, L=0.868 — still overwhelmingly light, because the scrim is
     95%+ opaque. Against it: the navy `<h2>` measures 13.41:1 and the ink-70 eyebrow/lede measure
     8.01:1 — both clear 4.5:1 by a wide margin even under this deliberately pessimistic
     single-darkest-pixel assumption. (This is the mirror image of the usual dark-scrim/light-text
     risk the outer task's lesson 3 describes: here the scrim is light and the text is dark, so a
     dark photo pixel showing through very slightly LOWERS contrast rather than a bright one WASHING
     OUT light text — either way the actual committed pixels were checked, not assumed.) No violet
     text sits on this backdrop at all: the domain cards that use `--sa-violet` for their icons carry
     their own flat `#fff` card background, never the raw photo.
   ============================================================ */

.sct-sa-hero, .sct-sa-intro, .sct-sa-domains, .sct-sa-matrix,
.sct-sa-process, .sct-sa-request {
  --sa-violet: var(--violet);
  --sa-violet-ink: #454eed;
  --sa-hair: rgba(26, 27, 96, .13);
  --sa-paper: #fcfcff;
}

/* ---------- hero ---------- */
.sct-sa-hero { background: var(--sa-paper); }
.sct-sa-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(30px, 4.5vw, 68px); align-items: center;
}
.sct-sa-hero__eyebrow { color: var(--sa-violet-ink); }
.sct-sa-hero__title {
  font-size: clamp(33px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.035em;
  color: var(--navy); margin: 12px 0 16px;
}
.sct-sa-badge {
  display: inline-block; margin-top: 20px; padding: 7px 15px;
  border: 1px solid var(--sa-hair); border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--sa-violet-ink); background: #fff;
}
.sct-sa-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.sct-sa-hero__media img { border-radius: var(--radius-lg); width: 100%; object-fit: cover; }

/* ---------- shared ---------- */
.sct-sa-h {
  font-size: clamp(25px, 2.9vw, 37px); letter-spacing: -.03em; line-height: 1.14;
  color: var(--navy); margin: 12px 0 16px; max-width: 26ch;
}

/* ---------- domains ---------- */
.sct-sa-domains {
  background:
    linear-gradient(180deg, rgba(252, 252, 255, .95) 0%, rgba(252, 252, 255, .99) 100%),
    url('/assets/images/specialapps-lab-bench.jpg') center/cover;
}
.sct-sa-domains__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px;
  margin-top: 32px; background: var(--sa-hair);
  border: 1px solid var(--sa-hair); border-radius: var(--radius-md); overflow: hidden;
}
.sct-sa-domain {
  background: #fff; padding: 26px 22px; display: flex; flex-direction: column; gap: 12px;
}
.sct-sa-domain svg { width: 24px; height: 24px; color: var(--sa-violet); }
.sct-sa-domain h3 { font-size: 16.5px; margin: 0; }

/* ---------- constraint matrix ---------- */
.sct-sa-matrix { background: var(--sa-paper); }
.sct-sa-matrix__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
.sct-sa-matrix__list { margin-top: 24px; border-top: 1px solid var(--sa-hair); }
.sct-sa-matrix__list li {
  display: flex; align-items: baseline; gap: 18px; padding: 16px 0;
  border-bottom: 1px solid var(--sa-hair);
  font-size: 17px; font-weight: 600; color: var(--navy);
}
.sct-sa-matrix__num {
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--sa-violet-ink); letter-spacing: .06em; min-width: 24px;
}
.sct-sa-matrix__media img { border-radius: var(--radius-lg); width: 100%; object-fit: cover; }

/* ---------- process strip ---------- */
.sct-sa-process__row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px;
  margin-top: 30px;
}
.sct-sa-step { padding-top: 18px; border-top: 2px solid var(--sa-violet); }
.sct-sa-step__num {
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: .08em; color: var(--sa-violet-ink);
}
.sct-sa-step__label { font-size: 17px; margin: 8px 0 8px; }
.sct-sa-step__note { font-size: 14.5px; line-height: 1.62; color: var(--ink-70); margin: 0; }

/* ---------- spec request ---------- */
.sct-sa-request { background: var(--sa-paper); }
.sct-sa-request__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
.sct-sa-request__list { margin-top: 22px; display: grid; gap: 13px; }
.sct-sa-request__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; color: var(--ink-70); }
.sct-sa-request__list svg { width: 19px; height: 19px; color: var(--sa-violet); margin-top: 3px; }
.sct-sa-request__media img { border-radius: var(--radius-lg); width: 100%; object-fit: cover; }

/* Plain white rather than the cross-page light-blue `--panel-fill` default, to keep the systems
   rail inside this page's white/paper alternation rather than introducing a third, off-brand tint. */
.sct-rail { background: #fff; }

@media (max-width: 860px) {
  .sct-sa-hero__grid, .sct-sa-matrix__grid, .sct-sa-request__grid { grid-template-columns: 1fr; }
}