/* ============================================================================
   RankCause — marketing design system
   Spec: docs/DESIGN_SYSTEM.md. Read it before changing anything here.

   This file is the single source of visual truth for every logged-out page.
   Before it existed, each public page carried its own inline CSS and the site
   read as three different products. Page templates should contain content and
   structure; visual decisions live here.
   ========================================================================= */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Ink — cool-biased toward the accent so the greys read as chosen. */
  --mk-ink-900: #0B0D0F;
  --mk-ink-800: #1A1F24;
  --mk-ink-600: #3D464F;
  --mk-ink-400: #6B747D;
  --mk-ink-300: #9AA3AC;

  /* Paper */
  --mk-paper:      #FFFFFF;
  --mk-paper-soft: #FAFBFC;
  --mk-paper-sunk: #F1F3F5;
  --mk-rule:       #E4E7EA;
  --mk-rule-firm:  #D8DCE0;

  /* Accent — action and emphasis only. Twice per viewport, maximum. */
  --mk-accent:      #0F5F5B;
  --mk-accent-ink:  #0A4340;
  --mk-accent-wash: #E8F1F0;
  /* Text that sits ON the accent. It must flip with the theme: the dark
     palette's accent is a LIGHT teal, so white-on-accent — which is correct
     in light mode — renders an unreadable, apparently-empty button. */
  --mk-on-accent:   #FFFFFF;

  /* Semantics — meaning, never decoration. Deliberately not the accent. */
  --mk-good: #146B3A;  --mk-good-wash: #E7F2EB;
  --mk-warn: #8A5A00;  --mk-warn-wash: #FBF2DF;
  --mk-crit: #A6231B;  --mk-crit-wash: #FBEAE8;

  /* Type */
  --mk-display: "Instrument Serif", ui-serif, Georgia, serif;
  --mk-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mk-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --mk-t-xs:   0.75rem;
  --mk-t-sm:   0.8125rem;
  --mk-t-base: 0.9375rem;
  --mk-t-md:   1.0625rem;
  --mk-t-lg:   1.25rem;
  --mk-t-xl:   1.5rem;
  --mk-t-2xl:  2rem;
  --mk-t-3xl:  2.75rem;
  --mk-t-4xl:  3.5rem;

  /* Space — 4px base. Nothing is eyeballed. */
  --mk-1: 4px;   --mk-2: 8px;   --mk-3: 12px;  --mk-4: 16px;
  --mk-5: 24px;  --mk-6: 32px;  --mk-7: 48px;  --mk-8: 64px;
  --mk-9: 96px;  --mk-10: 128px;

  --mk-radius: 4px;
  --mk-radius-lg: 8px;
  --mk-shadow: 0 1px 2px rgba(11, 13, 15, .04), 0 8px 24px -12px rgba(11, 13, 15, .10);

  --mk-col: 1120px;
  --mk-read: 680px;
}

/* Dark theme redefines tokens only — no component hard-codes a colour, so
   this is the entire dark implementation. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mk-ink-900: #F2F5F7;  --mk-ink-800: #DCE2E7;  --mk-ink-600: #AAB4BD;
    --mk-ink-400: #7F8891;  --mk-ink-300: #5D666F;
    --mk-paper: #0C0F12;    --mk-paper-soft: #12161A;  --mk-paper-sunk: #171C21;
    --mk-rule: #232A31;     --mk-rule-firm: #2E363E;
    --mk-accent: #5FBFB6;   --mk-accent-ink: #8FD6CF;  --mk-accent-wash: #11302E;
    --mk-on-accent: #07211F;
    --mk-good: #6FC08D;     --mk-good-wash: #10281A;
    --mk-warn: #D9A441;     --mk-warn-wash: #2C2310;
    --mk-crit: #E88A82;     --mk-crit-wash: #2E1715;
  }
}
:root[data-theme="dark"] {
  --mk-ink-900: #F2F5F7;  --mk-ink-800: #DCE2E7;  --mk-ink-600: #AAB4BD;
  --mk-ink-400: #7F8891;  --mk-ink-300: #5D666F;
  --mk-paper: #0C0F12;    --mk-paper-soft: #12161A;  --mk-paper-sunk: #171C21;
  --mk-rule: #232A31;     --mk-rule-firm: #2E363E;
  --mk-accent: #5FBFB6;   --mk-accent-ink: #8FD6CF;  --mk-accent-wash: #11302E;
  --mk-on-accent: #07211F;
  --mk-good: #6FC08D;     --mk-good-wash: #10281A;
  --mk-warn: #D9A441;     --mk-warn-wash: #2C2310;
  --mk-crit: #E88A82;     --mk-crit-wash: #2E1715;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
.mk {
  background: var(--mk-paper);
  color: var(--mk-ink-800);
  font-family: var(--mk-sans);
  font-size: var(--mk-t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.mk *, .mk *::before, .mk *::after { box-sizing: border-box; }
.mk img, .mk svg, .mk video { max-width: 100%; height: auto; }

/* Every figure on this site is tabular. Digits that jitter between rows
   undermine a product whose entire claim is careful measurement. */
.mk [class*="mk-metric"], .mk .mk-table td, .mk .mk-num, .mk .mk-tier__price {
  font-variant-numeric: tabular-nums;
}

.mk-wrap {
  max-width: var(--mk-col);
  margin-inline: auto;
  padding-inline: 20px;        /* the gutter, set once */
}
.mk-wrap--read { max-width: var(--mk-read); }

/* ── Type ───────────────────────────────────────────────────────────────── */
.mk h1, .mk h2, .mk h3, .mk h4 {
  color: var(--mk-ink-900);
  text-wrap: balance;
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.mk h1 {
  font-family: var(--mk-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 5.2vw, var(--mk-t-4xl));
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.mk h2 { font-size: clamp(1.5rem, 3vw, var(--mk-t-2xl)); line-height: 1.15; }
.mk h3 { font-size: var(--mk-t-lg); line-height: 1.3; }
.mk h4 { font-size: var(--mk-t-md); line-height: 1.35; }
.mk p  { margin: 0; }
/* The default link look, for prose. Wrapped in :where() so it carries ZERO
   specificity and behaves as a true default: any component that states its own
   colour or decoration wins on a single class, with no need to out-specify a
   generic element selector.

   Pre-fix this was `.mk a` at (0,1,1) — one class plus one element — which beat
   every single-class component rule, and every .mk-btn/.mk-skip/.mk-nav__brand
   is an <a>. The symptoms: a primary button whose label rendered in the accent
   colour ON the accent background (an apparently empty button), a nav wordmark
   and a skip link rendered accent-teal instead of ink, and every button
   underlined on hover against its own `text-decoration: none`. */
:where(.mk a) { color: var(--mk-accent); text-decoration: none; }
:where(.mk a:hover) { text-decoration: underline; text-underline-offset: 3px; }
.mk code, .mk .mk-mono { font-family: var(--mk-mono); font-size: 0.9em; }

.mk-eyebrow {
  font-size: var(--mk-t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--mk-ink-400);
}
.mk-lede { font-size: var(--mk-t-md); color: var(--mk-ink-600); max-width: 62ch; }
.mk-muted { color: var(--mk-ink-400); }
.mk-small { font-size: var(--mk-t-sm); }

/* ── Focus — visible, always. Never removed without a replacement. ──────── */
.mk :focus-visible {
  outline: 2px solid var(--mk-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Nav ────────────────────────────────────────────────────────────────── */
.mk-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--mk-paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--mk-rule);
}
.mk-nav__in {
  max-width: var(--mk-col); margin-inline: auto; padding: var(--mk-3) 20px;
  display: flex; align-items: center; gap: var(--mk-5);
}
.mk-nav__brand {
  display: flex; align-items: center; gap: var(--mk-2);
  font-weight: 600; font-size: var(--mk-t-md); color: var(--mk-ink-900);
  letter-spacing: -0.02em; text-decoration: none;
}
.mk-nav__links { display: flex; gap: var(--mk-5); margin-left: var(--mk-4); }
.mk-nav__links a {
  color: var(--mk-ink-600); font-size: var(--mk-t-base); font-weight: 500;
}
.mk-nav__links a:hover { color: var(--mk-ink-900); text-decoration: none; }
.mk-nav__end { margin-left: auto; display: flex; align-items: center; gap: var(--mk-3); }
@media (max-width: 900px) { .mk-nav__links { display: none; } }

/* ── Buttons — 44px minimum target ─────────────────────────────────────── */
.mk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--mk-2);
  min-height: 44px; padding: 0 var(--mk-5);
  border-radius: var(--mk-radius);
  font-size: var(--mk-t-base); font-weight: 600; font-family: var(--mk-sans);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  text-decoration: none; white-space: nowrap;
}
.mk-btn:hover { text-decoration: none; }

/* Scoped with `.mk` deliberately. The zero-specificity default above already
   lets a bare `.mk-btn--primary` win, so this is belt-and-braces: it keeps the
   variants at (0,2,0) so they still hold if the generic anchor rule is ever
   re-raised above (0,1,0). Buttons are <a> elements, and getting this wrong
   renders the label in the accent colour ON the accent background. */
.mk .mk-btn--primary { background: var(--mk-accent); color: var(--mk-on-accent); }
.mk .mk-btn--primary:hover { background: var(--mk-accent-ink); color: var(--mk-on-accent); }
.mk .mk-btn--ghost {
  background: transparent; color: var(--mk-ink-900);
  border-color: var(--mk-rule-firm);
}
.mk .mk-btn--ghost:hover { border-color: var(--mk-ink-400); background: var(--mk-paper-soft); color: var(--mk-ink-900); }
.mk-btn--sm { min-height: 36px; padding: 0 var(--mk-4); font-size: var(--mk-t-sm); }

/* ── Sections — separated by space and a hairline, not by boxes ────────── */
.mk-section { padding-block: var(--mk-9); }
.mk-section--tight { padding-block: var(--mk-7); }
.mk-section--sunk { background: var(--mk-paper-soft); }
.mk-rule { height: 1px; background: var(--mk-rule); border: 0; margin: 0; }
.mk-stack   { display: flex; flex-direction: column; gap: var(--mk-4); }
.mk-stack--lg { gap: var(--mk-6); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.mk-hero { padding-block: var(--mk-9) var(--mk-8); }
.mk-hero__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--mk-8); align-items: center;
}
.mk-hero__sub { margin-top: var(--mk-4); font-size: var(--mk-t-md); color: var(--mk-ink-600); max-width: 54ch; }
.mk-hero__cta { margin-top: var(--mk-6); display: flex; flex-wrap: wrap; gap: var(--mk-3); }
.mk-hero__note { margin-top: var(--mk-4); font-size: var(--mk-t-sm); color: var(--mk-ink-400); }
@media (max-width: 900px) { .mk-hero__grid { grid-template-columns: 1fr; gap: var(--mk-6); } }

/* ── Cards — for genuinely discrete, comparable objects only ───────────── */
.mk-card {
  background: var(--mk-paper);
  border: 1px solid var(--mk-rule);
  border-radius: var(--mk-radius-lg);
  padding: var(--mk-5);
}
.mk-grid { display: grid; gap: var(--mk-4); }
.mk-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mk-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .mk-grid--3, .mk-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .mk-grid--2, .mk-grid--3, .mk-grid--4 { grid-template-columns: 1fr; } }

/* ── Pricing tiers ──────────────────────────────────────────────────────── */
.mk-tier { display: flex; flex-direction: column; gap: var(--mk-4); height: 100%; }
.mk-tier--featured { border-color: var(--mk-accent); box-shadow: var(--mk-shadow); }
.mk-tier__price {
  font-family: var(--mk-display); font-size: var(--mk-t-3xl);
  line-height: 1; color: var(--mk-ink-900);
}
.mk-tier__period { font-family: var(--mk-sans); font-size: var(--mk-t-base); color: var(--mk-ink-400); }
.mk-tier__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--mk-2); }
.mk-tier__list li {
  font-size: var(--mk-t-sm); color: var(--mk-ink-600);
  padding-left: var(--mk-5); position: relative;
}
.mk-tier__list li::before {
  content: "—"; position: absolute; left: 0; color: var(--mk-ink-300);
}
.mk-tier__list li[data-state="yes"]::before { content: "✓"; color: var(--mk-good); }
.mk-tier__list li[data-state="no"]::before  { content: "×"; color: var(--mk-ink-300); }

/* ── Metrics — a figure only earns a place here if it means something ──── */
.mk-metric__value {
  font-family: var(--mk-display); font-size: var(--mk-t-2xl);
  line-height: 1; color: var(--mk-ink-900);
}
.mk-metric__label { font-size: var(--mk-t-sm); color: var(--mk-ink-400); margin-top: var(--mk-2); }

/* ── Steps — numbered only when genuinely sequential ───────────────────── */
.mk-steps { counter-reset: mkstep; display: grid; gap: var(--mk-5); }
.mk-steps__item { counter-increment: mkstep; display: grid; grid-template-columns: 32px 1fr; gap: var(--mk-4); }
.mk-steps__item::before {
  content: counter(mkstep);
  font-family: var(--mk-mono); font-size: var(--mk-t-sm);
  color: var(--mk-accent);
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--mk-rule-firm); border-radius: 50%;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.mk-table__scroll { overflow-x: auto; }   /* the page body never scrolls sideways */
.mk-table { width: 100%; border-collapse: collapse; font-size: var(--mk-t-sm); }
.mk-table th {
  text-align: left; font-size: var(--mk-t-xs); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--mk-ink-400); font-weight: 600;
  padding: var(--mk-3) var(--mk-4); border-bottom: 1px solid var(--mk-rule-firm);
  white-space: nowrap;
}
.mk-table td { padding: var(--mk-3) var(--mk-4); border-bottom: 1px solid var(--mk-rule); vertical-align: top; }
.mk-table tr:last-child td { border-bottom: 0; }

/* ── Notes and callouts ────────────────────────────────────────────────── */
.mk-note {
  border-left: 2px solid var(--mk-rule-firm);
  padding: var(--mk-2) 0 var(--mk-2) var(--mk-4);
  font-size: var(--mk-t-sm); color: var(--mk-ink-600);
}
.mk-callout {
  background: var(--mk-paper-sunk); border-radius: var(--mk-radius-lg);
  padding: var(--mk-5); font-size: var(--mk-t-base); color: var(--mk-ink-600);
}
.mk-callout--accent { background: var(--mk-accent-wash); }

/* Status pills always pair colour with a word — colour is never the only
   carrier of meaning. */
.mk-pill {
  display: inline-flex; align-items: center; gap: var(--mk-1);
  font-size: var(--mk-t-xs); font-weight: 600; letter-spacing: 0.02em;
  padding: 3px var(--mk-2); border-radius: 3px;
}
.mk-pill--good { background: var(--mk-good-wash); color: var(--mk-good); }
.mk-pill--warn { background: var(--mk-warn-wash); color: var(--mk-warn); }
.mk-pill--crit { background: var(--mk-crit-wash); color: var(--mk-crit); }
.mk-pill--accent { background: var(--mk-accent-wash); color: var(--mk-accent); }

/* ── Prose — legal, help, long-form ────────────────────────────────────── */
.mk-prose { max-width: var(--mk-read); color: var(--mk-ink-600); }
.mk-prose h2 { margin: var(--mk-8) 0 var(--mk-3); }
.mk-prose h3 { margin: var(--mk-6) 0 var(--mk-2); }
.mk-prose p, .mk-prose ul, .mk-prose ol { margin: 0 0 var(--mk-4); }
.mk-prose ul, .mk-prose ol { padding-left: var(--mk-5); }
.mk-prose li { margin-bottom: var(--mk-2); }
.mk-prose strong { color: var(--mk-ink-900); font-weight: 600; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.mk-faq__item { border-bottom: 1px solid var(--mk-rule); padding: var(--mk-4) 0; }
.mk-faq__q { font-weight: 600; color: var(--mk-ink-900); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--mk-4); }
.mk-faq__q::-webkit-details-marker { display: none; }
.mk-faq__q::after { content: "+"; color: var(--mk-ink-400); font-family: var(--mk-mono); }
details[open] .mk-faq__q::after { content: "−"; }
.mk-faq__a { margin-top: var(--mk-3); color: var(--mk-ink-600); font-size: var(--mk-t-base); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.mk-footer { border-top: 1px solid var(--mk-rule); padding-block: var(--mk-8) var(--mk-6); background: var(--mk-paper-soft); }
.mk-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--mk-6); }
.mk-footer__label { font-size: var(--mk-t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--mk-ink-400); margin-bottom: var(--mk-3); font-weight: 600; }
.mk-footer__col a { display: block; color: var(--mk-ink-600); font-size: var(--mk-t-sm); padding: var(--mk-1) 0; }
.mk-footer__col a:hover { color: var(--mk-ink-900); text-decoration: none; }
.mk-footer__base { margin-top: var(--mk-7); padding-top: var(--mk-4); border-top: 1px solid var(--mk-rule); display: flex; flex-wrap: wrap; gap: var(--mk-4); justify-content: space-between; font-size: var(--mk-t-sm); color: var(--mk-ink-400); }
@media (max-width: 900px) { .mk-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .mk-footer__grid { grid-template-columns: 1fr; } }

/* ── Skip link — first tab stop ────────────────────────────────────────── */
.mk-skip {
  position: absolute; left: -9999px;
  background: var(--mk-ink-900); color: var(--mk-paper);
  padding: var(--mk-3) var(--mk-4); border-radius: var(--mk-radius); z-index: 100;
}
.mk-skip:focus { left: var(--mk-4); top: var(--mk-4); }

/* ── Motion ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mk *, .mk *::before, .mk *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}