/* MK Spark Interactive: shared look for the business pages (same family as the homepage).
   Dark header, dark top band and dark footer like the homepage; light reading area in between.
   Load AFTER a page's own <style> so these values win. */
:root {
  --mk-obsidian: #07090e;
  --mk-midnight: #101624;
  --mk-neon: #00f0ff;
  --mk-cyan: #0e7490;      /* neon cyan darkened so it reads on light backgrounds (5.4:1 on white) */
  --mk-cyan-deep: #155e75;
  --mk-edge: #1f2937;
  --bg: #e9edf2;          /* soft blue-grey, easier on eyes coming from the dark homepage */
  --surface: #f6f8fa;
  --ink: #0f172a;
  --muted: #475569;
  --line: #d5dce5;
  --accent: var(--mk-cyan);
  --accent-soft: #ecfeff;
  --ok: #047857;
  --ok-soft: #ecfdf5;
}
html { -webkit-text-size-adjust: 100%; }
body {
  background: linear-gradient(#0b1018 0, var(--bg) 160px) no-repeat, var(--bg) !important;
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
a { color: var(--mk-cyan); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #fbbf24; outline-offset: 2px;
}

/* Headings: the homepage's heavy sans instead of the old serif */
.serif, h1, h2, h3 { font-family: inherit !important; }
h1 { font-weight: 900 !important; letter-spacing: -0.025em; }
h2 { font-weight: 800 !important; letter-spacing: -0.02em; }
h3 { font-weight: 700 !important; }
.n, .amount { font-family: inherit !important; font-weight: 800; }

/* Buttons */
.cta { background: var(--mk-cyan); color: #fff; border-radius: 10px; }
.cta:hover { background: var(--mk-cyan-deep); }
.cta.ghost { background: transparent; color: var(--mk-cyan); border: 1px solid #a5d8e2; }

/* Header: same feel as the homepage */
header.top {
  background: var(--mk-obsidian) !important;
  border-bottom: 1px solid var(--mk-edge) !important;
  padding: 14px 0 !important;
  position: relative; z-index: 50;
}
header.top .wrap { max-width: 1100px; gap: 10px 18px; }
header.top .brand { display: inline-flex; align-items: center; gap: 0; text-decoration: none; color: #e5e7eb; }
.mk-logo { display: inline-flex; align-items: baseline; font-weight: 900; letter-spacing: .18em; font-size: 20px; white-space: nowrap; }
.mk-logo .mk { color: var(--mk-neon); text-shadow: 0 0 4px rgba(0,240,255,.4); }
.mk-logo .spark { color: var(--mk-neon); margin-left: 6px; text-shadow: 0 0 18px rgba(0,240,255,.9); position: relative; }
.mk-logo .spark::after { content: ""; position: absolute; top: -2px; right: -10px; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff, 0 0 20px var(--mk-neon); }
.mk-logo .sep { color: #374151; font-weight: 300; margin: 0 12px 0 16px; letter-spacing: 0; }
.mk-logo .int { font-size: 10px; letter-spacing: .2em; font-weight: 600; text-transform: uppercase; color: #9ca3af; }
header.top .brand > span:not(.mk-logo) { color: #6b7280 !important; font-size: 13px; font-weight: 500; margin-left: 10px; letter-spacing: 0; }
header.top a:not(.brand):not(.cta), header.top .small, header.top .link, header.top button.link { color: #9ca3af !important; text-decoration: none; background: none; border: 0; font: inherit; font-size: 14px; cursor: pointer; }
header.top a:not(.brand):not(.cta):hover, header.top .link:hover { color: var(--mk-neon) !important; }
header.top .cta, header.top .cta.ghost { background: transparent; color: var(--mk-neon); border: 1px solid rgba(0,240,255,.45); padding: 9px 14px; font-size: 14px; }
header.top .cta:hover { background: rgba(0,240,255,.08); }
.mk-nav { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.mk-nav a { font-size: 14px; }
.mk-lang { position: relative; }
.mk-lang > button { background: none; border: 1px solid #374151; color: #d1d5db; border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.mk-lang > button:hover { border-color: var(--mk-neon); color: var(--mk-neon); }
.mk-lang ul { position: absolute; right: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 4px; background: var(--mk-midnight); border: 1px solid var(--mk-edge); border-radius: 10px; min-width: 72px; display: none; box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.mk-lang.open ul { display: block; }
.mk-lang li button { display: block; width: 100%; text-align: left; background: none; border: 0; color: #9ca3af; padding: 8px 12px; font: inherit; font-size: 13px; border-radius: 6px; cursor: pointer; }
.mk-lang li button:hover, .mk-lang li button[aria-current="true"] { color: var(--mk-neon); background: rgba(0,240,255,.06); }
@media (max-width: 760px) {
  .mk-nav .mk-navlink { display: none; }
  .mk-logo { font-size: 17px; }
  .mk-logo .sep, .mk-logo .int { display: none; }
  header.top .brand > span:not(.mk-logo) { display: none; }
}

/* Dark top band on pages that have a hero */
.hero {
  color: #d1d5db;
  border-image: linear-gradient(var(--mk-obsidian) 0, var(--mk-obsidian) calc(100% - 110px), #1a2230 calc(100% - 55px), var(--bg) 100%) fill 0 // 0 100vw;
  padding-top: 52px !important;
  padding-bottom: 110px !important;
  margin-bottom: 8px;
  position: relative;
}
.hero::before {
  content: ""; position: absolute; left: 50%; top: -40px; width: min(520px, 100%); height: 260px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,240,255,.13), transparent); pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { color: #fff !important; }
.hero .lede, .hero p, .hero .hint, .hero .updated { color: #9ca3af !important; }
.hero .kicker { color: var(--mk-neon) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; font-size: 12px; }
.hero a:not(.cta) { color: var(--mk-neon); }
.hero .cta { background: var(--mk-neon); color: var(--mk-obsidian); font-weight: 700; }
.hero .cta:hover { background: #67f6ff; }
.hero .cta.ghost { background: transparent; color: var(--mk-neon); border: 1px solid rgba(0,240,255,.45); }
.hero input, .hero select { background: #0b1220 !important; color: #e5e7eb !important; border-color: #334155 !important; }

/* Footer: dark like the homepage */
footer {
  background: var(--mk-obsidian) !important;
  color: #9ca3af !important;
  border-top: 1px solid var(--mk-edge);
  margin-top: 40px;
}
footer a { color: #d1d5db !important; }
footer a:hover { color: var(--mk-neon) !important; }
footer .mk-foot-brand { color: var(--mk-neon); font-weight: 900; letter-spacing: .18em; font-size: 14px; }

/* Cards and small details */
.card, .box, details { border-color: var(--line); }
.tick { background: var(--accent-soft) !important; color: var(--mk-cyan) !important; }
.steps span.on { background: var(--mk-cyan) !important; border-color: var(--mk-cyan) !important; }
input:focus, select:focus, textarea:focus { outline: 2px solid #67e8f9 !important; border-color: #67e8f9 !important; }

/* Long email addresses and links must never push the page sideways on phones */
main a, footer a, .box, td { overflow-wrap: anywhere; }
main div, main li { min-width: 0; }

/* Slow wave where the dark band meets the reading area. One thin strip, no extra elements; still for reduced motion. */
html { overflow-x: clip; }
.hero::after {
  content: ""; position: absolute; bottom: -1px; left: 50%; width: 100vw; margin-left: -50vw; height: 90px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 90%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23e9edf2%22 fill-opacity=%22.38%22 d=%22M0 48C150 18 450 78 600 48S1050 18 1200 48V90H0Z%22/%3E%3Cpath fill=%22%23e9edf2%22 d=%22M0 66C200 80 400 52 600 66S1000 52 1200 66V90H0Z%22/%3E%3C/svg%3E") repeat-x 0 100% / 100vw 90px;
  animation: mk-wave 30s linear infinite; pointer-events: none; z-index: 0;
}
@keyframes mk-wave { to { background-position: -100vw 100%; } }
@media (prefers-reduced-motion: reduce) { .hero::after { animation: none; } }

/* On-page contents beside the text on wide screens (pages with <main data-toc>) */
.mk-toc { display: none; }
.mk-toc-body h2 { scroll-margin-top: 24px; }
@media (min-width: 1100px) {
  .mk-has-toc .wrap.hero { max-width: 1100px; padding-left: 296px; }
  .mk-has-toc .mk-toc-wrap { max-width: 1100px; display: grid; grid-template-columns: 220px minmax(0, 780px); gap: 56px; align-items: start; }
  .mk-toc { display: block; position: sticky; top: 24px; margin-top: 28px; padding-top: 4px; }
  .mk-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
  .mk-toc li { margin: 0; }
  .mk-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; font-size: 14px; line-height: 1.4; transition: color .2s, border-color .2s; }
  .mk-toc a:hover { color: var(--ink); }
  .mk-toc a.on { color: var(--mk-cyan); border-left-color: var(--mk-cyan); font-weight: 600; }
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .mk-toc a { transition: none; } }