/* ---------------------------------------------------------------------------
   Design tokens.

   Three independent user preferences, each a data-attribute on <html>:
     data-theme      light | dark        (unset = follow the OS)
     data-cvd        protanopia | deuteranopia | tritanopia | achromatopsia
     data-font-scale 1 | 2 | 3 | 4       (unset = 1)

   Colour is never the only signal. The two pricing tiers are also separated by
   heading text, border style, and an explicit label, so they stay legible under
   achromatopsia and in print.
--------------------------------------------------------------------------- */

:root {
  --bg: #faf8f5;
  --bg-alt: #f1eae0;
  --surface: #ffffff;
  --ink: #1a1a17;
  --ink-soft: #4a4a45;
  --muted: #6f6e68;
  --border: #ddddd6;

  /* The accent pair. Everything below only ever re-points these two. */
  --accent-a: #085041;   /* Founders / primary   */
  --accent-b: #b8442a;   /* Sovereign / enterprise */
  --accent-a-ink: #ffffff;
  --accent-b-ink: #ffffff;

  --focus: #0b63b0;
  --radius: 8px;
  --max: 67.5rem;
  --fs: 1;
}

/* Dark, by OS preference — unless the reader has explicitly chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121211;
    --bg-alt: #1b1a17;
    --surface: #1e1d1a;
    --ink: #f2f0eb;
    --ink-soft: #cfccc4;
    --muted: #a5a39b;
    --border: #35342e;
    --accent-a: #4fb298;
    --accent-b: #f0876a;
    --accent-a-ink: #0c1a16;
    --accent-b-ink: #26100a;
    --focus: #6cb6ff;
  }
}

/* Dark, chosen explicitly. Must repeat — a media block cannot be forced on. */
:root[data-theme="dark"] {
  --bg: #121211;
  --bg-alt: #1b1a17;
  --surface: #1e1d1a;
  --ink: #f2f0eb;
  --ink-soft: #cfccc4;
  --muted: #a5a39b;
  --border: #35342e;
  --accent-a: #4fb298;
  --accent-b: #f0876a;
  --accent-a-ink: #0c1a16;
  --accent-b-ink: #26100a;
  --focus: #6cb6ff;
}

/* --- Colour-vision palettes ------------------------------------------------
   Green/orange is the worst possible pair for red-green deficiency: both
   collapse toward the same muddy yellow. Blue/amber survives protanopia and
   deuteranopia. Tritanopia loses blue-yellow instead, so it gets red/blue.
   Achromatopsia drops hue entirely and separates by lightness alone.
-------------------------------------------------------------------------- */

:root[data-cvd="protanopia"],
:root[data-cvd="deuteranopia"] {
  --accent-a: #14456f;
  --accent-b: #9a6300;
  --accent-a-ink: #ffffff;
  --accent-b-ink: #ffffff;
}
:root[data-cvd="protanopia"][data-theme="dark"],
:root[data-cvd="deuteranopia"][data-theme="dark"] {
  --accent-a: #7fb4e6;
  --accent-b: #e0a437;
  --accent-a-ink: #0a1a28;
  --accent-b-ink: #241900;
}

:root[data-cvd="tritanopia"] {
  --accent-a: #1f4e9c;
  --accent-b: #a93226;
}
:root[data-cvd="tritanopia"][data-theme="dark"] {
  --accent-a: #86adf0;
  --accent-b: #f08a7d;
  --accent-a-ink: #08152c;
  --accent-b-ink: #2a0b07;
}

:root[data-cvd="achromatopsia"] {
  --accent-a: #1f1f1c;
  --accent-b: #78766f;
  --accent-a-ink: #ffffff;
  --accent-b-ink: #ffffff;
}
:root[data-cvd="achromatopsia"][data-theme="dark"] {
  --accent-a: #f2f0eb;
  --accent-b: #7f7d76;
  --accent-a-ink: #121211;
  --accent-b-ink: #121211;
}

/* --- Text scale (WCAG 1.4.4) --------------------------------------------- */
:root[data-font-scale="2"] { --fs: 1.125; }
:root[data-font-scale="3"] { --fs: 1.25; }
:root[data-font-scale="4"] { --fs: 1.5; }

* { box-sizing: border-box; }

html {
  font-size: calc(100% * var(--fs));
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-a); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: 0.75rem 1rem;
  z-index: 100;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }
.container--narrow { max-width: 40rem; }

.section { padding: 6rem 0; }
.section--alt { background: var(--bg-alt); }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 1rem; font-weight: 600; }
h1 { font-size: 3.25rem; }
h2 { font-size: 2.125rem; }
h3 { font-size: 1.1875rem; }

.lede { color: var(--ink-soft); font-size: 1.125rem; max-width: 40rem; }
.section-intro { color: var(--ink-soft); max-width: 42rem; margin-bottom: 3rem; }

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.75rem;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
}
.nav__brand { font-weight: 600; letter-spacing: 0.06em; text-decoration: none; color: var(--ink); }
.nav__links { display: flex; gap: 1.5rem; font-size: 0.875rem; flex-wrap: wrap; }
.nav__links a { color: var(--muted); text-decoration: none; }
.nav__links a:hover { color: var(--ink); text-decoration: underline; }
.nav__actions { display: flex; gap: 0.5rem; align-items: center; }

/* Hero */
.hero { padding: 7.5rem 0 5.5rem; }
.hero h1 { max-width: 48rem; }
.hero .lede { margin-bottom: 2rem; }

.btn {
  display: inline-block;
  padding: 0.75rem 1.375rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  line-height: 1.4;
}
.btn:hover { filter: brightness(1.08); }
.btn--primary { background: var(--accent-a); border-color: var(--accent-a); color: var(--accent-a-ink); }
.btn--accent { background: var(--accent-b); border-color: var(--accent-b); color: var(--accent-b-ink); }
.btn--ghost { background: transparent; border-color: var(--border); color: var(--ink); }
.btn--block { display: block; width: 100%; text-align: center; }
.btn--small { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }

.btn-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Grids */
.grid { display: grid; gap: 1.5rem; }
/* min() keeps the track from exceeding the container. A bare rem minimum grows
   with the text-size setting and forces horizontal scroll at 150% on a phone,
   which fails WCAG 1.4.4. */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.card p { color: var(--ink-soft); font-size: 0.9375rem; margin: 0; }
.card a.card__more { font-size: 0.875rem; display: inline-block; margin-top: 0.75rem; }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  position: relative;
  border-bottom: 1px solid var(--border);
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 1.05rem;
  width: 0.625rem;
  height: 0.3125rem;
  border-left: 2px solid var(--accent-a);
  border-bottom: 2px solid var(--accent-a);
  transform: rotate(-45deg);
}

/* Pricing. Border STYLE differs, not just colour, so the tiers stay
   distinguishable with no colour perception at all. */
.plan { display: flex; flex-direction: column; }
.plan--founders { border: 2px solid var(--accent-a); }
.plan--sovereign { border: 2px dashed var(--accent-b); }
/* Not yet purchasable: dotted border and muted tag mark it apart from the two
   tiers you can actually buy today, without relying on colour. */
.plan--mcp { border: 2px dotted var(--muted); }
.plan--mcp .plan__tag { background: var(--muted); color: var(--bg); }
.plan__price--tba { font-size: 1.75rem; color: var(--ink-soft); }
.plan__price--tba span { font-size: 1.75rem; font-weight: 600; color: var(--ink-soft); }
.plan__tag {
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.75rem;
  font-weight: 600;
}
.plan--founders .plan__tag { background: var(--accent-a); color: var(--accent-a-ink); }
.plan--sovereign .plan__tag { background: var(--accent-b); color: var(--accent-b-ink); }
.plan__name { margin-bottom: 0.25rem; }
.plan__for { font-size: 0.875rem; color: var(--muted); margin: 0 0 1.5rem; }
.plan__price { font-size: 2.75rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.plan__price span { font-size: 1rem; font-weight: 400; color: var(--muted); }
.plan__note { font-size: 0.8125rem; color: var(--muted); margin: 0.25rem 0 1.5rem; }
.plan .checklist { margin-bottom: 1.75rem; flex: 1; }

/* Forms */
.form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; }
.form label { display: block; font-size: 0.8125rem; font-weight: 500; margin-bottom: 0.25rem; color: var(--ink); }
.form select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9375rem;
  font-family: inherit;
  margin-bottom: 0.875rem;
  background: var(--bg);
  color: var(--ink);
}
.form input, .form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9375rem;
  font-family: inherit;
  margin-bottom: 0.875rem;
  background: var(--bg);
  color: var(--ink);
}
.form textarea { min-height: 7rem; resize: vertical; }
.form__msg { margin-top: 0.75rem; font-size: 0.875rem; min-height: 1.25rem; }
.form__msg--ok { color: var(--ink); font-weight: 500; }
.form__msg--ok::before { content: "\2713  "; }
.form__msg--err { color: var(--accent-b); font-weight: 500; }
.form__msg--err::before { content: "\26A0  "; }

/* Accessibility control panel */
.a11y { position: relative; }
.a11y__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  width: 17rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  z-index: 40;
}
.a11y__group { margin-bottom: 1rem; }
.a11y__group:last-child { margin-bottom: 0; }
.a11y__legend {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
  padding: 0;
}
.a11y__options { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.a11y__opt {
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  border-radius: 6px;
  cursor: pointer;
}
.a11y__opt[aria-pressed="true"] {
  background: var(--accent-a);
  border-color: var(--accent-a);
  color: var(--accent-a-ink);
  font-weight: 600;
}
.a11y__opt[aria-pressed="true"]::after { content: " \2713"; }

/* Footer */
.footer { border-top: 1px solid var(--border); padding: 3rem 0; font-size: 0.875rem; color: var(--muted); }
.footer a { color: var(--muted); margin-right: 1.25rem; }
.footer a:hover { color: var(--ink); }
.footer__bottom { margin-top: 1.5rem; }
.footer__contact { margin-top: 1.5rem; line-height: 2; }
.footer__contact strong { color: var(--ink); font-weight: 500; }

/* Article pages */
.article { max-width: 42rem; }
.article h2 { font-size: 1.5rem; margin-top: 3rem; }
.article p { color: var(--ink-soft); }
.article .stat {
  border-left: 3px solid var(--accent-a);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 2rem 0;
  font-size: 1.1875rem;
  line-height: 1.5;
}
.article .stat small { display: block; font-size: 0.8125rem; color: var(--muted); margin-top: 0.5rem; }
.back-link { font-size: 0.875rem; display: inline-block; margin-bottom: 2rem; }

@media (max-width: 51rem) {
  h1 { font-size: 2.375rem; }
  h2 { font-size: 1.6875rem; }
  .section { padding: 4rem 0; }
  .hero { padding: 4.5rem 0 3.5rem; }
  .nav__links { display: none; }
  .a11y__panel { width: 15rem; }
}

@media print {
  .nav, .a11y, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}