/* ── Marketing skin (.mk) ─────────────────────────────────────────────────────
 *
 *  The look of every public marketing page (home, features, games, compare,
 *  about, contact, /lp), modelled on alignui.com: a light grey page, white
 *  cards with layered hairline shadows, ONE accent (Scaniam blue #4366b0),
 *  Bricolage Grotesque headings, Geist body, Geist Mono labels. Spec:
 *  docs/MARKETING_SKIN.md. Pages read these through src/components/marketing/mk.ts
 *  (never a raw hex). The static blog + KB templates copy the same values.
 *  Scoped to .mk so the signed-in app is untouched. `.mk-tokens` gives a
 *  dashboard element the same tokens (QR eye, ticket, mono label, card shadow)
 *  without the marketing page font or background.
 */
.mk, .mk-nav, .mk-foot, .mk-tokens {
  --mk-page:        #f7f7f7;
  --mk-surface:     #ffffff;
  --mk-surface-2:   #f2f2f2;
  --mk-ink:         #1c1c1f;
  --mk-text:        #474747;
  /* Text greys pass WCAG AA (4.5:1) on page, white and surface-2. Hierarchy
   * below muted comes from size + Geist Mono, not from a lighter grey. */
  --mk-muted:       #666666;
  --mk-faint:       #6e6e6e;
  /* Decoration only (bullet marks, FAQ +, separators): never for text. */
  --mk-deco:        #a3a3a3;
  /* Large text only (24px+, or 19px+ at weight 700+): WCAG AA large = 3:1. */
  --mk-faint-large: #888888;
  --mk-line:        #ebebeb;
  --mk-line-strong: #e0e0e0;
  --mk-accent:      #4366b0;
  --mk-accent-hover:#36569a;
  --mk-accent-soft: rgba(67, 102, 176, 0.08);
  --mk-accent-ring: rgba(67, 102, 176, 0.24);
  --mk-dark:        #171717;
  --mk-dark-2:      #222222;
  --mk-dark-line:   rgba(255, 255, 255, 0.08);
  --mk-dark-text:   #a3a3a3;
  --mk-on-dark:     #ffffff;
  --mk-success:     #12a557;
  --mk-danger:      #d93b3b;
  --mk-warning:     #c98a00;
  --mk-success-soft: rgba(18, 165, 87, 0.07);
  --mk-success-line: rgba(18, 165, 87, 0.22);
  --mk-danger-soft:  rgba(217, 59, 59, 0.06);
  --mk-danger-line:  rgba(217, 59, 59, 0.22);

  --mk-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --mk-font-body:    'Geist', system-ui, -apple-system, sans-serif;
  --mk-font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --mk-shadow-card:
    0 1px 1px 0.5px rgba(41, 41, 41, 0.04), 0 3px 3px -1.5px rgba(41, 41, 41, 0.02),
    0 6px 6px -3px rgba(41, 41, 41, 0.04), 0 12px 12px -6px rgba(41, 41, 41, 0.04),
    0 24px 24px -12px rgba(41, 41, 41, 0.04), 0 0 0 1px rgba(41, 41, 41, 0.08),
    inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06);
  --mk-shadow-float:
    0 1px 1px 0.5px rgba(41, 41, 41, 0.04), 0 3px 3px -1.5px rgba(41, 41, 41, 0.02),
    0 6px 6px -3px rgba(41, 41, 41, 0.04), 0 12px 12px -6px rgba(41, 41, 41, 0.04),
    0 24px 24px -12px rgba(41, 41, 41, 0.04), 0 48px 48px -24px rgba(41, 41, 41, 0.04),
    0 0 0 1px rgba(41, 41, 41, 0.08), inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06);
  --mk-shadow-badge:
    0 4px 8px rgba(41, 41, 41, 0.06), 0 2px 4px rgba(41, 41, 41, 0.04),
    0 1px 2px rgba(41, 41, 41, 0.04), 0 0 0 1px rgba(41, 41, 41, 0.08),
    inset 0 -0.5px 0.5px rgba(41, 41, 41, 0.08);
  --mk-shadow-btn-dark:
    0 16px 8px rgba(31, 31, 31, 0.01), 0 12px 6px rgba(31, 31, 31, 0.04),
    0 4px 4px rgba(31, 31, 31, 0.07), 0 1.5px 3px rgba(31, 31, 31, 0.08),
    0 0 0 1px #0f0f0f, inset 0 1px 2px rgba(255, 255, 255, 0.12);
  --mk-shadow-btn-light:
    0 1px 2px rgba(41, 41, 41, 0.06), 0 0 0 1px rgba(41, 41, 41, 0.1),
    inset 0 -1px 1px -0.5px rgba(51, 51, 51, 0.06);
  --mk-shadow-btn-accent:
    0 12px 6px rgba(43, 66, 115, 0.04), 0 4px 4px rgba(43, 66, 115, 0.1),
    0 1.5px 3px rgba(43, 66, 115, 0.14), 0 0 0 1px #36569a,
    inset 0 1px 2px rgba(255, 255, 255, 0.18);

  --mk-ease: cubic-bezier(0, 0, 0.2, 1);
  --mk-ease-out: cubic-bezier(0.33, 1, 0.68, 1);

}
/* The page itself (the nav + footer carry the tokens above, so they render the
 * same wherever they are mounted). */
.mk {
  font-family: var(--mk-font-body);
  color: var(--mk-text);
  background: var(--mk-page);
  font-feature-settings: 'ss01', 'cv11';
}
/* #section links land below the floating nav (64px + 12px gap), not under it. */
.mk [id] { scroll-margin-top: 96px; }
.mk h1, .mk h2, .mk h3, .mk h4 { font-family: var(--mk-font-display); color: var(--mk-ink); }

/* Hover lift for clickable cards (inline styles cannot hold :hover). */
.mk-card-hover { transition: transform 300ms var(--mk-ease), box-shadow 300ms var(--mk-ease); }
.mk-card-hover:hover { transform: translateY(-2px); box-shadow: var(--mk-shadow-float) !important; }
.mk-link { transition: color 150ms linear; }
.mk-link:hover { color: var(--mk-ink) !important; }
.mk-dark .mk-link:hover, .mk-link-on-dark:hover { color: #fff !important; }
.mk-accent-link { transition: color 150ms linear; }
.mk-accent-link:hover { color: var(--mk-accent-hover) !important; }
.mk details > summary::-webkit-details-marker { display: none; }

/* Typewriter hero word: blinking accent caret. */
@keyframes mkBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.mk-caret {
  display: inline-block; width: 0.06em; min-width: 3px; height: 0.86em; margin-left: 0.06em;
  vertical-align: -0.06em; border-radius: 2px; background: var(--mk-accent); opacity: 0.85;
  animation: mkBlink 0.8s ease infinite;
}
/* FadedRule: hairline that fades in from both ends (grids on the light page or dark card) */
.mk-rule { position: absolute; --rule: var(--mk-line-strong); }
.mk-rule.is-dark { --rule: rgba(255, 255, 255, 0.09); }
.mk-rule-h { left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--rule) 32%, var(--rule) 68%, transparent); }
.mk-rule-v { top: 0; bottom: 0; right: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--rule) 32%, var(--rule) 68%, transparent); }

/* Entrance: sections fade up once as they scroll in. Content is visible by
 * default (prerendered HTML, no JS, reduced motion); only elements the Reveal
 * component has armed below the fold start hidden. */
@keyframes mkFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.mk-reveal-armed { opacity: 0; }
.mk-reveal-in { animation: mkFadeUp 500ms var(--mk-ease-out) both; }

/* Hero entrance (first paint, no observer needed). */
.mk-enter { animation: mkFadeUp 600ms var(--mk-ease-out) both; }
.mk-enter-2 { animation-delay: 80ms; }
.mk-enter-3 { animation-delay: 160ms; }
.mk-enter-4 { animation-delay: 240ms; }
/* main.tsx adds .mk-taken-over when React replaces a prerendered page: the fade
 * already ran on the HTML, so don't hide and re-fade the hero. */
.mk-taken-over .mk-enter { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .mk-reveal-armed { opacity: 1; }
  .mk-caret { animation: none; }
}

/* ── Site shell: nav + footer ─────────────────────────────────────────────────
 *
 *  ONE nav and ONE footer for every marketing page. The React pages render it
 *  from MarketingNav.tsx / MarketingFooter.tsx; the static blog + KB pages get
 *  the same markup from scripts/marketing-shell.mjs at build time. Both read the
 *  links from src/components/marketing/site-links.json and use only these
 *  classes, so the two can never drift. The mobile menu is a native <details>
 *  (no script), which works on the static pages under their CSP too.
 */
.mk-nav {
  position: fixed; top: 12px; left: 0; right: 0; z-index: 100;
  padding: 0 24px; pointer-events: none; font-family: var(--mk-font-body);
}
.mk-nav-pill {
  position: relative; pointer-events: auto; max-width: 1200px; margin: 0 auto;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-radius: 22px; box-shadow: var(--mk-shadow-float);
}
.mk-nav-bar {
  line-height: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 64px; padding: 0 10px 0 20px;
}
.mk-nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.mk-nav-logo img { height: 26px; width: auto; display: block; }
.mk-nav-links, .mk-nav-right { display: flex; align-items: center; white-space: nowrap; }
.mk-nav-links { gap: 2px; }
.mk-nav-right { gap: 8px; }
.mk-nav-links a, .mk-nav-right a:not(.nav-cta) {
  color: var(--mk-muted); text-decoration: none; font-size: 14px; font-weight: 500;
  letter-spacing: -0.006em; line-height: 20px; padding: 6px 10px; border-radius: 8px;
  transition: color 150ms linear, background-color 150ms linear;
}
.mk-nav-links a:hover, .mk-nav-right a:not(.nav-cta):hover { color: var(--mk-ink); }
.mk-nav-links a[aria-current="page"] { color: var(--mk-ink); background: var(--mk-surface-2); }

/* Mobile + tablet menu (hidden on desktop). */
.mk-nav-menu { display: none; }
.mk-nav-menu > summary {
  list-style: none; cursor: pointer; width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; color: var(--mk-ink);
  background: var(--mk-surface); box-shadow: var(--mk-shadow-btn-light);
}
.mk-nav-menu > summary::-webkit-details-marker { display: none; }
.mk-nav-menu .mk-ico-close { display: none; }
.mk-nav-menu[open] .mk-ico-close { display: block; }
.mk-nav-menu[open] .mk-ico-menu { display: none; }
.mk-nav-drawer {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--mk-surface); border-radius: 18px; box-shadow: var(--mk-shadow-float);
  display: flex; flex-direction: column; padding: 4px 16px 16px;
}
.mk-nav-drawer a:not(.nav-cta) {
  color: var(--mk-ink); text-decoration: none; font-size: 15px; font-weight: 500;
  line-height: 22px; padding: 12px 4px; border-bottom: 1px solid var(--mk-line);
}
.mk-nav-drawer .nav-cta { margin-top: 14px; height: 48px; padding: 0 20px; font-size: 15px; }

@media (max-width: 1023px) {
  .mk-nav-links, .mk-nav-right { display: none; }
  .mk-nav-solo .mk-nav-right { display: flex; } /* /lp: one CTA, no menu */
  .mk-nav-menu { display: block; }
  .mk-nav-pill { border-radius: 18px; }
  .mk-nav-bar { height: 56px; padding: 0 8px 0 16px; }
}
@media (max-width: 767px) {
  .mk-nav { top: 8px; padding: 0 8px; }
  .mk-nav-logo img { height: 24px; }
}

.mk-foot {
  background: var(--mk-page); border-top: 1px solid var(--mk-line);
  padding: 56px 24px 32px; font-family: var(--mk-font-body);
}
.mk-foot-inner {
  max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column;
  align-items: center; gap: 14px; text-align: center;
}
.mk-foot-inner img { height: 26px; width: auto; display: block; }
.mk-foot-line {
  font-family: var(--mk-font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--mk-ink); margin: 0; line-height: 1.3;
}
.mk-foot-line span { color: var(--mk-faint); } /* 20px/600 is not "large text" for WCAG: needs 4.5:1 */
.mk-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 18px; }
.mk-foot-links a {
  font-size: 13.5px; font-weight: 500; line-height: 20px; color: var(--mk-muted); text-decoration: none;
  transition: color 150ms linear;
}
.mk-foot-links a:hover { color: var(--mk-ink); }
.mk-foot-rule { width: 100%; height: 1px; background: var(--mk-line); margin: 22px 0 4px; }
.mk-foot-copy { font-size: 12.5px; line-height: 18px; color: var(--mk-faint); margin: 0; }


/* ── UI kit ───────────────────────────────────────────────────────────────────
 *
 *  THE definition of every marketing UI element. React pages and the static
 *  blog + KB pages use these classes; nothing else may restyle them. Spec and
 *  when-to-use: docs/MARKETING_SKIN.md "UI kit". See them all at /styleguide
 *  (dev server). The React type helpers in mk.ts (mkH1, mkH2...) carry the SAME
 *  numbers; mk-kit.test.ts fails if the two drift.
 */

/* Typography */
.mk-display { font-family: var(--mk-font-display); color: var(--mk-ink); font-weight: 600; font-size: 60px; line-height: 66px; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
.mk-title   { font-family: var(--mk-font-display); color: var(--mk-ink); font-weight: 600; font-size: 48px; line-height: 56px; letter-spacing: -0.03em;  margin: 0; text-wrap: balance; }
.mk-h2      { font-family: var(--mk-font-display); color: var(--mk-ink); font-weight: 600; font-size: 44px; line-height: 52px; letter-spacing: -0.028em; margin: 0; text-wrap: balance; }
.mk-h3-l    { font-family: var(--mk-font-display); color: var(--mk-ink); font-weight: 600; font-size: 24px; line-height: 30px; letter-spacing: -0.02em;  margin: 0; }
.mk-h3      { font-family: var(--mk-font-display); color: var(--mk-ink); font-weight: 600; font-size: 20px; line-height: 28px; letter-spacing: -0.012em; margin: 0; }
.mk-h3-s    { font-family: var(--mk-font-display); color: var(--mk-ink); font-weight: 600; font-size: 17px; line-height: 24px; letter-spacing: -0.01em;  margin: 0; }
.mk-lead    { font-family: var(--mk-font-body); color: var(--mk-muted); font-size: 18px; line-height: 28px; letter-spacing: -0.01em; margin: 0; }
.mk-body    { font-family: var(--mk-font-body); color: var(--mk-muted); font-size: 14.5px; line-height: 22px; letter-spacing: -0.006em; margin: 0; }
.mk-label   { font-family: var(--mk-font-mono); color: var(--mk-faint); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
.mk-strong  { color: var(--mk-ink); font-weight: 500; }
.mk-faint   { color: var(--mk-faint-large); } /* the grey second line of a two-line title */
@media (max-width: 767px) {
  .mk-display { font-size: 38px; line-height: 44px; letter-spacing: -0.03em; }
  .mk-title   { font-size: 34px; line-height: 40px; letter-spacing: -0.025em; }
  .mk-h2      { font-size: 28px; line-height: 34px; letter-spacing: -0.02em; }
  .mk-h3-l    { font-size: 21px; line-height: 27px; }
  .mk-h3      { font-size: 18px; line-height: 24px; }
  .mk-lead    { font-size: 16px; line-height: 24px; }
}

/* Buttons: md 40px, lg 48px. Dark = primary, light = secondary, accent = the
 * one action on the dark card. .nav-cta is a dark md button. */
.mk-button, .nav-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 12px; border: none; cursor: pointer;
  font-family: var(--mk-font-body); font-size: 14px; font-weight: 500; letter-spacing: -0.006em; line-height: 20px;
  text-decoration: none; white-space: nowrap; box-sizing: border-box;
  transition: transform 200ms var(--mk-ease), box-shadow 200ms var(--mk-ease), background-color 200ms var(--mk-ease);
}
.mk-button-lg { height: 48px; padding: 0 20px; font-size: 15px; }
.mk-button-block { display: flex; width: 100%; }
.mk-button-dark, .nav-cta { background: #2e2e2e; color: #fff; box-shadow: var(--mk-shadow-btn-dark); }
.mk-button-light  { background: var(--mk-surface); color: var(--mk-ink); box-shadow: var(--mk-shadow-btn-light); }
.mk-button-accent { background: var(--mk-accent); color: #fff; box-shadow: var(--mk-shadow-btn-accent); }
.mk-button:hover, .nav-cta:hover { transform: translateY(-1px); }
.mk-button-dark:hover, .nav-cta:hover { background: #000; }
.mk-button-light:hover  { background: var(--mk-surface-2); }
.mk-button-accent:hover { background: var(--mk-accent-hover); }
.mk-button:disabled, .mk-button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.mk-button svg { flex-shrink: 0; }
.mk-button-arrow { display: inline-flex; transition: transform 200ms var(--mk-ease); }
.mk-button:hover .mk-button-arrow { transform: translateX(2px); }

/* Pills: eyebrow (above a heading), tag (category / meta), badge (status) */
.mk-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 9px;
  background: var(--mk-surface); box-shadow: var(--mk-shadow-badge); color: #525252;
  font-family: var(--mk-font-body); font-size: 13px; font-weight: 500; letter-spacing: -0.006em; white-space: nowrap;
}
.mk-dark .mk-eyebrow { background: var(--mk-dark-2); box-shadow: 0 0 0 1px var(--mk-dark-line); color: #e5e5e5; }
.mk-tag {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 9px;
  background: var(--mk-surface-2); color: var(--mk-muted);
  font-family: var(--mk-font-body); font-size: 12.5px; font-weight: 500; letter-spacing: -0.004em; white-space: nowrap;
}
.mk-tag-accent { background: var(--mk-accent-soft); color: var(--mk-accent); }
.mk-badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 9px;
  background: var(--mk-accent); color: #fff; font-family: var(--mk-font-body); font-size: 12px; font-weight: 600; white-space: nowrap;
}

/* Cards + frames + icon tiles */
.mk-card { background: var(--mk-surface); border-radius: 20px; box-shadow: var(--mk-shadow-card); }
.mk-card-pad { padding: 24px; }
.mk-card-pad-lg { padding: 40px; } /* long-form cards: legal text, articles */
.mk-frame { background: var(--mk-surface-2); border-radius: 24px; padding: 8px; box-shadow: inset 0 0 0 1px var(--mk-line); }
.mk-frame > .mk-card { border-radius: 16px; }
.mk-icon-tile {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mk-accent-soft); color: var(--mk-accent);
}
@media (max-width: 767px) { .mk-card-pad, .mk-card-pad-lg { padding: 20px; } }

/* Table: inside a white card, hairline rows, mono heads; .is-us highlights
 * the Scaniam column. Scrolls sideways inside its card on small screens. */
.mk-table-wrap { background: var(--mk-surface); border-radius: 20px; box-shadow: var(--mk-shadow-card); overflow-x: auto; }
.mk-table { width: 100%; border-collapse: collapse; font-family: var(--mk-font-body); }
.mk-table th {
  text-align: left; vertical-align: bottom; padding: 14px 20px; border-bottom: 1px solid var(--mk-line);
  font-family: var(--mk-font-mono); font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--mk-faint);
}
.mk-table td {
  text-align: left; vertical-align: top; padding: 14px 20px; border-bottom: 1px solid var(--mk-line);
  font-size: 14.5px; line-height: 22px; color: var(--mk-text);
}
.mk-table tr:last-child td { border-bottom: none; }
.mk-table td:first-child { color: var(--mk-ink); font-weight: 500; }
.mk-table .is-us { background: var(--mk-accent-soft); }
.mk-table th.is-us { color: var(--mk-accent); }
@media (max-width: 767px) { .mk-table th, .mk-table td { padding: 12px 16px; } }

/* Long-form text: blog posts, KB articles, legal pages */
.mk-prose { max-width: 680px; font-family: var(--mk-font-body); color: var(--mk-text); font-size: 17px; line-height: 1.7; }
.mk-prose > * + * { margin-top: 18px; }
.mk-prose h2 { font-family: var(--mk-font-display); color: var(--mk-ink); font-weight: 600; font-size: 28px; line-height: 34px; letter-spacing: -0.02em; margin-top: 44px; }
.mk-prose h3 { font-family: var(--mk-font-display); color: var(--mk-ink); font-weight: 600; font-size: 20px; line-height: 28px; letter-spacing: -0.012em; margin-top: 32px; }
.mk-prose h2 + *, .mk-prose h3 + * { margin-top: 10px; }
.mk-prose ul, .mk-prose ol { padding-left: 22px; }
.mk-prose ul { list-style: disc; }
.mk-prose ol { list-style: decimal; }
.mk-prose li + li { margin-top: 6px; }
.mk-prose li::marker { color: var(--mk-faint); }
.mk-prose strong { color: var(--mk-ink); font-weight: 600; }
.mk-prose a:not(.mk-button) { color: var(--mk-accent); text-decoration: underline; text-decoration-color: var(--mk-accent-ring); text-underline-offset: 3px; transition: color 150ms linear; }
.mk-prose a:not(.mk-button):hover { color: var(--mk-accent-hover); text-decoration-color: currentColor; }
.mk-prose code { font-family: var(--mk-font-mono); font-size: 0.86em; background: var(--mk-surface-2); border-radius: 6px; padding: 2px 6px; color: var(--mk-ink); }
.mk-prose pre { font-family: var(--mk-font-mono); font-size: 14px; line-height: 1.6; background: var(--mk-surface-2); border-radius: 12px; padding: 16px 18px; overflow-x: auto; }
.mk-prose pre code { background: none; padding: 0; }
.mk-prose .mk-note { font-size: inherit; line-height: 1.6; padding: 16px 20px; }
.mk-prose blockquote { border-left: 2px solid var(--mk-line-strong); padding-left: 18px; color: var(--mk-muted); }
.mk-prose img { max-width: 100%; height: auto; border-radius: 16px; box-shadow: 0 0 0 1px var(--mk-line); }
.mk-prose hr { border: none; height: 1px; background: var(--mk-line); margin: 36px 0; }
.mk-prose table {
  display: block; overflow-x: auto; width: 100%; border-collapse: collapse;
  background: var(--mk-surface); border-radius: 20px; box-shadow: var(--mk-shadow-card); font-size: 14.5px; line-height: 22px;
}
.mk-prose th {
  text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--mk-line);
  font-family: var(--mk-font-mono); font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--mk-faint);
}
.mk-prose td { padding: 14px 20px; border-bottom: 1px solid var(--mk-line); vertical-align: top; }
.mk-prose tr:last-child td { border-bottom: none; }
@media (max-width: 767px) {
  .mk-prose { font-size: 16px; }
  .mk-prose h2 { font-size: 24px; line-height: 30px; }
  .mk-prose th, .mk-prose td { padding: 12px 16px; }
}

/* Form fields */
.mk-field { display: flex; flex-direction: column; gap: 6px; }
.mk-field-label { font-family: var(--mk-font-body); font-size: 13.5px; line-height: 20px; font-weight: 500; color: var(--mk-ink); }
.mk-input {
  width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: none; box-sizing: border-box;
  background: var(--mk-surface); color: var(--mk-ink); font-family: var(--mk-font-body); font-size: 14.5px;
  box-shadow: inset 0 0 0 1px var(--mk-line-strong); outline: none;
  transition: box-shadow 150ms var(--mk-ease);
}
textarea.mk-input { height: auto; min-height: 120px; padding: 12px 14px; line-height: 22px; resize: vertical; }
.mk-input::placeholder { color: var(--mk-faint); }
.mk-input:focus { box-shadow: inset 0 0 0 1px var(--mk-accent), 0 0 0 3px var(--mk-accent-ring); }
.mk-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--mk-danger), 0 0 0 3px var(--mk-danger-soft); }
.mk-input:disabled { background: var(--mk-surface-2); color: var(--mk-muted); cursor: not-allowed; }
.mk-field-help { font-size: 12.5px; line-height: 18px; color: var(--mk-muted); }
/* Phone field: country picker + number inside one .mk-input-looking box
 * (PhoneInput variant="mk"). */
.mk-phone {
  display: flex; align-items: stretch; height: 44px; border-radius: 12px; background: var(--mk-surface);
  box-shadow: inset 0 0 0 1px var(--mk-line-strong); transition: box-shadow 150ms var(--mk-ease);
  font-family: var(--mk-font-body); font-size: 14.5px; color: var(--mk-ink);
}
.mk-phone > div:first-child { display: flex; align-items: center; gap: 4px; padding: 0 6px 0 14px; position: relative; font-weight: 500; color: var(--mk-muted); }
.mk-phone > div:first-child span { font-size: 14.5px; font-weight: 500; color: var(--mk-muted); }
.mk-phone > div:nth-child(2) { width: 1px; margin: 10px 0; background: var(--mk-line); }
.mk-phone:focus-within { box-shadow: inset 0 0 0 1px var(--mk-accent), 0 0 0 3px var(--mk-accent-ring); }
.mk-phone[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--mk-danger), 0 0 0 3px var(--mk-danger-soft); }
.mk-phone-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 0 14px 0 10px; font: inherit; color: var(--mk-ink); }
.mk-phone-input::placeholder { color: var(--mk-faint); }

/* Price on a plan card: big display figure + muted suffix ("/mo") */
.mk-price { font-family: var(--mk-font-display); font-size: 42px; line-height: 1; font-weight: 600; letter-spacing: -0.035em; color: var(--mk-ink); }
.mk-price-suffix { font-family: var(--mk-font-body); font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--mk-muted); margin-left: 2px; }

/* Numbered step marker (how-it-works lists). Dark variant inside .mk-dark. */
.mk-step {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 9px; background: var(--mk-surface-2); color: var(--mk-ink);
  font-family: var(--mk-font-mono); font-size: 13px; font-weight: 500;
}
.mk-dark .mk-step { background: var(--mk-dark-2); color: #fff; box-shadow: 0 0 0 1px var(--mk-dark-line); }

/* Spinner (buttons, loading states) and the "or" divider */
@keyframes mkSpin { to { transform: rotate(360deg); } }
.mk-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; display: inline-block; flex-shrink: 0; animation: mkSpin 700ms linear infinite; }
.mk-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.mk-or::before, .mk-or::after { content: ''; flex: 1; height: 1px; background: var(--mk-line); }

/* Notices: one tinted card per meaning */
.mk-note { border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 21px; color: var(--mk-ink); }
.mk-note-info    { background: var(--mk-accent-soft);  box-shadow: inset 0 0 0 1px var(--mk-accent-ring); }
.mk-note-success { background: var(--mk-success-soft); box-shadow: inset 0 0 0 1px var(--mk-success-line); }
.mk-note-danger  { background: var(--mk-danger-soft);  box-shadow: inset 0 0 0 1px var(--mk-danger-line); }

/* FAQ (accordion): hairline rows, + turns to x when open */
.mk-faq { border-top: 1px solid var(--mk-line); }
.mk-faq details { border-bottom: 1px solid var(--mk-line); }
.mk-faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px;
  padding: 16px 2px; font-size: 15.5px; line-height: 22px; font-weight: 500; color: var(--mk-ink); letter-spacing: -0.006em;
}
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after { content: '+'; color: var(--mk-deco); font-size: 18px; line-height: 22px; transition: transform 200ms var(--mk-ease); flex-shrink: 0; }
.mk-faq details[open] summary::after { transform: rotate(45deg); }
.mk-card > .mk-faq, .mk-card-pad > .mk-faq { border-top: none; }
.mk-card .mk-faq details:last-child { border-bottom: none; }
.mk-faq details > :not(summary) { padding: 0 2px 18px; font-size: 14.5px; line-height: 1.6; color: var(--mk-muted); margin: 0; }

/* Filter chips (a row of choices, one selected) */
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chip {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 9999px; border: none; cursor: pointer;
  background: transparent; color: var(--mk-muted); font-family: var(--mk-font-body); font-size: 13.5px; font-weight: 500;
  text-decoration: none; white-space: nowrap; transition: color 150ms linear, background-color 150ms linear;
}
.mk-chip:hover { color: var(--mk-ink); }
.mk-chip[aria-pressed="true"], .mk-chip[aria-current="true"], .mk-chip.is-on { background: var(--mk-surface); color: var(--mk-ink); box-shadow: var(--mk-shadow-badge); }

/* Breadcrumbs */
.mk-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; color: var(--mk-faint); }
.mk-crumbs a { color: var(--mk-muted); text-decoration: none; transition: color 150ms linear; }
.mk-crumbs a:hover { color: var(--mk-ink); }
.mk-crumbs [aria-current="page"] { color: var(--mk-ink); }

@media (prefers-reduced-motion: reduce) {
  .mk-button:hover, .nav-cta:hover, .mk-card-hover:hover { transform: none; }
}

/* ── Signature: the two marks that make the site Scaniam ─────────────────────
 *
 *  Borrowed from what Scaniam is (a QR scanned at a booth, a gift code), the way
 *  AlignUI borrows rulers and guides from design tools. Blue only on the ACTIVE
 *  moment (a divider in view); at rest everything is grey.
 *  Rules: docs/MARKETING_SKIN.md "Signature". Shown at /styleguide.
 *
 *  1. QR eye    .mk-eye (-sm 8 / 12 / -lg 16): the nested-square corner mark of a
 *               QR code. Divider handles + centre, list bullets (.mk-list).
 *  2. Ticket    .mk-ticket: the gift-code ticket. Notched sides at a dashed
 *               perforation, a mono code and a barcode stub. Pricing + one CTA.
 */

/* 1. QR eye */
.mk-eye {
  --eye: 12px; width: var(--eye); height: var(--eye); flex-shrink: 0;
  position: relative; display: inline-block; vertical-align: middle;
  border-radius: calc(var(--eye) * 0.24); color: var(--mk-line-strong);
  box-shadow: inset 0 0 0 calc(var(--eye) * 0.15) currentColor;
  transition: color 400ms var(--mk-ease);
}
.mk-eye::after {
  content: ''; position: absolute; inset: calc(var(--eye) * 0.32);
  border-radius: calc(var(--eye) * 0.08); background: currentColor;
}
.mk-eye-sm { --eye: 8px; }
.mk-eye-lg { --eye: 16px; }
.mk-eye.is-on { color: var(--mk-accent); }
.mk-dark .mk-eye { color: rgba(255, 255, 255, 0.22); }

/* Divider: faded rails, a small eye at each end, an eye tile in the middle that
 * turns blue while the divider is on screen. */
.mk-divider { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px; }
.mk-divider-rail { flex: 1; max-width: 260px; height: 1px; position: relative; display: flex; align-items: center; }
.mk-divider-rail:first-child { background: linear-gradient(90deg, transparent, var(--mk-line-strong)); }
.mk-divider-rail:last-child { background: linear-gradient(90deg, var(--mk-line-strong), transparent); justify-content: flex-end; }
.mk-divider-rail .mk-eye { background: var(--mk-page); }
.mk-divider-tile {
  width: 32px; height: 32px; border-radius: 9px; background: var(--mk-surface); box-shadow: var(--mk-shadow-badge);
  display: inline-flex; align-items: center; justify-content: center;
}

/* List with eye bullets (feature lists, plan features) */
.mk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mk-list > li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 22px; color: var(--mk-text); }
.mk-list > li::before {
  content: ''; flex-shrink: 0; width: 8px; height: 8px; margin-top: 7px; border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px var(--mk-deco);
  background: radial-gradient(circle, var(--mk-deco) 0 1.6px, transparent 1.8px);
}
.mk-list > li.is-plain { display: block; }
.mk-list > li.is-plain::before { display: none; }
.mk-list.is-accent > li::before {
  box-shadow: inset 0 0 0 1.5px var(--mk-accent);
  background: radial-gradient(circle, var(--mk-accent) 0 1.6px, transparent 1.8px);
}

/* 2. Ticket: the shadow lives on the wrapper (a mask would cut a box-shadow off) */
.mk-ticket-shadow { filter: drop-shadow(0 0 0.6px rgba(41, 41, 41, 0.45)) drop-shadow(0 8px 14px rgba(41, 41, 41, 0.06)); height: 100%; }
.mk-ticket {
  --notch: 50%; --notch-r: 11px;
  position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--mk-surface); border-radius: 20px;
  -webkit-mask:
    radial-gradient(circle var(--notch-r) at 0 var(--notch), transparent 98%, #000) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle var(--notch-r) at 100% var(--notch), transparent 98%, #000) 100% 0 / 51% 100% no-repeat;
          mask:
    radial-gradient(circle var(--notch-r) at 0 var(--notch), transparent 98%, #000) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle var(--notch-r) at 100% var(--notch), transparent 98%, #000) 100% 0 / 51% 100% no-repeat;
}
.mk-ticket-main { padding: 28px 24px 22px; }
.mk-ticket-perf { height: 0; margin: 0 20px; border-top: 1.5px dashed var(--mk-line-strong); flex-shrink: 0; }
.mk-ticket-stub { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.mk-ticket-code {
  font-family: var(--mk-font-mono); font-size: 11.5px; line-height: 16px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mk-faint);
}
.mk-barcode {
  display: inline-block; width: 92px; height: 26px; opacity: 0.8;
  background: repeating-linear-gradient(90deg,
    var(--mk-ink) 0 2px, transparent 2px 4px, var(--mk-ink) 4px 5px, transparent 5px 7px,
    var(--mk-ink) 7px 10px, transparent 10px 11px, var(--mk-ink) 11px 12px, transparent 12px 15px);
}
.mk-ticket.is-featured { box-shadow: inset 0 0 0 2px var(--mk-ink); }
.mk-ticket.is-featured .mk-ticket-perf { border-top-color: var(--mk-faint); }
.mk-ticket.is-muted { background: var(--mk-surface-2); }

@media (prefers-reduced-motion: reduce) {
  .mk-eye { transition: none; }
}

/* ── Feature vignettes ────────────────────────────────────────────────────────
 *
 *  A vignette shows ONE moment of a feature (the instant it pays off) as a
 *  simplified product UI, instead of a screenshot or a lone icon. Rules:
 *  docs/MARKETING_SKIN.md "Feature vignettes". Everything inside .mk-vg-inner
 *  is sized in em, and the inner font size follows the stage width (container
 *  query units), so a vignette scales like an image and stays sharp.
 */
.mk-vg {
  position: relative; overflow: hidden; container-type: inline-size; aspect-ratio: 1.4;
  border-radius: 16px; background: var(--mk-surface);
  background-image:
    radial-gradient(55% 55% at 50% 95%, rgba(67, 102, 176, 0.13), transparent 70%),
    radial-gradient(40% 40% at 15% 10%, rgba(67, 102, 176, 0.06), transparent 70%);
}
.mk-vg-inner { position: absolute; inset: 0; font-size: 2.15cqw; font-family: var(--mk-font-body); color: var(--mk-ink); }
/* A phone in the scene: dark bezel, white screen. */
.mk-vg-phone {
  position: absolute; width: 21em; border-radius: 2.6em; padding: 0.6em; background: #16161a;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 2.4em 4em -1.6em rgba(23, 23, 31, 0.35), 0 0.6em 1.2em -0.6em rgba(23, 23, 31, 0.2);
}
.mk-vg-screen { border-radius: 1.9em; background: #fff; overflow: hidden; }
.mk-vg-skel { display: block; height: 0.62em; border-radius: 1em; background: var(--mk-line-strong); }
/* Callout: names the outcome in a few words. */
.mk-vg-pill {
  position: absolute; display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap;
  padding: 0.55em 0.9em 0.55em 0.6em; border-radius: 0.9em; background: var(--mk-surface);
  box-shadow: var(--mk-shadow-badge); font-size: 1.05em; font-weight: 500; color: var(--mk-ink);
}
.mk-vg-pill .mk-vg-dot {
  width: 1.7em; height: 1.7em; border-radius: 0.55em; display: inline-flex; align-items: center; justify-content: center;
  background: var(--mk-accent-soft); color: var(--mk-accent);
}
/* One slow loop: callouts float, the key control "presses". The resting state
 * (0% / 100%) is the finished picture, which is what prerender + reduced motion show. */
@keyframes mkVgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.35em); } }
@keyframes mkVgPress { 0%, 70%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } 78% { transform: scale(0.94); } 86% { transform: scale(1); box-shadow: 0 0 0 0.45em rgba(239, 68, 68, 0.18); } }
@keyframes mkVgToast { 0%, 60% { opacity: 1; transform: none; } 66% { opacity: 0; transform: translateY(0.4em); } 80% { opacity: 0; transform: translateY(0.4em); } 88%, 100% { opacity: 1; transform: none; } }
.mk-vg-float { animation: mkVgFloat 6s ease-in-out infinite; }
.mk-vg-float-2 { animation: mkVgFloat 6s ease-in-out 1.5s infinite; }
.mk-vg-press { animation: mkVgPress 6s var(--mk-ease) infinite; }
.mk-vg-toast { animation: mkVgToast 6s var(--mk-ease) infinite; }
@media (prefers-reduced-motion: reduce) {
  .mk-vg-float, .mk-vg-float-2, .mk-vg-press, .mk-vg-toast { animation: none; }
}

/* ── Game covers ──────────────────────────────────────────────────────────────
 *
 *  The hero of every booth game (/games, /games/:slug, the game cards). A
 *  vignette at 1200x630 (the OG image shape): a phone showing the game's
 *  payoff moment, glossy game art, two callouts, and one slow auto-play loop
 *  (8s) that replays the game. The RESTING frame (the base styles; keyframes
 *  only depart from it) is the finished picture: prerender, reduced motion and
 *  the OG JPGs (scripts/render-game-covers.mjs) show it. The game's own colours
 *  live only inside the game art. Rules: docs/MARKETING_SKIN.md "Game covers".
 *  Components: src/components/marketing/game-covers/.
 */
.mk-gc {
  position: relative; overflow: hidden; container-type: inline-size; aspect-ratio: 1200 / 630;
  background: var(--mk-surface);
  background-image:
    radial-gradient(48% 70% at 50% 104%, rgba(67, 102, 176, 0.17), transparent 70%),
    radial-gradient(34% 52% at 10% 0%, rgba(67, 102, 176, 0.07), transparent 70%),
    radial-gradient(30% 48% at 92% 8%, rgba(67, 102, 176, 0.05), transparent 70%);
}
.mk-gc-inner { position: absolute; inset: 0; font-size: 1.6cqw; font-family: var(--mk-font-body); color: var(--mk-ink); }
/* The phone: polished bezel, a static glass highlight on the screen. */
.mk-gc-phone {
  position: absolute; left: 50%; top: 1.5em; width: 16em; transform: translateX(-50%);
  border-radius: 2.6em; padding: 0.55em; background: linear-gradient(150deg, #34343c 0%, #121216 38%, #0b0b0e 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 0 0 0.12em rgba(255, 255, 255, 0.08),
    0 2.6em 4.4em -1.6em rgba(23, 23, 31, 0.38), 0 0.7em 1.4em -0.6em rgba(23, 23, 31, 0.22);
}
.mk-gc-phone::after {
  content: ""; position: absolute; inset: 0.55em; border-radius: 2.05em; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) 26%, rgba(255, 255, 255, 0) 27%);
}
.mk-gc-screen {
  position: relative; height: 29.2em; border-radius: 2.05em; background: #fff; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; padding: 1.25em 1em 1em; text-align: center;
}
.mk-gc-head { font-size: 0.72em; font-weight: 500; color: var(--mk-muted); margin-bottom: 0.9em; display: inline-flex; align-items: center; gap: 0.4em; }
.mk-gc-head b { width: 1.5em; height: 1.5em; border-radius: 0.45em; background: var(--mk-ink); color: #fff; font-size: 0.85em; display: inline-flex; align-items: center; justify-content: center; }
.mk-gc-art { position: relative; flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; }
/* The payoff under the game: what they won + the gift code. */
.mk-gc-result { width: 100%; margin-top: 0.8em; }
.mk-gc-won { display: block; font-size: 0.6em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mk-accent); }
.mk-gc-prize { display: block; font-family: var(--mk-font-display); font-weight: 600; font-size: 1.3em; letter-spacing: -0.02em; line-height: 1.15; margin: 0.15em 0 0.55em; }
.mk-gc-code {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6em; border-radius: 0.85em;
  background: var(--mk-surface-2); padding: 0.55em 0.8em;
}
.mk-gc-code .mono { font-family: var(--mk-font-mono); font-size: 1.05em; font-weight: 500; letter-spacing: 0.22em; }
.mk-gc-bars { display: flex; gap: 0.08em; height: 1.5em; }
.mk-gc-bars i { display: block; height: 100%; background: var(--mk-ink); }
/* Gloss: a fixed light on round or flat game art (it never moves). */
.mk-gc-gloss { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 42%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%); }
/* Confetti in the game's colours, around the phone. */
.mk-gc-bit { position: absolute; width: 0.55em; height: 0.95em; border-radius: 0.18em; box-shadow: inset 0 0.15em 0 rgba(255, 255, 255, 0.45); }
.mk-gc-bit.is-dot { width: 0.6em; height: 0.6em; border-radius: 50%; }
/* A fingertip, only seen while the game plays (hidden at rest). */
.mk-gc-touch { position: absolute; width: 2.2em; height: 2.2em; margin: -1.1em 0 0 -1.1em; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(67, 102, 176, 0.45) 0 35%, rgba(67, 102, 176, 0.14) 36% 100%); box-shadow: 0 0 0 0.12em rgba(255, 255, 255, 0.9); }
/* Callouts: left-top and right-bottom of the phone. Bigger on a mid-size cover
 * (a page hero) so they stay readable; gone on a small one (cards). */
.mk-gc-pill-l { left: 6.5em; top: 7.5em; }
.mk-gc-pill-r { right: 5.5em; bottom: 8em; }
@container (max-width: 760px) {
  .mk-gc .mk-vg-pill { font-size: 1.3em; }
  .mk-gc .mk-gc-pill-l { left: 2em; top: 6em; }
  .mk-gc .mk-gc-pill-r { right: 1.5em; bottom: 6.5em; }
}
@container (max-width: 480px) { .mk-gc .mk-vg-pill { display: none; } }

/* Shared loop (8s). 0-54%: the finished picture. Then the game replays and
 * lands back on it. */
@keyframes mkGcResult { 0%, 52% { opacity: 1; transform: none; } 56%, 86% { opacity: 0; transform: translateY(0.6em) scale(0.97); } 93%, 100% { opacity: 1; transform: none; } }
@keyframes mkGcBurst { 0%, 50% { opacity: 1; transform: none; } 55%, 87% { opacity: 0; transform: translateY(1.2em) scale(0.4) rotate(-40deg); } 93% { opacity: 1; transform: translateY(-0.3em) scale(1.2); } 100% { opacity: 1; transform: none; } }
@keyframes mkGcSpin { 0%, 57% { transform: rotate(var(--r, 0deg)); animation-timing-function: cubic-bezier(0.12, 0.7, 0.18, 1); } 87%, 100% { transform: rotate(calc(var(--r, 0deg) + 1800deg)); } }
@keyframes mkGcWipe { 0%, 54% { clip-path: inset(0 0 0 100%); opacity: 0; } 57% { clip-path: inset(0 0 0 0); opacity: 1; } 62% { clip-path: inset(0 0 0 0); opacity: 1; } 86%, 100% { clip-path: inset(0 0 0 100%); opacity: 1; } }
@keyframes mkGcScratch { 0%, 61% { opacity: 0; left: 6%; top: 30%; } 63% { opacity: 1; left: 6%; top: 30%; } 68% { left: 30%; top: 70%; } 73% { left: 52%; top: 28%; } 78% { left: 72%; top: 72%; } 83% { left: 94%; top: 40%; opacity: 1; } 86%, 100% { opacity: 0; left: 94%; top: 40%; } }
@keyframes mkGcDraw { 0%, 52% { stroke-dashoffset: 0; } 55%, 60% { stroke-dashoffset: 1; } 74%, 100% { stroke-dashoffset: 0; } }
@keyframes mkGcPick { 0%, 60% { opacity: 1; transform: none; } 62%, 76% { opacity: 0; transform: scale(0.94); } 80% { opacity: 1; transform: scale(1.04); } 84%, 100% { opacity: 1; transform: none; } }
@keyframes mkGcTap { 0%, 66% { opacity: 0; transform: translate(1.6em, 2.4em); } 70% { opacity: 1; transform: none; } 76% { opacity: 1; transform: scale(0.8); } 80%, 100% { opacity: 0; transform: none; } }
@keyframes mkGcFlip { 0%, 54% { transform: rotateY(0deg); } 58%, 66% { transform: rotateY(180deg); } 72%, 100% { transform: rotateY(0deg); } }
@keyframes mkGcDoor { 0%, 54% { transform: rotateY(-72deg); } 58%, 70% { transform: rotateY(0deg); } 84%, 100% { transform: rotateY(-72deg); } }
@keyframes mkGcGlow { 0%, 54% { opacity: 1; } 58%, 72% { opacity: 0; } 86%, 100% { opacity: 1; } }
.mk-gc-loop-result { animation: mkGcResult 8s var(--mk-ease) infinite; }
.mk-gc-loop-burst { animation: mkGcBurst 8s var(--mk-ease) infinite; }
.mk-gc-loop-spin { animation: mkGcSpin 8s linear infinite; }
.mk-gc-loop-wipe { animation: mkGcWipe 8s linear infinite; }
.mk-gc-loop-scratch { animation: mkGcScratch 8s ease-in-out infinite; }
.mk-gc-loop-draw { animation: mkGcDraw 8s var(--mk-ease) infinite; }
.mk-gc-loop-pick { animation: mkGcPick 8s var(--mk-ease) infinite; }
.mk-gc-loop-tap { animation: mkGcTap 8s var(--mk-ease) infinite; }
.mk-gc-loop-flip { animation: mkGcFlip 8s var(--mk-ease) infinite; }
.mk-gc-loop-door { animation: mkGcDoor 8s var(--mk-ease-out) infinite; }
.mk-gc-loop-glow { animation: mkGcGlow 8s var(--mk-ease) infinite; }
/* Per-element stagger (--d) on top of a per-cover offset (--gc-delay, the /games mosaic). */
.mk-gc [class*="mk-gc-loop"] { animation-delay: calc(var(--gc-delay, 0s) + var(--d, 0s)); }
/* A cover inside a card plays only while the card is hovered or focused. */
.mk-gc-host:not(:hover):not(:focus-visible) .mk-gc :is([class*="mk-gc-loop"], .mk-vg-float, .mk-vg-float-2) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .mk-gc [class*="mk-gc-loop"] { animation: none; }
}

/* ── Homepage motion ──────────────────────────────────────────────────────────
 *
 *  Small motions that each play once (rules: docs/MARKETING_SKIN.md "Homepage
 *  motion"; components: src/components/marketing/HomeMotion.tsx). Resting
 *  state = the finished page; reduced motion jumps to it (index.css).
 */
/* Hero title: each word rises out of its own mask, one after another. */
@keyframes mkWordUp { from { transform: translateY(105%); opacity: 0; } 50% { opacity: 1; } to { transform: none; opacity: 1; } }
.mk-word { display: inline-block; vertical-align: top; clip-path: inset(-0.15em -0.1em -0.22em -0.1em); }
.mk-word > span { display: inline-block; animation: mkWordUp 760ms var(--mk-ease-out) both; animation-delay: calc(100ms + var(--i, 0) * 55ms); }
.mk-taken-over .mk-word > span { animation: none; }
/* The "?" after the typewriter word hops each time a new word is typed. */
@keyframes mkHop { 0%, 100% { transform: none; } 35% { transform: translateY(-0.2em) rotate(-10deg); } 65% { transform: translateY(0.02em) rotate(5deg); } }
.mk-hop { display: inline-block; transform-origin: 50% 90%; animation: mkHop 560ms var(--mk-ease-out) 1; }
/* A heading that fills from grey to ink, word by word, when it scrolls in. */
@keyframes mkInk { from { color: var(--mk-deco); } }
.mk-fill.is-armed > span { color: var(--mk-deco); }
.mk-fill.is-in > span { animation: mkInk 420ms var(--mk-ease) both; animation-delay: calc(250ms + var(--i, 0) * 65ms); }
/* Journey line (HomeMotion.tsx JourneyLine): one line snaking through the
 * homepage with the scroll, down one margin, across at each section break (in
 * place of the divider), down the other margin. Wide screens only. */
.mk-journey { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.mk-journey svg { position: absolute; left: 0; top: 0; overflow: visible; }
.mk-journey-fill { fill: none; stroke-linecap: butt; stroke-linejoin: round; }
.mk-journey-fill { transition: stroke 300ms var(--mk-ease); }
.mk-journey-eye {
  position: absolute; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 9px; background: var(--mk-surface); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--mk-shadow-badge), 0 0 0 6px color-mix(in srgb, var(--c, var(--mk-accent)) 14%, transparent);
}
.mk-journey-eye .mk-eye { color: var(--c, var(--mk-accent)); transition: color 300ms var(--mk-ease); }
/* The line takes over the section breaks: dividers keep their space, not their marks. */
.mk-journey-on .mk-divider { visibility: hidden; }
/* Key words: ink + 500 like .mk-strong; a highlighter stroke in the section colour draws under them once reached. */
.mk-key {
  color: var(--mk-ink); font-weight: 500; padding: 0 0.1em; margin: 0 -0.1em;
  background-image: linear-gradient(color-mix(in srgb, var(--c, var(--mk-accent)) 24%, transparent), color-mix(in srgb, var(--c, var(--mk-accent)) 24%, transparent));
  background-repeat: no-repeat; background-position: 0 88%; background-size: 0% 0.45em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 800ms var(--mk-ease-out);
}
.mk-key.is-on { background-size: 100% 0.45em; }
.mk-dark .mk-key { color: #fff; }
/* Video poster: a slow drift on the picture and a soft ring breathing on the play button. */
@keyframes mkDrift { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes mkBreathe { 0%, 100% { box-shadow: var(--mk-shadow-btn-accent), 0 0 0 0 var(--mk-accent-ring); } 50% { box-shadow: var(--mk-shadow-btn-accent), 0 0 0 0.9em rgba(67, 102, 176, 0); } }
.mk-poster-drift { animation: mkDrift 18s ease-in-out infinite alternate; }
.mk-play-breathe { animation: mkBreathe 2.8s ease-in-out infinite; }
/* Dashboard bars grow once when the dashboard scrolls in. */
@keyframes mkBarGrow { from { transform: scaleX(0); } }
.mk-dash-in .mk-bar { transform-origin: left center; animation: mkBarGrow 900ms var(--mk-ease-out) both; animation-delay: calc(300ms + var(--i, 0) * 90ms); }
@media (prefers-reduced-motion: reduce) {
  .mk-poster-drift, .mk-play-breathe { animation: none; }
}