/* ===========================================================================
   Uhambo Atlas Academy — public marketing site (atlas-academy.co.za)
   ---------------------------------------------------------------------------
   This file is a LAYER over ../uaa.css. It declares no colours of its own:
   every value below resolves through the house design tokens in the single
   :root block of uaa.css, which is also the per-tenant white-label theme hook
   (§12). Re-declare those tokens and this whole site re-brands — the same
   mechanism the product uses, demonstrated on the front door.

   House CSP is default-src 'self' / style-src 'self': all styling lives in
   .css files, no style= attributes, no inline <style>, no remote fonts.
   =========================================================================== */

:root {
  --mk-max: 74rem;
  --mk-max-narrow: 46rem;
  --mk-gutter: 1.5rem;
  --mk-section-y: 4.5rem;
}

/* ---------------------------------------------------------------- shell --- */

.site-body { overflow-x: hidden; }

/* uaa.css constrains <main>; the marketing site runs full-bleed sections and
   constrains their direct children instead, so alternating bands can span the
   viewport without a wrapper div per section. */
.site-body main {
  max-width: none;
  margin: 0;
  padding: 0;
}

.mk-section {
  padding: var(--mk-section-y) var(--mk-gutter);
  border-top: 1px solid var(--uaa-line);
}
.mk-section > * {
  max-width: var(--mk-max);
  margin-left: auto;
  margin-right: auto;
}
.mk-section-alt { background: var(--uaa-surface-2); }

/* An inverted band, themed purely by re-declaring the house tokens in scope —
   exactly how a tenant theme works (§12). */
.mk-section-dark {
  --uaa-paper: #221E17;
  --uaa-surface: #2B261D;
  --uaa-surface-2: #322C22;
  --uaa-ink: #F5F0E6;
  --uaa-ink-soft: #BCB19D;
  --uaa-line: #443D30;
  --uaa-accent: #D07B72;
  --uaa-accent-soft: #341D18;
  --uaa-on-accent: #191611;
  background: var(--uaa-paper);
  color: var(--uaa-ink);
  border-top-color: var(--uaa-line);
}

/* ---------------------------------------------------------------- header --- */

.mk-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--uaa-surface);
  border-bottom: 1px solid var(--uaa-line);
}
/* iOS 12 REACH (see scripts/lint-legacy-css.mjs): flexbox `gap` is Safari 14.5+.
   Wrapping flex rows below use padding/margin compensation instead; grid `gap`
   (Safari 10.1) is left alone. Here the container keeps `margin: 0 auto`, so the
   children's 0.625rem is absorbed by shrinking the padding rather than by a
   negative margin — box-sizing is border-box, so the outer box is unchanged. */
.mk-header-inner {
  max-width: var(--mk-max);
  margin: 0 auto;
  padding: 0.075rem calc(var(--mk-gutter) - 0.625rem);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.mk-header-inner > * { margin: 0.625rem; }
.mk-brand {
  display: inline-flex;
  align-items: center;
  color: var(--uaa-ink);
  text-decoration: none;
  flex: 0 0 auto;
}
.mk-brand > * + * { margin-left: 0.6rem; }
.mk-brand:hover, .mk-brand:focus { text-decoration: none; }
.mk-mark { display: block; flex: 0 0 auto; }
/* The inline "A" plate these styled is gone — the brandmark is logo-mark-solid.svg now.
   Removed rather than left dead, so nobody restores the mark they describe. */

.mk-nav {
  display: flex;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.mk-nav > * + * { margin-left: 0.15rem; }
.mk-nav a {
  color: var(--uaa-ink-soft);
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.35rem 0.6rem;
  border-radius: var(--uaa-radius-sm);
  white-space: nowrap;
  text-decoration: none;
}
.mk-nav a:hover, .mk-nav a:focus { color: var(--uaa-accent); background: var(--uaa-accent-soft); text-decoration: none; }
.mk-nav a[aria-current="page"] { color: var(--uaa-accent); background: var(--uaa-accent-soft); }
.mk-header-cta { flex: 0 0 auto; text-decoration: none; }
.mk-header-cta:hover { text-decoration: none; }

/* ------------------------------------------------------------------ hero --- */

.mk-hero {
  max-width: var(--mk-max);
  margin: 0 auto;
  padding: 3.75rem var(--mk-gutter) 3rem;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 62rem) {
  .mk-hero { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3.5rem; }
}
.mk-hero h1 {
  font-size: clamp(1.9rem, 1.15rem + 2.6vw, 3.05rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0.35rem 0 0;
  max-width: 22ch;
}
.mk-hero .accent-rule { margin: 1.25rem 0 1.35rem; }

.mk-eyebrow {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--uaa-accent);
}
.mk-lede {
  font-size: 1.08rem;
  color: var(--uaa-ink-soft);
  margin: 0 0 1.25rem;
  max-width: 62ch;
}
.mk-lede strong { color: var(--uaa-ink); }
.mk-lede-narrow { max-width: var(--mk-max-narrow); }

/* Wrapping row. The row gap rides on the children's block-END margin only — a
   block-start margin would survive the container's collapsed margin and push the
   strip down. 1.1 + 0.4 = the original 1.5rem below. */
.mk-claim-strip {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.2rem 1.1rem;
}
.mk-claim-strip > * { margin: 0 0.2rem 0.4rem; }

.mk-honesty {
  background: var(--uaa-surface);
  border: 1px solid var(--uaa-line);
  border-left: 4px solid var(--uaa-accent);
  border-radius: var(--uaa-radius);
  box-shadow: var(--uaa-shadow);
  padding: 1.35rem 1.5rem;
}
.mk-honesty-h {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--uaa-ink-soft);
  margin: 0 0 0.75rem;
}
.mk-honesty p { margin: 0 0 0.8rem; font-size: 0.95rem; }
.mk-honesty p:last-child { margin-bottom: 0; }

.mk-fineprint {
  color: var(--uaa-ink-soft);
  font-size: 0.82rem;
  margin: 0.75rem 0 0;
}

/* --------------------------------------------------- evidence chain band --- */

.mk-chain-band {
  background: var(--uaa-surface);
  border-top: 1px solid var(--uaa-line);
  border-bottom: 1px solid var(--uaa-line);
  padding: 1.5rem var(--mk-gutter);
}
.mk-chain-scroll {
  max-width: var(--mk-max);
  margin: 0 auto;
  overflow-x: auto;
}
.mk-chain {
  display: block;
  width: 100%;
  min-width: 46rem;
  height: auto;
  font-family: var(--uaa-font);
}
.mk-chain-node { fill: var(--uaa-surface-2); stroke: var(--uaa-line); stroke-width: 1; }
.mk-chain-node-end { fill: var(--uaa-accent-soft); stroke: var(--uaa-accent); }
.mk-chain-t { fill: var(--uaa-ink); font-size: 14px; font-weight: 700; text-anchor: middle; }
.mk-chain-s { fill: var(--uaa-ink-soft); font-size: 11.5px; text-anchor: middle; }
.mk-chain-t-end, .mk-chain-s-end { fill: var(--uaa-accent); }
.mk-chain-arrow { stroke: var(--uaa-line); stroke-width: 1.5; fill: none; }
.mk-chain-head { fill: var(--uaa-accent); }

/* -------------------------------------------------------------- headings --- */

.mk-section h2 {
  font-size: clamp(1.45rem, 1.1rem + 1.25vw, 2.1rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0.5rem 0 1rem;
  max-width: 26ch;
}
.mk-section h3 {
  font-size: 1.02rem;
  margin: 0 0 0.5rem;
  letter-spacing: -0.005em;
}
.mk-subhead {
  font-size: 0.78rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--uaa-ink-soft);
  margin: 2.5rem 0 1rem !important;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--uaa-line);
}

/* --------------------------------------------------------------- columns --- */

.mk-cols {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 2rem;
}
@media (min-width: 54rem) {
  .mk-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .mk-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mk-col p { margin: 0 0 0.8rem; font-size: 0.94rem; color: var(--uaa-ink-soft); }
.mk-col p strong { color: var(--uaa-ink); }
.mk-col h3 { color: var(--uaa-ink); }

/* ----------------------------------------------------------------- lists --- */

.mk-list {
  margin: 0 0 0.9rem;
  padding-left: 1.1rem;
  font-size: 0.94rem;
  color: var(--uaa-ink-soft);
}
.mk-list li { margin-bottom: 0.5rem; }
.mk-list strong { color: var(--uaa-ink); }
.mk-list-gap li { margin-bottom: 0.55rem; }

.mk-list-tick { list-style: none; padding-left: 0; }
.mk-list-tick li {
  position: relative;
  padding-left: 1.5rem;
}
.mk-list-tick li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--uaa-pass);
  font-weight: 700;
}

.mk-inline-list {
  list-style: none;
  margin: 1rem -0.2rem -0.4rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.mk-inline-list > li { margin: 0 0.2rem 0.4rem; }
.mk-inline-list li {
  background: var(--uaa-surface-2);
  border: 1px solid var(--uaa-line);
  border-radius: 999px;
  font-size: 0.78rem;
  padding: 0.22rem 0.7rem;
  color: var(--uaa-ink-soft);
}

.mk-numbered {
  margin: 0 0 0.5rem;
  padding-left: 1.3rem;
  font-size: 0.94rem;
  color: var(--uaa-ink-soft);
}
.mk-numbered li { margin-bottom: 0.6rem; }
.mk-numbered strong { color: var(--uaa-ink); }

.mk-note {
  border-left: 3px solid var(--uaa-line);
  padding: 0.15rem 0 0.15rem 0.9rem;
  color: var(--uaa-ink-soft);
  font-size: 0.9rem;
  margin: 1rem 0 0;
}
.mk-note-wide { margin-top: 2rem; max-width: 70ch; }

/* ------------------------------------------------------- compliance grid --- */

.mk-cardgrid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 2rem;
}
@media (min-width: 46rem) { .mk-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .mk-cardgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.mk-card {
  background: var(--uaa-surface);
  border: 1px solid var(--uaa-line);
  border-radius: var(--uaa-radius);
  box-shadow: var(--uaa-shadow);
  padding: 1.15rem 1.2rem 1.3rem;
}
.mk-card-num {
  font-family: var(--uaa-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--uaa-accent);
  margin: 0 0 0.55rem;
}
.mk-card h3 { font-size: 0.98rem; margin: 0 0 0.5rem; }
.mk-card p { margin: 0; font-size: 0.89rem; color: var(--uaa-ink-soft); }
.mk-card p strong { color: var(--uaa-ink); }

/* ------------------------------------------------------------- audit pack --- */

.mk-audit { background: var(--uaa-accent-soft); }
.mk-audit-body {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1.75rem;
}
@media (min-width: 54rem) {
  .mk-audit-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
}
.mk-audit-what, .mk-audit-how {
  background: var(--uaa-surface);
  border: 1px solid var(--uaa-line);
  border-radius: var(--uaa-radius);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--uaa-shadow);
}

.mk-defs { margin: 0; font-size: 0.92rem; }
.mk-defs dt {
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--uaa-accent);
  margin-top: 0.85rem;
}
.mk-defs dt:first-child { margin-top: 0; }
.mk-defs dd { margin: 0.2rem 0 0; color: var(--uaa-ink-soft); }
.mk-defs dd strong { color: var(--uaa-ink); }

/* -------------------------------------------------------------- acceptance --- */

.mk-acceptance {
  background: var(--uaa-surface);
  border: 1px solid var(--uaa-line);
  border-left: 4px solid var(--uaa-pass);
  border-radius: var(--uaa-radius);
  padding: 1.35rem 1.5rem;
  margin-top: 1.5rem;
  box-shadow: var(--uaa-shadow);
}
.mk-acceptance p { margin: 0; font-size: 0.96rem; color: var(--uaa-ink-soft); }
.mk-acceptance p strong { color: var(--uaa-ink); }

/* ------------------------------------------------------------------ tables --- */

.mk-table-wrap {
  overflow-x: auto;
  margin-top: 1.75rem;
  border: 1px solid var(--uaa-line);
  border-radius: var(--uaa-radius);
  background: var(--uaa-surface);
}
.mk-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 40rem;
  font-size: 0.9rem;
}
.mk-table caption {
  text-align: left;
  color: var(--uaa-ink-soft);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.9rem 1rem 0.6rem;
}
.mk-table th, .mk-table td {
  text-align: left;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--uaa-line);
  vertical-align: top;
  color: var(--uaa-ink-soft);
}
.mk-table thead th {
  color: var(--uaa-ink);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--uaa-surface-2);
  border-bottom: 1px solid var(--uaa-line);
}
.mk-table tbody th[scope="row"] { color: var(--uaa-ink); font-weight: 700; white-space: nowrap; }
.mk-table tbody tr:last-child th, .mk-table tbody tr:last-child td { border-bottom: 0; }
.mk-table td.num { font-variant-numeric: tabular-nums; }
.mk-table-price tbody td:last-child { color: var(--uaa-ink); font-weight: 600; }

.mk-rung {
  display: inline-block;
  font-family: var(--uaa-mono);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: var(--uaa-radius-sm);
  border: 1px solid var(--uaa-line);
  background: var(--uaa-surface-2);
  color: var(--uaa-ink-soft);
}
.mk-rung-0 { border-color: var(--uaa-pass); color: var(--uaa-pass); background: var(--uaa-pass-bg); }
.mk-rung-1 { border-color: var(--uaa-pass); color: var(--uaa-pass); background: var(--uaa-pass-bg); }
.mk-rung-2 { border-color: var(--uaa-accent); color: var(--uaa-accent); background: var(--uaa-accent-soft); }
.mk-rung-3 { border-color: var(--uaa-amber); color: var(--uaa-amber); background: var(--uaa-amber-bg); }
.mk-rung-4 { border-color: var(--uaa-amber); color: var(--uaa-amber); background: var(--uaa-amber-bg); }

/* --------------------------------------------------- regulatory boundary --- */

.mk-boundary {
  margin-top: 2rem;
  background: var(--uaa-amber-bg);
  border: 1px solid var(--uaa-amber);
  border-left-width: 5px;
  border-radius: var(--uaa-radius);
  padding: 1.35rem 1.5rem;
}
.mk-boundary h3 {
  color: var(--uaa-amber);
  font-size: 0.8rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.mk-boundary p { margin: 0 0 0.75rem; font-size: 0.95rem; color: var(--uaa-ink); }
.mk-boundary p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- verticals --- */

.mk-verticals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 46rem) { .mk-verticals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-verticals li {
  border-left: 3px solid var(--uaa-accent);
  padding: 0.15rem 0 0.15rem 0.9rem;
  font-size: 0.91rem;
  color: var(--uaa-ink-soft);
}
.mk-verticals strong { color: var(--uaa-ink); }

/* ---------------------------------------------------------------- security --- */

.mk-honest-panel {
  background: var(--uaa-surface);
  border: 1px solid var(--uaa-line);
  border-radius: var(--uaa-radius);
  padding: 1.4rem 1.5rem;
  margin-top: 1.5rem;
}
.mk-honest-panel p { color: var(--uaa-ink-soft); font-size: 0.96rem; margin: 0 0 0.9rem; }
.mk-honest-panel p strong { color: var(--uaa-ink); }

.mk-layers {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: layer;
  border-top: 1px solid var(--uaa-line);
}
.mk-layers li {
  border-bottom: 1px solid var(--uaa-line);
  padding: 0.9rem 0;
  font-size: 0.93rem;
  color: var(--uaa-ink-soft);
}
.mk-layers li strong { color: var(--uaa-ink); }
.mk-layer-tag {
  display: inline-block;
  font-family: var(--uaa-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--uaa-accent);
  background: var(--uaa-accent-soft);
  border: 1px solid var(--uaa-accent);
  border-radius: var(--uaa-radius-sm);
  padding: 0.12rem 0.5rem;
  margin-right: 0.6rem;
  white-space: nowrap;
}

/* -------------------------------------------------------------- roadmap --- */

.mk-roadmap-panel {
  margin-top: 2rem;
  background: var(--uaa-surface);
  border: 1px dashed var(--uaa-line);
  border-radius: var(--uaa-radius);
  padding: 1.35rem 1.5rem;
}
.mk-roadmap-panel p { color: var(--uaa-ink-soft); font-size: 0.94rem; margin: 0 0 0.85rem; }
.mk-roadmap-panel p:last-child { margin-bottom: 0; }
.mk-roadmap-panel p strong { color: var(--uaa-ink); }
.mk-roadmap-panel .badge { margin-right: 0.5rem; }

/* -------------------------------------------------------------- partner --- */

.mk-partner {
  background: var(--uaa-surface);
  border: 1px solid var(--uaa-line);
  border-radius: var(--uaa-radius);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--uaa-shadow);
  max-width: 72ch;
}
.mk-partner p { color: var(--uaa-ink-soft); font-size: 0.96rem; margin: 0 0 0.9rem; }
.mk-partner p strong { color: var(--uaa-ink); }

/* ------------------------------------------------------------------ demo --- */

.mk-demo-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1.75rem;
}
@media (min-width: 58rem) {
  .mk-demo-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 2.5rem; }
}
.mk-form {
  background: var(--uaa-surface);
  border: 1px solid var(--uaa-line);
  border-radius: var(--uaa-radius);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--uaa-shadow);
}
.mk-consent { margin-top: 0.35rem; }
.mk-check {
  display: flex;
  align-items: flex-start;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--uaa-ink-soft);
  line-height: 1.45;
}
.mk-check > * + * { margin-left: 0.6rem; }
.mk-check input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  margin-top: 0.12rem;
}
.mk-form .status-line { font-size: 0.9rem; }
.mk-form .status-line.is-ok { font-weight: 600; }

.mk-demo-aside h3 { margin-top: 1.4rem; }
.mk-demo-aside h3:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- footer --- */

.mk-footer {
  background: var(--uaa-surface);
  border-top: 1px solid var(--uaa-line);
  margin-top: 0;
}
.mk-footer-inner {
  max-width: var(--mk-max);
  margin: 0 auto;
  padding: 2.75rem var(--mk-gutter) 1.75rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 54rem) {
  .mk-footer-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); }
}
.mk-footer-brand p {
  color: var(--uaa-ink-soft);
  font-size: 0.86rem;
  margin: 0.7rem 0 0;
  max-width: 34ch;
}
.mk-footer-nav {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.mk-footer-nav h2 {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--uaa-ink-soft);
  margin: 0 0 0.6rem;
}
.mk-footer-nav ul { list-style: none; margin: 0; padding: 0; }
.mk-footer-nav li { margin-bottom: 0.35rem; }
.mk-footer-nav a { font-size: 0.88rem; color: var(--uaa-ink); text-decoration: none; }
.mk-footer-nav a:hover, .mk-footer-nav a:focus { color: var(--uaa-accent); text-decoration: underline; }

.mk-footer-legal {
  border-top: 1px solid var(--uaa-line);
}
.mk-footer-legal p {
  max-width: var(--mk-max);
  margin: 0 auto;
  padding: 0.75rem var(--mk-gutter);
  color: var(--uaa-ink-soft);
  font-size: 0.78rem;
}
.mk-footer-legal p:first-child { padding-top: 1.1rem; }
.mk-footer-legal p:last-child { padding-bottom: 1.75rem; }

/* ------------------------------------------------------ privacy document --- */

.mk-doc {
  max-width: 52rem;
  margin: 0 auto;
  padding: 3rem var(--mk-gutter) 3.5rem;
}
.mk-doc h1 {
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem);
  line-height: 1.15;
  margin: 0.4rem 0 1rem;
}
.mk-doc section { margin-top: 2.5rem; }
.mk-doc h2 {
  font-size: 1.12rem;
  margin: 0 0 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--uaa-line);
}
.mk-doc p { font-size: 0.95rem; color: var(--uaa-ink-soft); margin: 0 0 0.9rem; }
.mk-doc p strong { color: var(--uaa-ink); }
.mk-doc .mk-table-wrap { margin-top: 1.25rem; }
.mk-doc .mk-defs { margin-bottom: 1.25rem; }

/* ------------------------------------------------------------ motion --- */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------- print --- */

@media print {
  .mk-header, .mk-header-cta, .mk-form, .mk-chain-band { display: none; }
  .mk-section, .mk-section-alt, .mk-section-dark { background: #fff; color: #000; border-top: 1px solid #999; }
}

/* ============================================================ SIGN IN =====
   The portal door. It reuses .mk-form and the field vocabulary above so the
   sign-in panel and the demo form are visibly the same component — a login that
   looks bolted on invites the question of whether it really is. */

.mk-header-signin {
  align-self: center;
  margin-right: 0.9rem;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--uaa-ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.mk-header-signin:hover,
.mk-header-signin:focus { color: var(--uaa-accent); text-decoration: underline; }

/* The supplied lockup, cropped above the tagline. It carries its own colour, so it does not
   take the accent token — this IS the artwork, not a tinted glyph. */
.mk-brand .mk-logo {
  display: block;
  width: auto;
  height: 40px;
  flex: 0 0 auto;
}
@media (max-width: 40rem) {
  .mk-brand .mk-logo { height: 34px; }
}
/* Dark ground: the lockup exists in one (light) version, so it sits on its own plate rather
   than being repainted. Repainting somebody's finished artwork to fit a theme is how a brand
   ends up with two logos that are almost the same. */
@media (prefers-color-scheme: dark) {
  .mk-brand .mk-logo {
    /* The LIGHT paper specifically, which --uaa-paper is not once the dark tokens apply. */
    --uaa-logo-plate: #FAF8F4;
    background: var(--uaa-logo-plate);
    border-radius: 6px;
    padding: 3px 7px;
  }
}

.mk-signin-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1.75rem;
}
@media (min-width: 58rem) {
  .mk-signin-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.5rem; }
}
.mk-signin-form { align-self: start; }
.mk-signin-aside { align-self: start; }
.mk-signin-aside h3 {
  margin: 0 0 0.7rem;
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.mk-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.4rem;
}
/* Not `gap`: flexbox gap is Safari 14.5+ and this platform holds an iOS 12 floor. */
.mk-form-actions > * + * { margin-left: 0.6rem; }
.field-optional {
  font-weight: 400;
  color: var(--uaa-ink-3);
  text-transform: none;
  letter-spacing: 0;
}
.btn-quiet {
  background: transparent;
  border: 1px solid var(--uaa-line);
  color: var(--uaa-ink-2);
}
.btn-quiet:hover,
.btn-quiet:focus { border-color: var(--uaa-accent); color: var(--uaa-accent); }

/* Status line for the sign-in result. Errors from login.js are long and specific by
   design — they name the cause — so this wraps rather than truncating. */
.form-status {
  margin: 0.9rem 0 0;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--uaa-ink-2);
  min-height: 1.2em;
}
.form-status.is-error { color: var(--uaa-fail); }

.mk-tick-list { margin: 0; padding-left: 1.1rem; }
.mk-tick-list li { margin-bottom: 0.45rem; line-height: 1.55; }

/* NAVIGATION STAYS VISIBLE AT EVERY WIDTH.
   This used to hide .mk-nav below 75rem, on the reasoning that the links are in-page anchors
   and "cost a visitor nothing they cannot get by scrolling". That was wrong twice over: 75rem
   is 1200px, so it hid the primary navigation on most laptop windows, not just phones — and
   navigation you have to scroll the page to discover is not navigation. Below the one-row
   breakpoint the nav moves to its own full-width row and scrolls sideways if it has to, which
   keeps all seven links one tap away on a phone. */
@media (max-width: 75rem) {
  .mk-header-inner { flex-wrap: wrap; }
  .mk-brand { flex: 1 1 auto; min-width: 0; }
  .mk-header-signin { order: 2; }
  .mk-header-cta { order: 3; }
  .mk-nav {
    order: 4;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* The strip scrolls; the page must not. Without this the widest nav row sets the document
       width and the whole site gains a horizontal scrollbar. */
    max-width: 100%;
    padding-bottom: 0.15rem;
  }
  /* Chrome/Safari show a scrollbar over the links on hover; the row is obviously scrollable
     from the clipped last item, so hide the bar rather than let it cover a tap target. */
  .mk-nav::-webkit-scrollbar { height: 0; }
  .mk-nav a { flex: 0 0 auto; white-space: nowrap; }
}
/* Between the breakpoint and comfortable, the seven nav items need every pixel: trim their
   padding rather than letting the row wrap and drop the buttons onto a ragged second line. */
@media (min-width: 75.01rem) and (max-width: 86rem) {
  .mk-nav a { padding-left: 0.42rem; padding-right: 0.42rem; }
  .mk-header-signin { margin-right: 0.5rem; }
}

/* On a phone the brand, "Sign in" and the demo button together overflow 390px, so the button
   wrapped onto a row of its own and the header became three rows deep. Trimming the button —
   not hiding anything — puts them back on one line and gives the page back ~60px above the
   fold, which on a phone is most of a headline. */
@media (max-width: 30rem) {
  .mk-header-inner > * { margin: 0.4rem 0.45rem; }
  .mk-header-cta { padding: 0.5rem 0.75rem; font-size: 0.84rem; }
  .mk-header-signin { margin-right: 0.1rem; font-size: 0.84rem; }
  .mk-brand .mk-logo { height: 30px; }
}

/* Jumping to a section put its eyebrow behind the sticky header — the heading cleared it, the
   small label above the heading did not. Offset every jump target by the header's height.
   `scroll-snap-margin-top` is the old spelling Safari 11–14 understands; on anything older the
   offset simply does not apply and the heading is still visible, which is a soft landing. */
.mk-section,
.mk-hero {
  scroll-snap-margin-top: 76px;
  scroll-margin-top: 76px;
}
@media (max-width: 75rem) {
  /* The header is two rows below this width. */
  .mk-section,
  .mk-hero {
    scroll-snap-margin-top: 128px;
    scroll-margin-top: 128px;
  }
}

/* ================================================= SITE DIRECTORY (index) ===
   A nav row is not a site map. On a multi-page site the front door has to say what the other
   pages are FOR, or the only way to discover them is to read seven one-word labels. */

.mk-dir-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1.6rem;
}
.mk-dir-grid > * { margin-bottom: 0.9rem; }
@media (min-width: 42rem) {
  .mk-dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Not `gap`: flexbox and grid gap are Safari 14.5+ and this platform holds an iOS 12 floor. */
  .mk-dir-grid > * { margin-right: 0.9rem; }
}
@media (min-width: 62rem) {
  .mk-dir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mk-dir-card {
  display: block;
  padding: 1.05rem 1.15rem;
  background: var(--uaa-surface);
  border: 1px solid var(--uaa-line);
  border-radius: var(--uaa-radius);
  text-decoration: none;
  color: inherit;
}
.mk-dir-card:hover,
.mk-dir-card:focus {
  border-color: var(--uaa-accent);
  text-decoration: none;
}
.mk-dir-title {
  display: block;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--uaa-accent);
  margin-bottom: 0.3rem;
}
.mk-dir-blurb {
  display: block;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--uaa-ink-2);
}