/* Hallmark · shared base for the Operational-AI pilot set (modern-minimal, brand-locked).
 * NOW PRODUCTION-LINKED: the four solution pages link this for their lifted detail-
 * diagram styling, so it doubles as the shared "figure kit". Panel/line/accent tokens
 * are aligned to the home-page diagram palette (--panel #0e121b · --line .09 · blue
 * accent · warm secondary) so diagrams read identically across home → solution pages.
 * Scoped under `.hl`. */

.hl {
  --hl-paper:   #0b0d12;
  --hl-panel:   #0e121b;  /* = home diagram --panel (was #12151d, a lighter outlier) */
  --hl-panel-2: #141823;  /* subtle elevation over panel */
  --hl-line:    rgba(255, 255, 255, 0.09);
  --hl-line-2:  rgba(255, 255, 255, 0.16);
  --hl-warm:    #e5894b;            /* single secondary: human-in-the-loop / escalation */
  --hl-ink:     var(--fg);
  --hl-ink-2:   var(--muted-75);
  --hl-ink-3:   var(--muted-70);
  --hl-accent:  var(--accent);

  background: var(--hl-paper);
  color: var(--hl-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
/* In production solution pages `.hl` is used only as a token-scope on the detail-
   diagram container, NOT as a full-page surface — so drop its band background and
   let the diagrams sit on the page like the home page. (Throwaway variant pages,
   which have no .rd ancestor, keep the band.) */
.rd .hl { background: transparent; }
.hl .wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 809.98px) { .hl .wrap { padding: 0 20px; } }

/* Type helpers */
.hl-mono {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--hl-ink-3);
}
.hl-mono--a { color: var(--hl-accent); }
.hl-h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 5.4vw, 58px); line-height: 1.04; letter-spacing: -0.025em;
  margin: 0; overflow-wrap: anywhere;
}
.hl-h1 em { font-style: italic; color: var(--hl-accent); }
.hl-h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(22px, 3vw, 32px); line-height: 1.1; letter-spacing: -0.022em; margin: 0;
  overflow-wrap: anywhere;
}
.hl-h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(18px, 2.2vw, 22px); line-height: 1.18; letter-spacing: -0.015em; margin: 0;
}
.hl-lede { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--hl-ink-2); margin: 0; }
.hl-body { font-size: 15px; line-height: 1.6; color: var(--hl-ink-2); margin: 0; }

/* Chips */
.hl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-chip {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--hl-ink-2); padding: 5px 11px; border: 1px solid var(--hl-line); border-radius: 100px;
}

/* Schematic SVG palette (hairline, one accent + one warm; no fake chrome) */
.hl-viz svg { width: 100%; height: auto; display: block; }
.hl-viz .stroke   { stroke: var(--hl-line-2); fill: none; stroke-width: 1; }
.hl-viz .stroke-a { stroke: var(--hl-accent); fill: none; stroke-width: 1.4; }
.hl-viz .stroke-w { stroke: var(--hl-warm); fill: none; stroke-width: 1.4; stroke-dasharray: 3 3; }
.hl-viz .fill-a   { fill: var(--hl-accent); }
.hl-viz .fill-w   { fill: var(--hl-warm); }
.hl-viz .fill-p   { fill: var(--hl-panel-2); stroke: var(--hl-line-2); stroke-width: 1; }
.hl-viz text {
  font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em;
  fill: var(--hl-ink-3); text-transform: uppercase;
}
.hl-viz__cap {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--hl-ink-3); display: block; margin-bottom: 12px;
}

/* Reveal — single orchestrated entrance, transform+opacity only */
.hl-reveal { opacity: 0; transform: translateY(14px); }
.hl-reveal.in { opacity: 1; transform: none; transition: opacity 560ms var(--ease-out-expo), transform 560ms var(--ease-out-expo); }
@media (prefers-reduced-motion: reduce) {
  .hl-reveal, .hl-reveal.in { opacity: 1; transform: none; transition: none; }
}

/* Shared reveal script hook is per-page (small IO block). */