/* Shared web-first pieces for every page (Home direction "Exploded layers").
   Type for heroes, the flat desert landforms, and the labelled cross-section.
   Load after exp-c.css. Page files (mesa.css, security.css) give each page its own layout and motion. */

/* Hero type */
.sx-kicker { margin: 0; color: var(--brand-steel-deep); font: 500 15px/20px var(--font-sans); }
.sx-title { margin: var(--space-4) 0 0; color: var(--ink); font: 600 64px/1.02 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.sx-lead { margin: var(--space-5) 0 0; max-width: 34em; color: var(--ink-secondary); font: 400 19px/30px var(--font-sans); text-wrap: pretty; }
.sx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-6); }
.sx-in { opacity: 0; animation: sx-in 900ms var(--ease-settle) forwards; animation-delay: var(--d, 0ms); }
@keyframes sx-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

/* Flat desert landforms. The rock bands, top to bottom: Mesa agents, built-in oversight, model choice, client memory. */
.sx-land svg { display: block; width: 100%; }
@keyframes fz-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* Labelled cross-section */
.mx-art { display: block; width: 100%; height: auto; overflow: visible; }
.mx-lead { stroke: #9aa3ab; stroke-width: 1; }
.mx-dot { fill: #ffffff; stroke: var(--ink); stroke-width: 1.5; }
.mx-name { fill: var(--ink); font: 600 16px var(--font-display); }
.mx-sub { fill: var(--ink-muted); font: 400 14px var(--font-sans); }

@media (prefers-reduced-motion: reduce) {
  .sx-in { animation: none; opacity: 1; }
  .fz-mesa, .fz-butte, .fz-far, .mx-label, .mx-lead { animation: none !important; opacity: 1; }
}
@media (max-width: 767px) {
  .sx-title { font-size: 40px; }
  .sx-lead { font-size: 17px; line-height: 27px; }
}