/* MAVTech house system, shared by every page on this site.
   Chakra Petch for display (the instrument register — it is also the
   face the app loads), Inter for body. #2221A6 is the house blue and
   #19E15C the signal green, spent sparingly: the wordmark dot, a rule
   beside a callout, a confirmed state. Neutrals are biased a few
   degrees toward the blue so nothing reads as default grey. */

:root {
  --brand:      #2221A6;
  --brand-lift: #3B3AC4;
  --brand-tint: #ECECF9;
  --signal:     #19E15C;
  --ink:        #1a1a20;
  --muted:      #55556B;
  --rule:       #DFDFEA;
  --paper:      #FFFFFF;
  --wash:       #F5F5FA;
  --band:       #2221A6;
  --band-ink:   #FFFFFF;
  --band-muted: #C3C3EE;
  --btn-bg:     #2221A6;
  --btn-bg-hi:  #3B3AC4;
  --btn-ink:    #FFFFFF;
  --shadow:     0 1px 2px rgba(26,26,44,.06), 0 12px 32px -12px rgba(26,26,44,.22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand:      #9A99F2;
    --brand-lift: #B4B3FA;
    --brand-tint: #21214A;
    --ink:        #EDEDF3;
    --muted:      #9E9EB4;
    --rule:       #2C2C3E;
    --paper:      #0F0F16;
    --wash:       #171722;
    --band:       #1C1B6E;
    --band-ink:   #FFFFFF;
    --band-muted: #B6B5E6;
    --btn-bg:     #9A99F2;
    --btn-bg-hi:  #B4B3FA;
    --btn-ink:    #14142A;
    --shadow:     0 1px 2px rgba(0,0,0,.5), 0 14px 36px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --brand:      #9A99F2;
  --brand-lift: #B4B3FA;
  --brand-tint: #21214A;
  --ink:        #EDEDF3;
  --muted:      #9E9EB4;
  --rule:       #2C2C3E;
  --paper:      #0F0F16;
  --wash:       #171722;
  --band:       #1C1B6E;
  --band-ink:   #FFFFFF;
  --band-muted: #B6B5E6;
  --btn-bg:     #9A99F2;
  --btn-bg-hi:  #B4B3FA;
  --btn-ink:    #14142A;
  --shadow:     0 1px 2px rgba(0,0,0,.5), 0 14px 36px -14px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}
strong { font-weight: 600; }

/* ── Wordmark and site chrome ─────────────────────────────────────── */

.wordmark {
  font-family: "Chakra Petch", "Trebuchet MS", sans-serif;
  font-size: 1.18rem;
  letter-spacing: .005em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark .wm-b { font-weight: 700; }
.wordmark .wm-l { font-weight: 300; }
.wordmark .wm-d { color: var(--signal); font-weight: 700; }

.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.25rem;
  padding: .85rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
}
.bar nav {
  margin-left: auto;
  display: flex; align-items: center; gap: 1.4rem;
  font-size: .92rem;
}
.bar nav a { color: var(--muted); text-decoration: none; }
.bar nav a:hover { color: var(--ink); }
.bar .btn, .bar nav a.btn {
  color: var(--btn-ink);            /* .bar nav a outranks .btn on its own */
  padding: .5rem .9rem; font-size: .88rem;
}
@media (max-width: 640px) {
  .bar { padding: .75rem 1rem; }
  .bar nav { gap: .9rem; font-size: .85rem; }
  .bar nav .hide-sm { display: none; }
}

.btn {
  display: inline-block;
  background: var(--btn-bg); color: var(--btn-ink);
  font-family: Inter, sans-serif; font-weight: 600; font-size: .98rem;
  padding: .8rem 1.4rem; border: 0; border-radius: 8px;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease;
}
.btn:hover { background: var(--btn-bg-hi); }

.site-foot {
  border-top: 1px solid var(--rule);
  background: var(--wash);
  padding: 3rem 1.5rem;
  color: var(--muted); font-size: .9rem;
}
.site-foot .inner { max-width: 68rem; margin: 0 auto; display: grid; gap: 1rem; }
.site-foot .tagline { margin: .4rem 0 0; }
.site-foot .links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-foot .links a { color: var(--ink); text-decoration: none; }
.site-foot .links a:hover { text-decoration: underline; }
.site-foot .fine { margin: 0; max-width: 44rem; }

/* ── Document pages (privacy, support) ───────────────────────────── */

.wrap { max-width: 46rem; margin: 0 auto; padding: 3rem 1.5rem 5rem; }
.doc-head { border-bottom: 1px solid var(--rule); padding-bottom: 1.5rem; margin-bottom: 2.5rem; }
h1 {
  font-family: "Chakra Petch", "Trebuchet MS", sans-serif;
  font-weight: 600; font-size: clamp(1.8rem, 5vw, 2.4rem);
  letter-spacing: -.015em; margin: 0 0 .4rem; text-wrap: balance;
}
.dateline { color: var(--muted); font-size: .9rem; margin: 0; }
.wrap h2 {
  font-family: "Chakra Petch", "Trebuchet MS", sans-serif;
  font-weight: 600; font-size: 1.2rem; margin: 2.5rem 0 .6rem;
}
.wrap h3 { font-size: 1rem; margin: 1.6rem 0 .4rem; }
.wrap p, .wrap li { color: var(--ink); }
.wrap p { margin: 0 0 1rem; }
.wrap ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.wrap li { margin-bottom: .5rem; }
.lede { font-size: 1.08rem; }
.key {
  background: var(--wash); border-left: 3px solid var(--signal);
  padding: 1rem 1.15rem; margin: 1.5rem 0; border-radius: 0 8px 8px 0;
}
.key p:last-child { margin-bottom: 0; }
table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .94rem; }
th, td { text-align: left; padding: .6rem .8rem .6rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; width: 38%; }
.contact { font-size: 1rem; }
.contact div { margin-bottom: .35rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Legal documents ─────────────────────────────────────────────── */

/* The section numbers live in the markup rather than a CSS counter: the
   agreement refers to them by number (§11 turns on which sections
   survive), so they have to survive a copy-paste too. */
.legal h2 { display: flex; gap: .55rem; align-items: baseline; }
.legal .num { color: var(--muted); font-variant-numeric: tabular-nums; }
.legal .caps { font-size: .95rem; letter-spacing: .012em; }