/* =========================================================================
   Marketing surface — landing, pricing, demo tour, legal stubs.

   HAND-WRITTEN SOURCE, served directly. It is deliberately NOT routed through
   src/input.css: public/css/style.css is build output from `npm run build:css`
   and regenerating it on a branch that three agents are editing produces a
   large diff for no benefit. Same precedent as portal.css and
   public-portal.css, which are also linked raw.

   NO TAILWIND UTILITIES ARE USED IN THE MARKETING VIEWS. Tailwind's JIT only
   emits classes it finds at build time, so a utility used here but absent from
   the committed style.css would simply do nothing — and in this codebase
   Tailwind also beats Bootstrap on every same-name class, which has already
   produced one live invisible-content bug (`collapse`). Every rule the
   marketing pages need is in this file, namespaced `mk-`.

   COLOUR: every value is a token from themes.css. This file introduces no new
   colours. All 24 foreground/background pairs it can produce were computed
   with scripts/design/contrast-audit against the project bars (7:1 body,
   4.5:1 chrome, 3:1 control boundaries) and all 24 pass, in both themes. The
   lowest is the control boundary at 3.47:1 in dark against a 3:1 bar.

   ⚠️ --accent INVERTS between themes (navy #16335c light, #9dbdea dark) and
   --accent-contrast inverts with it (#ffffff / #181511). Anything painted with
   the pair works in both; anything that hardcodes white on --accent does not.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Page frame
   ------------------------------------------------------------------------- */

body.mk-page {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.mk-container {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: var(--space-5);
  box-sizing: border-box;
}

.mk-container--narrow { max-width: 46rem; }

/* Measure. Long body copy is capped independently of the container so a wide
   viewport does not produce 140-character lines. */
.mk-prose { max-width: 38rem; }
.mk-prose p { margin: 0 0 var(--space-4); }
.mk-prose ul { margin: 0 0 var(--space-4); padding-left: 1.25rem; }
.mk-prose li { margin-bottom: var(--space-2); }

.mk-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;
}

/* -------------------------------------------------------------------------
   Skip link (SC 2.4.1)

   Defined here rather than inherited: neither accessibility-fixes.css nor
   public-portal.css — the only two files in the repo carrying a .skip-link
   rule — is loaded by a marketing page, so without this the link would be
   permanently visible and unstyled.
   ------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-3);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.skip-link:focus { top: 0; }

/* -------------------------------------------------------------------------
   Focus (SC 2.4.7, SC 2.4.11, SC 2.4.13)

   A single rule on the page root so nothing can be operable without a visible
   indicator. The marketing header is deliberately STATIC, never sticky or
   fixed — a sticky bar is the usual way a focused control ends up obscured,
   and not having one satisfies "focus not obscured" by construction rather
   than by scroll-margin arithmetic.
   ------------------------------------------------------------------------- */

body.mk-page a:focus-visible,
body.mk-page button:focus-visible,
body.mk-page summary:focus-visible,
body.mk-page input:focus-visible,
body.mk-page [tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Target size (SC 2.5.8): every interactive control clears 24x24 CSS px.
   Inline links inside running prose are exempt by the standard's own
   "inline" exception and are not padded here — doing so would wreck the
   line rhythm of body copy for no conformance gain. */
body.mk-page a:not(.mk-inline-link),
body.mk-page button {
  min-height: 24px;
}

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

.mk-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}

.mk-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
}

.mk-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent);
  text-decoration: none;
}

.mk-wordmark__rule {
  display: inline-block;
  width: 3px;
  height: 1.1em;
  background: var(--accent-text);
  border-radius: var(--radius-sm);
}

.mk-headernav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.mk-headernav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}

.mk-headernav a:hover { background: var(--border); }

.mk-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
  margin-top: var(--space-8);
  padding-block: var(--space-6);
}

.mk-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.mk-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mk-footer__note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.875rem;
  max-width: 42rem;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.mk-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* a:visited (0,1,1) outranks a class selector (0,1,0), so an anchor styled as
   a button renders with the visited colour after one click unless :visited is
   named explicitly. This has been a real defect in this codebase before. */
.mk-btn--primary,
.mk-btn--primary:visited {
  background: var(--accent);
  color: var(--accent-contrast);
}
.mk-btn--primary:hover { background: var(--text); color: var(--surface-raised); }

.mk-btn--secondary,
.mk-btn--secondary:visited {
  background: var(--surface-raised);
  color: var(--text);
  border-color: var(--border-strong);
}
.mk-btn--secondary:hover { background: var(--border); }

.mk-btn--block { width: 100%; }

/* -------------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------------- */

.mk-section { padding-block: var(--space-8); }
.mk-section--raised { background: var(--surface-raised); border-block: 1px solid var(--border); }
.mk-section--tight { padding-block: var(--space-6); }

.mk-eyebrow {
  margin: 0 0 var(--space-2);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

h1.mk-title {
  margin: 0 0 var(--space-4);
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--accent);
  max-width: 20ch;
}

h2.mk-h2 {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--accent);
}

h3.mk-h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text);
}

.mk-lede {
  margin: 0 0 var(--space-5);
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 42ch;
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.mk-hero { padding-block: var(--space-8) var(--space-7); }

.mk-hero__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

/* The second column only exists when a screenshot exists. With no image the
   hero is a single column and the copy simply reads wider — no placeholder
   frame, no empty bordered box. See HERO_SHOTS in src/routes/marketing.js. */
.mk-hero__grid--with-shot { grid-template-columns: 1fr; }

@media (min-width: 60rem) {
  .mk-hero__grid--with-shot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.mk-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.mk-hero__aside {
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.mk-shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  background: var(--surface-raised);
}

.mk-shot__caption {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* -------------------------------------------------------------------------
   Cards / pillars

   ONE elevation signal per card, not three. The design critique flagged the
   border + shadow + coloured-edge stack as saying "raised" three times; the
   pillar cards carry a hairline border and a card shadow and no coloured
   edge at all.
   ------------------------------------------------------------------------- */

.mk-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 44rem) { .mk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56rem) { .mk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mk-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.mk-card p:last-child { margin-bottom: 0; }
.mk-card p { color: var(--text-muted); margin: 0 0 var(--space-3); }

/* -------------------------------------------------------------------------
   Pricing
   ------------------------------------------------------------------------- */

.mk-billing {
  border: 0;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.mk-billing__legend {
  padding: 0;
  font-weight: 600;
  color: var(--text);
}

/* Segmented control built from real radio inputs. Radios are keyboard
   operable with the arrow keys, announce their checked state natively, and
   involve no dragging (SC 2.5.7) — a custom switch would have had to
   reimplement all three. */
.mk-segmented {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
}

.mk-segmented input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}

.mk-segmented label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 96px;
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.mk-segmented input:checked + label {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* The visually-hidden radio still receives focus, so the ring has to be drawn
   on its label or keyboard users get no indicator at all. */
.mk-segmented input:focus-visible + label {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* No JavaScript anywhere in the pricing page: :has() reads the checked radio
   and hides the other interval, which also removes it from the accessibility
   tree. Where :has() is unsupported both prices remain visible and labelled
   — degraded, but honest and never wrong. */
.mk-pricing:has(#mk-billing-annual:checked) .mk-price__period--monthly,
.mk-pricing:has(#mk-billing-monthly:checked) .mk-price__period--annual {
  display: none;
}

.mk-price {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

/* The highlighted card is distinguished by a heavier border in the accent and
   a ribbon that names WHY — not by colour alone (SC 1.4.1). */
.mk-price--featured {
  border: 2px solid var(--accent);
  box-shadow: var(--shadow-overlay);
}

.mk-price__ribbon {
  align-self: flex-start;
  margin-bottom: var(--space-3);
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.8125rem;
  font-weight: 700;
}

.mk-price__name {
  margin: 0 0 var(--space-1);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
}

.mk-price__amount {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.mk-price__suffix { color: var(--text-muted); font-weight: 600; }

.mk-price__note {
  display: block;
  margin-top: var(--space-1);
  color: var(--accent-text);
  font-size: 0.875rem;
  font-weight: 600;
}

.mk-price__tagline { color: var(--text-muted); margin: var(--space-3) 0; }

.mk-price__features {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  flex-grow: 1;
}

.mk-price__features li {
  padding-left: 1.5rem;
  margin-bottom: var(--space-2);
  position: relative;
}

.mk-price__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-circle);
  background: var(--accent-text);
}

.mk-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--state-inactive-bg);
  color: var(--state-inactive-text);
}

.mk-badge--included {
  background: var(--cat-green-bg);
  color: var(--cat-green-text);
}

/* -------------------------------------------------------------------------
   Comparison table
   ------------------------------------------------------------------------- */

.mk-tablewrap { overflow-x: auto; }

.mk-table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  background: var(--surface-raised);
}

.mk-table caption {
  text-align: left;
  padding-bottom: var(--space-3);
  color: var(--text-muted);
}

.mk-table th,
.mk-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.mk-table thead th {
  border-bottom: 2px solid var(--border-strong);
  color: var(--accent);
  font-weight: 700;
}

.mk-table td.mk-table__mark,
.mk-table th.mk-table__mark { text-align: center; }

.mk-table__feature { font-weight: 600; }
.mk-table__desc { display: block; font-weight: 400; color: var(--text-muted); font-size: 0.9375rem; }

/* -------------------------------------------------------------------------
   Demo tour
   ------------------------------------------------------------------------- */

/* The one place a brass edge is the right grammar: this banner IS a notice.
   Brass here is #6b4c11 / #d6a94f — the text-safe values, measured at 7.75:1
   and 7.61:1 on the raised surface. The decorative brass #9a7328 is 4.26:1
   and is never used for text anywhere. */
.mk-demobanner {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-text);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-block: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.mk-demobanner__text { margin: 0; max-width: 44ch; }
.mk-demobanner__label {
  display: block;
  font-weight: 700;
  color: var(--accent-text);
}

.mk-tournav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-3);
}

.mk-tournav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}

.mk-tournav a[aria-current='page'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.mk-meta {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.mk-meta dt, .mk-meta__term {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.mk-itemlist { list-style: none; margin: 0; padding: 0; }

.mk-itemlist li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.mk-itemlist li:last-child { border-bottom: 0; }

.mk-itemno {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent);
  margin-right: var(--space-2);
}

.mk-empty {
  margin: 0;
  padding: var(--space-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-align: center;
}

/* -------------------------------------------------------------------------
   Motion result chips. Colour is never the only signal: each chip prints the
   word ("Passed"/"Failed") and the tally sits beside it in text.
   ------------------------------------------------------------------------- */

.mk-result {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.8125rem;
  background: var(--cat-slate-bg);
  color: var(--cat-slate-text);
}

.mk-result--passed { background: var(--cat-green-bg); color: var(--cat-green-text); }
.mk-result--failed { background: var(--cat-red-bg); color: var(--cat-red-text); }

/* -------------------------------------------------------------------------
   Motion
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.mk-page *,
  body.mk-page *::before,
  body.mk-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}