/* =====================================================================
   MESA QUANTUM — DESIGN SYSTEM (NEXT) · COMPONENTS
   Primitives shared by all three revamp directions. Everything here
   references SEMANTIC ROLES only (--ds-ink, --ds-accent, …), never the
   raw palette — so swapping the theme file restyles the whole site
   without touching markup. That is the contract.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ds-font);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-body);
  line-height: var(--ds-leading-normal);
  color: var(--ds-ink);
  background: var(--ds-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

:where(a) { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.18em; }
:where(a):hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 3px; border-radius: 2px; }

.ds-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--ds-z-modal);
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-accent); color: var(--ds-on-accent); font-weight: var(--ds-weight-semibold);
}
.ds-skip-link:focus { left: var(--ds-space-4); top: var(--ds-space-4); }

/* ---------- Layout ---------- */
.ds-container { width: 100%; max-width: var(--ds-container); margin-inline: auto; padding-inline: var(--ds-gutter); }
.ds-container--narrow { max-width: var(--ds-container-narrow); }

.ds-section { position: relative; padding-block: var(--ds-section-y); }
.ds-section--alt { background: var(--ds-bg-alt); }
.ds-section--deep { background: var(--ds-surface-deep); color: var(--ds-ink-inverse); }
.ds-section > .ds-container { position: relative; z-index: var(--ds-z-content); }

.ds-grid { display: grid; gap: var(--ds-space-6); }
@media (min-width: 640px)  { .ds-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .ds-grid--sidebar { grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: var(--ds-space-8); } }
@media (min-width: 1100px) { .ds-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Type ---------- */
.ds-eyebrow {
  font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-eyebrow); text-transform: uppercase;
  color: var(--ds-ink-muted); margin: 0 0 var(--ds-space-3);
}
.ds-display, .ds-h1 {
  font-size: var(--ds-text-4xl); font-weight: var(--ds-display-weight, 700);
  line-height: var(--ds-leading-tight); letter-spacing: var(--ds-tracking-display);
  margin: 0 0 var(--ds-space-5); text-wrap: balance;
}
.ds-h2 { font-size: var(--ds-text-3xl); font-weight: var(--ds-weight-semibold); line-height: var(--ds-leading-snug); letter-spacing: var(--ds-tracking-display); margin: 0 0 var(--ds-space-4); text-wrap: balance; }
.ds-h3 { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-semibold); line-height: var(--ds-leading-snug); letter-spacing: var(--ds-tracking-tight); margin: 0 0 var(--ds-space-3); }
.ds-h4 { font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); line-height: var(--ds-leading-snug); margin: 0 0 var(--ds-space-2); }
.ds-lead { font-size: var(--ds-text-lg); line-height: var(--ds-leading-normal); color: var(--ds-ink-muted); max-width: var(--ds-measure-tight); margin: 0 0 var(--ds-space-5); }
.ds-prose { max-width: var(--ds-measure); }
.ds-prose > * + * { margin-top: var(--ds-space-4); }
.ds-muted { color: var(--ds-ink-muted); }
.ds-mono { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); letter-spacing: 0; }

/* ---------- Buttons ---------- */
.ds-btn {
  display: inline-flex; align-items: center; gap: var(--ds-space-2);
  padding: 0.8em 1.5em; border: var(--ds-border) solid transparent;
  border-radius: var(--ds-radius-role, var(--ds-radius));
  font: inherit; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold);
  letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  transition: background-color var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease),
              border-color var(--ds-dur) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease);
}
.ds-btn:active { transform: translateY(1px); }
.ds-btn--primary { background: var(--ds-accent); color: var(--ds-on-accent); }
.ds-btn--primary:hover { background: var(--ds-accent-hover); }
.ds-btn--ghost { background: transparent; color: var(--ds-ink); border-color: var(--ds-line-strong); }
.ds-btn--ghost:hover { border-color: var(--ds-accent); color: var(--ds-accent); }
.ds-btn--quiet { background: var(--ds-accent-quiet); color: var(--ds-accent); }
.ds-btn__arrow { transition: transform var(--ds-dur) var(--ds-ease); }
.ds-btn:hover .ds-btn__arrow { transform: translateX(3px); }

/* ---------- Header ---------- */
.ds-header {
  position: sticky; top: 0; z-index: var(--ds-z-header);
  background: var(--ds-header-bg);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: var(--ds-rule-weight, 1px) solid var(--ds-line);
}
.ds-header__inner { display: flex; align-items: center; gap: var(--ds-space-6); min-height: 72px; }
.ds-header__logo { display: flex; align-items: center; gap: var(--ds-space-3); font-weight: var(--ds-weight-display); letter-spacing: var(--ds-tracking-tight); text-decoration: none; }
.ds-header__logo img, .ds-header__logo svg { height: 28px; width: auto; }
/* The v1 wordmark is dark artwork; on a dark ground it disappears. Themes that use a
   dark ground set --ds-logo-filter to render it as a solid light mark. Replace this
   with a real light-variant asset when brand supplies one. */
.ds-header__logo img { filter: var(--ds-logo-filter, none); }
.ds-footer .ds-header__logo img { filter: var(--ds-logo-filter-footer, brightness(0) invert(1)); }
.ds-nav { display: none; margin-inline-start: auto; align-items: center; gap: var(--ds-space-5); }
@media (min-width: 900px) { .ds-nav { display: flex; } }
.ds-nav a:not(.ds-btn) { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); text-decoration: none; color: var(--ds-ink-muted); transition: color var(--ds-dur) var(--ds-ease); }
.ds-nav a:not(.ds-btn):hover, .ds-nav a:not(.ds-btn)[aria-current="page"] { color: var(--ds-ink); }
.ds-nav__item { position: relative; }
.ds-nav__panel {
  position: absolute; top: calc(100% + 12px); inset-inline-start: calc(-1 * var(--ds-space-4));
  min-width: 260px; padding: var(--ds-space-4);
  background: var(--ds-surface); border: var(--ds-border) solid var(--ds-line);
  border-radius: var(--ds-radius-role, var(--ds-radius)); box-shadow: var(--ds-shadow);
  display: grid; gap: var(--ds-space-2);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease), visibility var(--ds-dur);
}
.ds-nav__item:hover .ds-nav__panel,
.ds-nav__item:focus-within .ds-nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------- Hero ---------- */
.ds-hero { position: relative; overflow: hidden; padding-block: clamp(4rem, 3rem + 8vw, 11rem); }
.ds-hero__inner { position: relative; z-index: var(--ds-z-content); max-width: min(100%, 62rem); }
.ds-hero__sub { font-size: var(--ds-text-lg); color: var(--ds-ink-muted); max-width: 48ch; margin: 0 0 var(--ds-space-6); }
.ds-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); }

/* ---------- Cards ---------- */
.ds-card {
  position: relative; display: flex; flex-direction: column; gap: var(--ds-space-3);
  padding: var(--ds-space-5);
  background: var(--ds-surface);
  border: var(--ds-border) solid var(--ds-line);
  border-radius: var(--ds-radius-role, var(--ds-radius));
  transition: border-color var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease);
}
.ds-card:hover { border-color: var(--ds-accent); }
.ds-card--link:hover { transform: translateY(-2px); }
.ds-card__meta { font-size: var(--ds-text-xs); letter-spacing: var(--ds-tracking-eyebrow); text-transform: uppercase; color: var(--ds-ink-faint); }
.ds-card__tags { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-top: auto; padding-top: var(--ds-space-3); }
.ds-tag {
  font-size: var(--ds-text-xs); padding: 0.25em 0.7em;
  border: var(--ds-border) solid var(--ds-line); border-radius: var(--ds-radius-pill);
  color: var(--ds-ink-muted); white-space: nowrap;
}

/* ---------- Stats ---------- */
.ds-stats { display: grid; gap: var(--ds-space-5); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ds-stat__value { font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-display); letter-spacing: var(--ds-tracking-display); line-height: 1; }
.ds-stat__label { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); margin-top: var(--ds-space-2); }

/* ---------- Partner / credibility row ---------- */
.ds-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-6) var(--ds-space-7); }
.ds-logos__item { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); letter-spacing: 0.02em; color: var(--ds-ink-faint); }

/* ---------- Rule ---------- */
.ds-rule { height: var(--ds-rule-weight, 1px); background: var(--ds-line); border: 0; margin-block: var(--ds-space-6); }

/* ---------- Footer ---------- */
.ds-footer { background: var(--ds-footer-bg); color: color-mix(in srgb, #fff 78%, transparent); padding-block: var(--ds-space-8) var(--ds-space-6); }
.ds-footer a { color: inherit; text-decoration: none; }
.ds-footer a:hover { color: #fff; }
.ds-footer__cols { display: grid; gap: var(--ds-space-6); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ds-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--ds-space-4); justify-content: space-between; margin-top: var(--ds-space-7); padding-top: var(--ds-space-5); border-top: 1px solid color-mix(in srgb, #fff 14%, transparent); font-size: var(--ds-text-xs); }

/* ---------- Utility ---------- */
.ds-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* NOTE: .ds-visually-hidden is for genuine screen-reader-only labels.
   It is NOT a place to hide keyword text to satisfy a check — that was
   a documented cheat in the reference build and the audit looks for it. */